1、点检工单流程开发 2、点检工单领取时增加列表loading提示

zhaowei

2025-07-10 033c329be810727208e8e124f5f31314305b0808

 src/views/flowable/workflow/InspectionOrder/InspectionOrderHandle.vue

@@ -1,6 +1,6 @@
<template>
  <j-modal :title="title" :width="1200" :visible="visible"
           :okButtonProps="{ class:{'jee-hidden': disableSubmit||!hasInspectionDateArrived} }" @ok="submitForm"
           :okButtonProps="{ class:{'jee-hidden': disableSubmit} }" @ok="submitForm"
           @cancel="handleCancel" :mask-closable="false" :confirmLoading="confirmLoading" fullscreen>
    <a-spin :spinning="spinning">
      <a-form-model ref='form' :model='tableRowRecord' :labelCol="labelCol" :wrapperCol="wrapperCol"
@@ -76,15 +76,15 @@
            </a-tabs>
          </a-col>

          <a-col :span="disableSubmit||tableRowRecord.inspectionStatus=='UNDER_INSPECTION'?16:10">
            <a-tabs v-model="activeTabKey">
          <a-col :span="!isDisplayConfirm?16:10">
            <a-tabs :active-key="activeTabKey" @change="handleTabChange">
              <a-tab-pane key="1" tab="日点检">
                <j-vxe-table ref="editableDetailTable" :rowNumber="false" rowSelection bordered
                <j-vxe-table ref="editableDetailTable1" :rowNumber="false" rowSelection bordered
                             alwaysEdit :toolbar="false" keep-source :height="300" :loading="detail.loading"
                             :dataSource="detail.dataSource" :columns="detail.columns"
                             @selectRowChange="handleTableSelectRowChange">
                             :dataSource="detail.dayInspectionList" :columns="detail.columns"
                             @selectRowChange="handleTableSelectRowChange($event,'Day')">
                  <template v-slot:inspectionResult="props">
                    <j-dict-select-tag v-model="props.row.inspectionResult" dictCode="eam_inspection_result"
                    <j-dict-select-tag v-model="props.row.inspectionResult" dictCode="inspection_project_result"
                                       :disabled="isDisableOperation" placeholder="请选择点检结果"
                                       @change="handleInspectionResultSelectChange($event,props.row)"
                                       style="width: 100%"/>
@@ -92,77 +92,63 @@

                  <template v-slot:exceptionDescription="props">
                    <a-textarea style="height: 32px" v-model="props.row.exceptionDescription"
                                :placeholder="props.row.inspectionResult==='2'?'请输入异常描述':''"
                                :disabled="isDisableOperation||!props.row.inspectionResult||props.row.inspectionResult==='1'"/>
                                :placeholder="props.row.inspectionResult&&props.row.inspectionResult!='NORMAL'?'请输入异常描述':''"
                                :disabled="isDisableOperation||!props.row.inspectionResult||props.row.inspectionResult=='NORMAL'"/>
                  </template>

                  <template v-slot:reportFlag="props">
                    <j-dict-select-tag v-model="props.row.reportFlag"
                                       :placeholder="props.row.inspectionResult==='2'?'请选择异常是否报修':''"
                                       :disabled="isDisableOperation||!props.row.inspectionResult||props.row.inspectionResult==='1'"
                                       :placeholder="props.row.inspectionResult&&props.row.inspectionResult!='NORMAL'?'请选择异常是否报修':''"
                                       :disabled="isDisableOperation||!props.row.inspectionResult||props.row.inspectionResult=='NORMAL'"
                                       dictCode="yn" style="width: 100%"/>
                  </template>
                </j-vxe-table>
              </a-tab-pane>

              <a-tab-pane key="2" tab="周点检">
                <j-vxe-table ref="editableDetailTable" :rowNumber="false" rowSelection bordered
              <a-tab-pane key="2" tab="周点检" forceRender>
                <j-vxe-table ref="editableDetailTable2" :rowNumber="false" rowSelection bordered
                             alwaysEdit :toolbar="false" keep-source :height="300" :loading="detail.loading"
                             :dataSource="detail.weekInspectionList" :columns="detail.columns"
                             @selectRowChange="handleTableSelectRowChange">
                             @selectRowChange="handleTableSelectRowChange($event,'Week')">
                  <template v-slot:inspectionResult="props">
                    <j-dict-select-tag v-model="props.row.inspectionResult" dictCode="eam_inspection_result"
                                       :disabled="isDisableOperation" placeholder="请选择点检结果"
                    <j-dict-select-tag v-model="props.row.inspectionResult" dictCode="inspection_project_result"
                                       :disabled="isDisableOperation||detail.weekInspectionFinishedFlag"
                                       placeholder="请选择点检结果"
                                       @change="handleInspectionResultSelectChange($event,props.row)"
                                       style="width: 100%"/>
                  </template>

                  <template v-slot:exceptionDescription="props">
                    <a-textarea style="height: 32px" v-model="props.row.exceptionDescription"
                                :placeholder="props.row.inspectionResult==='2'?'请输入异常描述':''"
                                :disabled="isDisableOperation||!props.row.inspectionResult||props.row.inspectionResult==='1'"/>
                                :placeholder="props.row.inspectionResult&&props.row.inspectionResult!='NORMAL'?'请输入异常描述':''"
                                :disabled="isDisableOperation||!props.row.inspectionResult||props.row.inspectionResult=='NORMAL'"/>
                  </template>

                  <template v-slot:reportFlag="props">
                    <j-dict-select-tag v-model="props.row.reportFlag"
                                       :placeholder="props.row.inspectionResult==='2'?'请选择异常是否报修':''"
                                       :disabled="isDisableOperation||!props.row.inspectionResult||props.row.inspectionResult==='1'"
                                       :placeholder="props.row.inspectionResult&&props.row.inspectionResult!='NORMAL'?'请选择异常是否报修':''"
                                       :disabled="isDisableOperation||!props.row.inspectionResult||props.row.inspectionResult=='NORMAL'"
                                       dictCode="yn" style="width: 100%"/>
                  </template>
                </j-vxe-table>
              </a-tab-pane>

              <template v-if="selectShenpiData.procInstId">
                <a-tab-pane key='3' tab='流程节点'>
                  <a-card :bordered="false">
                    <a-timeline>
                      <a-timeline-item v-for="(item,index) in hitaskDataSource" :key="index">
                        <div>
                          <h3 style="font-weight: bold;">{{item.taskName}}</h3>
                          <div>处理人：{{item.assignee_dictText}}</div>
                          <div v-if="index !==0">处理时长：{{item.duration}}</div>
                          <div v-if="item.name !== '提交申请'">处理类型：{{item.sequenceFlowName}}</div>
                          <div v-if="item.description">处理意见：{{item.description}}</div>
                        </div>
                      </a-timeline-item>
                    </a-timeline>
                  </a-card>
                </a-tab-pane>

                <a-tab-pane key='4' tab='流程图'>
                  <img :src="imageSrc" width="100%" v-if="imageSrc"/>
                <a-tab-pane key='3' tab='流程图'>
                  <img :src="imageSrc" v-if="imageSrc"/>
                </a-tab-pane>
              </template>

              <a-button
                v-if="selectedRowKeys.length>0&&!isDisableOperation&&hasInspectionDateArrived&&activeTabKey==='1'&&activeTabKey==='2'"
                v-if="activeTabKey=='1'||activeTabKey=='2'"
                :disabled="(activeTabKey=='1'&&selectedDayInspectionRowKeys.length==0)||(activeTabKey=='2'&&selectedWeekInspectionRowKeys.length==0)||(activeTabKey=='2'&&detail.weekInspectionFinishedFlag)||isDisableOperation"
                slot="tabBarExtraContent" type="primary"
                @click="handleSelectAllInspectionResult">批量点检正常
              </a-button>
            </a-tabs>
          </a-col>

          <a-col v-if="!disableSubmit&&isDisplayConfirm" :span="6">
          <a-col v-if="isDisplayConfirm" :span="6">
            <a-tabs>
              <a-tab-pane tab="维修工确认">
                <a-row>
@@ -211,7 +197,6 @@
        confirmLoading: false,
        spinning: false,
        tableRowRecord: {},
        hitaskDataSource: [],
        validatorRules: {
          confirmDealType: [
            { required: true, message: '请选择处理类型' }
@@ -240,8 +225,6 @@
          weekInspectionOrderList: '/eam/eamWeekInspectionDetail/queryStandardList'
        },
        detail: {
          loading: false,
          dataSource: [],
          columns: [
            {
              title: '序号',
@@ -296,18 +279,18 @@
              ]
            }
          ],
          weekInspectionList: []
          dayInspectionList: [],
          weekInspectionList: [],
          weekInspectionFinishedFlag: false
        },
        selectedRowKeys: [],
        selectedDayInspectionRowKeys: [],
        selectedWeekInspectionRowKeys: [],
        disableSubmit: false,
        activeTabKey: '1',
        title: ''
      }
    },
    computed: {
      hasInspectionDateArrived() {
        return moment(this.tableRowRecord.inspectionDate).diff(moment(), 'hours') <= 0
      },
      isDisplayConfirm() {
        return ['WAIT_CONFIRM', 'COMPLETE'].includes(this.tableRowRecord.inspectionStatus)
      },
@@ -326,11 +309,6 @@
          const param = { procInstId }
          const imageParam = { processDefinitionId, processInstanceId, TaskDefinitionKey: processDefinitionKey }
          const that = this

          getAction(this.url.queryHisTaskList, param)
            .then(res => {
              that.hitaskDataSource = res.result
            })

          downFile(this.url.diagramView, imageParam, 'get')
            .then((res => {
@@ -352,20 +330,70 @@
       */
      async getBasicInformation(record) {
        this.activeTabKey = '1'
        this.detail.dataSource = []
        this.detail.dayInspectionList = this.detail.weekInspectionList = []
        this.spinning = true
        const param = { id: record.dataId }
        let res = await getAction(this.url.queryById, param)
        this.tableRowRecord = Object.assign({}, res.result)
        this.loadDetail(record.dataId)
        this.getDayInspectionOrderListByApi(record.dataId)
        console.log('record', record)
        this.getWeekInspectionOrderListByApi(this.tableRowRecord.standardId)
      },

      /**
       * 获取点检工单中的日点检列表
       * @param orderId 工单号
       */
      getDayInspectionOrderListByApi(orderId) {
        if (orderId) {
          getAction(this.url.detailList, { orderId })
            .then(res => {
              if (res.success) {
                this.detail.dayInspectionList = [...res.result]
              }
            })
            .finally(() => {
              this.spinning = false
            })
        }
      },

      /**
       * 获取点检工单中的周点检列表
       * @param standardId 规范id
       */
      getWeekInspectionOrderListByApi(standardId) {
        console.log('standardId-------------------------', standardId)
        getAction(this.url.weekInspectionOrderList, { standardId, inspectionDate: this.tableRowRecord.inspectionDate })
          .then(res => {
            if (res.success) {
              this.detail.weekInspectionList = res.result.list
              this.detail.weekInspectionFinishedFlag = res.result.weekInsFlag
            }
          })
          .finally(() => {
            this.spinning = false
          })
      },

      handleTabChange(tabKey) {
        if (this.activeTabKey == '1') this.$refs.editableDetailTable1.clearValidate()
        this.activeTabKey = tabKey
      },

      // 提交事件
      async submitForm() {
        let errMap = await this.$refs.editableDetailTable.validateTable()
        let errMap = await this.$refs.editableDetailTable1.validateTable()
        if (errMap) {
          console.log('err', errMap)
          if (this.activeTabKey != '1') {
            this.activeTabKey = '1'
            // 内部校验提示因tab切换时定位出现问题因此在此处清楚内部校验提示，增加notification提示
            this.$refs.editableDetailTable1.clearValidate()
            this.$notification.warning({
              message: '消息',
              description: '日点检结果不能为空'
            })
          }
          return
        }

@@ -377,20 +405,26 @@
            flowTaskVo.taskId = this.selectShenpiData.id
            flowTaskVo.userId = this.selectShenpiData.assignee
            flowTaskVo.instanceId = this.selectShenpiData.procInstId
            flowTaskVo.values = this.selectShenpiData.variables
            flowTaskVo.confirmDealType = this.tableRowRecord.confirmDealType
            flowTaskVo.confirmComment = this.tableRowRecord.confirmComment
            flowTaskVo.tableDetailList = this.$refs.editableDetailTable.getTableData()
            flowTaskVo.tableDetailList = this.$refs.editableDetailTable1.getTableData()
            if (!this.detail.weekInspectionFinishedFlag) flowTaskVo.tableWeekDetailList = this.$refs.editableDetailTable2.getTableData()
            const that = this
            postAction(this.url.approve, flowTaskVo)
              .then((res) => {
                if (res.success) {
                  that.$message.success(res.message)
                  that.$notification.success({
                    message: '消息',
                    description: res.message
                  })
                  //刷新表格
                  that.$emit('searchReset')
                  that.$emit('modalFormOk')
                  that.handleCancel()
                } else {
                  that.$message.warning(res.message)
                  that.$notification.warning({
                    message: '消息',
                    description: res.message
                  })
                }
              })
              .finally(() => {
@@ -410,24 +444,37 @@

      // 批量选择所有点检结果
      handleSelectAllInspectionResult() {
        this.selectedRowKeys.forEach(key => {
          const dataItem = this.detail.dataSource.find(item => item.id === key)
          if (dataItem && dataItem.inspectionResult !== '1') {
        let selectedRowKeys, prefix
        if (this.activeTabKey == '1') {
          selectedRowKeys = this.selectedDayInspectionRowKeys
          prefix = 'day'
        }
        else if (this.activeTabKey == '2') {
          selectedRowKeys = this.selectedWeekInspectionRowKeys
          prefix = 'week'
        }
        else selectedRowKeys = []
        if (selectedRowKeys.length == 0) return

        selectedRowKeys.forEach(key => {
          const dataItem = this.detail[prefix + 'InspectionList'].find(item => item.id === key)
          if (dataItem && dataItem.inspectionResult !== 'NORMAL') {
            delete dataItem.exceptionDescription
            delete dataItem.reportFlag
            dataItem.inspectionResult = '1'
            dataItem.inspectionResult = 'NORMAL'
          }
        })
        this.$refs.editableDetailTable.clearCheckboxRow()
        this.selectedRowKeys = []
        this.$refs['editableDetailTable' + this.activeTabKey].clearCheckboxRow()
        this['selected' + prefix.charAt(0).toUpperCase() + prefix.slice(1) + 'InspectionRowKeys'] = []
      },

      /**
       * 表格多选框发生改变时触发
       * @param {selectedRowIds} 表格中已选择的ID列表
       * @param key 点检区分key
       */
      handleTableSelectRowChange({ selectedRowIds }) {
        this.selectedRowKeys = selectedRowIds
      handleTableSelectRowChange({ selectedRowIds }, key) {
        this['selected' + key + 'InspectionRowKeys'] = selectedRowIds
      },

      /**
@@ -440,10 +487,16 @@
        if (record.reportFlag) delete record.reportFlag
      },

      /**
       * 异常描述与异常是否保修字段自定义校验方法
       * @param cellValue  单元格内的值
       * @param row  当前行记录
       * @param callback 结果回调函数
       */
      customValidator({ cellValue, row }, callback) {
        if (row.inspectionResult === '2') {
        if (this.activeTabKey == '1' && row.inspectionResult != 'NORMAL') {
          if (!cellValue) {
            callback(false, '${title}不能为空！') // false = 未通过，可以跟自定义提示
            callback(false, '请输入${title}') // false = 未通过，可以跟自定义提示
          } else {
            callback(true) // true = 通过验证
          }
@@ -453,41 +506,8 @@
      },

      handleCancel() {
        this.selectedRowKeys = []
        this.selectedDayInspectionRowKeys = this.selectedWeekInspectionRowKeys = []
        this.visible = false
      },

      /**
       * 获取日点检明细
       * @param orderId
       */
      loadDetail(orderId) {
        if (orderId) {
          getAction(this.url.detailList, { orderId })
            .then(res => {
              if (res.success) {
                this.detail.dataSource = [...res.result]
              }
            })
            .finally(() => {
              this.spinning = false
            })
        }
      },

      /**
       * 获取点检工单中的周点检列表
       * @param standardId 规范id
       */
      getWeekInspectionOrderListByApi(standardId) {
        console.log('standardId-------------------------', standardId)
        getAction(this.url.weekInspectionOrderList, { standardId, inspectionDate: this.tableRowRecord.inspectionDate })
          .then(res => {
            if (res.success) this.detail.weekInspectionList = res.result
          })
          .finally(() => {
            this.spinning = false
          })
      }
    }
  }