阅读此文章前，默认读者已了解了界面设计器和数据可视化的基本操作
图表基础操作文档
从左侧组件库找到“图表”组件，拖入到视图区域，在右侧属性面板选择已经发布过的图表
查询条件为rsql语法，里面的变量需要用
${}包裹起来，其中的activeRecord为当前视图的数据对象，下图中的activeRecord.field000015为推荐导购员的对象，我们拿了这个对象的id传到查询条件内
通过浏览器的开发者工具，我们可以看到，选中导购员后查询条件发生了改变，页面的数据也同步发生了变化
Oinone社区 作者：nation原创文章，如若转载，请注明出处：https://doc.oinone.top/designer/16623.html
访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验
连接器 点击连接器tab，进入连接器页面，默认选择应用 应用 点击新增应用资源，抽屉打开创建应用的表单 创建应用成功之后，点击应用卡片，进入应用详情页 点击新增API，出现新增API与新增webservice的选项 点击新增API或者新增webservice，抽屉打开新增页面，需设置api名称、url、描述、请求参数、响应结果等信息 数据库 点击数据库tab，切换至数据库列表页 点击新增db资源，抽屉打开新增页面 数据库创建完成之后，点击数据卡片，可进入数据库详情页 点击新增API，抽屉打开新增页面，新增页面包含API名称、描述、请求参数、数据库操作、响应结果等内容（注意：响应结果中的取值表达式的值为查询结果中的列名，如列名取了别名，就写别名，截图有例子） 数据流程 点击数据流程tab进入数据流程列表页 点击创建流程，选择应用之后，点击创建，进入数据流程创建页 点击名称处的编辑操作可设置流程名称 触发-定时触发 点击触发节点，选择定时触发 设置好定时信息之后，点击保存（到定时时间之后会自动触发流程） 触发-消息触发 点击触发节点，触发方式选择消息触发，输入消息标识，设置参数（触发时根据消息标识触发，如果存在两个相同的消息标识，那触发时两个都会触发） 设置完成参数之后，点击确定 再点击保存，触发设置完成 消息触发的方式，可直接调用接口，或者写入到代码中触发，以下为接口触发方式 先调用登录接口 再调用消息触发接口（msgId为消息标识） 点击加号可添加节点，可选择API、新增数据、更新数据、获取数据、删除数据、更新流程参数、引用逻辑、延时、条件分支、子流程、循环、站内信、邮件、短信等节点 API节点 点击API节点 点击节点可设置节点名称 输入节点名称 点击节点设置，进入设置页面 先选择资源应用，再选择API（资源应用的数据为连接器创建的数据） 设置赋值表达式（当字段为必填，且无默认值时，赋值表达式必填） 设置完成点击，保存 API的响应结果可作为下个节点的参数 提示：当参数类型为对象非数组时，赋值表达式配置在对象的下个层级中，当参数类型为对象数组时，赋值表达式配置在对象中，具体见如下图片 对象非数组 对象数组 ### 循环节点-列表循环 设置循环节点 #### 设置循环列表 设置完成，点击保存（循环次数为获取的数据条数） 循环里面可添加节点 设置循环里面的节点，如选择新增节点，点击新增节点之后，选择应用，模型数据保存方式，点击创建 字段的表达式可选择循环节点的参数 设置完内容之后，点击保存 #### 循环节点-次数循环 点击循环节点，循环模式选择次数循环 循环开始值、结束值、步长，可通过表达式选择数字类型的，也可自己手动输入 设置完成之后，点击保存 ### 更新流程参数 第一步先进行流程配置 点击添加新参数 参数类型支持四种，文本、数值、日期（日期时间）、布尔 输入参数名称之后点击保存 保存成功之后，再切换至流程设计 第二步添加更新流程参数节点 第三步设置流程参数节点 进入节点设置之后，点击添加参数 选择参数，给参数赋值（注意布尔类型的值，直接输入ture或者false） 参数值设置完成之后点击保存 设置的参数可用于下个节点的赋值表达式中（如更新数据节点） 设置完成点击保存 ### 引用逻辑 添加引用逻辑节点 设置引用逻辑节点 选择应用、模型、函数，设置参数 配置表达式，配置完成，点击确定 节点信息设置完成之后，点击保存 ### 新增数据、更新数据、获取数据、删除数据、延时、条件分支、子流程、循环、站内信、邮件、短信节点与流程设计器用法一致 流程发布 流程设置完成之后，点击发布流程（如果是定时触发，将会到触发时间自动触发，如果是消息触发，当发送对应消息时触发，具体见上文中写的触发-消息触发）
阅读之前 你应该： 熟悉模型的增删改查相关内容。【界面设计器】模型增删改查基础 概述 他表字段是一种可以从关联关系字段中取出对应字段，并平铺在当前模型中的特殊字段。本质上是具有固定【计算公式】的字段。 其主要用于解决GQL在获取关联关系字段时层级过深的问题（非存储的他表字段），也可以用于解决字段冗余的数据同步问题（存储的他表字段）。 这里需要注意的一点是，他表字段的数据同步能力是在客户端进行处理的。无法完全保证数据同步的一致性。 场景描述 为了方便接下来的描述，我们需要先构建一个基本的业务场景，这个场景中包含【商品】、【商品订单】以及【商品订单明细】三个模型。 创建/编辑【商品订单明细】时使用【商品】，【商品】下拉选项中使用【商品编码】 – 【商品名称】格式展示。 在【商品订单明细】展开的表格中展示【商品编码】和【商品名称】，而不是使用【商品】。 其模型定义如下： 商品（Item） 名称 API名称 业务类型 是否多值 长度(单值长度) 关联模型 关联字段 ID id 整数 否 – – – – 编码 code 文本 否 128 – – – 名称 name 文本 否 128 – – 商品订单（ItemOrder） 名称 API名称 业务类型 是否多值 长度(单值长度) 关联模型 关联字段 ID id 整数 否 128 – – 编码 code 文本 否 128 – – – 订单明细 details 一对多 是 – 商品订单明细（ItemOrderDetail） id – orderId 商品订单明细（ItemOrderDetail） 名称 API名称 业务类型 是否多值 长度(单值长度) 关联模型 关联字段 ID id 整数 否 128 – – 订单 order 多对一 否 – 商品订单（ItemOrder） orderId – id 订单ID orderId 整数 否 – – – 商品 item 多对一 否 – 商品（Item） itemId – id 商品ID itemId 整数 否 – – – 数量 count 整数 否 – – – 准备工作 根据模型定义，我们要为【商品】和【商品订单】创建基本的增删改查操作，以此来进行我们接下来的步骤。 （下面仅展示了一些特殊页面，其他页面与基础的增删改查页面没有明显差别） 设计商品订单【表单】视图 将订单明细拖放至页面中，并使用【组件切换】功能将当前的【下拉多选】组件切换至【表格】组件。 对订单明细所展开的【内嵌表格】进行设计。将【商品】和【数量】两个字段放入表格中。 设计创建和编辑使用的弹窗视图。（两个按钮都需要设计，这里仅演示创建按钮的设计过程） 小贴士： 点击弹窗右上角的X可关闭弹窗设计页面。 左侧【组件库】-【模型】中展示的【当前模型】在选中【订单明细】字段以及它内部的字段或动作时会变为【商品订单明细】关联模型。要想继续设计【商品订单】模型，需要选中任意一个不在【订单明细】字段范围内的组件。在当前视图中可以选中【编码】字段切换至【商品订单】模型。 多模型视图的设计总是需要关注【当前模型】这一信息的。 创建他表字段 目前仅能在界面设计器中通过他表字段组件创建他表字段，在低代码中使用Related定义他表字段。 拖入他表字段，创建【商品编码】字段 拖入他表字段，创建【商品名称】字段 隐藏表格中的【商品】字段 PS：由于他表字段本质上是通过引用的方式取得对象中的值，所以此处不能将该字段直接移除，而是需要隐藏。 在创建/编辑弹窗中添加他表字段并隐藏 PS：内嵌表格的创建/编辑功能同样会根据元数据进行裁剪，因此要想保证【商品编码】和【商品名称】被正确回填到表格中，这一步骤是必须的。并且为了避免由于使用不同字段导致无法回填的问题，你需要从【组件库】-【模型】中重复使用字段，而不是从【组件】拖入。这并非是他表字段的特性，而是所有内嵌表格都只能通过这种方式进行数据回填。
该功能依赖应用环境(designer_metadata)模块, 请确保体验环境的后端yml配置有该依赖 一 产品功能说明 设计同步部署 设计同步部署功能实现不同环境设计数据一键同步的目标，即将A环境设计完成的模型、界面、等设计数据一键部署至B环境。使用此功能，需要在‘应用中心’安装‘应用环境’：‘应用环境’安装完成，进入发起同步部署环境——>业务应用——>‘应用环境’，对要进行快速部署的发起环境、目标环境进行配置：在进行多个环境同步部署设计数据时，必须正确配置发起环境、目标环境。完成配置后，在应用中心，选择目标‘已安装’应用，在操作下拉菜单选择待部署设计类型，即可按照指引完成操作： 设计导出 设计导出功能具备将已安装应用所属（应用技术名称）设计元数据，如模型、界面、流程、集成设计、数据可视化导出为json文件的能力，具备筛选导出、一键导出两种方式以满足不同业务场景需要。目标是实现在多个环境通过技术接口调用、或通过应用中心导入界面完成导入，使设计元数据在不同环境之间快速迁移同步： :::info 因平台允许多个应用名称相同，能够唯一定位具体应用使用的是‘应用技术名称’，因此识别应用标识的依据为应用技术名称。::: 设计导入 迁移导入 对于已导出设计元数据json文件，如果导出类型为‘迁移导出’，可以在不同环境，通过应用中心——>已安装应用——>设计导入（迁移），实现设计数据导入： 标品导入 对于导出类型为‘标品导出’的设计元数据，目前只支持通过技术接口形式完成导入，暂不支持界面进行可视化导入操作。 导出导入任务 不同环境设计元数据以导入json文件方式进行迁移的基础是设计导出，基于界面导入实现设计元数据在不同环境进行迁移场景、或通过技术接口导入以实现标品升级的场景，存在导出类型为迁移导出、标品导出的区别。使用此功能的操作者需要依据实际需求场景进行相应导出类型的选择。 导出任务查看 对于已经执行导出的任务，可通过‘应用环境——>设计导出’查看导出任务信息： 导入任务查看 对于已经执行导入的任务，可通过‘应用环境——>设计导入’查看导入任务状态、进度、详细信息： 部署任务 部署任务功能用于查看设计数据同步部署功能任务状态、详细信息；分为发起环境任务查看、目标环境任务查看。无论是发起环境，或是目标环境，均通过所属环境‘应用环境’中‘部署任务’功能进行查看： 二 产品功能操作手册 设计导出 环境迁移导出 点击‘业务应用——>应用中心’，进入应用中心，默认显示‘应用列表’标签页：选择‘已安装’应用——>操作，出现操作菜单：选择‘设计导出’，显示支持导出的各设计项： 模型导出 操作菜单选择‘模型导出’：打开模型导出信息弹窗：在弹窗页中存在要素信息项及操作项： 导出类型：选择‘迁移导出’。 文件名称：默认为‘应用名称+设计类型’。 导出模式：异步模式，不可修改。 导出格式：JSON文件，不可修改。 一键导出：操作项，直接导出当前应用下的所有无代码模型，不需要筛选。 筛选导出：操作项，进入无代码模型导出筛选页，选择要导出的设计数据。 一键导出 点击‘一键导出’，关闭弹窗，回到应用中心，右上角出现导出进行中提示信息：导出任务状态信息、导出任务详细信息查看方式参见《1.3 设计导出/导出任务查看》。 筛选导出 点击‘筛选导出’，进入无代码模型导出筛选页：筛选页面按照‘模型类型’、‘可用/废弃’、‘来源’选择或输入查找条件，点击‘搜索’，进行条件搜索，查找满足条件无代码模型：点击‘重置’按钮，清空已输入查找条件：点击列表标题栏勾选框，可进行全选/取消全选操作，全选——选择全部模型，取消全选——取消所有已勾选项：勾选要导出模型，点击‘导出’按钮：回到应用中心，右上角提示导出信息：导出任务状态信息、导出任务详细信息查看方式参见《1.3 设计导出/导出任务查看》。 界面导出 ‘业务应用——>应用中心’，进入应用中心，选择已安装应用——>操作——>设计导出——>界面导出，弹出界面导出信息项弹窗，‘导出类型’选择‘迁移导出’： 一键导出 点击‘一键导出’，关闭弹窗，回到应用中心，右上角出现导出进行中提示信息：界面导出会将所选菜单项、菜单目录路径、菜单绑定页面、页面使用的自定义组件全部导出为json文件。导出任务状态信息、导出任务详细信息查看方式参见《1.3 设计导出/导出任务查看》。 筛选导出 点击‘筛选导出’，进入应用环境——>界面导出筛选页面，显示当前应用下所有菜单项：查询项‘菜单名称’输入名称，点击‘搜索’按钮，进行模糊查找匹配的菜单项：点击‘清除’按钮，清除已输入的查询内容：勾选菜单项后，点击‘导出’按钮：回到应用中心页面，同时页面右上角提示导出进行中信息：界面导出会将所选菜单项、上级菜单目录项、菜单绑定页面、页面使用的自定义组件全部导出为json文件。导出任务状态信息、导出任务详细信息查看方式参见《1.3 设计导出/导出任务查看》。 流程导出 点击‘业务应用——>应用中心’，进入应用中心，选择已安装应用——>操作——>设计导出——>流程导出，弹出导出信息弹窗：‘导出类型’选择‘迁移导出’。 一键导出 点击‘一键导出’：关闭弹窗，回到应用中心，右上角出现导出进行中提示信息：一键导出流程数据会按照应用技术名称，将当前应用下所有流程、元数据、涉及的业务数据如审批用户、角色等全部导出为json文件。导出任务状态信息、导出任务详细信息查看方式参见《1.3 设计导出/导出任务查看》。 筛选导出 点击‘筛选导出’：进入流程数据筛选页面，显示当前应用（技术名称）下所有已发布流程：支持按照流程名称（模糊匹配）、触发方式（模型触发、定时触发、日期触发、子流程）进行筛选；输入筛选条件，点击搜索按钮，查找匹配结果：点击‘清除’按钮，清空筛选内容：勾选列表流程项，点击‘导出’按钮：返回应用中心，同时页面右上角提示导出信息：流程导出会将应用（技术名称）下的所有已发布流程及相关元数据、业务数据全部导出为json文件。导出任务状态信息、导出任务详细信息查看方式参见《1.3 设计导出/导出任务查看》。 集成导出 点击‘业务应用——>应用中心’，进入应用中心，选择已安装应用——>操作——>设计导出——>集成导出，弹出集成导出信息项弹窗，‘导出类型’选择‘迁移导出’： 一键导出 点击‘一键导出’，关闭弹窗，回到应用中心，右上角出现导出进行中提示信息：一键导出集成数据会按照应用技术名称，将所有已发布数据流程；以及所有已启用连接器（与应用无关）、已启用开放接口（与应用无关）全部导出为json文件。导出任务状态信息、导出任务详细信息查看方式参见《1.3 设计导出/导出任务查看》。 筛选导出 点击‘筛选导出’：进入集成数据筛选页面，默认显示‘连接器’标签页——>应用（已启用）数据项列表：可选项： 连接器：应用（已启用状态）、数据库（已启用状态）、与应用无关。 数据流程：已发布状态，且属于发起导出应用（技术名称）下的数据流程。 开放平台：API接口（已启用状态）、与应用无关。 以上各项在列表中展示的数据均可勾选并支持导出为json文件：勾选列表数据项，点击‘导出’按钮：回到应用中心，右上角显示导出提示信息：导出任务状态信息、导出任务详细信息查看方式参见《1.3 设计导出/导出任务查看》。 数据可视化导出 点击‘业务应用——>应用中心’，进入应用中心，选择已安装应用——>操作——>设计导出——>数据可视化导出，弹出数据可视化导出信息项弹窗，‘导出类型’选择‘迁移导出’： 一键导出 点击‘一键导出’：关闭弹窗，回到应用中心，右上角出现导出进行中提示信息：一键导出数据可视化会将所有已发布图表（含路径目录）、报表（含路径目录）、数据大屏（含路径目录）、图表模版全部导出为json文件。导出任务状态信息、导出任务详细信息查看方式参见《1.3 设计导出/导出任务查看》。 筛选导出 点击‘筛选导出’：进入数据可视化筛选列表页面，默认显示‘图表’标签页，并展示已发布图表数据项列表：标签页： 图表：显示所有已发布状态图表，以树形结构展示，支持按照‘图表名称’模糊匹配查找。 报表：显示所有已发布状态报表，以树形结构展示，支持按照‘报表名称’模糊匹配查找。 数据大屏：显示所有已发布状态数据大屏，以树形结构展示，支持按照‘数据大屏名称’模糊匹配查找。 图表模版：显示所有图表模版，列表形式展示，支持按照‘图表名称’模糊匹配查找。 勾选列表数据项，点击‘导出’按钮：关闭弹窗，回到应用中心，右上角出现导出进行中提示信息：筛选导出数据可视化数据会将所有已发布图表（含路径目录）、报表（含路径目录）、数据大屏（含路径目录）、图表模版全部导出为json文件。导出任务状态信息、导出任务详细信息查看方式参见《1.3 设计导出/导出任务查看》。 标品导出 点击‘业务应用——>应用中心’，进入应用中心，点击‘应用列表’标签项；选择‘已安装’应用，点击操作，出现操作菜单：选择‘设计导出’，显示支持导出的各设计项： 模型导出 点击‘业务应用——>应用中心’，进入应用中心；点击已安装应用——>操作，出现操作菜单：选择‘设计导出——>模型导出’：打开导出信息弹窗： 一键导出 导出过程同《1.1.1.1 设计导出/环境迁移导出/模型导出/一键导出》，区别是标品导出json文件无法通过前端页面导入其它环境，只能通过技术接口导入。导出任务状态信息、导出任务详细信息查看方式参见《1.3 设计导出/导出任务查看》。 筛选导出 导出过程同《1.1.1.2 设计导出/环境迁移导出/模型导出/筛选导出》，区别是标品导出json文件无法通过前端页面导入其它环境，只能通过技术接口导入。导出任务状态信息、导出任务详细信息查看方式参见《1.3 设计导出/导出任务查看》。 界面导出 点击‘业务应用——>应用中心’，进入应用中心；选择已安装应用——>操作——>设计导出——>界面导出，‘导出类型’选择‘标品导出’： 一键导出 导出过程同《1.1.2.1 设计导出/环境迁移导出//界面导出/一键导出》，区别是标品导出json文件无法通过前端页面导入其它环境，只能通过技术接口导入。导出任务状态信息、导出任务详细信息查看方式参见《1.3 设计导出/导出任务查看》。 筛选导出 导出过程同《1.1.2.2 设计导出/环境迁移导出/界面导出/筛选导出》，区别是标品导出json文件无法通过前端页面导入其它环境，只能通过技术接口导入。导出任务状态信息、导出任务详细信息查看方式参见《1.3 设计导出/导出任务查看》。 流程导出 点击‘业务应用——>应用中心’，进入应用中心；选择已安装应用——>操作——>设计导出——>流程导出，‘导出类型’选择‘标品导出’： 一键导出 导出过程同《1.1.3.1 设计导出/环境迁移导出/流程导出/一键导出》，区别是标品导出json文件无法通过前端页面导入其它环境，只能通过技术接口导入。导出任务状态信息、导出任务详细信息查看方式参见《1.3 设计导出/导出任务查看》。 筛选导出 导出过程同《1.1.3.2 设计导出/环境迁移导出/流程导出/筛选导出》，区别是标品导出json文件无法通过前端页面导入其它环境，只能通过技术接口导入。导出任务状态信息、导出任务详细信息查看方式参见《1.3 设计导出/导出任务查看》。 集成导出 点击‘业务应用——>应用中心’，进入应用中心；选择已安装应用——>操作——>设计导出——>集成导出，‘导出类型’选择‘标品导出’： 一键导出 导出过程同《1.1.4.1 设计导出/环境迁移导出/集成导出/一键导出》，区别是标品导出json文件无法通过前端页面导入其它环境，只能通过技术接口导入。导出任务状态信息、导出任务详细信息查看方式参见《1.3 设计导出/导出任务查看》。 筛选导出 导出过程同《1.1.4.2 设计导出/环境迁移导出/集成导出/筛选导出》，区别是标品导出json文件无法通过前端页面导入其它环境，只能通过技术接口导入。导出任务状态信息、导出任务详细信息查看方式参见《1.3 设计导出/导出任务查看》。 数据可视化导出 点击‘业务应用——>应用中心’，进入应用中心；选择已安装应用——>操作——>设计导出——>数据可视化导出，‘导出类型’选择‘标品导出’： 一键导出 导出过程同《1.1.5.1 设计导出/环境迁移导出/数据可视化导出/一键导出》，区别是标品导出json文件无法通过前端页面导入其它环境，只能通过技术接口导入。导出任务状态信息、导出任务详细信息查看方式参见《1.3 设计导出/导出任务查看》。 筛选导出 导出过程同《1.1.5.2 设计导出/环境迁移导出/数据可视化导出/筛选导出》，区别是标品导出json文件无法通过前端页面导入其它环境，只能通过技术接口导入。导出任务状态信息、导出任务详细信息查看方式参见《1.3 设计导出/导出任务查看》。 导出任务查看 点击‘业务应用——>应用环境’，进入应用环境：点击‘设计导出’，显示导出任务信息列表：点击导出任务项操作栏‘详情’，进入导出任务详情查看页：点击‘关联文件’，可保存下载导出文件：点击‘返回’按钮：回到导出任务信息列表页。 设计导入 环境迁移导入 进入导入目标环境，点击‘业务应用——>应用中心’，进入应用中心；选择要导入设计数据的已安装应用： 模型导入 导入 选择‘模型导入’：打开导入文件上传信息弹窗：选择要导入的json文件：选择文件后，显示待导入文件：点击‘确定’按钮，执行设计数据迁移导入：如果选择的导入文件类型为非迁移导出文件，则右上方提示（其它设计类型迁移导入文件类型同此）：导入文件选择正确，点击确定后，右上角提示导入信息：点击‘设计器——>模型设计器’： 验证导入结果 进入导入环境模型设计器，查看导入数据是否已成功导入： 界面导入 导入 选择‘界面导入’：打开导入文件上传弹窗：选择要导入的json文件上传后，点击‘确定’按钮，关闭弹窗，右上角显示导入提示信息： 验证导入结果 进入界面设计器，检查导出数据是否正确导入： 流程导入 导入 选择‘流程导入’：打开导入文件上传弹窗页面：选择要导入的json文件上传后，点击‘确定’按钮，关闭弹窗，右上角显示导入提示信息： 验证导入结果 进入流程设计器，检查导出数据是否正确导入： 集成导入 导入 选择‘集成导入’：打开导入文件上传弹窗：选择要导入的json文件上传后，点击‘确定’按钮，关闭弹窗，右上角显示导入提示信息： 验证导入结果 进入集成设计器，检查导出数据是否正确导入。验证连接器：验证数据流程：验证开放接口： 数据可视化导入 导入 选择‘数据可视化导入’：打开导入文件上传弹窗：选择要导入的json文件上传后，点击‘确定’按钮，关闭弹窗，右上角显示导入提示信息： 验证导入结果 进入数据可视化，检查导出数据是否正确导入：验证图表：验证报表：验证数据大屏：验证图表模版： 设计导入任务查看 导入环境，点击‘业务应用——>应用环境’，进入应用环境；点击‘设计导入’：显示所有设计导入信息列表：点击‘详情’，查看设计导入详细信息：点击‘返回’按钮，回到导入信息列表展示页： 同步部署 部署环境管理 创建部署环境 选择：业务应用——>应用环境，进入应用环境；默认显示当前所有已配置环境： 删除部署环境配置 未勾选任何已配置部署环境时，删除按钮不可用：勾选一条或多条已配置环境信息，点击”删除“，可完成已配置部署环境删除： 编辑部署环境配置 点击部署环境配置项操作栏‘编辑’操作，进入部署环境配置项编辑页：支持对所有配置项数据进行修改编辑；其中标红项为必须，即不能为空，且名称不能重复。点击‘返回’按钮，放弃本次编辑，回到部署环境配置项列表页：点击‘确定’按钮，保存编辑内容，并回到部署环境配置列表展示页： 部署环境详情查看 点击部署环境配置项，操作栏‘详情’，进入部署环境配置项详情查看页面：点击‘返回’按钮，回到部署环境配置列表展示页： 确认部署目标环境配置 进入应用环境，点击‘部署环境配置’，显示当前已配置环境列表：检查是否已配置同步部署目标环境，如已存在，无需再次配置。 模型部署…
OioProvider OioProvider是平台的初始化入口。 示例入口 main.ts import { VueOioProvider } from '@kunlun/dependencies'; VueOioProvider(); 网络请求/响应配置 http 平台统一使用apollo作为统一的http请求发起服务，并使用GraphQL协议作为前后端协议。 参考文档： apollo-client graphql 配置方式 VueOioProvider({ http?: OioHttpConfig }); OioHttpConfig /** * OioHttp配置 */ export interface OioHttpConfig { /** * base url */ url: string; /** * 拦截器配置 */ interceptor?: Partial<InterceptorOptions>; /** * 中间件配置（优先于拦截器） */ middleware?: NetworkMiddlewareHandler | NetworkMiddlewareHandler[]; } 内置拦截器可选项 InterceptorOptions /** * 拦截器可选项 */ export interface InterceptorOptions { /** * 网络错误拦截器 */ networkError: NetworkInterceptor; /** * 请求成功拦截器 (success) */ requestSuccess: NetworkInterceptor; /** * 重定向拦截器 (success) */ actionRedirect: NetworkInterceptor; /** * 登录重定向拦截器 (error) */ loginRedirect: NetworkInterceptor; /** * 请求错误拦截器 (error) */ requestError: NetworkInterceptor; /** * MessageHub拦截器 (success/error) */ messageHub: NetworkInterceptor; /** * 前置拦截器 */ beforeInterceptors: NetworkInterceptor | NetworkInterceptor[]; /** * 后置拦截器 */ afterInterceptors: NetworkInterceptor | NetworkInterceptor[]; } 内置拦截器执行顺序: beforeInterceptors：前置拦截器 networkError：网络错误 actionRedirect：重定向 requestSuccess 请求成功 loginRedirect：登录重定向 requestError：请求错误 messageHub：MessageHub afterInterceptors：后置拦截器 NetworkInterceptor /** * <h3>网络请求拦截器</h3> * <ul> * <li>拦截器将按照注册顺序依次执行</li> * <li>当任何一个拦截器返回false时，将中断拦截器执行</li> * <li>内置拦截器总是优先于自定义拦截器执行</li> * </ul> * */ export interface NetworkInterceptor { /** * 成功拦截 * @param response 响应结果 */ success?(response: IResponseResult): ReturnPromise<boolean>; /** * 错误拦截 * @param response 响应结果 */ error?(response: IResponseErrorResult): ReturnPromise<boolean>; } 自定义路由配置 router 配置方式 VueOioProvider({ router?: RouterPath[]…
在平台默认的实现中，rootRecord 代表的是根视图的数据。比如，在表格页面点击按钮打开了弹窗，弹窗里面包含一个表单视图，但是该视图获取 rootRecord 却是最外层的视图数据。 如果期望 rootRecord 数据是弹窗的视图数据，需要手动修改表单的 rootRecord。下面的代码演示了如何重写 rootData 以确保其数据是弹窗的数据： @SPI.ClassFactory( BaseElementWidget.Token({ viewType: ViewType.Form, widget: 'MyCustomFormWidgetFormWidget' }) ) export class MyCustomFormWidgetFormWidget extends FormWidget { @Widget.Reactive() @Widget.Provide() public get rootData(): any[] | undefined { return this.activeRecords; } } 上述代码重写了 rootData，这样就可以确保 rootData 的数据是弹窗的数据。 接下来就是注册： registerLayout( ` <view type="FORM"> <element widget="actionBar" slot="actionBar" slotSupport="action"> <xslot name="actions" slotSupport="action" /> </element> <element widget="MyCustomFormWidgetFormWidget" slot="form"> <xslot name="fields" slotSupport="pack,field" /> </element> </view> `, { viewType: ViewType.Form, model: '弹窗模型', viewName: '弹窗视图名称' } )
