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

阅读之前

你应该:

名词解释

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

概述

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

场景

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

我们可以做出这些优化:

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

相关推荐

  • 工作流自定义转交/加签人函数执行时机使用说明

    在实际工作流程的应用过程中,我们注意到有小伙伴需要根据当前执行操作的用户,进行筛选转交或加签人员的列表。为了应对这个需求,我们在流程设计器新增了自定义函数执行时机选项。 使用说明 自定义函数执行时机为空时,逻辑同任务创建时生效。 任务创建时生效:当系统创建待办任务时,会立即调用自定义函数确定转交或加签人列表。 功能特性:效率更高,但无法知道当前操作的用户是谁。 潜在影响:如果自定义函数的逻辑被更改,已创建的任务的转交或加签人列表不会受影响。 用户审批时生效:每次用户查看审批或加签人列表时,都会触发自定义函数。 功能特性:可以获取当前操作的用户信息。 潜在影响:如果自定义函数的逻辑更改,转交或加签人列表会根据新逻辑更新。 注意事项:如果自定义函数存在耗时操作,可能会影响用户体验。 使用建议:如果需要获取当前操作的用户,建议使用用户审批时生效。如果自定义函数的运行结果不依赖于操作用户的身份,那么更推荐在任务创建时就执行。

    2024年8月23日
    1.2K00
  • Centos7 部署mysql8详细教程

    安装前准备 1.访问mysql官网下载mysql8软件包 https://dev.mysql.com/downloads/mysql/选择相应的版本如:RPM Bundle mysql-8.0.33-1.el7.x86_64.rpm-bundle.tarRPM Bundle 8.0.33 下载地址:https://dev.mysql.com/get/Downloads/MySQL-8.0/mysql-8.0.33-1.el7.x86_64.rpm-bundle.tar 2.卸载MariaDB [root@haibovm ~]# rpm -qa | grep mariadb mariadb-libs-5.5.60-1.el7_5.x86_64 [root@haibovm ~]# rpm -e –nodeps mariadb-libs-5.5.60-1.el7_5.x86_64 3.检查 libaio numactl 是否安装 [root@haibovm ~]# rpm -qa|grep libaio libaio-0.3.109-13.el7.x86_64 [root@haibovm ~]# rpm -qa|grep numactl numactl-libs-2.0.9-7.el7.x86_64 如果没有检测到请使用以下命令安装 [root@haibovm ~]# yum install libaio numactl -y 4.关闭防火墙selinux(根据自身情况) [root@haibovm ~]# sed -i 's/enforcing/disabled/' /etc/selinux/config [root@haibovm ~]# setenforce 0 [root@haibovm ~]# systemctl stop firewalld [root@haibovm ~]# systemctl disable firewalld Removed symlink /etc/systemd/system/multi-user.target.wants/firewalld.service. Removed symlink /etc/systemd/system/dbus-org.fedoraproject.FirewallD1.service. [root@haibovm ~]# systemctl is-active firewalld unknown 5.防火墙开放端口 [root@haibovm ~]# firewall-cmd –zone=public –add-port=3306/tcp –permanent # 开放3306端口 [root@haibovm ~]# firewall-cmd –zone=public –remove-port=3306/tcp –permanent #关闭3306端口 [root@haibovm ~]# firewall-cmd –reload # 配置立即生效 [root@haibovm ~]# firewall-cmd –zone=public –list-ports # 查看防火墙所有开放的端口 安装mysql8 1.下载mysql8到/opt目录 [root@haibovm ~]# cd /opt/ [root@haibovm opt]# yum install wget -y && wget https://dev.mysql.com/get/Downloads/MySQL-8.0/mysql-8.0.33-1.el7.x86_64.rpm-bundle.tar 2.解压 mysql-8.0.33-1.el7.x86_64.rpm-bundle.tar [root@haibovm opt]# tar -xvf mysql-8.0.33-1.el7.x86_64.rpm-bundle.tar mysql-community-client-8.0.33-1.el7.x86_64.rpm mysql-community-client-plugins-8.0.33-1.el7.x86_64.rpm mysql-community-common-8.0.33-1.el7.x86_64.rpm mysql-community-debuginfo-8.0.33-1.el7.x86_64.rpm mysql-community-devel-8.0.33-1.el7.x86_64.rpm mysql-community-embedded-compat-8.0.33-1.el7.x86_64.rpm mysql-community-icu-data-files-8.0.33-1.el7.x86_64.rpm mysql-community-libs-8.0.33-1.el7.x86_64.rpm mysql-community-libs-compat-8.0.33-1.el7.x86_64.rpm mysql-community-server-8.0.33-1.el7.x86_64.rpm mysql-community-server-debug-8.0.33-1.el7.x86_64.rpm mysql-community-test-8.0.33-1.el7.x86_64.rpm 3.安装 community-common [root@haibovm opt]# rpm -ivh –nodeps –force mysql-community-common-8.0.33-1.el7.x86_64.rpm 警告:mysql-community-common-8.0.33-1.el7.x86_64.rpm: 头V4 RSA/SHA256 Signature, 密钥 ID 3a79bd29: NOKEY 准备中… ################################# [100%] 正在升级/安装… 1:mysql-community-common-8.0.33-1.e################################# [100%] 4.安装 community-libs [root@haibovm opt]# rpm -ivh –nodeps –force mysql-community-libs-8.0.33-1.el7.x86_64.rpm 警告:mysql-community-libs-8.0.33-1.el7.x86_64.rpm: 头V4 RSA/SHA256 Signature, 密钥…

    2023年11月7日
    1.1K00
  • 【界面设计器】左树右表

    阅读之前 你应该: 熟悉模型的增删改查相关内容。【界面设计器】模型增删改查基础 名词解释 主体:在视图中提供数据源的主要组件,并且所有动作都围绕着该主体展开。 一级搜索:在表格视图中,上方直观可见的搜索区,为表格提供筛选功能。 二级搜索:与一级搜索不同的是,其搜索条件是通过某些组件的行为追加到一级搜索条件之上的筛选功能。 概述 平台中对于左树右表提供了两种类型的展示形式。 在表格视图中的左树右表,是以表格为主体,树组件为表格提供了二级搜索功能。选中树节点时将对表格追加节点的搜索条件,并重新执行查询。 在树视图中,是以树为主体,其展开的视图可以是表格、表单、详情等其他视图。 PS:不论是树、级联这些视图组件,还是树选择、级联这些字段组件,其配置数据结构的方式是不尽相同的。唯一的区别在于最终到达的目标模型来源不同。 场景1 为了方便接下来的描述,我们需要先构建一个基本的业务场景,这个场景中包含【商品】和【商品类目】两个模型。 在【商品】的表格左侧添加【商品类目】树,选择某个商品类目后,可以根据商品类目进行筛选,查询所属类目下的全部商品。 其中【商品类目】使用【卡片级联】的展示方式进行管理。 其模型定义如下: 商品(Item) 名称 API名称 业务类型 是否多值 长度(单值长度) 关联模型 关联字段 ID id 整数 否 – – – – 编码 code 文本 否 128 – – – 名称 name 文本 否 128 – – 所属类目 category 多对一 否 – 商品类目(ItemCategory) categoryId – id 所属类目ID categoryId 整数 否 – – – 商品类目(ItemCategory) 名称 API名称 业务类型 是否多值 长度(单值长度) 关联模型 关联字段 ID id 整数 否 128 – – 编码 code 文本 否 128 – – – 名称 name 文本 否 128 – – 上级类目 parent 多对一 是 – 商品类目(ItemCategory) parentId – id 上级类目ID parentId 整数 否 – – – PS:实际业务场景中,【商品类目】通常使用编码进行关联,即parentCode – code;不仅如此,通常还会添加treeCode字段,以此来实现高效查询当前节点的所有子节点的能力。在演示模型中,我们不必关注这些内容。 创建【商品】视图 设置联动关系 这里我们需要配置的是【商品类目】的树结构,因此,在【第1级关联】中的模型选择【商品类目】。 在【商品类目】中是通过【上级类目】进行的自关联,因此,在【第1级关联】中的【自关联关系字段】选择【上级类目】。 在选中【商品类目】节点后,需要对右侧表格发起查询。其筛选条件是通过【商品】中的【所属类目】进行筛选的。因此,在【第1级关联】中的【表格关联关系字段】选择【所属类目】。那么,在表格发起查询前,会根据【所属类目】字段的关联关系配置自动添加筛选条件。 配置如下图所示: 创建【商品类目】视图 设置联动关系 这里我们需要配置的是【商品类目】的树结构(级联只是树结构的另一种表现形式) 细心的同学可能发现这里没有【表格关联关系字段】,因此,我们仅需配置【自关联关系字段】即可。 配置如下图所示: 为【商品类目】添加增删改查基础功能 与表格视图不同的是,行内动作区被放在了第一个卡片中的动作区,其他配置方式完全一致。 在这里需要理解的是,一个树节点对应的是表格中的一行。 【商品类目】使用展开视图进行编辑(可选) 打开【支持展开视图】开关,并设置展开视图。这里我们用表单视图进行编辑操作。 和其他表单一样,我们将必要的字段和动作拖入对应区域即可。 由于展开视图只会在选中节点时出现,因此我们仅需提供更新功能即可。 这里需要注意: 提交动作默认打开了【返回上一页】的功能,在当前场景中,更新动作提交数据后,没有上一页需要返回,因此需要关闭【返回上一页】的开关。 提交动作默认打开了【刷新当前视图】的功能,在当前场景中,更新按钮处于【展开视图】中,仅刷新当前视图是不够的,当数据发生变更时,我们需要将级联组件一并刷新,因此需要打开【刷新主视图】的开关。 PS:【编辑】动作和【展开视图编辑】功能是重复的,在使用时应该只选择其中一种。 【商品类目】限制仅支持四级,并为每一个卡片添加标题(可选) 移除【第1级关联】中的【自关联关系字段】,依次添加2、3、4级关联,选择【商品类目】模型,将自动选中【层级关联关系字段】为【上级类目】,并输入每一级关联的标题即可。 这里需要注意的是,在【第1级关联】中需要添加筛选条件,使其只能查询到根节点。 PS:这里的限制仅为交互上的限制,在创建/更新时,如果可以在服务端限制上级类目的选择,以及数据提交时的校验,效果更佳。 【商品类目】的【创建/编辑】使用弹窗打开(可选) 有时我们希望用户在页面中的操作尽可能的流畅,在表单规模较小的情况下,我们也可以使用【弹窗/抽屉】这类交互来优化用户体验。 小贴士: 弹窗打开的方式提供三种页面设计模式,绑定已有页面、使用新页面、复制已有页面。 使用新页面和复制已有页面的方式只能进行一次性的视图设计,无法进行复用。 使用绑定已有页面的方式可以使得视图进行复用,但复用的视图也只能同步弹窗的内容部分,弹窗底部的动作仅会在创建动作时复制一次。 跳转动作的打开方式以及页面设计模式等属于元数据信息,无法通过属性面板进行修改,因此只能通过重新创建新动作的方式进行修改。 鉴于业务的复杂和多变,通常情况下我们只采用【绑定已有页面】的方式为弹窗设计内容部分。这样在交互发生变更时,可以更好的适应变化。 场景2 为了方便接下来的描述,我们需要再构建一个基本的业务场景,这个场景中包含【公司】和【部门】两个模型。 【公司】模型的管理能力使用标准的【增删改查】视图。(此处不进行演示) 在【部门】的表格左侧添加【公司】-【部门】树,在选择某个公司后,可以根据所属公司进行筛选,查询所属公司下的全部部门。在选择某个部门后,可以根据上级部门进行筛选,查询该部门下的子部门(不包含子部门的子部门)。 PS:如这里要求查询该部门下的全部子部门,需要服务端配合。 其模型定义如下: 公司(Company) 名称 API名称 业务类型 是否多值 长度(单值长度) 关联模型 关联字段 ID id 整数 否 – – – – 编码 code 文本 否 128 – – – 名称 name 文本…

    2023年11月1日
    4.3K00
  • 流程设计器的导入导出

    目录 依赖包安装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 { workflowDesignerExportReqMutation { export(data: { module: "demo_core", fileName: "workflow_meta" }) { jsonUrl } } } 指定流程编码导出 请求示例: mutation { workflowDesignerExportReqMutation { export(data: { workflowCode: "WF0000000000132500", fileName: "workflow_meta" }) { jsonUrl } } } 业务工程中导入示例代码 导入元数据示例代码 @Slf4j @Order(Integer.MAX_VALUE-1) @Component public class DemoModuleAppInstall implements MetaDataEditor, LifecycleCompletedAllInit { //流程设计器导出的页面元数据json private static final String INSTALL_WORKFLOW_META_PATH = "install/workflow_meta.json"; @Override public void edit(AppLifecycleCommand command, Map<String, Meta> metaMap) { if(StringUtils.isBlank(INSTALL_WORKFLOW_META_PATH)) return; log.info("开始安装-元数据"); try { InitializationUtil util = InitializationUtil.get(metaMap, DemoModule.MODULE_MODULE, DemoModule.MODULE_NAME); if (null != util) { // 设计器的元数据 if(StringUtils.isNotBlank(INSTALL_WORKFLOW_META_PATH)) { log.info("开始安装流程设计器元数据"); DesignerInstallHelper.mateInitialization(util, INSTALL_WORKFLOW_META_PATH); } } } catch (Exception e) { log.error("初始化流程设计器导入异常", e); } } @Override public void process(AppLifecycleCommand command, Map<String, ModuleDefinition> runModuleMap) { if(StringUtils.isNotBlank(INSTALL_WORKFLOW_META_PATH)) { log.info("开始安装-流程设计器数据"); // 支持远程调用,但是执行的生命周期必须是LifecycleCompletedAllInit或之后. 本地如果安装了设计器,则没有要求 DesignerInstallHelper.bizInitialization(INSTALL_WORKFLOW_META_PATH); } } } 生产环境使用启动设计器 生产环境如无部署设计器docker镜像,可下载我们oinone-op-ds-all-mini-workflow镜像,单独安装流程设计器。由于导入的是流程设计器的数据,需要在流程设计器中编辑流程,合理设置相关的人员和自定义函数

    2024年5月16日
    2.2K00
  • 后端无代码设计器Jar包启动方法

    下载Oinone专属启动器 oinone-boot-starter.zip Mac OS平台启动 # 直接运行 ./darwin-boot java -jar ./pamirs-designer-boot-4.7.0.jar # nohup后台运行 nohup ./darwin-boot java -jar ./pamirs-designer-boot-4.7.0.jar > out.log 2>&1 & Mac OS(arm64架构)平台启动 # 直接运行 ./darwin-boot-arm64 java -jar ./pamirs-designer-boot-4.7.0.jar # nohup后台运行 nohup ./darwin-boot-arm64 java -jar ./pamirs-designer-boot-4.7.0.jar > out.log 2>&1 & Linux平台启动 # 直接运行 ./linux-boot java -jar ./pamirs-designer-boot-4.7.0.jar # nohup后台运行 nohup ./linux-boot java -jar ./pamirs-designer-boot-4.7.0.jar > out.log 2>&1 & Linux(arm64架构)平台启动 # 直接运行 ./linux-boot-arm64 java -jar ./pamirs-designer-boot-4.7.0.jar # nohup后台运行 nohup ./linux-boot-arm64 java -jar ./pamirs-designer-boot-4.7.0.jar > out.log 2>&1 & Windows平台启动 .\win-boot.exe java -jar .\pamirs-designer-boot-4.7.0.jar 说明 上述命令使用的java -jar与常规使用方式完全相同。 Oinone无代码设计器不支持使用javaagent参数。 常用启动脚本 #!/bin/bash # 脚本所在目录 home=$(cd "$(dirname "$0")" && pwd) # 启动jar路径 jarPath=$home/pamirs-designer-boot-4.7.0.jar # 配置路径 applicationPath=$home/application.yml # 许可证信息 subject= licensePath= nohup $home/linux-boot java -Duser.timezone=GMT+08:00 -Dhttps.protocols=TLSv1.2 -Dfile.encoding=UTF-8 \ -jar $jarPath \ –spring.config.location=$applicationPath \ -Psubject=$subject \ -Plicense=$licensePath \ -Plifecycle=INSTALL > $home/out.log 2>&1 & sleep 1 tail -200f $home/out.log 出现cannot execute binary file异常该如何处理? 问题原因 Oinone专属启动器是通过go语言进行编译并执行,对于不同的操作系统架构需要分别编译。 解决方案 物理机安装go语言环境。 下载boot.go文件,放在run目录下。(需询问Oinone客服获取最新boot.go文件) 进入run目录,执行go build -o "boot-starter" "boot.go"命令。 在startup.sh命令中添加-v $home/run/boot-starter:/opt/pamirs/run/boot-starter \将文件挂载到容器。 删除docker容器后再执行startup.sh脚本重启镜像即可。 出现failed to open elf at /lib64/ld-linux-x86-64.so.2异常该如何处理? 问题原因 部分arm64架构的宿主机无法兼容amd64环境中编译的linux-boot启动器,需要将启动器换为linux-boot-arm64。 解决方案 下载oinone-boot-starter.zip并解压,获取linux-boot-arm64启动器。 将启动器放在run目录下。 在startup.sh命令中添加-v $home/run/linux-boot-arm64:/opt/pamirs/run/boot-starter替换镜像中的启动器。 删除docker容器后再执行startup.sh脚本重启镜像即可。

    2024年5月17日
    1.8K00

Leave a Reply

Please Login to Comment