数据可视化-图表在业务页面如何加动态查询条件

相关推荐

• 设计器

  【界面设计器】他表字段

  阅读之前 你应该： 熟悉模型的增删改查相关内容。【界面设计器】模型增删改查基础 概述 他表字段是一种可以从关联关系字段中取出对应字段，并平铺在当前模型中的特殊字段。本质上是具有固定【计算公式】的字段。 其主要用于解决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：内嵌表格的创建/编辑功能同样会根据元数据进行裁剪，因此要想保证【商品编码】和【商品名称】被正确回填到表格中，这一步骤是必须的。并且为了避免由于使用不同字段导致无法回填的问题，你需要从【组件库】-【模型】中重复使用字段，而不是从【组件】拖入。这并非是他表字段的特性，而是所有内嵌表格都只能通过这种方式进行数据回填。

  oinone

  2023年11月1日

  1.5K000
• 前端

  自定义的复杂字段配置透出字段

  学习这篇文章之前，需要先学会使用在界面设计器自定义一个前端组件，如果您还不会，可以先看这篇文章 默认情况下，当开前端发人员自定义了一个复杂字段，比如M2O、O2M、M2M的字段，那么Graphql查询的时候，只会查询id跟name这两个字段，如果还想查询字段的字段，那么可以通过配置化的方式来处理 1: 在界面设计器的组件区域中新增对应的字段 2: 设计元件，在模型区域中搜索选项字段列表，拖到设计区域，然后保存 3: 去对应的设计页面，刷新下页面，选中对应的字段，可以看到右侧有选项字段列表4: 输入期望Graphql查询字段，保存发布

  汤乾华

  2023年11月9日

  1.5K001
• 数据可视化

  数据可视化的导入导出

  目录 依赖包安装GraphQL的工具登录gql导出生成json文件子业务工程中导入示例代码 简介 通过调用导出接口，将设计器的设计数据与元数据打包导出到文件中。提供了download/export两类接口。 依赖包 <dependency> <groupId>pro.shushi.pamirs.metadata.manager</groupId> <artifactId>pamirs-metadata-manager</artifactId> </dependency> 安装GraphQL的工具 下载官网地址：https://github.com/Kong/insomnia/releases 登录gql 示例调用代码 mutation { pamirsUserTransientMutation { login(user: { login: "admin", password: "admin" }) { needRedirect broken errorMsg errorCode errorField } } } 导出生成json文件 执行GraphQL，直接返回导出数据。适用于通过浏览器直接下载文件。 全部导出 请求示例： mutation { dataDesignerExportReqMutation { export(data: { fileName: "datavi_data" }) { jsonUrl } } } 指定图表导出 请求示例： mutation { dataDesignerExportReqMutation { export(data: { chartCode: "CT00000000002000", fileName: "datavi_data" }) { jsonUrl } } } 对应chartCode为图表的编码code，可通过查询数据库来获得 指定报表导出 请求示例： mutation { dataDesignerExportReqMutation { export(data: { reportCode: "RP00001000", fileName: "datavi_data" }) { jsonUrl } } } 对应reportCode为报表的编码code，可通过查询数据库来获得 指定业务大屏导出 请求示例： mutation { dataDesignerExportReqMutation { export(data: { screenCode: "DS00001000", fileName: "datavi_data" }) { jsonUrl } } } 对应screenCode为数据大屏的编码code，可通过查询数据库来获得 业务工程中导入示例代码 导入元数据示例代码 @Slf4j @Order(Integer.MAX_VALUE-1) @Component public class DemoModuleAppInstall implements MetaDataEditor, LifecycleCompletedAllInit { //流程设计器导出的页面元数据json private static final String INSTALL_DATAVI_META_PATH = "install/datavi_data.json"; @Override public void edit(AppLifecycleCommand command, Map<String, Meta> metaMap) { if(StringUtils.isBlank(INSTALL_DATAVI_META_PATH)) return; log.info("开始安装-元数据"); try { InitializationUtil util = InitializationUtil.get(metaMap, DemoModule.MODULE_MODULE, DemoModule.MODULE_NAME); if (null != util) { // 设计器的元数据 if(StringUtils.isNotBlank(INSTALL_DATAVI_META_PATH)) { log.info("开始安装图表元数据"); DesignerInstallHelper.mateInitialization(util, INSTALL_DATAVI_META_PATH); } } } catch (Exception e) { log.error("图表设计器元数据导入异常", e); } } @Override public void process(AppLifecycleCommand command, Map<String, ModuleDefinition> runModuleMap) {…

  数式-海波

  2024年5月16日

  2.0K000
• 设计器

  元数据多环境在线发布功能说明

  该功能依赖应用环境(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文件上传后，点击‘确定’按钮，关闭弹窗，右上角显示导入提示信息： 验证导入结果 进入数据可视化，检查导出数据是否正确导入：验证图表：验证报表：验证数据大屏：验证图表模版： 设计导入任务查看 导入环境，点击‘业务应用——>应用环境’，进入应用环境；点击‘设计导入’：显示所有设计导入信息列表：点击‘详情’，查看设计导入详细信息：点击‘返回’按钮，回到导入信息列表展示页： 同步部署 部署环境管理 创建部署环境 选择：业务应用——>应用环境，进入应用环境；默认显示当前所有已配置环境： 删除部署环境配置 未勾选任何已配置部署环境时，删除按钮不可用：勾选一条或多条已配置环境信息，点击”删除“，可完成已配置部署环境删除： 编辑部署环境配置 点击部署环境配置项操作栏‘编辑’操作，进入部署环境配置项编辑页：支持对所有配置项数据进行修改编辑；其中标红项为必须，即不能为空，且名称不能重复。点击‘返回’按钮，放弃本次编辑，回到部署环境配置项列表页：点击‘确定’按钮，保存编辑内容，并回到部署环境配置列表展示页： 部署环境详情查看 点击部署环境配置项，操作栏‘详情’，进入部署环境配置项详情查看页面：点击‘返回’按钮，回到部署环境配置列表展示页： 确认部署目标环境配置 进入应用环境，点击‘部署环境配置’，显示当前已配置环境列表：检查是否已配置同步部署目标环境，如已存在，无需再次配置。 模型部署…

  shao

  2024年8月8日

  1.8K000
• 设计器

  【界面设计器】树下拉/级联

  阅读之前 你应该： 熟悉模型的增删改查相关内容。【界面设计器】模型增删改查基础 了解联动关系的相关内容。【界面设计器】左树右表 名词解释 字段组件：为字段提供交互能力的组件，一个字段对应一个组件。 关联关系字段：在模型中与其他模型建立关联关系的字段。 可选项：选择组件使用的具体选项，可以是静态的，也可以是动态的。 选中：用户在使用选择组件时，针对某一选项标记或提取这一选项。 概述 本章内容主要是对【界面设计器】左树右表内容中提及的字段相关内容的补充，并非完整教程，有不清楚的地方可以交替阅读进行理解。 场景 沿用【界面设计器】左树右表中的两个场景。 我们可以做出这些优化： 将【商品类目】的【上级类目】组件改为【级联】组件。其第1级为【商品类目】，使用自关联依次展开。 将【部门】的【上级部门】组件改为【树下拉】组件。其第1级为【公司】，第2级为【部门】，【部门】使用自关联依次展开。 PS：本章不提供任何步骤介绍，请根据场景内容自行探索。 扩展知识 具备选择行为的组件 常用的选择组件可以进行一些基本的划分。 从可选数量来看 单选：只能选一个值。 多选：可以选择多个值。 从业务类型来看 枚举(Enum)：通过数据字典提供可选项。 布尔(Boolean)：可以看作一个特殊的枚举，其可选范围只有是和否。 一对一(O2O)和多对一(M2O)：对一(X2O)类型仅支持单选，通过关联模型的数据源提供可选项。 一对多(O2M)以及多对多(M2M)：对多(X2M)类型仅支持多选，通过关联模型的数据源提供可选项。 从交互形态来看 单选框(Radio) 多选框(Checkbox) 下拉选择(Select) 树下拉(TreeSelect) 级联(Cascader) 其中，树下拉(TreeSelect)和级联(Cascader)组件要求数据源可以构成树结构，因此通常使用这两个字段组件的都是关联关系字段。 下拉选择(Select) 在介绍树下拉/级联之前，我们有必要先了解一下在关联关系字段中使用下拉选择(Select)这一字段组件的表现情况。 根据关联关系字段对应的关联模型，我们可以获得其组件所需的可选项，在用户进行选中后，该组件将获得一个选项值，并且在表单提交、计算公式等被使用。 通常情况下，我们通过queryPage接口获取分页后的可选项列表，再通过点击/滚动方式获得其他页的可选项供用户选择。 树下拉(TreeSelect)/级联(Cascader) 与上述介绍的下拉选择(Select)不同点在于，其可选项是通过【联动关系】配置进行获取的，它并不要求直接获取到真正可以被选择的可选项，而是通过树结构依次展开的。用户可选择的可选项一定是与关联关系字段对应的关联模型相同的树节点。对于无法选择的节点，其主要作用在于将数据进行划分，以便于用户进行选择。 由于树节点具备特殊性，无法直接使用平台的任何一个模型。因此树结构被定义在UiTreeNode模型中，该模型是描述树结构的基本模型，其提供了多个接口为树结构的查询提供了基本能力。 通常情况下，在创建页面，我们通过UiTreeNode模型的fetchChildren接口依次获取其子节点。在编辑页面，我们通过fetchAll、reverselyQuery、reverselyQueryWithSize这三个接口获取回填的数据，根据不同情况进行调用。虽然使用来不同的接口，但最终都会使用当前模型的queryPage接口获取数据。

  oinone

  2023年11月1日

  1.8K000