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

阅读之前

你应该:

名词解释

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

概述

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

场景

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

我们可以做出这些优化:

将【商品类目】的【上级类目】组件改为【级联】组件。其第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开发的业务应用部署与升级

    应用部署 中间件及资源要求 用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日
    90500
  • 工作流动态表单最佳实践

    需求背景 为了提高操作效率并简化流程设计过程,应对伙伴们反映的在流程设计器中,即使填写/审批流程相同,不同模型也需重新配置的问题,我们引入了“动态表单”功能。此功能旨在减少重复配置的需求,通过设置节点名称和绑定视图,便可实现审批流程相同而视图不同,从而使得相同的审批流程可以被高效重复利用。 为确保伙伴们能够更加方便的使用动态表单,我们将典型示例整合至“工作流”中。本节将结合这些示例详细阐述“动态表单”功能的应用方法。 使用主要分为两个步骤:流程设计和动态表单配置。 流程设计 触发节点配置 应用:工作流 选择模型:动态表单任务 触发场景:更新数据时 选择更新字段:触发次数 填写/审批节点配置 动态表单按钮设置为启用状态。 数据来源设置为触发节点。 动态表单函数默认有一条内置函数,选中即可。 数据保存方式、填写人等信息,同从前使用方式。 在动态表单模式下,数据权限的管理将不再由流程设计器控制,而是由用户所填写的视图进行控制。 例如,若希望用户在“一审”阶段不能修改某字段,则应在设计视图时将相关字段设为只读模式。同样,若某些信息不宜在“一审”阶段展示给客户,相应字段应在设计过程中被设置为隐藏状态。 若需在“一审”节点接收“一填”阶段的结果,数据来源设置为“一填[动态表单]”。其他配置项保持不变,按照上述说明进行设置。 若希望“二填”节点的数据由用户填写,并希望内容处于空白状态,可将数据来源设置为“触发”节点。 通过这种配置,“二填”节点的数据将不会受到“一填”和“一审”节点数据的影响。 二审节点的配置同一审,此处省略。 “终审”节点希望接收到“一审”节点的数据,可以将数据来源设置为一审。 动态表单配置 首先创建动态表单任务:工作流->动态表单任务->创建,给流程起个名字。 节点任务配置 流程名:通过下拉菜单选择,数据为动态表单任务中,创建的流程信息。 节点名称:【强制】确保与流程设计中的节点名称完全一致,否则将无法正确匹配到对应节点的视图。 模型:选定用于绑定节点视图的模型。 视图:选择视图前须先确定模型,系统将自动列出所选模型下的通过UI创建的视图供选择。 查看配置效果 在工作流模块->动态表单->动态表单任务,点击“详情”,可以看到该流程所配置的节点信息。 动态表单任务详情页 流程触发 点击“触发”按钮将使触发次数自动递增。在流程设计器中配置触发节点时,我们已设定“触发次数”字段的变化作为流程启动的条件。 触发节点配置筛选条件 通过完成上述操作,我们已成功配置动态表单。现在可以利用触发节点的筛选条件,来确定触发按钮被点击后,所启动的流程。 自定义动态表单函数 如果所提供的示例未能满足您的需求,您可以根据自身的需求,对触发条件和动态表单函数进行相应的定制与调整。 动态表单函数定义规则如下: namespace:强制为 WorkflowFunctionConstant.FUNCTION_NAMESPACE。 fun:强制以 WorkflowFunctionConstant.WORKFLOW_CUSTOM_VIEW_FUNCTION_PREFIX 为前缀。 入参说明: 参数1:节点数据,例如,配合instanceof可以判断当前是填写节点(WriteNode)还是审批节点(ApprovalNode)。 参数2:触发节点的模型数据,如果您的触发节点不确定,可以通过Map接收参数。 参数3:该节点所配置数据来源的数据。 出参说明:视图,如果出参为null,流程终止运行,错误信息提示为“流程节点执行失败,动态表单函数获取视图为空”。 @Slf4j @Component @Fun(WorkflowFunctionConstant.FUNCTION_NAMESPACE) public class DynamicFormCustom { /** * 根据动态表单任务获取视图 * * @param node 节点数据 * @param dynamicFormTask 触发节点数据 * @param dataObj 源数据 */ @Function.fun(WorkflowFunctionConstant.WORKFLOW_CUSTOM_VIEW_FUNCTION_PREFIX + "fetchDynamicFormFunction") @Function.Advanced(displayName = "[内置]获取动态表单函数") @Function(name = "fetchDynamicFormFunction") public View fetchDynamicFormFunction(Node node, DynamicFormTask dynamicFormTask, Map<String, Object> dataObj) { DynamicFormTaskNode dynamicFormTaskNode = fetchDynamicFormTaskNode(node, dynamicFormTask); if (dynamicFormTaskNode == null) { return null; } dynamicFormTaskNode.fieldQuery(DynamicFormTaskNode::getView); return dynamicFormTaskNode.getView(); } private DynamicFormTaskNode fetchDynamicFormTaskNode(Node node, DynamicFormTask dynamicFormTask) { List<DynamicFormTaskNode> dynamicFormTaskNodeList = Models.origin().queryListByWrapper(Pops.<DynamicFormTaskNode>lambdaQuery() .from(DynamicFormTaskNode.MODEL_MODEL) .eq(DynamicFormTaskNode::getNodeName, node.getNodeName()) .eq(DynamicFormTaskNode::getTaskCode, dynamicFormTask.getCode()) ); if (CollectionUtils.isEmpty(dynamicFormTaskNodeList)) { return null; } if (dynamicFormTaskNodeList.size() > 1) { log.error("工作流动态获取表单函数视图匹配多个,{}", JsonUtils.toJSONString(dynamicFormTaskNodeList)); } return dynamicFormTaskNodeList.get(0); } }

    2024年8月22日
    3.7K00
  • 数据可视化-项目中如何引用图表、报表、大屏

    依赖包 在业务工程的pom中增加数据可视化运行的依赖包 参考文档 如何添加数据可视化运行时依赖 数据可视化设计图表、报表和数据大屏 在数据可视化中设计好业务合适的图表,并且发布以后,在界面设计器中可以嵌入该图表同样处理的还有报表 在界面设计器中在页面中透出图表、报表和数据大屏 设置图表,选择已经对应的图表 可在表单以及详情的页面中嵌入对应的图表、报表和数据大屏 更新图表、报表和数据大屏 修改图表以后,需要更新发布,对应业务页面上才会更新最新的图表

    2024年5月18日
    1.4K00
  • 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日
    1.1K00
  • 界面设计器的导入导出

    目录 依赖包安装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 { uiDesignerExportReqMutation { download/export( data: { module: "demo_core", fileName: "demo_meta", moduleBasics: false } ) { jsonUrl } } } module参数:模块编码; fileName参数:指定⽣成的json⽂件名称; moduleBasics参数:指定是否只导出模块基础数据,如果为true,只导出内置布局、模块菜单、菜单关联的动作。 如果为false,还会导出模块内的所有页⾯,以及页⾯关联的动作元数据、页⾯设计数据 等等。 默认值为false。 按菜单导出 mutation { uiDesignerExportReqMutation { download/export( data: { menu: { name: "uiMenu0000000000048001" } fileName: "demo_meta" relationViews: true } ) { jsonUrl } } } menu参数:菜单对象,指定菜单的name。只会导出该菜单及其绑定页⾯,不会递归查询⼦菜单 fileName参数:指定⽣成的json⽂件名称 relationViews参数:指定是否导出关联页⾯,默认为false,只导出菜单关联的页⾯。如果为true,还会导出该页⾯通过跳转动作关联的⾃定义页⾯。 指定页⾯导出 mutation { uiDesignerExportReqMutation { download/export( data: { view: { name: "xx_TABLE_0000000000119001" model: "ui.designer.TestUiDesigner" } fileName: "demo_meta" relationViews: true } ) { jsonUrl } } } view参数:视图对象,指定视图的name和model fileName参数:指定⽣成的json⽂件名称 relationViews参数:指定是否导出关联页⾯,默认为false,只导出菜单关联的页⾯。如果为true,还会导出该页⾯通过跳转动作关联的⾃定义页⾯。 导出组件 导出全部组件数据 mutation { uiDesignerExportReqMutation { downloadWidget/exportWidget(data: { fileName: "demo_widget" }) { jsonUrl } } } fileName参数:指定⽣成的json⽂件名称 注意:⾃定义组件的元数据归属于页⾯设计器(ui_designer) 因此导⼊元数据的模块(module)并不是业务模块。组件导⼊建议使⽤pro.shushi.pamirs.metadata.manager.core.helper.WidgetInstallHelper 导出全部组件⽂件 当开发环境,和导⼊环境的oss不互通时,可通过⼀下⽅法导出⾃定义组件的css和js⽂件压缩包,在导⼊时⽀持指定zip⽂件上传到oss,并替换导⼊组件数据中的css和js⽂件路径。 mutation { uiDesignerExportReqMutation { downloadWidgetFile/exportWidgetFile(data: { fileName: "demo_widget" }) { jsonUrl } } } 业务工程中导入示例代码 导入元数据示例代码(运行时数据) @Slf4j @Order(Integer.MAX_VALUE-1) @Component public class DemoAppMetaInstall implements MetaDataEditor { @Autowired private ApplicationContext applicationContext; @Override public void edit(AppLifecycleCommand command, Map<String, Meta> metaMap) { if (!doImport())…

    2024年5月16日
    1.8K00

Leave a Reply

登录后才能评论