深度分页问题优化方案

相关推荐

• 前端

  【界面设计器】自定义字段组件实战——千分位输入框

  阅读之前 此文章为实战教程，已假定你熟悉了【界面设计器】较为完整的【自定义组件】相关内容。 如果在阅读过程中出现的部分概念无法理解，请自行学习相关内容。【前端】文章目录 业务背景 用户在输入【金额】字段时，实时展示千分位格式。 业务分析 从需求来看，我们需要实现一个【千分位】组件，并且该组件允许在【表单】视图中使用。 扩展实现：该组件虽然仅要求在【表单】中使用，但也可以在【搜索】中使用完全相同的实现，因此这里我们在注册时会增加【搜索】视图，将【千分位】组件应用在【搜索】中。对于【表格】、【详情】和【画廊】来说，该组件是没有【输入】行为的展示组件，在这里我们不进行演示。 准备工作 此处你应该已经在某个业务模型下，可以完整执行当前模型的全部【增删改查】操作。 业务模型定义 （以下仅展示本文章用到的模型字段，忽略其他无关字段。） 名称 API名称 业务类型 是否多值 长度(单值长度) 编码 code 文本 否 128 名称 name 文本 否 128 金额 money 金额 否 – 创建组件、元件 准备工作完成后，我们需要根据【业务背景】确定【组件】以及【元件】相关信息，并在【界面设计器】中进行创建。 以下操作过程将省略详细步骤，仅展示可能需要确认的关键页面。 创建千分位组件 创建千分位元件 启动SDK工程进行组件基本功能开发 (npm相关操作请自行查看SDK工程中内置的README.MD) 关键点详解 数据交互类型的字段组件（以下简称展示组件）与仅展示类型的字段组件（以下简称交互组件）有一些差别。 通常情况下，在展示组件中仅需使用value属性即可展示相关内容。在交互组件中除了value用于展示外，还需使用change、focus以及blur处理用户输入时的基本交互逻辑。 数据交互方法主要功能说明： change方法：当值发生变更时调用，根据字段相关配置将值回填至表单中。 focus方法：当组件获取焦点时调用，记录当前值，并在调用blur方法时进行处理。 blur方法：当前组件失去焦点时调用，根据focus方法记录的值，进行失焦触发逻辑的执行。 这里的三个数据交互方法仅仅是对用户行为的抽象，而并非限定其使用场景。 通常来说，这三个方法的调用顺序为：focus –> change –> blur。 如在日期时间组件中，面板打开时调用了focus方法，面板值发生变更时，调用了change方法，面板关闭时调用了blur方法。 如在地图组件中，选中地图上的某个点时仅会调用change方法，用户交互上并不能体现出focus和blur的行为。因此对于这个组件而言，只会有change方法被执行。 代码实现参考 PS：oio-input-number样式必须升级到4.6.x以上的最新版本才支持 Thousandth.vue <template> <a-input-number class="oio-input-number" :value="inputValue" :formatter="formatter" :parser="parser" @update:value="change" @focus="focus" @blur="blur" /> </template> <script lang="ts"> import { InputNumber as AInputNumber } from 'ant-design-vue'; import { computed, defineComponent } from 'vue'; export default defineComponent({ name: 'Thousandth', components: { AInputNumber }, props: { value: { type: [String, Number] }, change: { type: Function }, focus: { type: Function }, blur: { type: Function } }, setup(props) { const inputValue = computed(() => { return props.value; }); const formatter = (value) => { return `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ','); }; const parser = (value) => { return value.replace(/\$\s?|(,*)/g, ''); }; return { inputValue, formatter, parser }; } }); </script> FormMoneyThousandthFieldWidget.ts import { FormFieldWidget, ModelFieldType, SPI, ViewType } from '@kunlun/dependencies'; import Thousandth from './Thousandth.vue'; @SPI.ClassFactory( FormFieldWidget.Token({ viewType: [ViewType.Form, ViewType.Search], ttype: ModelFieldType.Currency, widget:…

  张博昊

  2024年4月19日

  874000
• 低无一体

  提交数据动作如何把弹窗内的数据完全返回

  场景介绍 表格行的操作列有一个打开弹窗的动作 弹窗内为表格行数据的表单，表单内有一个o2m字段，展示了除关联关系字段(大部分场景为id)外的其他字段 弹窗底部动作区域有一个提交数据的客户端动作，该动作会将弹窗内表单的数据回写到表格行的数据上 场景截图 问题现象 点击提交数据的客户端动作，会将数据回写到表格行的数据上，但是表格行拿到的o2m字段的数据只有id字段，o2m字段的编码和名称并不会提交到表格行，o2m字段默认提交规则是只会提交关联关系字段（大部分场景为id）的数据 解决方案 该方案适合5.x版本,4.x版本新建的字段组件无法自动生成属性面板，建议拿下面的组件在SPI加上model和name注册实现 自定义o2m字段所在的组件，m2m字段或者其他类似问题的组件也是如下面组件一样覆写submit方法即可 import { BaseFieldWidget, FormO2MTableFieldWidget, ModelFieldType, SPI, SubmitRelationValue, SubmitValue, ViewType } from '@kunlun/dependencies'; @SPI.ClassFactory( BaseFieldWidget.Token({ viewType: ViewType.Form, ttype: ModelFieldType.OneToMany, widget: 'SubmitAllDataO2MTable' }) ) export class MyFormO2MTableFieldWidget extends FormO2MTableFieldWidget { public async submit(submitValue: SubmitValue): Promise<Record<string, unknown> | SubmitRelationValue | undefined> { return { [this.itemName]: this.value }; } } 在界面设计器的组件功能内新增对应业务类型的自定义组件，组件内的元件api名称填写上面组件的名称SubmitAllDataO2MTable 在界面设计器的设计页面切换o2m字段组件为SubmitAllDataO2MTable 参考文档 自定义组件文档

  nation

  2024年6月28日

  1.2K000
• 未分类

  如何使用源码的方式配置表达式

  自定义占位符定义表达式 数据权限定义表达式： ${thisTeacherName} 界面设计器查询条件定义：$#{thisTeacherName}需要加上#号 以上配置都可以通过查看queryWrapper里面的originRsql查看占位符是否被正确替换。 显隐、过滤条件表达式定义 显隐、过滤都可以加载字段注解里以及xml定义里 显隐: invisible="$!{activeRecord.deadline}" / invisible = true @Field.String @Field(displayName = "视图/页面", invisible = true) private String viewName; 过滤。 domain = " code == ${activeRecord.id} " / domain = "code == '111' " @Field.one2many @Field(displayName = "子订单列表", summary = "子订单列表") @Field.Relation(relationFields = {"code"}, referenceFields = {"code"}, domain = "code != '1234'") private List<ChildOrder> orderList; 更多获取视图数据的写法参考文章上下文在字段和动作中的应用 rsql表达式定义 参考：oinone的rsql与传统sql语法对照表

  yexiu

  2025年3月13日

  682000
• Oinone FAQ

  Oinone 是什么

  1.Oinone能做什么？ Oinone 是一款专注解决复杂业务场景的开源低代码应用平台，旨在提供所见即所得的快速可视化搭建应用功能，并打造企业专属的低代码平台。 提升交付效率，缩短交付周期； 减少人力投入，解决技术人才招聘难的难题； 减少接联调，减少重复建设，解决质量管控难题； 一键轻松安装，应用全生命周期管理，解决应用管理难题； 2.为什么要用Oinone？ 用Oinone低代码平台可以帮助企业应对竞争变化、适应业务变化、满足技术需求、提高研发效率，并且低代码平台已经成为企业数字化转型的核心工具之一。 企业竞争变化，从单一企业变相兼职链的网络竞争; 业务变化，从信息化时代，内部/管理/流程、结果，变向数字时代，外部/商业，运营; 技术更替，从主球稳定，安全，功能丰富可配置到系统性能极限承载能力与弹性扩容/随需而变，需求响应速度、智能;化、实时分析，数据与业务的联动，用户体验，B端的业务需求C端的体验; 对研发人员的需求越来越大，同时要求越来越高。低代码平台是提升研发效率，降低研发成本核心手段; 低代码的地位已经从辅助走向核心; 3.Oinone 和其他的无代码平台相比优势是什么 既支持无代码的拖拉拽，还能通过研发框架支持自主工程研发; 低代码和无代码在贯彻了整个软件的生命周期，在不同场景发挥不同价值; 可基于软件工程理论，进行科学管理； 不改变研发习惯，主流开源技术栈，无抵触心理 4.我是软件公司，用不用Oinone？ 软件公司非常适合使用 Oinone,不管你是做标品还是定制项目，都非常适合使用Oinone 低代码：构建软件快速开发标准，让研发专注在业务创新本身 快速实施个性化需求、或开发简单和应急应用 5.我们公司产品迭代很快，用不用Oinone？ 无代码：使用Oinone 可以快速的响应需求，以及后续迭代需求； 集成平台：快速的是实施集成方案，一次配置，终身受用； 低代码：降低技术复杂度，提升研发效率，让研发专注于业务本身； 6.我们公司产品bug很多，用不用Oinone？ 很多公司都有这样的痛点，一直有BUG ，反复修反复出现，重构成本非常大，比如项目预算有限，无法支撑重新构建，技术栈老旧，研发人员比较少，Oinone 提供以下解决方案： 同步原系统数据回流处理后数据； 原系统数据扩展处理新业务逻辑； 7..我用的是JAVA 技术栈，我还需要用Oinone么？ 在探讨低代码平台的合作时，首先需要确认的是，如果您之前使用的是Java技术栈，那么低代码平台是否能够生成相应的Java代码，包括常用的增删改查等方法。这种代码生成器与低代码平台的第一种方式——代码生成器相似，它提供了基础逻辑的生成。 针对这一层面，Oinone平台具有几个显著优势。首先，后端定义的模型或写法不仅决定了后端的数据处理，同时也影响了前端的UI展示层。其次，当前端开发时加入特定的注解，这些注解的本质是为了收集原始数据。一旦数据源被定义，编写的代码在最终运行时实际上已经转变为数据。这是与传统代码编写方式的第二个不同点。第三，尽管我们提供了代码编写的方式，但这样做的核心目的在于解决标准化产品与个性化需求之间的矛盾。在进行功能扩展时，对于工程架构和代码编写的冲击较大。 oinone的核心优势在于减少代码生成量，内置代码规范，并实现前后端无需联调。此外，无代码设计器能够理解用代码构建的模型或函数，并与之结合。 在前端方面，低代码平台也提供了相应的工程结构，允许通过添加平台依赖来引入平台功能。前端的自定义能力包括自定义模板、布局和页面，以及完全自定义视图的能力。此外，平台支持前端与后端的交互自定义，以及自定义字段的引入。 总结来说，后端定义的模型不仅决定了数据存储结构和扩展方式，还决定了前端的UI展示，并能与无代码平台结合。引入TypeScript（TS）的概念，可以帮助团队最大化逻辑复用，解决了业务组件难以沉淀的问题。通过这种方式，前后端的结合更为紧密，减少了联调的需求，提高了开发效率。

  shao

  2022年3月14日

  988000
• 前端

  自定义视图组件（v4）

  阅读之前 你应该： 了解DSL相关内容。母版-布局-DSL 渲染基础（v4） 了解SPI机制相关内容。组件SPI机制（v4） 什么是视图组件 我们将一个视图中提供数据源的组件称为视图组件。 下面，我们将根据提供的示例布局进行进一步介绍。 示例布局（默认表格视图布局） <view type="TABLE"> <pack widget="group"> <view type="SEARCH"> <element widget="search" slot="search" /> </view> </pack> <pack widget="group" slot="tableGroup"> <element widget="actionBar" slot="actionBar"> <xslot name="actions" /> </element> <element widget="table" slot="table"> <element widget="expandColumn" slot="expandRow" /> <xslot name="fields" /> <element widget="rowActions" slot="rowActions" /> </element> </pack> </view> view: 视图标签；一个视图中的所有组件将共享数据源，视图的数据源通过视图组件进行提供。（在这个示例中，该视图的数据源通过widget="table"（TableWidget）提供） pack: 容器组件标签； element: 通用元素组件标签； xslot：dsl插槽； 根据标签性质，我们可以将这个示例布局进一步简化，只留下我们目前要关注的主要内容。 <view type="TABLE"> <element widget="table" slot="table"> <xslot name="fields" /> </element> </view> 在以上示例布局中，有且仅有一个组件会向视图提供数据源，那就是widget="table"（TableWidget）这个组件。我们接下来将对这个组件进行自定义，以实现业务中所需的列表(List)数据源展示方式。 1 平台组件简介 平台提供的基础组件有如下几种： 组件名称 描述 BaseElement element标签通用组件 BaseElementViewWidget 通用视图组件 BaseElementObjectViewWidget 对象（Object）数据源通用视图组件 BaseElementListViewWidget 列表（List）数据源通用组件 平台提供的内置组件有如下几种：（均使用element标签） 组件名称 标签 视图类型 描述 TableWidget widget="table" TABLE 内置表格组件 FormWidget widget="form" FORM 内置表单组件 DetailWidget widget="detail" DETAIL 内置详情组件 GallertWidget widget="gallery" GALLERY 内置画廊组件 TreeWidget/CardCascaderWidget widget="tree/cardCascader" TREE 内置树/卡片级联组件 我们可以根据业务场景，继承不同的组件，来实现自己的业务场景。在自定义过程中，我们建议尽可能的将逻辑控制在组件内部。如果场景是唯一且确定的，也可以进行一些特殊逻辑处理。 2 场景：实现一个虚拟滚动表格（不使用分页器） 2.1 确定组件名称 widget="VirtualTable" 通过布局设置自定义组件名称 我们将原表格布局中的widget="table"改为我们所需要的自定义组件名称即可。 多个视图可以绑定同一个布局，所以这种修改方式更适用于大范围使用相同布局的情况。 <view type="TABLE"> <pack widget="group"> <view type="SEARCH"> <element widget="search" slot="search /> </view> </pack> <pack widget="group" slot="tableGroup"> <element widget="actionBar" slot="actionBar> <xslot name="actions" /> </element> <element widget="VirtualTable" slot="table"> <element widget="expandColumn" slot="expandRow" /> <xslot name="fields" /> <element widget="rowActions" slot="rowActions" /> </element> </pack> </view> 通过DSL设置自定义组件名称 我们使用了slot="table"这个插槽，通过属性合并覆盖的方式，在DSL上直接指定我们所需要的自定义组件名称即可。 这种修改方式更适用于个别几个视图需要使用该组件的情况。 <view type="TABLE"> <template slot="table" widget="VirtualTable"> …… </template> </view> 2.2 简单实现一个基础功能的虚拟滚动表格 定义一个VirtualTable.vue文件，使用平台提供的oio-table组件。目前内部采用vxe-table封装，相关api文档 点击查看 props定义： showDataSource: 当前展示数据；通过平台内置BaseElementListViewWidget组件提供。 <template> <oio-table ref="table" border show-overflow height="400" :row-config="{ isHover: true…

  oinone

  2023年11月1日

  835000