深度分页问题优化方案

相关推荐

• 组件

  前端自定义组件之单页面步骤条

  本文将讲解如何通过自定义，实现单页面的步骤条组件。其中每个步骤的元素里都是界面设计器拖出来的。 实现路径 整体的实现思路是界面设计器拖个选项卡组件，自定义这个选项卡，里面的每个选项页都当成一步渲染出来，每一步的名称是选项页的标题。 1. 界面设计器拖出页面 我们界面设计器拖个选项卡组件，然后在每个选项页里拖拽任意元素。完成后点击右上角九宫格，选中选项卡，填入组件 api 名称，作用是把选项卡切换成我们自定义的步骤条组件，这里的 api 名称和自定义组件的 widget 对应。最后发布页面，并绑定菜单。 2. 组件实现 widget 组件重写了选项卡，核心函数 renderStep，通过 DslRender.render 方法渲染界面设计器拖拽的元素，每一步的 step 又是解析选卡页得到的。 import { SPI, Widget, DefaultTabsWidget, BasePackWidget, DslDefinition, DslRender, DslDefinitionType, CallChaining, customMutation } from '@oinone/kunlun-dependencies'; import { VNode } from 'vue'; import NextStepSinglePage from './NextStepSinglePage.vue'; @SPI.ClassFactory(BasePackWidget.Token({ widget: 'NextStepSinglePage' })) export class NextStepSinglePageWidget extends DefaultTabsWidget { public initialize(props) { super.initialize(props); this.setComponent(NextStepSinglePage); return this; } @Widget.Reactive() public get invisible() { return false; } // 配置的每一步名称，解析选项页的标题 @Widget.Reactive() public get titles() { return this.template?.widgets?.map((item) => item.title) || []; } // region 上一步下一步配置 // 步骤数组，数组里的元素即步骤要渲染的内容 @Widget.Reactive() public get steps(): DslDefinition[] { // 每个 tab 是一个步骤，这里会有多个步骤 // 每个步骤里有多个元素，又是数组 // 所以这里是二维数组 const tabDsls: DslDefinition[][] = this.template?.widgets.map((item) => item.widgets) || []; // 对每个步骤的子元素们，外侧包一层 row 布局，所以变回了一维数组 return tabDsls.map((tabDsl) => { return { …(this.template || {}), dslNodeType: DslDefinitionType.PACK, widgets: tabDsl, widget: 'row', resolveOptions: { mode: 1 } }; }); } // 渲染步骤，每个步骤有多个子元素 @Widget.Method() public renderStep(step: DslDefinition): VNode | undefined { return DslRender.render(step); } // region 校验相关 // 校验的钩子 @Widget.Reactive() @Widget.Inject('validatorCallChaining') protected parentValidatorCallChaining: CallChaining<boolean> | undefined; // 校验步骤表单 @Widget.Method() public async onValidator(): Promise<boolean> { const res = await this.parentValidatorCallChaining?.syncCall(); return res…

  银时

  2025年7月8日

  789000
• 界面设计器

  计算属性如何配置按条件展示不同的值

  1.打开计算公式，点击“fx”字样的图标添加函数 2.选择逻辑函数分类下的条件函数 3.在第一个输入框填写条件，这里可以手写条件的表达式，后面2个输入框分别是条件成立时的值和条件不成立时的值，可以手动输入表达式 表达式中的activeRecord，在表格中代表当前表格行的数据，在表单中为整个表单的数据

  nation

  2024年5月16日

  1.1K000
• Oinone 7天入门到精通

  集成平台

  1. 集成介绍 集成是指平台应用与外部系统之间的集成，平台内部应用之间直接内部服务调用。 在讲解集成设计之前先了解以下概念： 集成资源：在实际业务场景中需要将多个系统打通，针对单一的一方，我们称之为集成资源。集成资源可以是具体的数据服务合集，例如系统应用、数据库、FTP服务、域控服务等。 连接器：连接具体集成资源，以供后续实际集成时使用的connector。 数据流程：通过流程编排的方式，让集成也可以可视化的处理，提升集成作业效率。 集成平台通过连接器、数据流程的编排实现与外部系统的数据互通，包括：连接器、数据流程、流程日志三部分功能。 集成操作整体流程： 2. 连接器 支持集成应用、数据库两大类型的资源。 页面操作包括：新增、编辑、查看引用、删除，点击卡片进入API列表管理接口。 2.1 连接器之应用 2.1.1 新增应用 操作入口：在连接器、应用Tab页面——新增应用资源。 2.1.2 编辑应用 编辑应用同新增页面信息，不做赘述。 2.1.3 删除应用 允许删除未被引用的应用，已被引用的不允许删除。 2.1.4 应用详情 点击应用卡片进入应用详情，查看应用基础信息、集成的接口清单。 2.1.5 API接口 操作入口：新增资源后，点击连接器卡片，进入API管理页面。 页面操作：新增、删除、编辑、详情、返回连接器。 2.1.5.1 新增API 输入基础信息、请求参数、定义响应结果； API URL支持： 协议类型：HTTP/HTTPS Verb：GET、POST、PUT、DELETE 参数类型支持：Long、Double、String、Boolean、Integer、Date、Void、Object。 2.1.5.2 新增WebService 输入基础信息、请求参数、定义响应结果； API URL支持： 协议类型：HTTP/HTTPS Verb：POST 参数类型支持：Long、Double、String、Boolean、Integer、Date、Void、Object。 2.1.5.3 编辑 编辑同新增页面信息，不做赘述。 2.1.5.4 删除 删除API接口后不能继续使用，请慎重。 2.1.6 查看引用 查看引用应用资源的接口。 2.2 连接器之资源 2.2.1 新增数据库资源 操作入口：在连接器页面，切换到数据库页面——新增DB资源。 2.2.2 编辑应用 编辑应用同新增页面信息，不做赘述。 2.2.3 删除应用 允许删除未被引用的应用，已被引用的不允许删除。 2.2.4 查看引用 查看引用数据库的接口。 2.2.5 数据库详情 点击应用卡片进入数据库连接器详情，查看应用基础信息、集成的接口清单，新增API。 2.2.6 API接口 2.2.6.1 新增API 输入基础信息、请求参数、数据库操作、定义响应结果。 2.2.6.2 编辑 编辑同新增页面信息，不做赘述。 2.2.6.3 删除 删除API接口后不能继续使用，请慎重。 3. 数据流程 3.1.1 数据流程介绍 数据流程：通过流程编排的手段，可视化的配置、处理集成的数据流程，提升集成作业效率。 主要包含基本操作和流程设计两个部分。前者包含了流程的新增、删除、复制、停用/启用、设计/编辑、搜索。后者包含单一流程的基础信息修改、流程设计、参数配置、保存、发布。 3.1.2 流程的基本操作 3.1.2.1 新增流程 新增流程，点击后进入流程设计页面，流程名默认为“未命名流程”，可自行修改。 3.1.2.2 设计/编辑 点击编辑进入该流程的设计页面。 3.1.2.3 停用/启用 流程需要更新或暂时不用时可以使用停用功能。流程停用后将不会执行流程，正在执行中的流程不受停用影响。 针对停用流程，点击启用按钮，流程恢复启用状态，可正常触发。 3.1.2.4 复制 遇到流程节点动作相似度较高的情况可以使用复制流程的功能，点击按钮后生成一个“原流程名-复制”的流程，并且进入新流程的流程设计界面。 3.1.2.5 删除 遇到流程创建有误，没有使用过且将来也不会使用该流程，可以删除流程。需要注意的是，删除流程的前提是该流程已停用，并且该流程从未执行过。 3.1.3 流程设计 通过新增、编辑/设计动作进入流程设计页后，可以进行流程名称、流程说明的编辑，可以进行流程设计，流程参数配置，保存和发布。 3.1.3.1 流程配置 点击进入流程配置页面，若需要配置一些参数供流程使用，可在此添加和删除。删除流程参数时，若该参数已在流程中被使用则无法删除。参数支持文本、数值、日期、布尔四种类型。 3.1.3.2 保存 点击后流程设计进行存档，流程设计不完整也支持保存，下次进入流程设计回到保存的页面。 3.1.3.3 发布 第一次发布时右上角发布显示文字为发布流程，后续发布按钮显示文字为更新发布。发布后流程才会按照设计触发，首次发布和更新发布的逻辑一致，若流程中有未解决的错误则无法发布不成功，发布成功后页面跳转到显示全部流程的页面，流程状态为已启用、已更新。 3.1.4 流程触发 新增的流程设计页面默认包含两个节点，一个是流程的触发节点：确定流程开始的条件；另一个是流程结束的节点。 流程触发方式有定时触发、消息触发两种方式，未设置流程触发方式时无法继续添加后续流程节点，同时无法进行流程发布，如左下图。触发方式设置完成后，可从左侧菜单栏拖入或流程箭头中的加号点击添加节点动作，如下图。 3.1.4.1 定时触发 定时触发适用于周期性调用流程的场景，设置流程第一次执行的时间，配置循环的周期间隔。 3.1.4.2 消息触发 消息触发方式下，识别消息任务的唯一标识，标识可复用。在发送消息时，必须匹配定义的消息标识。 3.1.5节点动作 3.1.5.1 集成服务 集成服务API，选择集成的应用、此应用下的API，配置相应的参数。 3.1.5.2 数据处理 【新增数据】节点：同流程设计器； 【更新数据】节点：同流程设计器； 【获取数据】节点：同流程设计器； 【删除数据】节点：同流程设计器； 【更新流程参数】节点：同流程设计器； 【引用逻辑】节点：同流程设计器； 3.1.5.3 构建 【延时】节点：同流程设计器； 【条件分支】节点：同流程设计器； 【子流程】节点：同流程设计器； 【循环】节点 循环模式：次数循环、列表循环； 次数循环：需配置循环开始值、循环结束值、循环步长； 列表循环：配置需要循环的列表； 均使用表达式配置相应字段， 3.1.5.4 通知消息 【站内信】节点：同流程设计器； 【邮件】节点：同流程设计器； 【短信】节点：同流程设计器； 4. 流程日志 查看流程执行的情况，包括执行状态、执行时间、执行时长，针对异常流程，可以重试。 详情：查看流程日志、日志详情。

  史, 昂

  2024年6月20日

  2.1K000
• 工作流

  【工作流】如何添加工作流运行时依赖

  前端 package.json中新增依赖 @kunlun/workflow,版本跟@kunlun/dependencies的填一样 src/main.ts内导入依赖 import 'reflect-metadata'; import { VueOioProvider } from '@kunlun/dependencies'; // START 导入代码放在导入@kunlun/dependencies之后 import '@kunlun/workflow/dist/kunlun-workflow.css'; import '@kunlun/workflow'; // END 导入代码放在VueOioProvider()方法执行前 VueOioProvider({ // TODO }); 后端 父pom新增依赖，下面例子中的版本号仅供参考，请根据当前框架版本正确选择版本 <properties> <pamirs.core.version>4.7.8</pamirs.core.version> <pamirs.workflow.designer.version>4.7.8</pamirs.workflow.designer.version> <pamirs.workbench.version>4.7.8</pamirs.workbench.version> </properties> <dependencyManagement> <dependencies> <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> <artifactId>pamirs-workflow</artifactId> <version>${pamirs.workflow.version}</version> <type>pom</type> <scope>import</scope> </dependency> <dependency> <groupId>pro.shushi.pamirs.work.bench</groupId> <artifactId>pamirs-work-bench-core</artifactId> <version>${pamirs.workbench.version}</version> </dependency> <dependency> <groupId>pro.shushi.pamirs.work.bench</groupId> <artifactId>pamirs-work-bench-view</artifactId> <version>${pamirs.workbench.version}</version> </dependency> </dependencies> </dependencyManagement> 2.boot启动工程的pom新增依赖 <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-sql-record-core</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-trigger-core</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-trigger-bridge-tbschedule</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-user-core</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-user-view</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-auth-core</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-business-core</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-business-view</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.workflow</groupId> <artifactId>pamirs-workflow-core</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.work.bench</groupId> <artifactId>pamirs-work-bench-core</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.work.bench</groupId> <artifactId>pamirs-work-bench-view</artifactId> </dependency> 3.application.yml配置新增依赖 pamirs: boot: modules: – user – auth – business – sql_record – trigger – workflow 特别注意 工作流模块如果线上部署需要流程设计器能力，可以参考文档流程设计器部署注意事项

  nation

  2024年5月30日

  1.6K000
• 代码实践

  复杂Excel模版定义

  模版示例： Demo Excel样例 代码示例： @Model.model(TestApply.MODEL_MODEL) @Model(displayName = "测试申请") public class TestApply extends IdModel { public static final String MODEL_MODEL = "top.TestApply"; @Field.String @Field(displayName = "发件人") private String addresser; @Field.String @Field(displayName = "委托单位") private String entrustedUnit; @Field.String @Field(displayName = "付款单位") private String payer; @Field.String @Field(displayName = "付款单位地址") private String paymentUnitAdd; } 模版： package pro.shushi.pamirs.top.core.temp; import org.springframework.stereotype.Component; import pro.shushi.pamirs.file.api.builder.SheetDefinitionBuilder; import pro.shushi.pamirs.file.api.builder.WorkbookDefinitionBuilder; import pro.shushi.pamirs.file.api.enmu.ExcelAnalysisTypeEnum; import pro.shushi.pamirs.file.api.enmu.ExcelDirectionEnum; import pro.shushi.pamirs.file.api.enmu.ExcelHorizontalAlignmentEnum; import pro.shushi.pamirs.file.api.model.ExcelWorkbookDefinition; import pro.shushi.pamirs.file.api.util.ExcelHelper; import pro.shushi.pamirs.file.api.util.ExcelTemplateInit; import pro.shushi.pamirs.top.api.model.TestApply; import java.util.Collections; import java.util.List; @Component public class DemoTemplate implements ExcelTemplateInit { public static final String TEMPLATE_NAME = "DemoTemplate"; @Override public List<ExcelWorkbookDefinition> generator() { WorkbookDefinitionBuilder builder = WorkbookDefinitionBuilder.newInstance(TestApply.MODEL_MODEL, TEMPLATE_NAME) .setDisplayName("测试Demo"); DemoTemplate.createSheet(builder); return Collections.singletonList(builder.build()); } private static void createSheet(WorkbookDefinitionBuilder builder) { SheetDefinitionBuilder sheetBuilder = builder.createSheet().setName("测试Demo"); buildBasicInfo(sheetBuilder); } private static void buildBasicInfo(SheetDefinitionBuilder builder) { //A1:D8：表示表头占的单元格数，范围必须大于实际表头行 BlockDefinitionBuilder mergeRange = builder.createBlock(TestApply.MODEL_MODEL, ExcelAnalysisTypeEnum.FIXED_HEADER, ExcelDirectionEnum.HORIZONTAL, "A1:D8") //预设行 .setPresetNumber(10) //合并哪几个单元格 .createMergeRange("A1:D1") .createMergeRange("A2:D2") .createMergeRange("A3:D3") .createMergeRange("A4:A6") .createMergeRange("B4:B6") .createMergeRange("C4:C6") .createMergeRange("D4:D5"); //createHeader创建行，createCell创建单元格，setField指定解析字段，setIsConfig指定为true标记该行是需要解析的值 mergeRange.createHeader().setStyleBuilder(ExcelHelper.createDefaultStyle()).setIsConfig(Boolean.TRUE) .createCell().setField("addresser").setStyleBuilder(ExcelHelper.createDefaultStyle().setWidth(6000)).and() .createCell().setField("entrustedUnit").and() .createCell().setField("payer").and() .createCell().setField("paymentUnitAdd").and() .and() .createHeader().setStyleBuilder(ExcelHelper.createDefaultStyle(typeface -> typeface.setBold(Boolean.TRUE)).setHorizontalAlignment(ExcelHorizontalAlignmentEnum.CENTER)) .createCell().setValue("Demo").and() .createCell().and() .createCell().and() .createCell().and() .and() //由于该行合并为一个单元格，所以其他可以不设置value .createHeader().setStyleBuilder(ExcelHelper.createDefaultStyle(typeface -> typeface.setBold(Boolean.TRUE)).setHorizontalAlignment(ExcelHorizontalAlignmentEnum.CENTER)) .createCell().setValue("生效金额").and() .createCell().and() .createCell().and() .createCell().and() .and() .createHeader().setStyleBuilder(ExcelHelper.createDefaultStyle(typeface -> typeface.setBold(Boolean.TRUE)).setHorizontalAlignment(ExcelHorizontalAlignmentEnum.RIGHT)) .createCell().setValue("金额单位：元").and() .createCell().and() .createCell().and() .createCell().and() .and() //easyExcel解析不了空行，所以这里写上值。由于上面使用createMergeRange把单元格合并了，并且D列有分割，这里填上每个单元格的值，把合并的单元格填为一样的。 .createHeader().setStyleBuilder(ExcelHelper.createDefaultStyle(typeface -> typeface.setBold(Boolean.TRUE)).setHorizontalAlignment(ExcelHorizontalAlignmentEnum.CENTER)) .createCell().setValue("发件人").and() .createCell().setValue("委托单位").and()…

  yexiu

  2024年11月18日

  2.4K001