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

阅读之前

你应该:

名词解释

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

概述

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

场景

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

我们可以做出这些优化:

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

相关推荐

  • 自定义的复杂字段配置透出字段

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

    2023年11月9日
    1.7K00
  • 数据可视化-如何自定义查询数据方法

    场景 根据测试商品,汇总数据通过测试统计商品透出到数据可视化图表数据; 统计商品类目的最大库存以及平均售价信息 测试商品模型 @Model.model(DemoItem.MODEL_MODEL) @Model(displayName = "测试商品", labelFields = "name") @Model.Code(sequence = "SEQ", prefix = "IT", size = 8) public class DemoItem extends CodeModel { private static final long serialVersionUID = -5104390780952631397L; public static final String MODEL_MODEL = "demo.DemoItem"; @Field.String @Field(displayName = "商品名称") private String name; @Field.Html @Field(displayName = "商品描述") private String description; @Field.Money(D=2) @Field(displayName = "商品价格") private BigDecimal itemPrice; @Field.Integer @Field(displayName = "商品库存") private Long inventoryQuantity; …. 测试商品统计 @Model.model(DemoItemStatistics.MODEL_MODEL) @Model(displayName = "测试商品统计", labelFields = "name") public class DemoItemStatistics extends IdModel { private static final long serialVersionUID = 5626273740800455515L; public static final String MODEL_MODEL = "demo.DemoItemStatistics"; @Field.String @Field(displayName = "类目名称") private String categoryName; @Field.Integer @Field(displayName = "商品库存") private Long inventoryQuantity; @Field.Money @Field(displayName = "商品价格") private BigDecimal itemPrice; } 自定义商品类目统计数据 【注意】 图表设计器能获取到的接口需指定:category = FunctionCategoryEnum.QUERY_PAGE,且出参和入参类型要与本示例一致 @Function.Advanced(type = FunctionTypeEnum.QUERY, displayName = "商品统计列表", category = FunctionCategoryEnum.QUERY_PAGE) @Function.fun(FunctionConstants.queryPage) @Function(openLevel = {FunctionOpenEnum.LOCAL, FunctionOpenEnum.REMOTE, FunctionOpenEnum.API}) public Pagination<DemoItemStatistics> queryPage(Pagination<DemoItemStatistics> page, IWrapper<DemoItemStatistics> queryWrapper) { List<DemoItemStatistics> list = new ArrayList<>(); List<DemoItem> items = demoItemService.queryListByWrapper(Pops.<DemoItem>lambdaQuery() .from(DemoItem.MODEL_MODEL) .eq(DemoItem::getStatus, ItemStatusEnum.ACTIVE)); if(CollectionUtils.isEmpty(items)) return page; Map<Long, List<DemoItem>> itemMap = items.stream().collect(Collectors.groupingBy(DemoItem::getCategoryId)); for (Map.Entry<Long, List<DemoItem>> longListEntry : itemMap.entrySet()) { long categoryId = longListEntry.getKey(); List<DemoItem> demoItems =…

    2024年5月18日
    1.5K00
  • 如何解决界面设计器保存提示:元数据不存在或已删除

    现象 界面设计器设计页面的时候,从左侧边栏模型下拖入了一个字段到页面,保存的时候提示:元数据不存在或已删除 原因 共base库不共元数据缓存redis导致的,不共redis的情况下,每次本地新增或修改元数据(如:字段、方法)启动后会同步本地redis,再去线上启动的时候,由于元数据已经在本地写入到了base库,所以该次启动不会触发redis差量更新 解决方案 通过将boot工程application.yml以下配置,让redis全量刷新元数据缓存 pamirs: distribution: session: allMetaRefresh: true 扩展 这个方法只能解决新增或修改元数据,如果出现了删除元数据的话,改为true也不行,清空或者手动删除问题redis的key都可以

    2024年7月21日
    1.2K00
  • 无代码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.4K00
  • 项目中工作流引入和流程触发

    目录 1. 使用工作流需要依赖的包和设置2. 触发方式2.1 自动触发方式2.2 触发方式 1.使用工作流需要依赖的包和设置 1.1 工作流需要依赖的模块 需在pom.xml中增加workflow、sql-record和trigger相关模块的依赖 workflow:工作流运行核心模块 sql-record:监听流程发布以后对应模型的增删改监听 trigger:异步任务调度模块 <dependency> <groupId>pro.shushi.pamirs.workflow</groupId> <artifactId>pamirs-workflow-api</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.workflow</groupId> <artifactId>pamirs-workflow-core</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-sql-record-core</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-trigger-core</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-trigger-bridge-tbschedule</artifactId> </dependency> 在application.yml中增加对应模块的依赖以及sql-record路径以及其他相关设置 pamirs: … record: sql: #改成自己路径 store: /opt/pamirs/logs … boot: init: true sync: true modules: … – sql_record – trigger – workflow … sharding: define: data-sources: ds: pamirs models: "[trigger.PamirsSchedule]": tables: 0..13 event: enabled: true schedule: enabled: true # ownSign区分不同应用 ownSign: demo rocket-mq: # enabled 为 false情况不用配置 namesrv-addr: 192.168.6.2:19876 trigger: auto-trigger: true 2.触发方式 2.1自动触发方式 在流程设计器中设置触发方式,如果设置了代码触发方式则不会自动触发 2.2代码调用方式触发 2.2.1.再流程设计器中触发设置中,设置为是否人工触发设置为是 2.2.2.查询数据库获取该流程的编码 2.2.3.在代码中调用 /** * 触发⼯作流实例 */ private Boolean startWorkflow(WorkflowD workflowD, IdModel modelData) { WorkflowDefinition workflowDefinition = new WorkflowDefinition().queryOneByWrapper( Pops.<WorkflowDefinition>lambdaQuery() .from(WorkflowDefinition.MODEL_MODEL) .eq(WorkflowDefinition::getWorkflowCode, workflowD.getCode()) .eq(WorkflowDefinition::getActive, 1) ); if (null == workflowDefinition) { // 流程没有运⾏实例 return Boolean.FALSE; } String model = Models.api().getModel(modelData); //⼯作流上下⽂ WorkflowDataContext wdc = new WorkflowDataContext(); wdc.setDataType(WorkflowVariationTypeEnum.ADD); wdc.setModel(model); wdc.setWorkflowDefinitionDefinition(workflowDefinition.parseContent()); wdc.setWorkflowDefinition(workflowDefinition); wdc.setWorkflowDefinitionId(workflowDefinition.getId()); IdModel copyData = KryoUtils.get().copy(modelData); // ⼿动触发创建的动作流,将操作⼈设置为当前⽤户,作为流程的发起⼈ copyData.setCreateUid(PamirsSession.getUserId()); copyData.setWriteUid(PamirsSession.getUserId()); String jsonData = JsonUtils.toJSONString(copyData.get_d()); //触发⼯作流 新增时触发-onCreateManual 更新时触发-onUpdateManual Fun.run(WorkflowModelTriggerFunction.FUN_NAMESPACE, "onCreateManual", wdc, msgId, jsonData); return Boolean.TRUE; }

    2023年11月7日
    1.7K00

Leave a Reply

登录后才能评论