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

zenglf

2023-09-18 92ff846fb659c62037a32b1d8c15eae9df9d9b54

 src/views/eam/modules/equipmentScrap/EquipmentScrapForm.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,644 @@
<template>
  <a-spin :spinning="confirmLoading">

    <!--   <a-tabs v-model="activeKey" @change="handleChangeTabs">-->
    <!--主表区域 -->
    <!--    <a-tab-pane tab="设备变动" :key="refKeys[0]" :forceRender="true" :class="'jeecg-tabs-top'" :animated="false">-->
    <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-tab-pane>-->

<!--    <a-button-->
<!--      type="primary"-->
<!--      :style="{ marginRight: '8px',marginBottom:'8px' }"-->
<!--      :loading="confirmLoading"-->
<!--      @click="selectEquipmentList()"-->
<!--    >选择设备-->
<!--    </a-button>-->

    <!--子表单区域 -->
<!--    <a-tab-pane tab="设备报废明细" :key="refKeys[1]" :forceRender="true">-->
<!--      <j-editable-table-->
<!--        :ref="refKeys[1]"-->
<!--        :loading="equipmentScrapDetailTable.loading"-->
<!--        :columns="equipmentScrapDetailTable.columns"-->
<!--        :dataSource="equipmentScrapDetailTable.dataSource"-->
<!--        :maxHeight="800"-->
<!--        :rowNumber="true"-->
<!--        :rowSelection="true"-->
<!--        :actionButton="false">-->


<!--        <template v-slot:action="props">-->
<!--          <a @click="handleDelete(props)">删除</a>-->
<!--        </template>-->
<!--      </j-editable-table>-->
<!--    </a-tab-pane>-->

    <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="equipmentScrapDetailTable.loading"
          :columns="equipmentScrapDetailTable.columns"
          :dataSource="equipmentScrapDetailTable.dataSource"
          :maxHeight="900"
          :disabled="formDisabled"
          :rowNumber="true"
          :rowSelection="true"
          :alwaysEdit="true"
          :bordered="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 { FormTypes, getRefPromise } from '@/utils/JEditableTableUtil'
import { JEditableTableModelMixin } from '@/mixins/JEditableTableModelMixin'
import { randomUUID, randomNumber } from '@/utils/util'
// import JEditableTable from '@/components/jeecg/JEditableTable'
import { validateDuplicateValue } from '@/utils/util'
// import { VALIDATE_NO_PASSED, validateFormModelAndTables } from '@/utils/JEditableTableUtil'
import pick from 'lodash.pick'
import { getAction, postAction, requestPut } from '@api/manage'
import EquipmentSelectModal from './EquipmentSelectModal.vue'
import { JVxeTableModelMixin } from '@/mixins/JVxeTableModelMixin.js'
import { JVXETypes } from '@/components/jeecg/JVxeTable'
import { getRefPromise, VALIDATE_FAILED } from '@/components/jeecg/JVxeTable/utils/vxeUtils.js'

import JFormContainer from '@/components/jeecg/JFormContainer'
export default {
  name: 'EquipmentScrapForm',
  mixins: [JVxeTableModelMixin],
  components: {
    EquipmentSelectModal,
    JFormContainer
  },
  data() {
    return {
      changeMethod: 'scrap',
      toolbarConfig: {
        // prefix å‰ç¼€ï¼›suffix åŽç¼€
        slot: ['prefix', 'suffix'],
        // add æ–°å¢žæŒ‰é’®ï¼›remove åˆ é™¤æŒ‰é’®ï¼›clearSelection æ¸…空选择按钮
        btn: ['remove', 'clearSelection']
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 3 }
      },
      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: '请输入备注!' }
        ]
      },
      refKeys: ['equipmentScrapDetail'],
      tableKeys: ['equipmentScrapDetail'],
      activeKey: 'equipmentScrapDetail',
      // è®¾å¤‡æŠ¥åºŸæ˜Žç»†
      equipmentScrapDetailTable: {
        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',
            align:'center',
          },
          {
            title: '设备变动单id',
            key: 'equipmentChangeId',
            type: JVXETypes.hidden,
            width: '200px',
            placeholder: '请输入${title}',
            defaultValue: '',
            align:'center',
          },
          {
            title: '设备ID',
            key: 'equipmentId',
            type: JVXETypes.hidden,
            disabled: true,
            width: '60px',
            placeholder: '请输入${title}',
            defaultValue: '',
            align:'center',
          },
          {
            title: '设备编码',
            key: 'equipmentNum',
            type: JVXETypes.normal,
            disabled: true,
            width: '200px',
            // placeholder: '请输入${title}',
            defaultValue: '',
            align:'center',
          },
          {
            title: '设备名称',
            key: 'equipmentName',
            type: JVXETypes.normal,
            disabled: true,
            width: '200px',
            // placeholder: '请输入${title}',
            defaultValue: '',
            align:'center',
          },

          {
            title: '设备型号',
            key: 'model',
            type: JVXETypes.normal,
            disabled: true,
            width: '200px',
            // placeholder: '请输入${title}',
            defaultValue: '',
            align:'center',
          },
          {
            title: '设备规格',
            key: 'specification',
            type: JVXETypes.normal,
            disabled: true,
            width: '200px',
            // placeholder: '请输入${title}',
            defaultValue: '',
            align:'center',
          },
          {
            title: '设备状态',
            key: 'equipmentStatus_dictText',
            type: JVXETypes.normal,
            disabled: true,
            width: '195px',
            // placeholder: '请输入${title}',
            defaultValue: '',
            align:'center',
          },
          {
            title: '资产编码',
            key: 'assetNumber',
            type: JVXETypes.normal,
            disabled: true,
            width: '195px',
            // placeholder: '请输入${title}',
            defaultValue: '',
            align:'center',
          },
          {
            title: '报废日期',
            key: 'scrapDate',
            type: JVXETypes.datetime,
            width: '200px',
            placeholder: '请选择${title}',
            defaultValue: '',
            align:'center',
             // fixed: 'left',
            // è¡¨å•éªŒè¯è§„则
            validateRules: [
              {
                required: true, // å¿…å¡«
                message: '${title}不能为空' // æç¤ºçš„文本
              }]
          },
          {
            title: '报废原因',
            key: 'scrapReason',
            type: JVXETypes.input,
            width: '195px',
            placeholder: '请输入${title}',
            defaultValue: '',
            align:'center',
             //  fixed: 'left',
            // è¡¨å•éªŒè¯è§„则
            validateRules: [
              {
                required: true, // å¿…å¡«
                message: '${title}不能为空' // æç¤ºçš„文本
              }]
          },
          {
            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',
            // placeholder: '请输入${title}',
            defaultValue: '',
            align:'center',
          },
          // {
          //   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',
            // placeholder: '请输入${title}',
            defaultValue: '',
            align:'center',
          },

          {
            title: '设备位置',
            key: 'location',
            type: JVXETypes.normal,
            disabled: true,
            width: '200px',
            // placeholder: '请输入${title}',
            defaultValue: '',
            align:'center',
          },
          {
            title: '重要度',
            key: 'equipmentImportanceId_dictText',
            type: JVXETypes.normal,
            disabled: true,
            width: '200px',
            // placeholder: '请输入${title}',
            defaultValue: '',
            align:'center',
          },
          // {
          //   title: '重要度',
          //   key: 'equipmentImportanceId',
          //   type: JVXETypes.hidden,
          //   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: '200px',
          //   slotName:'equipmentPhoto',
          //   align:'center',

          // },
          // {
          //   title: '操作',
          //   key: 'action',
          //   type: JVXETypes.slot,
          //   disabled: true,
          //   width: '100px',
          //   slotName: 'action',
          // },

        ]
      },

      url: {
        add: '/eam/equipmentScrap/add',
        edit: '/eam/equipmentScrap/edit',
        equipmentChange: {
          list: '/eam/equipmentScrap/queryById'
        },
        equipmentScrapDetail: {
          list: '/eam/equipmentScrap/listEquipmentScrapDetailByMainId'
        }
      }
    }
  },
  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.equipmentScrapDetail.getTableData()
      let deleteData = this.$refs.equipmentScrapDetail.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.equipmentScrapDetail.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.equipmentScrapDetail.pushRows(addRows)
    },
    handleDL(props) {
        // è°ƒç”¨åˆ é™¤æ–¹æ³•
        props.target.removeRows(props.row)
      },
    addBefore() {
      this.equipmentScrapDetailTable.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.equipmentScrapDetail.list, params, this.equipmentScrapDetailTable)
      }
    },
    //校验所有一对一子表表单
    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, // å±•å¼€
        equipmentScrapDetailList: allValues.tablesValue[0].tableData
      }
    },
    /** ç¡®å®šæŒ‰é’®ç‚¹å‡»äº‹ä»¶ */
    // handleOk() {
    //   /** è§¦å‘表单验证 */
    //   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')
    //     }
    //     console.log('this.classifyIntoFormData', typeof this.classifyIntoFormData)
    //     let formData = this.classifyIntoFormData(allValues)
    //
    //     // å‘起请求
    //     return this.request(formData)
    //   }).catch(e => {
    //     if (e.error === VALIDATE_NO_PASSED) {
    //       // å¦‚果有未通过表单验证的子表，就自动跳转到它所在的tab
    //       this.activeKey = e.index == null ? this.refKeys[0] : this.refKeys[e.index + 1]
    //     } else {
    //       console.error(e)
    //     }
    //   })
    // },
    validateError(msg) {
      this.$message.error(msg)
    },
    close() {
      this.visible = false
      this.$emit('close')
      this.$refs.form.clearValidate()
    },
    // ********************************************

    /* a æ ‡ç­¾çš„点击事件，删除当前选中的行 */
    handleDelete(props) {
      // å‚数解释
      // props.index ï¼šå½“前行的下标
      // props.text ï¼šå½“前值，可能是defaultValue定义的值，也可能是从dataSource中取出的值
      // props.rowId ï¼šå½“前选中行的id，如果是新增行则是临时id
      // props.column ï¼šå½“前操作的列
      // props.getValue ï¼šè¿™æ˜¯ä¸€ä¸ªfunction，执行后可以获取当前行的所有值（禁止在template中使用）
      //                  ä¾‹ï¼šconst value = props.getValue()
      // props.target ï¼šè§¦å‘当前事件的实例，可直接调用该实例内的方法（禁止在template中使用）
      //                  ä¾‹ï¼štarget.add()

      // ä½¿ç”¨å®žä¾‹ï¼šåˆ é™¤å½“前操作的行
      let { rowId, target } = props
      target.removeRows(rowId)
    },
    // é‡å†™add  æ–¹æ³• é»˜è®¤ä¸å¢žåŠ ä¸€è¡Œ
    add(num = 0, forceScrollToBottom = false) {
      if (num < 1) return
      // let timestamp = new Date().getTime()
      let rows = this.rows
      let row
      for (let i = 0; i < num; i++) {
        rows = this.push({}, false, rows)
        row = rows[rows.length - 1]
      }
      this.rows = rows

      this.$nextTick(() => {
        this.updateFormValues()
      })
      // è§¦å‘add事件
      this.$emit('added', {
        row: (() => {
          let r = Object.assign({}, row)
          r.id = this.getCleanId(r.id)
          return r
        })(),
        target: this
      })
      // è®¾ç½®æ»šåŠ¨æ¡ä½ç½®
      let tbody = this.getElement('tbody')
      let offsetHeight = tbody.offsetHeight
      let realScrollTop = tbody.scrollTop + offsetHeight
      if (forceScrollToBottom) {
        this.$nextTick(() => {
          this.resetScrollTop(this.$refs.scrollView.scrollHeight)
        })
      }
    }

  }
}
</script>

<style scoped>
/** tab panel ä¸­æœ‰ä¸‹æ‹‰æ¡†/日期 è¿™ç±»å¸¦ä¸‹æ‹‰æ•ˆæžœçš„，需要加此样式 */
/deep/ .jeecg-tabs-top {
  overflow: visible;
}
</style>