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

阅读之前

你应该:

名词解释

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

概述

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

场景

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

我们可以做出这些优化:

将【商品类目】的【上级类目】组件改为【级联】组件。其第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启动说明(5.1.0)

    1. 安装docker 1.1 Linux内核系统(以CentOS7为例) 1.1.1 检查防火墙 查看防火墙是否开启 systemctl status firewalld 如防火墙处于开启状态 有2种处理方式,选择其中一种,开发环境如内网环境建议选择处理方案1 处理方案1:停止防火墙 systemctl stop firewalld 处理方案2:开放docker镜像内置中间件透出的端口 88:web访问端口 8099:后端Java服务端口 19876:rocketmq的namesrv端口: 6378:缓存redis的端口 3307:数据库mysql的端口 2182:zookeeper的端口 20880:dubbo的通信端口 10991:rocketmq的broker端口 查看防火墙已经开放的端口 firewall-cmd –list-ports 防火墙新增开放端口示例: firewall-cmd –permanent –zone=public –add-port=88/tcp 新增以后生效需要重新加载防火墙 systemctl reload firewalld 查看端口是否开放成功 firewall-cmd –list-ports 也可以从外部使用telnet命令检查端口是否开放成功,如telnet 192.168.0.121 3307 1.1.2 官方安装地址(docker如已安装请忽略): https://docs.docker.com/engine/install/centos/ yum install -y yum-utils yum-config-manager –add-repo https://download.docker.com/linux/centos/docker-ce.repo 如果docker这个源异常可以用阿里云的源 #yum-config-manager –add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo yum install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin #启动docker systemctl start docker #查看是否安装成功 docker -v 如果无法访问官网,参考阿里云安装Docker CE镜像https://developer.aliyun.com/mirror/docker-ce?spm=a2c6h.13651102.0.0.57e31b11lhSNtT 1.1.3 可使用一键安装脚本(docker如已安装请忽略) wget https://pamirs.oss-cn-hangzhou.aliyuncs.com/docker/quick-install.sh sh quick-install.sh 1.1.4 Docker部署常见问题 https://doc.oinone.top/install/20670.html 1.2 无公网环境Linux系统 需要根据指定的版本以及内核架构来生成对应docker以及镜像包 1.3 window环境 https://docs.docker.com/desktop/install/windows-install/ 2. 解压提供的部署.zip 部署.zip包含: settings-3.6.3.xml:拉取平台jar的maven仓库settings,对应maven版本3.6.x settings-3.8.x.xml:拉取平台jar的maven仓库settings,对应maven版本3.8.x oinone-op-ds-all-full:包含所有中间件及前后端工程,用于启动docker结构和脚本(需拷贝到服务器) oinone-op-ds-all-mini:仅包含前后端工程,用于启动docker结构和脚本(需拷贝到服务器) license:平台证书 docker-mvn-npm账号.md oinone-example:后端示例工程 ss-front-modules:前端示例工程 3. 对应版本的docker镜像拉取 镜像地址 镜像概述 harbor.oinone.top/oinone/oinone-designer-full-v5.1:5.1.16 包含所有中间件及前后端工程(v5.1:5.1.16为示例版本号,实际以Oinone发出来的为准) harbor.oinone.top/oinone/oinone-designer-mini-v5.1:5.1.16 仅包含前后端工程(v5.1:5.1.16为示例版本号,实际以Oinone发出来的为准) 注意:docker镜像拉取的账号密码在部署.zip里面(docker-mvn-npm账号.md) docker login –username=用户名 harbor.oinone.top docker pull harbor.oinone.top/oinone/xxx 4. 修改startup.sh/cmd文件 doker的结构包 oinone-op-ds-all-full 或oinone-op-ds-all-mini 上传到服务器上;下面的操作都是这该文件夹下进行 4.1 linux环境修改参数 在startup.sh文件中找到如下 configDir=$(pwd)version=版本号IP=192.168.0.121 修改对应的IP为docker宿主机IP 4.2 window环境修改参数 在startup.cmd文件中找到如下set configDir=%CD%set version=版本号set IP=192.168.0.121 修改对应的IP为docker宿主机IP 5. 修改mq/broker.conf 注意:使用oinone-op-ds-all-mini版本,无需进行该步操作(直接跳过)注意:使用oinone-op-ds-all-full版本,才需进行该步操作 修改其中brokerIP1的IP从192.168.0.121改成宿主机IP brokerClusterName = DefaultCluster namesrvAddr=127.0.0.1:9876 brokerIP1=192.168.0.121 brokerName = broker-a brokerId = 0 deleteWhen = 04 fileReservedTime = 48 …… 5. 修改config/application.yml 注意:使用oinone-op-ds-all-full版本,无需进行该步操作(直接跳过)注意:使用oinone-op-ds-all-mini版本,才需进行该步操作 修改中间件的配置(oinone-op-ds-all-full版本无需修改),把中间件对应的IP、端口或密码,改成实际提供服务IP、端口或密码。包括: zookeeper mysql rocket-mq redis oss配置 7. 启动Docker 7.1 linux环境启动 在终端执行 sh startup.sh 7.2 window环境启动 用PowerShell 执行 .\startup.cmd 7.3 查看日志,检查是否启动成功 在logs目录下可看到日志文件,第一次启动时间会相对长一些,等看到日志文件中输出 启动耗时…

    2024年8月19日
    2.3K00
  • 【OceanBase】后端部署使用 OceanBase 数据库(海扬/OB)

    OceanBase 数据库配置 驱动配置 Maven配置(4.2.5.3版本可用) <oceanbase.version>2.4.14</oceanbase.version> <dependency> <groupId>com.oceanbase</groupId> <artifactId>oceanbase-client</artifactId> <version>${oceanbase.version}</version> </dependency> PS: oceanbase 驱动必须使用 2.4.5 版本或以上,低于此版本的驱动无法使用自增ID功能,无法正常启动。点击查看官方JDBC版本发布记录 JDBC连接配置 OceanBase – Oracle 版 pamirs: datasource: base: type: com.alibaba.druid.pool.DruidDataSource driverClassName: com.alipay.oceanbase.jdbc.Driver url: jdbc:oceanbase://10.xxx.xxx.xxx:1001/BASE?useServerPrepStmts=true&useOraclePrepareExecute=true&defaultFetchSize=4096 username: xxxxxx password: xxxxxx validConnectionCheckerClassName: com.alibaba.druid.pool.vendor.OracleValidConnectionChecker validationQuery: SELECT 1 FROM DUAL OceanBase – MySQL 版 pamirs: datasource: base: type: com.alibaba.druid.pool.DruidDataSource driverClassName: com.alipay.oceanbase.jdbc.Driver url: jdbc:oceanbase://10.xxx.xxx.xxx:1001/base username: xxxxxx password: xxxxxx 连接 URL 配置 点击查看官方JDBC连接配置说明 URL 格式(OceanBase – Oracle 版) jdbc:oceanbase://${host}:${port}/${database}?useServerPrepStmts=true&useOraclePrepareExecute=true&defaultFetchSize=4096 在jdbc连接配置时,useServerPrepStmts=true&useOraclePrepareExecute=true 必须配置,否则自增主键无法正常使用。 defaultFetchSize=4096 意味着在使用服务端预处理时,游标每次获取的结果集行数,驱动默认值为 10,在进行大量数据获取时会出现卡顿的现象,因此推荐使用 4096 作为其结果集大小。过大可能会导致 OOM,过小可能还是会出现卡顿,该值需要按实际情况进行配置。 其他连接参数如需配置,可自行查阅相关资料进行调优。 方言配置(OceanBase – Oracle 版) PS:OceanBase – MySQL 版无需配置方言,只需修改数据库连接即可正常使用。 pamirs方言配置 pamirs: dialect: ds: base: type: OceanBase version: 4.2.5.3 major-version: oracle-4.2 pamirs: type: OceanBase version: 4.2.5.3 major-version: oracle-4.2 plus: configuration: jdbc-type-for-null: "NULL" using-model-as-property: true using-statement-handler-dialect: true mapper: batch: collectionCommit default-batch-config: read: 500 write: 100 数据库版本 type version majorVersion 4.2.5.3 OceanBase 4.2.5.3 oracle-4.2 PS:由于方言开发环境为4.2.5.3版本,其他类似版本(4.x)原则上不会出现太大差异,如出现其他版本无法正常支持的,可在文档下方留言。 schedule方言配置 pamirs: event: enabled: true schedule: enabled: true dialect: type: Oracle version: 12.2 major-version: 12c type version majorVersion Oracle 12.2 12c PS:由于 schedule 的方言与 Oracle 数据库并无明显差异,OceanBase 数据库可以直接使用 Oracle 数据库方言。 其他配置(OceanBase – Oracle 版) 逻辑删除的值配置 pamirs: mapper: global: table-info: logic-delete-value: (CAST(SYSTIMESTAMP AS DATE) – TO_DATE('1970-01-01 08:00:00', 'YYYY-MM-DD HH24:MI:SS')) * 8640000000000

    2025年7月21日
    75400
  • 创建与编辑一体化

    在业务操作中,用户通常期望能够在创建页面后立即进行编辑,以减少频繁切换页面的步骤。我们可以充分利用Oinone平台提供的创建与编辑一体化功能,使操作更加高效便捷。 通过拖拽实现表单页面设计 在界面设计器中,我们首先需要设计出对应的页面。完成页面设计后,将需要的动作拖入设计好的页面。这个动作的关键在于支持一个功能,即根据前端传入的数据是否包含id来判断是创建操作还是编辑操作。 动作的属性配置如下: 前端自定义动作 一旦页面配置完成,前端需要对这个动作进行自定义。以下是一个示例的代码: @SPI.ClassFactory( ActionWidget.Token({ actionType: [ActionType.Server], model: '模型', name: '动作的名称' }) ) export class CreateOrUpdateServerActionWidget extends ServerActionWidget { @Widget.Reactive() protected get updateData(): boolean { return true; } } 通过以上步骤,我们实现了一个更智能的操作流程,使用户能够在创建页面的同时进行即时的编辑,从而提高了整体操作效率。这种创建与编辑一体化的功能不仅使操作更加顺畅,同时也为用户提供了更灵活的工作流程。

    2023年11月21日
    1.8K00
  • 集成接口与数据流程的使用

    连接器 点击连接器tab,进入连接器页面,默认选择应用 应用 点击新增应用资源,抽屉打开创建应用的表单 创建应用成功之后,点击应用卡片,进入应用详情页 点击新增API,出现新增API与新增webservice的选项 点击新增API或者新增webservice,抽屉打开新增页面,需设置api名称、url、描述、请求参数、响应结果等信息 数据库 点击数据库tab,切换至数据库列表页 点击新增db资源,抽屉打开新增页面 数据库创建完成之后,点击数据卡片,可进入数据库详情页 点击新增API,抽屉打开新增页面,新增页面包含API名称、描述、请求参数、数据库操作、响应结果等内容(注意:响应结果中的取值表达式的值为查询结果中的列名,如列名取了别名,就写别名,截图有例子) 数据流程 点击数据流程tab进入数据流程列表页 点击创建流程,选择应用之后,点击创建,进入数据流程创建页 点击名称处的编辑操作可设置流程名称 触发-定时触发 点击触发节点,选择定时触发 设置好定时信息之后,点击保存(到定时时间之后会自动触发流程) 触发-消息触发 点击触发节点,触发方式选择消息触发,输入消息标识,设置参数(触发时根据消息标识触发,如果存在两个相同的消息标识,那触发时两个都会触发) 设置完成参数之后,点击确定 再点击保存,触发设置完成 消息触发的方式,可直接调用接口,或者写入到代码中触发,以下为接口触发方式 先调用登录接口 再调用消息触发接口(msgId为消息标识) 点击加号可添加节点,可选择API、新增数据、更新数据、获取数据、删除数据、更新流程参数、引用逻辑、延时、条件分支、子流程、循环、站内信、邮件、短信等节点 API节点 点击API节点 点击节点可设置节点名称 输入节点名称 点击节点设置,进入设置页面 先选择资源应用,再选择API(资源应用的数据为连接器创建的数据) 设置赋值表达式(当字段为必填,且无默认值时,赋值表达式必填) 设置完成点击,保存 API的响应结果可作为下个节点的参数 提示:当参数类型为对象非数组时,赋值表达式配置在对象的下个层级中,当参数类型为对象数组时,赋值表达式配置在对象中,具体见如下图片 对象非数组 对象数组 ### 循环节点-列表循环 设置循环节点 #### 设置循环列表 设置完成,点击保存(循环次数为获取的数据条数) 循环里面可添加节点 设置循环里面的节点,如选择新增节点,点击新增节点之后,选择应用,模型数据保存方式,点击创建 字段的表达式可选择循环节点的参数 设置完内容之后,点击保存 #### 循环节点-次数循环 点击循环节点,循环模式选择次数循环 循环开始值、结束值、步长,可通过表达式选择数字类型的,也可自己手动输入 设置完成之后,点击保存 ### 更新流程参数 第一步先进行流程配置 点击添加新参数 参数类型支持四种,文本、数值、日期(日期时间)、布尔 输入参数名称之后点击保存 保存成功之后,再切换至流程设计 第二步添加更新流程参数节点 第三步设置流程参数节点 进入节点设置之后,点击添加参数 选择参数,给参数赋值(注意布尔类型的值,直接输入ture或者false) 参数值设置完成之后点击保存 设置的参数可用于下个节点的赋值表达式中(如更新数据节点) 设置完成点击保存 ### 引用逻辑 添加引用逻辑节点 设置引用逻辑节点 选择应用、模型、函数,设置参数 配置表达式,配置完成,点击确定 节点信息设置完成之后,点击保存 ### 新增数据、更新数据、获取数据、删除数据、延时、条件分支、子流程、循环、站内信、邮件、短信节点与流程设计器用法一致 流程发布 流程设置完成之后,点击发布流程(如果是定时触发,将会到触发时间自动触发,如果是消息触发,当发送对应消息时触发,具体见上文中写的触发-消息触发)

    2023年11月10日
    79400
  • 【界面设计器】他表字段

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

    2023年11月1日
    1.6K00

Leave a Reply

登录后才能评论