1、我的待办页面 设备点检 分类审批新增添加点检照片功能 2、我的待办页面 设备周保流程 分类审批弹窗功能逻辑开发并复用至我的已办页面 3、我的待办页...

zhaowei

2025-04-21 e4faae7013473a55ed9fef7c5f4359365e2958ff

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

@@ -1,115 +1,93 @@
<template>
  <a-modal
    :width="1000"
  <j-modal
    :title="title"
    :width="1200"
    :visible="visible"
    :okButtonProps="{ class:{'jee-hidden': disableSubmit||!hasInspectionDateArrived} }"
    @ok="submitForm"
    @cancel="handCancel"
    @cancel="handleCancel"
    :mask-closable="false"
    :confirmLoading="confirmLoading"
    switchFullscreen
    centered
  >
    <a-card :bordered="false">
      <div>
        <b>{{ selectShenpiData.title }}</b>
        <br>
        <br>
        <a-tag color="blue">
          当前处理人 {{ selectShenpiData.assignee_dictText }}
        </a-tag>
        <a-tag color="blue">
          任务创建时间 {{ selectShenpiData.createTime }}
        </a-tag>
        <br>
        <br>
        <a-button @click="fetchAndShowBmp" class="btn-custom" :loading="showBmpButtonLoading">流程图</a-button>
        <div v-if="imageSrc&&isDisplayBmp">
          <img :src="imageSrc" alt="Fetched Image"/>
        </div>
        <!--<hr class="shallow-hr">-->
      </div>
    <a-spin :spinning="spinning">
      <a-form-model ref='form' :model='tableRowRecord' :labelCol="labelCol" :wrapperCol="wrapperCol"
                    :rules="validatorRules">
        <a-divider orientation="center" style="font-size: large;font-style: italic;color: #66aeed;"> 点检基础信息</a-divider>

      <a-spin :spinning="spinning">
        <a-tabs default-active-key='1'>
          <a-tab-pane key='1' tab='基本信息'>
            <a-form-model ref='form' :model='tableRowRecord' :labelCol="labelCol"
                          :wrapperCol="wrapperCol">
              <a-row>
                <a-col :span='span'>
                  <a-form-model-item label="工单号">
                    <a-input readOnly v-model="tableRowRecord.orderNum"/>
                  </a-form-model-item>
                </a-col>
                <a-col :span='span'>
                  <a-form-model-item label="设备编号">
                    <MaintenanceEquipmentSelect v-model="tableRowRecord.equipmentId"
                                                :maintenanceCategory="'POINT_INSPECTION'" disabled
                                                @autocompleteForm="autoCompleteForm"/>
                  </a-form-model-item>
                </a-col>
              </a-row>
        <a-row>
          <a-col :span='span'>
            <a-form-model-item label="工单号">
              <a-input readOnly v-model="tableRowRecord.orderNum"/>
            </a-form-model-item>
          </a-col>
          <a-col :span='span'>
            <a-form-model-item label="设备编号">
              <MaintenanceEquipmentSelect v-model="tableRowRecord.equipmentId"
                                          :maintenanceCategory="'POINT_INSPECTION'" disabled
                                          @autocompleteForm="autoCompleteForm"/>
            </a-form-model-item>
          </a-col>
          <a-col :span='span'>
            <a-form-model-item label="标准名称">
              <a-input readOnly v-model="tableRowRecord.standardName"/>
            </a-form-model-item>
          </a-col>
        </a-row>

              <a-row>
                <a-col :span='span'>
                  <a-form-model-item label="标准名称">
                    <a-input readOnly v-model="tableRowRecord.standardName"/>
                  </a-form-model-item>
                </a-col>
                <a-col :span='span'>
                  <a-form-model-item label="标准编码">
                    <a-input readOnly v-model="tableRowRecord.standardCode"/>
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span='span'>
                  <a-form-model-item label="保养周期">
                    <a-input v-model="tableRowRecord.maintenancePeriod" readOnly/>
                  </a-form-model-item>
                </a-col>
                <a-col :span='span'>
                  <a-form-model-item label="点检人">
                    <a-input v-model="tableRowRecord.operator" readOnly/>
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span='span'>
                  <a-form-model-item label="点检日期" prop="inspectionDate">
                    <a-input v-model="tableRowRecord.inspectionDate" readOnly/>
                  </a-form-model-item>
                </a-col>
                <a-col :span='span'>
                  <a-form-model-item label="点检过期时间">
                    <a-input v-model="tableRowRecord.expirationTime" readOnly/>
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="24">
                  <a-form-model-item label="备注" :labelCol="{span:3}" :wrapperCol="{span:20}">
                    <a-textarea v-model="tableRowRecord.remark" rows="3" readOnly/>
                  </a-form-model-item>
                </a-col>
              </a-row>
            </a-form-model>
          </a-tab-pane>
          <a-tab-pane key='2' 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-tabs>
        <a-row>
          <a-col :span='span'>
            <a-form-model-item label="标准编码">
              <a-input readOnly v-model="tableRowRecord.standardCode"/>
            </a-form-model-item>
          </a-col>
          <a-col :span='span'>
            <a-form-model-item label="点检日期">
              <a-input v-model="tableRowRecord.inspectionDate" readOnly/>
            </a-form-model-item>
          </a-col>
          <a-col :span='span'>
            <a-form-model-item label="点检过期时间">
              <a-input v-model="tableRowRecord.expirationTime" readOnly/>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-tabs default-active-key='1'>
        <a-row>
          <a-col :span='span'>
            <a-form-model-item label="保养周期">
              <a-input v-model="tableRowRecord.maintenancePeriod" readOnly/>
            </a-form-model-item>
          </a-col>
          <a-col :span='span'>
            <a-form-model-item label="点检人">
              <a-input v-model="tableRowRecord.operator" readOnly/>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :span="span*3">
            <a-form-model-item label="备注" :labelCol="{span:2}" :wrapperCol="{span:21}">
              <a-textarea v-model="tableRowRecord.remark" rows="3" readOnly/>
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row>
          <a-form-model-item prop="imageFilesResult" label="点检图片" :labelCol="{span:2}" :wrapperCol="{span:21}">
            <lx-upload :returnUrl="false" :isMultiple="true" file-type="image" :number="3"
                       :disabled="isDisableOperation||!hasInspectionDateArrived"
                       v-model="tableRowRecord.fileList"/>
          </a-form-model-item>
        </a-row>

        <a-divider orientation="center" style="font-size: large;font-style: italic;color: #66aeed;">
          保养项信息
        </a-divider>

        <a-tabs v-model="activeTabKey">
          <a-tab-pane key="1" tab="保养项明细">
            <j-vxe-table
              ref="editableDetailTable"
@@ -127,6 +105,7 @@
            >
              <template v-slot:inspectionResult="props">
                <j-dict-select-tag v-model="props.row.inspectionResult" dictCode="eam_inspection_result"
                                   :disabled="isDisableOperation"
                                   placeholder="请选择点检结果"
                                   @change="handleInspectionResultSelectChange($event,props.row)"
                                   style="width: 100%"/>
@@ -134,20 +113,46 @@

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

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

          <a-button v-if="selectedRowKeys.length>0" slot="tabBarExtraContent" type="primary"
                    @click="handleSelectAllInspectionResult">批量点检正常
          <template v-if="selectShenpiData.procInstId">
            <a-tab-pane key='2' 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='3' tab='流程图'>
              <img :src="imageSrc" alt="Fetched Image"/>-->
            </a-tab-pane>
          </template>

          <a-button
            v-if="selectedRowKeys.length>0&&!isDisableOperation&&hasInspectionDateArrived&&activeTabKey==='1'"
            slot="tabBarExtraContent" type="primary"
            @click="handleSelectAllInspectionResult">批量点检正常
          </a-button>

          <!--<a-dropdown slot="tabBarExtraContent" v-if="selectedRowKeys.length>0">-->
@@ -161,9 +166,31 @@
          <!--</a-button>-->
          <!--</a-dropdown>-->
        </a-tabs>
      </a-spin>
    </a-card>
  </a-modal>

        <template v-if="isDisplayConfirm">
          <a-divider orientation="center" style="font-size: large;font-style: italic;color: #66aeed;"> 班组长确认信息
          </a-divider>

          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-model-item prop="confirmDealType" label="处理类型">
                <j-dict-select-tag type='radio' v-model='tableRowRecord.confirmDealType' dictCode='approved_rejected'
                                   :disabled="disableSubmit||tableRowRecord.inspectionStatus!=='WAIT_CONFIRM'"/>
              </a-form-model-item>
            </a-col>

            <a-col :span="12">
              <a-form-model-item prop="confirmComment" label="处理意见">
                <a-textarea placeholder="请输入处理意见"
                            :disabled="disableSubmit||tableRowRecord.inspectionStatus!=='WAIT_CONFIRM'"
                            v-model="tableRowRecord.confirmComment"/>
              </a-form-model-item>
            </a-col>
          </a-row>
        </template>
      </a-form-model>
    </a-spin>
  </j-modal>
</template>

<script>
@@ -171,22 +198,32 @@
  import { getAction, deleteAction, postAction, downFile, httpAction } from '@api/manage'
  import MaintenanceEquipmentSelect from '@views/eam/equipment/modules/MaintenanceEquipmentSelect.vue'
  import { JVXETypes } from '@comp/jeecg/JVxeTable'
  import moment from 'moment'

  export default {
    name: 'InspectionOrderHandle',
    components: { MaintenanceEquipmentSelect },
    props: {
      selectShenpiData: {
        type: Object,
        required: true
        type: Object
      }
    },
    data() {
      return {
        span: 12,
        span: 8,
        confirmLoading: false,
        spinning: false,
        tableRowRecord: {},
        assignFileStream: {},
        hitaskDataSource: [],
        validatorRules: {
          confirmDealType: [
            { required: true, message: '请选择处理类型' }
          ],
          confirmComment: [
            { required: true, message: '请输入处理意见' }
          ]
        },
        imageSrc: null,
        labelCol: {
          xs: { span: 24 },
@@ -212,7 +249,7 @@
              title: '序号',
              key: 'itemCode',
              type: JVXETypes.normal,
              width: '10%',
              width: '5%',
              align: 'center',
              fixed: 'left'
            },
@@ -220,7 +257,7 @@
              title: '保养项',
              key: 'itemName',
              type: JVXETypes.normal,
              width: '20%',
              width: '15%',
              align: 'center',
              fixed: 'left'
            },
@@ -228,7 +265,7 @@
              title: '保养要求',
              key: 'itemDemand',
              type: JVXETypes.normal,
              width: '30%',
              width: '15%',
              align: 'center',
              fixed: 'left'
            },
@@ -237,16 +274,22 @@
              key: 'inspectionResult',
              type: JVXETypes.slot,
              slotName: 'inspectionResult',
              width: '20%',
              align: 'center'
              width: '15%',
              align: 'center',
              validateRules: [
                { required: true, message: '${title}不能为空！' }
              ]
            },
            {
              title: '异常描述',
              key: 'exceptionDescription',
              type: JVXETypes.slot,
              slotName: 'exceptionDescription',
              width: '30%',
              align: 'center'
              width: '20%',
              align: 'center',
              validateRules: [
                { handler: this.customValidator }
              ]
            },
            {
              title: '异常是否报修',
@@ -254,26 +297,59 @@
              type: JVXETypes.slot,
              slotName: 'reportFlag',
              width: '20%',
              align: 'center'
              align: 'center',
              validateRules: [
                { handler: this.customValidator }
              ]
            }
          ]
        },
        isDisplayBmp: false,
        showBmpButtonLoading: false,
        selectedRowKeys: []
        selectedRowKeys: [],
        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)
      },
      isDisableOperation() {
        return this.disableSubmit || this.tableRowRecord.inspectionStatus !== 'UNDER_INSPECTION'
      }
    },
    methods: {
      /**
       * 获取流程节点
       * 获取流程节点和流程图
       * @param record 待办记录信息
       */
      getAllApproveData(record) {
        const param = { 'procInstId': record.procInstId }
        getAction(this.url.queryHisTaskList, param)
          .then(res => {
            this.hitaskDataSource = res.result
          })
        if (record.procInstId) {
          const { processDefinitionId, processInstanceId, processDefinitionKey, procInstId } = record
          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 => {
              const urlObject = window.URL.createObjectURL(new Blob([res]))
              that.imageSrc = urlObject
            }))
            .catch(err => {
              that.$notification.error({
                message: '消息',
                description: res.message
              })
            })
        }
      },

      /**
@@ -281,6 +357,7 @@
       * @param record 待办记录信息
       */
      getBasicInformation(record) {
        this.activeTabKey = '1'
        this.tableRowRecord = {}
        this.detail.dataSource = []
        this.spinning = true
@@ -289,63 +366,54 @@
        getAction(this.url.queryBomDataById, param)
          .then((res => {
            if (res.success) {
              that.tableRowRecord = res.result[0]
              that.tableRowRecord = { ... res.result[0], fileList: JSON.parse(res.result[0].imageFiles) }
              if (!this.hasInspectionDateArrived && !this.disableSubmit) this.title += `（未到点检日期不能提前点检）`
              that.detail.dataSource = res.result[0].tableDetailList
              console.log('that.tableRowRecord----->', that.tableRowRecord)
            }
          }))
      },

      // 获取并展开流程图
      fetchAndShowBmp() {
        this.isDisplayBmp = !this.isDisplayBmp
        if (!this.imageSrc) {
          const { processDefinitionId, processInstanceId, processDefinitionKey } = this.selectShenpiData
          let param = { processDefinitionId, processInstanceId, TaskDefinitionKey: processDefinitionKey }
          this.showBmpButtonLoading = true
          const that = this
          downFile(this.url.diagramView, param, 'get')
            .then((res => {
              const urlObject = window.URL.createObjectURL(new Blob([res]))
              this.imageSrc = urlObject
            }))
            .catch(err => {
              that.$notification.error({
                message: '消息',
                description: res.message
              })
            })
            .finally(() => {
              this.showBmpButtonLoading = false
            })
      async submitForm() {
        let errMap = await this.$refs.editableDetailTable.validateTable()
        if (errMap) {
          console.log('err', errMap)
          return
        }
      },

      submitForm() {
        const flowTaskVo = {}
        flowTaskVo.dataId = this.selectShenpiData.dataId
        flowTaskVo.taskId = this.selectShenpiData.id
        flowTaskVo.userId = this.selectShenpiData.assignee
        flowTaskVo.instanceId = this.selectShenpiData.procInstId
        flowTaskVo.values = this.selectShenpiData.variables
        flowTaskVo.tableDetailList = this.$refs.editableDetailTable.getTableData()
        const that = this
        this.confirmLoading = true
        console.log('表单提交数据', flowTaskVo)
        // httpAction(this.url.approve, flowTaskVo, 'post')
        //   .then((res) => {
        //     if (res.success) {
        //       that.$message.success(res.message)
        //       //刷新表格
        //       that.$emit('searchReset')
        //       that.handleCancel()
        //     } else {
        //       that.$message.warning(res.message)
        //     }
        //   })
        //   .finally(() => {
        //     that.confirmLoading = false
        //   })
        this.$refs.form.validate(valid => {
          if (valid) {
            this.confirmLoading = this.spinning = true
            const flowTaskVo = {}
            flowTaskVo.dataId = this.selectShenpiData.dataId
            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.fileList = this.tableRowRecord.fileList
            flowTaskVo.tableDetailList = this.$refs.editableDetailTable.getTableData()
            const that = this
            console.log('表单提交数据', flowTaskVo)
            httpAction(this.url.approve, flowTaskVo, 'post')
              .then((res) => {
                if (res.success) {
                  that.$message.success(res.message)
                  //刷新表格
                  that.$emit('searchReset')
                  that.handleCancel()
                } else {
                  that.$message.warning(res.message)
                }
              })
              .finally(() => {
                that.confirmLoading = this.spinning = false
              })
          } else {
            return false
          }
        })
      },

      autoCompleteForm({ standardName, maintenancePeriod, standardCode }) {
@@ -360,7 +428,6 @@
        this.selectedRowKeys.forEach(key => {
          const dataItem = this.detail.dataSource.find(item => item.id === key)
          if (dataItem && dataItem.inspectionResult !== '1') {
            console.log('dataItem', dataItem)
            delete dataItem.exceptionDescription
            delete dataItem.reportFlag
            dataItem.inspectionResult = '1'
@@ -388,7 +455,19 @@
        if (record.reportFlag) delete record.reportFlag
      },

      handCancel() {
      customValidator({ cellValue, row }, callback) {
        if (row.inspectionResult === '2') {
          if (!cellValue) {
            callback(false, '${title}不能为空！') // false = 未通过，可以跟自定义提示
          } else {
            callback(true) // true = 通过验证
          }
        } else {
          callback(true)
        }
      },

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