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

zenglf

2023-09-18 92ff846fb659c62037a32b1d8c15eae9df9d9b54

 src/views/eam/modules/equipmentChange/EquipmentChangeDetailModal.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,945 @@
<template>
  <a-modal
    :title='title'
    :width='1200'
    :visible='visible'
    :maskClosable='false'
    @ok='handleOk'
    cancelText='关闭'
    @cancel='handleCancel'
    :confirmLoading='confirmLoading'
  >

    <a-spin :spinning='confirmLoading'>
      <a-form-model :form='form' ref='form' :model='model' :rules='validatorRules'>
        <a-row>
          <a-col :span='24'>
            <a-form-model-item label='单据号' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='num'>
              <a-input v-model='model.num' placeholder='请输入单据号' :disabled="disableSubmit"></a-input>
            </a-form-model-item>
          </a-col>

          <a-col :span='24'>
            <a-form-model-item label='备注' :labelCol='labelCol' :wrapperCol='wrapperCol' prop='remark'>
              <a-textarea v-model='model.remark' rows="3" placeholder='请输入备注' :disabled="disableSubmit"></a-textarea>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
    <a-button
      type='primary'
      :style="{ marginRight: '8px',marginBottom:'8px' }"
      :loading='confirmLoading'
      :disabled="disableSubmit"
      @click='selectInspectionProjects()'
    >设备信息
    </a-button>

    <a-table
      ref='table'
      bordered
      size='middle'
      rowKey='id'
      :columns='columns'
      :dataSource='dataSource'
      :scroll="{ x: 'calc(980px + 40%)', y: 900 }"
    >

      <template
        v-for='col in columns'
        :slot='col.dataIndex'
        slot-scope='text, record, index'
      >
        <div :key='col.dataIndex'>


          <a-select
            :value='text'
            placeholder='请选择'
            v-if="col.dataIndex === 'beforeDepartId'"
            :options='record.departVoList'
            :disabled=true
            @change='(e) => handleChange(e, record.key, col, index)'
            style='width: 100%'
          />
          <a-select
            :value='text'
            placeholder='请选择'
            v-if="col.dataIndex === 'afterDepartId'"
            :options='record.departVoList'
            :disabled="disableSubmit"
            @change='(e) => handleChange(e, record.key, col, index)'
            style='width: 100%'
          />
          <a-select
            v-if="col.dataIndex === 'beforeManager'"
            :value='text'
            placeholder='请选择'
            :disabled=true
            :options='record.userVoList'
            @change='(e) => handleChange(e, record.key, col, index)'
            style='width: 100%'
          />

          <a-select
            v-if="col.dataIndex === 'afterManager'"
            :value='text'
            placeholder='请选择'
            :disabled="disableSubmit"
            :options='record.userVoList'
            @change='(e) => handleChange(e, record.key, col, index)'
            style='width: 100%'
          />
          <a-select
            v-if="col.dataIndex === 'beforeUsageDepartId'"
            :value='text'
            placeholder='请选择'
            :disabled=true
            :options='record.departVoList'
            @change='(e) => handleChange(e, record.key, col, index)'
            style='width: 100%'
          />

          <a-select
            v-if="col.dataIndex === 'afterUsageDepartId'"
            :value='text'
            placeholder='请选择'
            :disabled="disableSubmit"
            :options='record.departVoList'
            @change='(e) => handleChange(e, record.key, col, index)'
            style='width: 100%'
          />


          <a-input
            :value='text'
            placeholder="请输入责任班组"
            :disabled=true
            v-if="col.dataIndex === 'beforeTeamId'"
            @change='(e)=>handleChange(e, record.key, col, index)'
          />


          <a-input
            :value='text'
            placeholder="请输入责任班组"
            :disabled="disableSubmit"
            v-if="col.dataIndex === 'afterTeamId'"
            @change='(e)=>handleChange(e, record.key, col, index)'
          />


          <a-select
            v-if="col.dataIndex === 'beforeFunctionary'"
            :value='text'
            placeholder='请选择'
            :disabled=true
            :options='record.userVoList'
            @change='(e) => handleChange(e, record.key, col, index)'
            style='width: 100%'
          />

          <a-select
            v-if="col.dataIndex === 'afterFunctionary'"
            :value='text'
            placeholder='请选择'
            :disabled="disableSubmit"
            :options='record.userVoList'
            @change='(e) => handleChange(e, record.key, col, index)'
            style='width: 100%'
          />


          <a-textarea
            :value='text'
            v-if="col.dataIndex == 'changeReason'"
            :maxLength="500"
            auto-size
            :disabled="disableSubmit"
            placeholder="请输入变动原因"
            @change='(e)=>handleChange(e, record.key, col, index)'
          />

          <a-input
            :value='text'
            v-if="col.dataIndex === 'afterLocation'"
            placeholder='请输入变动后位置'
            :disabled="disableSubmit"
            @change='(e)=>handleChange(e, record.key, col, index)'
          />

          <a-select
            v-if="col.dataIndex === 'afterTechnologyStatus'"
            :value='text'
            placeholder='请选择'
            :disabled="disableSubmit"
            :options='record.technologyStatusList'
            @change='(e) => handleChange(e, record.key, col, index)'
            style='width: 100%'
          />

          <a-select
            v-if="col.dataIndex === 'afterEquipmentStatus'"
            :value='text'
            placeholder='请选择'
            :disabled="disableSubmit"
            :options='record.equipmentStatusList'
            @change='(e) => handleChange(e, record.key, col, index)'
            style='width: 100%'
          />
          <a-select
            v-if="col.dataIndex === 'changeType'"
            :value='text'
            placeholder='请选择'
            :disabled="disableSubmit"
            :options='record.changeTypeList'
            @change='(e) => handleChange(e, record.key, col, index)'
            style='width: 100%'
          />

        </div>
      </template>
      <span
        slot='action'
        slot-scope='text, record, index'
      >
        <a-popconfirm
          title='确定删除吗?'
          :disabled="disableSubmit"
          @confirm='() => handleDelete(text,record, index)'
        >
          <a>删除</a>
        </a-popconfirm>
      </span>
    </a-table>
    <template slot='footer'>
      <a-button
        :style="{marginRight: '8px'}"
        @click='handleCancel()'
      >
        å…³é—­
      </a-button>

      <a-button
        @click='handleOk()'
        type='primary'
        :disabled="disableSubmit"
        :loading='confirmLoading'
      >确定
      </a-button>
    </template>


    <j-select-equipment-modal ref='equipmentChangeModalForm'></j-select-equipment-modal>
  </a-modal>

</template>

<script>
import { getAction, postAction, requestPut } from '@/api/manage'
import JMultiSelectTag from '@/components/dict/JMultiSelectTag'
import Tooltip from 'ant-design-vue/es/tooltip'

import pick from 'lodash.pick'
import { validateDuplicateValue } from '@/utils/util'
import JSelectEquipmentModal from '@views/common/JSelectEquipmentModal'

export default {
  name: 'EquipmentChangeDetailModal',
  components: {
    JMultiSelectTag,
    Tooltip,

    JSelectEquipmentModal
  },
  data() {
    return {
      replaceFields: {
        value: 'key'
      },

      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          },
          width: 50
        },
        {
          title: '设备编码',
          width: 150,
          align: 'center',
          dataIndex: 'equipmentNum'
        },
        {
          title: '设备名称',
          align: 'center',
          width: 150,
          dataIndex: 'equipmentName'

        },
        {
          title: '型号',
          align: 'center',
          width: 150,
          dataIndex: 'specification',
          ellipsis: true,


        },
        {
          title: '规格',
          align: 'center',
          width: 150,
          dataIndex: 'model'

        },
        {
          title: '变动前管理部门',
          align: 'center',
          width: 150,
          dataIndex: 'beforeDepartId',
          scopedSlots: {
            customRender: 'beforeDepartId'
          }
        },
        {
          title: '变动前管理人',
          align: 'center',
          width: 150,
          disabled: true,
          dataIndex: 'beforeManager',
          scopedSlots: {
            customRender: 'beforeManager'
          }
        },
        {
          title: '变动前使用部门',
          align: 'center',
          width: 150,
          disabled: true,
          dataIndex: 'beforeUsageDepartId',
          scopedSlots: {
            customRender: 'beforeUsageDepartId'
          }

        },
        {
          title: '变动前责任班组',
          align: 'center',
          width: 150,
          disabled: true,
          dataIndex: 'beforeTeamId',
          scopedSlots: {
            customRender: 'beforeTeamId'
          }

        },

        {
          title: '变动前责任人',
          align: 'center',
          width: 150,
          disabled: true,
          dataIndex: 'beforeFunctionary',
          scopedSlots: {
            customRender: 'beforeFunctionary'
          }
        },
        {
          title: '变动前位置',
          width: 150,
          align: 'center',
          dataIndex: 'beforeLocation'

        },
        {
          title: '变动前设备状态',
          align: 'center',
          width: 150,
          disabled: true,
          dataIndex: 'beforeEquipmentStatus'

        },
        {
          width: 150,
          title: '变动前技术状态',
          align: 'center',
          disabled: true,
          dataIndex: 'beforeTechnologyStatus'

        },
        {
          title: '变动类型',
          align: 'center',
          width: 150,
          dataIndex: 'changeType',
          scopedSlots: {
            customRender: 'changeType'
          }

        },
        {
          title: '变动原因',
          align: 'center',
          width: 150,
          ellipsis: true,
          dataIndex: 'changeReason',
          scopedSlots: {
            customRender: 'changeReason'
          }
        },
        {
          title: '变动前管理部门',
          align: 'center',
          width: 150,
          dataIndex: 'beforeDepartId',
          scopedSlots: {
            customRender: 'beforeDepartId'
          }
        },

        {
          title: '变动后管理部门',
          align: 'center',
          width: 150,
          dataIndex: 'afterDepartId',
          scopedSlots: {
            customRender: 'afterDepartId'
          }
        },
        {
          title: '变动前管理人',
          align: 'center',
          width: 150,
          dataIndex: 'beforeManager',
          scopedSlots: {
            customRender: 'beforeManager'
          }
        },

        {
          title: '变动后管理人',
          align: 'center',
          width: 150,
          dataIndex: 'afterManager',
          scopedSlots: {
            customRender: 'afterManager'
          }
        },
        {
          title: '变动前使用部门',
          align: 'center',
          width: 150,
          dataIndex: 'beforeUsageDepartId',
          scopedSlots: {
            customRender: 'beforeUsageDepartId'
          }

        },
        {
          title: '变动后使用部门',
          align: 'center',
          width: 150,
          dataIndex: 'afterUsageDepartId',
          scopedSlots: {
            customRender: 'afterUsageDepartId'
          }

        },
        {
          title: '变动前责任班组',
          align: 'center',
          width: 150,
          dataIndex: 'beforeTeamId',
          scopedSlots: {
            customRender: 'beforeTeamId'
          }

        },

        {
          title: '变动后责任班组',
          align: 'center',
          width: 150,
          dataIndex: 'afterTeamId',
          scopedSlots: {
            customRender: 'afterTeamId'
          }
        },
        {
          title: '变动前责任人',
          align: 'center',
          width: 150,
          dataIndex: 'beforeFunctionary',
          scopedSlots: {
            customRender: 'beforeFunctionary'
          }
        },

        {
          title: '变动后责任人',
          align: 'center',
          width: 150,
          dataIndex: 'afterFunctionary',
          scopedSlots: {
            customRender: 'afterFunctionary'
          }

        },
        {
          title: '变动前位置',
          width: 150,
          align: 'center',
          dataIndex: 'beforeLocation'

        },
        {
          title: '变动后位置',
          align: 'center',
          width: 150,
          dataIndex: 'afterLocation',
          scopedSlots: {
            customRender: 'afterLocation'
          }

        },
        {
          title: '变动前设备状态',
          align: 'center',
          width: 150,
          dataIndex: 'beforeEquipmentStatus'

        },
        {
          title: '变动后设备状态',
          align: 'center',
          width: 150,
          dataIndex: 'afterEquipmentStatus',
          scopedSlots: {
            customRender: 'afterEquipmentStatus'
          }

        },
        {
          width: 150,
          title: '变动前技术状态',
          align: 'center',
          dataIndex: 'beforeTechnologyStatus'

        },
        {
          title: '变动后技术状态',
          align: 'center',
          width: 150,
          dataIndex: 'afterTechnologyStatus',
          scopedSlots: {
            customRender: 'afterTechnologyStatus'
          }

        },
        {
          title: '操作',
          fixed: 'right',
          width: 100,
          align: 'center',
          dataIndex: 'action',
          scopedSlots: {
            customRender: 'action'
          }
        }
      ],
      title: '操作',
      visible: false,
      visible4Confirm: false,
      disableSubmit: false,
      codeDisable: true,
      model: {},
      dateFormat: 'YYYY-MM-DD HH:mm:ss',
      text: '',
      position: '',
      userVoList: {},
      departVoList: {},
      workOrder: {},
      technologyStatusList:{},
      changeTypeList: {},
      equipmentStatusList: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {
        num: [
          { required: true, message: '请输入单号!' },
          { validator: (rule, value, callback) => validateDuplicateValue('mom_eam_equipment_change', 'num', value, this.model.id, callback) }
        ]
      },

      url: {
        add: '/eam/equipmentChange/add',
        edit: '/eam/equipmentChange/edit',
        userVoList: '/eam/equipmentChangeDetail/getUser',
        departVoList: 'eam/equipmentChangeDetail/getDepart',
        equipmentStatusVoList: '/eam/equipmentChangeDetail/getEquipmentStatus',
        logVoList: '/eam/equipmentChangeDetail/getTechnologyStatus',
        changeList: '/eam/equipmentChangeDetail/getChangeType'
      },
      dataSource: []


    }
  },
  created() {
    //备份model原始值

  },

  mounted() {
    this.$bus.$on('selectionRows', (data) => {
      for (let i = 0; i < data.length; i++) {
        this.dataSource.push({
          id: data[i].id,
          equipmentId: data[i].id,
          beforeLocation: data[i].location,
          equipmentNum: data[i].num,
          equipmentName: data[i].name,
          model: data[i].model,
          beforeEquipmentStatus: data[i].equipmentStatus_dictText,
          beforeTechnologyStatus: data[i].technologyStatus_dictText,
          specification: data[i].specification,
          userVoList: this.userVoList,
          departVoList: this.departVoList,
          technologyStatusList:this.technologyStatusList,
          equipmentStatusList:this.equipmentStatusList,
          changeTypeList: this.changeTypeList,
          beforeUsageDepartId: data[i].useId,
          beforeDepartId: data[i].manageId,
          beforeManager: data[i].manager,
          beforeFunctionary: data[i].functionary

        })
      }

    })
  },


  methods: {


    /*获取设备状态*/
    /*获取设备状态*/
    getEquipmentStatueList() {
      getAction(this.url.equipmentStatusVoList).then((res) => {
        if (res.success) {
          this.equipmentStatusList = res.result

        } else {
          this.$message.warn(res.message)
        }
      })
    },

    /*获取技术状态*/
    getTechnologyList() {
      getAction(this.url.logVoList).then((res) => {
        if (res.success) {
          this.technologyStatusList = res.result

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

        } else {
          this.$message.warn(res.message)
        }
      })
    },

    /*获取部门列表*/
    getInDepartList() {
      getAction(this.url.departVoList).then((res) => {
        if (res.success) {
          this.departVoList = res.result

        } else {
          this.$message.warn(res.message)
        }
      })
    },
    /*获取管理人列表*/
    getInUseList() {
      getAction(this.url.userVoList).then((res) => {
        if (res.success) {

          this.userVoList = res.result
        } else {
          this.$message.warn(res.message)
        }
      })
    },


    //选择点检项目
    selectInspectionProjects: function() {
      let ids = []
      for (let i = 0; i < this.dataSource.length; i++) {
        ids.push(this.dataSource[i].equipmentId)
      }
      this.$refs.equipmentChangeModalForm.showModals(ids)
      this.$refs.equipmentChangeModalForm.title = '选择设备信息'
      this.$refs.equipmentChangeModalForm.disableSubmit = false
    },

    add() {
      this.model.changeMethod = 'change'
      this.edit(this.model, { equipmentChangeDetailList: [] })
    },


    edit(record) {
      let that = this
      this.getInDepartList()
      this.getInUseList()
      this.getEquipmentStatueList()
      this.getTechnologyList()
      this.getChangeTypeList()
      that.dataSource = []
      this.form.resetFields()
      this.model = Object.assign({}, record)
      this.visible = true
      if (record.equipmentChangeDetailList != undefined) {
        const temp = [...record.equipmentChangeDetailList]
        that.dataSource = temp
      }
      that.$nextTick(() => {
        that.form.setFieldsValue(pick(that.model, 'num', 'remark'))
      })
      if (record.id) {
        this.codeDisable = true
      } else {
        this.codeDisable = false
      }
    },


    close() {
      this.$emit('close')
      this.visible = false
    },

    handleCancel() {
      this.close()
    },

    handleChange(value, key, column, index) {
      let that = this
      const temp = [...that.dataSource]
      const target = temp.filter(item => key === item.key)[index]
      if (target) {
        if (column.dataIndex === 'beforeDepartId') {

          target[column.dataIndex] = value

        } else if (column.dataIndex === 'afterDepartId') {
          target[column.dataIndex] = value

        } else if (column.dataIndex === 'beforeManager') {

          target[column.dataIndex] = value
        } else if (column.dataIndex === 'afterManager') {

          target[column.dataIndex] = value

        } else if (column.dataIndex === 'beforeUsageDepartId') {

          target[column.dataIndex] = value

        } else if (column.dataIndex === 'afterUsageDepartId') {

          target[column.dataIndex] = value

        } else if (column.dataIndex === 'beforeTeamId') {


          target[column.dataIndex] = value.target.value

        } else if (column.dataIndex === 'afterTeamId') {

          target[column.dataIndex] = value.target.value

        } else if (column.dataIndex === 'beforeFunctionary') {

          target[column.dataIndex] = value
        } else if (column.dataIndex === 'afterFunctionary') {

          target[column.dataIndex] = value
        } else if (column.dataIndex === 'changeReason') {

          target[column.dataIndex] = value.target.value
        } else if (column.dataIndex === 'afterLocation') {

          target[column.dataIndex] = value.target.value
        } else if (column.dataIndex === 'afterTechnologyStatus') {

          target[column.dataIndex] = value
        } else if (column.dataIndex === 'afterEquipmentStatus') {

          target[column.dataIndex] = value
        } else if (column.dataIndex === 'changeType') {

          target[column.dataIndex] = value
        }

        //显示带过来的数据

        that.dataSource = temp

      }
    },

    handleOk() {
      const that = this
      this.$refs.form.validate(valid => {
        if (valid) {
          that.confirmLoading = true
          let formData = Object.assign(this.model, valid)
          formData.equipmentChangeDetailList = that.dataSource
          if (that.dataSource.length ===0){
            that.confirmLoading = false
            that.$message.warning("请添加变动明细")
            return
          }
          for (let annItem of that.dataSource) {


            if (annItem.equipmentId === undefined || annItem.equipmentId == null || annItem.equipmentId === '') {
              that.$message.warning('当前设备信息错误，重新选择设备')
              that.confirmLoading = false
              return
            }

            if (annItem.changeType === undefined || annItem.changeType == null || annItem.changeType === '') {
              that.$message.warning('请选择变动类型')
              that.confirmLoading = false
              return
            }
            if (annItem.afterLocation === undefined || annItem.afterLocation == null || annItem.afterLocation === '') {
              that.$message.warning('请填写变动后位置')
              that.confirmLoading = false
              return
            }
            if (annItem.afterEquipmentStatus === undefined || annItem.afterEquipmentStatus == null || annItem.afterEquipmentStatus === '') {
              that.$message.warning('请选择变动后设备状态')
              that.confirmLoading = false
              return
            }
            if (annItem.afterTechnologyStatus === undefined || annItem.afterTechnologyStatus == null || annItem.afterTechnologyStatus === '') {
              that.$message.warning('请选择变动后技术状态')
              that.confirmLoading = false
              return
            }

            if (annItem.afterDepartId === undefined || annItem.afterDepartId == null || annItem.afterDepartId === '') {
              that.$message.warning('请选择变动后管理部门')
              that.confirmLoading = false
              return
            }
            if (annItem.afterManager === undefined || annItem.afterManager == null || annItem.afterManager === '') {
              that.$message.warning('请选择变动后管理人')
              that.confirmLoading = false
              return
            }
            if (annItem.afterManager === undefined || annItem.afterManager == null || annItem.afterManager === '') {
              that.$message.warning('请选择变动后管理人')
              that.confirmLoading = false
              return
            }
            if (annItem.afterFunctionary === undefined || annItem.afterFunctionary == null || annItem.afterFunctionary === '') {
              that.$message.warning('请选择变动后责任人')
              that.confirmLoading = false
              return
            }


          }


          let obj
          if (!this.model.id) {
            obj = postAction(this.url.add, formData)
          } else {
            obj = requestPut(this.url.edit, formData, { id: this.model.id })
          }
          obj.then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.$emit('ok')
            } else {
              that.$message.warning(res.message)
            }
          }).finally(() => {
            this.model = {}
            that.confirmLoading = false
            this.$set(this.model, 'auditStatus', 'notSubmitted')
            that.close()
          })
        }
      })
    },

    handleDelete(text, record, index) {
      this.dataSource.splice(index, 1)

    }


  }
}
</script>

<style lang='less' scoped>
/deep/ .frozenRowClass {
  color: #c9c9c9;
}

.fontweight {
  font-weight: bold;
}

.ant-btn {
  padding: 0 10px;
  margin-left: 3px;
}

.ant-form-item-control {
  line-height: 0px;
}

/** ä¸»è¡¨å•è¡Œé—´è· */
.ant-form .ant-form-item {
  margin-bottom: 10px;
}

/** Tab页面行间距 */
.ant-tabs-content .ant-form-item {
  margin-bottom: 0px;
}
</style>