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

介绍

在业务中,我们可能会遇到在弹窗关闭后执行业务逻辑的场景,这个时候可以通过自定义弹窗动作来实现

注意: 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);
}

@SPI.ClassFactory(
  BaseFieldWidget.Token({
    viewType: ViewType.Form,
    ttype: ModelFieldType.String,
    model: 'resource.k2.Model0000000109',
    name: 'code',
  })
)
export class MyFormStringDialogFieldWidget extends FormStringFieldSingleWidget {

  @Widget.Method()
  protected onCustomClick() {
    const action = this.model.modelActions.find(i => i.name === 'your action name');
    if (!action) {
      return;
    }
    const dialogKey = Dialog.createByViewAction(action as RuntimeViewAction);
    popupDisposeCallback(dialogKey, (manager: PopupManager, instance: IPopupInstance, action?: RuntimeAction) => {
      // action为关闭弹窗的动作,需要自行判断哪些动作可以进入下一步的业务处理,这里已弹窗的提交数据的动作为例
      if (action?.fun !== ModelDefaultActionName.$$internal_DialogSubmit) {
        return;
      }
      const dialogWidget = instance.widget as DialogWidget;
      const activeRecord = dialogWidget?.activeRecords?.[0];
      if (activeRecord) {
        // TODO 拿到弹窗内的数据自行处理
      }
    });
  }
}

Oinone社区 作者:nation原创文章,如若转载,请注明出处:https://doc.oinone.top/frontend/16280.html

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

(0)
nation的头像nation数式员工
上一篇 2024年8月21日 pm10:33
下一篇 2024年8月22日 am11:56

相关推荐

  • oio-select 选择器

    API Select props 参数 说明 类型 默认值 版本 allowClear 支持清除 boolean false autofocus 默认获取焦点 boolean false clearIcon 自定义的多选框清空图标 VNode | slot – disabled 是否禁用 boolean false dropdownClassName 下拉菜单的 className 属性 string – dropdownRender 自定义下拉框内容 ({menuNode: VNode, props}) => VNode | v-slot – filterOption 是否根据输入项进行筛选。当其为一个函数时,会接收 inputValue option 两个参数,当 option 符合筛选条件时,应返回 true,反之则返回 false。 boolean | function(inputValue, option) true getTriggerContainer 菜单渲染父节点。默认渲染到 body 上,如果你遇到菜单滚动定位问题,试试修改为滚动的区域,并相对其定位。 function(triggerNode) () => document.body menuItemSelectedIcon 自定义当前选中的条目图标 VNode | slot – options options 数据,如果设置则不需要手动构造 selectOption 节点 array<{value, label, [disabled, key, title]}> [] placeholder 选择框默认文字 string|slot – removeIcon 自定义的多选框清除图标 VNode | slot – suffixIcon 自定义的选择框后缀图标 VNode | slot – value(v-model:value) 指定当前选中的条目 string|string[]|number|number[] – 注意,如果发现下拉菜单跟随页面滚动,或者需要在其他弹层中触发 Select,请尝试使用 getPopupContainer={triggerNode => triggerNode.parentNode} 将下拉弹层渲染节点固定在触发器的父元素中。 事件 事件名称 说明 回调参数 blur 失去焦点的时回调 function change 选中 option,或 input 的 value 变化(combobox 模式下)时,调用此函数 function(value, option:Option/Array<Option>) deselect 取消选中时调用,参数为选中项的 value (或 key) 值,仅在 multiple 或 tags 模式下生效 function(value,option:Option) dropdownVisibleChange 展开下拉菜单的回调 function(open) focus 获得焦点时回调 function inputKeyDown 键盘按下时回调 function mouseenter 鼠标移入时回调 function mouseleave 鼠标移出时回调 function popupScroll 下拉列表滚动时的回调 function search 文本框值变化时回调 function(value: string) select 被选中时调用,参数为选中项的 value (或 key) 值 function(value, option:Option)

    2023年12月18日
    41200
  • 界面设计器 扩展字段的查询上下文

    默认情况下oinone平台对于查询条件,只提供的当前登录用户这一个配置,但是允许开发者扩展 开发者可以在前端代码的main.ts进行扩展 import { SessionContextOptions, ModelFieldType } from '@kunlun/dependencies'; const currentDeptOption = { ttype: ModelFieldType.String, value: '$#{currentDept}', displayName: '当前登录部门', label: '当前登录部门' }; SessionContextOptions.push(currentDeptOption as any); 加上上面的代码,然后再去界面设计器,我们就会发现,多了一个配置

    2023年11月8日
    1.1K00
  • 【路由】浏览器地址栏url参数介绍

    介绍 浏览器地址栏url为路由类型的视图动作(viewAction)的访问url 详情页示例url https://one.oinone.top/page;module=resource;viewType=DETAIL;model=resource.ResourceDistrict;action=redirectDetailPage;scene=redirectDetailPage;target=ROUTER;menu=%7B%22selectedKeys%22:%5B%22%E5%8C%BA%22%5D,%22openKeys%22:%5B%22%E5%9C%B0%E5%9D%80%E5%BA%93%22,%22%E5%9C%B0%E5%8C%BA%22%5D%7D;id=575733837679260950;path=%2Fresource%2F%E5%8C%BA%2FACTION%23resource.ResourceDistrict%23redirectDetailPage 通过调试工具查看解析后的信息 参数介绍 module 动作所在模块名称 viewType 视图类型 model 动作所在模型的编码 action 动作名称 target 动作打开方式,ROUTER为当前路由打开,OPEN_WINDOW为新窗口打开 menu 【选填】菜单栏控制参数,该参数不影响页面的业务逻辑,仅影响菜单栏展开哪些菜单项(通过openKeys属性),选中哪些菜单项(通过selectedKeys属性)),该参数经过JSON.stringify(menu)方式处理过 # 示例参数 { "selectedKeys": ["区"], "openKeys": ["地址库", "地区"] } id 【选填】详情、编辑等单行数据页面的数据id searchBody 列表页搜索区域的搜索条件,该参数在前端经过encodeURIComponent(JSON.stringify(searchBody))方式处理过 # 示例参数 { "code": "11" } searchConditions 列表页高级搜索条件,用于处理searchBody之外的复杂搜索条件,日常开发中无需关心该参数encodeURIComponent(JSON.stringify(searchConditions))方式处理过 # 示例参数 [ { "leftValue":["sourceType"], "operator":"==", "right":"GD" } ] context 上下文参数,该参数经过JSON.stringify(menu)方式处理过 列表页的此参数会填充到搜索区域的字段中作为默认的查询条件,详情 详情页和表单页此参数会作为页面加载函数的入参 # 示例参数 { “cateId”: “61723712399821” } path 权限验证路径,父页面编译的时候自动加上该参数,在父页面点击当前动作的时候会自动拼该参数 scene 【选填】动作场景值 代码中如何获取 这里介绍在组件内如何获取 import { BaseElementWidget } from ‘@kunlun/dependencies’; export class DemoElementWidget extends BaseElementWidget { protected test() { const { module, model, action } = this.urlParameters; } } 推荐阅读相关文档 上下文在字段和动作中的应用 如何实现页面间的跳转

    2024年8月19日
    2.5K00
  • 表格字段配置Switch开关

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

    2023年11月21日
    1.1K00
  • OioNotification 通知提醒框

    全局展示通知提醒信息。 何时使用 在系统四个角显示通知提醒信息。经常用于以下情况: 较为复杂的通知内容。 带有交互的通知,给出用户下一步的行动点。 系统主动推送。 API OioNotification.success(title,message, config) OioNotification.error(title,message, config) OioNotification.info(title,message, config) OioNotification.warning(title,message, config) config 参数如下: 参数 说明 类型 默认值 版本 duration 默认 3 秒后自动关闭 number 3 class 自定义 CSS class string –

    2023年12月18日
    61500

Leave a Reply

登录后才能评论