介绍
本文档主要用于描述 ShadcnWorkflow 组件的一些特性和使用方法。
用法
查看代码
vue
<template>
<div style="width: 1080px">
<ShadcnWorkflowEditor v-model="workflowState"
:categories="categories"
:nodes="nodes"
:connections="[]"/>
</div>
</template>视图
查看代码
vue
<template>
<div style="width: 1080px">
<ShadcnWorkflowView :nodes="nodes" :data="data"/>
</div>
</template>示例
json
{
id: 'start',
label: 'Start',
category: 'input',
position: { x: 0, y: 0 },
configure: [
{
field: 'name',
label: 'Name',
type: 'input',
description: 'This is a long description, this is a long description, this is a long description, this is a long description',
required: true
},
{
field: 'name1',
label: 'Password',
type: 'password',
rules: [
{
required: true,
message: 'Please input password!'
}
],
required: true
}
],
description: 'Job start node',
ports: [
{
id: 'out1',
type: 'output',
label: 'Output',
required: true,
message: 'Input is required'
}
]
}id： 节点 IDlabel： 节点标签category：节点类别position： 节点位置x： 节点 x 位置y： 节点 y 位置
configure： 节点配置field： 配置字段label： 配置标签type： 配置类型，支持所有form组件description： 配置描述required：配置必需rules： 配置规则
description： 节点描述ports： 节点端口id： 端口 IDtype： 端口类型label： 端口标签required：需要端口message： 端口消息
数据
json
{
"nodes": [
{
"id": "646de380-ec15-411c-a830-3bf4c5515451",
"tid": "start",
"category": "input",
"position": {
"x": 160,
"y": 121
},
"data": {}
},
{
"id": "109ed659-2909-41bd-9530-12010a539e3f",
"tid": "end",
"category": "output",
"position": {
"x": 396,
"y": 340
},
"data": {}
}
],
"connections": [
{
"id": "7f4fe994-c2ef-4978-b1c8-f3c94dae79ef",
"source": "646de380-ec15-411c-a830-3bf4c5515451-out1",
"target": "109ed659-2909-41bd-9530-12010a539e3f-in1"
}
]
}nodes：节点id： 节点 IDtid： 节点 tid （原始节点 ID）category：节点类别position： 节点位置x： 节点 x 位置y： 节点 y 位置
data：节点表单数据
connections：连接id： 连接 IDsource： 连接源target： 连接目标