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

阅读之前

你应该:

名词解释

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

概述

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

场景

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

我们可以做出这些优化:

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

相关推荐

  • 后端初始化工程启动

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

    2023年11月3日
    1.3K00
  • 创建与编辑一体化

    在业务操作中,用户通常期望能够在创建页面后立即进行编辑,以减少频繁切换页面的步骤。我们可以充分利用Oinone平台提供的创建与编辑一体化功能,使操作更加高效便捷。 通过拖拽实现表单页面设计 在界面设计器中,我们首先需要设计出对应的页面。完成页面设计后,将需要的动作拖入设计好的页面。这个动作的关键在于支持一个功能,即根据前端传入的数据是否包含id来判断是创建操作还是编辑操作。 动作的属性配置如下: 前端自定义动作 一旦页面配置完成,前端需要对这个动作进行自定义。以下是一个示例的代码: @SPI.ClassFactory( ActionWidget.Token({ actionType: [ActionType.Server], model: '模型', name: '动作的名称' }) ) export class CreateOrUpdateServerActionWidget extends ServerActionWidget { @Widget.Reactive() protected get updateData(): boolean { return true; } } 通过以上步骤,我们实现了一个更智能的操作流程,使用户能够在创建页面的同时进行即时的编辑,从而提高了整体操作效率。这种创建与编辑一体化的功能不仅使操作更加顺畅,同时也为用户提供了更灵活的工作流程。

    2023年11月21日
    1.4K00
  • Oinone开发的业务应用部署与升级

    应用部署 中间件及资源要求 用Oinone开发的业务工程后端本质是一个Springboot工程,其部署方式与其他Springboot工程类似; 中间件及版本 Oinone支持的操作系统和中间件版本参考:https://doc.oinone.top/install/middleware/20713.html Oinone启动最小集 包括:Java, MySQL、zk,redis和nginx(或其他httpserver) 中间件 版本 说明 Java(jdk) 1.8 1.8_221+,低于这个版本需要覆盖JCE Reids 4.x、5.x Nginx 版本无特殊要求 MySQL 5.7.x, 8.0.x 推荐8.0.x zk 3.4.x, 3.5.x RocketMQ 4.x,推荐4.7+ 按需安装 硬件资源建议 这里列出的资源列表仅是建议值;实际情况需根据业务数据量和用户访问量进行综合评估。 总体说明:线上部署时数据库强烈建议使用云资源 或者 公司提供的公共资源,并配置完整的数据备份策略(线上环境数据备份很重要) 推荐指标:考虑系统余量(内存峰值使用率<=85%,硬盘三年的使用量<=80%) Oinone业务应用部署,所需要的中间件与用标准的SpringBoot工程相比,并无多大的区别(对Redis性能要求稍等高点,其他的中间件参考项目部署的资源就可以)。下面列举出来的资源是预估值,实际项目可以根据访问量等做对应的调整。 组件 CPU核数 内存 硬盘 实例数 说明 Nginx – – 5G 1 静态资源 zk 2c 1.5G+ 20G 1/3 建议集群版安装 Redis 2c 8G+ 20G 1 可自己搭建,也可用云上资源 MySQL 4c 8G+ 300G+ 1 使用已有资源/云资源, 建议使用云资源 OSS 2c 4G – 1. 使用云上资源或搭建MINIO Oinone业务应用 4c 8G 50G 部署包数 * 2+ 项目初期业务访问量不大的情况下,高可用的场景初期可以使用 2台 4c16G的机器; 不考虑高可用的情况 1台 4c16G机器;强烈建议线上使用高可用的部署策略 后端部署 设计器页面数据导出 若项目中没有用到界面设计器设计器页面,则忽略该步骤。 1、项目中有用到界面设计器设计器页面,首先需要把设计页面导出1.1 通过接口的方式执行导出, 并把调用页面导出的结果JSON数据保存下来; 先执行登录 mutation { pamirsUserTransientMutation { login(user: { login: "admin", password: "admin" }) { needRedirect broken errorMsg errorCode errorField } } } 执行界面数据导出,请求示例: mutation { uiDesignerExportReqMutation { export( data: { module: "demo_core", fileName: "demo_meta", moduleBasics: false } ) { jsonUrl } } } 更多导出方式(如:按菜单导出、按页面导出),参考: https://doc.oinone.top/designer/uidesigner/7294.html 1.2 在应用中心执行导出导出成功后,在应用环境的设计导出中找到导入记录,把到处结果的JSON文件保存下来; 目标环境有设计器 数据数据在应用中心可视化的方式进行设计数据的导入和导出 业务工程中导入设计页面数据 后端工程中把界面设计器的页面数据导入,若无通过界面设计器设计页面时忽略 把上面导出的页面数据(JSON文件)放入到resources目录下,如防止的位置:resources/install/hr_demo_ui.json 业务工程中导入示例代码 package pro.shushi.pamirs.hr.core.init; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.context.ApplicationContext; import org.springframework.core.annotation.Order; import org.springframework.stereotype.Component; import pro.shushi.pamirs.boot.common.api.command.AppLifecycleCommand; import pro.shushi.pamirs.boot.common.extend.MetaDataEditor; import pro.shushi.pamirs.core.common.InitializationUtil; import pro.shushi.pamirs.hr.api.HrSimpleModule; import pro.shushi.pamirs.meta.annotation.fun.extern.Slf4j; import pro.shushi.pamirs.meta.api.dto.meta.Meta; import pro.shushi.pamirs.metadata.manager.core.helper.DesignerInstallHelper; import pro.shushi.pamirs.metadata.manager.core.helper.WidgetInstallHelper; import java.util.Map; @Slf4j @Order(Integer.MAX_VALUE-1) @Component public class DemoAppMetaInstall implements MetaDataEditor {…

    2025年3月18日
    72000
  • 如何替换页面中的静态资源为私有存储

    介绍 为了让我们可以快速体验到oinone的产品,oinone的工程内默认提供了一个阿里云oss的存储空间来存放一些静态资源,如网站在浏览器标签栏的图标、登录页的logo、站内页面的logo、默认头像、背景图等,但是在实际业务中我们需要把其中部分静态资源更换为自有品牌或者客户品牌定制的静态资源。 解决方案 oinone提供了一套可以替换掉默认静态资源的方案 获取静态资源文件的压缩包static.zip 解压到到运维指定的目录下,这里以/project/static为例,前端通过浏览器开发工具查看到需要替换的图片路径,在static目录下找到对应路径的文件,替换为自有文件 配置nginx的文件系统(使用阿里云oss、minio等云存储方案的可以忽略该步骤) server { listen 8899; location /static { alias /project/static; add_header Content-Disposition attachment; add_header Content-Type application/octet-stream; } } 前端启动工程中的.env文件中增加如下配置(ss-boot) STATIC_IMG=http://访问地址/static/images 生产模式重新打包 或 开发模式重新运行就可以看到效果

    2024年3月20日
    1.4K00
  • 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日
    1.4K00

Leave a Reply

登录后才能评论