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

阅读之前

你应该:

名词解释

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

概述

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

场景

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

我们可以做出这些优化:

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

相关推荐

  • 后端无代码设计器Jar包启动方法

    下载Oinone专属启动器 oinone-boot-starter.zip Mac OS平台启动 # 直接运行 ./darwin-boot java -jar ./pamirs-designer-boot-4.7.0.jar # nohup后台运行 nohup ./darwin-boot java -jar ./pamirs-designer-boot-4.7.0.jar > out.log 2>&1 & Mac OS(arm64架构)平台启动 # 直接运行 ./darwin-boot-arm64 java -jar ./pamirs-designer-boot-4.7.0.jar # nohup后台运行 nohup ./darwin-boot-arm64 java -jar ./pamirs-designer-boot-4.7.0.jar > out.log 2>&1 & Linux平台启动 # 直接运行 ./linux-boot java -jar ./pamirs-designer-boot-4.7.0.jar # nohup后台运行 nohup ./linux-boot java -jar ./pamirs-designer-boot-4.7.0.jar > out.log 2>&1 & Linux(arm64架构)平台启动 # 直接运行 ./linux-boot-arm64 java -jar ./pamirs-designer-boot-4.7.0.jar # nohup后台运行 nohup ./linux-boot-arm64 java -jar ./pamirs-designer-boot-4.7.0.jar > out.log 2>&1 & Windows平台启动 .\win-boot.exe java -jar .\pamirs-designer-boot-4.7.0.jar 说明 上述命令使用的java -jar与常规使用方式完全相同。 Oinone无代码设计器不支持使用javaagent参数。 常用启动脚本 #!/bin/bash # 脚本所在目录 home=$(cd "$(dirname "$0")" && pwd) # 启动jar路径 jarPath=$home/pamirs-designer-boot-4.7.0.jar # 配置路径 applicationPath=$home/application.yml # 许可证信息 subject= licensePath= nohup $home/linux-boot java -Duser.timezone=GMT+08:00 -Dhttps.protocols=TLSv1.2 -Dfile.encoding=UTF-8 \ -jar $jarPath \ –spring.config.location=$applicationPath \ -Psubject=$subject \ -Plicense=$licensePath \ -Plifecycle=INSTALL > $home/out.log 2>&1 & sleep 1 tail -200f $home/out.log 出现cannot execute binary file异常该如何处理? 问题原因 Oinone专属启动器是通过go语言进行编译并执行,对于不同的操作系统架构需要分别编译。 解决方案 物理机安装go语言环境。 下载boot.go文件,放在run目录下。(需询问Oinone客服获取最新boot.go文件) 进入run目录,执行go build -o "boot-starter" "boot.go"命令。 在startup.sh命令中添加-v $home/run/boot-starter:/opt/pamirs/run/boot-starter \将文件挂载到容器。 删除docker容器后再执行startup.sh脚本重启镜像即可。 出现failed to open elf at /lib64/ld-linux-x86-64.so.2异常该如何处理? 问题原因 部分arm64架构的宿主机无法兼容amd64环境中编译的linux-boot启动器,需要将启动器换为linux-boot-arm64。 解决方案 下载oinone-boot-starter.zip并解压,获取linux-boot-arm64启动器。 将启动器放在run目录下。 在startup.sh命令中添加-v $home/run/linux-boot-arm64:/opt/pamirs/run/boot-starter替换镜像中的启动器。 删除docker容器后再执行startup.sh脚本重启镜像即可。

    2024年5月17日
    1.6K00
  • 【Oracle】后端部署使用Oracle数据库

    Oracle数据库配置 驱动配置 jdbc仓库 https://mvnrepository.com/artifact/com.oracle.database.jdbc/ojdbc8 Maven配置(11g版本可用) <ojdbc.version>23.2.0.0</ojdbc.version> <dependency> <groupId>com.oracle.database.jdbc</groupId> <artifactId>ojdbc8</artifactId> <version>${ojdbc.version}</version> </dependency> JDBC连接配置 pamirs: datasource: base: type: com.alibaba.druid.pool.DruidDataSource driverClassName: oracle.jdbc.OracleDriver url: jdbc:oracle:thin:@//127.0.0.1:1521/orcl username: YOUR_SCHEMA_NAME password: xxxxxx Oracle默认为每个用户创建了一个与当前用户名同名的模式,每个用户应该只使用该模式(DBA用户除外),因此平台使用Oracle时应该通过username处指定与该模式同名的用户名来指定模式。(Oracle多数据源时每一个数据库创建一个用户) 创建用户时用户名应全大写。 连接url配置 官方文档 https://odbc.postgresql.org/docs/config-opt.html url格式 jdbc:oracle:thin:@//ip:端口号/服务名或SID 每一个Oracle进程默认为一个Oracle数据库实例,使用服务名或sid登录该Oralce数据库实例。一个Oracle sid 对应一个数据库实例,而一个服务名可以标识多个数据库实例。远程连接时推荐使用服务名进行连接。可以在安装Oracle的机器上打开SQLPlus,用SYSTEM用户登录上去后使用SELECT SYS_CONTEXT('USERENV', 'INSTANCE_NAME') AS SID FROM DUAL;查询登录使用的sid;也可以使用SELECT VALUE AS SERVICE_NAME FROM V$PARAMETER WHERE NAME = 'service_names';查询登录使用的服务名。 其他连接参数如需配置,可自行查阅相关资料进行调优。 方言配置 pamirs方言配置 pamirs: dialect: ds: base: type: Oracle version: 11.2 major-version: 11g pamirs: type: Oracle version: 11.2 major-version: 11g plus: configuration: jdbc-type-for-null: "NULL" using-model-as-property: true using-statement-handler-dialect: true mapper: batch: useAffectRows global: table-pattern: '${table_30}' column-pattern: '${column_30}' 数据库版本 type version majorVersion 11g – 11.2.0.1.0 Oracle 11.2 11g 12c – 12.2.0.1.0 Oracle 12.2 12c PS:由于方言开发环境为Oracle Database 11g Enterprise Edition Release 11.2.0.1.0版本,其他类似版本(11.2.x)原则上不会出现太大差异,如出现其他版本无法正常支持的,可在文档下方留言。 schedule方言配置 pamirs: event: enabled: true schedule: enabled: true dialect: type: Oracle version: 11.2 major-version: 11g 其他配置 逻辑删除的值配置 pamirs: mapper: global: table-info: logic-delete-value: (CAST(SYSTIMESTAMP AS DATE) – TO_DATE('1970-01-01 08:00:00', 'YYYY-MM-DD HH24:MI:SS')) * 8640000000000 Oracle数据库用户初始化及授权 — 以下命令均使用dba账户执行 — 创建用户 ONE_TEST (用户名需全大写) 密码 123456 CREATE USER ONE_TEST IDENTIFIED BY 123456; — 解锁用户 ALTER USER ONE_TEST ACCOUNT UNLOCK; — 将用户的默认表空间设置为USERS,临时表空间设置为TEMP ALTER USER ONE_TEST DEFAULT TABLESPACE USERS; ALTER USER ONE_TEST TEMPORARY TABLESPACE TEMP; — 可以用以下命令查询某用户的表空间: SELECT…

    2025年7月10日
    51200
  • 数据可视化中图表的低无一体

    介绍 数据可视化提供了自定义图表模板的功能,以满足现有图表模板无法满足业务需求的情况。 如何使用 点击数据可视化页面头部的“图表模板” 点击创建按钮后弹出图表模板表单,填写后提交保存 找到刚刚创建的图表模板,点击操作栏中的“低无一体”按钮 点击弹窗底部的“生成sdk”按钮 上一步操作完成后会重新刷新页面,再次找到该条数据,点击“低无一体”按钮,再次进来可以看到“下载模板工程”的按钮已经可以点击了,点击该按钮就可以下载到该自定义图表模板的示例代码包文件kunlun-chart-sdk.zip 解压kunlun-chart-sdk.zip后我们可以看到工程结构,在根目录下执行npm i安装依赖 可以看到packages/kunlun-plugin/src/chart/CUSTOM_BAR.vue是我们自定义的图表vue组件,可以修改里面的自定义展示和逻辑处理 完成自定义代码后去根目录运行npm run build打包代码,打包后可以在packages/kunlun-plugin/dist下看到打包后的js和css文件(如模板中无css则不会生成css文件,无需理会) 回到自定义图表模板的管理页面,找到对应的数据行,再次点击“低无一体”按钮,在弹窗内上传上一步生成的kunlun-plugin.umd.js和kunlun-plugin.css文件,上传完成后点击弹窗底部的“确定”按钮保存 进入图表的编辑页面,在图表分类选择处,可以看到柱状图的分类下有我们新增的“自定义柱状图”的子类,点击切换 切换后可以看到图表已经从开始柱状图变成了我们在前面自定义的蓝色边框样式,内部是hello chart文字的图表。 示例自定义图表组件 本例子以echarts的图表库实现柱状图,框架自带的是以G2的库实现的柱状图demo-echarts-bar.vue <template> <div class="data-designer-chart-instance demo-echarts-bar" ref="designerChartViewRef"> <div class="data-designer-chart-container" ref="designerChartViewInnerRef"></div> </div> </template> <script lang="ts"> import { defineComponent, onMounted, ref, watch } from 'vue'; import DataSet from '@antv/data-set'; import * as echarts from 'echarts/core'; import { ECharts, EChartsCoreOption } from 'echarts/core'; import { GridComponent } from 'echarts/components'; import { BarChart, BarSeriesOption } from 'echarts/charts'; import { CanvasRenderer } from 'echarts/renderers'; import { deepClone } from '@kunlun/dependencies'; import { filterDimensionScaleColumns, isSameObj, ChartTypeEnum, IChartData, IChartDataResult, chartViewMixin, isNeedRerenderChart, isShowChatView, watchEchartsSize, ChartRenderEngine } from '@kunlun/data-designer-core'; echarts.use([GridComponent, BarChart, CanvasRenderer]); export default defineComponent({ props: { …chartViewMixin.props }, data() { return { engine: ChartRenderEngine.ECHARTS, chartType: [ChartTypeEnum.MAP_CHINA] }; }, mixins: [chartViewMixin], setup(props, { emit }) { const chart = ref<ECharts>(); const designerChartViewRef = ref<HTMLElement>(null as any); const designerChartViewInnerRef = ref<HTMLElement>(null as any); onMounted(() => { initChart(); }); let option = {} as EChartsCoreOption; function initChart() { chart.value = echarts.init(designerChartViewInnerRef.value); option = { yAxis: { type: 'value' } }; } let oldChartData = {} as IChartData; watch( () => props.chartData, (newVal) =>…

    2023年11月1日
    1.2K00
  • 如何配置文件存储地址为相对路径

    介绍 大部分情况下,文件存储的配置都会配置uploadUrl和downloadUrl的值,这样图片和文件类型的业务字段会存储带域名的全路径文件地址,但是有些场景需要用户在专有内网的时候访问内网的文件存储地址,用户在公网的时候通过公网访问(一般情况下这个公网ip内部最后还是会转发到内网)文件存储地址,这个时候就要求存在数据库字段里的不能是全路径的地址,只能是想相对路径,这个时候可以通过前端访问的域名用nginx转发当前域名下的文件请求到所匹配环境的ip内的文件存储服务。 配置参考 cdn: oss: name: 本地文件NG系统 type: LOCAL bucket: pamirs # 此处可以不配置值,也可以配置相对路径前缀方便做转发 uploadUrl: downloadUrl: validTime: 3600000 timeout: 600000 active: true referer: localFolderUrl: /test/static 文件上传的路径同步配置nginx转发 location ~ /file/upload { // 此处配置为后端服务的ip+端口 proxy_pass http://127.0.0.1:8190; proxy_set_header X-Real-IP $remote_addr; proxy_set_header REMOTE-HOST $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } excel导入场景相对路径在后端代码内无法保存导入的文件 在导入任务的前置hook处理相对文件路径的前缀 package pro.shushi.pamirs.demo.core.hook; import org.apache.commons.lang.StringUtils; import org.springframework.stereotype.Component; import pro.shushi.pamirs.file.api.FileModule; import pro.shushi.pamirs.file.api.model.ExcelImportTask; import pro.shushi.pamirs.meta.annotation.Hook; import pro.shushi.pamirs.meta.api.core.faas.HookBefore; import pro.shushi.pamirs.meta.api.dto.fun.Function; @Component public class DemoExcelImportTaskActionHookBefore implements HookBefore { // 内网访问文件的地址 public static final String INNER_HOST = "http://127.0.0.1:6800"; @Override @Hook(module = {FileModule.MODULE_MODULE}, model = {ExcelImportTask.MODEL_MODEL}, fun = {"createImportTask"}) public Object run(Function function, Object… args) { if (args.length > 0) { ExcelImportTask excelImportTask = (ExcelImportTask) args[0]; if (excelImportTask != null && excelImportTask.getFile() != null && StringUtils.isNotBlank(excelImportTask.getFile().getUrl())) { excelImportTask.getFile().setUrl(INNER_HOST + excelImportTask.getFile().getUrl()); } } return null; } } 注意事项 上面的例子为本地文件NG系统的,如果是阿里云oss、7牛云等第三方文件存储服务,downloadUrl可以按上面方案直接配置,uploadUrl还是要按正常配置

    2024年6月21日
    1.8K00
  • 低代码示例工程oinone-example启动说明

    运行低代码后端示例工程 1. 前置准备 1.1. 解压(部署.zip),找到后端工程oinone-example 1.2.下载idea以及安装平台的idea插件 1.2.1 jdk安装(已安装请忽略) 如本机环境没有安装jdk8(jdk1.8.221+),需先安装:mac:https://doc.oinone.top/oio4/9225.htmlwindow:https://doc.oinone.top/oio4/9226.html 1.2.2 idea的插件安装教程: mac:https://doc.oinone.top/oio4/9225.htmlwindows:https://doc.oinone.top/oio4/9226.html 1.2.3 maven下载安装(已安装请忽略) mvn下载地址,推荐安装3.6.3https://archive.apache.org/dist/maven/maven-3/3.6.3/binaries/mac:https://doc.oinone.top/oio4/9225.htmlwindows:https://doc.oinone.top/oio4/9226.html 2. 修改bootstrap.yml中运行环境配置 修改其中zk的IP:192.168.0.121->改成docker安装的宿主机IP默认profiles设置是dev,注意对应生效的yml文件为applicaiton-dev.yml spring: profiles: active: dev application: name: pamirs-project cloud: service-registry: auto-registration: enabled: false pamirs: default: environment-check: true tenant-check: true — spring: profiles: dev cloud: service-registry: auto-registration: enabled: false config: enabled: false uri: http://127.0.0.1:7001 label: master profile: dev nacos: server-addr: http://127.0.0.1:8848 discovery: enabled: false namespace: prefix: application file-extension: yml config: enabled: false namespace: prefix: application file-extension: yml dubbo: application: name: pamirs-project version: 1.0.0 registry: address: zookeeper://192.168.0.121:2182 protocol: name: dubbo port: 20880 serialization: pamirs consumer: timeout: 5000 provider: timeout: 5000 scan: base-packages: pro.shushi cloud: subscribed-services: 3. 修改application-dev.yml中对应中间件的IP和端口 3.1 redis 修改对应redis的IP端口以及密码 spring: redis: database: 0 host: 192.168.0.121 #改成docker安装的宿主机IP port: 6378 timeout: 5000 password: Abc@1234 3.2 mysql 如自行安装mysql,直接改成mysql的IP和账号信息如直接使用docker提供的mysql,则修改对应的IP为docker安装的宿主机IP biz: driverClassName: com.mysql.cj.jdbc.Driver type: com.alibaba.druid.pool.DruidDataSource url: jdbc:mysql://192.168.0.121:3307/demo_biz?useSSL=false&allowPublicKeyRetrieval=true&useServerPrepStmts=true&cachePrepStmts=true&useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai&autoReconnect=true&allowMultiQueries=true username: root password: Abc@1234 initialSize: 5 maxActive: 200 minIdle: 5 maxWait: 60000 timeBetweenEvictionRunsMillis: 60000 testWhileIdle: true testOnBorrow: false testOnReturn: false poolPreparedStatements: true asyncInit: true pamirs: driverClassName: com.mysql.cj.jdbc.Driver type: com.alibaba.druid.pool.DruidDataSource url: jdbc:mysql://192.168.0.121:3307/demo_pamirs?useSSL=false&allowPublicKeyRetrieval=true&useServerPrepStmts=true&cachePrepStmts=true&useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai&autoReconnect=true&allowMultiQueries=true username: root password: Abc@1234 initialSize: 5 maxActive: 200 minIdle: 5 maxWait: 60000 timeBetweenEvictionRunsMillis: 60000 testWhileIdle: true testOnBorrow: false testOnReturn: false poolPreparedStatements:…

    2023年11月11日
    3.5K00

Leave a Reply

登录后才能评论