文章 - vue+jsPlumb+vuex+axios 实现工作流基础模板

该代码不能执行，需要先配置好工作流和工作流节点的列表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>

vue+jsPlumb+vuex+axios 实现工作流基础模板

评论 ( 2 )

最新评论

vue+jsPlumb+vuex+axios 实现工作流基础模板

评论 ( 2 )

最新评论

欢迎您回来

创建账号

找回密码