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

阅读之前

你应该:

名词解释

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

概述

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

场景

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

我们可以做出这些优化:

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

相关推荐

  • nginx如何配置后端服务的负载均衡

    要在Nginx中实现对同一套服务部署两遍并且按比例分配请求,你可以利用Nginx的负载均衡功能。具体做法如下: 步骤 1: 配置 upstream 首先,在Nginx的配置文件(通常是/etc/nginx/nginx.conf或/etc/nginx/sites-available/default,具体路径可能因系统而异)中定义一个upstream块,列出你的两个服务实例。这里假设你的两个服务实例运行在相同的主机上,但监听不同的端口,例如8080和8081。 http { upstream backend { server 192.168.1.100:8091 weight=1; server 192.168.1.101:8091 weight=1; } # … } 在这个例子中,weight=1表示两个服务实例具有相同的权重,Nginx会尽量以1:1的比例分配请求给这两个实例。 步骤 2: 配置 location 或 server 块 接着,在配置文件中找到或添加一个server块,然后在其中的location指令内指定使用刚刚定义的upstream。 server { listen 80; server_name your.domain.com; location / { proxy_pass http://backend; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } } 这里的proxy_pass http://backend;告诉Nginx将请求转发到名为backend的upstream定义的服务器列表中。 步骤 3: 重启Nginx 最后,保存配置文件并重启Nginx以使更改生效。 sudo nginx -t # 先测试配置是否正确 sudo systemctl restart nginx # 或者 service nginx restart,取决于你的系统 注意事项 确保你的两个服务实例是完全独立且状态同步的,以避免数据不一致或服务故障。 使用weight参数可以调整分配策略,如果你想改变分配比例,可以通过修改weight值来实现。 考虑到高可用性,还可以配置max_fails和fail_timeout等参数来处理失败的后端连接。

    2024年6月5日
    95300
  • 集成开放-开放接口如何鉴权加密

    使用前提 已经阅读过文档【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日
    61200
  • 界面设计器 扩展字段的查询上下文

    默认情况下oinone平台对于查询条件,只提供的当前登录用户这一个配置,但是允许开发者扩展 开发者可以在前端代码的main.ts进行扩展 import { SessionContextOptions, ModelFieldType } from '@kunlun/dependencies'; const currentDeptOption = { ttype: ModelFieldType.String, value: '$#{currentDept}', displayName: '当前登录部门', label: '当前登录部门' }; SessionContextOptions.push(currentDeptOption as any); 加上上面的代码,然后再去界面设计器,我们就会发现,多了一个配置

    2023年11月8日
    88100
  • 设计器串联动作使用说明

    工作流串联动作 界面所属模块需要保证依赖模块列表依赖了“工作流”。 低代码依赖模块 <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> 低代码模块 dependencies 需要引用 WorkflowModule.MODULE_MODULE。 流程创建 流程串联动作仅支持模型触发。 说明:当流程满足触发条件后,该流程将自动执行,和是否开启代码手动触发无关。此外,为了适应特定的业务场景,流程串联动作可与触发机制相结合使用。若流程设计为仅需手动触发,则可通过在筛选条件中设置一个恒不成立的逻辑表达式来实现这一需求。 界面设计器配置 在界面设计器的组件库 → 动作中找到“工作流”;仅能选择流程触发模型和当前主视图所属模型相同的流程;按钮点击后,流程触发。 说明 工作流及数据流程动作的触发需确保相关数据的存在,因此在运行时的创建页中,按钮将以禁用状态显示,防止在数据缺失时触发流程。 数据流程串联动作 界面所属模块需要保证依赖模块列表依赖了“工作流”和“集成接口”。 低代码依赖模块 <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-eip2-api</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-eip2-core</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-eip2-view</artifactId> </dependency> 低代码模块 dependencies 需要引用 WorkflowModule.MODULE_MODULE和EipModule.MODULE_MODULE。 界面设计器配置 数据流程触发的配置和使用方式同工作流串联动作。 集成连接器串联动作 准备工作 界面所属模块需要保证依赖模块列表依赖了“集成接口”。 低代码依赖模块 <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-eip2-api</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-eip2-core</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-eip2-view</artifactId> </dependency> 低代码模块 dependencies 需要引用 EipModule.MODULE_MODULE 集成设计器接口配置 首先在集成设计器新增API 已配置Api“根据id查询用户”: 请求地址:/user/queryById/{id} 请求参数: 参数名 参数位置 必填 参数类型 是否数组 字段长度 默认值 参数备注 id Path 是 Integer 用户id[1~43有值] 响应参数: 参数名 参数类型 参数来源 是否数组 取值表达式 参数备注 id String Body 否 data.id 主键 name String Body 否 data.name 姓名 age String Body 否 data.age 年龄 country String Body 否 data.country 国家 gender String Body 否 data.gender 性别 界面设计器 在界面设计器的组件库 → 动作中找到“集成连接器”。 动作按钮创建完成后,在属性中找到连接器配置,选择Api资源。 请求参数配置 选择API资源后,若该API需配置请求与响应参数,则相应的参数配置项将会呈现。如上图所示,因所选API含有Path类型的参数,故可进行Path参数的映射配置。此API并无Body或Query类型的参数,因此这些配置项将不会显示。 Path参数的具体配置如下:左侧列出了集成设计器为API创建的参数名称,而右侧对应的是当前模型中的字段,将赋值表达式设定为ID。该配置的含义是:在用户点击按钮之后,系统将调用配置的Api资源,并以当前视图中的ID参数值来映射Path参数,发起请求。 响应参数配置 同样地,左侧的参数名称是由集成设计器配置的响应参数,而右侧则为当前模型中的字段。当请求成功发送并接收响应后,这些响应参数将会按照配置的规则被填充到表单或详情页面中。 发送请求前,若字段已填充数据,但在响应中未获取相应数据,则该字段将被置为空;比如在发送请求前,性别字段已有数据,而请求发送后,若接口返回的数据中未包含性别信息,则性别参数将会被置为空。 多对一字段将依据接口返回的数据从数据库中进行查询(queryOne)。若未查询到相关信息,则仅回填那些在响应中有值的字段。 运行时页面 响应参数一对多/多对多配置 集成设计器的API配置如下所示:条件查询用户 请求地址:/user/query 请求参数: 参数名 参数位置 必填 参数类型 是否数组 字段长度 默认值 参数备注 country Body 否 String 否 国家 name Body 否 String 否 用户姓名 响应参数: 参数名 参数类型 参数来源 是否数组 取值表达式 参数备注 data OBJECT Body 是 data 用户列表 »name String…

    2024年9月20日
    1.0K00
  • 流程设计器部署注意事项

    准备部署环境所需数据 导出开发/测试环境用到的设计器的的元数据json、设计器业务数据json、自定义组件json在业务工程中准备安装代码 安装元数据json 安装设计器业务数据json 安装自定义组件json 【重要】上线后业务工程中安装工作流元数据和流程设计器数据的代码注释掉,防止已经设置过的流程被重写覆盖 参考文档 流程设计器的导入导出 界面设计器的导入导出 数据可视化的导入导出 确认生产的项目证书和设计器证书已经获取到并配置正确 证书配置方式 通过yml配置 logging: level: # schedule日志过滤,减少不必要的日志 com.taobao.pamirs.schedule.taskmanager.TBScheduleManagerStatic: error pamirs: license: #改成平台提供证书的路径以及subject subject: xxxx path: – licence/xxxx_boot.lic java -jar通过启动参数配置-Dsubject=xxx -Dlicense=/aaa/bb/c.lic 参考文档 pamirs-license 许可证使用常见问题 yml配置 【重要】流程设计器和项目基础环境必须一致, 包括(redis、数据库)。其中数据库的配置要求,相同模块指向的数据源必须相同,通过ds-map指定。 【重要】zk的rootPath 、mq的topic-prefix、schdule的ownSign 配置跟业务工程保持不一致【影响流程发布后重复触发】 【重要】流程设计器若和项目部署在同一台机器上,则 工作流和项目的sql_record的配置(pamirs.record.sql.store)必须分开,否则可能导致工作流任务重复。 spring: rocketmq: name-server: 127.0.0.1:9876 #ACL配置 #accesskey: xxxx #secretkey: xxx pamirs: zookeeper: zkConnectString: 127.0.0.1:2181 zkSessionTimeout: 60000 rootPath: /my_zk event: notify-map: system: ROCKETMQ biz: ROCKETMQ logger: ROCKETMQ enabled: true schedule: enabled: true ownSign: my_own_sign ds-map确认,设计器内公共业务模块和业务工程的业务模块的ds-key需要一致,实际的数据源也需要一致 确认业务工程和设计器的配置项pamirs:record:sql:store的值,2个配置文件里的值需要是不一样的 pamirs: record: sql: store: /aaa/bbb 部署方式确认 Jar包部署方式 前端引入相关依赖 业务工程的前端需要依赖流程设计器 前端package.json新增依赖"@kunlun/workflow-designer": "~4.7.0" 在main.ts的VueOioProvider()方法执行前导入依赖 import '@kunlun/workflow-designer/dist/kunlun-workflow-designer.css'; import '@kunlun/workflow-designer'; VueOioProvider( { dependencies: { vue: import('vue'), lodashEs: import('lodash-es'), antDesignVue: import('ant-design-vue'), antDesignIconsVue: import('@ant-design/icons-vue'), elementPlusIconsVue: import('@element-plus/icons-vue'), elementPlus: import('element-plus'), kunlunDependencies: import('@kunlun/dependencies'), kunlunVueUiAntd: import('@kunlun/vue-ui-antd'), kunlunVueUiEl: import('@kunlun/vue-ui-el'), antvDataSet: import('@antv/data-set'), antvG2: import('@antv/g2'), echarts: import('echarts') } } ); 后端工作流设计器Jar包方式启动,后端无代码设计器Jar包启动方法 docker镜像部署方式 线上允许部署流程设计器镜像,直接通过镜像运行后容器的id+端口访问设计器 部署完成后,已设计的流程需要重新选择的地方 触发字段 所有自定义函数 审批人/转交人,模型相关选的字段 检查工作流触发是否正常

    2024年5月28日
    92600

Leave a Reply

登录后才能评论