Merge branch 'develop' of http://117.34.109.166:18448/r/vue_mdc_430

zenglf

2023-09-18 92ff846fb659c62037a32b1d8c15eae9df9d9b54

 src/views/eam/modules/projectMaintenanceOrder/ProjectMaintenanceOrderForm.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,742 @@
<template>
  <a-spin :spinning='confirmLoading'>
    <j-form-container :disabled='formDisabled'>
      <!-- ä¸»è¡¨å•åŒºåŸŸ -->
      <a-form-model
        ref='form'
        :model='model'
        :rules='validatorRules'
        slot='detail'
      >
        <a-row>
          <a-col :span='12'>
            <a-form-model-item
              label='计划单编号'
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
              prop='num'
            >
              <a-input
                v-model='model.num'
                placeholder='请输入计划单编号'
              ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span='12'>
            <a-form-model-item
              label='计划名称'
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
              prop='计划名称'
            >
              <a-input
                v-model='model.name'
                rows='4'
                placeholder='请输入计划名称'
              />
            </a-form-model-item>
          </a-col>
          <a-col :span='12'>
            <a-form-model-item
              label='计划开始日期'
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
              prop='planStartTime'
            >
              <j-date
                placeholder='请选择计划开始日期'
                v-model='model.planStartTime'
                style='width: 100%'
                :showTime='true'
                dateFormat='YYYY-MM-DD HH:mm:ss'
              />
            </a-form-model-item>
          </a-col>
          <a-col :span='12'>
            <a-form-model-item
              label='计划结束日期'
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
              prop='planEndTime'
            >
              <j-date
                placeholder='请选择计划结束日期'
                v-model='model.planEndTime'
                style='width: 100%'
                :showTime='true'
                dateFormat='YYYY-MM-DD HH:mm:ss'
              />
            </a-form-model-item>
          </a-col>
          <!-- <a-col :span='12'>
            <a-form-model-item label='实际开始日期' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='actualStartTime'>
              <j-date
                placeholder='请选择实际开始日期'
                v-model='model.actualStartTime'
                style='width: 100%'
                :showTime='true'
                dateFormat='YYYY-MM-DD HH:mm:ss'
              />
            </a-form-model-item>
          </a-col>
          <a-col :span='12'>
            <a-form-model-item label='实际结束日期' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='actualEndTime'>
              <j-date
                placeholder='请选择实际开始日期'
                v-model='model.actualEndTime'
                style='width: 100%'
                :showTime='true'
                dateFormat='YYYY-MM-DD HH:mm:ss'
              />
            </a-form-model-item>
          </a-col> -->
          <a-col :span='12'>
            <a-form-model-item
              label='附件'
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
              prop='annex'
            >
            <j-upload :returnUrl= "false" :isMultiple="false"  v-model="model.file" ></j-upload>
            </a-form-model-item>
          </a-col>
          <a-col :span='12'>
            <a-form-model-item
              label='备注'
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
              prop='remark'
            >
              <a-textarea
                v-model='model.remark'
                rows='4'
                placeholder='请输入备注'
              />
            </a-form-model-item>
          </a-col>

        </a-row>
      </a-form-model>
    </j-form-container>
    <!-- å­è¡¨å•åŒºåŸŸ -->
    <a-tabs
      v-model='activeKey'
      @change='handleChangeTabs'
    >
      <a-tab-pane
        tab='项目性维修明细'
        :key='refKeys[0]'
        :forceRender='true'
      >
        <j-vxe-table
          keep-source
          :ref='refKeys[0]'
          :loading='projectMaintenanceOrderDetailTable.loading'
          :columns='projectMaintenanceOrderDetailTable.columns'
          :dataSource='projectMaintenanceOrderDetailTable.dataSource'
          :maxHeight='400'
          :disabled='formDisabled'
          :rowNumber='true'
          :rowSelection='true'
          :alwaysEdit='true'
          :toolbar='true'
          :bordered='true'
          :toolbarConfig='toolbarConfig'
          :linkage-config='linkageConfig'
        >
          <template slot='toolbarPrefix'>
            <a-button
              type='primary'
              @click='selectEquipmentList'
              :disabled='formDisabled'
            >选择设备
            </a-button>
          </template>

          <template v-slot:supplierId='props'>
            <a-select
              v-model='props.row.supplierId'
              :options='supplierVoList'
              style='width: 100%'
              placeholder='请选择'
              @change='(e) => handleChange(e, props.row)'
            />

          </template>
          <template v-slot:teamId='props'>
            <a-select
              v-model='props.row.teamId'
              :options='teamVoList'
              style='width: 100%'
              placeholder='请选择'
              @change='(e) => handleChange(e, props.row)'
            />

          </template>
          <template v-slot:userId='props'>
            <a-select
              v-model='props.row.userId'
              :options='userVoList'
              style='width: 100%'
              placeholder='请选择'
              @change='(e) => handleChange(e, props.row)'
            />
            <!-- <a-select
                  placeholder="请选择责任人"
                  allowClear
                  showSearch
                  style='width: 100%'
                  v-model="props.row.userId"
              >
                <a-select-option  v-for="item of userVoList" :value="item.id" :key="item.id" >
                  {{item.realname}}
                </a-select-option>
            </a-select> -->
          </template>
        </j-vxe-table>
      </a-tab-pane>
    </a-tabs>
    <equipment-select-modal
      @selectionRows='selectionRows'
      :equipmentStatus="['2', '3']"
      ref='EquipmentSelectModal'
    ></equipment-select-modal>
  </a-spin>
</template>

<script>


import { validateDuplicateValue } from '@/utils/util'
import EquipmentSelectModal from '@/components/tools/EquipmentSelection.vue'

import { JVxeTableModelMixin } from '@/mixins/JVxeTableModelMixin.js'
import { JVXETypes } from '@comp/jeecg/JVxeTable'

import JFormContainer from '@/components/jeecg/JFormContainer'
import { getAction } from '@api/manage'
import { VALIDATE_FAILED, getRefPromise, validateFormAndTables,validateFormModelAndTables} from '@/components/jeecg/JVxeTable/utils/vxeUtils.js'

export default {
  name: 'ProjectMaintenanceOrderForm',
  mixins: [JVxeTableModelMixin],
  components: {
    EquipmentSelectModal,
    JFormContainer
  },
  data() {
    return {
      supplierVoList: {},
      userVoList: {},
      teamVoList: {},
      toolbarConfig: {
        // prefix å‰ç¼€ï¼›suffix åŽç¼€
        slot: ['prefix', 'suffix'],
        // add æ–°å¢žæŒ‰é’®ï¼›remove åˆ é™¤æŒ‰é’®ï¼›clearSelection æ¸…空选择按钮
        btn: ['remove', 'clearSelection']
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 }
      },
      // æ–°å¢žæ—¶å­è¡¨é»˜è®¤æ·»åŠ å‡ è¡Œç©ºæ•°æ®
      addDefaultRowNum: 0,
      model: {},
      validatorRules: {
        num: [
          { required: true, message: '请输入计划编号!' },
          { validator: (rule, value, callback) => validateDuplicateValue('mom_eam_project_maintenance_order', 'num', value, this.model.id, callback) }
        ],
        remark: [
          { required: false, message: '请输入备注!' }
        ]
      },
      linkageConfig: [
        { handleVerify: this.handleVerify, key: 'maintenanceAfterUnseal' }
      ],
      refKeys: ['projectMaintenanceOrderDetail'],
      tableKeys: ['projectMaintenanceOrderDetail'],
      activeKey: 'projectMaintenanceOrderDetail',
      projectMaintenanceOrderDetailTable: {
        loading: false,
        dataSource: [],
        columns: [
          // {
          //   title: '操作',
          //   key: 'action',
          //   width: '60px',
          //   type: FormTypes.slot, // å®šä¹‰è¯¥åˆ—为 è‡ªå®šä¹‰æ’值列
          //   slotName: 'action' // slot çš„名称，对应 v-slot å†’号后面和等号前面的内容
          // },
          {
            title: '设备封存明细id',
            key: 'id',
            type: JVXETypes.hidden,
            width: '100px',
            fixed: 'left'
          },
          {
            title: '项目性维修单id',
            key: 'projectMaintenanceOrderId',
            type: JVXETypes.hidden,

            placeholder: '请输入${title}',
            defaultValue: ''
          },
          {
            title: '设备ID',
            key: 'equipmentId',
            type: JVXETypes.hidden,
            defaultValue: ''
          },
          {
            title: '任务编码',
            key: 'taskNum',
            type: JVXETypes.input,
            width: '180px',
            align: "center",
            fixed: 'left',
            validateRules: [
              {
                required: true, // å¿…å¡«
                message: '请输入${title}' // æ˜¾ç¤ºçš„文本
              }]
          },
          {
            title: '设备编码',
            key: 'equipmentNum',
            type: JVXETypes.normal,
            width: '140px',
            align: "center",
            fixed: 'left'
          },
          {
            title: '资产编码',
            key: 'assetNumber',
            type: JVXETypes.normal,
            width: '140px',
            align: "center",
            fixed: 'left',
            defaultValue: ''
          },
          {
            title: '委外单位',
            key: 'supplierId',
            type: JVXETypes.slot,
            disabled: true,
            width: '140px',
            align: "center",
            slotName: 'supplierId',
            defaultValue: ''
          },
          {
            title: '委外单位',
            key: 'supplierId',
            type: JVXETypes.hidden
          },
          {
            title: '维保方式',
            key: 'maintenanceMode',
            type: JVXETypes.select,
            dictCode: 'maintenance_method',
            validateRules: [
              {
                required: true, // å¿…å¡«
                message: '请输入${title}' // æ˜¾ç¤ºçš„文本
              }],
            width: '140px',
            align: "center",
            defaultValue: ''
          },
          // {
          //   title: '特种设备',
          //   key: 'specificEquipment',
          //   type: JVXETypes.hidden,
          //   disabled: true,
          //   placeholder: '请输入${title}',
          //   defaultValue: ''
          // },
          // {
          //   title: '特种设备',
          //   key: 'specificEquipment_dictText',
          //   type: JVXETypes.slot,
          //   disabled: true,
          //   width: '100px',
          //   defaultValue: ''
          // },
          {
            title: '设备名称',
            key: 'equipmentName',
            type: JVXETypes.normal,
            disabled: true,
            width: '140px',
            align: "center",
            defaultValue: ''
          },
          {
            title: '设备型号',
            key: 'model',
            type: JVXETypes.normal,
            disabled: true,
            width: '140px',
            align: "center",
            defaultValue: ''
          },
          {
            title: '设备规格',
            key: 'specification',
            type: JVXETypes.normal,
            disabled: true,
            width: '140px',
            align: "center",
            placeholder: '请输入${title}',
            defaultValue: ''
          },
          {
            title: '设备状态',
            key: 'equipmentStatus_dictText',
            type: JVXETypes.normal,
            disabled: true,
            width: '140px',
            align: "center",
            // placeholder: '请输入${title}',
            defaultValue: ''
          },

          {
            title: '技术状态',
            key: 'technologyStatus_dictText',
            type: JVXETypes.normal,
            disabled: true,
            width: '140px',
            align: "center",
            defaultValue: ''
          },
          {
            title: '项目内容',
            key: 'itemName',
            type: JVXETypes.input,
            placeholder: '请输入${title}',
            width: '240px',
            validateRules: [{
              required: true, // å¿…å¡«
              message: '请输入${title}' // æ˜¾ç¤ºçš„文本
            }],
            align: "center",
            defaultValue: ''
          },
          {
            title: '紧急程度',
            key: 'urgency',
            type: JVXETypes.select,
            dictCode: 'urgency',
            placeholder: '请输入${title}',
            width: '140px',
            align: "center",
            defaultValue: ''
          },
          {
            title: '责任班组',
            key: 'teamId',
            type: JVXETypes.slot,
            disabled: true,
            width: '150px',
            placeholder: '请输入${title}',
            defaultValue: '',
            align: "center",
            slotName: 'teamId'
          },
          {
            title: '责任班组',
            key: 'teamId',
            type: JVXETypes.hidden
          },
          {
            title: '责任人',
            key: 'userId',
            type: JVXETypes.slot,
            disabled: true,
            width: '160px',
            placeholder: '请输入${title}',
            defaultValue: '',
            align: "center",
            slotName: 'userId'
          },
          {
            title: '责任人',
            key: 'userId',
            type: JVXETypes.hidden
          },
          {
            title: '计划开始时间',
            key: 'planStartTime',
            type: JVXETypes.datetime,
            width: '140px',
            align: "center",
            placeholder: '请输入${title}',
            defaultValue: ''
          }, {
            title: '计划完成时间',
            key: 'planEndTime',
            type: JVXETypes.datetime,
            width: '140px',
            align: "center",
            placeholder: '请输入${title}',
            defaultValue: ''
          },
          // {
          //   title: '实际开始时间',
          //   key: 'actualStartTime',
          //   type: JVXETypes.datetime,
          //   width: '120px',
          //   placeholder: '请输入${title}',
          //   defaultValue: ''
          // }, {
          //   title: '实际完成时间',
          //   key: 'actualEndTime',
          //   type: JVXETypes.datetime,
          //   width: '120px',
          //   placeholder: '请输入${title}',
          //   defaultValue: ''
          // }
        ]
      },
      url: {
        add: '/eam/projectMaintenanceOrder/add',
        edit: '/eam/projectMaintenanceOrder/edit',
        supplierVoList: 'eam/projectMaintenanceOrder/getSupplier',
        userVoList: 'eam/projectMaintenanceOrder/getUser',
        teamVoList: 'eam/projectMaintenanceOrder/getTeam',
        getSupplier: '/eam/projectMaintenanceOrder/getSupplier',
        queryById: '/eam/projectMaintenanceOrder/queryById',
        projectMaintenanceOrderDetail: {
          list: '/eam/projectMaintenanceOrder/queryProjectMaintenanceOrderDetailByMainId'
        },
        queryUserByTeamId: '/base/team/queryUserByTeamId'
      }
    }
  },
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    }
  },
  created() {
    this.getSuppler();
    this.getTeam();
    this.getUser();
  },
  methods: {

    handleOk() {
      this.model['annex'] = this.model.file[0].filePath;
      /** è§¦å‘表单验证 */
      this.getAllTable().then(tables => {
        /** ä¸€æ¬¡æ€§éªŒè¯ä¸»è¡¨å’Œæ‰€æœ‰çš„次表 */
        return validateFormModelAndTables(this.$refs.form,this.model, tables)
      }).then(allValues => {
        /** ä¸€æ¬¡æ€§éªŒè¯ä¸€å¯¹ä¸€çš„所有子表 */
        return this.validateSubForm(allValues)
      }).then(allValues => {
        if (typeof this.classifyIntoFormData !== 'function') {
          throw this.throwNotFunction('classifyIntoFormData')
        }
        let formData = this.classifyIntoFormData(allValues)
        // å‘起请求
        return this.request(formData)
      }).catch(e => {
        if (e.error === VALIDATE_FAILED) {
          // å¦‚果有未通过表单验证的子表，就自动跳转到它所在的tab
          this.activeKey = e.index == null ? this.activeKey : this.refKeys[e.index]
        } else {
          console.error(e)
        }
      })
    },

    getSuppler() {
      getAction(this.url.supplierVoList).then((res) => {
        if (res.success) {
          this.supplierVoList = res.result
        } else {
          this.$message.warn(res.message)
        }
      })
    },

    getUser() {
      getAction(this.url.userVoList).then((res) => {
        if (res.success) {
          this.userVoList = res.result
        } else {
          this.$message.warn(res.message)
        }
      })
    },
    getTeam() {
      getAction(this.url.teamVoList).then((res) => {
        if (res.success) {
          this.teamVoList = res.result
        } else {
          this.$message.warn(res.message)
        }
      })
    },
    // handleChangeTeam(value, data) {
    //   console.log(value)
    //   this.getUserVoList(value)
    //   console.log(data)
    //   this.$nextTick(() => {
    //     this.$set(data, 'teamId', data.teamId)
    //   })
    // },
    handleChange(value, data) {
      console.log(value)
      console.log(data)
      this.$nextTick(() => {
        this.$set(data, 'supplierId', data.supplierId)
        this.$set(data, 'teamId', data.teamId)
        this.$set(data, 'userId', data.userId)
      })
    },
    getUserVoList(val) {
      getAction(this.url.queryUserByTeamId, { teamId: val }).then(res => {
        if (res.success) {
          this.userVoList = res.result
        }
        else {
          this.$message.error(res.message);
        }
      })
    },
    handleVerify(parent) {
      if (parent == 'Y') {
        // å¿…填。
      }
    },
    selectionRows(data) {
      // å¢žåŠ é€‰ä¸­çš„设备到列表中
      this.addSelectedEquipments(data)
    },
    //选择设备
    selectEquipmentList() {
      let ids = []
      let tableData = this.$refs.projectMaintenanceOrderDetail.getTableData()
      let deleteData = this.$refs.projectMaintenanceOrderDetail.getDeleteData()
      for (let i = 0; i < tableData.length; i++) {
        ids.push(tableData[i].equipmentId)
      }
      this.$refs.EquipmentSelectModal.showModals(ids, tableData)
      this.$refs.EquipmentSelectModal.title = '选择设备'
      this.$refs.EquipmentSelectModal.disableSubmit = false
    },
    addSelectedEquipments(data) {
      let tableData = this.$refs.projectMaintenanceOrderDetail.getTableData()
      let tableStr = tableData.toString()
      let addRows = []
      for (let i = 0; i < data.length; i++) {
        var sealDetail = {}
        if (tableStr.indexOf(data[i].id) == -1) {
          sealDetail = {
            equipmentId: data[i].id,
            equipmentNum: data[i].num,
            equipmentName: data[i].name,
            assetNumber: data[i].assetNumber,
            specificEquipment_dictText: data[i].specificEquipment_dictText,
            specificEquipment: data[i].specificEquipment,
            model: data[i].model,
            specification: data[i].specification,
            equipmentStatus_dictText: data[i].equipmentStatus_dictText,
            equipmentStatus: data[i].equipmentStatus,
            technologyStatus_dictText: data[i].technologyStatus_dictText,
            technologyStatus: data[i].technologyStatus,
            supplierVoList: this.supplierVoList,
            userVoList: this.userVoList,
            teamVoList: this.teamVoList,
            userId: data[i].userId

          }
        }
        addRows.push(sealDetail)
      }
      this.$refs.projectMaintenanceOrderDetail.clearAllData()
      this.$refs.projectMaintenanceOrderDetail.pushRows(addRows)
    },
    addBefore() {
      this.projectMaintenanceOrderDetailTable.dataSource = []
    },
    getAllTable() {
      let values = this.tableKeys.map(key => getRefPromise(this, key))
      return Promise.all(values)
    },
    /** è°ƒç”¨å®Œedit()方法之后会自动调用此方法 */
    editAfter() {
      this.$nextTick(() => {
      })
      // åŠ è½½å­è¡¨æ•°æ®
      if (this.model.id) {
        let params = { id: this.model.id }
        this.requestSubTableData(this.url.projectMaintenanceOrderDetail.list, params, this.projectMaintenanceOrderDetailTable)
      }
    },
    //校验所有一对一子表表单
    validateSubForm(allValues) {
      if (this.$refs.projectMaintenanceOrderDetail.getTableData().length == 0) {
        this.$message.warning("请添加维修明细！")
        return
      }
      return new Promise((resolve, reject) => {
        Promise.all([]).then(() => {
          resolve(allValues)
        }).catch(e => {
          if (e.error === VALIDATE_FAILED) {
            // å¦‚果有未通过表单验证的子表，就自动跳转到它所在的tab
            this.activeKey = e.index == null ? this.activeKey : this.refKeys[e.index]
          } else {
            console.error(e)
          }
        })
      })
    },
    /** æ•´ç†æˆformData */
    classifyIntoFormData(allValues) {
      let main = Object.assign(this.model, allValues.formValue)
      return {
        ...main, // å±•å¼€
        projectMaintenanceOrderDetailList: allValues.tablesValue[0].tableData
      }
    },
    validateError(msg) {
      this.$message.error(msg)
    }

  }

}
</script>

<style scoped>
/** tab panel ä¸­æœ‰ä¸‹æ‹‰æ¡†/日期 è¿™ç±»å¸¦ä¸‹æ‹‰æ•ˆæžœçš„，需要加此样式 */

::v-deep .jeecg-tabs-top {
  overflow: visible;
}

::v-deep .ant-form-explain {
  position: absolute;
  right: -50px;
  top: 12px;
}
</style>