深度分页问题优化方案

相关推荐

• 产品常用功能讲解

  界面设计器教程：如何设置字段联动变更

  shao

  2024年9月30日

  767000
• 前端

  【界面设计器】自定义字段组件实战——表格字段组合展示

  阅读之前 此文章为实战教程，已假定你熟悉了【界面设计器】较为完整的【自定义组件】相关内容。 如果在阅读过程中出现的部分概念无法理解，请自行学习相关内容。【前端】文章目录 业务背景 表格中的一列使用多个字段组合展示。 演示内容：表格中存在两列，【编码】和【基础信息】。将【名称】、【创建时间】、【更新时间】在【基础信息】一列展示。 业务分析及实现思路 从需求来看，我们需要实现一个【组合列】组件，并且该组件允许在【表格】视图中使用。由于【组合列】本身也是一个字段，因此这里需要选择需要组合字段中的其中一个字段作为组件切换的基础字段，比如我们可以选择【名称】字段作为基础字段。 在【组合列】组件的属性面板中，我们需要再自定义一个【组合列配置】组件，用来选择需要将哪些字段进行组合，以及为每个组合提供一些基础配置。 这里需要理解一个基本概念，即【组合列】的属性面板是【组合列配置】的【执行页面】。所有组件的属性面板在【执行页面】时都是【表单】视图。 因此我们可以实现一个【组合列配置】组件，并且该组件允许在【表单】视图中使用。其业务类型使用【文本】，我们在保存配置数据时，可以使用JSON数据结构来存储复杂结构。（这里的实现思路并非是最符合协议设定的，但可以满足绝大多数组件场景） 在【组合列配置】组件中，我们可以允许用户添加/移除组合，并且每个组合有两个属性，【标题】和【字段】。 准备工作 此处你应该已经在某个业务模型下，可以完整执行当前模型的全部【增删改查】操作。 业务模型定义 （以下仅展示本文章用到的模型字段，忽略其他无关字段。） 名称 API名称 业务类型 是否多值 长度(单值长度) 编码 code 文本 否 128 名称 name 文本 否 128 创建时间 createDate 日期时间 否 – 更新时间 updateDate 日期时间 否 – 实现页面效果展示 表格视图 创建组件、元件 准备工作完成后，我们需要根据【业务背景】确定【组件】以及【元件】相关信息，并在【界面设计器】中进行创建。 以下操作过程将省略详细步骤，仅展示可能需要确认的关键页面。 创建组合列组件 创建组合列元件 创建组合列配置组件 创建组合列配置元件 设计组合列元件属性面板 创建compositeConfig字段，并切换至【组合配置】组件。 设计组合列配置元件属性面板 启动SDK工程进行组件基本功能开发 PS：这里由于我们创建了两个组件，因此，将SDK分开下载后，然后将组合列配置SDK中的演示代码(kunlun-plugin/src)移动到组合列SDK中，在同一工程中进行开发，最后只需将相关JS文件和CSS文件上传到组合列组件中即可，组合列配置组件可以不进行上传。这里需要注意的是，上传多个包含相同组件功能的JS文件和CSS文件可能在运行时导致无法正常替换、冲突等问题。 (npm相关操作请自行查看SDK工程中内置的README.MD) 开发步骤参考 打开【表格】视图，将【名称】字段的组件切换为【组合列】组件。 在属性面板中看到【组合列配置】组件，并优先实现【组合列配置】组件。这里的属性面板就是【组合列配置】对应的【执行页面】。 当【组合列配置】组件可以按照预先设计的数据结构正确保存compositeConfig属性时，可以在【组合列】组件中的props定义中直接获取该属性，接下来就可以进行【组合列】组件的开发。 代码实现参考 工程结构 typing.ts export interface CompositeConfig { key: string; label?: string; field?: string; value?: string; } CompositeColumnConfig.vue <template> <div class="composite-column-config"> <oio-form v-for="item in list" :data="item" :key="item.key"> <oio-form-item label="标题" name="label"> <oio-input v-model:value="item.label" /> </oio-form-item> <oio-form-item label="字段" name="field"> <a-select class="oio-select" dropdownClassName="oio-select-dropdown" v-model:value="item.field" :options="fields" /> </oio-form-item> <oio-button type="link" @click="() => removeItem(item)">移除</oio-button> </oio-form> <oio-button type="primary" block @click="addItem">添加</oio-button> </div> </template> <script lang="ts"> import { uniqueKeyGenerator } from '@kunlun/dependencies'; import { WidgetInstance } from '@kunlun/ui-designer-dependencies'; import { OioButton, OioForm, OioFormItem, OioInput } from '@kunlun/vue-ui-antd'; import { Select as ASelect } from 'ant-design-vue'; import { computed, defineComponent, PropType, ref, watch } from 'vue'; import { CompositeConfig } from '../../typing'; export default defineComponent({ name: 'CompositeColumnConfig', components: { OioForm, OioFormItem, OioInput, OioButton, ASelect }, props: { currentInstance: { type:…

  数式-海波

  2023年11月1日

  1.3K000

• 3.4.2 函数的开放级别与类型

  一、函数开放级别 我们在日常开发中通常会因为安全性，为方法定义不同的开放层级，或者通过应用分层把需要对web开放的接口统一定义在一个独立的应用中。oinone也提供类似的策略，所有逻辑都通过Function来归口统一管理，所以在Function是可以定义其开放级别有API、REMOTE、LOCAL三种类型，配置可多选。 四种自定义新增方式与开放级别的对应关系 函数 本地调用(LOCAL) 远程调用(REMOTE) 开放(API) 伴随模型新增函数 支持 支持【默认】 支持 独立新增函数绑定到模型 支持 支持【默认】 支持 独立新增函数只作公共逻辑单元 支持 支持【默认】 伴随ServerAction新增函数 必选 表3-4-2-1 四种自定义新增方式与开放级别的对应关系 远程调用（REMOTE） 如果函数的开放级别为本地调用，则不会发布远程服务和注册远程服务消费者 非数据管理器函数 提供者：如果函数定义在当前部署包的启动应用中，则主动发布远程服务提供者。 消费者：如果函数定义在部署依赖包中但未在当前部署包的启动应用中，则系统会默认注册远程消费者。发布注册的远程服务使用命名空间和函数编码进行路由。 所以非数据管理器函数的消费者并不需要感知该服务是否是本地提供还是远程提供。而服务提供者也不需要手动注册远程服务。 数据管理器类函数 提供者：如果数据管理器函数所在模型定义在当前部署包的启动应用中，则系统会主动发布数据管理器的远程服务作为数据管理器的远程服务提供者； 消费者：如果模型定义在部署依赖包中但未在当前部署包的启动应用中，则系统会主动注册数据管理器的远程服务消费者。 所以数据管理器类函数的消费者与服务提供者并不需要感知函数的远程调用。 二、函数类型 函数的类型语义分为：增、删、改、查，在编程模式下目前用于Function为API级别，生成GraphQL的Schema时放在query还是mutation。查放在query，其余放mutation。 三、函数分类 TBD 在无代码编辑器中，函数分类主要用函数选择的分类管理。

  史, 昂

  Oinone 7天入门到精通 2024年5月23日

  1.6K000
• 运维实践

  Oinone平台部署及依赖说明（v4.7）

  概述 名词解释 业务工程包：指平台提供的内置基础包和内置功能包。 设计器工程包：指模型设计器、界面设计器、流程设计器等相关依赖包。 父POM：仅声明依赖包版本的pom文件 启动工程POM：仅声明具体依赖包的pom文件，一般不用于指定版本。 业务工程部署 Oinone平台向合作伙伴提供前后端业务工程所需的全部依赖，依赖项的具体说明下面会分别介绍。 设计器部署 Oinone平台向合作伙伴提供了两种设计器部署方式： Docker镜像：支持amd64和arm64两种架构的操作系统。（推荐） JAR包：与Docker镜像中的内容完全一致。 使用JAR包直接启动需要使用Oinone专属启动器，Docker镜像已内置Oinone专属启动器。 PS：如遇到以上部署方式或提供的镜像无法满足部署需求时，请联系Oinone平台售后获取技术支持。 Docker镜像 体验镜像 包括所有设计器。 内置所有所需中间件，包括Mysql、Redis、Zookeeper、RocketMQ。 适用场景：用于快速体验Oinone平台全部功能 docker pull harbor.oinone.top/oinone/oinone-designer-full-v4.8:TAG 前后端一体部署镜像 包括所有设计器。 无内置中间件。 适用场景：用于便捷部署Oinone平台的前后端服务 docker pull harbor.oinone.top/oinone/oinone-designer-mini-v4.8:TAG 前后端一体部署镜像 – 流程设计器 仅包括流程设计器。 无内置中间件。 适用场景：用于便捷部署仅需流程设计器的Oinone平台的前后端服务。 docker pull harbor.oinone.top/oinone/workflow-designer-v4.8:TAG 镜像拉取 以体验镜像为例，Oinone平台提供多种拉取镜像的方式。 # 获取混合架构镜像，支持amd64和arm64架构的操作系统 docker pull harbor.oinone.top/oinone/oinone-designer-full-v4.8:4.8.19 # 仅获取amd64架构镜像 docker pull harbor.oinone.top/oinone/oinone-designer-full-v4.8:4.8.19-amd64 # 仅获取arm64架构镜像 docker pull harbor.oinone.top/oinone/oinone-designer-full-v4.8:4.8.19-arm64 # 获取最新版镜像（每次拉取自动更新） docker pull harbor.oinone.top/oinone/oinone-designer-full-v4.8 PS：如镜像拉取过慢，可在确定操作系统架构的情况下获取amd64或arm64架构镜像。 JAR包获取 $VERSION：对应镜像版本号 包含所有设计器的后端JAR包下载路径示例 https://oinone-jar.oss-cn-zhangjiakou.aliyuncs.com/install/oinone-designer/pamirs-designer-boot-v4.8-$VERSION.jar 仅包含流程设计器的后端JAR包下载路径示例 https://oinone-jar.oss-cn-zhangjiakou.aliyuncs.com/install/workflow-designer/pamirs-workflow-designer-boot-v4.8-$VERSION.jar 后端依赖 Oinone平台后端使用Maven管理工具对所有依赖包进行版本管理。 版本说明 下面是在每个版本升级说明中提供的所有依赖版本，最新版本请查看对应的最新升级说明文档。 版本更新日志 <!– 平台基础 –> <pamirs.middleware.version>4.7.8.5</pamirs.middleware.version> <pamirs.k2.version>4.7.8.7</pamirs.k2.version> <pamirs.framework.version>4.7.8.19</pamirs.framework.version> <pamirs.boot.version>4.7.8.12</pamirs.boot.version> <pamirs.distribution.version>4.7.8.5</pamirs.distribution.version> <!– 平台功能 –> <pamirs.metadata.manager>4.7.8</pamirs.metadata.manager> <pamirs.core.version>4.7.8.19</pamirs.core.version> <pamirs.workflow.version>4.7.8.16</pamirs.workflow.version> <pamirs.workbench.version>4.7.8</pamirs.workbench.version> <pamirs.data.visualization.version>4.7.8.1</pamirs.data.visualization.version> <!– 设计器 –> <pamirs.designer.common.version>4.7.8</pamirs.designer.common.version> <pamirs.flow.designer.base.version>4.7.8.1</pamirs.flow.designer.base.version> <pamirs.workflow.designer.version>4.7.8</pamirs.workflow.designer.version> <pamirs.model.designer.version>4.7.8</pamirs.model.designer.version> <pamirs.ui.designer.version>4.7.8.9</pamirs.ui.designer.version> <pamirs.data.designer.version>4.7.8</pamirs.data.designer.version> <pamirs.dataflow.designer.version>4.7.8.1</pamirs.dataflow.designer.version> <pamirs.eip.designer.version>4.7.8.1</pamirs.eip.designer.version> 完整依赖管理示例 以下列举了除了设计器相关依赖外的全部依赖管理项，其通常使用在父POM中。 <dependency> <groupId>pro.shushi.pamirs</groupId> <artifactId>pamirs-k2</artifactId> <version>${pamirs.k2.version}</version> <type>pom</type> <scope>import</scope> </dependency> <dependency> <groupId>pro.shushi.pamirs</groupId> <artifactId>pamirs-framework</artifactId> <version>${pamirs.framework.version}</version> <type>pom</type> <scope>import</scope> </dependency> <dependency> <groupId>pro.shushi.pamirs.boot</groupId> <artifactId>pamirs-boot-dependencies</artifactId> <version>${pamirs.boot.version}</version> <type>pom</type> <scope>import</scope> </dependency> <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-core-dependencies</artifactId> <version>${pamirs.core.version}</version> <type>pom</type> <scope>import</scope> </dependency> <dependency> <groupId>pro.shushi.pamirs</groupId> <artifactId>pamirs-distribution</artifactId> <version>${pamirs.distribution.version}</version> <type>pom</type> <scope>import</scope> </dependency> <dependency> <groupId>pro.shushi.pamirs.middleware</groupId> <artifactId>pamirs-middleware-dependencies</artifactId> <version>${pamirs.middleware.version}</version> <type>pom</type> <scope>import</scope> </dependency> <!–metadata manager–> <dependency> <groupId>pro.shushi.pamirs.metadata.manager</groupId> <artifactId>pamirs-metadata-manager</artifactId> <version>${pamirs.metadata.manager}</version> </dependency> <!–workflow–> <dependency> <groupId>pro.shushi.pamirs.workflow</groupId> <artifactId>pamirs-workflow</artifactId> <version>${pamirs.workflow.version}</version> <type>pom</type> <scope>import</scope> </dependency> <!–workbench–> <dependency> <groupId>pro.shushi.pamirs.work.bench</groupId> <artifactId>pamirs-work-bench</artifactId> <version>${pamirs.workbench.version}</version> <type>pom</type> <scope>import</scope> </dependency> <!–data-vi–> <dependency> <groupId>pro.shushi.pamirs.data.visualization</groupId> <artifactId>pamirs-data-visualization</artifactId> <version>${pamirs.data.visualization.version}</version> <type>pom</type> <scope>import</scope> </dependency> 完整功能依赖示例 以下列举了除了设计器相关依赖外的全部依赖管理项，其通常使用在启动工程POM中。 <dependency> <groupId>pro.shushi.pamirs</groupId> <artifactId>a</artifactId> </dependency>…

  张博昊

  2024年9月3日

  984000
• 前端

  前端自定义字段与视图最佳方案

  自定义视图获取数据 在某些情况下，oinone 提供的默认视图无法满足需求，这时我们就需要自定义视图。通常，虽然视图的 UI 不足以满足要求，但数据结构是不变的。此时，重点是修改页面 UI，数据的请求与回填可以利用平台默认的能力。 如何实现？ 界面设计器的使用 你可以通过界面设计器先配置页面，平台在运行时会根据设计器生成对应的 GraphQL 请求，并自动回填数据。 视图的数据结构 视图的数据类型分为可以分为 Object 跟 List Object 代表当前视图的数据结构是对象 List 代表当前视图的数据结构是数组。 如果我们将 Object 跟 List 分的更细一点就变成了这样： 1: Object: 对象，代表当前视图的数据结构是单个对象，例如：表单视图、详情视图1: List: 对象数组，代表当前视图的数据结构数组，例如：表格视图、卡片视图、画廊视图 视图类型 平台组件 数据属性 表格视图 TableWidget dataSource 画廊视图 GalleryWidget dataSource 表单视图 FormWidget formData 详情视图 DetailWidget formData 自定义视图时，需要先确认当前视图的类型，再通过界面设计器进行页面配置。前端部分只需继承相应的组件，平台底层会自动处理接口数据的获取与回填。 表单视图示例： import Form from './Form.vue'; // 自定义表单视图 @SPI.ClassFactory( BaseElementWidget.Token({ widget: 'custom-form' }) ) export class CustomForm extends FormWidget { public initialize(props: Props) { super.initialize(props); this.setComponent(Form); return this; } } Vue 组件： <template></template> <script lang="ts"> export default defineComponent({ props: { formData: { // 当前表单的数据 type: Object, default: () => ({}) } } }); </script> 自定义layout // 原始的layout模版 <view type="FORM"> <element widget="actionBar" slot="actionBar" slotSupport="action"> <xslot name="actions" slotSupport="action" /> </element> <element widget="form" slot="form"> <xslot name="fields" slotSupport="pack,field" /> </element> </view> //自定义的layout模版 <view type="FORM"> <element widget="actionBar" slot="actionBar" slotSupport="action"> <xslot name="actions" slotSupport="action" /> </element> <element widget="custom-form" slot="form"> <xslot name="fields" slotSupport="pack,field" /> </element> </view> 其实就是把 widget="form" 改成 widget="custom-form" 表格视图示例： import Table from './Table.vue'; // 自定义表格视图 @SPI.ClassFactory( BaseElementWidget.Token({ widget: 'custom-table' }) ) export class CustomTable extends TableWidget { public initialize(props: Props) { super.initialize(props); this.setComponent(Table); return this; } } Vue 组件： <template></template> <script…

  汤乾华

  2024年10月17日

  1.9K002