fuliqi
2025-01-14 78e5ece58bf05ed6f344239f40b49dbe90956cce
src/views/flowable/task/myProcess/detail/index.vue
@@ -1,20 +1,56 @@
<template>
  <div class="app-container">
    <el-card class="box-card" >
      <div slot="header" class="clearfix">
        <span class="el-icon-document">任务详情</span>
      <div slot="header" class="clearfix" style="display: flex">
        <div style="flex: 1" class="el-icon-document">{{`任务详情:` + this.goBackParams.processName}}</div>
        <div style="flex: 2">{{projectName + '——' + flowName}}</div>
        <el-button style="float: right;" size="mini" type="danger" @click="goBack">关闭</el-button>
      </div>
      <el-tabs  tab-position="top" v-model="activeName" @tab-click="handleClick">
        <!--表单信息-->
        <el-tab-pane label="表单信息" name="1">
          <el-col :span="16" :offset="4" v-if="formDataList && formDataList.length > 0">
            <div v-for="(formDataObj, index) in formDataList" :key="index" class="form-warp">
              <div v-if="formDataObj.current" style="margin-bottom: 15px;color: #409eff">当前阶段:<span style="color: red">{{formDataObj.beforeNodeName}}</span></div>
              <div v-else style="margin-bottom: 15px;color: #409eff">前置阶段:<span style="color: #d5904b">{{formDataObj.beforeNodeName}}</span></div>
              <v-form-render  :form-data="formDataObj.formJson" :ref="'form' + index"/>
          <!--初始化流程加载表单信息-->
          <el-col :span="16" :offset="4">
            <div v-if="formDataList && formDataList.length > 0">
              <div v-for="(formDataObj, index) in formDataList" :key="index" class="form-warp" style="position: relative">
                <div v-if="formDataObj.current">
                  <!--     当前节点可协同、转办等操作         -->
                  <div style="position: absolute; top: 4px; right: 4px; display: flex;justify-content: center; align-items: center;">
                    <el-button size="small" type="primary" @click="submitForm">确认并提交</el-button>
                    <el-button size="small" type="primary" disabled @click="submitForm">协同办理(功能开发中)</el-button>
                    <el-button size="small" type="primary" @click="openDelegation(formDataList[0].beforeNodeName)">转办</el-button>
                  </div>
                  <div style="margin-bottom: 15px;color: #E6A23C">当前阶段:<span style="color: #409EFF">{{formDataObj.beforeNodeName}}</span></div>
                </div>
                <div v-else-if="formDataList.length > 1">
                  <!--     前置节点可驳回         -->
                  <div style="position: absolute; top: 4px; right: 4px">
                    <el-button type="danger" size="small" @click="openRejectTask(formDataObj.beforeNodeDefId)">驳 回</el-button>
                  </div>
                  <div style="margin-bottom: 15px;color: #E6A23C">前置阶段:<span style="color: #F56C6C">{{formDataObj.beforeNodeName}}</span></div>
                </div>
                <div v-if="formDataObj.formJson !== null && formDataObj.formJson !== ''">
                  <v-form-render  :form-data="formDataObj.formJson" :ref="'form' + index"/>
                </div>
                <div v-else>
                  <el-alert
                    title="节点未绑定表单"
                    type="warning"
                    :closable="false"
                  >
                  </el-alert>
                </div>
                <div v-if="formDataList.length <= 1">
                  <el-alert
                    title="不存在前置节点"
                    type="warning"
                    :closable="false"
                  >
                  </el-alert>
                </div>
              </div>
            </div>
         </el-col>
          </el-col>
        </el-tab-pane>
        <!--流程流转记录-->
        <el-tab-pane label="流转记录" name="2">
@@ -29,7 +65,8 @@
                >
                  <p style="font-weight: 700">{{item.taskName}}
                    <span v-if="item.comment && item.comment.type === '3'" style="color: red">(执行了驳回)</span>
                    <span v-if="item.overtime" style="color: red">(已超时)</span>
                    <span v-if="item.overtime && item.overtime==='red'" style="color: red">(已超时)</span>
                    <span v-if="item.overtime && item.overtime==='yellow'" style="color: orange">(即将超时)</span>
                  </p>
                  <el-card :body-style="{ padding: '10px' }">
                    <el-descriptions class="margin-top" :column="1" size="small" border>
@@ -89,6 +126,8 @@
  props: {},
  data() {
    return {
      projectName: '',
      flowName: '',
      // 模型xml数据
      flowData: {},
      formDataList: [],  // 表单列表
@@ -115,6 +154,8 @@
    this.taskForm.taskId  = this.$route.query && this.$route.query.taskId;
    this.taskForm.procInsId = this.$route.query && this.$route.query.procInsId;
    this.goBackParams = this.$route.query && this.$route.query.goBackParams;
    this.projectName = this.$route.query && this.$route.query.projectName;
    this.flowName = this.$route.query && this.$route.query.flowName;
    // 流程任务重获取变量表单
    this.processVariables( this.taskForm.taskId)
    this.getFlowRecordList(this.taskForm.procInsId, this.taskForm.deployId);
@@ -198,7 +239,8 @@
        path: '/projectFlow/detail',
        query: {
          projectId: this.goBackParams.projectId,
          processDefId: this.goBackParams.processDefId
          processDefId: this.goBackParams.processDefId,
          processName: this.goBackParams.processName
        }
      })
    },
@@ -235,11 +277,10 @@
}
.form-warp {
  min-width: 700px;
  padding: 20px;
  margin-top: 5px;
  margin-bottom: 20px;
  box-shadow:
    inset 0 -3em 3em rgba(0, 0, 0, 0.1),
    0 0 0 2px rgb(239, 239, 239),
    0.3em 0.3em 1em rgba(0, 0, 0, 0.3);
  box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
}
</style>