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

阅读之前

你应该:

名词解释

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

概述

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

场景

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

我们可以做出这些优化:

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

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

相关推荐

  • 开放接口怎么使用

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

    2023年11月7日
    1.1K00
  • OioProvider详解(v4.3.0)

    OioProvider OioProvider是平台的初始化入口。 示例入口 main.ts import { VueOioProvider } from '@kunlun/dependencies'; VueOioProvider(); 网络请求/响应配置 http 平台统一使用apollo作为统一的http请求发起服务,并使用GraphQL协议作为前后端协议。 参考文档: apollo-client graphql 配置方式 VueOioProvider({ http?: OioHttpConfig }); OioHttpConfig /** * OioHttp配置 */ export interface OioHttpConfig { /** * base url */ url: string; /** * 拦截器配置 */ interceptor?: Partial<InterceptorOptions>; /** * 中间件配置(优先于拦截器) */ middleware?: NetworkMiddlewareHandler | NetworkMiddlewareHandler[]; } 内置拦截器可选项 InterceptorOptions /** * 拦截器可选项 */ export interface InterceptorOptions { /** * 网络错误拦截器 */ networkError: NetworkInterceptor; /** * 请求成功拦截器 (success) */ requestSuccess: NetworkInterceptor; /** * 重定向拦截器 (success) */ actionRedirect: NetworkInterceptor; /** * 登录重定向拦截器 (error) */ loginRedirect: NetworkInterceptor; /** * 请求错误拦截器 (error) */ requestError: NetworkInterceptor; /** * MessageHub拦截器 (success/error) */ messageHub: NetworkInterceptor; /** * 前置拦截器 */ beforeInterceptors: NetworkInterceptor | NetworkInterceptor[]; /** * 后置拦截器 */ afterInterceptors: NetworkInterceptor | NetworkInterceptor[]; } 内置拦截器执行顺序: beforeInterceptors:前置拦截器 networkError:网络错误 actionRedirect:重定向 requestSuccess 请求成功 loginRedirect:登录重定向 requestError:请求错误 messageHub:MessageHub afterInterceptors:后置拦截器 NetworkInterceptor /** * <h3>网络请求拦截器</h3> * <ul> * <li>拦截器将按照注册顺序依次执行</li> * <li>当任何一个拦截器返回false时,将中断拦截器执行</li> * <li>内置拦截器总是优先于自定义拦截器执行</li> * </ul> * */ export interface NetworkInterceptor { /** * 成功拦截 * @param response 响应结果 */ success?(response: IResponseResult): ReturnPromise<boolean>; /** * 错误拦截 * @param response 响应结果 */ error?(response: IResponseErrorResult): ReturnPromise<boolean>; } 自定义路由配置 router 配置方式 VueOioProvider({ router?: RouterPath[]…

    2023年11月1日
    3.1K00
  • 集成接口一键发布生成开放平台接口

    1. 定义集成接口 2. 定义动态参数接口 3. 发布成开放平台接口 3.1 一键勾选多个发布开放平台,可重复发布 3.2 查看开发平台接口列表 3.3 查看开发平台接口详情 3.4 查看开发平台接口详情 4. 创建生成开放平台授权应用 5. postman模拟请求 5.1 获取Oinone开发平台APIKEY和APISecret 在开发接口列表中找到对应授权应用,点击查看密钥,获得APIKEY和APISecret 5.2 请求接口生成accessToken 接口请求 curl –location –request POST 'http://localhost/openapi/get/access-token' \ –header 'appKey: d63cb1d2c2af4e6b95f36b172804e2cc' \ –header 'appSecret: aQ0BwU/vpcLTm5swRaqXW6O5RUdrwOFGJF2nt2I4boIe7luRzul7y8msnKZuPKtvKprmGpw8z29+djBTUkKaV3zBZ4ZPSbaOkiiTB0AQvoPnPBnHxpF6M8xxDlS13hCRy0D01pcc8DbEwWYPetvp7j8WwLL6q3FusJaZPISPLuucT1hxnrCIA2fe72X7UxojROtOfBvYw6+JFv0E8xwrGLfXXX99wbTywuMzhEoqv64dYR2tfNLubua1xJnf/iAhFao+gw7y/44CZ1u3sUpFeIn5T9MnXB3BDVJnanSZTsxnl5wWY9HojrqtSfPJpcd59OKEmehpbHT9++muvDHgdM5zhbS6NhgSXKdH/kOQEP695RcB09AJxHIwcNF6hv4wGBNsAzHFUMx2QTgwHLONmFjx85ZNkp1iD8L3CYn+5kH2FAO+PG9KG/HvJRGoiViF53LyCSzf5FKj0uUY4QCHbTXXNfCE2L04PNlRj1Hj17JKxcTQ6ea1GsslYG5GjiOET2mRWw+DdnxK6S3GGR0pudRD3K22eG+ZLe/IY4sbMmJfAh8daYtOGcDuoiNXXbUUsf9uSgDDBihXy9ajNQUh8qIHb+N5dqbm/o69WLPUYVYvUzWZt23LHCLj1G8iZTTgkPmdhBsXGRcCBtyMpA7Vfci1TuBzuKrLPnB51T2hGhw=' 响应结果 { "access_token": "P0ztlcF+cL0RmRwTqjw6+i03NPScjdJptXQu4W98h0mssJl/5Bsg095ohzdCQtQu", "success": true, "errorCode": 0, "expires_time": 7200, "errorMsg": "ok" } 5.3 模拟请求钉钉接口 接口请求 curl –location 'http://localhost/openapi/dingtalk/api/v1.0/oauth2/accessToken' \ –header 'accessToken: P0ztlcF+cL0RmRwTqjw6+i03NPScjdJptXQu4W98h0k+xvGkaQmOCqCqKFEe5uNE' \ –header 'Content-Type: application/json' \ –data '{ "appKey": "dinguhgmdxva33gs8oaz", "appSecret": "QlxE8g7xoOCmVOZ9nGy-dqMduMstmxRFNGjENCyuwEVHa9jaxy6CioQYjEFkxHAM" }' 响应结果 { "expireIn": 7200, "accessToken": "f87a4ef669ae35879c5b1ee6237a584b", "http": { "headers": { "Content-Type": "application/json" } } } 5.3 模拟动态参数请求钉钉接口 使用postman请求是对应地址openapi/dingtalk/api/v1.0/{oauth}/accessToken需改成openapi/dingtalk/api/v1.0/:oauth/accessToken 接口请求 curl –location 'http://localhost/openapi/dingtalk/api/v1.0/oauth2/accessToken' \ –header 'accessToken: P0ztlcF+cL0RmRwTqjw6+i03NPScjdJptXQu4W98h0k+xvGkaQmOCqCqKFEe5uNE' \ –header 'Content-Type: application/json' \ –data '{ "appKey": "dinguhgmdxva33gs8oaz", "appSecret": "QlxE8g7xoOCmVOZ9nGy-dqMduMstmxRFNGjENCyuwEVHa9jaxy6CioQYjEFkxHAM" }' 响应结果 { "expireIn": 7200, "accessToken": "f87a4ef669ae35879c5b1ee6237a584b", "http": { "headers": { "Content-Type": "application/json" } } }

    2024年3月28日
    1.3K00
  • Oinone License 许可证使用常见问题

    如何获取许可证? 联系数式运维人员获取许可证。(以下内容全部使用表示许可证文件路径) subject:授权主体名称 license.lic:许可证文件 不同许可证类别有什么不同? 许可证类型 LicenseType 限制功能 适用环境 研发授权 DEVELOP 1.每次安装时效1天,超时后无法正常访问设计器相关功能2.限制CPU和主板序列号或限制许可证使用人数3.不能用于容器启动4.有页面水印 开发环境(开发人员本地启动业务工程时使用该授权) 伙伴授权 TRIAL 1.无安装时效限制2.无部署环境限制3.有页面水印 非生产环境(测试环境、预发环境等使用该授权) 客户授权 BUSINESS 1.无安装时效限制2.仅能部署一套生产环境3.无页面水印 生产环境 PS: 一套环境是指共用Base库的所有JVM称为一套环境。 如何配置许可证? 在yaml中配置许可证 单个许可证配置 pamirs: license: subject: <subject> path: <license.lic> 多个许可证配置 pamirs: license: subject: <subject> path: – <license1.lic> – <license2.lic> pamirs.license.path可以是相对路径、绝对路径以及URL路径。 在Program Arguments中配置许可证 java -jar -Psubject=<subject> -Plicense=<license1.lic> -Plicense=<license1.lic> <boot.jar> 如何在开发中安装许可证? 将许可证放入后端运行时工作目录中即可。(一般为idea项目根目录) 如何在物理机生产环境安装许可证? 将许可证放入与jar包平级目录中即可。 如何在docker环境中安装许可证? 在docker运行时目录添加挂载卷映射,并在yaml中配置对应的路径即可。 如何获取CPU序列号和主板序列号 在Linux环境中使用dmidecode命令 # 获取CPU序列号 dmidecode -s system-serial-number # CPU序列号 7*****1 # 获取主板序列号 dmidecode -s baseboard-serial-number # 主板序列号 ..CN*******V01Y7. # 获取系统UUID dmidecode -s system-uuid # 系统UUID 4c4xxxxx-xxxx-xxxx-xxxx-xxxxxxxx5831 在Mac环境中使用system_profiler命令 # 获取CPU序列号 system_profiler SPHardwareDataType | grep 'Serial Number' | awk -F ':' '{print $2}' # CPU序列号 C02******03Y # 获取主板序列号 system_profiler SPHardwareDataType | grep 'Hardware UUID' | awk -F ':' '{print $2}' # 主板序列号 1AAxxxxx-xxxx-xxxx-xxxx-xxxxxxxxF0FC 在Windows环境中使用wmic命令 # 获取CPU序列号 wmic cpu get processorid # CPU序列号 BFExxxxxxxxxx6A3 # 获取主板序列号 wmic baseboard get serialnumber # 主板序列号 PFxxxxBY # 获取系统UUID wmic csproduct get uuid # 系统UUID D0Exxxxx-xxxx-xxxx-xxxx-xxxxxxxx78B8 在Linux环境出现dmidecode命令执行失败该如何处理? 1. 命令未找到,可使用如下方式尝试安装 # debian (eg: Ubuntu) apt-get install dmidecode # rpm (eg: Fedora/CentOS/RedHat) yum install dmidecode 2. 无权限执行命令,尝试切换当前执行用户或为当前用户提高执行权限 在docker环境出现证书安装失败该如何处理? 1. 由于docke环境非物理环境,不支持CPU序列号和主板序列号校验,尝试更换许可证。 2. 检查许可证在镜像中的位置是否与配置文件中一致。 许可证安装失败该如何处理? 1. 日志出现License installation failed.信息 PS:对JDK版本依赖的问题已在5.0.0版本以上得到完整解决,此问题仅会出现在低版本的平台版本中。 请检查jdk版本是否高于1.8_221以上。 如无法升级jdk版本的环境下,请点击下载 jce_policy-8.zip 并按照如下步骤进行操作:…

    2024年6月19日
    5.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.6K10

Leave a Reply

Please Login to Comment