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

阅读之前

你应该:

名词解释

  • 字段组件:为字段提供交互能力的组件,一个字段对应一个组件。
  • 关联关系字段:在模型中与其他模型建立关联关系的字段。
  • 可选项:选择组件使用的具体选项,可以是静态的,也可以是动态的。
  • 选中:用户在使用选择组件时,针对某一选项标记或提取这一选项。

概述

本章内容主要是对【界面设计器】左树右表内容中提及的字段相关内容的补充,并非完整教程,有不清楚的地方可以交替阅读进行理解。

场景

沿用【界面设计器】左树右表中的两个场景。

我们可以做出这些优化:

将【商品类目】的【上级类目】组件改为【级联】组件。其第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接口依次获取其子节点。在编辑页面,我们通过fetchAllreverselyQueryreverselyQueryWithSize这三个接口获取回填的数据,根据不同情况进行调用。虽然使用来不同的接口,但最终都会使用当前模型的queryPage接口获取数据。

Oinone社区 作者:oinone原创文章,如若转载,请注明出处:https://doc.oinone.top/install/64.html

访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验

(0)
oinone的头像oinone
上一篇 2023年6月20日 pm4:07
下一篇 2023年11月2日 pm1:58

相关推荐

  • 如何更新升级docker中的设计器版本

    升级docker中的设计器版本 1.升级docker 1.1 修改结构包中startup.sh中对应的新版本号 结构包文件夹以及文件说明 – oinone-op-ds-all-full – config:Java启动的application.yml以及证书等 – lib:额外启动jar包 – logs:Java日志 – mq:mq的中间件broker.conf – nginx:nginx的配置文件 – run:可配置docker中启动的中间件 – startup.cmd:window启动脚本 – startup.sh:linux启动脚本 1.2 需要备份原oinone-op-ds-all-full中的mysql数据库 如果原先再安装的版本为full包含中间件的版本,删除原docker中的容器会清除所有的容器,需要备份数据库的数据 可使用navicat导出数据库 1.3 停止容器,并删除容器 docker ps -a #查询到对应容器的id 如 283747263 docker stop 283747263 docker rm 283747263 1.4 更新docker镜像版本 #启动脚本 sh startup.sh tail -200f logs/2024-01-26.0.log 1.5 启动新版本docker #启动脚本 sh startup.sh #查看日志 tail -200f logs/2024-01-26.0.log 2.业务项目工程中的平台jar版本 2.1 更新业务工程的主pom.xml中平台版本包 根据提供的版本更新日志,更新对应的平台jar包 2.2 更新maven,重启业务工程

    2024年2月28日
    1.2K00
  • 表格字段配置Switch开关

    在业务开发中,我们经常会遇到表格中有个Switch开关组件: 那么如何通过界面设计器配置这个组件呢,下面让我们一起来学习下吧。 设计布尔类型的组件 1: 首先在界面设计器的组件区域添加一个组件。 2: 我们给这个组件添加一个元件,元件的配置必须跟下面的一致 3: 给元件添加属性配置 拖拽一个单行文本字段, 字段编码必须是truthyAction,代表的是该字段为true的时候要执行的动作 再拖拽一个单行文本字段, 字段编码必须是falsyAction,代表的是该字段为false的时候要执行的动作 4: 发布元件,然后再去对应的界面设计器页面,将对应的字段切换成刚刚设计的组件 5: 发布界面设计器,染红我们可以在运行时的页面看到效果 当switch切换的时候,会执行对应的action

    2023年11月21日
    1.8K00
  • 数据可视化-图表在业务页面如何加动态查询条件

    前提 阅读此文章前,默认读者已了解了界面设计器和数据可视化的基本操作图表基础操作文档 1.新建一个表单视图,要求表单的模型里有动态查询条件的字段 从左侧组件库找到“图表”组件,拖入到视图区域,在右侧属性面板选择已经发布过的图表 2.将“组件库”->“模型”下的查询条件字段拖入到视图区域,然后再选择图表,设置图表组件属性面板内的“查询条件” 查询条件为rsql语法,里面的变量需要用${}包裹起来,其中的activeRecord为当前视图的数据对象,下图中的activeRecord.field000015为推荐导购员的对象,我们拿了这个对象的id传到查询条件内 3.绑定菜单后,可以去运行时页面查看效果 通过浏览器的开发者工具,我们可以看到,选中导购员后查询条件发生了改变,页面的数据也同步发生了变化

    2024年8月28日
    1.6K00
  • 数据可视化的导入导出

    目录 依赖包安装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.0K00
  • 集成开放-开放接口如何鉴权加密

    使用前提 已经阅读过文档【oinone 7天从入门到精通】的6.2章节-集成平台 已经依赖了内置模块集成平台eip和集成设计器eip_designer 一、为调用方创建应用 方式一: 通过集成设计器创建 可以选择开发接口列表中哪些接口授权该应用开放使用 方式二: 通过手动请求创建 curl –location 'http://127.0.0.1:8190/pamirs/eip' \ –header 'Content-Type: application/json' \ –header 'Cookie: pamirs_uc_session_id=3b3ed2fcade84fc49f2d94146a7694a0' \ –data '{"query":"mutation {\n eipApplicationProxyProxyMutation {\n create(data: {name: \"testOpen\", encryptType: RSA, description: \"test\"}) {\n name\n encryptType\n description\n openInterfaceList {\n name\n interfaceName\n id\n }\n appKey\n }\n }\n}\n","variables":{}}' 应用创建完成后,可以在表格页面开启使用,再通过查看密钥拿到appKey和appSecret 创建成功后可以获取到应用的appKey和appSecret 二、根据appKey和appSecret获取accessToken curl –location 'http://127.0.0.1:8094/openapi/get/access-token' \ –header 'Content-Type: application/x-www-form-urlencoded' \ –data-urlencode 'appKey=c65a8d76a93f4427b3702c55903ddda2' \ –data-urlencode 'appSecret=W2cMGZ0X6Av0kQOoKT4TWTaBalXkGsignr1M0Yi7+JJWJHVniiTz2mb9THGA7W5F' 三、验证请求 header中的signature签名参数在使用代码调用的时候需要使用教程中的SignUtil.signTopRequest()工具方法生成 curl –location 'http://127.0.0.1:8094/openapi/pamirs/queryById4Open' \ –header 'accessToken: T1SSd8aiJCFhsTyQepLCzRqcVsDH3wTjg9srXEZTp/QwsXdMnjf5OE1Nq/UYfEDp' \ –header 'signature: A1A958E1843E26BA002901058B2964C3' \ –header 'Content-Type: application/json' \ –data '{ "id": "111" }' 示例代码 eip开放接口md5加密参数示例代码此为md5加密方式的示例,解压后,将里面api目录下的文件复制到自有主工程的api子工程下,core目录下的文件复制到自有主工程的core子工程下

    2024年5月31日
    92500

Leave a Reply

登录后才能评论