该代码不能执行,需要先配置好工作流和工作流节点的列表json文件。 仅用于本人记录思路过程 <html> <head> <title>vue+jsPlumb+axios+vuex</title> <meta charset="utf-8" /> </head> <body> <div id="app"> <!--工作流列表,点击切换--> <div v-for="(item, index) in workFLowList" @click="changeFlow(item.id)"> <span v-text="item.name"></span> </div> <!--工作流节点列表--> <div id="main"> <div v-for="(item, index) in workNodeList" :id="item.id"> <span v-text="item.name"></span> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/vuex@2.0.0"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script src="https://jsplumbtoolkit.com/lib/jsplumb.min.js"></script> <script> //vuex缓存 const store = new Vuex.Store({ state: { workFlowList: [], //工作流数据 workNodeList: {} //工作节点数据 }, actions: { setWorkFlowList({commit}){ axios.get('./workFlow.json') //2:请求工作流远程数据 .then((res) => { commit('setWorkFlowList', res.data.workFlow); }) }, setWorkNodeList({commit},id) { //6:请求工作流节点远程数据 axios.get('./workNode_'+id+'.json') .then((res) => { commit('setWorkNodeList', res.data); }) } } mutations: { setWorkFlowList(state, data){ //3:写入工作流 state.workFlowList = data; }, setWorkNodeList(state, data) { //7:写入工作流节点 state.workNodeList = data; } }, }) var app = new Vue({ el: '#app', data: { jsp: null //用来临时存储设置好的jsPlumb对象 }, created() { store.dispatch('setWorkFlowList'); //1:初始化,开始请求工作流 }, mounted() {}, computed: { workFLowList(){ //4:获取vuex工作流数据 return store.state.workFlowList; }, workNodeList() { //8:获取vuex工作流节点数据 return store.state.workNodeList; } }, watch: { workFLowList: { //5:监听工作流数据变化,一旦有工作流数据,执行请求第一个工作流的对应节点 handler(n, o) { if(n.length>0){ store.dispatch('setWorkNodeList',n[0].id); } }, deep: true }, workNodeList: { //9:监听工作节点数据变化,一旦有节点数据,执行jsPlumb初始化 handler(n, o) { this.$nextTick(() => { if(n.nodes){ this.jspReady(); } }) }, deep: true } }, methods: { jspReady() { jsPlumb.ready(() => { this.jspBegin(); //10:执行初始化配置 jsPlumb.fire("jsPlumbDemoLoaded", this.jsp); }) }, jspBegin(){ //11:相应配置参照 jsPlumb 文档 let instance = jsPlumb.getInstance({ Container: "main" }) this.jsp = instance; //方便全局调用 this.workNodeList.nodes.forEach(item => { this.initNode(item.id); //12:将所有节点的id进行jsp注册 }); }, initNode(el) { this.jsp.draggable(el, { //注册节点拖动 }); this.jsp.makeSource(el, { //注册节点连接源头 }); this.jsp.makeTarget(el, { //注册节点连接目标 }); this.jsp.fire("jsPlumbDemoNodeAdded", el); }, changeFlow(id){ //当工作流点击切换的时候首先执行一遍数据清空 store.commit({ type: 'setWorkNodeList', data: {} }); this.$nextTick(() => { //然后清空jsPlumb this.jsp.empty("main"); store.dispatch('setWorkNodeList',id); //重新请求新的节点数据 }) } } }) </script> </body> </html>
评论 (2 )
最新评论
不能执行,没有相同结构的json文件
第33行,39行……
不能执行吗