zenglf
2023-09-18 92ff846fb659c62037a32b1d8c15eae9df9d9b54
src/views/eam/modules/equipmentSeal/EquipmentSealForm.vue
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,508 @@
<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="24">
            <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"
            :hidden=true
          >
            <a-form-model-item
              label="变动方式"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="changeMethod"
            >
              <a-input
                v-model="model.changeMethod"
                placeholder="请输入变动方式"
                defaultValue="seal"
              ></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="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="equipmentSealDetailTable.loading"
          :columns="equipmentSealDetailTable.columns"
          :dataSource="equipmentSealDetailTable.dataSource"
          :maxHeight="300"
          :disabled="formDisabled"
          :alwaysEdit="true"
          :bordered="true"
          :rowNumber="true"
          :rowSelection="true"
          :toolbar="true"
          :toolbarConfig="toolbarConfig"
          :linkage-config="linkageConfig"
          :addDefaultRowNum="0"
        >
          <template slot="toolbarPrefix">
            <a-button
              type="primary"
              @click="selectEquipmentList"
              :disabled="formDisabled"
            >选择设备
            </a-button>
          </template>
          <template v-slot:action="props">
            <a-popconfirm
              title="确定删除吗?"
              @confirm="handleDL(props)"
            >
              <a>删除</a>
            </a-popconfirm>
          </template>
        </j-vxe-table>
      </a-tab-pane>
    </a-tabs>
    <equipment-select-modal ref="EquipmentSelectModal"></equipment-select-modal>
  </a-spin>
</template>
<script>
import { validateDuplicateValue } from '@/utils/util'
// import EquipmentSelection from '@/components/tools/EquipmentSelection.vue'
import EquipmentSelectModal from './EquipmentSelectModal.vue'
import { JVxeTableModelMixin } from '@/mixins/JVxeTableModelMixin.js'
import { JVXETypes } from '@comp/jeecg/JVxeTable'
import { getRefPromise, VALIDATE_FAILED } from '@/components/jeecg/JVxeTable/utils/vxeUtils.js'
import JFormContainer from '@/components/jeecg/JFormContainer'
export default {
  name: 'EquipmentSealForm',
  mixins: [JVxeTableModelMixin],
  components: {
    EquipmentSelectModal,
    JFormContainer
  },
  data() {
    return {
      changeMethod: 'seal',
      toolbarConfig: {
        // prefix å‰ç¼€ï¼›suffix åŽç¼€
        slot: ['prefix', 'suffix'],
        // add æ–°å¢žæŒ‰é’®ï¼›remove åˆ é™¤æŒ‰é’®ï¼›clearSelection æ¸…空选择按钮
        btn: ['remove', 'clearSelection']
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      addDefaultRowNum: 0,
      model: {},
      validatorRules: {
        num: [
          { required: true, message: '请输入单据号!' },
          { validator: (rule, value, callback) => validateDuplicateValue('mom_eam_equipment_change', 'num', value, this.model.id, callback) }
        ],
        remark: [
          { required: false, message: '请输入备注!' }
        ]
      },
      linkageConfig: [
        { handleVerify: this.handleVerify, key: 'maintenanceAfterUnseal' }
      ],
      refKeys: ['equipmentSealDetail'],
      tableKeys: ['equipmentSealDetail'],
      activeKey: 'equipmentSealDetail',
      // è®¾å¤‡å°å­˜æ˜Žç»†
      equipmentSealDetailTable: {
        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: 'equipmentChangeId',
            type: JVXETypes.hidden,
            placeholder: '请输入${title}',
            defaultValue: ''
          },
          {
            title: '设备ID',
            key: 'equipmentId',
            type: JVXETypes.hidden,
            defaultValue: ''
          },
          {
            title: '设备编码',
            key: 'equipmentNum',
            type: JVXETypes.normal,
            width: '150px',
            align: 'center'
            // placeholder: '请输入${title}',
          },
          // fixed: 'left'
          {
            title: '设备名称',
            key: 'equipmentName',
            type: JVXETypes.normal,
            disabled: true,
            width: '150px',
            align: 'center',
            defaultValue: ''
          },
          {
            title: '设备型号',
            key: 'model',
            type: JVXETypes.normal,
            disabled: true,
            width: '150px',
            align: 'center',
            defaultValue: ''
          },
          {
            title: '设备规格',
            key: 'specification',
            type: JVXETypes.normal,
            disabled: true,
            width: '150px',
            align: 'center',
            placeholder: '请输入${title}',
            defaultValue: ''
          },
          {
            title: '设备资产编码',
            key: 'assetNumber',
            type: JVXETypes.normal,
            width: '150px',
            align: 'center',
            defaultValue: ''
          },
          {
            title: '封存原因',
            key: 'sealReason',
            type: JVXETypes.input,
            width: '200px',
            align: 'center',
            placeholder: '请输入${title}',
            defaultValue: '',
            validateRules: [{
              required: true, // å¿…å¡«
              message: '请输入${title}' // æ˜¾ç¤ºçš„æ–‡æœ¬
            }]
          },
          {
            title: '封存日期',
            key: 'sealDate',
            type: JVXETypes.datetime,
            width: '150px',
            align: 'center',
            placeholder: '请选择${title}',
            defaultValue: '',
            validateRules: [{
              required: true, // å¿…å¡«
              message: '请输入${title}' // æ˜¾ç¤ºçš„æ–‡æœ¬
            }]
          },
          {
            title: '预计启封日期',
            key: 'planUnsealDate',
            type: JVXETypes.date,
            width: '150px',
            align: 'center',
            placeholder: '请输入${title}',
            defaultValue: ''
          },
          {
            title: '特种设备',
            key: 'specificEquipment',
            type: JVXETypes.hidden,
            disabled: true,
            placeholder: '请输入${title}',
            defaultValue: '',
            width: '150px'
          },
          {
            title: '特种设备',
            key: 'specificEquipment_dictText',
            type: JVXETypes.normal,
            disabled: true,
            width: '150px',
            align: 'center',
            defaultValue: ''
          },
          {
            title: '设备状态',
            key: 'equipmentStatus_dictText',
            type: JVXETypes.normal,
            disabled: true,
            width: '150px',
            align: 'center',
            defaultValue: ''
          },
          {
            title: '技术状态',
            key: 'technologyStatus_dictText',
            type: JVXETypes.normal,
            disabled: true,
            width: '150px',
            align: 'center',
            defaultValue: ''
          },
          {
            title: '设备位置',
            key: 'location',
            type: JVXETypes.normal,
            disabled: true,
            width: '200px',
            align: 'center'
          },
          {
            title: '重要度',
            key: 'equipmentImportanceId_dictText',
            type: JVXETypes.normal,
            disabled: true,
            width: '150px',
            align: 'center',
            defaultValue: ''
          },
          {
            title: '重要度',
            key: 'equipmentImportanceId',
            type: JVXETypes.hidden
          }
          // {
          //   title: '设备图片',
          //   key: 'equipmentPhoto',
          //   type: JVXETypes.slot,
          //   disabled: true,
          //   width: '150px',
          //   slotName: 'equipmentPhoto'
          // },
          // {
          //   title: '操作',
          //   key: 'action',
          //   type: JVXETypes.slot,
          //   disabled: true,
          //   width: '150px',
          //   align: "center",
          //   slotName: 'action',
          // },
        ]
      },
      url: {
        add: '/eam/equipmentSeal/add',
        edit: '/eam/equipmentSeal/edit',
        queryById: '/eam/equipmentSeal/queryById',
        equipmentSealDetail: {
          list: '/eam/equipmentSeal/listEquipmentSealDetailByMainId'
        }
      }
    }
  },
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    }
  },
  created() {
  },
  mounted() {
    this.$bus.$on('selectionRows', (data) => {
      // å¢žåŠ é€‰ä¸­çš„è®¾å¤‡åˆ°åˆ—è¡¨ä¸­
      this.addSelectedEquipments(data)
    })
  },
  methods: {
    handleChange(value, data) {
      this.$nextTick(() => {
        this.$set(data, 'maintenanceAfterUnseal', data.maintenanceAfterUnseal)
      })
    },
    handleVerify(parent) {
      if (parent == 'Y') {
        // å¿…填。
      }
    },
    selectionRows(data) {
      // å¢žåŠ é€‰ä¸­çš„è®¾å¤‡åˆ°åˆ—è¡¨ä¸­
      this.addSelectedEquipments(data)
    },
    handleDL(props) {
      // è°ƒç”¨åˆ é™¤æ–¹æ³•
      props.target.removeRows(props.row)
    },
    //选择设备
    selectEquipmentList() {
      let ids = []
      let tableData = this.$refs.equipmentSealDetail.getTableData()
      let deleteData = this.$refs.equipmentSealDetail.getDeleteData()
      for (let i = 0; i < tableData.length; i++) {
        ids.push(tableData[i].equipmentId)
      }
      // this.$refs.EquipmentSelection.showModals(ids, tableData)
      // this.$refs.EquipmentSelection.title = '选择设备'
      // this.$refs.EquipmentSelection.disableSubmit = false
      this.$refs.EquipmentSelectModal.showModals(ids)
      this.$refs.EquipmentSelectModal.title = '选择设备'
      this.$refs.EquipmentSelectModal.disableSubmit = false
    },
    addSelectedEquipments(data) {
      let tableData = this.$refs.equipmentSealDetail.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,
            equipmentPhoto: data[i].equipmentPhoto,
            location: data[i].location,
            equipmentImportanceId_dictText: data[i].equipmentImportanceId_dictText,
            equipmentImportanceId: data[i].equipmentImportanceId
          }
        }
        addRows.push(sealDetail)
      }
      // this.$refs.equipmentSealDetail.clearAllData()
      this.$refs.equipmentSealDetail.pushRows(addRows)
    },
    addBefore() {
      this.equipmentSealDetailTable.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 = { equipmentChangeId: this.model.id }
        this.requestSubTableData(this.url.equipmentSealDetail.list, params, this.equipmentSealDetailTable)
      }
    },
    //校验所有一对一子表表单
    validateSubForm(allValues) {
      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, // å±•å¼€
        equipmentSealDetailList: allValues.tablesValue[0].tableData
      }
    },
    validateError(msg) {
      this.$message.error(msg)
    }
  }
}
</script>
<style scoped>
/deep/ .jeecg-tabs-top {
  overflow: visible;
}
</style>