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

阅读之前

你应该:

名词解释

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

概述

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

场景

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

我们可以做出这些优化:

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

相关推荐

  • 如何替换页面中的静态资源为私有存储

    介绍 为了让我们可以快速体验到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.7K00
  • 如何实现页面间的跳转

    介绍 在日常的业务中,我们经常需要在多个模型的页面之间跳转,例如从商品的行可以直接点击链接跳转到类目详情,还有查看该订单发起的售后单列表,这里将给大家展示如何在oinone中如何实现这些功能。 方法一、通过界面设计器的无代码能力配置 表格行跳转到表单页/详情页 拖入一个跳转动作到表格行,保存动作后,在左侧的动作属性面板底部有个请求配置,里面的上下文属性就是配置跳转参数的地方,点击添加按钮可以增加一行参数 点击添加按钮后,可以看到新增了一行,行内有2个输入框,左侧输入框为目标视图模型的字段,右侧输入框为当前视图模型的表达式 注意 表达式中activeRecord关键字代表当前行的数据对象 “上下文”相关知识点 当前页面的模型和跳转后的页面模型相同的情况下,会字段带上当前行数据的id作为路由参数 上下文是从当前页面跳转到下个页面带的自定义参数 上下文会作为跳转后的页面数据加载函数的入参,后端的该函数需要根据该条件查询到数据返回给前端,典型的例子就是编辑页,根据id查询对象的其他字段信息返回 跳转后页面的数据加载函数可以在动作场景的时候选择加载函数,也可以在页面的加载函数处设置 方法二、通过低代码方式在自定义代码中调用 oinone提供了内置函数executeViewAction实现该功能 import { DefaultComparisonOperator, executeViewAction, QueryExpression, RuntimeViewAction, ViewActionTarget, ViewType } from '@kunlun/dependencies'; export class JumpActionWidget { protected goToObjectView() { executeViewAction( { viewType: ViewType.Form, moduleName: 'resource', model: 'resource.ResourceCountry', name: 'redirectUpdatePage', target: ViewActionTarget.Router } as RuntimeViewAction, undefined, undefined, { // 此处为id参数,目前只有表单和详情页需要 id: '12223', // 此处为上下文参数,context内对象的key是目标页面需要传递的默认值 context: JSON.stringify({code: 'xxx'}), // 此处为跳转后左侧菜单展开选中的配置 menu: JSON.stringify({"selectedKeys":["国家"],"openKeys":["地址库","地区"]}) } ); } protected goToListView() { const searchConditions: QueryExpression[] = []; searchConditions.push({ leftValue: ['countryCode'], // 查询条件的字段 operator: DefaultComparisonOperator.EQUAL, right: 'CN' // 字段的值 }); executeViewAction( { viewType: ViewType.Table, moduleName: 'resource', model: 'resource.ResourceCity', name: 'resource#市', target: ViewActionTarget.OpenWindow } as RuntimeViewAction, undefined, undefined, { // searchConditions相当于domain,不会随页面搜索项重置动作一起被清空 searchConditions: encodeURIComponent(JSON.stringify(searchConditions)), // searchBody的字段会填充搜索区域的字段组件,会随页面搜索项重置动作一起被清空 searchBody: JSON.stringify({code: 'CN'}), menu: JSON.stringify({"selectedKeys":["国家"],"openKeys":["地址库","地区"]}) } ); } } 扩展知识点 为什么executeViewAction跳转到的新页面不是入参的moduleName属性对应的模块? 答:跳转后所在的模块优先级为: 第一个入参的resModuleName属性对应的模块 执行executeViewAction时所在的模块 第一个入参的moduleName属性对应的模块 如何快速获取选中菜单的值? 答:先通过页面菜单手动打开页面,然后在浏览器自带调试工具的控制台执行decodeURIComponent(location.href),其中的menu参数就是我们需要的值

    2024年5月13日
    3.2K00
  • 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日
    4.6K00
  • 无代码docker启动说明

    1. 安装docker 1.1 Linux内核系统 1.1.1 检查防火墙(以CentOS7为例) 查看防火墙是否开启 systemctl status firewalld 如防火墙处于开启状态,有2种处理方式,选择其中一种,开发环境如内网环境建议选择处理方案1 处理方案1:停止防火墙 systemctl stop firewalld 处理方案2:开放docker镜像内置中间件透出的端口 88:web访问端口 8099:后端Java服务端口 19876:rocketmq的namesrv端口: 6378:缓存redis的端口 3307:数据库mysql的端口 2182:zookeeper的端口 20880:dubbo的通信端口 15555:预留Java的debug端口 10991:rocketmq的broker端口 查看防火墙已经开放的端口 firewall-cmd –list-ports # 防火墙新增开放端口示例: firewall-cmd –permanent –zone=public –add-port=88/tcp #新增以后生效需要重新加载防火墙 systemctl reload firewalld #查看端口是否开放成功 firewall-cmd –list-ports 也可以从外部使用telnet命令检查端口是否开放成功,如telnet 192.168.0.121 3307 1.1.2 官方安装地址:https://docs.docker.com/engine/install/centos/ #删除原有版本 yum remove docker \ docker-client \ docker-client-latest \ docker-common \ docker-latest \ docker-latest-logrotate \ docker-logrotate \ docker-engine yum install -y yum-utils yum-config-manager –add-repo https://download.docker.com/linux/centos/docker-ce.repo 如果docker这个源异常可以用阿里云的源 #yum-config-manager –add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo yum install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin #启动docker systemctl start docker #查看是否安装成功 docker -v 1.1.3 可使用一键安装脚本 wget https://pamirs.oss-cn-hangzhou.aliyuncs.com/docker/quick-install.sh sh quick-install.sh 1.2 无公网环境Linux系统 需要根据指定的版本以及内核架构来生成对应docker以及镜像包 1.3 window环境 https://docs.docker.com/desktop/install/windows-install/ 2. 解压提供的部署.zip 部署.zip包含: settings-3.6.3.xml:拉取平台jar的maven仓库settings,对应maven版本3.6.x settings-3.8.x.xml:拉取平台jar的maven仓库settings,对应maven版本3.8.x pamirs-demo:后端示例工程 oinone-op-ds-all-full:包含所有中间件及前后端工程,用于启动docker脚本 oinone-op-ds-all-mini:仅包含前后端工程,用于启动docker脚本 license:平台证书 docker和mvn账号信息.md 3. 对应版本的docker镜像拉取 镜像地址 镜像概述 harbor.oinone.top/oinone/designer:4.8.2.4-allinone-full 包含所有中间件及前后端工程 harbor.oinone.top/oinone/designer:4.8.2.4-allinone-mini 仅包含前后端工程 👆🏻上面镜像地址中的4.7.9是示例版本号,具体安装时根据数式提供的为准。 #注意:docker镜像拉取的账号密码在部署.zip里面 docker login –username=用户名 harbor.oinone.top docker pull harbor.oinone.top/oinone/designer:xxx 4. 修改startup.sh中的路径 4.1 linux环境修改参数 在文件中找到如下configDir=/opt/docker/oinone-op-ds-all-fullversion=4.8.2.4IP=192.168.0.121 修改configDir的路径(下载oinone-op-ds-xx.zip解压后的路径) 修改对应的镜像版本号 修改对应的IP为docker宿主机IP 4.2 window环境修改参数 在文件中找到如下set configDir=/d/shushi/docker/oinone-op-ds-all-fullset version=4.8.2.4set IP=192.168.0.121 修改configDir的路径((下载oinone-op-ds-xx.zip解压后的路径) 修改对应的镜像版本号 修改对应的IP为docker宿主机IP 5. (用oinone-op-ds-all-full版本可跳过)修改conf/application.yml 对应中间件的配置:指定对应IP和端口或密码,把其中192.168.0.121改为宿主机IP zookeeper mysql rocket-mq redis 阿里云oss配置 6. 修改mq/broker.conf(**注意:使用allinone-full包含中间件版本) 修改其中brokerIP1的IP从192.168.0.121改成宿主机IP brokerClusterName = DefaultCluster namesrvAddr=127.0.0.1:9876 brokerIP1=192.168.0.121 brokerName = broker-a brokerId = 0 deleteWhen = 04 fileReservedTime = 48 brokerRole = ASYNC_MASTER flushDiskType = ASYNC_FLUSH autoCreateTopicEnable=true…

    2023年11月6日
    1.8K00
  • 集成开放-开放接口如何鉴权加密

    使用前提 已经阅读过文档【oinone 7天从入门到精通】的6.2章节-集成平台 已经依赖了内置模块集成平台eip和集成设计器eip_designer 一、为调用方创建应用 方式一: 通过集成设计器创建 可以选择开发接口列表中哪些接口授权该应用开放使用 方式二: 通过手动请求创建 curl –location 'http://127.0.0.1:8190/pamirs/eip' \ –header 'Content-Type: application/json' \ –header 'Cookie: pamirs_uc_session_id=3b3ed2fcade84fc49f2d94146a7694a0' \ –data '{"query":"mutation {\n eipApplicationProxyProxyMutation {\n create(data: {name: \"testOpen\", encryptType: RSA, description: \"test\"}) {\n name\n encryptType\n description\n openInterfaceList {\n name\n interfaceName\n id\n }\n appKey\n }\n }\n}\n","variables":{}}' 应用创建完成后,可以在表格页面开启使用,再通过查看密钥拿到appKey和appSecret 创建成功后可以获取到应用的appKey和appSecret 二、根据appKey和appSecret获取accessToken curl –location 'http://127.0.0.1:8094/openapi/get/access-token' \ –header 'Content-Type: application/x-www-form-urlencoded' \ –data-urlencode 'appKey=c65a8d76a93f4427b3702c55903ddda2' \ –data-urlencode 'appSecret=W2cMGZ0X6Av0kQOoKT4TWTaBalXkGsignr1M0Yi7+JJWJHVniiTz2mb9THGA7W5F' 三、验证请求 header中的signature签名参数在使用代码调用的时候需要使用教程中的SignUtil.signTopRequest()工具方法生成 curl –location 'http://127.0.0.1:8094/openapi/pamirs/queryById4Open' \ –header 'accessToken: T1SSd8aiJCFhsTyQepLCzRqcVsDH3wTjg9srXEZTp/QwsXdMnjf5OE1Nq/UYfEDp' \ –header 'signature: A1A958E1843E26BA002901058B2964C3' \ –header 'Content-Type: application/json' \ –data '{ "id": "111" }' 示例代码 eip开放接口md5加密参数示例代码此为md5加密方式的示例,解压后,将里面api目录下的文件复制到自有主工程的api子工程下,core目录下的文件复制到自有主工程的core子工程下

    2024年5月31日
    1.0K00

Leave a Reply

Please Login to Comment