将后台返回的xml转成流程图显示

您所在的位置：网站首页 › 流程图转化为程序图 › 将后台返回的xml转成流程图显示

将后台返回的xml转成流程图显示

2024-07-16 07:02| 来源: 网络整理| 查看: 265

1-安装依赖 https://www.npmjs.com/package/@dreamof2080/flow-view/v/1.1.7

npm install --save-dev @dreamof2080/flow-view

2-在项目中引入import {initFlowGraph, renderFlowGraph} from ‘@dreamof2080/flow-view’

// 子组件 flowchart.vue // 流程图未查看: {{ unViewText }} 未提交: {{ unSubmitText }} 已提交: {{ submitText }} // 全屏框

2-1-script 一共三个方法，两个接口

import { flowchart, getNode } from '@/request/travelexpense' // 引入接口 import { initFlowGraph, renderFlowGraph } from "@dreamof2080/flow-view"; // 转流程图必须引的 export default { data () { return { graph: undefined, unViewText:'',//未查看 unSubmitText:'', //未提交 submitText:'', //已提交 }; }, props: { // 父组件传过来的dataId，用来做调接口的传参 dataId: { type: String, default: '' } }, components: {}, computed: {}, mounted() { this.getFlowchart() }, methods: { // 获取流程图 getFlowchart() { this.$nextTick(() => { flowchart(this.dataId).then(res => { if(res.errorCode === 200) { if (this.graph === undefined) { // 初始化流程图 const container = this.$refs.container; const nodeInfo = this.$refs.nodeInfo; const thumbnail = this.$refs.thumbnail; this.graph = initFlowGraph({ container, shadowColor: "#050505", flowedEdgeColor: "#525050", onClick: (id, left, top) => { // id是当前点击的节点的节点id this.getOperator(id); // 用来显示or隐藏节点信息那个框框的，并且控制他的展示位置 nodeInfo.style.display = id ? "block" : "none"; nodeInfo.style.left = left + 0 + "px"; nodeInfo.style.top = top + 60 + "px"; }, thumbnail, }); } this.version = res.data.versionNo; // 渲染流程图 renderFlowGraph({ graph: this.graph, data: res.data.graphXml, // 流程图数据，后台返回xml currentIds: res.data.currentIds, // currentIds和flowedEdgeIds这两是啥我忘了，反正都是后台反的，都是数组类型 flowedEdgeIds: res.data.flowedEdgeIds, }); } }) }) }, //获取节点操作者 getOperator(nodeId,left,top) { if(this.isEmpty(nodeId)){ return } var params = { nodeId: nodeId, dataId:this.dataId }; // 获取节点操作信息的接口 getNode(params).then(res=>{ if(res.success){ let unView = "" let unSubmit = "" let submit = "" res.data.unView.forEach((item) => { unView += item.name + ","; }); res.data.unSubmit.forEach((item) => { unSubmit += item.name + ","; }); res.data.submit.forEach((item) => { submit += item.name + ","; }); this.unViewText = unView.length > 0 ? unView.substring(0, unView.length - 1) : unView; this.unSubmitText = unSubmit.length > 0 ? unSubmit.substring(0, unSubmit.length - 1) : unSubmit; this.submitText = submit.length > 0 ? submit.substring(0, submit.length - 1) : submit; } }) }, //判空 isEmpty(obj) { return obj === undefined || obj === null || obj === ""; }, } }

2-2-流程图样式

#flowchart { position: relative; height: 100%; } .container { width: 100%; height: 100%; background-color: #88888a; opacity: 0.8; overflow: hidden; } .node-info { position: absolute; min-width: 300px; // min-height: 200px; background-color: rgba(0, 0, 0, .2); opacity: 0.8; top: 0; left: 0; display: none; border-radius: 5px; font-size: 12px; padding: 10px; box-sizing: border-box; } // 全屏 .thumbnail { position: absolute; overflow: hidden; right: 0; top: 0; width: 100px; height: 100px; background: #e8e9ec; opacity: 0.8; }

【本文地址】

将后台返回的xml转成流程图显示

将后台返回的xml转成流程图显示

今日新闻

推荐新闻