lyh
2025-07-11 75b875f7538bf7700684c2eb2582c2d8f0aa8675
src/views/eam/base/modules/EamMaintenanceStandardModal.vue
@@ -1,13 +1,6 @@
<template>
  <j-modal
    :title="title"
    :width="1200"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">
  <j-modal :title="title" :width="1200" :visible="visible" :confirmLoading="confirmLoading" switchFullscreen
           @ok="handleOk" @cancel="handleCancel" cancelText="关闭">
    <a-spin :spinning="spinning">
      <a-form-model ref="form" :model="model" :rules="validatorRules" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-row :gutter="24">
@@ -44,6 +37,7 @@
          <a-col :span="8">
            <a-form-model-item prop="maintenancePeriod" label="保养周期">
              <a-input-number v-model="model.maintenancePeriod" placeholder="请输入保养周期" :min="1" :precision="0"
                              :disabled="model.maintenanceCategory=='POINT_INSPECTION'||model.maintenanceCategory=='SECOND_MAINTENANCE'"
                              style="width: 100%"/>
            </a-form-model-item>
          </a-col>
@@ -70,33 +64,44 @@
        </a-row>
        <a-row :gutter="24">
          <j-vxe-table
            ref="editableDetailTable"
            :rowNumber="true"
            :rowSelection="true"
            :bordered="true"
            :alwaysEdit="true"
            :toolbar="true"
            :toolbarConfig="detail.toolbarConfig"
            keep-source
            :height="300"
            :loading="detail.loading"
            :dataSource="detail.dataSource"
            :columns="detail.columns"
            style="margin-top: 8px;">
            <template v-slot:itemPart="props">
              <a-textarea v-model="props.row.itemPart" allowClear @change="$refs.editableDetailTable.validateTable()"
                          :placeholder="model.maintenanceCategory!='THIRD_MAINTENANCE'?'仅三保需要维护':'请输入部位'" :rows="1"
                          autoSize :disabled="model.maintenanceCategory!='THIRD_MAINTENANCE'"/>
          <a-tabs :active-key="activeTabKey" v-if="model.maintenanceCategory" @change="handleTabChange">
            <!--点检-->
            <template v-if="model.maintenanceCategory=='POINT_INSPECTION'">
              <a-tab-pane tab="日点检" key="1" forceRender>
                <j-vxe-table ref="editableDetailTable1" rowNumber rowSelection bordered alwaysEdit toolbar
                             :toolbarConfig="detail.toolbarConfig" keep-source :height="300"
                             :dataSource="detail.dayInspectionList" :columns="detail.inspectionColumns"/>
              </a-tab-pane>
              <a-tab-pane tab="周点检" key="2" forceRender>
                <j-vxe-table ref="editableDetailTable2" rowNumber rowSelection bordered alwaysEdit toolbar
                             :toolbarConfig="detail.toolbarConfig" keep-source :height="300"
                             :dataSource="detail.weekInspectionList" :columns="detail.inspectionColumns"/>
              </a-tab-pane>
            </template>
            <template v-slot:itemCategory="props">
              <j-dict-select-tag v-model="props.row.itemCategory" :dict-code="encodedDictCode"
                                 @change="$refs.editableDetailTable.validateTable()"
                                 :placeholder="getItemCategoryPlaceholder"
                                 :disabled="!Boolean(model.maintenanceCategory)||model.maintenanceCategory=='THIRD_MAINTENANCE'"/>
            <!--二保-->
            <template v-if="model.maintenanceCategory=='SECOND_MAINTENANCE'">
              <a-tab-pane tab="操作工" key="1" forceRender>
                <j-vxe-table ref="editableDetailTable1" rowNumber rowSelection bordered alwaysEdit toolbar
                             :toolbarConfig="detail.toolbarConfig" keep-source :height="300"
                             :dataSource="detail.operatorMaintenanceList" :columns="detail.secondMaintenanceColumns"/>
              </a-tab-pane>
              <a-tab-pane tab="维修工" key="2" forceRender>
                <j-vxe-table ref="editableDetailTable2" rowNumber rowSelection bordered alwaysEdit toolbar
                             :toolbarConfig="detail.toolbarConfig" keep-source :height="300"
                             :dataSource="detail.repairerMaintenanceList" :columns="detail.secondMaintenanceColumns"/>
              </a-tab-pane>
            </template>
          </j-vxe-table>
            <!--三保-->
            <template v-if="model.maintenanceCategory=='THIRD_MAINTENANCE'">
              <a-tab-pane tab="三保" key="1">
                <j-vxe-table ref="editableDetailTable1" rowNumber rowSelection bordered alwaysEdit toolbar
                             :toolbarConfig="detail.toolbarConfig" keep-source :height="300"
                             :dataSource="detail.thirdMaintenanceList" :columns="detail.thirdMaintenanceColumns"/>
              </a-tab-pane>
            </template>
          </a-tabs>
        </a-row>
      </a-form-model>
    </a-spin>
@@ -132,6 +137,7 @@
        },
        confirmLoading: false,
        spinning: false,
        activeTabKey: '1',
        validatorRules: {
          standardName: [
            { required: true, message: '请输入规范名称', trigger: 'change' }
@@ -156,9 +162,12 @@
          upgrade: '/eam/maintenanceStandard/upgrade'
        },
        detail: {
          loading: false,
          dataSource: [],
          columns: [
          dayInspectionList: [],
          weekInspectionList: [],
          operatorMaintenanceList: [],
          repairerMaintenanceList: [],
          thirdMaintenanceList: [],
          inspectionColumns: [
            {
              title: 'ID',
              key: 'id',
@@ -176,27 +185,7 @@
              align: 'center',
              placeholder: '请输入项目序号',
              width: 150,
              validateRules: [
                { required: true, message: '请输入项目序号' },
                { unique: true, message: '项目序号不能重复' }
              ]
            },
            {
              title: '部位',
              key: 'itemPart',
              type: JVXETypes.slot,
              slotName: 'itemPart',
              placeholder: '请输入部位',
              align: 'center',
              validateRules: [{ handler: this.itemPartValidate }]
            },
            {
              title: '保养项分类',
              key: 'itemCategory',
              type: JVXETypes.slot,
              slotName: 'itemCategory',
              align: 'center',
              validateRules: [{ handler: this.itemCategoryValidate }]
              validateRules: [{ required: true, message: '请输入${title}' }]
            },
            {
              title: '保养项目',
@@ -204,9 +193,36 @@
              placeholder: '请输入保养项目',
              type: JVXETypes.textarea,
              align: 'center',
              validateRules: [
                { required: true, message: '请输入保养项目' }
              ]
              validateRules: [{ required: true, message: '请输入${title}' }]
            }
          ],
          secondMaintenanceColumns: [
            {
              title: 'ID',
              key: 'id',
              type: JVXETypes.hidden
            },
            {
              title: 'standardId',
              key: 'standardId',
              type: JVXETypes.hidden
            },
            {
              title: '项目序号',
              key: 'itemCode',
              type: JVXETypes.inputNumber,
              align: 'center',
              placeholder: '请输入项目序号',
              width: 150,
              validateRules: [{ required: true, message: '请输入${title}' }]
            },
            {
              title: '保养项目',
              key: 'itemName',
              placeholder: '请输入保养项目',
              type: JVXETypes.textarea,
              align: 'center',
              validateRules: [{ required: true, message: '请输入${title}' }]
            },
            {
              title: '保养规范或要求',
@@ -214,9 +230,43 @@
              placeholder: '请输入保养规范或要求',
              type: JVXETypes.textarea,
              align: 'center',
              validateRules: [
                { required: true, message: '请输入保养规范或要求' }
              ]
              validateRules: [{ required: true, message: '请输入${title}' }]
            }
          ],
          thirdMaintenanceColumns: [
            {
              title: 'ID',
              key: 'id',
              type: JVXETypes.hidden
            },
            {
              title: 'standardId',
              key: 'standardId',
              type: JVXETypes.hidden
            },
            {
              title: '保养部位',
              key: 'itemPart',
              type: JVXETypes.textarea,
              slotName: 'itemPart',
              align: 'center',
              validateRules: [{ required: true, message: '请输入${title}' }]
            },
            {
              title: '保养内容',
              key: 'itemName',
              placeholder: '请输入${title}',
              type: JVXETypes.textarea,
              align: 'center',
              validateRules: [{ required: true, message: '请输入${title}' }]
            },
            {
              title: '验收标准',
              key: 'itemDemand',
              placeholder: '请输入${title}',
              type: JVXETypes.textarea,
              align: 'center',
              validateRules: [{ required: true, message: '请输入${title}' }]
            }
          ],
          toolbarConfig: {
@@ -228,49 +278,67 @@
        }
      }
    },
    computed: {
      getItemCategoryPlaceholder() {
        if (!Boolean(this.model.maintenanceCategory)) return '请选择保养分类'
        else {
          if (this.model.maintenanceCategory != 'THIRD_MAINTENANCE') return '请选择保养项分类'
          else return '三保无需维护'
        }
      },
      encodedDictCode() {
        let suffix
        if (!Boolean(this.model.maintenanceCategory) || this.model.maintenanceCategory === 'THIRD_MAINTENANCE') return
        else suffix = this.model.maintenanceCategory.split('_')[1]
        const dictCode = `sys_dict_item,item_text,item_value,item_value like '%${suffix}' and dict_id='1940598438685134850'`
        return encodeURIComponent(dictCode)
      }
    },
    methods: {
      // 主页面点击新增后触发
      add() {
        this.resetData()
        this.model = {}
        this.visible = true
        this.editable = true
        this.upgradeFlag = false
        this.detail.dataSource = []
      },
      /**
       * 主页面点击编辑后触发
       * @param record 主页面列表行记录
       */
      edit(record) {
        this.resetData()
        this.model = Object.assign({}, record)
        this.visible = true
        this.editable = false
        this.upgradeFlag = false
        this.detail.dataSource = []
        this.loadDetail(record.id)
      },
      /**
       * 点击升版后触发
       * @param record 主页面列表行记录
       */
      upgrade(record) {
        this.resetData()
        this.model = Object.assign({}, record)
        this.visible = true
        this.editable = false
        this.upgradeFlag = true
        this.detail.dataSource = []
        this.loadDetail(record.id)
      },
      //加载详情数据
      loadDetail(standardId) {
        this.spinning = true
        getAction(this.url.detail, { standardId })
          .then(res => {
            if (res.success) {
              switch (this.model.maintenanceCategory) {
                case 'POINT_INSPECTION':
                  this.detail.dayInspectionList = res.result.filter(item => item.itemCategory == 'DAY_INSPECTION')
                  this.detail.weekInspectionList = res.result.filter(item => item.itemCategory == 'WEEK_INSPECTION')
                  break
                case 'SECOND_MAINTENANCE':
                  this.detail.operatorMaintenanceList = res.result.filter(item => item.itemCategory == 'OPERATOR_MAINTENANCE')
                  this.detail.repairerMaintenanceList = res.result.filter(item => item.itemCategory == 'REPAIRER_MAINTENANCE')
                  break
                case 'THIRD_MAINTENANCE':
                  this.detail.thirdMaintenanceList = res.result.filter(item => !Boolean(item.itemCategory))
                  break
                default:
              }
            }
          })
          .finally(() => {
            this.spinning = false
          })
      },
      /**
@@ -278,70 +346,93 @@
       * @param value 保养分类值
       */
      handleMaintenanceCategoryChange(value) {
        delete this.model.maintenancePeriod
        switch (value) {
          case 'THIRD_MAINTENANCE':
            this.model.periodUnit = '年'
            if (this.activeTabKey != '1') this.activeTabKey = '1'
            break
          case 'SECOND_MAINTENANCE':
            this.model.periodUnit = '月'
            this.model.maintenancePeriod = 6
            break
          case 'POINT_INSPECTION':
            this.model.periodUnit = '天'
            this.model.maintenancePeriod = 1
            break
          default:
            delete this.model.periodUnit
        }
        const tableData = this.$refs.editableDetailTable.getTableData()
        tableData.forEach(item => {
          if (value !== 'THIRD_MAINTENANCE') delete item.itemPart
          delete item.itemCategory
        })
        this.detail.dataSource = [...tableData]
        console.log('tableData', tableData)
        if (this.model.maintenancePeriod) this.$refs.form.clearValidate('maintenancePeriod')
      },
      /**
       * 保养部位校验
       * @param cellValue 输入值
       * @param callback 回调函数
       */
      itemPartValidate({ cellValue }, callback) {
        if (this.model.maintenanceCategory === 'THIRD_MAINTENANCE') {
          if (cellValue) callback(true)
          else callback(false, '请选择${title}')
        } else {
          callback(true)
        }
      },
      /**
       * 保养项分类校验
       * @param cellValue 输入值
       * @param callback 回调函数
       */
      itemCategoryValidate({ cellValue }, callback) {
        if (this.model.maintenanceCategory === 'THIRD_MAINTENANCE') {
          callback(true)
        } else {
          if (cellValue) callback(true)
          else callback(false, '请选择${title}')
        }
      async handleTabChange(tabKey) {
        let errMap = await this.$refs['editableDetailTable' + this.activeTabKey].validateTable()
        if (errMap) return
        this.activeTabKey = tabKey
      },
      // 提交事件
      async handleOk() {
        // 保养分类为空时不校验明细
        if (this.model.maintenanceCategory) {
          // 校验当下tab下的表格是否为空
          let tableData = this.$refs['editableDetailTable' + this.activeTabKey].getTableData()
          if (tableData.length == 0) {
            this.$notification.warning({
              message: '消息',
              description: '当前保养明细不能为空'
            })
            return
          }
          // 校验当前tab下的表格校验规则
          let errMap = await this.$refs['editableDetailTable' + this.activeTabKey].validateTable()
          if (errMap) return false
          // 校验另一tab保养明细表格是否为空(三保无需)
          if (this.model.maintenanceCategory != 'THIRD_MAINTENANCE') {
            if (this.activeTabKey == '1') tableData = this.$refs.editableDetailTable2.getTableData()
            else tableData = this.$refs.editableDetailTable1.getTableData()
            if (tableData.length == 0) {
              this.activeTabKey = this.activeTabKey == '1' ? '2' : '1'
              this.$notification.warning({
                message: '消息',
                description: '当前保养明细不能为空'
              })
              return
            }
          }
        }
        const that = this
        let errMap = await that.$refs.editableDetailTable.validateTable()
        if (errMap) return false
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            let tableData = that.$refs.editableDetailTable.getTableData()
            let removeData = that.$refs.editableDetailTable.getDeleteData()
            that.model.tableDetailList = [...tableData]
            that.model.removeDetailList = [...removeData]
            let tableData1 = that.$refs.editableDetailTable1.getTableData()
            let tableData2 = []
            let currentTabItemMaintenanceList = []
            if (this.model.maintenanceCategory != 'THIRD_MAINTENANCE') {
              tableData2 = that.$refs.editableDetailTable2.getTableData()
              if (this.model.maintenanceCategory == 'POINT_INSPECTION') currentTabItemMaintenanceList = ['DAY_INSPECTION', 'WEEK_INSPECTION']
              else currentTabItemMaintenanceList = ['OPERATOR_MAINTENANCE', 'REPAIRER_MAINTENANCE']
            }
            if (currentTabItemMaintenanceList.length != 0) {
              tableData1 = tableData1.map(item => {
                return {
                  ...item,
                  itemCategory: currentTabItemMaintenanceList[0]
                }
              })
              tableData2 = tableData2.map(item => {
                return {
                  ...item,
                  itemCategory: currentTabItemMaintenanceList[1]
                }
              })
            }
            that.model.tableDetailList = [...tableData1, ...tableData2]
            that.confirmLoading = that.spinning = true
            let httpUrl = ''
            let method = ''
@@ -381,6 +472,15 @@
        })
      },
      resetData() {
        this.activeTabKey = '1'
        this.detail.dayInspectionList = []
        this.detail.weekInspectionList = []
        this.detail.operatorMaintenanceList = []
        this.detail.repairerMaintenanceList = []
        this.detail.thirdMaintenanceList = []
      },
      handleCancel() {
        this.close()
      },
@@ -389,23 +489,6 @@
        this.$emit('close')
        this.visible = false
        this.$refs.form.clearValidate()
      },
      //加载详情数据
      loadDetail(standardId) {
        this.spinning = true
        this.detail.dataSource = []
        if (standardId) {
          getAction(this.url.detail, { standardId })
            .then(res => {
              if (res.success) {
                this.detail.dataSource = [...res.result]
              }
            })
            .finally(() => {
              this.spinning = false
            })
        }
      }
    }
@@ -419,5 +502,6 @@
  /deep/ textarea.ant-input {
    resize: none;
    margin-bottom: 0;
  }
</style>