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

阅读之前

你应该:

名词解释

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

概述

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

场景

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

我们可以做出这些优化:

将【商品类目】的【上级类目】组件改为【级联】组件。其第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低代码应用平台体验

Like (0)
oinone's avataroinone
Previous 2023年6月20日 pm4:07
Next 2023年11月2日 pm1:58

相关推荐

  • 集成接口与数据流程的使用

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

    2023年11月10日
    1.0K00
  • 无代码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.6K00
  • 开放接口怎么使用

    开放接口的具体使用 第一步将接口授权的应用变成启用状态 第二步点击查看密钥,复制API Key与API Secret 第三步利用复制下来的API Key与API Secret生成token 第四步调用开放接口

    2023年11月7日
    93300
  • Docker部署常见问题

    问题1:容器启动出现library initialization failed – unable to allocate file descriptor table – out of memory异常如何处理? 原因 不同操作系统安装Docker后,容器运行环境并不一致,需要对Docker运行参数进行调整。 解决方案 编辑/etc/systemd/system/docker.service文件, 有些系统该文件位置:/lib/systemd/system/docker.service 查看docker的systemd(docker.service)配置位置 systemctl status docker 查看docker的systemd配置位置 将下列参数进行修改 LimitNOFILE=65535 LimitNPROC=65535 LimitCORE=65535 执行以下脚本 systemctl daemon-reload systemctl restart docker 问题2:容器启动出现library initialization failed – unable to allocate file descriptor table – out of memorypanic: signal: aborted (core dumped)异常如何处理? 问题现象 1、 按照【问题1】的设置进行配置后,仍然不生效; 2、 尝试修改宿主机系统内核的ulimits,重启docker仍报错。修改docker.service(文件位置:/etc/systemd/system/docker.service文件, 有些系统该文件位置:/lib/systemd/system/docker.service) 解决方案 查看docker的systemd(docker.service)配置位置【问题1】中的办法 在ExecStart命令后加上创建容器的默认ulimit配置,如下,设置容器启动时的ulimit为65535:65535 –default-ulimit nofile=65535:65535 配置好后: ExecStart=/usr/bin/dockerd -H fd:// –containerd=/run/containerd/containerd.sock –default-ulimit nofile=65535:65535 执行以下脚本 systemctl daemon-reload systemctl restart docker 资料参考:https://blog.csdn.net/weixin_42241322/article/details/137122868 问题3:拉取设计器镜像报错 报错信息,拉取镜像harbor.oinone.top连不上。 docker login –username=schhsw_oinone harbor.oinone.top i Info → A Personal Access Token (PAT) can be used instead. To create a PAT, visit https://app.docker.com/settings Password: time="2025-02-27T11:24:58+08:00" level=info msg="Error logging in to endpoint, trying next endpoint" error="Get \"https://harbor.oinone.top/v2/\": dial tcp 0.0.0.0:443: connect: connection refused" Get "https://harbor.oinone.top/v2/": dial tcp 0.0.0.0:443: connect: connection refused kfpt@kfpt-virtual-machine:~$ sudo -i root@kfpt-virtual-machine:~# docker login –username=schhsw_oinone harbor.oinone.top i Info → A Personal Access Token (PAT) can be used instead. To create a PAT, visit https://app.docker.com/settings Password: Error response from daemon: Get "https://harbor.oinone.top/v2/": dial tcp 0.0.0.0:443: connect: connection refused 排查过程: 排除到后面发现原因是DNS配置的问题,换了一个阿里云的IP就可以了

    2025年3月13日
    1.4K00
  • 上下文在字段和动作中的应用

    上下文在字段和动作中的应用 在业务场景中,常常需要在打开弹窗或跳转到新页面时携带当前页面数据。此时,我们需要配置相关「动作」中的上下文信息。 在 oinone 平台中,上下文主要分为以下三种: activeRecord:当前视图数据 rootRecord:主视图数据 openerRecord:触发弹窗的对象 参考文档:oinone内的主视图数据和当前视图数据使用介绍 activeRecord 表示当前视图的数据。例如,若动作配置在表单上,则指代当前表单的数据;若配置在 o2m、m2m 字段表格上,则指代选中的行数据。 rootRecord 表示根视图的数据。若当前视图是表单页,则代表表单的数据;若为表格页,则代表表格的数据。 openerRecord 表示触发弹窗的对象。例如,在弹窗内的字段或动作中,可通过 openerRecord 获取触发弹窗的信息。 这三者均为对象 (Object) 类型。 界面设计器配置 在 o2m、m2m 表格字段弹窗中携带当前视图数据 假设我们设计了一个包含 o2m、m2m 表格字段的表单页面。打开相关弹窗时,需将表单中的 code 数据传递至弹窗中。 选择相应的「动作」,如创建或添加。在右侧属性面板底部找到「上下文」,添加格式为对象 {} 的上下文信息。 以键值对的格式添加上下文信息:{code: rootRecord.code}。 设计弹窗时,将 code 字段拖入弹窗中。 完成设计后保存并发布。 大家可以看到,上下文中的key是 code,但是value是rootRecord.code,这里取的是rootRecord而不是activeRecord,因为我们上面讲过如果当前动作配置在o2m、m2m的字段表格上面,那么activeRecord就是表格选中的行,我们现在要取的是表单上的code字段,所以需要用rootRecord。 注意点:key需要是提交模型【前端视图】存在的字段才能传递。

    2023年11月8日
    3.0K10

Leave a Reply

Please Login to Comment