深度分页问题优化方案

相关推荐

• 组件

  oio-empty-data 空数据状态

  何时使用 当目前没有数据时，用于显式的用户提示。 初始化场景时的引导创建流程。 API 参数 说明 类型 默认值 版本 description 自定义描述内容 string | v-slot – image 设置显示图片，为 string 时表示自定义图片地址 string | v-slot false imageStyle 图片样式 CSSProperties –

  汤乾华

  2023年12月18日

  2.1K000
• 前端

  【界面设计器】自定义字段组件实战——轮播图

  阅读之前 此文章为实战教程，已假定你熟悉了【界面设计器】较为完整的【自定义组件】相关内容。 如果在阅读过程中出现的部分概念无法理解，请自行学习相关内容。【前端】文章目录 业务背景 用户需要从【创建/编辑】页面中上传多张图片，并且在【详情】页面将这多张图片进行【轮播】展示。 业务分析 从需求来看，我们需要实现一个【轮播图】组件，并且该组件允许在【详情】视图中使用。在其他视图中，我们可以直接使用平台内置的【图片】组件，实现基础的编辑和展示功能。 名词解释 业务模型：需要进行可视化管理的存储模型或代理模型。 准备工作 你需要在某个业务模型下创建一个【表格视图】用于查看全部数据，创建【表单视图】用于创建/编辑数据，并创建【详情视图】展示必要的信息。（为了方便起见，你可以在所有视图中仅使用编码和名称两个字段） 你需要将【表格视图】绑定到某个菜单上，并通过【跳转动作】将三个视图进行关联，可以完整执行当前模型的全部【增删改查】操作。 业务模型定义 （以下仅展示本文章用到的模型字段，忽略其他无关字段。） DemoModel 名称 API名称 业务类型 是否多值 长度(单值长度) 编码 code 文本 否 128 名称 name 文本 否 128 轮播图 carouselImages 文本 是 512 实现页面效果展示 表格视图 表单视图-创建 表单视图-编辑 详情视图 根据业务背景添加轮播图字段到所有视图 轮播图字段信息： 字段业务类型：文本 多值：是 使用组件：图片 无代码模型 在模型设计器创建轮播图字段，并从【组件库】-【模型】拖放至视图中即可。 PS：这里需要注意的是，在模型设计器中需要切换至专家模式，并确认字段长度为512，否则当URL超长时将无法保存。 低代码模型 与服务端同学确认字段，并从【组件库】-【模型】中拖放至视图中即可。 将上图中的【演示】数据进行【编辑】，并上传三张图片，在【详情视图】查看默认展示效果。 演示图片下载 创建组件、元件 准备工作完成后，我们需要根据【业务背景】确定【组件】以及【元件】相关信息，并在【界面设计器】中进行创建。 以下操作过程将省略详细步骤，仅展示可能需要确认的关键页面。 创建轮播图组件 创建轮播图元件 根据业务背景，我们需要根据模型中的字段确定业务类型，在这个场景中，可以使用如下配置。（暂时可以不进行属性面板的设计） 在【详情视图】中将【轮播图字段】的组件切换为我们新创建的【轮播图组件】 PS：这里会发现组件变成了【输入框】的样式，这是由于我们没有提供对应元件的代码实现，使得SPI找到了默认组件。 启动SDK工程进行组件基本功能开发 (npm相关操作请自行查看SDK工程中内置的README.MD) Carousel.vue <template> <a-carousel class="carousel" effect="fade" autoplay> <div class="carousel-item" v-for="image in images" :key="image"> <img :src="image" :alt="image" /> </div> </a-carousel> </template> <script lang="ts"> import { Carousel as ACarousel } from 'ant-design-vue'; import { computed, defineComponent, PropType } from 'vue'; export default defineComponent({ name: 'Carousel', components: { ACarousel }, props: { value: { type: Array as PropType<string[]> } }, setup(props) { const images = computed(() => props.value || []); return { images }; } }); </script> <style lang="scss"> .carousel { .slick-slide { height: 160px; & > div, .carousel-item { width: 100%; height: 100%; } img { max-width: 100%; max-height: 100%; margin: auto; } } } </style> 效果展示 开发完成后，我们将重新打包生成的JS文件和CSS文件在【界面设计器】的【低无一体】进行上传，就可以在【设计器环境】中正常使用了。 设计轮播图的属性面板 通过我们使用的a-carousel组件，我们发现组件中提供了很多【属性】或【功能】可以进行配置，比如是否自动切换(autoplay)、面板指示点位置(dotPosition)、是否显示面板指示点(dots)等。在这里我们将对这三个属性的配置方式进行演示，其他更多属性可以自行设计并开发。 我们可以在【界面设计器】的【属性面板设计】中根据这三个属性的字段类型确定以下信息： 功能 API名称 业务类型 选用组件 可选项 是否自动切换 autoplay 布尔 开关 -…

  数式-海波

  2023年11月1日

  5.0K000
• 低无一体

  表格如何支持表尾合计计算

  介绍 可以通过扩展TableWidget.ts实现 示例代码 import { BaseElementWidget, DslDefinitionType, SPI, TableWidget, ViewType, Widget } from '@kunlun/dependencies'; @SPI.ClassFactory( BaseElementWidget.Token({ type: ViewType.Table, widget: 'table', model: 'resource.k2.Model0000000109', viewName: '移动端品牌_TABLE_0000000000021513' }) ) export class FooterStatisticsTable extends TableWidget { public initialize(props) { if (props.template) { props.template?.widgets?.forEach((a) => { if (a.dslNodeType === DslDefinitionType.FIELD && this.statisticsFieldList.includes(a.name)) { a.statistics = true; } }); } super.initialize(props); return this; } // 需要表尾做合并的字段名称 public statisticsFieldList = ['fansNum']; @Widget.Reactive() protected get showFooter(): boolean | undefined { return true; } } 效果预览

  nation

  2024年10月14日

  2.4K000
• Oinone FAQ

  【界面设计器】组件开发常见问题

  如何获取当前页面中的全部可用字段？ 在Class Component(ts)中使用以下代码获取当前设计组件实例 “` tsimport { WidgetInstance } from &#039;@kunlun/ui-designer-dependencies&#039;; @Widget.Reactive()@Widget.Inject()protected currentInstance: WidgetInstance | undefined;“` PS：这里使用了@kunlun/ui-designer-dependencies依赖包中的类型定义，但没有使用函数，因此这个导入是可以正常执行的。 在Vue组件中使用以下代码获取可选字段列表 “` tsimport { WidgetInstance } from &#039;@kunlun/ui-designer-dependencies&#039;; // props add currentInstance defineprops: { currentInstance: { type: Object as PropType<WidgetInstance> }} // setup using currentInstance get fieldsconst fields = computed(() => { return Array.from(props.currentInstance?.root?.fieldCollection.values() || []).map((v) => { return { label: v.element?.widgetData?.displayName, value: v.element?.name }; });});“` PS：这里的v.element?.widgetData?.displayName获取的是字段的元数据显示名称，如果需要获取字段输入的标题可以使用v.element?.properties?.label。 为什么需要选择当前页面中的字段？ 页面在发起请求时，会根据当前视图中的字段查询最小结果集，不在页面中的字段无法被正确获取。可以将用到的字段拖放至视图中，并使用【隐藏】属性进行隐藏即可。 列内容超过当前表格行高该怎么办？ 在界面设计器中选中表格组件，可以为表格设置指定的行高。 在界面设计器的属性面板组件中，如何获取当前字段所在模型的模型编码？ “` tsinterface InternalMetadata { model?: string;} @Widget.Reactive()protected get currentModel(): string | undefined { return (this.formData._metadata as InternalMetadata)?.model;}“` 在界面设计器的属性面板组件中，如何获取关联关系字段的关联模型的模型编码？ “` tsinterface InternalMetadata { modelReferences?: { model?: string; };} @Widget.Reactive()protected get referenceModel(): string | undefined { return (this.formData._metadata as InternalMetadata)?.modelReferences?.model;}“` 如何理解关联关系字段中的【透出字段(选项字段列表)】属性？ 正如我们现在已知的，页面发起查询请求时，将根据页面中的元数据获取最小结果集，不在页面中的字段并不包含在结果集中。这样虽然使得我们可以最小化的控制结果集的大小。 但对于关联关系类型的字段来说，我们也面临了一个无法回避的问题：对于【表格】、【表单】等这些组件，我们可以通过拖放字段的方式直接将字段展示在页面中，因此对于这些可被设计的组件而言无需其他过多的配置即可正常使用。但对于【下拉单选】、【下拉多选】等这些组件而言，我们无法在页面中直接定义关联关系字段的元数据。 我们在解决这一问题上也同样做了很多，比如当你在【下拉单选】中设置【选项标题】时，选项标题中的字段会被自动透出到页面中，在发起请求时也就能正常获取这些字段了。 特殊的是，如果某些字段只是在逻辑上被使用的，但又不能将其通过【选项标题】展示给用户的时候，我们必须使用一个属性来定义这些字段，使得我们的业务逻辑可以正常运行。因此，我们设计了【透出字段】来解决这一问题。 为什么在属性面板中的【选项字段列表】是【透出字段】呢？ 正如我们在业务开发过程中，服务端的模型定义的显示名称和在界面设计器中的字段标题可以是不一致的。由于服务端模型定义的字段API名称为optionFields，其中文直译是【选项字段列表】，但我们在产品设计时，希望这一属性可以被用户理解，因此在页面上展示的时候使用了【透出字段】作为标题呈现给用户。 在界面设计器中如何配置【透出字段(选项字段列表)】？ optionFields在配置时使用的是字段的API名称，在关联关系属性定义时，允许使用.分隔的方式定义关联关系字段的关联属性。 如：[‘code’, ‘name’, ‘user.code’, ‘user.name’]。其中user字段为多对一(M2O)的关联关系字段，其中有两个字段code和name。 与之对应的GQL响应结构为： query { xxxxxxQuery { queryPage(xxxxxx) { content { code name user { code name } } } } } 在界面设计器的属性面板组件中，如何通过代码方式设置【透出字段(选项字段列表)】？ @Widget.Method() public setOptionFields(optionFields: string[]) { this.formData.optionFields = optionFields; } 如何在字段中使用mountedCallChaining提供mountedProcess方法？ @Widget.Reactive() @Widget.Inject() protected mountedCallChaining: CallChaining | undefined; protected mountedProcess() {} protected mounted() { super.mounted(); this.mountedCallChaining?.hook(this.path, async () => { await this.mountedProcess(); }); } protected unmounted() { super.unmounted(); this.mountedCallChaining?.unhook(this.path); }

  nation

  2023年11月1日

  2.1K000
• Oinone 7天入门到精通

  6.4 国际化之多语言

  多语言是国际化中大家最常面对的问题，我们需要对应用的页面结构元素进行翻译，也需要对系统内容进行翻译比如：菜单、数据字典等，甚至还会业务数据进行翻译。但不管什么翻译需求，我们在实现上基本可以归类为前端翻译和后端翻译。前端翻译顾名思义是在前端根据用户选择语言对内容进行翻译，反之就是后端翻译。本文会带着大家了解oinone的前端翻译与后端翻译 准备工作 pamirs-demo-boot的pom文件中引入pamirs-translate包依赖 <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-translate</artifactId> </dependency> pamirs-demo-boot的application-dev.yml文件中增加配置pamirs.boot.modules增加translate，即在启动模块中增加translate模块 pamirs: boot: modules: – translate 后端翻译（使用） 这里通过对菜单的翻译来带大家了解翻译模块 Step1 新增翻译记录 切换应用到translate模块，点击新增翻译。 选择新增翻译生效模块 选择翻译的模型为：菜单模型 源语言选择中文，目标选择English 添加翻译项目： 源术语为：商店 翻译值为：shop 状态为：激活 Step2 查看效果 应用切换到Demo模块，在右上角切换语言至英语 后端翻译（自定义模型的翻译） 在前面菜单的翻译中，似乎我们什么都没做就可以正常通过翻译模块完成多语言的切换了。是不是真如我们想象的一样，当然不是。是因为Menu模型的displayName字段加上@Field(translate = true)注解。 Step1 为PetType模型的name字段增加翻译注解 package pro.shushi.pamirs.demo.api.model; import pro.shushi.pamirs.meta.annotation.Field; import pro.shushi.pamirs.meta.annotation.Model; import pro.shushi.pamirs.meta.base.IdModel; @Model.MultiTable(typeField = "kind") @Model.model(PetType.MODEL_MODEL) @Model(displayName="品种",labelFields = {"name"}) public class PetType extends IdModel { public static final String MODEL_MODEL="demo.PetType"; @Field(displayName = "品种名" , translate = true) private String name; @Field(displayName = "宠物分类") private String kind; } Step2 重启应用查看效果 切换应用到translate模块，点击新增翻译 切换应用到Demo模块，切换中英文，查看效果 前端翻译 还记得我们前端第一个自定义动作吗？会弹出“oinone第一个自定义Action，啥也没干”，我们要对它进行翻译。 Step1 修改前端DoNothingActionWidget.ts import translateValueByKey 提示语用translateValueByKey加上翻译 const confirmRs = executeConfirm(translateValueByKey(\’oinone第一个自定义Action，啥也没干\’)||\’oinone第一个自定义Action，啥也没干\’); 前端更多翻译工具请见前端高级特性-框架之翻译工具 import { Action, ActionContextType, ActionWidget, executeConfirm, IClientAction, SPI, ViewType, Widget, translateValueByKey } from '@kunlun/dependencies'; @SPI.ClassFactory(ActionWidget.Token({ name: 'demo.doNothing' })) export class DoNothingActionWidget extends ActionWidget { @Widget.Method() public async clickAction() { const confirmRs = executeConfirm(translateValueByKey('oinone第一个自定义Action，啥也没干')||'oinone第一个自定义Action，啥也没干'); } } //定义动作元数据 Action.registerAction('*', { displayName: '啥也没干', name: 'demo.doNothing', id: 'demo.doNothing', contextType: ActionContextType.ContextFree, bindingType: [ViewType.Table] } as IClientAction); Step2 新增翻译记录 前端翻译的翻译记录对应的模型可以随意找一个放。但要注意几点： 不要找有字读配置translate = true的模型，因为会影响后端翻译性能。 最好统一到一个模型中，便于后续管理。这里大家可以自定义一个无有业务访问且本身无需要翻译的模型来挂载，避免性能损失 Step3 刷新远程资源生成前端语言文件 Step4 新增或修改.env 前端在项目根目录下新增或修改.env，可以参考.env.example文件。通过.env文件为前端配置oss文件路径，针对I18N_OSS_URL配置项。真实前端访问翻译语言文件的路径规则为：http://bucket.downloadUrl/mainDir/租户/translate/模块/语言文件。 yaml文件中oss配置的文件路径：http://pamirs.oss-cn-hangzhou.aliyuncs.com/upload/demo/ 租户/translate/模块/语言文件 前端会自动根据上下文组织 # 后端api配置 # API_BASE_URL=http://127.0.0.1:8090 # 下面是国际化语言的cdn配置，默认用当前请求链接下的路径: /pamirs/translate/${module}/i18n_${lang}.js I18N_OSS_URL=http://pamirs.oss-cn-hangzhou.aliyuncs.com/upload/demo Step5 重启前端应用看效果 对语言进行中英文切换，进入宠狗达人页面，点击【第一个自定义Action】，查看前端翻译效果

  史, 昂

  2024年5月23日

  2.8K200