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

阅读之前

你应该:

名词解释

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

概述

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

场景

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

我们可以做出这些优化:

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

相关推荐

  • 弹窗或抽屉表单视图rootRecord获取不到对应的数据

    在平台默认的实现中,rootRecord 代表的是根视图的数据。比如,在表格页面点击按钮打开了弹窗,弹窗里面包含一个表单视图,但是该视图获取 rootRecord 却是最外层的视图数据。 如果期望 rootRecord 数据是弹窗的视图数据,需要手动修改表单的 rootRecord。下面的代码演示了如何重写 rootData 以确保其数据是弹窗的数据: @SPI.ClassFactory( BaseElementWidget.Token({ viewType: ViewType.Form, widget: 'MyCustomFormWidgetFormWidget' }) ) export class MyCustomFormWidgetFormWidget extends FormWidget { @Widget.Reactive() @Widget.Provide() public get rootData(): any[] | undefined { return this.activeRecords; } } 上述代码重写了 rootData,这样就可以确保 rootData 的数据是弹窗的数据。 接下来就是注册: registerLayout( ` <view type="FORM"> <element widget="actionBar" slot="actionBar" slotSupport="action"> <xslot name="actions" slotSupport="action" /> </element> <element widget="MyCustomFormWidgetFormWidget" slot="form"> <xslot name="fields" slotSupport="pack,field" /> </element> </view> `, { viewType: ViewType.Form, model: '弹窗模型', viewName: '弹窗视图名称' } )

    2023年11月13日
    2.1K00
  • OioProvider详解(v4.3.0)

    OioProvider OioProvider是平台的初始化入口。 示例入口 main.ts import { VueOioProvider } from '@kunlun/dependencies'; VueOioProvider(); 网络请求/响应配置 http 平台统一使用apollo作为统一的http请求发起服务,并使用GraphQL协议作为前后端协议。 参考文档: apollo-client graphql 配置方式 VueOioProvider({ http?: OioHttpConfig }); OioHttpConfig /** * OioHttp配置 */ export interface OioHttpConfig { /** * base url */ url: string; /** * 拦截器配置 */ interceptor?: Partial<InterceptorOptions>; /** * 中间件配置(优先于拦截器) */ middleware?: NetworkMiddlewareHandler | NetworkMiddlewareHandler[]; } 内置拦截器可选项 InterceptorOptions /** * 拦截器可选项 */ export interface InterceptorOptions { /** * 网络错误拦截器 */ networkError: NetworkInterceptor; /** * 请求成功拦截器 (success) */ requestSuccess: NetworkInterceptor; /** * 重定向拦截器 (success) */ actionRedirect: NetworkInterceptor; /** * 登录重定向拦截器 (error) */ loginRedirect: NetworkInterceptor; /** * 请求错误拦截器 (error) */ requestError: NetworkInterceptor; /** * MessageHub拦截器 (success/error) */ messageHub: NetworkInterceptor; /** * 前置拦截器 */ beforeInterceptors: NetworkInterceptor | NetworkInterceptor[]; /** * 后置拦截器 */ afterInterceptors: NetworkInterceptor | NetworkInterceptor[]; } 内置拦截器执行顺序: beforeInterceptors:前置拦截器 networkError:网络错误 actionRedirect:重定向 requestSuccess 请求成功 loginRedirect:登录重定向 requestError:请求错误 messageHub:MessageHub afterInterceptors:后置拦截器 NetworkInterceptor /** * <h3>网络请求拦截器</h3> * <ul> * <li>拦截器将按照注册顺序依次执行</li> * <li>当任何一个拦截器返回false时,将中断拦截器执行</li> * <li>内置拦截器总是优先于自定义拦截器执行</li> * </ul> * */ export interface NetworkInterceptor { /** * 成功拦截 * @param response 响应结果 */ success?(response: IResponseResult): ReturnPromise<boolean>; /** * 错误拦截 * @param response 响应结果 */ error?(response: IResponseErrorResult): ReturnPromise<boolean>; } 自定义路由配置 router 配置方式 VueOioProvider({ router?: RouterPath[]…

    2023年11月1日
    2.4K00
  • 流程设计器部署注意事项

    准备部署环境所需数据 导出开发/测试环境用到的设计器的的元数据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日
    2.1K00
  • 如何更新升级docker中的设计器版本

    升级docker中的设计器版本 1.升级docker 1.1 修改结构包中startup.sh中对应的新版本号 结构包文件夹以及文件说明 – oinone-op-ds-all-full – config:Java启动的application.yml以及证书等 – lib:额外启动jar包 – logs:Java日志 – mq:mq的中间件broker.conf – nginx:nginx的配置文件 – run:可配置docker中启动的中间件 – startup.cmd:window启动脚本 – startup.sh:linux启动脚本 1.2 需要备份原oinone-op-ds-all-full中的mysql数据库 如果原先再安装的版本为full包含中间件的版本,删除原docker中的容器会清除所有的容器,需要备份数据库的数据 可使用navicat导出数据库 1.3 停止容器,并删除容器 docker ps -a #查询到对应容器的id 如 283747263 docker stop 283747263 docker rm 283747263 1.4 更新docker镜像版本 #启动脚本 sh startup.sh tail -200f logs/2024-01-26.0.log 1.5 启动新版本docker #启动脚本 sh startup.sh #查看日志 tail -200f logs/2024-01-26.0.log 2.业务项目工程中的平台jar版本 2.1 更新业务工程的主pom.xml中平台版本包 根据提供的版本更新日志,更新对应的平台jar包 2.2 更新maven,重启业务工程

    2024年2月28日
    1.5K00
  • 数据可视化-如何自定义查询数据方法

    场景 根据测试商品,汇总数据通过测试统计商品透出到数据可视化图表数据; 统计商品类目的最大库存以及平均售价信息 测试商品模型 @Model.model(DemoItem.MODEL_MODEL) @Model(displayName = "测试商品", labelFields = "name") @Model.Code(sequence = "SEQ", prefix = "IT", size = 8) public class DemoItem extends CodeModel { private static final long serialVersionUID = -5104390780952631397L; public static final String MODEL_MODEL = "demo.DemoItem"; @Field.String @Field(displayName = "商品名称") private String name; @Field.Html @Field(displayName = "商品描述") private String description; @Field.Money(D=2) @Field(displayName = "商品价格") private BigDecimal itemPrice; @Field.Integer @Field(displayName = "商品库存") private Long inventoryQuantity; …. 测试商品统计 @Model.model(DemoItemStatistics.MODEL_MODEL) @Model(displayName = "测试商品统计", labelFields = "name") public class DemoItemStatistics extends IdModel { private static final long serialVersionUID = 5626273740800455515L; public static final String MODEL_MODEL = "demo.DemoItemStatistics"; @Field.String @Field(displayName = "类目名称") private String categoryName; @Field.Integer @Field(displayName = "商品库存") private Long inventoryQuantity; @Field.Money @Field(displayName = "商品价格") private BigDecimal itemPrice; } 自定义商品类目统计数据 【注意】 图表设计器能获取到的接口需指定:category = FunctionCategoryEnum.QUERY_PAGE,且出参和入参类型要与本示例一致 @Function.Advanced(type = FunctionTypeEnum.QUERY, displayName = "商品统计列表", category = FunctionCategoryEnum.QUERY_PAGE) @Function.fun(FunctionConstants.queryPage) @Function(openLevel = {FunctionOpenEnum.LOCAL, FunctionOpenEnum.REMOTE, FunctionOpenEnum.API}) public Pagination<DemoItemStatistics> queryPage(Pagination<DemoItemStatistics> page, IWrapper<DemoItemStatistics> queryWrapper) { List<DemoItemStatistics> list = new ArrayList<>(); List<DemoItem> items = demoItemService.queryListByWrapper(Pops.<DemoItem>lambdaQuery() .from(DemoItem.MODEL_MODEL) .eq(DemoItem::getStatus, ItemStatusEnum.ACTIVE)); if(CollectionUtils.isEmpty(items)) return page; Map<Long, List<DemoItem>> itemMap = items.stream().collect(Collectors.groupingBy(DemoItem::getCategoryId)); for (Map.Entry<Long, List<DemoItem>> longListEntry : itemMap.entrySet()) { long categoryId = longListEntry.getKey(); List<DemoItem> demoItems =…

    2024年5月18日
    1.6K00

Leave a Reply

Please Login to Comment