设计器组件(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[]

数据结构