配置
# 用法
通过vue方式引入子组件:
<RuleGoEditor
ref="ruleGoEditorRef"
:data="data"
:options="options"/>
<script setup>
import RuleGoEditor from './components/RuleGoEditor.vue'
import {ref} from "vue";
//ruleGoEditor引用,可视调用ruleGoEditor暴露的方法
const ruleGoEditorRef = ref();
//可选参数
const options = ref()
//规则链数据
const data = ref()
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# data属性
RuleGo规则链配置,格式参考:规则链 (opens new window) 用于渲染流程图, 如果不提供则工作区为初始化状态。
# options属性
| 字段 | 类型 | 必选 | 默认值 | 说明 |
|---|---|---|---|---|
| url | string | 否 | - | RuleGo服务交互API根路径 |
| ruleChain.id | string | 否 | 自动生成的uuid | 规则链ID |
| ruleChain.name | string | 否 | - | 规则链名称 |
| startX | number | 否 | 280 | 第一个INPUT节点X坐标 |
| startY | number | 否 | 280 | 第一个INPUT节点Y坐标 |
| toolbar | toolbar | 否 | - | 用于显示工具区按钮 |
| components | array | 否 | 规则链节点组件列表 |
允许设置logicFlow配置,参考:文档 (opens new window)
# toolbar
| 字段 | 类型 | 必选 | 默认值 | 说明 |
|---|---|---|---|---|
| showTile | Boolean | 否 | true | 是否显示规则链标题 |
| showSelection | Boolean | 否 | true | 是否显示【框选】按钮 |
| showUndo | Boolean | 否 | true | 是否显示【撤销】按钮 |
| showRedo | Boolean | 否 | true | 是否显示【创建/重做】按钮 |
| showMinMap | Boolean | 否 | true | 是否显示【小地图】按钮 |
| showTest | Boolean | 否 | true | 是否显示【运行】按钮 |
| showMinMap | Boolean | 否 | true | 是否显示【小地图】按钮 |
| showSetting | Boolean | 否 | true | 是否显示【设置】按钮 |
| showFullScreen | Boolean | 否 | true | 是否显示【全屏】按钮 |
| showNew | Boolean | 否 | true | 是否显示【设置-新建】按钮 |
| showOpen | Boolean | 否 | true | 是否显示【设置-打开】按钮 |
| showEdit | Boolean | 否 | true | 是否显示【设置-编辑】按钮 |
| showIntegration | Boolean | 否 | true | 是否显示【设置-集成】按钮 |
| showExport | Boolean | 否 | true | 是否显示【设置-导出】按钮 |
| showImport | Boolean | 否 | true | 是否显示【设置-导入】按钮 |
| showNodeMgt | Boolean | 否 | true | 是否显示【设置-组件管理】按钮 |
| showUserSetting | Boolean | 否 | true | 是否显示【设置-设置】按钮 |
| showAbout | Boolean | 否 | true | 是否显示【设置-关于】按钮 |
| showDelete | Boolean | 否 | true | 是否显示【删除选定】按钮 |
| showSave | Boolean | 否 | true | 是否显示【保存】按钮 |
| showReset | Boolean | 否 | true | 是否显示【重置】按钮 |
# 事件
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| saveOk | 保存成功 | 规则链data |
| saveError | 保存失败 | 规则链data,e |
| reset | 重置 | 规则链data |
# 方法
| 事件名 | 说明 | 调用参数 | 返回参数 |
|---|---|---|---|
| render | 渲染规则链 | 规则链data | - |
| save | 触发保存 | - | - |
| getData | 获取规则链data | - | 规则链data |
| setLocales | 设置国际化 | 国际化文件 | - |
| lf | 获取logicFlow实例 | - | logicFlow实例 (opens new window) |
使用方法,在引入RuleGoEditor组件增加一个引用,然后通过引用调用组件方法,如:
<RuleGoEditor ref="ruleGoEditorRef"/>
<script setup>
import RuleGoEditor from './components/RuleGoEditor.vue'
import {ref,onMounted} from "vue";
//ruleGoEditor引用,可视调用ruleGoEditor暴露的方法
const ruleGoEditorRef = ref();
onMounted(() => {
//测试调用组件方法
const data1=ruleGoEditorRef.value.getData()
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
上次更新: 2025/02/28, 13:39:13