udm-rules-vue

v0.0.2

Published

2 months ago

UDM规则引擎开发套件Vue3版本

0High
0Medium
0Low

jacky6024

UDM 规则引擎开发套件

简介

UDM 全称为 Unify Decision Manager，是一款由上海锐道信息技术有限公司开发的规则引擎产品，它包含规则集、决策表、决策流等规则工具；UDM 中采用自然语言的规则编写方式，提供完善的代码提示以及错误诊断机制，使得非技术人员也可以快速上手编写业务规则。

UDM 规则引擎完全兼容IBM ODM规则引擎（原 iLog）中规则集、决策表、决策流语法及业务模型，可直接打开并运行IBM ODM业务规则项目，实现 iLog 项目的快速迁移。

UDM 主要由三个部分组成，分别是一个由 java 实现的基于 Rete 算法的核心计算引擎，一个由 java 编写的服务端，一个基于 vscode 插件的开发套件以及一个发布在 npm 上可以在 web 环境中使用的包含各种编辑器在内的组件库。

在 web 开发中使用 npm 组件库

我们除了可以直接使用基于 vscode 插件来进行 UDM 规则开发外，还可以通过引用发布在 npm 上的 udm-rules-vue 组件库，在纯 web 环境中定义自己的规则编辑器，以将 UDM 规则引擎无缝嵌入到我们的 web 项目中。

安装组件库

npm i udm-rules-vue

UDM 的 web 中的组件采用 vue3 开发，所以我们安装好 UDM 组件库后就可以在标准的 vue3 开发环境中引用相关编辑器及相关 api。

依赖说明

UDM 组件库将以下依赖声明为 peerDependencies，使用时需要确保项目中已安装：

konva: ^10.0.12 - 用于图形渲染（规则流编辑器等）

安装 UDM 后，请确保项目中安装了所需的 peerDependencies：

npm install konva@^10.0.12

规则编辑器

import {PureWebRuleEditor} from 'udm-rules-vue'

Props 属性：

| 属性 | 类型 | 必填 | 说明 | |------|------|------|------| | load-file-callback | () => Promise<any> | 是 | 加载编辑器文件内容的回调函数 | | loadBomFilesCallback | () => Promise<{ fileName: string; content: string }[]> | 是 | 加载 BOM 文件的回调函数 | | loadVocFilesCallback | () => Promise<{ fileName: string; content: string }[]> | 是 | 加载词汇表文件的回调函数 | | loadVarFilesCallback | () => Promise<{ fileName: string; content: string }[]> | 是 | 加载变量文件的回调函数 | | loadProjectFilesCallback | () => Promise<{ fileName: string; content: string }[]> | 是 | 加载项目配置文件的回调函数 |

我们需要在方法中加载文件对应的内容，然后通过返回一个 Promise 将加载后的内容返回给编辑器使用。

文件内容发生变化后，会触发名为FILE_CHANGE的事件，我们可以通过下面方法监听并使用：

import {event} from 'udm';
event.EventBus.on(event.FILE_CHANGE,(data)=>{
	......
});

接口方法：

serializeToXml() - 将当前编辑的规则内容序列化为 XML 格式

showQuickTestDialog() - 显示快速测试对话框

使用示例：

<template>
  <PureWebRuleEditor
    ref="ruleEditor"
    :load-file-callback="loadFileCallback"
    :loadBomFilesCallback="loadBomFilesCallback"
    :loadVocFilesCallback="loadVocFilesCallback"
    :loadVarFilesCallback="loadVarFilesCallback"
    :loadProjectFilesCallback="loadProjectFilesCallback"
  />
</template>

<script setup>
import { ref } from 'vue';
import { PureWebRuleEditor } from 'udm-rules-vue';

const ruleEditor = ref();

const loadFileCallback = async () => {
  // 加载编辑器文件内容
  return { /* 文件内容 */ };
};

const loadBomFilesCallback = async () => {
  // 加载 BOM 文件
  return [
    { fileName: 'model.bom', content: '...' },
    { fileName: 'model2.bom', content: '...' }
  ];
};

const loadVocFilesCallback = async () => {
  // 加载词汇表文件
  return [
    { fileName: 'model.voc', content: '...' }
  ];
};

const loadVarFilesCallback = async () => {
  // 加载变量文件
  return [
    { fileName: 'variables.var', content: '...' }
  ];
};

const loadProjectFilesCallback = async () => {
  // 加载项目配置文件
  return [
    { fileName: 'project.properties', content: '...' }
  ];
};

// 获取 XML 内容
const getXmlContent = () => {
  const xmlContent = ruleEditor.value?.serializeToXml();
  console.log(xmlContent);
};

// 显示快速测试对话框
const showTestDialog = () => {
  ruleEditor.value?.showQuickTestDialog();
};
</script>

决策表编辑器

import {PureWebDecisionTableEditor} from 'udm-rules-vue'

Props 属性：

文件内容变化监听以及获取当前文件内容方式与规则编辑器相同，这里不再赘述。

接口方法：

serializeToXml() - 将当前编辑的决策表内容序列化为 XML 格式

showQuickTestDialog() - 显示快速测试对话框

使用示例：

<template>
  <PureWebDecisionTableEditor
    ref="decisionTableEditor"
    :load-file-callback="loadFileCallback"
    :loadBomFilesCallback="loadBomFilesCallback"
    :loadVocFilesCallback="loadVocFilesCallback"
    :loadVarFilesCallback="loadVarFilesCallback"
    :loadProjectFilesCallback="loadProjectFilesCallback"
  />
</template>

<script setup>
import { ref } from 'vue';
import { PureWebDecisionTableEditor } from 'udm-rules-vue';

const decisionTableEditor = ref();

// 各种加载回调函数实现同规则编辑器

// 获取 XML 内容
const getXmlContent = () => {
  const xmlContent = decisionTableEditor.value?.serializeToXml();
  console.log(xmlContent);
};

// 显示快速测试对话框
const showTestDialog = () => {
  decisionTableEditor.value?.showQuickTestDialog();
};
</script>

BOM 编辑器

import {PureWebBomEditor} from 'udm-rules-vue'

Props 属性：

文件内容变化监听以及获取当前文件内容方式与规则编辑器相同，这里不再赘述。

接口方法：

serializeToJson() - 将当前编辑的 BOM 内容序列化为 JSON 格式

使用示例：

<template>
  <PureWebBomEditor
    ref="bomEditor"
    :load-file-callback="loadFileCallback"
    :loadBomFilesCallback="loadBomFilesCallback"
    :loadVocFilesCallback="loadVocFilesCallback"
    :loadVarFilesCallback="loadVarFilesCallback"
    :loadProjectFilesCallback="loadProjectFilesCallback"
  />
</template>

<script setup>
import { ref } from 'vue';
import { PureWebBomEditor } from 'udm-rules-vue';

const bomEditor = ref();

// 各种加载回调函数实现同规则编辑器

// 获取 JSON 内容
const getJsonContent = () => {
  const jsonContent = bomEditor.value?.serializeToJson();
  console.log(jsonContent);
  // 处理 JSON 内容
};
</script>

返回的JSON格式内容：

{
  "bom": "BOM文件的类定义内容字符串",
  "voc": "Vocabulary（词汇表）文件内容字符串",
  "b2x": "B2x文件内容字符串",
  "b2xe": "运行时B2x文件内容字符串"
}

字段说明：

| 字段 | 类型 | 说明 | |------|------|------| | bom | string | BOM（业务对象模型）文件内容，包含包、类、字段、方法等定义的完整文本 | | voc | string | Vocabulary（词汇表）文件内容，包含业务术语的自然语言描述 | | b2x | string | B2x文件内容（设计时），XML格式，包含类的属性和方法执行脚本等 | | b2xe | string | 运行时B2x文件内容，XML格式，用于规则引擎运行时使用 |

bom字段示例：

property uuid "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"

package com.example;

public class Customer {
  String name;
  int age;
  public void updateCustomerInfo(String newName, int newAge);
}

public class Order {
  java.util.List<OrderItem> items;
  Customer customer;
  public BigDecimal calculateTotal();
}

voc字段示例：

# Vocabulary Properties
uuid = xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx

# com.example.Customer
com.example.Customer#concept.label=客户
com.example.Customer.name#instance.label=姓名
com.example.Customer.age#instance.label=年龄

# com.example.Order
com.example.Order#concept.label=订单
com.example.Order.items#phrase.navigation=的订单项
com.example.Order.customer#phrase.navigation=的客户
com.example.Order.calculateTotal()#phrase.action=计算总金额

b2x字段示例：

<?xml version="1.0" encoding="UTF-8"?>
<UDM-b2x>
  <id>xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx</id>
  <class>
    <businessName>com.example.Customer</businessName>
    <attribute>
      <name>name</name>
      <type>String</type>
      <update>false</update>
      <static>false</static>
    </attribute>
    <method>
      <name>updateCustomerInfo</name>
      <static>false</static>
      <parameter type="String" name="newName"/>
      <parameter type="int" name="newAge"/>
      <return>void</return>
      <body><![CDATA[this.name = newName; this.age = newAge;]]></body>
    </method>
  </class>
</UDM-b2x>

决策树编辑器

import {PureWebDecisionTreeEditor} from 'udm-rules-vue'

Props 属性：

文件内容变化监听以及获取当前文件内容方式与规则编辑器相同，这里不再赘述。

接口方法：

serializeToXml() - 将当前编辑的决策树内容序列化为 XML 格式

showQuickTestDialog() - 显示快速测试对话框

使用示例：

<template>
  <PureWebDecisionTreeEditor
    ref="decisionTreeEditor"
    :load-file-callback="loadFileCallback"
    :loadBomFilesCallback="loadBomFilesCallback"
    :loadVocFilesCallback="loadVocFilesCallback"
    :loadVarFilesCallback="loadVarFilesCallback"
    :loadProjectFilesCallback="loadProjectFilesCallback"
  />
</template>

<script setup>
import { ref } from 'vue';
import { PureWebDecisionTreeEditor } from 'udm-rules-vue';

const decisionTreeEditor = ref();

// 各种加载回调函数实现同规则编辑器

// 获取 XML 内容
const getXmlContent = () => {
  const xmlContent = decisionTreeEditor.value?.serializeToXml();
  console.log(xmlContent);
};

// 显示快速测试对话框
const showTestDialog = () => {
  decisionTreeEditor.value?.showQuickTestDialog();
};
</script>

项目属性编辑器

import {PureWebProjectPropertiesEditor} from 'udm-rules-vue'

Props 属性：

文件内容变化监听以及获取当前文件内容方式与规则编辑器相同，这里不再赘述。

接口方法：

serializeToXml() - 将当前编辑的项目属性内容序列化为 XML 格式

使用示例：

<template>
  <PureWebProjectPropertiesEditor
    ref="projectPropertiesEditor"
    :load-file-callback="loadFileCallback"
    :loadBomFilesCallback="loadBomFilesCallback"
    :loadVocFilesCallback="loadVocFilesCallback"
    :loadVarFilesCallback="loadVarFilesCallback"
    :loadProjectFilesCallback="loadProjectFilesCallback"
  />
</template>

<script setup>
import { ref } from 'vue';
import { PureWebProjectPropertiesEditor } from 'udm-rules-vue';

const projectPropertiesEditor = ref();

// 各种加载回调函数实现同规则编辑器

// 获取 XML 内容
const getXmlContent = () => {
  const xmlContent = projectPropertiesEditor.value?.serializeToXml();
  console.log(xmlContent);
};
</script>

测试用例编辑器

import {PureWebTstEditor} from 'udm-rules-vue'

Props 属性：

文件内容变化监听以及获取当前文件内容方式与规则编辑器相同，这里不再赘述。

接口方法：

serializeToXml() - 将当前编辑的测试用例内容序列化为 XML 格式

使用示例：

<template>
  <PureWebTstEditor
    ref="tstEditor"
    :load-file-callback="loadFileCallback"
    :loadBomFilesCallback="loadBomFilesCallback"
    :loadVocFilesCallback="loadVocFilesCallback"
    :loadVarFilesCallback="loadVarFilesCallback"
    :loadProjectFilesCallback="loadProjectFilesCallback"
  />
</template>

<script setup>
import { ref } from 'vue';
import { PureWebTstEditor } from 'udm-rules-vue';

const tstEditor = ref();

// 各种加载回调函数实现同规则编辑器

// 获取 XML 内容
const getXmlContent = () => {
  const xmlContent = tstEditor.value?.serializeToXml();
  console.log(xmlContent);
};
</script>

变量编辑器

import {PureWebVariableEditor} from 'udm-rules-vue'

Props 属性：

文件内容变化监听以及获取当前文件内容方式与规则编辑器相同，这里不再赘述。

接口方法：

serializeToXml() - 将当前编辑的变量内容序列化为 XML 格式

使用示例：

<template>
  <PureWebVariableEditor
    ref="variableEditor"
    :load-file-callback="loadFileCallback"
    :loadBomFilesCallback="loadBomFilesCallback"
    :loadVocFilesCallback="loadVocFilesCallback"
    :loadVarFilesCallback="loadVarFilesCallback"
    :loadProjectFilesCallback="loadProjectFilesCallback"
  />
</template>

<script setup>
import { ref } from 'vue';
import { PureWebVariableEditor } from 'udm-rules-vue';

const variableEditor = ref();

// 各种加载回调函数实现同规则编辑器

// 获取 XML 内容
const getXmlContent = () => {
  const xmlContent = variableEditor.value?.serializeToXml();
  console.log(xmlContent);
};
</script>

规则流编辑器

import {PureWebFlowEditor} from 'udm-rules-vue'

Props 属性：

文件内容变化监听以及获取当前文件内容方式与规则编辑器相同，这里不再赘述。

接口方法：

serializeToXml() - 将当前编辑的规则流内容序列化为 XML 格式

showQuickTestDialog() - 显示快速测试对话框

使用示例：

<template>
  <PureWebFlowEditor
    ref="flowEditor"
    :load-file-callback="loadFileCallback"
    :loadBomFilesCallback="loadBomFilesCallback"
    :loadVocFilesCallback="loadVocFilesCallback"
    :loadVarFilesCallback="loadVarFilesCallback"
    :loadProjectFilesCallback="loadProjectFilesCallback"
  />
</template>

<script setup>
import { ref } from 'vue';
import { PureWebFlowEditor } from 'udm-rules-vue';

const flowEditor = ref();

// 各种加载回调函数实现同规则编辑器

// 获取 XML 内容
const getXmlContent = () => {
  const xmlContent = flowEditor.value?.serializeToXml();
  console.log(xmlContent);
};

// 显示快速测试对话框
const showTestDialog = () => {
  flowEditor.value?.showQuickTestDialog();
};
</script>

接口方法汇总

下表汇总了各编辑器提供的接口方法：

| 编辑器 | 方法 | 返回格式 | 说明 | |--------|------|----------|------| | PureWebRuleEditor | serializeToXml() | XML | 将规则内容序列化为 XML 格式 | | PureWebRuleEditor | showQuickTestDialog() | - | 显示快速测试对话框 | | PureWebBomEditor | serializeToJson() | JSON | 将 BOM 内容序列化为 JSON 格式 | | PureWebDecisionTreeEditor | serializeToXml() | XML | 将决策树内容序列化为 XML 格式 | | PureWebDecisionTreeEditor | showQuickTestDialog() | - | 显示快速测试对话框 | | PureWebDecisionTableEditor | serializeToXml() | XML | 将决策表内容序列化为 XML 格式 | | PureWebDecisionTableEditor | showQuickTestDialog() | - | 显示快速测试对话框 | | PureWebProjectPropertiesEditor | serializeToXml() | XML | 将项目属性内容序列化为 XML 格式 | | PureWebTstEditor | serializeToXml() | XML | 将测试用例内容序列化为 XML 格式 | | PureWebVariableEditor | serializeToXml() | XML | 将变量内容序列化为 XML 格式 | | PureWebFlowEditor | serializeToXml() | XML | 将规则流内容序列化为 XML 格式 | | PureWebFlowEditor | showQuickTestDialog() | - | 显示快速测试对话框 |

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

UDM 规则引擎 开发套件

简介

在 web 开发中使用 npm 组件库

安装组件库

依赖说明

规则编辑器

决策表编辑器

BOM 编辑器

决策树编辑器

项目属性编辑器

测试用例编辑器

变量编辑器

规则流编辑器

接口方法汇总

UDM 规则引擎开发套件