zhanghua
2025-01-16 53605d638044f3129cb622d44bd6c2026b7978cd
src/views/flowable/task/myProcess/detail/index.vue
@@ -10,39 +10,30 @@
        <!--表单信息-->
        <el-tab-pane label="表单信息" name="1">
          <!--初始化流程加载表单信息-->
          <el-col :span="16" :offset="4">
          <el-col :span="16" :offset="4" 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 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 class="current">当前阶段:<span>{{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 class="before">前置阶段:<span>{{formDataObj.beforeNodeName}}</span></div>
                </div>
                <div v-if="formDataObj.formJson !== null && formDataObj.formJson !== ''">
                  <v-form-render  :form-data="formDataObj.formJson" :ref="'form' + index"/>
                <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="节点未绑定表单"
                    title="未绑定表单"
                    type="warning"
                    :closable="false"
                  >
                  </el-alert>
                </div>
                <div v-if="formDataList.length <= 1">
                  <div class="before_none">前置阶段:<span>不存在前置阶段</span></div>
                  <el-alert
                    title="不存在前置节点"
                    title="不存在前置阶段"
                    type="warning"
                    :closable="false"
                  >
@@ -104,7 +95,9 @@
        </el-tab-pane>
        <!--流程图-->
        <el-tab-pane label="流程图" name="3">
          <bpmn-viewer :flowData="flowData" :procInsId="taskForm.procInsId"/>
          <div class="tab-min-height" v-loading="imgLoading">
            <bpmn-viewer :flowData="flowData" :procInsId="taskForm.procInsId"/>
          </div>
        </el-tab-pane>
    </el-tabs>
    </el-card>
@@ -126,6 +119,8 @@
  props: {},
  data() {
    return {
      formLoading: false, // 加载表单
      imgLoading: false, // 加载流程图
      projectName: '',
      flowName: '',
      // 模型xml数据
@@ -163,7 +158,9 @@
  methods: {
    handleClick(tab, event) {
      if (tab.name === '3'){
        this.imgLoading = true
        flowXmlAndNode({procInsId:this.taskForm.procInsId,deployId:this.taskForm.deployId}).then(res => {
          this.imgLoading = false
          this.flowData = res.data;
        })
      }
@@ -195,6 +192,7 @@
    /** 获取流程变量内容 */
    processVariables(taskId) {
      if (taskId) {
        this.formLoading = true
        // 提交流程申请时填写的表单存入了流程变量中后续任务处理时需要展示
        flowTaskFormDetail(taskId).then(res => {
          this.formDataList = res.data
@@ -203,7 +201,6 @@
              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);
@@ -216,6 +213,7 @@
              // this.formJson = this.formDataList[0].formJsonObj.formJson
            })
          }
          this.formLoading = false
          // this.$nextTick(() => {
          //   // 回显表单
          //   this.$refs.vFormRef.setFormJson(res.data.formJson);
@@ -283,4 +281,42 @@
  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;
}
.before {
  span {
    color: #F56C6C
  }
  margin-bottom: 15px;
  color: #E6A23C
}
.before_none {
  span {
    color: #F56C6C
  }
  margin-bottom: 15px;
  margin-top: 15px;
  color: #E6A23C
}
.reject-but {
  position: absolute;
  top: 4px;
  right: 4px
}
.current {
  span {
    color: #409EFF
  }
  margin-bottom: 15px;
  color: #E6A23C
}
.op-list {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tab-min-height {
  min-height: 500px;
}
</style>