<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 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}
|
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)
|
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();
|
},
|
};
|
</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>
|
