功能概述

…

数据结构设计

supportActions

在进行组件开发时，定义组件的数据结构，会在组件数据结构中定义 supportActions 属性，该属性规定了当前组件支持的所有具体动作，如点击事件 onClick，聚焦事件 onFucus 等
image.png
image.png
image.png
其他

  • data.props.supportActions 中定义的动作是组件本身支持的动作，是组件可以进行配置的动作，并不具有实际执行的能力，是可以进行配置的入口
  • listeners 中存储了动作执行的最小单元，在动作执行部分，会以 listeners 中 value 的具体实现，执行对应的动作
  • method 动作模版，在使用自定义写入 js 时，预置的函数模版

  • params 和 bind 目前没有使用

    listeners: CallbackFunction

    listeners 中 value 的数据结构
    image.png
    其他

  • listeners 中的 key === value.actionId

  • 动作的一级分类是指：内置动作、自定义执行的 js(自定义JS)、引用动作面板中定义的 js(页面JS)
  • 动作的二级分类是指：内置动作模式下，又有页面跳转、打开弹窗、关闭弹窗、显示组件、隐藏组件五种动作
  • 在动作执行时，根据 type 和 actionType 决定动作执行的类型和配置
  • name 的用法

image.png

  • actionId 动作的唯一标识，依据 actionId 删除、编辑动作

    前后置动作

    前后置动作的数据结构、执行思路与 自定义JS 相同

  • 前置动作

前置动作开启的情况下，在动作执行前，会执行前置动作，只有前置动作 显式地返回 return true才会执行后续的具体动作和后置动作

  • 后置动作

后置动作开启的情况下，会执行自编写的 js 代码

内置动作

页面跳转
image.png
弹窗/组件的操作
image.png

  • modalId componentIds 存储组件的唯一标识

    自定义动作

    image.png
    image.png

  • source 字符串格式的源代码

  • compiled 经过编译后的 es5 代码
  • error 存储编译过程中的错误

  • params 函数的参数

    页面JS

    image.png
    image.png

  • id 和 name: 动作面板中通过 export 导出的函数名

  • params 在动作弹窗中配置的参数

    动作面板

    image.png
    image.png

  • mudule 中的 source 为源代码，compiled 为编译后的 es5 代码

  • list 存储了动作面板中通过 export function 关键字导出的函数名

  • transform 方法生成一个对象，key 为函数名，value 为对应的函数体

    动作执行部分

    在 design-core 中提供一个动作执行混入对象: ActionGenerateMixin，实现动作的注册和执行
    image.png

    参数

    image.png

  • data 组件的数据，其作用就是为了获取 supportActions

  • state 全局状态
  • supportActions 支持的动作数组，如果没有组件数据可以自行构造（参见动作弹窗示例）
  • actionModule 动作面板数据
  • refActions 生成一个包含动作面板所有函数的对象 { functionName: Function }

  • modelCache 页面组件数据（未使用）

    动作注册

    mounted 阶段，通过 遍历 ActionConfig 中的 listeners , 获取详细的事件，使用 this.$on 注册
    image.png
    参数说明：

  • 在组件中调用时，支持传入两个参数，(目前保留了两个参数入口，但没有实际使用)

defaultParams: 默认参数
event: 原生事件对象

动作执行

  1. 页面跳转

image.png
image.png

  • getValueMap 可以获取表单中字段组件的值
    1. 组件处理：findComponent() 方法获取组件，修改 behavior.value 控制弹窗/组件的隐藏与显示

image.png

  1. js 代码执行

image.png
defaultParams 目前还没有组件使用，是在组件生成模式下执行时传入

  1. 页面JS执行

image.png

动作配置弹窗的使用

动作弹窗配置就是为组件数据添加 supportActions 中的数据
image.png

API

属性说明

属性 说明 类型 默认值
value(v-model) 对话框是否可见 boolean false
modalTitle 对话框标题 string “动作弹窗”
targetActionInfo 目标动作信息(onClick等) ActionConfig
callbackFunctionInfo 详细动作信息(详细配置) CallbackFunction
state 设计器保存的全局状态 - -
showActionKeys 显示动作类型的配置 Array [“1”, “2”, “3”, “100”, “101”, “102”, “103”, “104”]
  • 显示动作类型配置的说明
    • “1”：内置动作
    • “100”：页面跳转
    • “101”：打开弹窗
    • “102”：关闭弹窗
    • “103”：显示组件
    • “104”：隐藏组件
    • “2”：自定义JS
    • “3”：页面JS

事件

事件名称 说明 回调参数
on-bind 点击确定回调，参数为修改后的 listeners function (listeners)

示例

对于灵珑平台的组件，在配置时，可以使用 element-event-item 配置组件进行动作配置
对于其他类型的组件，要使用动作配置弹窗，则需要根据具体数据构建 ActionConfig，在执行时需要构建 supportActions
以顶部操作的 button 为例

  1. button 的数据结构

image.png

  1. html 配置部分 ```html 绑定动作 

  2. 3. bindList 绑定动作数据获取
  3. ```tsx
  4. // 已经绑定的动作列表
  5. public get bindList() {
  6.   return Object.keys(this.button.callbackFunction?.listeners)?.length ? [this.button.callbackFunction] : [];
  7. }
  1. 打开弹窗和编辑动作的区别

image.png

  • 直接打开弹窗 callbackFunctionInfo = {};
  • 编辑动作，会根据具体动作设置 callbackFunctionInfo 的值
  1. 保存动作数据到 button.callbackFunction 中

image.png

  1. 执行

在 render 时，使用 mixins
image.png
image.png

  • supportActions 为组件内构造，button 组件本身不具有数据结构
  • onBtnClick 调用点击事件

    获取组件数据

    自定义动作中支持通过上下文和组件唯一标识获取组件数据，进而对组件的相关属性进行操作
    关于组件开放的属性和方法，待整理
    此处仅给出示例：
  1. 单一设计器下使用
  • 在表单设计器下添加三个单行文本：名称、别名、区域
  • 为别名和区域添加扩展按钮

image.png

  • 为别名和区域添加扩展单击事件

别名

  1. function main() {
  2.     const com = this.findComponent("text_input_2ihoge");
  3.     com.props.title.value = "别名修改";
  4.     com.props.defaultValue.value = "别名修改";
  5. }

区域

  1. function main() {
  2.     const com = this.findComponent("text_input_2ihoge");
  3.     com.props.title.value = "区域修改";
  4.     com.props.defaultValue.value = "区域修改";
  5. }
  • 在预览中查看效果

点击别名和区域后的扩展按钮，可以修改原本 名称 单行文本组件的 label 和 input 的值
单一设计器.gif

  1. 页面构建下使用

页面设计器下，涉及到部件概念，操作不同部件时，需要先获取部件的数据，再根据部件数据中保存的 state 获取组件的值

  • 在页面构建中，加载一个表单和表格列表

image.png

  • 在表格列表的顶部操作配置面板，为 修改按钮 和 还原按钮 添加点击事件

修改

  1. function main() {
  2.     const form = this.findComponent("form_part_6nfo4w");
  3.     const com = form.props.state.getModelById("text_input_2ihoge");
  4.     com.props.title.value = "修改";
  5.     com.props.defaultValue.value = "修改";
  6. }

还原

  1. function main() {
  2.     const form = this.findComponent("form_part_6nfo4w");
  3.     const com = form.props.state.getModelById("text_input_2ihoge");
  4.     com.props.title.value = "还原";
  5.     com.props.defaultValue.value = "还原";
  6. }
  • 在预览中查看效果

点击修改和还原按钮，可以修改原本 名称 单行文本组件的 label 和 input 的值
页面设计器.gif

注：

  • 通过 findComponent 和 state.getModelById 可以获取组件数据
  • 示例中通过修改 com.props.title.value 和 com.props.defaultValue.value 修改输入框的 label 和 value

    动作面板使用

    image.png
    可以在动作面板输入代码，在动作弹窗中配置引用的页面JS
    通过 export 的函数，将会被「动作面板」感知，可以在动作面板中选中当前函数，进行调用。
    以下代码可参考： ```javascript /**
    • 自定义工具函数，不包括上下文(this)的使用 */ function something() { alert(‘something’) }

/**

  • @title 自定义动作 A
  • 可以使用上下文(this) */ export function custom_action_a() { alert(‘custom action a’) }

/**

  • @title 自定义动作 B */ export function custom_action_b() { something(); // 调用自定义工具函数 this.custom_action_a(); // 调用自定义动作函数 } ```

注： :::warning 只有符合 export function xxx() {} 的写法才会在组件动作面板中被识别。并且 export 的方法名称不允许重复。 :::

如果希望手动获取或者调用面板里的动作可以直接 this.methodName(); 调用。

在设计器中的使用

内置动作：页面跳转

内置动作包含 URL、内部页面、部件弹窗三种链接方式

  • URL：直接配置可以跳转的 url，如：https://www.baidu.com
  • 内部页面：通过选择当前应用下设计的页面，进行跳转

  • 部件弹窗：打开一个设计好的部件弹窗

    URL

    image.png
    image.png
    image.png
    image.png
    image.png

    • 新开页面：在新的标签页打开
    • @ + 空格符号的使用：可以选择当前设计页面中的字段组件，在执行时会自动取值

    • 查看详情：暂未设计

      内部页面

      image.png
      目标页面：与当前应用下页面构建中的页面相同（此处显示不同为截图时连接的库不同）
      image.png
      image.png

    • 参数名称为访问 url 时，拼接的参数名

    • 参数类型：
      • 常量：直接在后面的参数值中输入
      • 数据变量：与前文中的 url 时配置相同，在预览时自动获取表单字段组件的值

image.png
image.png
image.png

  • 此处注意参数传递
    • 自定义参数

image.png
image.png

部件弹窗

  • 通过部件弹窗，可以在对话框 / 抽屉中打开已经设计好的部件（表单、表格列表等)

image.png

  • 部分配置简易说明
    • 选择部件树：可以获取当前应用下所有已设计的部件，按类型区分
    • 弹窗设置：可以设置打开弹窗的属性，包括标题、大小、位置、是否开启遮罩等
    • 模式设置：目前在表单部件下起作用，详情模式下仅展示数据，不显示输入框

  • 参数说明

    • 部件弹窗支持携带参数打开，以在表格列表中使用为例
    • 我们需要配置操作列点击时，可以将此行的数据代入并展示

    • image.png

    • 配置操作列回调函数

    • image.png
    • 参数名称：打开表单的组件唯一标识
    • 参数值：当前表格列表数据集的某一个字段，该字段的数据会填充到对应表单的组件中
  • 预览模式下查看效果

image.png
详情模式
image.png
编辑模式
image.png

内置动作：弹窗操作

弹窗操作只能在页面设计器下进行
在页面设计器下添加按钮和对话框，对话框初始设置为隐藏，为按钮添加显示弹窗事件
image.png
为按钮绑定打开弹窗
image.png
预览模式下，点击按钮，可以打开弹窗

内置动作：组件操作

略

自定义JS

自定义Js 面板支持自己编写 js 代码，js 代码至少为一个可执行函数
例：
可以在控制台输出文本

  1. function test() {
  2.     console.log("测试自定义JS");
  3. }

image.png
注：
自定义 js 面板不包含校验机制，代码报错仅会在控制台打印 warn 提示信息
image.png

页面JS

image.pngimage.png

  • 动作面板中通过 export function 导出的函数名，会在动作面板中被识别
  • 在动作弹窗中新增动作，会在动作面板添加一个空的函数，格式如：export function xxx() {}
  • 可以在页面JS中绑定要执行的函数，并设置参数

image.png
image.png

  • 通过 this.params 获取参数
  • 动作面板中的方法，没有通过 export 导出，可以使用 this 访问 (有bug，待修复)

image.png

动作弹窗输入内容校验

  1. 页面JS

image.png
image.png

  • 新动作名称必填
  • 参数设置：格式为 JSON 类型 (可以被 JSON.parse 解析的内容)
    1. 其他
    • 页面跳转部分和自定义 JS 代码部分未添加校验