Merge remote-tracking branch 'origin/master'

fuliqi

2025-01-03 1bfba74b6bea7da6d14b0da1ab8b1efe02e474b3

 src/views/flowable/task/myProcess/detail/index.vue

@@ -1,15 +1,47 @@
<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-form-render ref="vFormRef"/>
            <div 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>
                <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="info"
                    :closable="false"
                  >
                  </el-alert>
                </div>
              </div>
            </div>
            <div v-else>
              <el-alert
                title="当前节点无表单数据"
                type="info"
                :closable="false"
              >
              </el-alert>
              <el-alert
                style="margin-top: 20px"
                title="前置节点无表单数据"
                type="info"
                :closable="false"
              >
              </el-alert>
            </div>
         </el-col>
        </el-tab-pane>
        <!--流程流转记录-->
@@ -23,7 +55,11 @@
                  :icon="setIcon(item.finishTime)"
                  :color="setColor(item.finishTime)"
                >
                  <p style="font-weight: 700">{{item.taskName}}</p>
                  <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 && 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>
                      <el-descriptions-item v-if="item.assigneeName" label-class-name="my-label">
@@ -70,6 +106,7 @@
<script>
import {flowRecord} from "@/api/flowable/finished";
import {getProcessVariables, flowXmlAndNode} from "@/api/flowable/definition";
import {flowTaskForm, flowTaskFormDetail} from "@/api/flowable/todo";
import BpmnViewer from '@/components/Process/viewer';
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

@@ -81,14 +118,18 @@
  props: {},
  data() {
    return {
      projectName: '',
      flowName: '',
      // 模型xml数据
      flowData: {},
      formDataList: [],  // 表单列表
      activeName: '1',
      // 查询参数
      queryParams: {},
      // 遮罩层
      loading: true,
      flowRecordList: [], // 流程流转数据
      goBackParams: {},
      taskForm:{
        multiple: false,
        comment:"", // 意见内容
@@ -104,6 +145,9 @@
    this.taskForm.deployId = this.$route.query && this.$route.query.deployId;
    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);
@@ -144,27 +188,53 @@
    processVariables(taskId) {
      if (taskId) {
        // 提交流程申请时填写的表单存入了流程变量中后续任务处理时需要展示
        getProcessVariables(taskId).then(res => {
          this.$nextTick(() => {
            // 回显表单
            this.$refs.vFormRef.setFormJson(res.data.formJson);
        flowTaskFormDetail(taskId).then(res => {
          this.formDataList = res.data
          if (this.formDataList && this.formDataList.length > 0) {
            this.$nextTick(() => {
              // 加载表单填写的数据
              this.$refs.vFormRef.setFormData(res.data);
              this.$nextTick(() => {
                // 表单禁用
                this.$refs.vFormRef.disableForm();
              this.formDataList.forEach((formDataObj, index) => {
                console.log("表单数据列表", formDataObj.formJson)
                let that = this
                console.log(eval("that.$refs.form" + index)[0])
                if (formDataObj.formJsonObj) {
                  eval("that.$refs.form" + index)[0].setFormJson(formDataObj.formJsonObj.formJson);

                  eval("that.$refs.form" + index)[0].setFormData(formDataObj.formJsonObj);
                  this.$nextTick(() => {
                    eval("that.$refs.form" + index)[0].disableForm();
                  })
                }
              })
              // this.formJson = this.formDataList[0].formJsonObj.formJson
            })
          })
          }
          // this.$nextTick(() => {
          //   // 回显表单
          //   this.$refs.vFormRef.setFormJson(res.data.formJson);
          //   this.$nextTick(() => {
          //     // 加载表单填写的数据
          //     this.$refs.vFormRef.setFormData(res.data);
          //     this.$nextTick(() => {
          //       // 表单禁用
          //       this.$refs.vFormRef.disableForm();
          //     })
          //   })
          // })
        });
      }
    },
    /** 返回页面 */
    goBack() {
      // 关闭当前标签页并返回上个页面
      const obj = { path: "/task/process", query: { t: Date.now()} };
      this.$tab.closeOpenPage(obj);
      // 关闭当前标签页
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.push({
        path: '/projectFlow/detail',
        query: {
          projectId: this.goBackParams.projectId,
          processDefId: this.goBackParams.processDefId,
          processName: this.goBackParams.processName
        }
      })
    },
  }
};
@@ -197,4 +267,12 @@
.my-label {
  background: #E1F3D8;
}

.form-warp {
  min-width: 700px;
  padding: 20px;
  margin-top: 5px;
  margin-bottom: 20px;
  box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
}
</style>