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

阅读之前

你应该:

名词解释

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

概述

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

场景

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

我们可以做出这些优化:

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

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

相关推荐

  • 项目中工作流引入和流程触发

    目录 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.8K00
  • 如何排查启动依赖错误的问题

    场景 启动的时候可能会出现以下错误提示 启动模块中包含jar包或者数据库中不存在的模块 启动模块中包含不存在的模块 启动模块互斥模块中包含已安装模块 排查项 确保启动工程的application.yml中的启动模块pamirs.boot.modules配置项内的模块在pom.xml内依赖了对应模块的jar包 确保出问题的模块的定义文件内的包扫描前缀packagePrefix方法内的路径定义正确,该路径可以是多个,但是一定要包含模块下所有子工程的路径,包括但不限于api子工程、core工程等,另外该路径也不能和其他模块的配置有重复、交集、包含关系(例如:a模块是 aa.bb.cc, b模块是aa.bb,这样b模块的路径就包含了a模块的) 启动类里spring自带的@ComponentScan.basePackages注解项需要包含所有依赖模块的路径 无代码应用创建的时候,配置了依赖模块。但这个依赖没有被本地安装,该模块就会出问题,要么删除该依赖,要么在代码里添加该依赖。

    2024年7月18日
    1.9K00
  • 分部式缓存配置优化

    介绍 分布式缓存是为了解决以下2个场景 开发时,设计器和开发者本地业务工程同步元数据用的 多模块分部式部署架构 单机版的生产环境是不需要这个特性的,所以默认的启动配置不建议加分布式缓存的依赖包,只在开发环境开启即可 boot启动工程的pom.xml文件配置示例 <project> <profiles> <profile> <!– 下面配置的值根据 spring.profiles.active 识别 –> <id>dev</id> <!– 开发环境增加分布式依赖,支持设计器可以正确访问业务工程 –> <dependencies> <dependency> <groupId>pro.shushi.pamirs.distribution</groupId> <artifactId>pamirs-distribution-faas</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.distribution</groupId> <artifactId>pamirs-distribution-session</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.distribution</groupId> <artifactId>pamirs-distribution-gateway</artifactId> </dependency> </dependencies> </profile> </profiles> </project>

    2024年7月10日
    1.7K00
  • 【PostgreSQL】后端部署使用PostgreSQL数据库

    PostgreSQL数据库配置 驱动配置 Maven配置(14.3版本可用) <postgresql.version>42.6.0</postgresql.version> <dependency> <groupId>org.postgresql</groupId> <artifactId>postgresql</artifactId> <version>${postgresql.version}</version> </dependency> 离线驱动下载 postgresql-42.2.18.jarpostgresql-42.6.0.jarpostgresql-42.7.3.jar JDBC连接配置 pamirs: datasource: base: type: com.alibaba.druid.pool.DruidDataSource driverClassName: org.postgresql.Driver url: jdbc:postgresql://127.0.0.1:5432/pamirs?currentSchema=base username: xxxxxx password: xxxxxx 连接url配置 暂无官方资料 url格式 jdbc:postgresql://${host}:${port}/${database}?currentSchema=${schema} 在jdbc连接配置时,${database}和${schema}必须完整配置,不可缺省。 其他连接参数如需配置,可自行查阅相关资料进行调优。 方言配置 pamirs方言配置 pamirs: dialect: ds: base: type: PostgreSQL version: 14 major-version: 14.3 pamirs: type: PostgreSQL version: 14 major-version: 14.3 数据库版本 type version majorVersion 14.x PostgreSQL 14 14.3 PS:由于方言开发环境为14.3版本,其他类似版本(14.x)原则上不会出现太大差异,如出现其他版本无法正常支持的,可在文档下方留言。 schedule方言配置 pamirs: event: enabled: true schedule: enabled: true dialect: type: PostgreSQL version: 14 major-version: 14.3 type version majorVersion PostgreSQL 14 14.3 PS:由于schedule的方言在多个版本中并无明显差异,目前仅提供一种方言配置。 其他配置 逻辑删除的值配置 pamirs: mapper: global: table-info: logic-delete-value: (EXTRACT(epoch FROM CURRENT_TIMESTAMP) * 1000000 + EXTRACT(MICROSECONDS FROM CURRENT_TIMESTAMP))::bigint PostgreSQL数据库用户初始化及授权 — init root user (user name can be modified by oneself) CREATE USER root WITH PASSWORD 'password'; — if using automatic database and schema creation, this is very important. ALTER USER root CREATEDB; SELECT * FROM pg_roles; — if using postgres database, this authorization is required. GRANT CREATE ON DATABASE postgres TO root;

    2023年11月1日
    1.6K00
  • 开源日志平台:Graylog部署及接入

    一、部署Graylog Graylog总共需要3个服务:graylog服务端、mongodb(存储graylog的配置)、elasticSeach(存储日志)本文档部署方案介绍: graylog服务端、mongodb(存储graylog的配置)使用docker-compose部署 elasticSeach 引用外部地址 1. 安装docker、安装docker-compose 这部分直接参考互联网上的教程:链接 2. 通过docker-compose部署graylog 服务器上新建一个 graylog的目录,并在该目录下新建 docker-compose.yml version: '3' services: mongo: image: mongo:5.0 container_name: mongo volumes: – /data/docker/graylog/mongo_data:/data/db networks: – graylog ports: – 27017:27017 environment: – TZ=Asia/Shanghai healthcheck: test: ["CMD", "mongo", "–eval", "db.adminCommand('ping')"] interval: 30s timeout: 10s retries: 5 graylog: image: graylog/graylog:5.2 container_name: graylog depends_on: mongo: condition: service_healthy environment: – GRAYLOG_ROOT_PASSWORD_SHA2=xxxxx #sha2生成的密码,可以服务器通过命令获取:echo -n yournewpassword | sha256sum – GRAYLOG_PASSWORD_SECRET=xxxxx #随机生成的secret,长度超过32位,可以自己生成 – GRAYLOG_HTTP_ENABLE_TLS=false – GRAYLOG_TIMEZONE=Asia/Shanghai – GRAYLOG_MONGO_URI=mongodb://mongo:27017/graylog – GRAYLOG_ELASTICSEARCH_VERSION=7 – GRAYLOG_ELASTICSEARCH_HOSTS=http://es账户:es密码@es地址:9200 – GRAYLOG_ELASTICSEARCH_USER=es账户 – GRAYLOG_ELASTICSEARCH_PASSWORD=es密码 – GRAYLOG_HTTP_EXTERNAL_URI=http://访问地址/ – GRAYLOG_HTTP_PUBLISH_URI=http://访问地址/ – GRAYLOG_PLUGIN_SYSTEM_LANGUAGESELECTOR_DEFAULT_LOCALE=zh_CN – TZ=Asia/Shanghai networks: – graylog ports: – "9000:9000" – "514:514" – "514:514/udp" – "12201:12201" – "12201:12201/udp" volumes: mongo_data: driver: local graylog_data: driver: local networks: graylog: driver: bridge 上面的配置根据自己的环境,重新配置。注意点:elasticSearch如果存在账密的化,参考下GRAYLOG_ELASTICSEARCH_XXX这几个配置,进行调整。 3. 启动graylog # 1. 启动执行 docker-compose up -d # 2. 如果希望调整docker-compose.yml的配置,需要先关闭,再重启 ## 2.1 先关闭graylog的应用 docker-compose down ## 2.2 修改完文件后,再执行启动命令 docker-compose up -d # 3.查看启动日志,确认是否完成启动 docker logs mongo; docker logs graylog; 4. 配置graylog 日志传输,建议采用UDP协议,其次包括graylog的踩坑记录,参考如下文档:参考1参考2 二、java应用接入Graylog 1. pom新增依赖 <!–logback gelf日志收集–> <dependency> <groupId>biz.paluch.logging</groupId> <artifactId>logstash-gelf</artifactId> <version>1.15.0</version> </dependency> 2. 配置logback.xml文件,同时增加traceId、spanId方便链路日志的追踪 a. 配置 Logback 以支持 MDC,在 logback.xml 中配置 GelfLogbackAppender,并确保包括 traceId 和 spanId 字段: <configuration> <appender name="GELF" class="biz.paluch.logging.gelf.logback.GelfLogbackAppender"> <host>udp:graylog的地址</host> <!– graylog 服务器ip –> <port>graylog开放的端口</port>…

    2024年5月30日
    4.2K00

Leave a Reply

Please Login to Comment