hogwarts-ui 官方网站Flow 流程图 v2
基础用法
点击查看示例代码
vue
<template>
<h-flow-v2 :h_data="h_data"></h-flow-v2>
</template>
<script setup>
const h_data = {
component: 'h-flow-v2',
items: [
{
name: 'case_select1',
display_name: '单选下拉框1',
component: 'h-select-v1',
options: [
{
id: 1348,
name: 'test2'
},
{
id: 442,
name: 'admin admin'
},
{
id: 441,
name: 'hogwarts_student_debug2 dev'
}
]
},
{
name: 'case_select2',
display_name: '单选下拉框1',
component: 'h-select-v1',
options: [
{
id: 1348,
name: 'test2'
},
{
id: 442,
name: 'admin admin'
},
{
id: 441,
name: 'hogwarts_student_debug2 dev'
}
]
}
],
action: [
{
"api": {
"header": {}
},
"icon": "fa fa-user",
"link": "#/issues/:id",
"display_name": "去考试"
},
],
content: {
data: [
{
name: '开始节点',
symbol: 'circle',
x: 0,
y: 0,
value: 10
},
{
name: '初始化动作',
symbol: 'image://https://ceshiren.com/uploads/default/original/3X/6/6/661c4696d1cd63c2108b98ce5f3614f83efc57c5.png',
x: 1,
y: 0,
value: 20
},
{
name: '填写用车申请表',
symbol: 'image://https://ceshiren.com/uploads/default/original/3X/c/9/c9dfc26e0e24a698e932cc48258c82a457b46a59.jpeg',
x: 2,
y: 0,
value: 20
},
{
name: '部门审批',
symbol: 'rect',
x: 3,
y: 0,
value: 20,
itemStyle: {
color: 'blue',
}
},
{
name: '车库取车',
symbol: 'triangle',
x: 3,
y: 1,
value: 20,
itemStyle: {
color: 'green',
}
},
{
name: '行政审批',
symbol: 'diamond',
x: 2,
y: 1,
value: 20,
itemStyle: {
color: 'purple',
}
},
{
name: '复审',
symbol: 'roundRect',
x: 1,
y: 1,
value: 20,
itemStyle: {
color: 'yellow',
}
},
{
name: '复审2',
symbol: 'pin',
x: 0,
y: 1,
value: 20,
itemStyle: {
color: 'orange',
}
},
{
name: '结束节点',
x: 4,
y: 1,
symbol: 'circle',
itemStyle: {
color: 'red',
}
}
],
links:[
{
source: '开始节点',
target: '初始化动作'
},
{
source: '初始化动作',
target: '填写用车申请表'
},
{
source: '填写用车申请表',
target: '部门审批'
},
{
source: '部门审批',
target: '填写用车申请表'
},
{
source: '部门审批',
target: '填写用车申请表'
},
{
source: '部门审批',
target: '车库取车'
},
{
source: '行政审批',
target: '车库取车'
},
{
source: '行政审批',
target: '填写用车申请表'
},
{
source: '行政审批',
target: '复审'
},
{
source: '复审',
target: '复审2'
},
{
source: '填写用车申请表',
target: '行政审批'
},
{
source: '车库取车',
target: '结束节点'
},
]
}
}
</script><template>
<h-flow-v2 :h_data="h_data"></h-flow-v2>
</template>
<script setup>
const h_data = {
component: 'h-flow-v2',
items: [
{
name: 'case_select1',
display_name: '单选下拉框1',
component: 'h-select-v1',
options: [
{
id: 1348,
name: 'test2'
},
{
id: 442,
name: 'admin admin'
},
{
id: 441,
name: 'hogwarts_student_debug2 dev'
}
]
},
{
name: 'case_select2',
display_name: '单选下拉框1',
component: 'h-select-v1',
options: [
{
id: 1348,
name: 'test2'
},
{
id: 442,
name: 'admin admin'
},
{
id: 441,
name: 'hogwarts_student_debug2 dev'
}
]
}
],
action: [
{
"api": {
"header": {}
},
"icon": "fa fa-user",
"link": "#/issues/:id",
"display_name": "去考试"
},
],
content: {
data: [
{
name: '开始节点',
symbol: 'circle',
x: 0,
y: 0,
value: 10
},
{
name: '初始化动作',
symbol: 'image://https://ceshiren.com/uploads/default/original/3X/6/6/661c4696d1cd63c2108b98ce5f3614f83efc57c5.png',
x: 1,
y: 0,
value: 20
},
{
name: '填写用车申请表',
symbol: 'image://https://ceshiren.com/uploads/default/original/3X/c/9/c9dfc26e0e24a698e932cc48258c82a457b46a59.jpeg',
x: 2,
y: 0,
value: 20
},
{
name: '部门审批',
symbol: 'rect',
x: 3,
y: 0,
value: 20,
itemStyle: {
color: 'blue',
}
},
{
name: '车库取车',
symbol: 'triangle',
x: 3,
y: 1,
value: 20,
itemStyle: {
color: 'green',
}
},
{
name: '行政审批',
symbol: 'diamond',
x: 2,
y: 1,
value: 20,
itemStyle: {
color: 'purple',
}
},
{
name: '复审',
symbol: 'roundRect',
x: 1,
y: 1,
value: 20,
itemStyle: {
color: 'yellow',
}
},
{
name: '复审2',
symbol: 'pin',
x: 0,
y: 1,
value: 20,
itemStyle: {
color: 'orange',
}
},
{
name: '结束节点',
x: 4,
y: 1,
symbol: 'circle',
itemStyle: {
color: 'red',
}
}
],
links:[
{
source: '开始节点',
target: '初始化动作'
},
{
source: '初始化动作',
target: '填写用车申请表'
},
{
source: '填写用车申请表',
target: '部门审批'
},
{
source: '部门审批',
target: '填写用车申请表'
},
{
source: '部门审批',
target: '填写用车申请表'
},
{
source: '部门审批',
target: '车库取车'
},
{
source: '行政审批',
target: '车库取车'
},
{
source: '行政审批',
target: '填写用车申请表'
},
{
source: '行政审批',
target: '复审'
},
{
source: '复审',
target: '复审2'
},
{
source: '填写用车申请表',
target: '行政审批'
},
{
source: '车库取车',
target: '结束节点'
},
]
}
}
</script>