PC端、移动端默认Mask模板

相关推荐

• 前端

  字段组件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日

  2.1K000
• 前端

  列表视图、卡片视图切换

  在日常项目开发中，我们可能会遇到当前视图是个表格，通过某个操作按钮将它变成卡片的形式. 这篇文章将带大家实现这种功能。通过上面两张图片可以看到出来不管是表格还是卡片，它都在当前的视图里面，所以我们需要一个视图容器来包裹表格跟卡片，并且表格可以使用平台默认的表格渲染，我们只需要自定义卡片即可。 我们用资源模块下面的国家菜单来实现这么一个功能这是对应的URL： http://localhost:8080/page;module=resource;viewType=TABLE;model=resource.ResourceCountry;action=resource%23%E5%9B%BD%E5%AE%B6;scene=resource%23%E5%9B%BD%E5%AE%B6;target=OPEN_WINDOW;menu=%7B%22selectedKeys%22:%5B%22%E5%9B%BD%E5%AE%B6%22%5D,%22openKeys%22:%5B%22%E5%9C%B0%E5%9D%80%E5%BA%93%22,%22%E5%9C%B0%E5%8C%BA%22%5D%7D 源码下载 views 创建外层的视图容器 刚刚我们讲过，不管是表格还是卡片，它都在当前的视图里面，所以我们需要写一个视图容器来包裹它们，并且对应的容器里面允许拆入表格跟卡片，我们先创建TableWithCardViewWidget.ts // TableWithCardViewWidget.ts import { BaseElementWidget, SPI, Widget } from '@kunlun/dependencies'; import TableWithCardView from './TableWithCardView.vue'; enum ListViewType { TABLE = 'table', CARD = 'card' } @SPI.ClassFactory( BaseElementWidget.Token({ widget: 'TableWithCardViewWidget' }) ) export class TableWithCardViewWidget extends BaseElementWidget { @Widget.Reactive() private listViewType: ListViewType = ListViewType.TABLE; // 当前视图展示的类型，是展示卡片还是表格 public initialize(props) { if (!props.slotNames) { props.slotNames = ['tableWidget', 'cardWidget']; } super.initialize(props); this.setComponent(TableWithCardView); return this; } } 在TableWithCardViewWidget中的initialize函数中，我们定义了两个插槽: tableWidget、cardWidget，所以需要在对应的vue文件里面里接收这两个插槽 <template> <div class="list-view-wrapper"> <!– 表格插槽 –> <div style="height: 100%" v-if="listViewType === 'table'"> <slot name="tableWidget" /> </div> <!– 卡片插槽 –> <div v-if="listViewType === 'card'"> <slot name="cardWidget"></slot> </div> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ props: ['listViewType', 'onChangeViewType'], inheritAttrs: false, setup(props, context) { const onChangeViewType = (listViewType) => { props.onChangeViewType(listViewType); }; } }); </script> 这样一来，我们就定义好了视图容器，接下来就是通过自定义layout的方式注册该容器 layout注册 import { registerLayout, ViewType } from '@kunlun/dependencies'; registerLayout( `<view type="TABLE"> <pack widget="group"> <view type="SEARCH"> <element widget="search" cols="4" slot="search"/> </view> </pack> <pack widget="group" slot="tableGroup" style="position: relative"> <element widget="actionBar" slot="actionBar" slotSupport="action"> <xslot name="actions" slotSupport="action" /> </element> <element widget="TableWithCardViewWidget"> <template slot="tableWidget"> <element widget="table" slot="table" datasource-provider="true"> <element widget="expandColumn" slot="expandRow" /> <xslot name="fields" />…

  汤乾华

  2024年10月16日

  2.8K010
• 前端

  如何自定义 GraphQL 请求

  在开发过程中，有时需要自定义 GraphQL 请求来实现更灵活的数据查询和操作。本文将介绍两种主要的自定义 GraphQL 请求方式：手写 GraphQL 请求和调用平台 API。 方式一：手写 GraphQL 请求 手写 GraphQL 请求是一种直接编写查询或变更语句的方式，适用于更复杂或特定的业务需求。以下分别是 query 和 mutation 请求的示例。 1. 手写 Query 请求 以下是一个自定义 query 请求的示例，用于查询某个资源的语言信息列表。 const customQuery = async () => { const query = `{ resourceLangQuery { queryListByEntity(query: {active: ACTIVE, installState: true}) { id name active installState code isoCode } } }`; const result = await http.query('resource', query); this.list = result.data['resourceLangQuery']['queryListByEntity']; }; 说明： query 语句定义了一个请求，查询 resourceLangQuery 下的语言信息。 查询的条件是 active 和 installState，只返回符合条件的结果。 查询结果包括 id、name、active、installState 等字段。 2. 手写 Mutation 请求 以下是一个 mutation 请求的示例，用于创建新的资源分类信息。 const customMutation = async () => { const code = Date.now() const name = `测试${code}` const mutation = `mutation { resourceTaxKindMutation { create(data: {code: "${code}", name: "${name}"}) { id code name createDate writeDate createUid writeUid } } }`; const res = await http.mutate('resource', mutation); console.log(res); }; 说明： mutation 语句用于创建一个新的资源分类。 create 操作的参数是一个对象，包含 code 和 name 字段。 返回值包括 id、createDate 等字段。 方式二：调用平台的 API 平台 API 提供了简化的 GraphQL 调用方法，可以通过封装的函数来发送 query 和 mutation 请求。这种方式减少了手写 GraphQL 语句的复杂性，更加简洁和易于维护。 1. 调用平台的 Mutation API 使用平台的 customMutation 方法可以简化 Mutation 请求。 /** * 自定义请求方法 * @param modelModel 模型编码 * @param method 方法名或方法对象 * @param records 请求参数，可以是单体对象或者对象的列表 * @param requestFields…

  汤乾华

  2024年9月21日

  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日

  805000
• 前端

  弹窗生命周期实践

  在oinone平台中，弹窗、抽屉是用户界面设计中最为常见的，而对于开发者而言，能够监听弹窗的生命周期事件通常是十分重要的，因为它提供了一个机会去执行一些逻辑。在这篇文章中，我们将深入探讨如何监听弹窗、抽屉生命周期事件，并讨论一些可能的应用场景。 首先，我们来实现一个监听弹窗销毁的事件。 让我们看一下提供的代码片段： // 1: 自定义打开弹窗的动作 @SPI.ClassFactory( BaseActionWidget.Token({ actionType: [ActionType.View], target: [ViewActionTarget.Dialog], model: 'model', name: 'name' }) ) export class MyDialogViewActionWidget extends DialogViewActionWidget { protected subscribePopupDispose = (manager: IPopupManager, instance: IPopupInstance, action) => { // 自定义销毁弹窗后的逻辑 }; protected mounted() { PopupManager.INSTANCE.onDispose(this.subscribePopupDispose.bind(this)); } protected unmounted() { PopupManager.INSTANCE.clearOnDispose(this.subscribePopupDispose.bind(this)); } } 在上面的代码中，我们自定义了打开弹窗的动作，并且监听了弹窗销毁事件。 让我们逐步解析这段代码： 1: subscribePopupDispose 是一个函数，作为弹窗销毁事件的处理程序。它接收三个参数：manager、instance 和 action。 manager: 弹窗事件管理器 instance: 弹窗实例 action: 操作弹窗的动作，如果是点击弹窗右上角的关闭按钮，那action为null 2: 组件挂载的时候，进行监听. 4: 最后组件销毁的时候需要清除对应的监听 那么，如果监听到弹窗销毁，我们可以执行什么样的逻辑呢？ 1: 更新相关组件状态： 弹窗销毁后，可能需要更新其他组件的状态。通过 popupWidget 可以获取到弹窗相关的信息，进而执行一些状态更新操作。 2: 处理弹窗销毁时的数据或动作： 在 subscribePopupDispose 函数中，action 参数含一些关于弹窗销毁时的动作信息，如果是点击弹窗右上角的销毁按钮，那action为null。我们可以根据这些信息执行相应的逻辑，例如更新界面状态、保存用户输入等 3: 触发其他操作： 弹窗销毁后，可能需要触发一些后续操作，比如显示另一个弹窗、发起网络请求等。 完整的生命周期 方法名 功能描述 onPush(fn) 监听 弹出窗口被推入时的事件处理器 clearOnPush(fn) 清除onPush事件的监听 onCreated(fn) 监听 弹出窗口创建时的事件处理器 clearOnCreated(fn) 清除onCreated事件的监听 onOpen(fn) 监听 弹出窗口打开时的事件处理器 clearOnOpen(fn) 清除onOpen事件的监听 onClose(fn) 监听 弹出窗口关闭时的事件处理器 clearOnClose(fn) 清除onClose事件的监听 onDispose(fn) 监听 弹出窗口被销毁时的事件处理器 clearOnDispose(fn) 清除onDispose事件的监听 onDisposeAll(fn) 监听 所有弹出窗口被销毁时的事件处理器 clearOnDisposeAll(fn) 清除onDisposeAll事件的监听 结语 开发者可以更灵活地响应用户操作，提升用户体验。在实际项目中，根据应用需求和设计，可以根据以上优化逻辑定制具体的处理流程。希望这篇文章为你提供了更深入的理解。

  汤乾华

  2023年11月17日

  1.8K001