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

## 数据结构