zhangyanpeng
2024-03-04 6a72e9e44dc7278e18d55ccd5637b81a1cb2f047
src/views/workspace/process/ProcessInstanceTabs.vue
@@ -1,18 +1,14 @@
<template>
  <div class="process-view">
    <div class="process-view__tabs" v-loading="loading">
      <el-tabs type="border-card">
        <el-tab-pane label="流程图">
          <process-diagram-viewer />
        </el-tab-pane>
      </el-tabs>
    <process-diagram-viewer />
    </div>
  </div>
</template>
<script>
import { getProcessInstanceInfo,getFlowDetail } from "@/api/design";
import {getFlowDetail, getWorkSetpsByBusinessId} from "@/api/design";
import ProcessDiagramViewer from "@/views/admin/layout/ProcessDiagramViewer";
export default {
@@ -21,69 +17,50 @@
    return {
      loading: false,
      processInstanceId: "",
      taskId: "",
      formData: {},
      currentNode: {},
      processInfo: "",
    };
  },
  methods: {
    convertToTreeData(data, parent,index,parentId) {
      const tempJson = data.find(f =>
          f.index_no === index
      )
      console.log("tempJson",tempJson);
      this.$store.state.noTakeList .push(tempJson.id)
      parent.children = {
        "id": tempJson.id,
        "parentId": parentId,
        "name": "审批人",
        "type": "APPROVAL",
        "props":
            {
              "assignedType": "ASSIGN_USER",
              "nobody": {
                "handler": "TO_PASS",
                "assignedUser": []
              },
              "refuse": {
                "type": "TO_END",
                "target": ""
              },
              "assignedUser": [{"id": tempJson.board_id||tempJson.rule_code, "name": tempJson.name,"type":tempJson.board_id!=null?"group":"staff"}],
              "approvalGroup":tempJson.board_id!=null?{"id":tempJson.board_id,"name":tempJson.name}:"",
              "staffGroup":tempJson.board_id!=null?"":{"id":tempJson.rule_code,"name":tempJson.name},
            }
      }
      if (data.length >index) {
        let getChildren = this.convertToTreeData(data, parent.children, index+1,parent.children.id)
        parent.children=getChildren
      }
      return parent;
    },
    getProcessInfo() {
      this.loading = true;
      let param = {"id": this.processInstanceId}
      getFlowDetail(param).then(rsp => {
        let form = rsp.data.data;
        console.log("getFlowDetail-form", form)
        form.logo = ""
        form.settings = {
          "commiter": [],
          "admin": [],
          "sign": false,
          "notify": {
            "types": [
              "APP"
            ],
            " title": "消息通知标题"
      getWorkSetpsByBusinessId(param).then(rsp => {
        let workSetps=rsp.data.data
        if(workSetps.length>0){
          let index=-1;
          let resultProcess;
          let noApprovalArr=workSetps.filter(item=>item.end_time===null);
          ////如果所有节点都没审批 那么就取index_no=1的id为当前运行的节点
          if(noApprovalArr.length===workSetps.length){
            resultProcess=workSetps.find(item=>item.index_no===1)
          }else{
            //否则就取遍历查询 审批节点不为空 index_no最大的
            workSetps.forEach(item => {
              if (item.index_no > index && item.end_time!==null) {
                index = item.index_no;
                resultProcess = item;
              }
            })
          }
          this.$store.state.runningList .push(resultProcess.approve_step_id)
          param.id=resultProcess.approve_id
          this.getFlowDetail(param)
        }else{
          this.$message.error("未查询到审批流数据!")
        }
        form.formItems = []
      }).catch(err => {
        this.$message.error(err)
      })
        form.process =this.convertToTreeData(form.steps, {
    },
    getFlowDetail(param){
      getFlowDetail(param).then(rsp => {
        let form = rsp.data.data;
        form.process =this.$Utils.convertToTreeData(form.steps, {
          "id": form.id, "parentId": null,
          "type": "ROOT",
          "name": "发起人",
@@ -92,57 +69,20 @@
            "formPerms": []
          },
        },1,form.id)
        this.$store.state.runningList .push(form.id)
        form.name=this.$Utils.decode(form.name);
        form.templateName = form.name
        form.groupId = null;
        form.icon = "{\"icon\":\"el-icon-eleme\",\"background\":\"#1e90ff\"}";
        form.notify = "";
        form.remark = "备注说明";
        form.isStop = false
        form.whoCommit = "[]"
        form.whoEdit = "[]"
        form.whoExport = "[]"
        form.templateId = "Steps-B-Director"
        form.formId = "Steps-B-Director"
        form.processDefinitionId = null
        this.$store.state.design = form;
        console.log("this.$store.state.design",this.$store.state.design)
        console.log("输出转换后的form,",form)
        this.$store.commit('loadForm', form)
      }).catch(err => {
        this.$message.error(err)
      }) .finally(() => {
            this.loading = false;
          });
      // getProcessInstanceInfo(this.processInstanceId, this.taskId)
      //   .then((rsp) => {
      //     console.log("流程详情", rsp.data);
      //     const form = { ...rsp.data.result.processTemplates };
      //     const currentNode = { ...rsp.data.result?.currentNode };
      //
      //     form.logo = JSON.parse(form.logo);
      //     form.settings = JSON.parse(form.settings);
      //     form.process = JSON.parse(form.process);
      //     this.$store.state.design = form;
      //     this.$store.state.endList = rsp.data.result.endList;
      //     this.$store.state.runningList = rsp.data.result.runningList;
      //     this.$store.state.noTakeList = rsp.data.result.noTakeList;
      //     this.$store.state.detailVOList = rsp.data.result.detailVOList;
      //
      //     this.currentNode = currentNode;
      //     this.form = form;
      //   })
      //   .finally(() => {
      //     this.loading = false;
      //   });
    },
        this.loading = false;
      });
    }
  },
  beforeMount() {
    this.processInstanceId = this.$route.query.processInstanceId;
    this.taskId = this.$route.query.taskId;
  },
  mounted() {
    this.getProcessInfo();
@@ -154,8 +94,8 @@
.process-view {
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  //display: flex;
  //flex-direction: column;
  box-sizing: border-box;
  &__header {