深度分页问题优化方案

相关推荐

• 数式Oinone培训前注意事项

  一、快速上手 （建议至少预习 6 小时） 在正式培训之前，建议需要完成以下任务，以便对培训内容有基本了解： 点击阅读：快速启动入门 该文档为学员提供了从入门到实现 demo 的全过程说明，涵盖了开发工具、框架搭建、常见问题解答等内容 开始培训前，请参与人员确保完成以下任务 阅读并理解文档中的每个步骤。 配置好前后端开发环境。 完成 demo 的基础框架搭建，验证是否能够成功运行。 二、预期成果 通过上述预习，大家完成以下事项：• 成功搭建本地开发环境，并能运行前后端的基本 demo。• 对前后端技术栈有初步了解，为正式培训中的深度学习打下基础，并且提出对应的疑问点 三、其他准备工作 1.技术工具检查：请确在本地已安装并配置好必要的开发工具和环境（如 IDE、Node.js、数据库等）；2.参与者反馈：在预习过程中，学员如遇到困难或无法解决的问题（前后端疑问），请提前记录并提交，以便培训期间重点解答;3.版本是否是最新的版本，且建议研发人员版本一致，且类型是 mini; ps:部署包相关信息，联系数式相关人员获取

  shao

  未分类 2024年8月2日

  3.3K001
• 未分类

  前端自定义组件之锚点分组

  本文将讲解如何通过自定义，实现锚点组件。这个锚点组件会根据界面设计器拖入的分组，动态解析出锚点。 实现路径 整体的实现思路是界面设计器拖个容器类的组件（这里以选项卡为例），自定义这个选项卡，往选项卡里拖拽的每个分组，每个锚点的名称是分组的标题。 1. 界面设计器拖出页面 我们界面设计器拖个选项卡组件，然后在选项页里拖拽任意多个分组。完成后点击右上角九宫格，选中选项卡，填入组件 api 名称，作用是把选项卡切换成我们自定义的锚点分组组件，这里的 api 名称和自定义组件的 widget 对应。最后发布页面，并绑定菜单。 2. 组件实现 widget 组件重写了选项卡，核心函数 renderGroups，通过 DslRender.render 方法渲染界面设计器拖拽的分组。 import { BasePackWidget, DslDefinition, DslRender, SPI, Widget } from '@oinone/kunlun-dependencies'; import TabsParseGroup from './TabsParseGroup.vue'; function fetchGroupChildren(widgets?: DslDefinition[], level = 1): DslDefinition[] { if (!widgets) { return []; } const children: DslDefinition[] = []; for (const widget of widgets) { if (widget.widget === 'group') { children.push(widget); } else if (level >= 1) { fetchGroupChildren(widget.widgets, level – 1).forEach((child) => children.push(child)); } } return children; } @SPI.ClassFactory( BasePackWidget.Token({ widget: 'TabsParseGroup' }) ) export class TabsParseGroupWidget extends BasePackWidget { public initialize(props) { super.initialize(props); this.setComponent(TabsParseGroup); return this; } // 获取分组的子元素 public get groupChildren(): DslDefinition[] { return fetchGroupChildren(this.template?.widgets); } @Widget.Reactive() public get groupTitles() { return this.groupChildren.map((group) => group.title); } // 根据容器子元素渲染左侧 @Widget.Method() public renderGroups() { if (this.groupChildren && this.groupChildren.length) { return this.groupChildren.map((group) => DslRender.render(group)); } } } vue组件核心内容是用component :is属性，渲染出配置的分组组件 <template> <div class="TabsParseGroup"> <a-anchor :affix="false"> <a-anchor-link v-for="(item, index) in groupTitles" :href="`#default-group-${index}`" :title="item" /> </a-anchor> <div v-for="(item, index) in groupComponents" :id="`default-group-${index}`"> <component :is="item" /> </div> </div> </template> <script lang="ts"> import { computed, defineComponent, PropType } from 'vue'; export default…

  银时

  2025年7月8日

  535000
• 低无一体

  如何自定义点击导出动作绑定指定模板

  介绍 平台默认的导出会打开弹窗，然后在弹窗内的视图选择是用模板方式导出还是选字段导出，但是有时候有部分场景希望点击导出动作后直接进入导出流程，导出指定的某个模板，我们可以通过覆写打开弹窗的动作来实现该功能。 本文档参考了 表格页自定义按钮如何获取搜索区域的查询条件 代码示例 以下代码大部分场景只需要修改其中excelTplName更换模板即可，另外如何想增加复用性，还可以将该属性改为从元数据的配置中获取。 import { ActionType, BaseActionWidget, BaseElementListViewWidget, BooleanHelper, ClickResult, Condition, ExcelExportTask, FILE_MODULE_NAME, getSessionPath, GraphqlHelper, http, IQueryPageResult, ISort, queryDslWidget, ReturnPromise, RuntimeServerAction, ServerActionWidget, SPI, SubmitValue, SYSTEM_MODULE_NAME, translateValueByKey, UrlHelper, ViewActionTarget, Widget } from '@kunlun/dependencies'; import { OioNotification } from '@kunlun/vue-ui-antd'; @SPI.ClassFactory( BaseActionWidget.Token({ actionType: [ActionType.View], target: [ViewActionTarget.Dialog], model: 'ys0328.k2.Model0000000453', name: 'internalGotoListExportDialog' }) ) export class DemoExportActionWidget extends ServerActionWidget { /** * excel导出模板名称 * @protected */ protected excelTplName = '演示抽屉跳转链接导出'; /** * 导出任务的模型编码 * @protected */ protected exportTaskModel = 'excelExportTask'; /** * 导出任务的方法 * @protected */ protected exportTaskFun = 'createExportTask'; /** * * 是否是同步导出 */ @Widget.Reactive() protected get syncExport() { return BooleanHelper.isTrue(this.getDsl().sync) || !true; } protected async executeAction(action: RuntimeServerAction, parameters: SubmitValue): Promise<ClickResult> { const workbookId = await this.getWorkbookId(); if (!workbookId) { return false; } let task = { workbookDefinition: { id: workbookId } } as ExcelExportTask; // 从平台内置的方法获取搜索区域的条件 const { condition } = this.getSearchRsqlAndQueryParams(); // 排序规则 let sortList = [] as ISort[]; const baseViewWidget = Widget.select(this.rootHandle); const listViewWidget = queryDslWidget(baseViewWidget?.getChildrenInstance(), BaseElementListViewWidget); if (listViewWidget) { sortList = listViewWidget.sortList; } return this.export(task, condition, sortList); } protected getUploadBodyGql(id: string, condition: string | Condition, sortList:…

  nation

  2024年10月9日

  2.1K000
• 前端

  前端自定义请求入门版

  在开发过程中，为了满足业务场景、增加灵活性，前端自定义请求不可避免。下面将会从——自定义 mask、自定义表格(表单等)、自定义字段三个实际场景的角度，介绍自定义请求。这篇文章把请求都写在了 ts 中，这样便于继承重写，如果不习惯 ts 的写法，把请求写在 vue 里也是可以的。 1. 自定义 mask mask 组件通常会有一个特点：在不同页面不同模型或不同应用下都展示，与业务模型无关，且往往只需要请求一次。同时可能有精确控制请求体大小的需求，这就很适合采取手写 GraphQL 的方式。 例如，我要重写顶部 mask 中的用户组件，展示用户信息。这个请求就只需请求一次，而且不需要复用，就很适合手写 GraphQL。 这里继承平台的用户组件，然后在代码中写死 GraphQL 发起请求。但是 GraphQL 语句怎么拼呢？我们可以去默认页面，打开浏览器控制台，找到相应的请求，把 GraphQL 语句复制出来，这里复制下默认的用户请求。 http.query 参数的构造、相应结果的获取都能从请求中得到。可以看到我这里精简了请求，只取了用户名。 TS import { SPI, UserWidget, MaskWidget, Widget, http } from '@kunlun/dependencies'; import Test from './Test.vue'; @SPI.ClassFactory(MaskWidget.Token({ widget: 'user' })) export class TestWidget extends UserWidget { public initialize(props) { super.initialize(props); this.setComponent(Test); return this; } // 添加响应式注解，这样能在 vue 中接受到 ts 中的变量 @Widget.Reactive() public testUserInfo: { pamirsUser: { name: string } } | undefined; public async queryUser() { const query = ` { topBarUserBlockQuery { construct(data: {}) { pamirsUser { name } } } } `; const result = await http.query('user', query); this.testUserInfo = result.data['topBarUserBlockQuery']['construct'] as { pamirsUser: { name: string } }; } public mounted() { this.queryUser(); } } VUE <template> <div class="Test"> {{ testUserInfo }} </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ name: 'Test', props: ['testUserInfo'] }); </script> 效果如下： 2. 自定义表格(表单)等视图元素组件 2-1. 自定义表格 2-1-1. 自定义表格自动获取数据 Oinone 提供了前端组件的默认实现。所以生成默认页面的时候，请求数据都是通的，可以看到表格、表单、表单里的字段等组件数据都是能回填的。所以这里继承平台的表格组件，就有了平台表格自动获取数据的能力。 TS import { BaseElementWidget, SPI, TABLE_WIDGET, TableWidget, ViewType } from '@kunlun/dependencies'; import Test from './Test.vue'; @SPI.ClassFactory( BaseElementWidget.Token({ viewType: ViewType.Table, widget:…

  银时

  2025年4月17日

  764000
• Oinone FAQ

  复杂字段类型的导入导出

  复杂字段类型的导入导出 如果想要导出的字段是该模型关联的对象里的一个字段，则需要在创建模版时使用 “对象.字段” 的方式，并在导出时手动设置该字段 例如PamirsEmployee模型中的company，使用company.name创建值 @Field.many2one @Field.Relation(relationFields = {“companyCode”}, referenceFields = {“code”}) @Field(displayName = “所属公司”) private PamirsCompany company; //定义员工导入导出模版 @Component public class EmployeeTemplate implements ExcelTemplateInit { public static final String TEMPLATE_NAME = "employeeTemplate"; @Override public List<ExcelWorkbookDefinition> generator() { //可以返回多个模版，导出的时候页面上由用户选择导出模版 return Collections.singletonList( ExcelHelper.fixedHeader(PetShop.MODEL_MODEL, TEMPLATE_NAME) .createBlock(TEMPLATE_NAME, PetShop.MODEL_MODEL) .setType(ExcelTemplateTypeEnum.EXPORT) //使用company.name获取PamirsCompany里面的name字段 .addColumn("company.name", "所属公司") .build()); } } //手动设置该字段，如2所示 如果想要导出的字段是非存储字段，由于默认只导出存储在数据库里的字段，非存储的字段需要在导出时手动设置 @Slf4j @Component @Ext(ExcelExportTask.class) public class EmpTemplateExportExtPoint extends DefaultExcelExportFetchDataExtPoint { @Override @ExtPoint.Implement(expression = "context.name==\"" + EmployeeTemplate.TEMPLATE_NAME + "\"") public List<Object> fetchExportData(ExcelExportTask exportTask, ExcelDefinitionContext context) { return super.fetchExportData(exportTask, context); } //重写rawQueryList方法，使用listFieldQuery将非存储字段单独设置 @Override protected List<?> rawQueryList(IWrapper<?> wrapper) { List<PamirsEmployee> pamirsEmployeeProxies = (List<PamirsEmployee>) Models.data().queryListByWrapper(wrapper); if (CollectionUtils.isNotEmpty(pamirsEmployeeProxies)) { new PamirsEmployee().listFieldQuery(pamirsEmployeeProxies, PamirsEmployee::getDepartmentList); } return pamirsEmployeeProxies; } } 如果想要导入的字段存在多个，则可以创建一个代理模型，在代理模型里设置一个字段用来接受该多值字段（在Excel里一个单元格内填写多值字段，每个字段用自定义符号（如：" ; "）进行分割），在创建模版时使用该代理类的模版，在导入导出的时候再根据 “;” 截取 @Model.model(PamirsEmployeeProxy.MODEL_MODEL) @Model(displayName = "员工导出代理") @Model.Advanced(type = ModelTypeEnum.PROXY) public class PamirsEmployeeProxy extends PamirsEmployee { private static final long serialVersionUID = -6582160484690807999L; public static final String MODEL_MODEL = "business.PamirsEmployeeProxy"; @Field.String @Field(displayName = "部门编码列表") private String departmentCodeList; } 创建模版时创建代理模型的字段 .addColumn("departmentCodeList", "部门编码列表") 导入：新建一个类，用来作为导入的扩展点，继承AbstractExcelImportDataExtPointImpl @Component @Ext(ExcelImportTask.class) @Slf4j public class EmpTemplateImportExtPoint extends AbstractExcelImportDataExtPointImpl<PamirsEmployeeProxy> { //必须加这个方法，它使用EmployeeTemplate.TEMPLATE_NAME来指定导入模版 @Override @ExtPoint.Implement(expression = "importContext.definitionContext.name==\"" + EmployeeTemplate.TEMPLATE_NAME + "\"") public Boolean importData(ExcelImportContext importContext, PamirsEmployeeProxy data) { //TODO 根据逻辑校验数据 String departmentCodeList = data.getDepartmentCodeList();…

  yexiu

  2024年7月1日

  1.3K000