【路由】浏览器地址栏url参数介绍

相关推荐

• 前端

  如果让表单支持单选 ？

  本文将介绍在代码和XML配置中的修改，支持表格的单选功能。 先自定义一个widget，继承平台默认的table @SPI.ClassFactory( BaseElementWidget.Token({ viewType: ViewType.Table, widget: 'MyRadioTable' }) ) export class MyRadioTable extends TableWidget { @Widget.Reactive() protected get selectMode(): ListSelectMode { return ListSelectMode.radio; } } 注册layout 如果当前是主表格，那么xml配置如下 const xml = `<view type="TABLE"> <pack widget="group"> <view type="SEARCH"> <element widget="search" slot="search" slotSupport="field" /> </view> </pack> <pack widget="group" slot="tableGroup"> <element widget="actionBar" slot="actionBar" slotSupport="action"> <xslot name="actions" slotSupport="action" /> </element> <element widget="MyRadioTable" slot="table" slotSupport="field"> <element widget="expandColumn" slot="expandRow" /> <element widget="RadioColumn" /> <xslot name="fields" slotSupport="field" /> <element widget="rowActions" slot="rowActions" slotSupport="action" /> </element> </pack> </view>` registerLayout(xml, { moduleName: '模块名称', model: '模型', viewType: ViewType.Table }) 如果当前的表格是form表单页面的表格，那么xml配置如下 const xml = `<view type="TABLE"> <view type="SEARCH"> <element widget="search" slot="search" slotSupport="field" /> </view> <element widget="actionBar" slot="actionBar" slotSupport="action"> <xslot name="actions" slotSupport="action" /> </element> <element widget="MyRadioTable" slot="table"> <element widget="expandColumn" slot="expandRow" /> <element widget="RadioColumn" /> <xslot name="fields" slotSupport="field" /> <element widget="rowActions" slot="rowActions" /> </element> </view>` registerLayout(xml, { moduleName: '模块名称', model: '模型', viewType: ViewType.Table })

  汤乾华

  2023年11月27日

  1.1K000
• 低无一体

  如何编写自定义字段组件的校验逻辑

  介绍 自定义字段组件的时候，我们可能会遇到有复杂校验规则或者业务上特殊的校验提示信息的场景，这时候可以通过覆写字段的校验方法validator来实现。 示例代码 import { SPI, ValidatorInfo, FormStringFieldWidget, isEmptyValue, isValidatorSuccess, FormFieldWidget, ViewType, ModelFieldType } from '@kunlun/dependencies' @SPI.ClassFactory(FormFieldWidget.Token({ viewType: [ViewType.Form], ttype: ModelFieldType.String, widget: 'DemoPhone' })) export class DemoFormPhoneFieldWidget extends FormStringFieldWidget { // 字段校验方法 public async validator(): Promise<ValidatorInfo> { // 建议先调用平台内置的通用校验逻辑 const res = await super.validator(); if (!isValidatorSuccess(res)) { // 校验失败直接返回 return res; } // 编写自有校验逻辑 if (!isEmptyValue(this.value) && !/^1[3456789]\d{9}$/.test(this.value as string)) { // 通过内置的validatorError方法提示校验提示信息 return this.validatorError('手机号格式错误'); } // 无异常，用内置的validatorSuccess返回校验通过的信息 return this.validatorSuccess(); } } 扩展学习 自定义字段组件如何处理vue组件内的表单校验

  nation

  2024年8月23日

  2.6K000
• 前端

  自定义视图组件（v4）

  阅读之前 你应该： 了解DSL相关内容。母版-布局-DSL 渲染基础（v4） 了解SPI机制相关内容。组件SPI机制（v4） 什么是视图组件 我们将一个视图中提供数据源的组件称为视图组件。 下面，我们将根据提供的示例布局进行进一步介绍。 示例布局（默认表格视图布局） <view type="TABLE"> <pack widget="group"> <view type="SEARCH"> <element widget="search" slot="search" /> </view> </pack> <pack widget="group" slot="tableGroup"> <element widget="actionBar" slot="actionBar"> <xslot name="actions" /> </element> <element widget="table" slot="table"> <element widget="expandColumn" slot="expandRow" /> <xslot name="fields" /> <element widget="rowActions" slot="rowActions" /> </element> </pack> </view> view: 视图标签；一个视图中的所有组件将共享数据源，视图的数据源通过视图组件进行提供。（在这个示例中，该视图的数据源通过widget="table"（TableWidget）提供） pack: 容器组件标签； element: 通用元素组件标签； xslot：dsl插槽； 根据标签性质，我们可以将这个示例布局进一步简化，只留下我们目前要关注的主要内容。 <view type="TABLE"> <element widget="table" slot="table"> <xslot name="fields" /> </element> </view> 在以上示例布局中，有且仅有一个组件会向视图提供数据源，那就是widget="table"（TableWidget）这个组件。我们接下来将对这个组件进行自定义，以实现业务中所需的列表(List)数据源展示方式。 1 平台组件简介 平台提供的基础组件有如下几种： 组件名称 描述 BaseElement element标签通用组件 BaseElementViewWidget 通用视图组件 BaseElementObjectViewWidget 对象（Object）数据源通用视图组件 BaseElementListViewWidget 列表（List）数据源通用组件 平台提供的内置组件有如下几种：（均使用element标签） 组件名称 标签 视图类型 描述 TableWidget widget="table" TABLE 内置表格组件 FormWidget widget="form" FORM 内置表单组件 DetailWidget widget="detail" DETAIL 内置详情组件 GallertWidget widget="gallery" GALLERY 内置画廊组件 TreeWidget/CardCascaderWidget widget="tree/cardCascader" TREE 内置树/卡片级联组件 我们可以根据业务场景，继承不同的组件，来实现自己的业务场景。在自定义过程中，我们建议尽可能的将逻辑控制在组件内部。如果场景是唯一且确定的，也可以进行一些特殊逻辑处理。 2 场景：实现一个虚拟滚动表格（不使用分页器） 2.1 确定组件名称 widget="VirtualTable" 通过布局设置自定义组件名称 我们将原表格布局中的widget="table"改为我们所需要的自定义组件名称即可。 多个视图可以绑定同一个布局，所以这种修改方式更适用于大范围使用相同布局的情况。 <view type="TABLE"> <pack widget="group"> <view type="SEARCH"> <element widget="search" slot="search /> </view> </pack> <pack widget="group" slot="tableGroup"> <element widget="actionBar" slot="actionBar> <xslot name="actions" /> </element> <element widget="VirtualTable" slot="table"> <element widget="expandColumn" slot="expandRow" /> <xslot name="fields" /> <element widget="rowActions" slot="rowActions" /> </element> </pack> </view> 通过DSL设置自定义组件名称 我们使用了slot="table"这个插槽，通过属性合并覆盖的方式，在DSL上直接指定我们所需要的自定义组件名称即可。 这种修改方式更适用于个别几个视图需要使用该组件的情况。 <view type="TABLE"> <template slot="table" widget="VirtualTable"> …… </template> </view> 2.2 简单实现一个基础功能的虚拟滚动表格 定义一个VirtualTable.vue文件，使用平台提供的oio-table组件。目前内部采用vxe-table封装，相关api文档 点击查看 props定义： showDataSource: 当前展示数据；通过平台内置BaseElementListViewWidget组件提供。 <template> <oio-table ref="table" border show-overflow height="400" :row-config="{ isHover: true…

  oinone

  2023年11月1日

  1.9K000
• 前端

  【界面设计器】自定义字段组件实战——表格字段内嵌表格

  阅读之前 此文章为实战教程，已假定你熟悉了【界面设计器】较为完整的【自定义组件】相关内容。 如果在阅读过程中出现的部分概念无法理解，请自行学习相关内容。【前端】文章目录 业务背景 表格中的一对多(O2M)或多对多(M2M)字段使用表格展开。 演示内容：在【商品】的表格中存在【库存信息】这一列，这一列的内容通过表格展示【尺码】和【数量】两列。 业务分析及实现思路 从需求来看，我们需要实现一个【内嵌表格】组件，并且该组件允许在【表格】视图中使用。与之前不同的是，这里我们需要支持两个业务类型一对多(O2M)和多对多(M2M)，即一个组件中包含两个元件。 在【内嵌表格】组件的属性面板中，我们需要再定义一个【内嵌表格配置】组件，用来选择内嵌表格中需要哪些字段进行组合，以及为每个组合提供一些基础配置。 这里需要理解一个基本概念，即【内嵌表格】的属性面板是【内嵌表格配置】的【执行页面】。所有组件的属性面板在【执行页面】时都是【表单】视图。 因此我们可以实现一个【内嵌表格配置】组件，并且该组件允许在【表单】视图中使用。其业务类型使用【文本】，我们在保存配置数据时，可以使用JSON数据结构来存储复杂结构。（这里的实现思路并非是最符合协议设定的，但可以满足绝大多数组件场景） 在【内嵌表格配置】组件中，我们可以允许用户添加/移除组合，并且每个组合有两个属性，【标题】和【字段】。 一些解释 看过【界面设计器】自定义字段组件实战——表格字段组合展示文章的读者可能很熟悉这一实现思路，会想当然的尝试将两个组件进行合并。这里我觉得有必要作出一些实现思路上的解释。 虽然在表面上看起来【组合列配置】和【内嵌表格配置】用到的属性完全一样，但在实现上，由于关联关系的查询需要在组件中特殊处理【透出字段(选项字段列表)】字段（【界面设计器】组件开发常见问题中对该属性进行了解释），才能查询到相应的关联数据。 不仅如此，这两个组件所代表的含义也完全不同。【组合列配置】是在一列中配置需要展示的字段，它在未来可能会增加【颜色（根据条件判断展示不同的颜色）】、【动作（可点击的行为）】等等诸多与之相关的属性。【内嵌表格配置】是在一列中配置表格中的多列，它在未来可能会增加【行高（控制表格行高）】、【支持排序（表格列支持排序）】等等诸多与之相关的属性。 在这里希望读者可以理解一点：相似并不代表相关。组件的抽象与归纳整理的不同点在于，抽象更需要关心其本身所代表的含义，而不是仅关注其相似程度。将多个相似度高但含义不同的组件进行归纳整理得到的只是一个含义不明，无法适应变化的组件。 因此，我们仍然使用两个不同的组件进行实现。 准备工作 此处你应该已经准备好了【商品】和【库存】两个模型，并且可以完整执行【商品】模型的全部【增删改查】操作。 业务模型定义（此处模型定义并非业务中正常使用的模型定义，仅作为演示使用） （以下仅展示本文章用到的模型字段，忽略其他无关字段。） 关联字段：-左侧表示当前模型中的字段API名称，右侧表示关联模型中的字段API名称。 商品（Item） 名称 API名称 业务类型 是否多值 长度(单值长度) 关联模型 关联字段 ID id 整数 否 – – – 编码 code 文本 否 128 – – 名称 name 文本 否 128 – – 库存信息 inventoryInfo 一对多 是 – 库存（Inventory） id – itemId 库存（Inventory） 名称 API名称 业务类型 是否多值 长度(单值长度) 关联模型 关联字段 ID id 整数 否 128 – – 商品 item 多对一 否 – 商品（Item） itemId – id 商品ID itemId 整数 否 – – – 尺码 size 文本 否 128 – – 库存 count 整数 否 – – – PS：如果是使用【模型设计器】创建这两个模型，在创建关联关系字段时必须使用双向关联，才能正确建立关联关系。 实现页面效果展示 表格视图 表单视图 库存信息配置 创建组件、元件 准备工作完成后，我们需要根据【业务背景】确定【组件】以及【元件】相关信息，并在【界面设计器】中进行创建。 以下操作过程将省略详细步骤，仅展示可能需要确认的关键页面。 创建内嵌表格组件 创建内嵌表格元件（一对多） 创建内嵌表格元件（多对多） 创建内嵌表格配置组件 创建内嵌表格配置元件 设计内嵌表格元件属性面板 （两个元件的属性面板可以完全一致） 创建tableConfig字段，并切换至【内嵌表格配置】组件。 再拖入【透出字段(选项字段列表)】，并设置为隐藏。 设计内嵌表格配置元件属性面板 启动SDK工程进行组件基本功能开发 开发步骤参考 打开【表格】视图，将【库存信息】字段的组件切换为【内嵌表格】 在属性面板中看到【内嵌表格配置】组件，并优先实现【内嵌表格配置】组件。这里的属性面板就是【内嵌表格配置】组件对应的【执行页面】。 当【内嵌表格配置】组件可以按照预先设计的数据结构正确保存tableConfig属性时，可以在【内嵌表格】组件中的props定义中直接获取该属性，接下来就可以进行【内嵌表格】组件的开发。 代码实现参考 工程结构 typing.ts export interface InlineTableConfig { key: string; label?: string; field?: string; } FieldService.ts import { GenericFunctionService, IModelField, QueryPageResult } from '@kunlun/dependencies'; export class FieldService { private static readonly FIELD_MODEL = 'base.Field'; public static async fetchFieldsByModel(model: string, filter?: string): Promise<IModelField[]> { let rsql = `model == "${model}"`; if (filter) {…

  数式-海波

  2023年11月1日

  1.7K000
• 前端

  前端自定义请求入门版

  在开发过程中，为了满足业务场景、增加灵活性，前端自定义请求不可避免。下面将会从——自定义 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日

  861000