如何通过 Oineone 平台自定义视图

相关推荐

• 低无一体

  列表页内上下文无关的动作如何添加自定义上下文

  场景 在界面设计器，可以配置当前列表页从上个页面带的上下文参数，现在需要传递这个上下文到下个页面，设计器没有配置入口，我们可以通过自定义改动作来解决 示例代码 import { ActionType, ActionWidget, RouterViewActionWidget, SPI, ViewActionTarget } from '@kunlun/dependencies'; @SPI.ClassFactory( ActionWidget.Token({ actionType: [ActionType.View], target: [ViewActionTarget.Router], // 模型编码 model: 'module.model', // 动作名称 name: 'actionName' }) ) export class DemoRouterViewActionWidget extends RouterViewActionWidget { protected async clickAction(): Promise<void> { // initialContext内是上个页面传来的上下文，手动将值传递到下个页面的上下文 // 这里假设需要传递的字段名为type this.action.context = { type: this.initialContext.type }; return super.clickAction(); } }

  nation

  2024年8月20日

  1.1K000
• 前端

  自定义字段的数据联动

  某种情况下，开发人员期望自定以的字段发生变化后，需要修改其他的字段，这篇文章从两个维度来讲解如果处理数据的联动 界面设计器配置 1: 在界面设计器页面中的的组件区域找到自定义的字段，设计元件 2: 在模型区域，搜索提交方式，如果找到了，就把该字段拖拽进来, 如果找不到，就在元件中的组件区域，拖拽一个文本字段，按照下面的配置进行配置，然后保存 图一是找到了对应的字段图二是找不到对应的字段 【图一】 【图二】 图二的字段编码必须是constructDataTrigger 3: 从模型区搜索联动函数，将其拖拽进来 3: 从模型区搜索提交数据，将其拖拽进来4: 从模型区搜索提交字段，将其拖拽进来 5: 发布 （记得刷新页面哦） 最后再到对应的设计器页面，选中该字段，进行配置 提交方式为blur或者change ， 需要开发者手动调用该方法 this.blur()或者this.change(value) // 字段对应的ts文件 class MyField extends FormFieldWidget { onChangeValue(val) { // this.change(val) // this.blur() } } 联动函数就是要调用的后端函数 提交数据分为:变更字段 -> 发生变化后的字段当前视图字段 -> 当前视图所有的字段指定字段 -> 指定字段，如果配置的指定字段，那么提交字段的配置就要输入对应的字段 代码配置 平台也支持通过代码的方式修改字段 // 字段对应的ts文件 class MyField extends FormFieldWidget { onChangeValue(val) { // 修改字段本身的值 this.change(val) // 修改其他字段的值 this.formData.otherField = 'value' this.reloadFormData$.subject.next(true); } }

  汤乾华

  2023年11月9日

  1.3K000
• 前端

  页面出现中文乱码，该怎么解决？

  可能性1: 后端读取视图的xml解析时，由于系统缺少中文字体，导致解析后出现乱码，这种问题常见于采用docker镜像部署的情况，很多基础镜像不带中文字体。 解决方案：在物理系统或者docker镜像内安装中文字体 可能性2: win环境下未指定文件的编码类型 解决方案: 启动命令中加上-Dfile.encoding=UTF-8参数 # 示例命令 java -jar -Dfile.encoding=UTF-8 pamirs-demo-boot-1.0.0-SNAPSHOT.jar -Plifecycle=INSTALL

  oinone

  2023年11月1日

  826000
• 开发实践

  灵活敏捷开发，高效交付项目的6个关键

  项目工程管理 项目工程顶层分层 项目分层设计，划分出 CDM层、 标准业务层 、定制业务层； 沉淀领域业务模型至CDM层； 沉底业内通用功能至标准业务层； 客户定制化功能在定制业务层； 项目内部的层级划分 项目包结构管理及规范 pamirs-demo-api constant【常量的包路径】 enums【枚举类的包路径】 model【该领域核⼼模型的包路径】 pmodel【该领域代理模型的包路径】 tmodel【该领域传输模型的包路径】 service【存放该领域的⾮存储模型如：⽤于传输的临时模型】 utils【工具类】 XXModule【该类是Demo模块的定义】 pamirs-demo-core service【接口实现类】 init【模块初始化⼯作的包路径】 manager 【manager是 service的⼀些公共逻辑，不会定义为独⽴的function的类】 pamirs-demo-view（可选） action【模型对外交互的⾏为的包路径】 项目中模块间依赖 禁止出现api模块依赖core模块的情况，api模块只允许依赖api模块； 根据当前项目结构进行模块划分，避免循环依赖； 规划项目模块 项目阶段，代码开发前，业务架构师需充分的理解需求和蓝图，对系统进行业务域, 功能域的划分；例如：对一个电商系统： 提高系统的可维护性：通过将系统拆分为不同的业务域，每个业务域都有清晰的边界和职责，可以独立开发、测试和维护； 提升开发效率：业务域划分可以使开发团队更加专注于自己负责的业务，减少不必要的沟通和协调，提升开发效率； 促进团队合作：通过业务域划分，每个团队可以负责一个或多个业务域，团队成员之间可以有更高效的合作和协同。 支持系统的扩展和演化：业务域划分可以使系统更加灵活和可扩展。当需要新增一个新的业务功能或调整现有的业务逻辑时，只需要修改对应的业务域，而不需要对整个系统进行改动。 项目文档管理 项目文档管理对于项目的实施,项目进度管理，项目后期维护等都是至关重要的。系统详细的产品文档，测试文档，运维文档，开发文档，项目管理文档等。 协同合作：团队成员可以共享和访问项目文档，促进协同合作和信息共享，避免信息孤岛和重复工作。 知识管理：项目中所获得的知识，对项目的成功和后续的知识积累至关重要。通过良好的文档管理，可以确保项目知识的保存和传承，提高组织的知识管理能力。 问题解决：项目文档中记录了项目的需求、决策、问题和解决方案等信息。当出现问题或需要做决策时，可以通过查阅文档来获取相关信息，加快问题解决的速度，并减少错误和重复。 项目追踪：通过文档管理，可以跟踪项目的进展和状态。可以记录项目的里程碑、任务分配、进度更新等信息，帮助团队了解项目的整体情况，及时发现和解决问题。 知识共享：好的文档管理可以促进知识共享和传播。通过将项目文档进行分类、索引和存档，可以使团队成员更容易找到所需的信息，并从中学习和借鉴经验，提高工作效率和质量。 数据库和事务 多表联合查询 减少需要join的操作出现 用多次查询替代 索引相关 核心业务访问DB的Sql 要命中或者覆盖索引，保存核心业务的响应时间； 控制单表的索引数量，注意联合索引 数据一致性：乐观锁控制，unique�等 事务代码示例 事务相关注意点参考【Oinone如何支持构建分布式项目】：https://doc.oinone.top/kai-fa-shi-jian/5572.html

  shao

  2024年2月20日

  928000
• 前端

  字段组件submit方法详解

  场景介绍 在日常开发调试表单页的过程中，细心的小伙伴应该注意到，视图内的数据(通过vue调试工具看到的formData就是视图的数据)和最终通过服务端动作提交的数据不总是一致的，本文将带领大家解开疑惑。 为什么会出现这种现象？ 出现这种情况都是当前模型上有关联关系字段的场景，以多对一(M2O)场景为例，由于当前模型的关联关系字段是通过字段配置中的referenceFields属性和当前模型的relationFields属性进行关联的，所以提交数据的时候只需要拿到relationFields配置的字段就可以了，没有必要再去多拿关联关系字段本身的数据。 结合业务场景说明 这里以商品模型和类目模型举例，商品模型内有个类目的m2o字段category和对应的relationFields字段categoryId，数据提交到后端的时候前端默认会根据字段配置只获取categoryId，而category的整个对象都不会被提交。 package pro.shushi.pamirs.demo.api.model; import pro.shushi.pamirs.demo.api.model.DemoItemCategory; import pro.shushi.pamirs.meta.annotation.Field; import pro.shushi.pamirs.meta.annotation.Model; import pro.shushi.pamirs.meta.base.common.CodeModel; @Model.model(DemoItem.MODEL_MODEL) @Model(displayName = "测试商品") public class DemoItem extends CodeModel { private static final long serialVersionUID = -5104390780952631397L; public static final String MODEL_MODEL = "demo.DemoItem"; @Field.String @Field(displayName = "商品名称") private String name; @Field.Integer @Field(displayName = "类目ID") private Long categoryId; @Field.many2one @Field.Relation(relationFields = {"categoryId"}, referenceFields = {"id"}) @Field(displayName = "商品类目") private DemoItemCategory category; } 前端是如何处理数据的 前端的字段组件提供了submit()方法来让我们可以有就会在提交数据的时候改变数据。 // 字段组件基类 export class BaseFormItemWidget< Value = unknown, Props extends BaseFormItemWidgetProps = BaseFormItemWidgetProps > extends BaseDataWidget<Props> { /** * 数据提交的方法，例如：m2o字段user(假设其关系字段为userId)的值{id: 1, name: 'xxx'},但是实际后端数据只需要其中的id，所以用m2o对应的关系字段userId提交数据就可以了 * @param submitValue */ public submit(submitValue: SubmitValue): ReturnPromise<Record<string, unknown> | SubmitRelationValue | undefined> { return undefined; } } 这里先以FormStringFieldSingleWidget组件处理密码类型的字段讲解。密码一般在输入的时候是明文，为了提高提交到后端的安全性，可以将这个密码加密后再传到后端，后端再做进一步处理，这个场景中，视图中的密码和提交给后端的密码就出现了不一致的情况， @SPI.ClassFactory( BaseFieldWidget.Token({ viewType: [ViewType.Form, ViewType.Search], ttype: ModelFieldType.String }) ) export class FormStringFieldSingleWidget extends FormStringFieldWidget { public submit(submitValue: SubmitValue) { let finalValue = this.value; /** * 数据提交的时候，如果判断当前字段是否需要加密，需要加密的情况用encrypt函数做加密处理 */ if (this.crypto && finalValue) { finalValue = encrypt(finalValue); } return SubmitHandler.DEFAULT(this.field, this.itemName, submitValue, finalValue); } 注意：关系字段配置的透出字段只影响该字段的查询数据方法的返回值，不会因为此配置就在提交数据里加上这部分配置的字段 字段需要提交关联关系字段内的所有数据如何处理？ 我们可以在自定义组件里覆写submit()方法，直接将this.value内的数据返回这里以覆写多对多m2m字段为例 import { BaseFieldWidget, FormM2MFieldSelectWidget, ModelFieldType, SPI, SubmitValue, ViewType } from '@kunlun/dependencies'; @SPI.ClassFactory( BaseFieldWidget.Token({ viewType: ViewType.Form, ttype: ModelFieldType.ManyToMany, widget: 'Select', model: 'xxx.yyyyy', name: 'fileName01',…

  nation

  2024年9月10日

  1.0K000