任务查看:任务名称undefined解决

xiangpei

2025-05-06 5c929cfb5286a31a4e067cbc61e8774f4e7d42ae

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

@@ -2,43 +2,50 @@
  <div class="app-container">
    <el-card class="box-card" >
      <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>
        <div style="flex: 1" class="el-icon-document">{{`任务详情：` + this.taskName}}</div>
        <div style="flex: 2; color: #303133">{{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-loading="formLoading" class="tab-min-height">
          <el-col :span="24" v-loading="formLoading" class="tab-min-height">
            <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 class="current">当前阶段：<span>{{formDataObj.beforeNodeName}}</span></div>
                </div>
                <div v-else-if="formDataList.length > 1">
                  <div class="before">前置阶段：<span>{{formDataObj.beforeNodeName}}</span></div>
                </div>
                <div v-if="formDataObj != null && formDataObj.formJsonObj != null">
                  <v-form-render  :form-data="formDataObj.formJsonObj.formJson" :ref="'form' + index"/>
                </div>
                <div v-else>
                  <el-alert
                    title="未绑定表单"
                    type="warning"
                    :closable="false"
                  >
                  </el-alert>
                </div>
                <div v-if="formDataList.length <= 1">
                  <div class="before_none">前置阶段：<span>不存在前置阶段</span></div>
                  <el-alert
                    title="不存在前置阶段"
                    type="warning"
                    :closable="false"
                  >
                  </el-alert>
                </div>
                <el-row>
                  <el-col :span="18">
                    <div v-if="formDataObj.current">
                      <div class="current">当前阶段：<span>{{formDataObj.beforeNodeName}}</span></div>
                    </div>
                    <div v-else-if="formDataList.length > 1">
                      <div class="before">前置阶段：<span>{{formDataObj.beforeNodeName}}</span></div>
                    </div>
                    <div v-if="formDataObj != null && formDataObj.formJsonObj != null">
                      <v-form-render  :form-data="formDataObj.formJsonObj.formJson" :ref="'form' + index"/>
                    </div>
                    <div v-else>
                      <el-alert
                        title="未绑定表单"
                        type="warning"
                        :closable="false"
                      >
                      </el-alert>
                    </div>
                    <div v-if="formDataList.length <= 1">
                      <div class="before_none">前置阶段：<span>不存在前置阶段</span></div>
                      <el-alert
                        title="不存在前置阶段"
                        type="warning"
                        :closable="false"
                      >
                      </el-alert>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <log-time-line v-if="formDataObj.events.length > 0" :log-list="formDataObj.events"/>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-col>
@@ -109,16 +116,19 @@
import {getProcessVariables, flowXmlAndNode} from "@/api/flowable/definition";
import {flowTaskForm, flowTaskFormDetail} from "@/api/flowable/todo";
import BpmnViewer from '@/components/Process/viewer';
import LogView from "@/views/projectProcess/components/LogView";
import LogTimeLine from "@/views/projectProcess/components/LogTimeLine";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "Record",
  components: {
    BpmnViewer
    BpmnViewer, LogView, LogTimeLine
  },
  props: {},
  data() {
    return {
      taskName: '', // 任务名称
      formLoading: false, // 加载表单
      imgLoading: false, // 加载流程图
      projectName: '',
@@ -151,15 +161,16 @@
    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.taskName = this.$route.query && this.$route.query.taskName;
    // 流程任务重获取变量表单
    this.processVariables( this.taskForm.taskId)
    this.getFlowRecordList(this.taskForm.procInsId, this.taskForm.deployId);
    this.processVariables( this.taskForm.taskId, this.taskForm.procInsId)
    this.getFlowRecordList(this.taskForm.procInsId);
  },
  methods: {
    handleClick(tab, event) {
      if (tab.name === '3'){
        this.imgLoading = true
        flowXmlAndNode({procInsId:this.taskForm.procInsId,deployId:this.taskForm.deployId}).then(res => {
        flowXmlAndNode({processInsId:this.taskForm.procInsId,deployId:this.taskForm.deployId}).then(res => {
          this.imgLoading = false
          this.flowData = res.data;
        })
@@ -180,9 +191,9 @@
      }
    },
    /** 流程流转记录 */
    getFlowRecordList(procInsId, deployId) {
    getFlowRecordList(procInsId) {
      const that = this
      const params = {procInsId: procInsId, deployId: deployId}
      const params = {procInsId: procInsId}
      flowRecord(params).then(res => {
        that.flowRecordList = res.data.flowList;
      }).catch(res => {
@@ -190,11 +201,11 @@
      })
    },
    /** 获取流程变量内容 */
    processVariables(taskId) {
    processVariables(taskId, processInsId) {
      if (taskId) {
        this.formLoading = true
        // 提交流程申请时填写的表单存入了流程变量中后续任务处理时需要展示
        flowTaskFormDetail(taskId).then(res => {
        flowTaskFormDetail(processInsId, taskId).then(res => {
          this.formDataList = res.data
          if (this.formDataList && this.formDataList.length > 0) {
            this.$nextTick(() => {
@@ -279,7 +290,9 @@
  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;
  margin-left: 3px;
  margin-right: 3px;
  box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.1em, rgba(90, 125, 188, 0.05) 0px 0.1em 0.5em;
}
.before {
  span {