xianmen-antd/src/views/check/checkjob/modules/FinishForm.vue

<template>
  <a-modal :title="modalTitle" :width="1300" :visible="visible" :confirmLoading="confirmLoading" class="ant-modal2"
    @cancel="handleCancel">
    <title-divider title="检查项目" width="90px"></title-divider>
    <a-table size="small" :data-source="requirementList" :columns="columns" bordered tableLayout="auto" rowKey="id"
      :pagination="false">
      <template #value="text, record">
        <a-input size="small" v-if="record.type == 0" v-model="record.value" />
        <a-select size="small" v-else v-model="record.value" style="width: 100%">
          <a-select-option v-for="option in record.options" :key="option" :label="option" :value="option">{{ option
          }}</a-select-option>
        </a-select>
      </template>
      <template #text="text, record">
        <a-input size="small" v-model="record.text" />
      </template>
    </a-table>
    <br>
    <a-form :form="form">
      <a-form-item v-show="false">
        <a-input v-decorator="['id']" type="hidden" />
      </a-form-item>
      <a-form-item v-show="false">
        <a-input v-decorator="['actualStartTime']" type="hidden" />
      </a-form-item>
      <a-form-item label="标准id" v-show="false">
        <a-input v-decorator="['standardId', { rules: [{ required: true, message: '标准id不能为空' }] }]" />
      </a-form-item>
      <row-list :col="2">
        <row-item>
          <a-form-item label="完成图片" :labelCol="BaseTool.Constant.labelCol" :wrapperCol="BaseTool.Constant.wrapperCol">
            <UploadImg :maxSize="20" v-decorator="['imgList']" />
          </a-form-item>
        </row-item>
        <row-item>
          <a-form-item label="附件" :labelCol="BaseTool.Constant.labelCol" :wrapperCol="BaseTool.Constant.wrapperCol">
            <UploadFile v-decorator="['fileList']" />
          </a-form-item>
        </row-item>
        <row-item>

        </row-item>
      </row-list>
      <a-form-item label="检查结果" :labelCol="BaseTool.Constant.labelCol2" :wrapperCol="BaseTool.Constant.wrapperCol2">
        <a-textarea :rows="4" v-decorator="['feedback']" />
      </a-form-item>
    </a-form>
    <template slot="footer">
      <a-button :loading="confirmLoading" type="primary" @click="save()">完成</a-button>
      <a-button :loading="confirmLoading" type="danger" @click="save(1)">完成并报修</a-button>
    </template>
    <base-form ref="baseModal" @ok="handleOk" />
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'
import { addCheckJob, finishJob } from '@/api/check/checkjob'
import UploadFile from '@/components/Upload/CUploadFile.vue'
import UploadImg from '@/components/Upload/CUploadImg.vue'
import BaseForm from '@/views/repair/application-form/modules/BaseForm'
import { fetchSbInfo } from '@/api/sb/info'
import { fetchCheckStandard } from '@/api/check/checkstandard'

export default {
  name: 'BaseCheckJob',
  components: {
    BaseForm,
    UploadFile,
    UploadImg,
  },
  data() {
    return {
      confirmLoading: false,
      modalTitle: null,
      form: this.$form.createForm(this),
      visible: false,
      // 下拉框map
      sbId: null,
      modelStandard: {},
      requirementList: [],
      columns: [
        // {
        //   title: '序号',
        //   dataIndex: 'index',
        //   customRender: (text, record, index) => {
        //     return `${index + 1}`
        //   },
        // },
        {
          title: '保养周期',
          dataIndex: 'period'
        },
        {
          title: '管理项目',
          dataIndex: 'manageItem',
        },
        {
          title: '检查项目',
          dataIndex: 'checkItem',
        },
        {
          title: '方法工具',
          dataIndex: 'method',
        },
        {
          title: '保养级别',
          dataIndex: 'checkLevel',
        },
        {
          title: '标准类型',
          dataIndex: 'sbTypeName',
        },
        {
          title: '内容',
          dataIndex: 'remark',
        },
        {
          title: '填报信息',
          dataIndex: 'value',
          width: '10%',
          scopedSlots: { customRender: 'value' },
        },
        {
          title: '备注',
          width: '10%',
          dataIndex: 'text',
          scopedSlots: { customRender: 'text' },
        },
      ],
    }
  },
  props: {
    /**
     * 检查类型： 1-负责 2-巡检
     */
    checkType: {
      type: Number,
      default: 1,
    },
  },
  created() {
    // 下拉框map
  },
  methods: {
    base(record) {
      this.visible = true
      fetchCheckStandard({ id: record.standardId }).then((res) => {
        this.modelStandard = res.data
        this.requirementList =
          res.data.requirementList &&
          res.data.requirementList.map((item, index) => {
            item.options = item.type == '1' && item.scope ? item.scope.split('-') : []
            item.value = null
            return {
              ...item,
            }
          })
      })
      // 如果是空标识添加
      this.modalTitle = '编辑'
      const {
        form: { setFieldsValue },
      } = this
      // 日期处理
      this.sbId = record.sbId
      this.$nextTick(() => {
        setFieldsValue(Object.assign(pick(record, ['id', 'standardId', 'feedback', 'imgList', 'fileList', 'actualStartTime'])))
      })
    },
    save(type) {
      const {
        form: { validateFieldsAndScroll },
      } = this
      this.confirmLoading = true
      validateFieldsAndScroll((errors, values) => {
        if (errors) {
          this.confirmLoading = false
          return
        }
        // 日期处理
        let isReturn = false
        this.requirementList.forEach((item) => {
          if (!item.value && item.type == 1) {
            isReturn = true
          }
        })
        if (isReturn) {
          this.confirmLoading = false
          this.$message.error('请填写检查结果')
          return
        }
        values.conTask = JSON.stringify(this.requirementList)
        console.log(values, 'values')
        finishJob(values)
          .then(() => {
            if (type === 1) {
              this.handleAdd()
            } else {
              this.handleCancel(values)
            }
          })
          .catch(() => {
            this.confirmLoading = false
          })
      })
    },
    handleCancel(values) {
      this.visible = false
      this.confirmLoading = false
      this.form.resetFields()
      this.$emit('ok', values)
    },
    handleAdd() {
      fetchSbInfo({ id: this.sbId }).then((res) => {
        this.visible = false
        const modal = this.$refs.baseModal
        // 使用位置绑定的是设备位置树 title（positionName），cph 仅在报修回写后才有值，这里优先取 positionName，兜底 cph 兼容老数据
        modal.base({ sbId: this.sbId, sbName: res.data.name, sbCph: res.data.positionName || res.data.cph })
      })
    },
    handleOk() {
      this.handleCancel()
    },
  },
}
</script>