设计器组件(FlowDesigner)

使用示例

实例1

<template>
	<a-spin :spinning="loading">
		<FlowDesigner ref="flowDesigner" top="50px"> </FlowDesigner>
	</a-spin>
</template>
<script lang="ts" setup>
import { ref, provide, onMounted } from 'vue';
import { FlowDesigner, LoadingKey } from '@javaguns/flow-ui';

const flowDesigner = ref<InstanceType<typeof FlowDesigner>>();
const loading = ref(false);

onMounted(() => {
	flowDesigner.value?.setData({
		definitionId: '1801089414423265282',
		modelId: '1788461317328904194',
	});
});


provide(LoadingKey, loading);
</script>

实例2

<template>
	<a-spin :spinning="loading">
		<FlowDesigner ref="flowDesigner" top="50px"> </FlowDesigner>
	</a-spin>
</template>
<script lang="ts" setup>
import { ref, provide, onMounted } from 'vue';
import { FlowDesigner, LoadingKey } from '@javaguns/flow-ui';

const flowDesigner = ref<InstanceType<typeof FlowDesigner>>();
const loading = ref(false);

provide(LoadingKey, loading);
</script>

API

属性

| 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | width | 宽 | string | - | | height | 高 | string | - | | top | 顶部高度 | string | | readonly | 只读模式 | boolean | - | | showZoom | 是否显示缩放 | boolean | - | | drag | 是否拖拽 | boolean | - | | nav | 是否显示导航 | boolean | - | | node | 节点数据 | Node | - | | privileges | 节点权限数据 | Privilege[] | - |

事件

| 事件 | 说明 | 回调参数 | | --- | --- | --- | | publish | 发布 | () => void | | setData | 设置节点数据 | () => void | | getData | 获取节点数据 | Node[] |

数据结构

渲染器组件(FlowRenderer)

使用示例

实例1

<template>
	<FlowRender ref="flowRender" height="800px"> </FlowRender>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { FlowRender } from '@javaguns/flow-ui';
import { IconAggregateFlow } from '@javaguns/icon';

const flowRender = ref<InstanceType<typeof FlowRender>>();

onMounted(() => {
	flowRender.value?.setData({
		modelId: '1767546705305862145',
		definitionId: '1783475813114155009',
	});
});

// 节点数据 :node = 'nodeData'
const nodeData = ref({
	nodeName: '路由',
	nodeType: 4,
	// 流程节点状态(用于只读模式, 0:未进行 1:进行中  2:已完成)
	nodeStatus: -1,
	// 显示添加按钮
	addable: true,
	// 可删除
	canDelete: true,
	// 是否修改
	update: false,
	// 子节点
	childNode: undefined,
	conditionNodes: [
		{
			nodeName: '条件1',
			nodeType: 3,
			// 流程节点状态(用于只读模式, 0:未进行 1:进行中  2:已完成)
			nodeStatus: -1,
			// 显示添加按钮
			addable: true,
			// 可删除
			canDelete: true,
			// 可删除提示
			deletable: false,
			// 是否激活
			active: false,
			// 是否可以拷贝
			canCopy: true,
			// 是否修改
			update: false,
			// 拖拽样式
			dragClass: false,
			// 拖拽工具
			dragTool: false,
			// 是否有错误
			error: false,
			// 显示内容
			content: undefined,
			// 图标
			icon: 'fenzhijiedian',
			iconUrl: 'https://foruda.gitee.com/images/1689560302802681260/6708fb5e_9837676.png',
			color1: 'rgb(0, 110, 248)',
			color2: 'rgb(0, 110, 248)',
			color3: 'rgb(105, 172, 255)',
			// 子节点
			childNode: undefined,
			// 条件组
			conditionGroup: [],
		},
		{
			nodeName: '默认条件',
			nodeType: 3,
			// 流程节点状态(用于只读模式, 0:未进行 1:进行中  2:已完成)
			nodeStatus: -1,
			// 显示添加按钮
			addable: true,
			// 可删除
			canDelete: false,
			// 可删除提示
			deletable: false,
			// 是否激活
			active: false,
			// 是否可以拷贝
			canCopy: true,
			// 是否修改
			update: false,
			// 拖拽样式
			dragClass: false,
			// 拖拽工具
			dragTool: false,
			// 是否有错误
			error: false,
			// 显示内容
			content: '不满足时，进入默认条件',
			// 图标
			icon: 'fenzhijiedian',
			iconUrl: 'https://foruda.gitee.com/images/1689560302802681260/6708fb5e_9837676.png',
			color1: 'rgb(0, 110, 248)',
			color2: 'rgb(0, 110, 248)',
			color3: 'rgb(105, 172, 255)',
			// 子节点
			childNode: undefined,
			// 条件组
			conditionGroup: [],
		},
	],
});
</script>

API

属性

| 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | width | 宽 | string | - | | height | 高 | string | - | | top | 顶部高度 | string | | pTop | 节点顶部高度 | string | | pBottom | 节点底部高度 | string | | complete | 是否完成 | boolean | | readonly | 只读模式 | boolean | - | | showZoom | 是否显示缩放 | boolean | - | | zoomTop | 是否显示缩放 | boolean | - | | drag | 是否拖拽 | boolean | - | | nav | 是否显示导航 | boolean | - | | showStatus | 是否显示导航 | boolean | - | | statusMode | 是否显示导航 | boolean | - | | nav | 是否显示导航 | boolean | - | | node | 节点数据 | Node | - |

事件

| 事件 | 说明 | 回调参数 | | --- | --- | --- | | load | 加载完成 | () => void | | setData | 设置节点数据 | () => void | | getData | 获取节点数据 | Node[] |

数据结构