Merge branch 'master' of http://42.193.1.25:9521/r/project_management-vue

zhanghua

2025-01-16 53605d638044f3129cb622d44bd6c2026b7978cd

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

@@ -10,39 +10,40 @@
        <!--表单信息-->
        <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>
                  <div class="op-list">
                    <el-button size="small" type="primary" :disabled="submitLoading" v-loading="submitLoading" @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 class="reject-but">
                    <el-button type="danger" size="small" @click="openRejectTask(formDataObj.beforeNodeName)">驳 回</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"
                  >
@@ -54,7 +55,9 @@
        </el-tab-pane>
        <!--流程图-->
        <el-tab-pane label="流程图" name="2">
          <bpmn-viewer :flowData="flowData"/>
          <div v-loading="imgLoading" class="tab-min-height">
            <bpmn-viewer :flowData="flowData" :procInsId="procInsId"/>
          </div>
        </el-tab-pane>
      </el-tabs>
      <!--选择流程接收人-->
@@ -70,7 +73,7 @@


    <el-dialog
      :title="`驳回：` + rejectForm.projectName"
      :title="`驳回：` + rejectForm.taskName"
      :visible.sync="rejectShow"
      width="950px"
      :destroy-on-close="true"
@@ -85,7 +88,7 @@
        </el-input>
      </div>
      <div class="opBut">
        <el-button type="danger" size="small" @click="rejectTask">驳回</el-button>
        <el-button type="danger" size="small" :disabled="rejectLoading" v-loading="rejectLoading" @click="rejectTask">驳回</el-button>
      </div>
    </el-dialog>

@@ -152,7 +155,7 @@
        </el-form>
      </div>
      <div class="opBut">
        <el-button type="danger" size="small" @click="delegation">转 办</el-button>
        <el-button type="danger" size="small" :disabled="delegationButLoading" v-loading="delegationButLoading" @click="delegation">转 办</el-button>
      </div>
    </el-dialog>

@@ -184,6 +187,11 @@
  props: {},
  data() {
    return {
      rejectLoading: false, // 驳回按钮加载
      submitLoading: false, // 提交按钮加载
      delegationButLoading: false, // 转办按钮加载
      formLoading: false,  // 加载当前喝前置节点数据
      imgLoading: false,  // 加载流程图
      roleKey: 'role',
      deptKey: 'dept',
      multUserKey: 0,
@@ -228,6 +236,7 @@
      loading: true,
      deployId: "",  // 流程定义编号
      procDefId: "",  // 流程实例编号
      procInsId: "",  // 流程实例编号
      formRenderData: {},
      formRenderDataList: [],
      variables: [], // 流程变量数据
@@ -243,7 +252,7 @@
      rejectForm: {
        comment: '', // 审核意见
        taskId: '',
        // rejectedTaskDefKey: ''  // 被驳回的任务key
        taskName: ''  // 被驳回的任务k
      }
    };
  },
@@ -255,6 +264,7 @@
    this.flowName = this.$route.query && this.$route.query.flowName;
    // 初始化表单
    this.procDefId  = this.$route.query && this.$route.query.procDefId;
    this.procInsId  = this.$route.query && this.$route.query.procInsId;
    this.goBackParams  = this.$route.query && this.$route.query.goBackParams;
    // this.getNextFlowNodeByStart(this.deployId);
    this.getFlowFormData(this.taskId);
@@ -303,8 +313,11 @@
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.delegationButLoading = true
            taskDelegation(this.delegationForm).then(res => {
              this.$message.success("已发起转办申请")
              this.delegationButLoading = false
              this.delegationShow = false
              this.goBack()
            })
          }).catch(() => {
@@ -432,19 +445,36 @@
      this.delegationShow = true
    },
    rejectTask() {
      rejectTask(this.rejectForm).then(res => {
        this.rejectShow = false
        this.$message.success("驳回成功")
      })
      this.$confirm(`确定要驳回任务【${this.rejectForm.taskName}】吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.rejectLoading = true
        rejectTask(this.rejectForm).then(res => {
          this.rejectShow = false
          this.$message.success("驳回成功")
          this.goBack()
        })
      }).catch((err) => {
        console.log(err)
        this.$message({
          type: 'info',
          message: '已取驳回交操作'
        });
      });

    },
    openRejectTask(rejectedTaskDefKey) {
      // this.rejectForm.rejectedTaskDefKey = rejectedTaskDefKey;
    openRejectTask(taskName) {
      this.rejectForm.taskName = taskName;
      this.rejectForm.taskId = this.taskId;
      this.rejectShow = true
    },
    handleClick(tab, event) {
      if (tab.name === '2'){
        flowXmlAndNode({deployId:this.deployId}).then(res => {
        this.imgLoading = true
        flowXmlAndNode({procInsId:this.procInsId,deployId:this.deployId}).then(res => {
          this.imgLoading = false
          this.flowData = res.data;
        })
      }
@@ -452,13 +482,13 @@
    /** 流程表单数据 */
    getFlowFormData(taskId) {
      const params = {taskId: taskId}
      this.formLoading = true
      flowTaskForm(params).then(res => {
        this.formDataList = res.data
        if (this.formDataList && this.formDataList.length > 0) {
          this.$nextTick(() => {
            this.formDataList.forEach((formDataObj, index) => {
              let that = this
              console.log(eval("that.$refs.form" +index))
              if (eval("that.$refs.form" +index) && formDataObj.formJsonObj) {
                eval("that.$refs.form" +index)[0].setFormJson(formDataObj.formJsonObj.formJson);
                eval("that.$refs.form" +index)[0].setFormData(formDataObj.formJsonObj);
@@ -468,8 +498,8 @@
              this.formJson = this.formDataList[0].formJsonObj.formJson
            }
          })

        }
        this.formLoading = false
        // if (res.data.formJson) {
        //   // 回显表单
        //   this.$refs.vFormRef.setFormJson(res.data.formJson);
@@ -509,54 +539,86 @@
    },
    /** 申请流程表单数据提交 */
    submitForm() {
      let that = this
      eval("that.$refs.form" +0)[0].getFormData().then(formData => {
        // 根据当前任务或者流程设计配置的下一步节点 todo 暂时未涉及到考虑网关、表达式和多节点情况
        getNextFlowNodeByStart({deploymentId: this.deployId, variables: formData}).then(res => {
          const data = res.data;
          if (data) {
            this.formData = formData;
            if (data.dataType === 'dynamic') {
              if (data.type === 'assignee') { // 指定人员
                this.checkSendUser = true;
                this.checkType = "single";
              } else if (data.type === 'candidateUsers') {  // 候选人员(多个)
                this.checkSendUser = true;
                this.checkType = "multiple";
              } else if (data.type === 'candidateGroups') { // 指定组(所属角色接收任务)
                this.checkSendRole = true;
              } else { // 会签
                // 流程设计指定的 elementVariable 作为会签人员列表
                this.multiInstanceVars = data.vars;
                this.checkSendUser = true;
                this.checkType = "multiple";
              }
              this.taskOpen = true;
              this.taskTitle = "选择任务接收";
            } else {
              if (this.procDefId) {
                const param = {
                  formJson:  this.formJson,
                }
                // 复制对象的属性值给新的对象
                Object.assign(param, formData);
                // 完成任务
                completeSubmitFormTask(this.taskId, param).then(res => {
                  this.$modal.msgSuccess(res.msg);
                  this.goBack();
                })
                // // 启动流程并将表单数据加入流程变量
                // definitionStart(this.procDefId, param).then(res => {
                //   this.$modal.msgSuccess(res.msg);
                //   this.goBack();
                // })
              }
      this.$confirm(`确定要提交任务【${this.processName}】吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.submitLoading = true
        let that = this
        if (eval("that.$refs.form" +0)) {
          eval("that.$refs.form" +0)[0].getFormData().then(formData => {
            this.formData = formData
            const param = {
              formJson:  this.formJson,
            }
          }
        })
      }).catch(error => {
        // this.$modal.msgError(error)
      })
            // 复制对象的属性值给新的对象
            Object.assign(param, formData);
            // 完成任务
            completeSubmitFormTask(this.taskId, param).then(res => {
              this.$modal.msgSuccess(res.msg);
              this.submitLoading = false
              this.goBack();
            })
          })
        } else {
          // 没关联表单直接传空
          completeSubmitFormTask(this.taskId, {}).then(res => {
            this.$modal.msgSuccess(res.msg);
            this.submitLoading = false
            this.goBack();
          })
        }

        // let that = this
        // eval("that.$refs.form" +0)[0].getFormData().then(formData => {
        //   // 根据当前任务或者流程设计配置的下一步节点 todo 暂时未涉及到考虑网关、表达式和多节点情况
        //   getNextFlowNodeByStart({deploymentId: this.deployId, variables: formData}).then(res => {
        //     const data = res.data;
        //     if (data) {
        //       this.formData = formData;
        //       if (data.dataType === 'dynamic') {
        //         if (data.type === 'assignee') { // 指定人员
        //           this.checkSendUser = true;
        //           this.checkType = "single";
        //         } else if (data.type === 'candidateUsers') {  // 候选人员(多个)
        //           this.checkSendUser = true;
        //           this.checkType = "multiple";
        //         } else if (data.type === 'candidateGroups') { // 指定组(所属角色接收任务)
        //           this.checkSendRole = true;
        //         } else { // 会签
        //           // 流程设计指定的 elementVariable 作为会签人员列表
        //           this.multiInstanceVars = data.vars;
        //           this.checkSendUser = true;
        //           this.checkType = "multiple";
        //         }
        //         this.taskOpen = true;
        //         this.taskTitle = "选择任务接收";
        //       } else {
        //         if (this.procDefId) {
        //           const param = {
        //             formJson:  this.formJson,
        //           }
        //           // 复制对象的属性值给新的对象
        //           Object.assign(param, formData);
        //           // 完成任务
        //           completeSubmitFormTask(this.taskId, param).then(res => {
        //             this.$modal.msgSuccess(res.msg);
        //             this.goBack();
        //           })
        //         }
        //       }
        //     }
        //   })
        // })
      }).catch((err) => {
        console.log(err)
        this.$message({
          type: 'info',
          message: '已取消提交操作'
        });
      });

    },
    /** 重置表单 */
    resetForm() {
@@ -633,7 +695,6 @@
  width: 800px;
  padding: 15px;
}

.clearfix:before,
.clearfix:after {
  display: table;
@@ -642,20 +703,16 @@
.clearfix:after {
  clear: both
}

.box-card {
  width: 100%;
  margin-bottom: 20px;
}

.el-tag + .el-tag {
  margin-left: 10px;
}

.my-label {
  background: #E1F3D8;
}

.form-warp {
  min-width: 700px;
  padding: 20px;
@@ -663,4 +720,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>