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="6">
            <a-form-model-item
              label="生产线所属分类"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="equipmentCategoryId"
            >
              <j-dict-select-tag
                allow-clear
                placeholder="生产线所属分类"
                :disabled="formDisabled"
                :triggerChange="true"
                :dictCode="caytegoryParam==='all'?'mom_eam_equipment_category,name,id':'mom_eam_equipment_category,name,id,equipment_category_uda1 = '+'\''+caytegoryParam+'\''"
                v-model="model.equipmentCategoryId"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item
              label="生产线编码"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="num"
            >
              <a-input
                v-model="model.num"
                placeholder="请输入生产线编号"
                :disabled="formDisabled"
              ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item
              label="生产线名称"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="name"
            >
              <a-input
                v-model="model.name"
                placeholder="请输入生产线名称"
                :disabled="formDisabled"
              ></a-input>
            </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="equipmentOfLineList.loading"
          :columns="equipmentOfLineList.columns"
          :dataSource="equipmentOfLineList.dataSource"
          :maxHeight="600"
          :disabled="formDisabled"
          :rowNumber="true"
          :rowSelection="true"
          :bordered="true"
          :alwaysEdit="true"
          :toolbar="true"
          @valueChange="changeDate"
          :toolbarConfig="toolbarConfig"
          >
              <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" @selectionRows="addSelectedEquipments"></equipment-select-modal>
  </a-spin>
</template>
 
<script>
 
  import { getAction } from '@/api/manage'
  import { JVxeTableModelMixin } from '@/mixins/JVxeTableModelMixin.js'
  import { duplicateCheck } from '@/api/api'
  import { JVXETypes } from '@/components/jeecg/JVxeTable'
  import { validateDuplicateValue } from '@/utils/util'
  import { getRefPromise,VALIDATE_FAILED} from '@/components/jeecg/JVxeTable/utils/vxeUtils.js'
  import JFormContainer from '@/components/jeecg/JFormContainer'
  import EquipmentSelectModal from '../equipmentScrap/EquipmentSelectModal.vue'
 
  import dayjs from 'dayjs'
  export default {
    name: 'EquipmentOfLineForm',
    mixins: [JVxeTableModelMixin],
    components: {
      JFormContainer,
      dayjs,
      EquipmentSelectModal
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      },
      caytegoryParam: {
        type: String,
        default: '',
        required: false
      }
    },
    data() {
      return {
        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', 'num', value, this.model.id, callback) }
        ],
        name: [
          { required: true, message: '请输入名称!' }
        ],
        equipmentCategoryId:[
          { required: true, message: '请输入分类!' }
        ]
        },
        refKeys: ['equipmentOfLineTable', ],
        tableKeys:['equipmentOfLineTable', ],
        activeKey: 'equipmentOfLineTable',
        equipmentOfLineList: {
          loading: false,
          dataSource: [],
          columns: [
            {
              title: 'id',
              key: 'id',
               type: JVXETypes.hidden,
              disabled:true,
              align:'center',
            },
            {
              title: 'showId',
              key: 'showId',
               type: JVXETypes.hidden,
              disabled:true,
              align:'center',
            },
            {
              title: '统一编码',
              key: 'num',
               type: JVXETypes.normal,
              width:"300px",
              placeholder: '请输入${title}',
              disabled:true,
              align:'center',
              defaultValue:'',
            },
            {
              title: '设备名称',
              key: 'name',
               type: JVXETypes.normal,
              width:"300px",
              placeholder: '请输入${title}',
              disabled:true,
              align:'center',
              defaultValue:'',
            },
            {
              title: '设备型号',
              key: 'model',
               type: JVXETypes.normal,
              width:"202px",
              placeholder: '请输入${title}',
              disabled:true,
              align:'center',
              defaultValue:'',
            },
            {
              title: '关键设备标识',
              key: 'specificEquipment_dictText',
              type: JVXETypes.normal,
              width:"202px",
              placeholder: '请输入${title}',
              disabled:true,
              align:'center',
              defaultValue:'',
            },
            {
              title: 'ABC标识',
              key: 'equipmentImportanceId',
              type: JVXETypes.normal,
              width:"202px",
              placeholder: '请输入${title}',
              disabled:true,
              align:'center',
              defaultValue:'',
            },
            {
              title: '技术状态',
              key: 'technologyStatus_dictText',
              type: JVXETypes.normal,
              width:"202px",
              placeholder: '请输入${title}',
              disabled:true,
              align:'center',
              defaultValue:'',
            },
            {
              title: '是否主设备',
              key: 'isMeta',
              type: JVXETypes.select,
              width:"202px",
              placeholder: '请选择${title}',
              dictCode:'is_product',
              align:'center',
              options:[],
              validateRules: [
                  {
                    required: true, // 必填
                    message: '请输入${title}' // 显示的文本
                  },
              ]
             },
          ]
        },
        url: {
          add: "/eam/equipment/addLine",
          edit:"/eam/equipment/editLine",
          equipmentOfLineTable: {
            list: "/eam/equipment/getEquipmentList",
          },
        }
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
    },
    methods: {
      addBefore(){
       this.equipmentOfLineList.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 = {lineId: this.model.id }
          this.requestSubTableData(this.url.equipmentOfLineTable.list, params, this.equipmentOfLineList)
        }
      },
      //校验所有一对一子表表单
        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, // 展开
          equipmentOfLineTable: allValues.tablesValue[0].tableData,
        }
      },
      validateError(msg){
        this.$message.error(msg)
      },
      changeDate(target){
        let tableData =this.$refs.equipmentOfLineTable.getTableData();
        let id = target.row.id
        if(target.column.key==='isMeta'){
           for(var i = 0;i<tableData.length;i++){
              if(id!==tableData[i].showId){
                this.$refs.equipmentOfLineTable.getRowById(tableData[i].showId).isMeta='no'
              }
           }
        }
      },
       //选择设备
      selectEquipmentList() {
        let ids = []
        let tableData = this.$refs.equipmentOfLineTable.getTableData()
        let deleteData = this.$refs.equipmentOfLineTable.getDeleteData()
        for (let i = 0; i < tableData.length; i++) {
          ids.push(tableData[i].showId)
        }
        this.$refs.EquipmentSelectModal.showModals(ids)
        this.$refs.EquipmentSelectModal.title = '选择设备'
        this.$refs.EquipmentSelectModal.disableSubmit = false
      },
      addSelectedEquipments(data) {
        let tableData = this.$refs.equipmentOfLineTable.getTableData()
        // const seletedEquipmentIds = tableData.
        var tableStr = JSON.stringify(tableData)
        const addRows = []
        for (let i = 0; i < data.length; i++) {
          var equipment = {}
          if (tableStr.indexOf(data[i].id)==-1) {
            equipment = {
              id: data[i].id,
              num: data[i].num,
              name: data[i].name,
              model:data[i].model,
              showId:data[i].id,
              specificEquipment_dictText:data[i].specificEquipment_dictText,
              technologyStatus_dictText:data[i].technologyStatus_dictText,
              equipmentImportanceId:data[i].equipmentImportanceId,
              isMeta:'no'
            }
          }
          addRows.push(equipment)
        }
        this.$refs.equipmentOfLineTable.pushRows(addRows)
      },
 
    }
  }
</script>
 
<style scoped>
</style>