vue最简单的教程（Vue2.6.10实现简洁workflow）
前段时间看到GoJs 产品绘制workflow有自动化布局、展示风格简洁优点，缺点是收费产品。参考json格式数据结构，nodeDataArray与linkDataArray两个数据完成了流程数据存储，结合vue-workflow-chart与通用json-rest-api存储实现完整工作流核心功能
workflow数据存储由节点数组、关系数组和样式数组构成，基础数据格式为：
{
"states": [{
"id": "start",
"label": "开始"
}, {
"id": "end",
"label": "结束"
}],
"transitions": [{
"id": "Dz2un1r",
"label": "ask for auditing",
"target": "start",
"source": "end"
}]
}
逻辑控制为节点添加上级、下级和同级，删除节点删除相应的关系数组值
路由名称打开页面在流程列表页面打开Dashboard页面，并传递 id 值
<el-table-column fixed="right" label="操作" width="100">
<template slot-scope="scope">
<router-link tag="a" target="_blank" :to="{name:'Dashboard',query:{id: scope.row.k}}">打开</router-link>
</template>
</el-table-column>
流程设计页面获取route中的query参数
created() {
this.id = this.$route.query.id
if (this.id) {
api.getFlow(this.id).then(({data}) => {
this.states = data.items.v.states;
this.transitions = data.items.v.transitions
this.name = data.items.v.name
});
}else{
this.states=[{id: "start", label: "开始"}, {id: "end", label: "结束"}]
this.transitions = [{"id": "Dz2un1r","source": "start","target": "end"}]
}
},
getId(){
return Math.random().toString(32).substr(2)
}
getId(){
return Math.random().toString(32).substr(2)
},
getTime(){
var date = new Date();
return date.getFullYear() '-' (date.getMonth() 1 < 10 ? '0' (date.getMonth() 1) : date.getMonth() 1) '-'
(date.getDate()<10?'0' date.getDate():date.getDate()) ' ' date.getHours() ':' date.getMinutes() ':' date.getSeconds()
},
用户组件
<el-table :data="tableData" stripe style="width: 100%">
<el-table-column prop="name" label="名称" width="180" sortable></el-table-column>
<el-table-column prop="des" label="描述" width="180" sortable></el-table-column>
<el-table-column fixed="right" label="操作" width="100">
<template slot-scope="scope">
<el-button @click="handleUser(scope.row)" type="text" size="small">选择</el-button>
</template>
</el-table-column>
</el-table>
methods: {
handleUser(user) {
this.$emit('handleUser',user) // 向父组件传值
}
}
节点设置界面中使用了选择用户组件；界面中引用user组件
<el-divider></el-divider>
<user @handleUser="setUser"></user>
接受用户组件中定义的handleUser传递的user json对象
import user from "../../components/user.vue"
export default {
name: "App",
components: {
WorkflowChart,
user,
},
methods: {
setUser(user){
this.state.label = user.name
this.updateState()
},
}
}
<div v-if="state.id === 'start'">
<el-button type="primary" size="mini" @click="addState('child')">添加下级</el-button>
</div>
<div v-else-if="state.id === 'end'">
<el-button type="primary" size="mini" @click="addState('parent')">添加上级</el-button>
</div>
<div v-else>
</div>
免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。文章投诉邮箱：anhduc.ph@yahoo.com
