1、保养规范页面列表新增测试删除功能（菜单权限分配，现网初期导入用） 2、保养规范弹窗新增区分保养项分类标签

zhaowei

2025-07-10 186022d0c99061dd3886e6ee995b335cf43fe10d

 src/views/eam/base/modules/EamMaintenanceStandardModal.vue

@@ -1,97 +1,107 @@
<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">
          <a-col :span="8">
            <a-form-model-item prop="standardCode" label="规范编码">
              <a-input placeholder="编码系统自动生成" v-model="model.standardCode" disabled/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item prop="standardName" label="规范名称">
              <a-input placeholder="请输入规范名称" v-model="model.standardName"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item prop="equipmentId" label="统一编码">
              <lx-search-equipment-select placeholder="请输入统一编码或名称搜索" v-model="model.equipmentId" :disabled="!editable"/>
            </a-form-model-item>
          </a-col>
        </a-row>

    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :model="model" :rules="validatorRules">
        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="standardCode" label="标准编码">
              <a-input placeholder="编码系统自动生成" v-model="model.standardCode" disabled />
            <a-form-model-item prop="maintenanceCategory" label="保养分类">
              <j-dict-select-tag dict-code="maintenance_category" placeholder="请选择保养分类"
                                 @change="handleMaintenanceCategoryChange"
                                 v-model="model.maintenanceCategory" :disabled="!editable"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="standardName" label="标准名称">
              <a-input placeholder="请输入标准名称" v-model="model.standardName" />
            <a-form-model-item label="保养周期单位">
              <a-input readOnly v-model="model.periodUnit" placeholder="根据保养分类自动带出"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="maintenanceCategory" label="保养分类">
              <j-dict-select-tag dict-code="maintenance_category" placeholder="请选择保养分类" v-model="model.maintenanceCategory" :disabled="editable" />
            <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>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="fileCode" label="文件编号">
              <a-input placeholder="请输入保养标准文件编号" v-model="model.fileCode"/>
            <a-form-model-item prop="initialDate" label="初始日期">
              <a-date-picker placeholder="请选择初始日期" v-model="model.initialDate" value-format="YYYY-MM-DD"
                             style="width: 100%"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="initialDate" label="初始日期">
              <a-date-picker placeholder="请选择初始日期" v-model="model.initialDate" format="YYYY-MM-DD" style="width: 100%" :disabled="editable"/>
            <a-form-model-item label="规范状态">
              <j-dict-select-tag dict-code="maintenance_standard_status" placeholder="根据流程进度自动带出"
                                 v-model="model.standardStatus" disabled/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="maintenancePeriod" label="保养周期">
              <a-input-number v-model="model.maintenancePeriod" :min="1" :precision="0" style="width: 100%"/>
            <a-form-model-item label="规范版本">
              <a-input-number v-model="model.standardVersion" placeholder="根据流程进度自动带出" style="width: 100%" disabled/>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="equipmentId" label="设备编号">
              <lx-search-equipment-select placeholder="请输入设备编号或名称搜索" v-model="model.equipmentId" :disabled="editable"></lx-search-equipment-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="standardStatus" label="标准状态">
              <j-dict-select-tag dict-code="maintenance_standard_status" v-model="model.standardStatus" disabled/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="standardVersion" label="标准版本">
              <a-input-number v-model="model.standardVersion" style="width: 100%" disabled/>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-model-item
              label="参考文件"
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="fileList">
              <lx-upload :returnUrl="false"
                         :multiple="false"
                         v-model="model.fileList"
                         biz="EamMaintenanceStandard">
              </lx-upload>
            </a-form-model-item>
          </a-col>
        </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;"/>
          <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-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>

            <!--三保-->
            <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>
@@ -99,233 +109,399 @@
</template>

<script>
import { getAction, httpAction } from '@/api/manage'
  import { getAction, httpAction } from '@/api/manage'
  import { JVxeTableModelMixin } from '@/mixins/JVxeTableModelMixin.js'
  import { JVXETypes } from '@/components/jeecg/JVxeTable'
  import LxSearchEquipmentSelect from '@views/eam/equipment/modules/LxSearchEquipmentSelect'

  export default {
    name: "EamMaintenanceStandardModal",
    name: 'EamMaintenanceStandardModal',
    mixins: [JVxeTableModelMixin],
    components: {
      LxSearchEquipmentSelect,
      LxSearchEquipmentSelect
    },
    data () {
    data() {
      return {
        title:"操作",
        title: '操作',
        visible: false,
        model: {},
        editable: false,
        editable: true,
        upgradeFlag: false,
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
          sm: { span: 7 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
          sm: { span: 16 }
        },
        confirmLoading: false,
        spinning: false,
        activeTabKey: '1',
        validatorRules: {
          standardName: [
            { required: true, message: '请输入标准名称!' }
            { required: true, message: '请输入规范名称', trigger: 'change' }
          ],
          maintenanceCategory: [
            { required: true, message: '请选择保养分类!' }
            { required: true, message: '请选择保养分类', trigger: 'change' }
          ],
          initialDate: [
            { required: true, message: '请选择初始日期!' }
            { required: true, message: '请选择初始日期', trigger: 'change' }
          ],
          maintenancePeriod: [
            { required: true, message: '请输入保养周期，单位：天!' }
            { required: true, message: '请输入保养周期', trigger: 'change' }
          ],
          equipmentId: [
            { required: true, message: '请选择设备!' }
            { required: true, message: '请输入统一编码或名称搜索', trigger: 'change' }
          ]
        },
        url: {
          add: "/eam/maintenanceStandard/add",
          edit: "/eam/maintenanceStandard/edit",
          detail: "/eam/eamMaintenanceStandardDetail/queryList",
          upgrade: '/eam/maintenanceStandard/upgrade',
          add: '/eam/maintenanceStandard/add',
          edit: '/eam/maintenanceStandard/edit',
          detail: '/eam/eamMaintenanceStandardDetail/queryList',
          upgrade: '/eam/maintenanceStandard/upgrade'
        },
        detail: {
          loading: false,
          dataSource: [],
          columns: [
          dayInspectionList: [],
          weekInspectionList: [],
          operatorMaintenanceList: [],
          repairerMaintenanceList: [],
          thirdMaintenanceList: [],
          inspectionColumns: [
            {
              title: 'ID',
              key: 'id',
              type: JVXETypes.hidden,
              type: JVXETypes.hidden
            },
            {
              title: 'standardId',
              key: 'standardId',
              type: JVXETypes.hidden,
              type: JVXETypes.hidden
            },
            {
              title: '序号',
              title: '项目序号',
              key: 'itemCode',
              type: JVXETypes.inputNumber,
              align:"center",
              width: 100,
              validateRules: [
                {required : true, unique: true, message: '序号不能重复'}
              ]
              align: 'center',
              placeholder: '请输入项目序号',
              width: 150,
              validateRules: [{ required: true, message: '请输入${title}' }]
            },
            {
              title: '部位',
              title: '保养项目',
              key: 'itemName',
              placeholder: '请输入保养项目',
              type: JVXETypes.textarea,
              align: 'center',
              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: '保养规范或要求',
              key: 'itemDemand',
              placeholder: '请输入保养规范或要求',
              type: JVXETypes.textarea,
              align: 'center',
              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,
              align:"center",
              slotName: 'itemPart',
              align: 'center',
              validateRules: [{ required: true, message: '请输入${title}' }]
            },
            {
              title: '保养项',
              title: '保养内容',
              key: 'itemName',
              placeholder: '请输入${title}',
              type: JVXETypes.textarea,
              align:"center",
              validateRules: [
                {required : true, message: '保养项不能为空！'}
              ]
              align: 'center',
              validateRules: [{ required: true, message: '请输入${title}' }]
            },
            {
              title: '保养要求',
              key: 'itemDemandAlias',
              type: JVXETypes.textarea,
              align:"center",
            },
            {
              title: '检查标准或要求',
              title: '验收标准',
              key: 'itemDemand',
              placeholder: '请输入${title}',
              type: JVXETypes.textarea,
              align:"center",
              validateRules: [
                {required : true, message: "保养要求不能为空！"}
              ]
            },
            {
              title: '检查方法',
              key: 'checkMethod',
              type: JVXETypes.textarea,
              align:"center",
            },
              align: 'center',
              validateRules: [{ required: true, message: '请输入${title}' }]
            }
          ],
          toolbarConfig: {
            // prefix 前缀；suffix 后缀
            slot: ['prefix', 'suffix'],
            // add 新增按钮；remove 删除按钮；clearSelection 清空选择按钮
            btn: ['add', 'remove', 'clearSelection']
          },
          }
        }
      }
    },
    created () {
    },
    methods: {
      add () {
        this.model = {};
        this.visible = true;
        this.editable = false;
        this.upgradeFlag = false;
        this.detail.dataSource = [];
      // 主页面点击新增后触发
      add() {
        this.resetData()
        this.model = {}
        this.visible = true
        this.editable = true
        this.upgradeFlag = false
      },
      edit (record) {
        this.model = Object.assign({}, record);
        this.visible = true;
        this.editable = true;
        this.upgradeFlag = false;
        this.detail.dataSource = [];
        if(record && record.referenceFile) {
          let obj = JSON.parse(record.referenceFile);
          this.model.fileList = [obj];
        }else {
          this.model.fieldList = [];
        }
        this.loadDetail(record.id);
      },
      upgrade(record) {
        this.model = Object.assign({}, record);
        this.visible = true;
        this.editable = true;
        this.upgradeFlag = true;
        this.detail.dataSource = [];
        if(record && record.referenceFile) {
          let obj = JSON.parse(record.referenceFile);
          this.model.fileList = [obj];
        }else {
          this.model.fieldList = [];
        }
        this.loadDetail(record.id);
      },
      close () {
        this.$emit('close');
        this.visible = false;
        this.$refs.form.clearValidate();
      },
      async handleOk () {
        const that = this;
        let errMap = await that.$refs.editableDetailTable.validateTable();
        if(errMap){
          this.$message.warning("数据校验失败！");
          return;
        }
        // 触发表单验证
         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];

            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              if(this.upgradeFlag) {
                httpurl+=this.url.upgrade;
              }else {
                httpurl+=this.url.edit;
      /**
       * 主页面点击编辑后触发
       * @param record 主页面列表行记录
       */
      edit(record) {
        this.resetData()
        this.model = Object.assign({}, record)
        this.visible = true
        this.editable = false
        this.upgradeFlag = false
        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.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:
              }
              method = 'put';
            }
            httpAction(httpurl,this.model,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
                that.close();
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
          })
          .finally(() => {
            this.spinning = false
          })
      },

      /**
       * 保养分类值改变时同时改变保养周期单位以及保养项分类
       * @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
        }
        if (this.model.maintenancePeriod) this.$refs.form.clearValidate('maintenancePeriod')
      },

      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: '当前保养明细不能为空'
            })
          }else{
             return false;
            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
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            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 = ''
            if (!this.model.id) {
              httpUrl += this.url.add
              method = 'post'
            } else {
              if (this.upgradeFlag) {
                httpUrl += this.url.upgrade
              } else {
                httpUrl += this.url.edit
              }
              method = 'put'
            }
            httpAction(httpUrl, this.model, method)
              .then((res) => {
                if (res.success) {
                  that.$notification.success({
                    message: '消息',
                    description: res.message
                  })
                  that.$emit('ok')
                  that.close()
                } else {
                  that.$notification.warning({
                    message: '消息',
                    description: res.message
                  })
                }
              })
              .finally(() => {
                that.confirmLoading = that.spinning = false
              })
          } else {
            return false
          }
        })
      },
      handleCancel () {

      resetData() {
        this.activeTabKey = '1'
        this.detail.dayInspectionList = []
        this.detail.weekInspectionList = []
        this.detail.operatorMaintenanceList = []
        this.detail.repairerMaintenanceList = []
        this.detail.thirdMaintenanceList = []
      },

      handleCancel() {
        this.close()
      },
      //加载详情数据
      loadDetail(standardId) {
        this.detail.dataSource = [];
        if (standardId) {
          getAction(this.url.detail, { standardId: standardId }).then(res => {
            if (res.success) {
              this.detail.dataSource = [...res.result];
            }
          })
        }

      close() {
        this.$emit('close')
        this.visible = false
        this.$refs.form.clearValidate()
      }

    }
  }
</script>

<style lang="less" scoped>
<style scoped lang="less">
  /deep/ .ant-select-dropdown-menu {
    text-align: left;
  }

  /deep/ textarea.ant-input {
    resize: none;
    margin-bottom: 0;
  }
</style>