深度分页问题优化方案

相关推荐

• 组件

  前端表格复制

  我们可能会遇到表格复制的需求，也就是表格填写的时候，不是增加一行数据，而是增加一个表格。以下是代码实现和原理分析。 代码实现 在 boot 工程的 main.ts 中加入以下代码 import { registerDesignerFieldWidgetCreator, selectorDesignerFieldWidgetCreator } from '@oinone/kunlun-ui-designer-dependencies'; // 注册无代码组件，将表头分组的无代码组件，注册成字段表格组件 registerDesignerFieldWidgetCreator( { widget: 'DynamicCreateTable' }, selectorDesignerFieldWidgetCreator({ widget: TABLE_WIDGET })! ); DynamicCreateTableWidget 动态添加表格 ts 组件 import { FormO2MTableFieldWidget, Widget, DslDefinition, RuntimeView, SubmitValue, BaseFieldWidget, ModelFieldType, SPI, ViewType, ActiveRecord, uniqueKeyGenerator } from '@oinone/kunlun-dependencies'; import { MyMetadataViewWidget } from './MyMetadataViewWidget'; import DynamicCreateTable from './DynamicCreateTable.vue'; @SPI.ClassFactory( BaseFieldWidget.Token({ viewType: ViewType.Form, ttype: ModelFieldType.OneToMany, widget: 'DynamicCreateTable' }) ) export class DynamicCreateTableWidget extends FormO2MTableFieldWidget { public myMetadataViewWidget: MyMetadataViewWidget[] = []; @Widget.Reactive() public myMetadataViewWidgetLength = 0; @Widget.Reactive() public myMetadataViewWidgetKeys: string[] = []; protected props: Record<string, unknown> = {}; public initialize(props) { super.initialize(props); this.props = props; this.setComponent(DynamicCreateTable); return this; } // region 创建动态表格 @Widget.Method() public async createTableWidget(record: ActiveRecord) { const index = this.myMetadataViewWidget.length; const handle = uniqueKeyGenerator(); const slotKey = `MyMetadataViewWidget_${handle}`; const widget = this.createWidget( new MyMetadataViewWidget(handle), slotKey, // 插槽名称 { subIndex: index, metadataHandle: this.metadataHandle, rootHandle: this.rootHandle, automatic: true, internal: true, inline: true } ); this.initDynamicSubview(this.props, widget); widget.setData(record); this.myMetadataViewWidgetLength++; this.myMetadataViewWidgetKeys.push(slotKey); this.myMetadataViewWidget.push(widget); } protected initDynamicSubview(props: Record<string, unknown>, widget: MyMetadataViewWidget) { const { currentViewDsl } = this; let viewDsl = currentViewDsl; if (!viewDsl) { viewDsl = this.getViewDsl(props)…

  银时

  2025年7月21日

  931000
• 产品使用手册

  权限手册（5.1以上）

  此手册基于5.0版本的权限系统，新增了角色管理中的权限配置功能。对于5.0版本的权限功能说明，请参考此前发布的权限手册：https://doc.oinone.top/auth/14357.html。本手册仅介绍新增的功能，其他功能详见此前的版本手册。

  萧炎

  2024年9月26日

  3.4K000
• 前后端标准研发流程及工程合理

  数式Oinone 前后端标准开发流程

  相关知识文档参考 数式Oinone 前后端标准开发流程：https://doc.oinone.top/other/15957.html

  shao

  2024年11月4日

  1.6K000
• 6.x

  正式版发布：Oinone 6.3.0 版本 集成设计器新增 MCP，流程设计器优化，邀您体验

  版本号： 6.3.0 版本发布日期：2025.09.05更新要点：集成设计器新增 MCP，流程设计器优化 6.3.0 版本 GitHub: 后端: https://github.com/oinone/oinone-pamirs 前端: https://github.com/oinone/oinone-kunlun Gitee: 后端: https://gitee.com/oinone/oinone-pamirs 前端: https://gitee.com/oinone/oinone-kunlun 20260430 镜像版本升级: 6.3.11.1 –> 6.3.12 后端版本升级: 6.3.11.1 –> 6.3.13 Excel模版定义(ExcelHelper)新增支持列宽自适应API； 同步导入支持业务异常信息提示到页面； 导出如果无数据生成空文件(解决：目前无数据浏览器显示一串JSON问题) 修复逻辑删除未更新[更新时间]的问题,涉及到gauss、postgresql、kdb、oracle 和 sqlsever； 优化postgresql等字段大小写敏感导致第二次启动失败问题。 20260119 镜像版本升级: 6.3.10.1 –> 6.3.11.1 后端版本升级: 6.3.10.1 –> 6.3.11.1 前端版本升级 修复语言保存时毫秒格式验证错误的问题 修复元数据导入时菜单无法更新动作的问题 修复工作流集成接口在某些情况下参数处理错误的问题 20260109 升级此版本需要开启元数据全量刷新 pamirs.distribution.session.allMetaRefresh=true 镜像版本升级: 6.3.9 –> 6.3.10.1 后端版本升级: 6.3.9 –> 6.3.10.1 前端版本升级 修复工作流数据安装 增加对函数操作日志 增加函数操作规则设置 用户登录日志增加扩展点 时间格式支持毫秒 Eip日志增加毫秒支持 优化导出API 的文档结构 点击查看用户手册 集成接口日志参数信息支持 JSON/XML 格式切换及一键复制 点击查看用户手册 数据库 API 支持格式化 / 压缩SQL格式 点击查看用户手册 数据流程增加毫秒支持 语言增加毫秒支持 集成接口和开发接口日志统计增加日期范围筛选 增加标准心跳检查 trigger增加扩展点，适配多租户场景 增加导入文件URL错误，获取不到JSON的日志 解决元数据增强可能出现的死循环 20251229 升级内容 镜像版本升级: 6.3.8.2 –> 6.3.9 后端版本升级: 6.3.8 –> 6.3.9 前端版本升级 修复工作流元数据安装异常的问题 前端包名变更：@kunlun/vue-grid-layout@2.3.13 –> @oinone/vue-grid-layout@2.3.13 前端包名变更：webpack-aliyun-oss@0.5.2 –> @oinone/webpack-aliyun-oss@0.5.2 npmrc 统一配置 registry=https://registry.npmmirror.com/ @oinone:registry=http://nexus.shushi.pro/repository/kunlun/ legacy-peer-deps=true 20251218 升级内容 镜像版本升级: 6.3.7.1 –> 6.3.8.2 后端版本升级: 6.3.7 –> 6.3.8 前端版本升级 新增 SaaS 租户扩展包 界面设计器上传图片组件新增cdnKey配置 修复主表格行内编辑错误更新关联关系对象的问题 修复业务审计导出按钮无法配置权限的问题 修复导入/导出任务在某些情况下模块名称未正确显示的问题 修复体验镜像RocketMQ无法正常启动的问题 20251217 升级内容 镜像版本升级: 6.3.7 –> 6.3.7.1 前端版本升级 修复 minLength 和 maxLength 配置 -1 时未正确移除验证的问题 修复工作流节点预览页面无法正常查看的问题 20251211 升级内容 镜像版本升级: 6.3.6 –> 6.3.7 后端版本升级: 6.3.6 –> 6.3.7 修复默认视图标题为空的问题 修复界面设计器导出时无法导出上游菜单的问题 修复元数据导入时无代码模型未正确安装的问题 20251127 升级内容 镜像版本升级: 6.3.5.1 –> 6.3.6 后端版本升级: 6.3.5.1 –> 6.3.6 前端版本升级 工作流表格切换、添加审批人表格列宽度塌陷 修复在画布被滚动后缩放中心偏移问题 流程设计器与流程图添加平移功能 流程图在拖拽与平移时添加边界检测 管理中心员工和用户名称修改同步工作流委托与交接实现变更 修复数据可视化交叉表查询异常的问题 20251126 升级内容 镜像版本升级: 6.3.5 –> 6.3.5.1 后端版本升级: 6.3.5 –> 6.3.5.1…

  张博昊

  2025年9月5日

  2.0K000
• 前端

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

  自定义视图获取数据 在某些情况下，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日

  2.1K002