三保工单流程弹窗布局

zhaowei

2025-07-12 27d08b2283f88330cc3d282852898ba71c2cbb2b

 src/views/eam/maintenance/modules/EamThirdMaintenanceOrderModal.vue

@@ -1,48 +1,35 @@
<template>
  <j-modal
    :title="title"
    :width="1200"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    :mask-closable="false"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">
  <j-modal :title="title" :width="1200" :visible="visible" :confirmLoading="confirmLoading" switchFullscreen
           :mask-closable="false" @ok="handleOk" @cancel="handleCancel" centered cancelText="关闭">

    <a-spin :spinning="spinning">
      <a-form-model ref="form" :model="model" :rules="validatorRules" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-row :gutter="24">
        <a-row>
          <a-col :span="8">
            <a-form-model-item prop="orderNum" label="工单号">
              <a-input placeholder="工单号系统自动生成" v-model="model.orderNum" disabled />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item prop="equipmentId" label="设备编码">
              <maintenance-equipment-select placeholder="请输入设备编号或名称搜索" v-model="model.equipmentId"
                                            :maintenanceCategory="maintenanceCategory"
            <a-form-model-item prop="equipmentId" label="统一编码">
              <maintenance-equipment-select placeholder="请输入统一编码或名称搜索" v-model="model.equipmentId"
                                            maintenanceCategory="THIRD_MAINTENANCE"
                                            @autocompleteForm="autocompleteForm"
                                            :disabled="editable"></maintenance-equipment-select>
                                            :disabled="!editable"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item prop="standardName" label="标准名称">
            <a-form-model-item prop="standardName" label="规范名称">
              <a-input placeholder="选择设备后自动带出" v-model="model.standardName" disabled />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">

        <a-row>
          <a-col :span="8">
            <a-form-model-item prop="maintenanceDate" label="保养日期">
              <a-date-picker placeholder="请选择计划保养日期" v-model="model.maintenanceDate" format="YYYY-MM-DD"
              <a-date-picker placeholder="请选择计划保养日期" v-model="model.maintenanceDate" value-format="YYYY-MM-DD"
                             style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item prop="operator" label="保养人">
              <j-search-select-tag v-model="model.operator" placeholder="请选择保养人" :disabled="!model.equipmentId"
                                   :dictOptions="maintenanceOperatorOptions" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
@@ -51,45 +38,20 @@
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">

        <a-row>
          <a-form-model-item :labelCol="labelColLong" :wrapperCol="wrapperColLong" prop="remark" label="备注">
            <a-textarea placeholder="请输入备注" v-model="model.remark" />
          </a-form-model-item>
        </a-row>
        <a-row :gutter="24">
          <a-tabs v-model="activeTabKey">
            <a-tab-pane key="1" tab="保养项" :forceRender="true">
              <j-vxe-table
                ref="editableDetailTable"
                :rowNumber="true"
                :rowSelection="true"
                :bordered="true"
                :alwaysEdit="true"
                :toolbar="true"
                :toolbarConfig="detail.toolbarConfig"
                keep-source
                :height="300"

        <a-tabs>
          <a-tab-pane key="1" tab="保养项明细">
            <j-vxe-table ref="editableDetailTable" rowNumber bordered keep-source :height="300"
                :dataSource="detail.dataSource"
                :columns="detail.columns"
                style="margin-top: 8px;" />
            </a-tab-pane>
            <a-tab-pane key="2" tab="精度参数" :forceRender="true">
              <j-vxe-table
                ref="editablePrecisionDetailTable"
                :rowNumber="true"
                :rowSelection="true"
                :bordered="true"
                :alwaysEdit="true"
                :toolbar="false"
                :toolbarConfig="precisionDetail.toolbarConfig"
                keep-source
                :height="300"
                :dataSource="precisionDetail.dataSource"
                :columns="precisionDetail.columns"
                style="margin-top: 8px;" />
                         :columns="detail.columns"/>
            </a-tab-pane>
          </a-tabs>
        </a-row>
      </a-form-model>
    </a-spin>
  </j-modal>
@@ -107,8 +69,7 @@
    return {
      title: '操作',
      visible: false,
      editable: false,
      maintenanceCategory: 'THIRD_MAINTENANCE',
        editable: true,
      model: {},
      labelCol: {
        xs: { span: 24 },
@@ -116,7 +77,7 @@
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
          sm: { span: 15 }
      },
      labelColLong: {
        xs: { span: 24 },
@@ -128,14 +89,13 @@
      },
      confirmLoading: false,
      spinning: false,
      activeTabKey: '1',
      maintenanceOperatorOptions: [],
      validatorRules: {
        equipmentId: [
          { required: true, message: '请选择设备!' }
            { required: true, message: '请选择设备!', trigger: 'change' }
        ],
        maintenanceDate: [
          { required: true, message: '请选择计划保养日期!' }
            { required: true, message: '请选择计划保养日期!', trigger: 'change' }
        ]
      },
      url: {
@@ -143,9 +103,7 @@
        edit: '/eam/thirdMaintenanceOrder/edit',
        standardDetail: '/eam/eamMaintenanceStandardDetail/queryList',
        detail: '/eam/thirdMaintenanceOrderDetail/queryList',
        userSelect: '/eam/user_select/list',
        precisionDetail: '/eam/equipmentPrecisionParameters/queryList',
        precisionCheckDetail: '/eam/precisionCheckDetail/queryList',
          userSelect: '/eam/user_select/list'
      },
      detail: {
        loading: false,
@@ -164,92 +122,27 @@
          {
            title: '序号',
            key: 'itemCode',
            type: JVXETypes.inputNumber,
            width: '10%',
            align: 'center',
            validateRules: [
              { required: true, unique: true, message: '序号不能重复' }
            ]
              type: JVXETypes.normal,
              width: 60,
              align: 'center'
          },
          {
            title: '部位',
              title: '保养部位',
            key: 'itemPart',
            type: JVXETypes.textarea,
            width: '25%',
              type: JVXETypes.normal,
            align: 'center'
          },
          {
            title: '保养项',
              title: '保养内容',
            key: 'itemName',
            type: JVXETypes.textarea,
            width: '20%',
            align: 'center',
            validateRules: [
              { required: true, message: '保养项不能为空！' }
            ]
          },
          {
            title: '保养要求',
            key: 'itemDemand',
            type: JVXETypes.textarea,
            width: '30%',
            align: 'center',
            validateRules: [
              { required: true, message: '保养要求不能为空！' }
            ]
          }
        ],
        toolbarConfig: {
          // prefix 前缀；suffix 后缀
          slot: ['prefix', 'suffix'],
          // add 新增按钮；remove 删除按钮；clearSelection 清空选择按钮
          btn: ['add', 'remove', 'clearSelection']
        }
      },
      precisionDetail: {
        loading: false,
        dataSource: [],
        columns: [
          {
            title: 'ID',
            key: 'id',
            type: JVXETypes.hidden
          },
          {
            title: 'orderId',
            key: 'orderId',
            type: JVXETypes.hidden
          },
          {
            title: 'equipmentId',
            key: 'equipmentId',
            type: JVXETypes.hidden
          },
          {
            title: 'parameterId',
            key: 'parameterId',
            type: JVXETypes.hidden
          },
          {
            title: '检测项目',
            key: 'parameterId_dictText',
            type: JVXETypes.normal,
            width: '25%',
            align: 'center'
          },
          {
            title: '参数编码',
            key: 'parameterCode_dictText',
              title: '验收标准',
              key: 'itemDemand',
            type: JVXETypes.normal,
            width: '20%',
            align: 'center',
          },
          {
            title: '允差值',
            key: 'parameterValue',
            type: JVXETypes.normal,
            width: '30%',
            align: 'center',
              align: 'center'
          }
        ],
        toolbarConfig: {
@@ -260,32 +153,24 @@
        }
      }
    }
  },
  created() {
  },
  methods: {
    add() {
      this.initParams();
      //初始化默认值
      this.model = {}
      this.visible = true
      this.editable = false
      this.detail.dataSource = []
    },
    edit(record) {
      this.initParams();
      this.model = Object.assign({}, record)
      this.visible = true
      this.editable = true
      this.detail.dataSource = []
      },

      edit(record) {
        this.model = Object.assign({}, record)
        this.visible = true
        this.editable = false
        this.detail.dataSource = []
      this.loadDetail(record.id)
      this.loadPrecisionDetail(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()
@@ -300,11 +185,6 @@
          let removeData = that.$refs.editableDetailTable.getDeleteData()
          that.model.tableDetailList = [...tableData]
          that.model.removeDetailList = [...removeData]

          let precisionDetailList = that.$refs.editablePrecisionDetailTable.getTableData()
          let removePrecisionDetailList = that.$refs.editablePrecisionDetailTable.getDeleteData()
          that.model.precisionDetailList = [...precisionDetailList]
          that.model.removePrecisionDetailList = [...removePrecisionDetailList]

          that.confirmLoading = true
          let httpurl = ''
@@ -332,32 +212,19 @@
        }
      })
    },
    handleCancel() {
      this.close()
    },

    autocompleteForm(selectObj) {
      //标准名称，保养周期不刷新解决办法
      //办法一  validatorRules equipmentId 还是有问题
      // const newObj = {
      //   standardName: selectObj.standardName,
      //   maintenancePeriod: selectObj.maintenancePeriod,
      //   standardId : selectObj.id,
      //   equipmentId: selectObj.equipmentId,
      // };
      // this.model = Object.assign({}, newObj, this.model)
      //办法二
      this.$set(this.model, 'standardName', selectObj.standardName)
      this.$set(this.model, 'maintenancePeriod', selectObj.maintenancePeriod)
      this.$set(this.model, 'standardId', selectObj.id)
      this.$set(this.model, 'equipmentId', selectObj.equipmentId)
      // console.log('model', this.model)
      if (!this.model.equipmentId) delete this.model.operator
      if (!this.model.id) {
        this.loadStandardDetail(selectObj.id)
        this.loadPrecisionParameterList(selectObj.equipmentId)
      }
      this.loadMaintenanceOperatorList(this.model.equipmentId)
    },

    //加载详情数据
    loadStandardDetail(standardId) {
      this.detail.dataSource = []
@@ -379,7 +246,8 @@
          })
      }
    },
    //标准选择变化

      //规范选择变化
    loadDetail(orderId) {
      if (orderId) {
        getAction(this.url.detail, { orderId: orderId }).then(res => {
@@ -389,71 +257,16 @@
        })
      }
    },
    loadMaintenanceOperatorList(equipmentId) {
      this.maintenanceOperatorOptions = []
      let params = { positionCode: 'PCR0001' }
      if (equipmentId) {
        params.equipmentId = equipmentId
      } else {
        return
      }
      const that = this
      getAction(this.url.userSelect, params)
        .then(res => {
          if (res.success) {
            that.maintenanceOperatorOptions = res.result.map(item => ({
              key: item.id,
              value: item.username,
              text: item.realname
            }))
            if (!that.maintenanceOperatorOptions.find(item => item.value === that.model.operator)) delete that.model.operator
          } else {
            if (that.model.operator) delete that.model.operator
          }
        })
        .catch(err => {
          if (that.model.operator) delete that.model.operator
        })

      handleCancel() {
        this.close()
    },
    loadPrecisionParameterList(equipmentId) {
      this.precisionDetail.dataSource = []
      if (equipmentId) {
        this.spinning = true
        getAction(this.url.precisionDetail, { equipmentId: equipmentId })
          .then(res => {
            if (res.success) {
              this.precisionDetail.dataSource = res.result.map(item => ({
                equipmentId: item.equipmentId,
                parameterId: item.parameterId,
                parameterId_dictText: item.parameterId_dictText,
                parameterCode_dictText: item.parameterCode_dictText,
                parameterValue: item.parameterValue,
              }))

      close() {
        this.$emit('close')
        this.visible = false
        this.$refs.form.clearValidate()
            }
          })
          .finally(() => {
            this.spinning = false
          })
      }
    },
    loadPrecisionDetail(orderId) {
      if (orderId) {
        getAction(this.url.precisionCheckDetail, { orderId: orderId }).then(res => {
          if (res.success) {
            this.precisionDetail.dataSource = [...res.result]
          }
        })
      }
    },
    initParams() {
      this.detail.dataSource = []
      this.precisionDetail.dataSource = []
      this.activeTabKey = '1'
    },
  }
}
</script>

<style lang="less" scoped>

</style>