1. Oinone社区Home
  2. 前端

自定义组件之手动渲染任意视图（v4）

张博昊 • • 前端 • 1862 views 
private metadataViewWidget: MetadataViewWidget | null | undefined;

private async renderCustomView(model: string, viewName: string, slotName?: string) {
  const view = await ViewCache.get(model, viewName);

  if (!view) {
    return;
  }

  if (this.metadataViewWidget) {
    this.metadataViewWidget.dispose();
    this.metadataViewWidget = null;
  }

  const metadataViewWidget = this.createWidget(MetadataViewWidget, slotName, {
    metadataHandle: this.metadataHandle,
    rootHandle: this.rootHandle,
    internal: true,
    inline: true,
    automatic: true
  });

  this.metadataViewWidget = metadataViewWidget;

  metadataViewWidget.initContextByView(view);

  this.forceUpdate();
}

Oinone社区 作者：张博昊原创文章，如若转载，请注明出处：https://doc.oinone.top/frontend/20602.html

访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验

Like (0)
张博昊's avatar张博昊数式管理员
0 0
Previous 2025年2月24日 pm4:32
Next 2025年3月10日 pm4:39

相关推荐

  • 前端自定义字段与视图最佳方案 前端

    前端自定义字段与视图最佳方案

    自定义视图获取数据 在某些情况下，oinone 提供的默认视图无法满足需求，这时我们就需要自定义视图。通常，虽然视图的 UI 不足以满足要求，但数据结构是不变的。此时，重点是修改页面 UI，数据的请求与回填可以利用平台默认的能力。 如何实现？ 界面设计器的使用 你可以通过界面设计器先配置页面，平台在运行时会根据设计器生成对应的 GraphQL 请求，并自动回填数据。 视图的数据结构 视图的数据类型分为可以分为 Object 跟 List Object 代表当前视图的数据结构是对象 List 代表当前视图的数据结构是数组。 如果我们将 Object 跟 List 分的更细一点就变成了这样： 1: Object: 对象，代表当前视图的数据结构是单个对象，例如：表单视图、详情视图1: List: 对象数组，代表当前视图的数据结构数组，例如：表格视图、卡片视图、画廊视图 视图类型 平台组件 数据属性 表格视图 TableWidget dataSource 画廊视图 GalleryWidget dataSource 表单视图 FormWidget formData 详情视图 DetailWidget formData 自定义视图时，需要先确认当前视图的类型，再通过界面设计器进行页面配置。前端部分只需继承相应的组件，平台底层会自动处理接口数据的获取与回填。 表单视图示例： import Form from './Form.vue'; // 自定义表单视图 @SPI.ClassFactory( BaseElementWidget.Token({ widget: 'custom-form' }) ) export class CustomForm extends FormWidget { public initialize(props: Props) { super.initialize(props); this.setComponent(Form); return this; } } Vue 组件： <template></template> <script lang="ts"> export default defineComponent({ props: { formData: { // 当前表单的数据 type: Object, default: () => ({}) } } }); </script> 自定义layout // 原始的layout模版 <view type="FORM"> <element widget="actionBar" slot="actionBar" slotSupport="action"> <xslot name="actions" slotSupport="action" /> </element> <element widget="form" slot="form"> <xslot name="fields" slotSupport="pack,field" /> </element> </view> //自定义的layout模版 <view type="FORM"> <element widget="actionBar" slot="actionBar" slotSupport="action"> <xslot name="actions" slotSupport="action" /> </element> <element widget="custom-form" slot="form"> <xslot name="fields" slotSupport="pack,field" /> </element> </view> 其实就是把 widget="form" 改成 widget="custom-form" 表格视图示例： import Table from './Table.vue'; // 自定义表格视图 @SPI.ClassFactory( BaseElementWidget.Token({ widget: 'custom-table' }) ) export class CustomTable extends TableWidget { public initialize(props: Props) { super.initialize(props); this.setComponent(Table); return this; } } Vue 组件： <template></template> <script…

    汤乾华's avatar 汤乾华
    2024年10月17日
    2.1K00
  • 如何自定义点击导出动作绑定指定模板 低无一体

    如何自定义点击导出动作绑定指定模板

    介绍 平台默认的导出会打开弹窗，然后在弹窗内的视图选择是用模板方式导出还是选字段导出，但是有时候有部分场景希望点击导出动作后直接进入导出流程，导出指定的某个模板，我们可以通过覆写打开弹窗的动作来实现该功能。 本文档参考了 表格页自定义按钮如何获取搜索区域的查询条件 代码示例 以下代码大部分场景只需要修改其中excelTplName更换模板即可，另外如何想增加复用性，还可以将该属性改为从元数据的配置中获取。 import { ActionType, BaseActionWidget, BaseElementListViewWidget, BooleanHelper, ClickResult, Condition, ExcelExportTask, FILE_MODULE_NAME, getSessionPath, GraphqlHelper, http, IQueryPageResult, ISort, queryDslWidget, ReturnPromise, RuntimeServerAction, ServerActionWidget, SPI, SubmitValue, SYSTEM_MODULE_NAME, translateValueByKey, UrlHelper, ViewActionTarget, Widget } from '@kunlun/dependencies'; import { OioNotification } from '@kunlun/vue-ui-antd'; @SPI.ClassFactory( BaseActionWidget.Token({ actionType: [ActionType.View], target: [ViewActionTarget.Dialog], model: 'ys0328.k2.Model0000000453', name: 'internalGotoListExportDialog' }) ) export class DemoExportActionWidget extends ServerActionWidget { /** * excel导出模板名称 * @protected */ protected excelTplName = '演示抽屉跳转链接导出'; /** * 导出任务的模型编码 * @protected */ protected exportTaskModel = 'excelExportTask'; /** * 导出任务的方法 * @protected */ protected exportTaskFun = 'createExportTask'; /** * * 是否是同步导出 */ @Widget.Reactive() protected get syncExport() { return BooleanHelper.isTrue(this.getDsl().sync) || !true; } protected async executeAction(action: RuntimeServerAction, parameters: SubmitValue): Promise<ClickResult> { const workbookId = await this.getWorkbookId(); if (!workbookId) { return false; } let task = { workbookDefinition: { id: workbookId } } as ExcelExportTask; // 从平台内置的方法获取搜索区域的条件 const { condition } = this.getSearchRsqlAndQueryParams(); // 排序规则 let sortList = [] as ISort[]; const baseViewWidget = Widget.select(this.rootHandle); const listViewWidget = queryDslWidget(baseViewWidget?.getChildrenInstance(), BaseElementListViewWidget); if (listViewWidget) { sortList = listViewWidget.sortList; } return this.export(task, condition, sortList); } protected getUploadBodyGql(id: string, condition: string | Condition, sortList:…

    nation's avatar nation
    2024年10月9日
    2.2K00
  • 弹窗生命周期实践 前端

    弹窗生命周期实践

    在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事件的监听 结语 开发者可以更灵活地响应用户操作，提升用户体验。在实际项目中，根据应用需求和设计，可以根据以上优化逻辑定制具体的处理流程。希望这篇文章为你提供了更深入的理解。

    汤乾华's avatar 汤乾华
    2023年11月17日
    1.9K00
  • 【前端】默认布局模板（v4） 前端

    【前端】默认布局模板（v4）

    默认母版（Mask） PC端默认母版 <mask> <multi-tabs /> <header> <widget widget="app-switcher" /> <block> <widget widget="notification" /> <widget widget="divider" /> <widget widget="language" /> <widget widget="divider" /> <widget widget="user" /> </block> </header> <container> <sidebar> <widget widget="nav-menu" height="100%" /> </sidebar> <content> <breadcrumb /> <block width="100%"> <widget width="100%" widget="main-view" /> </block> </content> </container> </mask> PC端默认内联Tabs母版（<multi-tabs inline="true" />） <mask> <header> <widget widget="app-switcher" /> <block> <widget widget="notification" /> <widget widget="divider" /> <widget widget="language" /> <widget widget="divider" /> <widget widget="user" /> </block> </header> <container> <sidebar> <widget widget="nav-menu" height="100%" /> </sidebar> <block height="100%" flex="1 0 0" flexDirection="column" alignContent="flex-start" flexWrap="nowrap" overflow="hidden"> <multi-tabs inline="true" /> <content> <breadcrumb /> <block width="100%"> <widget width="100%" widget="main-view" /> </block> </content> </block> </container> </mask> 移动端默认母版 <mask> <widget widget="user" /> <widget widget="nav-menu" app-switcher="true" menu="true" /> <widget widget="main-view" height="100%" /> </mask> PC端默认布局（Layout） 表格视图（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="table" slot="table"> <element widget="expandColumn" slot="expandRow" /> <xslot name="fields" /> <element widget="rowActions" slot="rowActions" /> </element> </pack> </view> 表单视图（FORM） <view type="FORM"> <element widget="actionBar" slot="actionBar"> <xslot name="actions" /> </element> <element widget="form" slot="form"> <xslot name="fields" /> </element> </view>…

    oinone's avatar oinone
    2023年11月1日
    1.7K01
  • Class Component(ts)（v4） 前端

    Class Component(ts)（v4）

    Class Component 一种使用typescript的class声明组件的方式。 IWidget类型声明 IWidget是平台内所有组件的统一接口定义，也是一个组件定义的最小集。 /** * 组件构造器 */ export type WidgetConstructor<Props extends WidgetProps, Widget extends IWidget<Props>> = Constructor<Widget>; /** * 组件属性 */ export interface WidgetProps { [key: string]: unknown; } /** * 组件 */ export interface IWidget<Props extends WidgetProps = WidgetProps> extends DisposableSupported { /** * 获取当前组件响应式对象 * @return this */ getOperator(); /** * 组件初始化 * @param props 属性 */ initialize(props: Props); /** * 创建子组件 * @param constructor 子组件构造器 * @param slotName 插槽名称 * @param props 属性 * @param specifiedIndex 插入/替换指定索引的子组件 */ createWidget<ChildProps extends WidgetProps = WidgetProps>( constructor: WidgetConstructor<ChildProps, IWidget<ChildProps>>, slotName?: string, props?: ChildProps, specifiedIndex?: number ); } Widget Widget是平台实现的类似于Class Component组件抽象基类，定义了包括渲染、生命周期、provider/inject、watch等相关功能。 export abstract class Widget<Props extends WidgetProps = WidgetProps, R = unknown> implements IWidget<Props> { /** * 添加事件监听 * * @param {string} path 监听的路径 * @param {deep?:boolean;immediate?:boolean} options? * * @example * * @Widget.Watch('formData.name', {deep: true, immediate: true}) * private watchName(name: string) { * … todo * } * */ protected static Watch(path: string, options?: { deep?: boolean; immediate?: boolean }); /** * 可以用来处理不同widget之间的通讯，当被订阅的时候，会将默认值发送出去 * * @param {Symbol} name 唯一标示 * @param {unknown} value? 默认值 * * @example *…

    oinone's avatar oinone
    2023年11月1日
    1.9K00

Leave a Reply

Please Login to Comment