相关推荐

• 根据固定的接口返回数据动态控制按钮的显隐

  在项目开发中，我们经常会面临这样的情况：当前按钮的显示与隐藏需要根据后端某个接口返回的数据来决定，而无法通过权限配置进行处理。为了解决这个问题，我们可以通过自定义的方式来处理这一功能。 首先，我们需要知道当前动作是什么类型的动作，例如「服务端动作、跳转动作、打开弹窗的动作、打开抽屉的动作」。 ServerActionWidget -> 服务端动作DialogViewActionWidget -> 打开弹窗动作DrawerViewActionWidget -> 打开抽屉动作RouterViewActionWidget -> 路由跳转动作 下面是一个示例代码，演示了如何通过自定义的方式处理按钮的显示与隐藏逻辑。 import { ActionType, ActionWidget, SPI, ServerActionWidget, Widget, http } from '@kunlun/dependencies'; @SPI.ClassFactory( ActionWidget.Token({ actionType: ActionType.Server, model: 'resource.k2.Model0000000100', name: 'create' }) ) export class MyAction extends ServerActionWidget { // 当前动作是服务端动作，继承的是 ServerActionWidget @Widget.Reactive() private needInvisible = false; @Widget.Reactive() public get invisible(): boolean { return this.needInvisible; } protected mounted(): void { super.mounted(); // 模拟接口 http.query(模块名, `graphql`).then(res => { if(res) { this.needInvisible = true } }) } } 在实际应用中，我们可以调用后端接口，根据返回的数据动态修改 needInvisible 这个值，从而实现按钮的动态显示与隐藏效果。这样的设计使得按钮的显示状态更加灵活，并且能够根据后端数据动态调整，提高了系统的可定制性。

  汤乾华

  前端 2023年11月23日

  2.2K000
• 前端

  表格页自定义按钮如何获取搜索区域的查询条件

  介绍 在使用 Oinone 平台开发过程中，开发者可能会遇到自定义动作需要获取搜索条件并传递给后端的情况。本文将介绍如何利用 Oinone平台 实现此功能。 技术基础知识 当我们在自定义一个动作的时候要先明确自定义的动作类型是什么样的，在Oinone平台中，分为了如下几个动作： 1: 视图动作2: 服务端动作3: 客户端动作3: URL动作 功能步骤或代码示例 案例1、服务端动作，动作点击时候要拿到搜索内容，然后传递给后端。 import { ActionType, ActionWidget, SPI, ServerActionWidget } from '@kunlun/dependencies'; @SPI.ClassFactory( ActionWidget.Token({ name: 'name', model: 'model', actionType: ActionType.Server }) ) export class MyServerActionWidget extends ServerActionWidget { protected async clickAction() { const rst = this.getSearchRsqlAndQueryParams(); } } 案例2、视图动作点击的时候把搜索内容带到另外一个视图或者弹窗 import { ActionType, ActionWidget, SPI, ServerActionWidget } from '@kunlun/dependencies'; @SPI.ClassFactory( ActionWidget.Token({ name: 'name', model: 'model' }) ) export class MyDialogViewActionWidget extends DialogViewActionWidget { // 继承当前动作原本的class protected async clickAction() { const { queryData } = this.getSearchRsqlAndQueryParams(); this.action.context = queryData super.clickAction() return true } } 在上述代码中，我们自定义了一个服务器动作，并在点击触发函数中调用了getSearchRsqlAndQueryParams方法，该方法会返回一个对象： { rsql: String, // 搜索内容对应的rsql queryData: Object, // 搜索的数据 condition: Condition, // 搜索内容对应的数据结构 queryDataToString: Function // 将搜索内容转成JSON字符串 } 这样我们就可以根据业务场景使用对应的值。 注意事项 1: 确保正确导入所需的依赖包。2: 理解并适当修改代码以满足特定业务需求。 总结 本文介绍了在 Oinone 平台中如何自定义一个服务端动作，并获取搜索条件传递给后端的方法。通过合理利用这些功能，开发者可以更灵活地定制应用程序，满足不同的业务需求。 实践案例 如何自定义点击导出动作绑定指定模板

  汤乾华

  2024年3月6日

  1.8K000
• 低无一体

  如何增加页面消息通知轮询的间隔或者关闭轮询

  场景 oinone的前端页面默认自带了消息通知功能，在顶部状态栏可以看到消息的查看入口，默认每隔5秒查询一次最新的消息，我们可以通过自定义消息组件增加该间隔或者是关闭轮询 示例代码 修改轮询间隔 import { MaskWidget, NotificationWidget, SPI } from '@kunlun/dependencies'; @SPI.ClassFactory(MaskWidget.Token({ widget: 'notification' })) export class DemoNotificationWidget extends NotificationWidget { /** * 轮询间隔时间，单位: 秒 * @protected */ protected msgDelay = 30000; } 关闭轮询 import { MaskWidget, NotificationWidget, SPI } from '@kunlun/dependencies'; @SPI.ClassFactory(MaskWidget.Token({ widget: 'notification' })) export class DemoNotificationWidget extends NotificationWidget { protected mounted() { super.mounted(); // 清除轮询的定时器 this.msgTimer && clearInterval(this.msgTimer); // 挂载后手动查询一次消息 this.getMsgTotal(); } }

  nation

  2024年8月20日

  2.3K000
• 组件

  oio-pagination 分页

  API 参数 说明 类型 默认值 版本 currentPage(v-model:currentPage) 当前页数 number – defaultPageSize 默认的每页条数 number 15 disabled 禁用分页 boolean – pageSize 每页条数 number – pageSizeOptions 指定每页可以显示多少条 string[] [’10’, ’15’, ’30’, ’50’, ‘100’, ‘200’] showQuickJumper 是否可以快速跳转至某页 boolean false showSizeChanger 是否展示 pageSize 切换器，当 total 大于 50 时默认为 true boolean – total 数据总数 number 0 事件 事件名称 说明 回调参数 change 页码或 pageSize 改变的回调，参数是改变后的页码及每页条数 Function(page, pageSize) noop

  汤乾华

  2023年12月18日

  2.0K000
• 低无一体

  打开弹窗/抽屉的动作如何在弹窗关闭后扩展逻辑

  介绍 在业务中，我们可能会遇到在弹窗关闭后执行业务逻辑的场景，这个时候可以通过自定义弹窗动作来实现 注意: oinone已经内置了弹窗内的动作触发后刷新主视图、刷新当前视图、提交数据的能力，可以通过界面设计器在动作的属性面板配置，本文档为内置能力不满足需求的场景使用 场景案例 弹窗动作组件示例 import { ActionType, ActiveRecord, BaseActionWidget, DialogViewActionWidget, SPI, ViewActionTarget, DisposeEventHandler, IPopupInstance, PopupManager, RuntimeAction, } from '@kunlun/dependencies'; /** * 弹出层销毁回调 – 建议抽到工具类中 * @param popupKey 弹出层key * @param disposeEventHandler 销毁的回调 */ function popupDisposeCallback( popupKey: string, disposeEventHandler: DisposeEventHandler, ) { const innerDisposeFn = (manager: PopupManager, instance: IPopupInstance, action?: RuntimeAction) => { if (instance.key === popupKey) { disposeEventHandler?.(manager, instance, action); } PopupManager.INSTANCE.clearOnClose(innerDisposeFn); }; PopupManager.INSTANCE.onClose(innerDisposeFn); } @SPI.ClassFactory( BaseActionWidget.Token({ actionType: [ActionType.View], target: [ViewActionTarget.Dialog], model: 'resource.k2.Model0000000109', name: 'dialogActionName001' }) ) export class CustomDialogViewActionWidget extends DialogViewActionWidget { protected createPopupWidget(data: ActiveRecord[]) { super.createPopupWidget(data); popupDisposeCallback(this.dialog.getHandle(), async (manager: PopupManager, instance: IPopupInstance, action?: RuntimeAction) => { // action为触发关闭弹窗的动作，点击动作关闭弹出层该参数才有值，如果是点击遮罩背景层则无该参数 if (action?.name === 'actionName001') { // 以下为示例代码，指定name的动作关闭弹窗后刷新当前视图的数据查询 this.refreshCallChaining?.syncCall(); } }); } } 函数式调用打开弹窗的示例 以下为在自定义字段组件中手动触发打开弹窗 import { BaseFieldWidget, Dialog, DialogWidget, DisposeEventHandler, FormStringFieldSingleWidget, IPopupInstance, ModelDefaultActionName, ModelFieldType, PopupManager, RuntimeAction, RuntimeViewAction, SPI, ViewType, Widget } from '@kunlun/dependencies'; /** * 弹出层销毁回调 – 建议抽到工具类中 * @param popupKey 弹出层key * @param disposeEventHandler 销毁的回调 */ function popupDisposeCallback( popupKey: string, disposeEventHandler: DisposeEventHandler, ) { const innerDisposeFn = (manager: PopupManager, instance: IPopupInstance, action?: RuntimeAction) => { if (instance.key === popupKey) { disposeEventHandler?.(manager, instance, action); } PopupManager.INSTANCE.clearOnClose(innerDisposeFn); }; PopupManager.INSTANCE.onClose(innerDisposeFn);…

  nation

  2024年8月22日

  1.5K000