<template>
|
<div class="process-view">
|
|
<div class="process-view__tabs" v-loading="loading">
|
|
<process-diagram-viewer />
|
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {getFlowDetail, getWorkSetpsByBusinessId} from "@/api/design";
|
import ProcessDiagramViewer from "@/views/admin/layout/ProcessDiagramViewer";
|
|
export default {
|
components: { ProcessDiagramViewer },
|
data() {
|
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}
|
//let param = {"id": "74d84fb9188f4ce4b93e95f301ebbc1b"}
|
//根据业务id获取当前审批流步骤
|
getWorkSetpsByBusinessId(param).then(rsp => {
|
let workSetps=rsp.data.data
|
console.log("workSetps", workSetps)
|
if(workSetps.length>0){
|
let index=-1;
|
let resultProcess;
|
debugger
|
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 => {
|
console.log("indexno",item.index_no)
|
if (item.index_no > index && item.end_time!==null) {
|
index = item.index_no;
|
resultProcess = item;
|
}
|
})
|
}
|
|
console.log("resultProcess", resultProcess)
|
this.$store.state.runningList .push(resultProcess.approve_step_id)
|
param.id=resultProcess.approve_id
|
this.getFlowDetail(param)
|
}else{
|
this.$message.error("未查询到审批流数据!")
|
}
|
|
console.log("workSetps", workSetps)
|
}).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, {
|
"id": form.id, "parentId": null,
|
"type": "ROOT",
|
"name": "发起人",
|
"desc": "任何人", "props": {
|
"assignedUser": [],
|
"formPerms": []
|
},
|
},1,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.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;
|
});
|
}
|
},
|
beforeMount() {
|
this.processInstanceId = this.$route.query.processInstanceId;
|
this.taskId = this.$route.query.taskId;
|
},
|
mounted() {
|
this.getProcessInfo();
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.process-view {
|
padding: 20px;
|
height: 100%;
|
//display: flex;
|
//flex-direction: column;
|
box-sizing: border-box;
|
|
&__header {
|
margin-bottom: 10px;
|
}
|
|
&__tabs {
|
flex: 1;
|
/deep/ .el-tabs__content {
|
height: calc(100vh - 150px);
|
overflow-y: auto;
|
}
|
}
|
}
|
</style>
|
