1. Oinone社区首页
  2. 设计器

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

oinone • • 设计器, 部署 • 阅读 1332

阅读之前

你应该：

名词解释

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

概述

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

场景

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

我们可以做出这些优化：

将【商品类目】的【上级类目】组件改为【级联】组件。其第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接口依次获取其子节点。在编辑页面，我们通过fetchAll、reverselyQuery、reverselyQueryWithSize这三个接口获取回填的数据，根据不同情况进行调用。虽然使用来不同的接口，但最终都会使用当前模型的queryPage接口获取数据。

Oinone社区 作者：oinone原创文章，如若转载，请注明出处：https://doc.oinone.top/install/64.html

访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验

赞 (0)
oinone的头像oinone
0 0
上一篇 2023年6月20日 pm4:07
下一篇 2023年11月2日 pm1:58

相关推荐

  • 集成开放-开放接口如何鉴权加密 集成设计器

    集成开放-开放接口如何鉴权加密

    使用前提 已经阅读过文档【oinone 7天从入门到精通】的6.2章节-集成平台 已经依赖了内置模块集成平台eip和集成设计器eip_designer 一、为调用方创建应用 方式一: 通过集成设计器创建 可以选择开发接口列表中哪些接口授权该应用开放使用 方式二: 通过手动请求创建 curl –location 'http://127.0.0.1:8190/pamirs/eip' \ –header 'Content-Type: application/json' \ –header 'Cookie: pamirs_uc_session_id=3b3ed2fcade84fc49f2d94146a7694a0' \ –data '{"query":"mutation {\n eipApplicationProxyProxyMutation {\n create(data: {name: \"testOpen\", encryptType: RSA, description: \"test\"}) {\n name\n encryptType\n description\n openInterfaceList {\n name\n interfaceName\n id\n }\n appKey\n }\n }\n}\n","variables":{}}' 应用创建完成后，可以在表格页面开启使用，再通过查看密钥拿到appKey和appSecret 创建成功后可以获取到应用的appKey和appSecret 二、根据appKey和appSecret获取accessToken curl –location 'http://127.0.0.1:8094/openapi/get/access-token' \ –header 'Content-Type: application/x-www-form-urlencoded' \ –data-urlencode 'appKey=c65a8d76a93f4427b3702c55903ddda2' \ –data-urlencode 'appSecret=W2cMGZ0X6Av0kQOoKT4TWTaBalXkGsignr1M0Yi7+JJWJHVniiTz2mb9THGA7W5F' 三、验证请求 header中的signature签名参数在使用代码调用的时候需要使用教程中的SignUtil.signTopRequest()工具方法生成 curl –location 'http://127.0.0.1:8094/openapi/pamirs/queryById4Open' \ –header 'accessToken: T1SSd8aiJCFhsTyQepLCzRqcVsDH3wTjg9srXEZTp/QwsXdMnjf5OE1Nq/UYfEDp' \ –header 'signature: A1A958E1843E26BA002901058B2964C3' \ –header 'Content-Type: application/json' \ –data '{ "id": "111" }' 示例代码 eip开放接口md5加密参数示例代码此为md5加密方式的示例，解压后，将里面api目录下的文件复制到自有主工程的api子工程下，core目录下的文件复制到自有主工程的core子工程下

    nation的头像 nation
    2024年5月31日
    76900
  • 流程设计流程结束通知SPI接口 后端

    流程设计流程结束通知SPI接口

    1.实现SPI接口 import pro.shushi.pamirs.meta.common.spi.SPI; import pro.shushi.pamirs.meta.common.spi.factory.SpringServiceLoaderFactory; import pro.shushi.pamirs.workflow.app.api.entity.WorkflowContext; import pro.shushi.pamirs.workflow.app.api.model.WorkflowInstance; @SPI(factory = SpringServiceLoaderFactory.class) public interface WorkflowEndNoticeApi { void execute(WorkflowContext context, WorkflowInstance instance); } 自定义通知逻辑 /** * 自定义扩展流程结束时扩展点 */ @Order(999) @Component @SPI.Service public class MyWorkflowEndNoticeApi implements WorkflowEndNoticeApi { @Override public void execute(WorkflowContext context, WorkflowInstance instance) { Long dataBizId = instance.getDataBizId(); //todo自定义逻辑 } }

    数式-海波的头像 数式-海波
    2023年12月26日
    94200
  • 后端初始化工程启动 后端部署

    后端初始化工程启动

    在拿到Oinone初始化的后端工程体验时，配置修改点

    王海明的头像 王海明
    2023年11月3日
    1.3K00
  • Docker部署常见问题 后端部署

    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日
    87900
  • 数据可视化-如何自定义查询数据方法 数据可视化

    数据可视化-如何自定义查询数据方法

    场景 根据测试商品，汇总数据通过测试统计商品透出到数据可视化图表数据； 统计商品类目的最大库存以及平均售价信息 测试商品模型 @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.1K00

Leave a Reply

登录后才能评论