| | |
| | | <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> |
| | | |
| | | </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 { |
| | |
| | | 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} |
| | | 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("未查询到审批流数据!") |
| | | } |
| | | }).catch(err => { |
| | | this.$message.error(err) |
| | | }) |
| | | |
| | | |
| | | }, |
| | | getFlowDetail(param){ |
| | | 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": "消息通知标题" |
| | | } |
| | | } |
| | | form.formItems = [] |
| | | |
| | | form.process =this.convertToTreeData(form.steps, { |
| | | form.process =this.$Utils.convertToTreeData(form.steps, { |
| | | "id": form.id, "parentId": null, |
| | | "type": "ROOT", |
| | | "name": "发起人", |
| | |
| | | "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; |
| | | // }); |
| | | }, |
| | | } |
| | | }, |
| | | beforeMount() { |
| | | this.processInstanceId = this.$route.query.processInstanceId; |
| | | this.taskId = this.$route.query.taskId; |
| | | }, |
| | | mounted() { |
| | | this.getProcessInfo(); |
| | |
| | | .process-view { |
| | | padding: 20px; |
| | | height: 100%; |
| | | display: flex; |
| | | flex-direction: column; |
| | | //display: flex; |
| | | //flex-direction: column; |
| | | box-sizing: border-box; |
| | | |
| | | &__header { |