【前端】环境配置（v4）

相关推荐

• 前端

  前端 SPI 注册 + 渲染

  在阅读本篇文章之前，您需要学习以下知识点： 1: TS 结合 Vue 实现动态注册和响应式管理 前端开发者在使用 oinone 平台的时候会发现，不管是自定义字段还是视图，对应的 typescript 都会用到@SPI.ClassFactory(参数)，然后在对用的class中重写initialize方法`: @SPI.ClassFactory(参数) export class CustomClass extends xxx { public initialize(props) { super.initialize(props); this.setComponent(FormString); return this; } } 本文将带您熟悉 oinone 前端的 SPI 注册机制以及 TS + Vue 的渲染过程。 不管是自定义字段还是视图@SPI.ClassFactory(参数)都是固定写法，区别在于参数不同，这篇文章里面详细描述了参数的定义。 SPI 注册机制 有自定义过字段、视图经验的开发者可能会发现，字段(表单字段)SPI 注册用的是FormFieldWidget.Token生成对应的参数，视图 SPI 注册用的是BaseElementWidget.Token，那么为什么要这样定义呢？ 大家可以想象成现在有一个大的房子，房子里面有很多房间，每个房间都有自己的名字，比如FormFieldWidget就是房间的名字，BaseElementWidget也是房间的名字，这样一来我们就可以根据不同的房间存放不同的东西。 下面给大家展示下伪代码实现： class SPI { static container = new Map<string, WeakMap<object, object>>() static ClassFactory(token) { return (target) => { if(!SPI.container.get(token.type)) { SPI.container.set(token.type, new WeakMap()) } const services = SPI.container.get(token.type) services?.set(token, target) } } } class FormFieldWidget { static Token(options) { return { …options, type: 'Field' } } static Selector(options) { const fieldWidgets = SPI.container.get('Field') if(fieldWidgets) { return fieldWidgets.get(options)! } return null } } @SPI.ClassFactory(FormFieldWidget.Token({ viewType: 'Form', ttype: 'String', widget: 'Input' })) class StringWidget { } // 字段元数据 const fieldMeta = { name: "name", field: "name", mode: 'demo.model', widget: 'Input', ttype: 'String', viewType: 'Form' } // 找到对应的widget const widget = FormFieldWidget.Selector({ viewType: fieldMeta.viewType, ttype: fieldMeta.ttype, widget: fieldMeta.widget, }) 在上述代码中，我们主要是做了这么写事情： 1.SPI class class SPI { static container = new Map<string, WeakMap<object, object>>() } SPI 类是一个静态类，用于管理服务的注册和获取。 container 是一个静态属性，类型是 Map，它的键是字符串，值是 WeakMap。这个结构允许我们为每个服务类型（例如，Field）管理多个服务实例。 2.ClassFactory 方法 static ClassFactory(token) { return (target) => { if…

  汤乾华

  2024年9月26日

  2.3K000
• 组件

  前端自定义组件之多页面步骤条

  本文将讲解如何通过自定义，实现多页面的步骤条组件。其中每个步骤的元素里都对应界面设计器的一个页面。以下是代码实现和原理分析。 代码实现 NextStepWidget 多页面步骤条 ts 组件 import { CallChaining, createRuntimeContextByView, customMutation, customQuery, RuntimeView, SPI, ViewCache, Widget, DefaultTabsWidget, BasePackWidget } from '@oinone/kunlun-dependencies'; import { isEmpty } from 'lodash-es'; import { MyMetadataViewWidget } from './MyMetadataViewWidget'; import NextStep from './NextStep.vue'; import { IStepConfig, StepDirection } from './type'; @SPI.ClassFactory(BasePackWidget.Token({ widget: 'NextStep' })) export class NextStepWidget extends DefaultTabsWidget { public initialize(props) { this.titles = props.template?.widgets?.map((item) => item.title) || []; props.template && (props.template.widgets = []); super.initialize(props); this.setComponent(NextStep); return this; } @Widget.Reactive() public get invisible() { return false; } // 配置的每一步名称 @Widget.Reactive() public titles = []; // region 上一步下一步配置 // 步骤配置，切换的顺序就是数组的顺序，模型没有限制 @Widget.Reactive() public get stepJsonConfig() { let data = JSON.parse( this.getDsl().stepJsonConfig || '[{"model":"resource.ResourceCountry","viewName":"国家form"},{"model":"resource.ResourceProvince","viewName":"省form"},{"model":"resource.ResourceCity","viewName":"市form"}]' ); return data as IStepConfig[]; } // 切换上一步下一步 @Widget.Method() public async onStepChange(stepDirection: StepDirection) { // 没有激活的，说明是初始化，取第一步 if (!this.activeStepKey) { const step = this.stepJsonConfig[0]; if (step) { this.activeStepKey = `${step.model}_${step.viewName}`; await this.initStepView(step); } return; } // 获取当前步骤的索引 if (this.currentActiveKeyIndex > -1) { await this.onSave(); // 获取下一步索引 const nextStepIndex = stepDirection === StepDirection.NEXT ? this.currentActiveKeyIndex + 1 : this.currentActiveKeyIndex – 1; // 在索引范围内，则渲染视图 if (nextStepIndex >= 0 && nextStepIndex < this.stepJsonConfig.length) { const nextStep = this.stepJsonConfig[nextStepIndex];…

  银时

  2025年7月21日

  1.1K000
• 前端

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

  阅读之前 此文章为实战教程，已假定你熟悉了【界面设计器】较为完整的【自定义组件】相关内容。 如果在阅读过程中出现的部分概念无法理解，请自行学习相关内容。【前端】文章目录 业务背景 表格中的一对多(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.9K000
• 组件

  oio-spin 加载中

  用于页面和区块的加载中状态。 何时使用 页面局部处于等待异步数据或正在渲染过程时，合适的加载动效会有效缓解用户的焦虑。 API 参数 说明 类型 默认值 版本 delay 延迟显示加载效果的时间（防止闪烁） number (毫秒) – loading 是否为加载中状态 boolean true wrapperClassName 包装器的类属性 string –

  汤乾华

  2023年12月18日

  1.6K000
• 前端

  表格字段配置Switch开关

  在业务开发中，我们经常会遇到表格中有个Switch开关组件: 那么如何通过界面设计器配置这个组件呢，下面让我们一起来学习下吧。 设计布尔类型的组件 1: 首先在界面设计器的组件区域添加一个组件。 2: 我们给这个组件添加一个元件,元件的配置必须跟下面的一致 3: 给元件添加属性配置 拖拽一个单行文本字段, 字段编码必须是truthyAction，代表的是该字段为true的时候要执行的动作 再拖拽一个单行文本字段, 字段编码必须是falsyAction，代表的是该字段为false的时候要执行的动作 4: 发布元件，然后再去对应的界面设计器页面，将对应的字段切换成刚刚设计的组件 5: 发布界面设计器，染红我们可以在运行时的页面看到效果 当switch切换的时候，会执行对应的action

  汤乾华

  2023年11月21日

  3.1K000