430/vue_mdc_430_new.git

<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>
          <!--          (封存-seal，启封-unseal,报废-scrap，处置-disposal)-->
          <!--          type ="hidden"-->
          <a-col :span="24" hidden>
            <a-form-model-item label="变动方式" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="changeMethod">
              <a-input v-model="model.changeMethod" defaultValue="disposal"></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-button-->
    <!--      type="primary"-->
    <!--      :style="{ marginRight: '8px',marginBottom:'8px' }"-->
    <!--      :loading="confirmLoading"-->
    <!--      @click="selectEquipmentList()"-->
    <!--    >选择设备-->
    <!--    </a-button>-->
    <!-- 子表单区域 -->
    <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="equipmentDisposalDetailTable.loading"
          :columns="equipmentDisposalDetailTable.columns"
          :dataSource="equipmentDisposalDetailTable.dataSource"
          :maxHeight="800"
          :disabled="formDisabled"
          :rowNumber="true"
          :rowSelection="true"
          :bordered="true"
          :alwaysEdit="true"
          :toolbar="true"
          :toolbarConfig="toolbarConfig"
        >
 
        <!-- 设备图片插槽 -->
        <template v-slot:equipmentPhoto='props'>
            <Tooltip
          placement="top"
          title="预览图片"
          >
            <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
            <img v-else :src="getImgView(text)" :preview="props.rowId" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
          </Tooltip>
          </template>
          <template v-slot:action="props">
            <a-popconfirm title="确定删除吗？" @confirm="handleDL(props)">
              <a>删除</a>
            </a-popconfirm>
          </template>
          <template slot="toolbarPrefix">
            <a-button type="primary" @click="selectEquipmentList" :disabled="formDisabled">选择设备
            </a-button>
          </template>
        </j-vxe-table>
      </a-tab-pane>
    </a-tabs>
 
    <equipment-select-modal ref="EquipmentSelectModal"></equipment-select-modal>
  </a-spin>
</template>
 
<script>
 
import { getAction } from '@/api/manage'
import { JVxeTableModelMixin } from '@/mixins/JVxeTableModelMixin.js'
import { JVXETypes } from '@/components/jeecg/JVxeTable'
import { getRefPromise, VALIDATE_FAILED } from '@/components/jeecg/JVxeTable/utils/vxeUtils.js'
import { validateDuplicateValue } from '@/utils/util'
import JFormContainer from '@/components/jeecg/JFormContainer'
import EquipmentSelectModal from '../equipmentScrap/EquipmentSelectModal.vue'
 
export default {
  name: 'EquipmentDisposalForm',
  mixins: [JVxeTableModelMixin],
  components: {
    JFormContainer,
    EquipmentSelectModal
  },
  data() {
    return {
      changeMethod: 'disposal',
      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 }
      },
      model: {},
      // 新增时子表默认添加几行空数据
      addDefaultRowNum: 0,
      validatorRules: {
        num: [
          { required: true, message: '请输入单据号!' },
          { validator: (rule, value, callback) => validateDuplicateValue('mom_eam_equipment_change', 'num', value, this.model.id, callback) }
        ],
        remark: [
          { required: false, message: '请输入备注!' }
        ]
      },
      refKeys: ['equipmentDisposalDetail'],
      tableKeys: ['equipmentDisposalDetail'],
      activeKey: 'equipmentDisposalDetail',
      // 设备处置明细
      equipmentDisposalDetailTable: {
        loading: false,
        dataSource: [],
        columns: [
          {
            title: '设备处置明细id',
            key: 'id',
            type: JVXETypes.hidden,
            width: '100px',
            align:"center",
          },
          {
            title: '设备变动单id',
            key: 'equipmentChangeId',
            type: JVXETypes.hidden,
            width: '200px',
            placeholder: '请输入${title}',
            align:"center",
            defaultValue: ''
          },
          {
            title: '设备ID',
            key: 'equipmentId',
            type: JVXETypes.hidden,
            disabled: true,
            width: '60px',
            placeholder: '请输入${title}',
            align:"center",
            defaultValue: ''
          },
          {
            title: '统一编码',
            key: 'equipmentNum',
            type: JVXETypes.normal,
            disabled: true,
            width: '200px',
            align:"center",
            defaultValue: '',
          },
          {
            title: '设备名称',
            key: 'equipmentName',
            type: JVXETypes.normal,
            disabled: true,
            width: '200px',
            align:"center",
            defaultValue: '',
            // fixed: 'left'
          },
          {
            title: '设备型号',
            key: 'model',
            type: JVXETypes.normal,
            disabled: true,
            width: '200px',
            align:"center",
            defaultValue: ''
          },
          {
            title: '设备规格',
            key: 'specification',
            type: JVXETypes.normal,
            disabled: true,
            width: '200px',
            align:"center",
            defaultValue: ''
          },
          {
            title: '设备状态',
            key: 'equipmentStatus_dictText',
            type: JVXETypes.normal,
            disabled: true,
            width: '195px',
            align:"center",
            defaultValue: ''
          },
          {
            title: '设备位置',
            key: 'location',
            type: JVXETypes.normal,
            disabled: true,
            width: '195px',
            align:"center",
            defaultValue: ''
          },
          {
            title: '特种设备',
            key: 'specificEquipment',
            type: JVXETypes.hidden,
            align:"center",
            disabled: true,
            width: '200px',
            // placeholder: '请输入${title}',
            defaultValue: ''
          },
          {
            title: '特种设备',
            key: 'specificEquipment_dictText',
            type: JVXETypes.normal,
            disabled: true,
            width: '200px',
            align:"center",
            defaultValue: ''
          },
          {
            title: '资产编码',
            key: 'assetNumber',
            type: JVXETypes.normal,
            disabled: true,
            width: '195px',
            align:"center",
            defaultValue: '',
          },
          {
            title: '处置原因',
            key: 'disposalReason',
            type: JVXETypes.input,
            align:"center",
            width: '195px',
            placeholder: '请输入${title}',
            defaultValue: '',
            validateRules: [
              {
                required: true, // 必填
                message: '请输入${title}' // 显示的文本
              }]
          },
          {
            title: '处置日期',
            key: 'disposalDate',
            type: JVXETypes.datetime,
            align:"center",
            width: '200px',
            placeholder: '请输入${title}',
            defaultValue: '',
            validateRules: [
              {
                required: true // 必填
                // message: '请输入${title}' // 显示的文本
              }
              // {
              //   // 自定义函数校验 handler
              //   handler(type, value, row, column, callback, target) {
              //     // type 触发校验的类型（input、change、blur、getValues）
              //     // value 当前校验的值
              //     // callback(flag, message) 方法必须执行且只能执行一次
              //     //          flag = 是否通过了校验，不填写或者填写 null 代表不进行任何操作
              //     //          message = 提示的消息，默认使用配置的 message
              //     // target 行编辑的实例对象
              //
              //     if (type === 'blur' || type === 'getValues') {
              //       let { values } = target.getValuesSync({ validate: false })
              //       // let count = 0
              //       // for (let val of values) {
              //       //   if (val['dbFieldName'] === value) {
              //       //     if (++count >= 2) {
              //       //       callback(false, '${title}不能重复')
              //       //       return
              //       //     }
              //       //   }
              //       // }
              //       callback(true) // true = 通过验证
              //     } else {
              //       callback() // 不填写或者填写 null 代表不进行任何操作
              //     }
              //   },
              //   message: '${title}默认提示'
              // }
            ]
          },
          {
            title: '减少方式',
            key: 'reduceMethod',
            type: JVXETypes.selectDictSearch,
            disabled: true,
            width: '200px',
            align:"center",
            defaultValue: '',
            dict:'mom_eam_transfer_method,name,id'
          },
          // {
          //   title: '特种设备',
          //   key: 'specificEquipment',
          //   type: JVXETypes.select,
          //   options: [],
          //   dictCode: 'specific_equipment',
          //   disabled: true,
          //   width: '200px',
          //   // placeholder: '请输入${title}',
          //   defaultValue: ''
          // },
          // {
          //   title: '设备状态',
          //   key: 'equipmentStatus',
          //   type: JVXETypes.select,
          //   options: [],
          //   dictCode: 'equipment_status',
          //   disabled: true,
          //   width: '200px',
          //   // placeholder: '请输入${title}',
          //   defaultValue: ''
          // },
          {
            title: '技术状态',
            key: 'technologyStatus_dictText',
            type: JVXETypes.normal,
            disabled: true,
            width: '200px',
            align:"center",
            defaultValue: ''
          },
          // {
          //   title: '技术状态',
          //   key: 'technologyStatus',
          //   type: JVXETypes.select,
          //   options: [],
          //   dictCode: 'technology_status',
          //   disabled: true,
          //   width: '200px',
          //   // placeholder: '请输入${title}',
          //   defaultValue: ''
          // },
          {
            title: '重要度',
            key: 'equipmentImportanceId_dictText',
            type: JVXETypes.normal,
            disabled: true,
            width: '195px',
            align:"center",
            defaultValue: ''
          },
         
          // {
          //   title: '重要度',
          //   key: 'equipmentImportanceId',
          //   type: JVXETypes.input,
          //   disabled: true,
          //   width: '200px',
          //   // placeholder: '请输入${title}',
          //   defaultValue: ''
          // },
          // {
          //   title: '设备图片',
          //   key: 'equipmentPhoto',
          //   type: JVXETypes.normal,
          //   width: '200px',
          //   // placeholder: '请输入${title}',
          //   defaultValue: ''
          // }
          // {
          //   title: '设备图片',
          //   key: 'equipmentPhoto',
          //   type: JVXETypes.slot,
          //   disabled: true,
          //   width: '120px',
          //   slotName:'equipmentPhoto'
 
          // },
          // {
          //   title: '操作',
          //   key: 'action',
          //   type: JVXETypes.slot,
          //   disabled: true,
          //   width: '100px',
          //   align:"center",
          //   slotName: 'action',
          // },
 
        ]
      },
      url: {
        add: '/eam/equipmentDisposal/add',
        edit: '/eam/equipmentDisposal/edit',
        queryById: '/eam/equipmentDisposal/queryById',
        equipmentDisposalDetail: {
          list: '/eam/equipmentDisposal/listEquipmentDisposalDetailByMainId'
        }
      }
    }
  },
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    }
  },
  mounted() {
    this.$bus.$on('selectionRows', (data) => {
      // 增加选中的设备到列表中
      this.addSelectedEquipments(data)
 
    })
  },
  created() {
  },
  methods: {
 
    //选择设备
    selectEquipmentList() {
      let ids = []
      let tableData = this.$refs.equipmentDisposalDetail.getTableData()
      let deleteData = this.$refs.equipmentDisposalDetail.getDeleteData()
      for (let i = 0; i < tableData.length; i++) {
        ids.push(tableData[i].equipmentId)
      }
      this.$refs.EquipmentSelectModal.showModals(ids)
      this.$refs.EquipmentSelectModal.title = '选择设备'
      this.$refs.EquipmentSelectModal.disableSubmit = false
    },
    addSelectedEquipments(data) {
      let tableData = this.$refs.equipmentDisposalDetail.getTableData()
      // const seletedEquipmentIds = tableData.
      var tableStr = JSON.stringify(tableData)
      const addRows = []
      for (let i = 0; i < data.length; i++) {
        var scrapDetail = {}
        if (tableStr.indexOf(data[i].id)==-1) {
          scrapDetail = {
            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(scrapDetail)
      }
 
      this.$refs.equipmentDisposalDetail.pushRows(addRows)
    },
    handleDL(props) {
        // 调用删除方法
        props.target.removeRows(props.row)
      },
    addBefore() {
      this.equipmentDisposalDetailTable.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.equipmentDisposalDetail.list, params, this.equipmentDisposalDetailTable)
      }
    },
    //校验所有一对一子表表单
    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)
      // this.main.changeMethod = this.changeMethod
      return {
        ...main, // 展开
        equipmentDisposalDetailList: allValues.tablesValue[0].tableData
      }
    },
    validateError(msg) {
      this.$message.error(msg)
    }
 
  }
}
</script>
 
<style scoped>
</style>