udiwms-vue-frame/src/views/dev/deptDeviceUpkeepDetail.vue

<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <!--        <div class="fl">-->
        <!--          {{ `巡检记录表&#45;&#45;${itemRow.itemName}[${itemRow.itemCode}]` }}-->
        <!--        </div>-->
        <div class="fr">
          <el-button @click="itemRow = null" v-if="!itemRow.finishFlag" >取消</el-button>
          <el-button type="primary" @click="commitItemCheck" v-if="!itemRow.finishFlag" >提交</el-button>
        </div>
      </div>
      <el-form :model="itemRow" :rules="itemRules" ref="itemForm" label-width="auto" :disabled="itemRow.finishFlag">
        <el-descriptions border :column="2" label-style="width:100px">
          <el-descriptions-item label="所属部门">
            {{ itemRow.deptName }}
          </el-descriptions-item>
          <el-descriptions-item label="设备名称">
            {{ itemRow.productName }}
          </el-descriptions-item>
          <el-descriptions-item label="设备编码">
            {{ itemRow.deviceCode }}
          </el-descriptions-item>
          <el-descriptions-item label="规格型号">
            {{ itemRow.ggxh }}
          </el-descriptions-item>
          <el-descriptions-item label="保养项目内容" :span="2">
            <el-table :data="itemList" v-loading="itemLoading" :border="false"
                      :row-style="{height:'35px'}"
                      :cell-style="{padding:'10px'}"
                      :show-header="false"
                      style="width: 100%;margin-top: 20px;margin-bottom: 20px">
              <el-table-column label="序号" width="50" type="index"/>
              <el-table-column label="项目编码" width="120" prop="itemCode"/>
              <el-table-column label="项目名称" width="140" prop="itemName"/>
              <el-table-column label="项目内容" width="220" prop="itemContent"/>
              <el-table-column label="完成情况" width="180" prop="finishFlag">
                <template slot-scope="scope">
                  <div>
                    <el-radio-group v-model="scope.row.normalFlag" size="mini">
                      <el-radio :label="true" border>正常</el-radio>
                      <el-radio :label="false" border style="margin-left: -15px">异常</el-radio>
                    </el-radio-group>

                  </div>
                </template>
              </el-table-column>
            </el-table>

          </el-descriptions-item>

          <el-descriptions-item label="补充说明" :span="2">
            <el-form-item label=" " prop="suggestion" style="margin-bottom: 10px">
              <el-input type="textarea" resize="none" :autosize="{ minRows: 4, maxRows: 4 }" clearable
                        show-word-limit
                        maxlength="300" v-model.trim="itemRow.suggestion"/>
            </el-form-item>
          </el-descriptions-item>
            <el-descriptions-item label="现场图片" :span="2" label-style="height:100px">
              <localImageUpload
                :fileType="['image/jpeg','image/png','image/gif']"
                :maxFiles= "this.maxFiles"
                :fileSizeLimit="this.fileSizeLimit"
                :type="deptDeviceCheck"
                :uploadedFileNames="this.uploadedFileNames"
                :isShowTip="false"
                @changeComponent1Data="component1DataChange"
              ></localImageUpload>
            </el-descriptions-item>
          <el-descriptions-item label="保养结果" :span="2">
            <el-form-item label=" " prop="normalFlag" style="margin-bottom: 0px">
              <el-radio-group v-model="itemRow.normalFlag">
                <el-radio :label="true">正常</el-radio>
                <el-radio :label="false">异常</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-descriptions-item>
        </el-descriptions>
      </el-form>
    </el-card>
  </div>

</template>

<script>
import {getLoading} from "@/utils";
import {deviceCheckDetailItemFinish, deviceUpkeepDetailItemPage} from "@/api/dev/deviceUpkeepDetailItemApi";
import {deviceCheckDetailFinish} from "@/api/dev/deviceUpkeepDetailApi";

let itemQuery = {
  page: 1,
  limit: 10,
  taskId: null,
  deviceCode: null,
}
export default {
  name: "deptDeviceUpkeepDetail",
  computed: {
    iRowStyle: function ({row, rowIndex}) {
      return 'height:50px';
    },
    iHeaderRowStyle: function ({row, rowIndex}) {
      return 'height:50px';
    },
    iCellStyle: function ({row, column, rowIndex, columnIndex}) {
      return 'padding:0px'
    },
  },
  props: {
    originData: {
      type: Object,
      required: true
    },
    closeCheckDialog: {required: false, type: Function}
  },
  data() {
    return {
      maxFiles: 3,
      fileSizeLimit: 5,
      uploadedFileNames: '',
      itemRow: {},
      itemLoading: false,
      itemList: [],
      itemTotal: 0,
      itemQuery: {...itemQuery},
      itemRules: {
        normalFlag: [{required: true, message: "请选择异常情况", trigger: ["change", "blur"]}],
        suggestion: [{required: true, message: "保养意见不能为空", trigger: ["change", "blur"]}],
      },
    }
  },
  methods: {
    commitItemCheck() {
      this.$refs.itemForm.validate(b => {
        if (!b) {
          return
        }
        for (let item of this.itemList) {
          if (item.normalFlag == null) {
            this.$message.error(item.itemName + "未勾选，请检查后提交");
            return
          }
        }
        let load = getLoading(this)
        let itemParam = {
          taskId: this.itemRow.taskId,
          deviceCode: this.itemRow.deviceCode,
          suggestion: this.itemRow.suggestion,
          normalFlag: this.itemRow.normalFlag,
          detailItemEntities: this.itemList,
          livePath: this.uploadedFileNames
        }
        deviceCheckDetailFinish(itemParam).then(res => {
          load.close()
          if (res.code != 20000) {
            this.$message.error(res.message)
            return
          }
          this.$message.success(res.message)
          console.log("zoudao zheli l ,e")
          this.closeCheckDialog();
        }).catch(() => {
          load.close()
        })
      })
    },
    component1DataChange(params) {
      this.uploadedFileNames = params;
    },
    //获取巡检项目
    getDetailItemList() {
      this.itemLoading = true
      deviceUpkeepDetailItemPage(this.itemQuery).then(res => {
        this.itemLoading = false
        if (res.code != 20000) {
          this.$message.error(res.message)
          return
        }
        this.itemList = res.data.list || []
        this.itemTotal = res.data.total || 0
      }).catch(e => {
        this.itemLoading = false
        this.itemList = []
        this.itemTotal = 0
      })
    },


  },
  created() {
    this.itemRow = this.originData
    this.itemQuery = {...itemQuery, deviceCode: this.itemRow.deviceCode, taskId: this.itemRow.taskId}
    this.getDetailItemList()
    this.uploadedFileNames = this.itemRow.livePath
  },
}
</script>

<style scoped>
/* 假设你想要更改表格的字体大小 */

.custom-table .el-table__row {
  height: 100px;
}
</style>