luohairen
2024-12-10 bd63da40b4f5a5130bbb73fc654e7aaa25cacce6
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,12 +88,14 @@
    return {
      // 模型xml数据
      flowData: {},
      formDataList: [],  // 表单列表
      activeName: '1',
      // 查询参数
      queryParams: {},
      // 遮罩层
      loading: true,
      flowRecordList: [], // 流程流转数据
      goBackParams: {},
      taskForm:{
        multiple: false,
        comment:"", // 意见内容
@@ -104,6 +111,7 @@
    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.processVariables( this.taskForm.taskId)
    this.getFlowRecordList(this.taskForm.procInsId, this.taskForm.deployId);
@@ -144,28 +152,47 @@
    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.$tab.closePage()
      this.$router.push({
        path: '/projectFlow/detail',
        query: this.goBackParams
      })
    },
  }
};
@@ -198,4 +225,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>