xiangpei
2024-12-06 b0d5edcb0445d654154ba3baf8110886b8543d61
src/views/flowable/task/myProcess/detail/index.vue
@@ -2,14 +2,18 @@
  <div class="app-container">
    <el-card class="box-card" >
      <div slot="header" class="clearfix">
        <span class="el-icon-document">已发任务</span>
        <span class="el-icon-document">已完成任务</span>
        <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"/>
          <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"/>
            </div>
         </el-col>
        </el-tab-pane>
        <!--流程流转记录-->
@@ -70,6 +74,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";
@@ -83,6 +88,7 @@
    return {
      // 模型xml数据
      flowData: {},
      formDataList: [],  // 表单列表
      activeName: '1',
      // 查询参数
      queryParams: {},
@@ -144,19 +150,38 @@
    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();
          //     })
          //   })
          // })
        });
      }
    },
@@ -198,4 +223,13 @@
.my-label {
  background: #E1F3D8;
}
.form-warp {
  padding: 20px;
  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);
}
</style>