界面设计器 扩展字段的查询上下文

相关推荐

• 代码实践

  如何把平台功能菜单加到项目中？

  概述 在使用Oinone低代码平台进行项目开发的过程中，会存在把平台默认提供的菜单加到自己的项目中。这篇文章介绍实现方式，以角色管理为例。 1. 低代码情况 即项目是通过后端代码初始化菜单的方式。 通常在 XXXMenu.java类通过@UxMenu注解的方式，代码片段如下： 此种情况与添加项目本地的菜单无区别，具体代码： @UxMenu(value = "账号管理", icon = "icon-yonghuguanli") class AccountManage { @UxMenu("用户管理") @UxRoute(value = CustomerCompanyUserProxy.MODEL_MODEL, title = "用户管理") class CompanyUserManage { } @UxMenu("角色管理") @UxRoute(value = AuthRole.MODEL_MODEL, module = AdminModule.MODULE_MODULE, title = "角色管理") class RoleManage { } @UxMenu("操作日志") @UxRoute(value = OperationLog.MODEL_MODEL, module = AdminModule.MODULE_MODULE/***菜单所挂载的模块**/) class OperateLog { } } 2. 无代码情况 在界面设计器中，新建菜单–>选择绑定已有页面，进行发布即可。

  望闲

  2024年4月19日

  1.6K000
• 前端

  弹窗生命周期实践

  在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日

  875001
• 低无一体

  如何在表格的字段内添加动作

  介绍 在日常的业务中，我们经常需要在表格内直接点击动作完成一些操作，而不是只能在操作栏中，例如：订单的表格内点击商品名称或者里面的按钮跳转到商品详情页面，这里我们将带来大家来通过自定义表格字段来实现这个功能。 1.编写表格字段组件 组件ts文件TableBtnFieldWidget.ts import { ActionWidget, ActiveRecordExtendKeys, BaseFieldWidget, BaseListView, ModelFieldType, queryDslWidget, queryRowActionBar, RowContext, SPI, TableStringFieldWidget, BaseElementListViewWidget, ViewType, Widget } from '@kunlun/dependencies'; import { createVNode, VNode } from 'vue'; import { toString } from 'lodash-es'; import TableBtnField from './TableBtnField.vue'; @SPI.ClassFactory( BaseFieldWidget.Token({ viewType: ViewType.Table, ttype: [ModelFieldType.String, ModelFieldType.Text], // widget: 'StringLink', // 以下3行配置代码测试用，生产建议在界面设计器自定义组件，widget填自定义组件的api名称 model: 'resource.k2.Model0000000109', name: 'name' }) ) export class TableBtnFieldWidget extends TableStringFieldWidget { @Widget.Reactive() private get triggerActionLabel() { // 界面设计器组件内设计该属性 return this.getDsl().triggerActionLabel || '更新'; } private getTriggerAction() { return this.model.modelActions.find((a) => a.label === this.triggerActionLabel); } private getTriggerActionWidget(widgetHandle: string, draftId: string, triggerActionLabel: string): ActionWidget | undefined { const listView = Widget.select(widgetHandle) as unknown as BaseListView; const listWidget = queryDslWidget(listView?.getChildrenInstance(), BaseElementListViewWidget); if (!listWidget) { return undefined; } const rowActionBar = queryRowActionBar(listWidget.getChildrenInstance(), draftId); const actionWidget = rowActionBar?.getChildrenInstance().find((a) => (a as ActionWidget).action.label === triggerActionLabel); return actionWidget as ActionWidget; } protected clickAction(context: RowContext) { const draftId = context.data[ActiveRecordExtendKeys.DRAFT_ID] as unknown as string; const actionWidget = this.getTriggerActionWidget(this.getRootHandle()!, draftId, this.triggerActionLabel); if (!actionWidget) { console.error('未找到action', this.triggerActionLabel); return; } actionWidget.click(); } @Widget.Method() public renderDefaultSlot(context: RowContext): VNode[] | string { const value = toString(this.compute(context)); if (value) { return [ createVNode(TableBtnField,…

  nation

  2024年5月16日

  1.1K000
• 前端

  TableWidget 与 FormWidget 浅析

  前言：本文主要聚集于 TableWidget和 FormWidget，对两者以外的内容不做赘述。 TableWidget和 FormWidget作为一个基本的渲染模块与 Mask等不同，TableWidget与 FormWidget有着明确的目的，比如 TableWidget就是作为一个表格视图，这种名称中可以看得出来。其将表格的一系列能力聚拢，如单元格，行列选择排序，翻页等等； TableWidget 我们使用表格到底是在使用什么？ 在我们讲述渲染流程前，我们需要提一个问题，在我们使用表格组件时，我们在使用什么，换而言之，我们对表格组件中关注的是什么？应该说我们更关注的是表格所展示的数据。TableWidget或者说整个低代码其实解决的就是这个问题，让我们可以很方便的展示数据。不用关心一些细枝末节 TableWidget 的渲染 TableWidget在整个渲染流程中的负责组装各种 Vue 组件所需要的核心数据或事件回调并传递给其绑定的 Vue 组件即 DefaultTable，如 allowRowClick,rowClickMode等等，这些值会作为 Props 传递给 DefaultTable，DefaultTable则一定意义上充当了一个桥接层，主要做了两件事，处理 Props， 处理 Slot，TableWidget传递给 DefaultTable的 Props 会经过 DefaultTable再次组合，创建新的 Props,同时根据当前的 Props 判断是否有必要新增一些 slot，比如 OioPagination组件是否需要渲染就取决于 Props.showPagination 的值,经过 DefaultTable的处理后， props与 slot会进一步交给 OioTable进行渲染，OioTable则会进一步聚合处理，比如如果没有 defaultSlot则进行空值的渲染，如果存在 footSlot则会构建一个包裹层去包裹它。这些组件协同完成了一个表格的结构，而我们真正关心的数据则由一个个 BaseTableColumnWidget渲染。BaseTableColumnWidget的渲染过程类似于 TableWidget，其负责组装 DefaultTableColumn渲染所需要的 props，然后交给 OioTableColumn进行实际渲染。并且会有多种基于 BaseTableColumnWidget的 widget通过重写 renderDefaultSlot,renderEditSlot,renderContentSlot,renderHeaderSlot等几个 props 实现不同状态，不同类型等组件的渲染。通过 TableWidget与 BaseTableColumnWidget相结合， Table 页面完成了主体框架与内容的渲染。而当数据完成渲染后，不可避免的会有数据交互，比如分页，排序，过滤等，这些交互都由 TableWidget与 BaseTableColumnWidget共同完成。比如排序翻页等，TableWidget会将事件作为 props 向下注入，当事件被调用，TableWidget会进行处理，比如发起请求，或者对内部数据排序等。而除了数据的展示，还有一些动作，即 Action ,Action 被触发时会按照内部的配置进行工作，比如编辑时，将获取 activeRecord，随后触发 Table 的编辑。 TableWidget就是这样去渲染出了一个完整的表格页面。能够完成数据的增删改查等操作 FormWidget FormWidget与 TableWidget一样，也是作为一个渲染模块，但是它与 TableWidget不同的是，FormWidget是作为一个表单视图，其将表单的一系列能力聚拢，如表单提交，表单校验，表单重置等等。其重点在于对数据的增改。所以在提供的能力上也有区别，比如 FormWidget没有提供翻页，排序，过滤等能力，因为这些能力属于表格的能力，而 FormWidget则更关注于表单的能力。提供了数据的存储，提交，校验等能力 Form 在渲染时流程与 Table 大同小异，其同样为三层结构 FormWidget => DefaultForm => FormFieldWidget 一层层向下渲染，不同的在于 FormWidget 更多的关注点在于维护其内部的 FormData 这是整个表单页面所围绕的东西，当页面上的控件发生变化，其变更的值会被收集到 FormData 中，并在后续中使用。同时在编辑已有数据场景下，Form 会将数据加载到 FormData，随后下放给 FormFiledWidget。 异同之处 从介绍中可以看出，Table 侧重于数据的查询展示，Form 则侧重于数据的变动处理，但是抽象的看其核心其实是同一套逻辑，即数据的存储与展示，中间或许会有对数据的某些处理，但是并不是本质上的区别，两者在核心理念上是一致的，即让使用者只需要关心数据本身，而不需要关注于繁琐的视图构造，这是整个低代码甚至前端的发展方向。

  liji2

  2025年3月25日

  614000
• 前端

  「前端」获取系统配置

  「前端」获取系统配置 简介 系统配置对于前端开发至关重要，它包含了许多关键信息，通过调用「systemMajorConfig」API，可以轻松地获取这些关键配置信息。除了主要的系统配置外，底层还提供了一些快捷的API，比如获取当前主题、当前主题大小、登录页面主题、版权状态和默认浏览器信息。 使用步骤 调用「systemMajorConfig」API获取系统配置数据。 使用返回的数据对象来访问特定的系统配置参数，如企业名称、企业官网等。 使用底层提供的快捷API来获取与系统配置相关的特定信息。 系统配置参数 logo (string): 应用logo（未折叠状态） appSideLogo (string): 应用logo（折叠状态） smallLogo (string): 小型logo slogan (string): 企业slogan favicon (string): 浏览器logo browserTitle (string): 浏览器标题 loginPageLogo (string): 登录页logo loginBackground (string): 登录页背景 loginLayoutType (any): 登录页布局主题 mode (any): 主题模式 size (string): 主题大小 快捷API列表 getCurrentTheme: 获取当前主题信息。 getCurrentThemeSize: 获取当前主题大小。 getLoginTheme: 获取登录页面主题信息。 getCopyrightStatus: 获取版权状态信息。 getDefaultBrowser: 获取默认浏览器信息。 示例代码 import { systemConfig, getCurrentTheme } from ‘@kunlun/dependencies’ // 访问特定系统配置参数 console.log(systemConfig.logo); // 输出企业名称 // 使用快捷API获取特定信息 console.log(getCurrentTheme());

  oinone

  2023年11月1日

  994000