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

阅读之前

你应该:

名词解释

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

概述

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

场景

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

我们可以做出这些优化:

将【商品类目】的【上级类目】组件改为【级联】组件。其第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

相关推荐

  • 无代码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
  • 自定义字段的数据联动

    某种情况下,开发人员期望自定以的字段发生变化后,需要修改其他的字段,这篇文章从两个维度来讲解如果处理数据的联动 界面设计器配置 1: 在界面设计器页面中的的组件区域找到自定义的字段,设计元件 2: 在模型区域,搜索提交方式,如果找到了,就把该字段拖拽进来, 如果找不到,就在元件中的组件区域,拖拽一个文本字段,按照下面的配置进行配置,然后保存 图一是找到了对应的字段图二是找不到对应的字段 【图一】 【图二】 图二的字段编码必须是constructDataTrigger 3: 从模型区搜索联动函数,将其拖拽进来 3: 从模型区搜索提交数据,将其拖拽进来4: 从模型区搜索提交字段,将其拖拽进来 5: 发布 (记得刷新页面哦) 最后再到对应的设计器页面,选中该字段,进行配置 提交方式为blur或者change , 需要开发者手动调用该方法 this.blur()或者this.change(value) // 字段对应的ts文件 class MyField extends FormFieldWidget { onChangeValue(val) { // this.change(val) // this.blur() } } 联动函数就是要调用的后端函数 提交数据分为:变更字段 -> 发生变化后的字段当前视图字段 -> 当前视图所有的字段指定字段 -> 指定字段,如果配置的指定字段,那么提交字段的配置就要输入对应的字段 代码配置 平台也支持通过代码的方式修改字段 // 字段对应的ts文件 class MyField extends FormFieldWidget { onChangeValue(val) { // 修改字段本身的值 this.change(val) // 修改其他字段的值 this.formData.otherField = 'value' this.reloadFormData$.subject.next(true); } }

    2023年11月9日
    2.5K00
  • Oinone支持的操作系统和中间件

    Oinone支持的操作系统和中间件 操作系统 操作系统 支持版本 说明 银河麒麟-飞腾版 V10 支持Java和go环境即可; Java要求jdk1.8 (1.8_221+); 低于1.8_221版本需要覆盖掉jce 银河麒麟-鲲鹏版 V10 统信服务器操作系统 V4.0 CentOS/Ubuntu/Debian 7,8,9 其他兼容的Linux系统 能安装Docker或运行go和Java环境即可 Windows Server 能安装Docker或运行go和Java环境即可 数据库 数据库类型 支持版本 说明 MySQL 5.7.x、8.0.x MySQL协议相关的,如:MariaDB,TiDB,PolarDB等。推荐使用8.0.X 达梦数据库(Dameng) 7.6、8.1 PostgreSQL 14.x 华为GaussDB/openGauss 5.x SQL Server 2017 人大金仓/电科金仓 9 Kingbase CDN CDN类型 服务 OSS 阿里云OSS UPYUN 又拍云 MINIO MinIO HUAWEI_OBS 华为云OBS TENCENT_COS 腾讯云COS LOCAL NGINX文件存储 可自定义方式进行扩展 应用服务器 应用服务器 支持版本/说明 Tomcat 主流版本都支持 TongWeb 东方通web服务器 SpringBoot内嵌Tomcat 原生的启动方式: java -jar的方式启动 Jetty 主流版本都支持 其他Java web服务器 支持标准Servlet规范和JavaEE规范的应用服务器 消息队列 消息队列 支持版本/说明 RocketMQ 4.x,推荐4.7+ Kafka 2.x, 推荐 2.5+ Rabbitmq 5.x, 推荐5.7+ 可自定义方式进行扩展 注册中心和配置中心 类型 支持版本/说明 Nacos 1.4.1 + 和 2.x都可以; 支持ACL时,必须是1.4.1以上 Zookeeper 3.4.x, 3,5,x 其他基础 类型 支持版本/说明 Java(jdk) 1.8_221+,低于这个版本需要覆盖JCE Reids 4.x、5.x Nginx 版本无特殊要求 Elasticsearch(ES) 7.x, 8.x ,推荐8.x SpringBoot 2.3.8.Release

    2025年3月19日
    1.6K00
  • 【工作流】流程扩展自定义函数示例代码汇总

    目录 1. 流程节点审批人函数2. 审批开始前执行函数3. 填写执行前执行函数4. 待办操作提交后执行函数5. 审批操作数据函数6. 自定义通知人函数 1. 流程节点审批人函数 包含转交、抄送、加签、填写、通知人自定义函数当平台默认提供的审批人选择无法满足个性化的业务需求时,我们可以通过自定义函数处理审批人的生成逻辑 1.1 编写自定义审批人函数 @Function(openLevel = {FunctionOpenEnum.API}) @Function.Advanced(type = FunctionTypeEnum.QUERY, displayName = "报销单-证明人-审批", category = CUSTOM_DESIGNER) public List<NodePerson> bizZmrApprovePerson(List<NodePerson> nodePersonList, NodeModel nodeModel, WorkflowContext workflowContext) { List<NodePerson> newNodePersonList = new ArrayList<>(); String nodeModelId = nodeModel.getId(); Object nodeData = workflowContext.get(nodeModelId); BuissModel inputBuissModel = JsonUtils.parseObject(JsonUtils.toJSONString(nodeData), BUISSMODEL_TR); BuissModel buissModel = new BuissModel().setId(inputBuissModel.getId()).queryById(); buissModel.fieldQuery(BuissModel::getZmEmployee); BxEmployee zmEmployee = buissModel.getZmEmployee(); if (zmEmployee == null) { log.error("报销单ID:{},名称:{}, 获取证明人为空", buissModel.getId(), buissModel.getName()); return newNodePersonList; } NodePersonUser personUser = new NodePersonUser(); List<NodePersonUser> nodePersonUsers = new ArrayList<>(); NodePerson person = new NodePerson(); person.setId(zmEmployee.getBindingUserId() + ""); person.setType(NodePersonTypeEnum.USER); personUser.setUserId(zmEmployee.getBindingUserId()); nodePersonUsers.add(personUser); person.setNodePersonUsers(nodePersonUsers); newNodePersonList.add(person); return newNodePersonList; } 1.2 流程设计器的审批节点设置自定义函数 2.审批开始前执行函数 使用场景:在流程执行到审批或填写节点任务初始化后,任务尚未开始,需要在初始化任务做一些自定义逻辑处理时,使用该扩展执行时间:执行节点是在审批或填写待办任务初始化之后,审批或填写结果执行之前,执行该扩展 /** * 审批节点初始化完成,执行前置函数 * @param approvalNode * @param context * @param taskInstance */ @Function(name = "approvalCustomStartFun",openLevel = FunctionOpenEnum.API) @Function.Advanced(type= FunctionTypeEnum.QUERY,displayName = "审批执行前置处理",category = FunctionCategoryEnum.CUSTOM_DESIGNER ) public void approvalCustomStartFun(ApprovalNode approvalNode, WorkflowContext context, WorkflowTaskInstance taskInstance) { // TODO: 2024/2/23 可以根据结果自己处理业务逻辑 } 3.填写执行前执行函数 /** * 填写执行前置处理 */ @Function(name = "writeCustomStartFun", openLevel = FunctionOpenEnum.API) @Function.Advanced(type = FunctionTypeEnum.QUERY, displayName = "填写执行前置处理", category = FunctionCategoryEnum.CUSTOM_DESIGNER) public void writeCustomStartFun(WorkflowTaskInstance taskInstance, WriteNode writeNode, WorkflowContext context) { System.out.println("填写执行前置处理"); } 4. 待办操作提交后执行函数 使用场景:在审批或填写的待办任务在操作任务时,需要额外执行一些逻辑,比如当前人提交操作以后需要更新更当前人操作相关的数据库记录,执行时间:执行节点是在保存待办任务之后,异步执行审批或填写结果之前,执行该扩展 /** * 转交操作后置函数,再流程设计器中审批和填写节点中…

    2023年12月4日
    2.2K00
  • 自定义的复杂字段配置透出字段

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

    2023年11月9日
    2.2K00

Leave a Reply

Please Login to Comment