表单插件扩展说明 #

表单插件用于在表单中执行一些配置化的逻辑。

表单插件有两种 #

1、主表插件 #

主表插件配置在全局表单配置中,作用域为全局数据，可用数据请参考表单开发-表单全局可用参数

2、子表插件 #

子表插件会运行在每一行子表内部，即，作用域为每条子表数据。

开发插件一共有三部分 #

1. 配置页，用于在表单中配置插件，位于src\libs\avue-form-design\components\config\plugins
2. 前端执行组件，插件功能实现 src\agilebpm\ab-form\ab-table-plugins
3. 后端生成部分，用于通过配置生成组件源码 位于 ab-biz-view\src\main\java\com\dstz\biz\view\design\parser\FormDesignHtmlParser.java

新增控件具体步骤 #

综合说明 #

我们以函数计算插件为例，如表单中需要计算 单价 * 数量 = 总价，并将总价赋值给总价字段。

1. 我们首先设计下插件如下 <ab-calculate v-model="data.xxx.xx" :script="data.xxx + data.name" ></ab-calculate>

• v-model： 为函数计算赋值目标字段（总价）
• script：为函数计算表达式（脚本），可能取值子表或者当前表一些字段，进行混合运算。

2. 我们要在表单设计器插件中配置插件，（开发 赋值目标字段、脚本的属性配置页）

3. 配置完成后，可以开始写后台代码生成，需要根据 plugin 的配置 JSON 来生成 <ab-calculate> 组件的源代码

4. 最后就需要开发组件实现，并将组件注册到在线表单中

新增控件配置页面 #

在插件目录src\libs\avue-form-design\components\config\plugins开发新的插件，可参考已有的函数计算插件 tableCalPlugin.vue

插件配置页接受入参：

• plugin: 为自身对象的配置
• modelValue: 为配置页弹出窗的展示条件，可控制是否展示配置页
• tableName：当前操作的表明，全局配置下表明为空

如：

  const props = defineProps({
    plugin: {
      type: Object,
      required: true,
    },
    modelValue:{
      type: Boolean,
      required: true
    },
    tableName:{
      type: String,
      required: false
    }
  })
  

• dialogOk事件: 父组件通过该事件接受配置完成的插件 eg: emits('dialogOk', plugin)

注册插件配置 #

配置在 src\libs\avue-form-design\components\config\tablePlugins.vue 文件中

1. 引入配置页 如：import tableCalPlugin from './plugins/tableCalPlugin.vue';
2. 在 pluginDefaultJson 中定义插件默认的JSON配置
3. 在页面部分加入配置页。 如 函数计算插件

<tableCalPlugin 
	@dialogOk="okEvent" 
	:tableName="tableName" 
	v-model="pageData.showPlugin.tableCal" 
	:plugin="pageData.currentPlugin">
</tableCalPlugin>`

组件源码生成 #

生成代码位于： ab-biz-view\src\main\java\com\dstz\biz\view\design\parser\FormDesignHtmlParser.java

主要根据前端配置来生成 html

请在 FormDesignHtmlParser.genTablePluginHtml 方法中新增插件方法入口，并参考函数计算实现扩展自己组件的生成逻辑 getTableCal。

开发组件 #

插件功能实现目录位于 src\agilebpm\ab-form\ab-table-plugins

组件注册位于 src\agilebpm\ab-form\custFormBaseImports.ts ，请参考 abCalculate 函数计算注册的配置。