保养流程添加流程节点

lyh

8 小时以前 f7f0a26ba95de85e537b0c18e02f06416b01312f

 src/views/flowable/workflow/MaintenanceStandard/MaintenanceStandardApprovalModal.vue

@@ -3,7 +3,7 @@
           :okButtonProps="{ class:{'jee-hidden': disableSubmit} }" @ok="submitForm"
           @cancel="handleCancel" :mask-closable="false" :confirmLoading="confirmLoading">
    <a-spin :spinning="spinning">
      <a-form-model ref='form' :model='tableRowRecord' :labelCol="labelCol" :wrapperCol="wrapperCol"
      <a-form-model ref='form' :model='model' :labelCol="labelCol" :wrapperCol="wrapperCol"
                    :rules="validatorRules">
        <a-row :gutter="24" id="outer-row">
          <a-col :span="8" class="scroll-col">
@@ -12,12 +12,12 @@
                <a-row>
                  <a-col :span="span">
                    <a-form-model-item prop="standardCode" label="规范编码">
                      <a-input v-model="tableRowRecord.standardCode" readOnly/>
                      <a-input v-model="model.standardCode" readOnly/>
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="span">
                    <a-form-model-item prop="standardName" label="规范名称">
                      <a-input v-model="tableRowRecord.standardName" readOnly/>
                      <a-input v-model="model.standardName" readOnly/>
                    </a-form-model-item>
                  </a-col>
                </a-row>
@@ -25,12 +25,12 @@
                <a-row>
                  <a-col :span='span'>
                    <a-form-model-item label="统一编码">
                      <a-input v-model="tableRowRecord.equipmentCode" readOnly/>
                      <a-input v-model="model.equipmentCode" readOnly/>
                    </a-form-model-item>
                  </a-col>
                  <a-col :span='span'>
                    <a-form-model-item label="保养分类">
                      <a-input v-model="tableRowRecord.maintenanceCategory_dictText" readOnly/>
                      <a-input v-model="model.maintenanceCategory_dictText" readOnly/>
                    </a-form-model-item>
                  </a-col>

@@ -39,12 +39,12 @@
                <a-row>
                  <a-col :span='span'>
                    <a-form-model-item label="保养周期单位">
                      <a-input v-model="tableRowRecord.periodUnit" readOnly/>
                      <a-input v-model="model.periodUnit" readOnly/>
                    </a-form-model-item>
                  </a-col>
                  <a-col :span='span'>
                    <a-form-model-item label="保养周期">
                      <a-input v-model="tableRowRecord.maintenancePeriod" readOnly/>
                      <a-input v-model="model.maintenancePeriod" readOnly/>
                    </a-form-model-item>
                  </a-col>
                </a-row>
@@ -52,12 +52,12 @@
                <a-row>
                  <a-col :span='span'>
                    <a-form-model-item label="初始日期">
                      <a-input v-model="tableRowRecord.initialDate" readOnly/>
                      <a-input v-model="model.initialDate" readOnly/>
                    </a-form-model-item>
                  </a-col>
                  <a-col :span='span'>
                    <a-form-model-item label="规范状态">
                      <a-input v-model="tableRowRecord.standardStatus_dictText" readOnly/>
                      <a-input v-model="model.standardStatus_dictText" readOnly/>
                    </a-form-model-item>
                  </a-col>
                </a-row>
@@ -65,7 +65,7 @@
                <a-row>
                  <a-col :span="span">
                    <a-form-model-item label="规范版本">
                      <a-input v-model="tableRowRecord.standardVersion" readOnly/>
                      <a-input v-model="model.standardVersion" readOnly/>
                    </a-form-model-item>
                  </a-col>
                </a-row>
@@ -76,59 +76,76 @@
          <a-col :span="10" class="scroll-col">
            <a-tabs default-active-key="1">
              <a-tab-pane key="1" tab="保养项明细">
                <j-vxe-table ref="editableDetailTable" :rowNumber="false" :bordered="true"
                             :alwaysEdit="true" :toolbar="false" keep-source :loading="detail.loading"
                             :dataSource="detail.dataSource" :columns="detail.columns">
                <j-vxe-table ref="editableDetailTable" bordered alwaysEdit keep-source :dataSource="detail.dataSource"
                             :columns="detail.columns">
                  <template v-slot:itemCategory="props">
                    <j-dict-select-tag v-model="props.row.itemCategory" :dict-code="encodedDictCode" disabled/>
                  </template>
                </j-vxe-table>
              </a-tab-pane>

              <template v-if="selectShenpiData.procInstId">
                <a-tab-pane tab='流程图' forceRender>
                  <img :src="imageSrc" width="100%" v-if="imageSrc"/>
              <template v-if="selectShenpiData.processDefinitionKey">
                <a-tab-pane key='2' tab='流程图'>
                  <img :src="imageSrc" alt="Fetched Image"/>
                </a-tab-pane>
              </template>

              <a-tab-pane key='3' tab='流转节点'>
                <a-card>
                  <a-timeline style="padding:0 1% 0 12%" >
                    <a-timeline-item color='white' v-for="(item,index1) in hitaskDataSource" :key="index1">
                      <div class="bottom">
                        <p>处理人：{{item.assignee_dictText}}</p>
                        <p v-if="index1 !==0">处理时长：{{item.duration}}</p>
                        <p v-if="item.name !== '提交申请'">处理类型：{{item.sequenceFlowName}}</p>
                        <p v-if="item.description != null">处理意见：{{item.description}}</p>
                        <div class="left_qiu"><span>{{item.taskName}}</span></div>
                      </div>
                    </a-timeline-item>
                  </a-timeline>
                </a-card>
              </a-tab-pane>
            </a-tabs>
          </a-col>

          <a-col :span="6" class="scroll-col">
            <a-tabs>
            <a-tabs v-if="displayRepairLeaderFlag">
              <a-tab-pane tab="维修主任审批">
                <a-row :gutter="24">
                  <a-col :span="24">
                    <a-form-model-item prop="repairManagerApproveResult" label="处理类型">
                      <j-dict-select-tag type='radio' v-model='tableRowRecord.repairManagerApproveResult'
                                         dictCode='approved_rejected'
                                         :disabled="disableSubmit||tableRowRecord.standardStatus!=='WAIT_REPAIR_DIRECTOR'"/>
                    <a-form-model-item prop="repairManagerApproveResult" label="确认类型">
                      <j-dict-select-tag type='radio' v-model='model.repairManagerApproveResult'
                                         dictCode='approve_reject'
                                         :disabled="disableSubmit||model.standardStatus!=='WAIT_REPAIR_DIRECTOR'"/>
                    </a-form-model-item>
                  </a-col>

                  <a-col :span="24">
                    <a-form-model-item label="处理意见">
                    <a-form-model-item label="确认意见">
                      <a-textarea placeholder="请输入意见"
                                  :disabled="disableSubmit||tableRowRecord.standardStatus!=='WAIT_REPAIR_DIRECTOR'"
                                  v-model="tableRowRecord.repairManagerApproveComment"/>
                                  :disabled="disableSubmit||model.standardStatus!=='WAIT_REPAIR_DIRECTOR'"
                                  v-model="model.repairManagerApproveComment"/>
                    </a-form-model-item>
                  </a-col>
                </a-row>
              </a-tab-pane>
            </a-tabs>

            <a-tabs v-if="tableRowRecord.standardStatus&&tableRowRecord.standardStatus!=='WAIT_REPAIR_DIRECTOR'">
            <a-tabs v-if="displayTechnicalDirectorFlag">
              <a-tab-pane tab="技术主管审批">
                <a-row :gutter="24">
                  <a-col :span="24">
                    <a-form-model-item prop="technicalManagerApproveResult" label="处理类型">
                      <j-dict-select-tag type='radio' v-model='tableRowRecord.technicalManagerApproveResult'
                                         dictCode='approved_rejected'/>
                    <a-form-model-item prop="technicalManagerApproveResult" label="确认类型">
                      <j-dict-select-tag type='radio' v-model='model.technicalManagerApproveResult'
                                         dictCode='approve_reject'
                                         :disabled="disableSubmit||model.standardStatus!=='WAIT_TECHNICAL_DIRECTOR'"/>
                    </a-form-model-item>
                  </a-col>

                  <a-col :span="24">
                    <a-form-model-item label="处理意见">
                      <a-textarea placeholder="请输入意见" v-model="tableRowRecord.technicalManagerApproveComment"/>
                    <a-form-model-item label="确认意见">
                      <a-textarea placeholder="请输入意见" v-model="model.technicalManagerApproveComment"
                                  :disabled="disableSubmit||model.standardStatus!=='WAIT_TECHNICAL_DIRECTOR'"/>
                    </a-form-model-item>
                  </a-col>
                </a-row>
@@ -142,10 +159,9 @@
</template>

<script>
  import { getAction, deleteAction, postAction, downFile, httpAction } from '@api/manage'
  import { getAction, 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: 'MaintenanceStandardApprovalModal',
@@ -160,14 +176,10 @@
        span: 12,
        confirmLoading: false,
        spinning: false,
        tableRowRecord: {},
        model: {},
        validatorRules: {
          repairManagerApproveResult: [
            { required: true, message: '请选择处理类型' }
          ],
          technicalManagerApproveResult: [
            { required: true, message: '请选择处理类型' }
          ]
          repairManagerApproveResult: [{ required: true, message: '请选择确认类型' }],
          technicalManagerApproveResult: [{ required: true, message: '请选择确认类型' }]
        },
        imageSrc: null,
        labelCol: {
@@ -188,10 +200,10 @@
          detailList: '/eam/eamMaintenanceStandardDetail/queryList'
        },
        detail: {
          loading: false,
          dataSource: [],
          columns: [],
          defaultColumns: [
          hitaskDataSource:[],
          inspectionColumns: [
            {
              title: 'ID',
              key: 'id',
@@ -205,37 +217,90 @@
            {
              title: '项目序号',
              key: 'itemCode',
              type: JVXETypes.inputNumber,
              align: 'center',
              disabled: true
            },
            {
              title: '部位',
              key: 'itemPart',
              type: JVXETypes.textarea,
              align: 'center',
              disabled: true
              type: JVXETypes.normal,
              align: 'center'
            },
            {
              title: '保养项分类',
              key: 'itemCategory',
              type: JVXETypes.slot,
              slotName: 'itemCategory',
              align: 'center'
              align: 'center',
              disabled: true
            },
            {
              title: '保养项目',
              key: 'itemName',
              type: JVXETypes.textarea,
              align: 'center',
              disabled: true
              type: JVXETypes.normal,
              align: 'center'
            },
            {
              title: '保养规范或要求',
              key: 'itemDemand',
              type: JVXETypes.textarea,
              type: JVXETypes.normal,
              align: 'center'
            }
          ],
          secondMaintenanceColumns: [
            {
              title: 'ID',
              key: 'id',
              type: JVXETypes.hidden
            },
            {
              title: 'standardId',
              key: 'standardId',
              type: JVXETypes.hidden
            },
            {
              title: '项目序号',
              key: 'itemCode',
              type: JVXETypes.normal,
              align: 'center'
            },
            {
              title: '保养项分类',
              key: 'itemCategory',
              type: JVXETypes.slot,
              slotName: 'itemCategory',
              align: 'center',
              disabled: true
            },
            {
              title: '保养项目',
              key: 'itemName',
              type: JVXETypes.normal,
              align: 'center'
            }
          ],
          thirdMaintenanceColumns: [
            {
              title: 'ID',
              key: 'id',
              type: JVXETypes.hidden
            },
            {
              title: 'standardId',
              key: 'standardId',
              type: JVXETypes.hidden
            },
            {
              title: '保养部位',
              key: 'itemPart',
              type: JVXETypes.normal,
              align: 'center'
            },
            {
              title: '保养内容',
              key: 'itemName',
              type: JVXETypes.normal,
              align: 'center'
            },
            {
              title: '验收标准',
              key: 'itemDemand',
              type: JVXETypes.normal,
              align: 'center'
            }
          ]
        },
@@ -244,17 +309,36 @@
      }
    },
    watch: {
      'tableRowRecord.maintenanceCategory': {
      'model.maintenanceCategory': {
        handler(val) {
          if (val) {
            if (val != 'THIRD_MAINTENANCE') this.detail.columns = [...this.detail.defaultColumns.filter(item => item.key != 'itemPart')]
            else this.detail.columns = [...this.detail.defaultColumns.filter(item => item.key != 'itemCategory')]
            console.log('val', val)
            switch (val) {
              case 'POINT_INSPECTION':
                this.detail.columns = this.detail.inspectionColumns
                break
              case 'SECOND_MAINTENANCE':
                this.detail.columns = this.detail.secondMaintenanceColumns
                break
              case 'THIRD_MAINTENANCE':
                this.detail.columns = this.detail.thirdMaintenanceColumns
                break
              default:
                break
            }
          }
          else this.detail.columns = [...this.detail.defaultColumns]
        }
      }
    },
    computed: {
      displayRepairLeaderFlag() {
        return this.model.standardStatus && ['WAIT_REPAIR_DIRECTOR', 'WAIT_TECHNICAL_DIRECTOR', 'REJECTED'].includes(this.model.standardStatus)
      },

      displayTechnicalDirectorFlag() {
        return this.model.standardStatus && ['WAIT_TECHNICAL_DIRECTOR', 'REJECTED'].includes(this.model.standardStatus) && this.model.repairManagerApproveResult === '1'
      },

      encodedDictCode() {
        const dictCode = `sys_dict_item,item_text,item_value,dict_id='1940598438685134850'`
        return encodeURIComponent(dictCode)
@@ -262,39 +346,93 @@
    },
    methods: {
      /**
       * 获取流程节点和流程图
       * @param record 待办记录信息
       * 主页面点击执行审批时触发
       * @param record 主页面列表行记录
       */
      getAllApproveData(record) {
        if (record.procInstId) {
          const { processDefinitionId, processInstanceId, processDefinitionKey, procInstId } = record
          const imageParam = { processDefinitionId, processInstanceId, TaskDefinitionKey: processDefinitionKey }
          const that = this
          this.imageSrc = null

          downFile(this.url.diagramView, imageParam, 'get')
            .then((res => {
              const urlObject = window.URL.createObjectURL(new Blob([res]))
              that.imageSrc = urlObject
            }))
            .finally(() => {
              this.spinning = false
            })
        }
      handleApprove(record) {
        this.getBasicInformationByApi(record)
        this.getFlowChartImageByApi(record)
        this.getFlowTaskListByApi(record)
      },

      /**
       * 获取待办记录的基本信息
       * @param record 待办记录信息
       * 获取流转节点
       * @param record
       */
      async getBasicInformation(record) {
      getFlowTaskListByApi(record) {
        console.log("sss",record)
        let parmhis={
          'procInstId': record.procInstId
        }
        getAction(this.url.queryHisTaskList,parmhis).then(res=>{
          this.hitaskDataSource=res.result
        }).finally(
          this.visible = true,
          console.log('this.approveData---->', this.approveData)
        )
      },

      /**
       * 主页面点击详情时触发
       * @param record 主页面列表行记录
       */
      handleDetail(record) {
        this.detail.dataSource = []
        this.tableRowRecord = {}
        this.model = Object.assign({}, record)
        this.loadDetail(record.id)
      },

      /**
       * 获取基础信息
       * @param record 主页面列表行记录
       */
      getBasicInformationByApi(record) {
        this.spinning = true
        const param = { id: record.dataId }
        let res = await getAction(this.url.queryById, param)
        this.tableRowRecord = Object.assign({}, res.result.records[0])
        await this.loadDetail(record.dataId)
        this.model = {}
        this.detail.dataSource = []
        const that = this
        getAction(this.url.queryById, { id: record.dataId })
          .then(res => {
            if (res.success) {
              that.model = Object.assign({}, res.result.records[0])
              that.model.dataId = record.dataId
              that.model.taskId = record.id
              that.model.userId = record.assignee
              that.model.instanceId = record.procInstId
            }
            else {
              that.$notification.warning({
                message: '消息',
                description: res.message
              })
            }
          })
          .finally(() => {
            this.loadDetail(record.dataId)
          })
      },

      /**
       * 获取流程图
       * @param record 主页面列表行记录
       */
      getFlowChartImageByApi(record) {
        const { processDefinitionId, processInstanceId, processDefinitionKey } = record
        this.imageSrc = null
        downFile(this.url.diagramView, {
          processDefinitionId,
          processInstanceId,
          TaskDefinitionKey: processDefinitionKey
        }, 'get')
          .then((res => {
            this.imageSrc = window.URL.createObjectURL(new Blob([res]))
          }))
          .catch(err => {
            this.$notification.error({
              message: '消息',
              description: err.message
            })
          })
      },

      /**
@@ -302,14 +440,13 @@
       * @param dataId 业务ID
       */
      loadDetail(dataId) {
        if (dataId) {
          getAction(this.url.detailList, { standardId: dataId })
            .then(res => {
              if (res.success) {
                this.detail.dataSource = [...res.result]
              }
            })
        }
        getAction(this.url.detailList, { standardId: dataId })
          .then(res => {
            if (res.success) this.detail.dataSource = res.result
          })
          .finally(() => {
            this.spinning = false
          })
      },

      async submitForm() {
@@ -321,21 +458,8 @@
        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
            if (this.tableRowRecord.standardStatus == 'WAIT_REPAIR_DIRECTOR') {
              flowTaskVo.repairManagerApproveResult = this.tableRowRecord.repairManagerApproveResult
              flowTaskVo.repairManagerApproveComment = this.tableRowRecord.repairManagerApproveComment
            } else {
              flowTaskVo.technicalManagerApproveResult = this.tableRowRecord.technicalManagerApproveResult
              flowTaskVo.technicalManagerApproveComment = this.tableRowRecord.technicalManagerApproveComment
            }
            const that = this
            console.log('表单提交数据', flowTaskVo)
            httpAction(this.url.approve, flowTaskVo, 'post')
            httpAction(this.url.approve, that.model, 'post')
              .then((res) => {
                if (res.success) {
                  that.$notification.success({
@@ -392,4 +516,113 @@
      }
    }
  }
  /* 全局禁选样式 - 作用于整个页面 */
  html.submitting,
  html.submitting body {
    pointer-events: none !important;
    cursor: wait !important;
  }

  /* 蒙层效果增强 */
  html.submitting::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.5);
    z-index: 9998;
  }

  /* 加载指示器 - 更明显的视觉反馈 */
  html.submitting::after {
    content: '提交中...';
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #1890ff;
    color: white;
    padding: 10px 20px;
    border-radius: 4px;
    z-index: 9999;
  }

  /* 禁用状态按钮样式 */
  .disabled-btn {
    opacity: 0.6;
    cursor: not-allowed !important;
  }

  .shallow-hr {
    border: 0;
    height: 1px; /* 分界线的高度 */
    background-color: rgba(0, 0, 0, 0.1); /* 使用 RGBA 颜色，并设置较低的透明度 */
    margin: 20px 0; /* 分界线上下的外边距 */
  }
  .btn-custom {
    background-color: #4CAF50; /* 绿色背景 */
    color: white; /* 白色文字 */
    border: none; /* 无边框 */
    padding: 5px 15px; /* 内边距 */
    text-align: center; /* 文字居中 */
    text-decoration: none; /* 无下划线 */
    display: inline-block; /* 行内块元素 */
    font-size: 12px; /* 字体大小 */
    margin: 4px 2px; /* 外边距 */
    cursor: pointer; /* 鼠标悬停时显示手型 */
    border-radius: 4px; /* 圆角边框 */
  }

  .bold-large-label {
    font-weight: bold;
    font-size: 20px; /* 或你需要的任何大小 */
  }
  .left_qiu{
    position: absolute;
    left: -74px;
    top: 0;
    width:54px;
    border-radius: 50%;
    height:54px;
    font-size: 13px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    background: #0099ff;
    transform: translate(0, 0);
  }
  /deep/ .ant-timeline-item-tail{
    left: -29px !important;
  }
  .left_qiu span{
    width: 3em;
    display: block;
    color: #fff;
    text-align: center;
  }
  .img{
    width: 75%;
  }

  .wrap{
    clear: both;
    width: 100%;
    display: flex;
    height: 50px;
    border: 1px solid #ccc;
    /* background-color: aqua; */
  }
  .box{
    width:21%;
    height:50px;
    border-right: 1px solid #ccc;
    line-height: 50px;
    /* background: red; */
    text-align:center;
    margin: auto;
  }
</style>