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

介绍

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

注意: 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

相关推荐

  • 表格如何支持表尾合计计算

    介绍 可以通过扩展TableWidget.ts实现 示例代码 import { BaseElementWidget, DslDefinitionType, SPI, TableWidget, ViewType, Widget } from '@kunlun/dependencies'; @SPI.ClassFactory( BaseElementWidget.Token({ type: ViewType.Table, widget: 'table', model: 'resource.k2.Model0000000109', viewName: '移动端品牌_TABLE_0000000000021513' }) ) export class FooterStatisticsTable extends TableWidget { public initialize(props) { if (props.template) { props.template?.widgets?.forEach((a) => { if (a.dslNodeType === DslDefinitionType.FIELD && this.statisticsFieldList.includes(a.name)) { a.statistics = true; } }); } super.initialize(props); return this; } // 需要表尾做合并的字段名称 public statisticsFieldList = ['fansNum']; @Widget.Reactive() protected get showFooter(): boolean | undefined { return true; } } 效果预览

    2024年10月14日
    59800
  • 【界面设计器】自定义字段组件实战——表格字段组合展示

    阅读之前 此文章为实战教程,已假定你熟悉了【界面设计器】较为完整的【自定义组件】相关内容。 如果在阅读过程中出现的部分概念无法理解,请自行学习相关内容。【前端】文章目录 业务背景 表格中的一列使用多个字段组合展示。 演示内容:表格中存在两列,【编码】和【基础信息】。将【名称】、【创建时间】、【更新时间】在【基础信息】一列展示。 业务分析及实现思路 从需求来看,我们需要实现一个【组合列】组件,并且该组件允许在【表格】视图中使用。由于【组合列】本身也是一个字段,因此这里需要选择需要组合字段中的其中一个字段作为组件切换的基础字段,比如我们可以选择【名称】字段作为基础字段。 在【组合列】组件的属性面板中,我们需要再自定义一个【组合列配置】组件,用来选择需要将哪些字段进行组合,以及为每个组合提供一些基础配置。 这里需要理解一个基本概念,即【组合列】的属性面板是【组合列配置】的【执行页面】。所有组件的属性面板在【执行页面】时都是【表单】视图。 因此我们可以实现一个【组合列配置】组件,并且该组件允许在【表单】视图中使用。其业务类型使用【文本】,我们在保存配置数据时,可以使用JSON数据结构来存储复杂结构。(这里的实现思路并非是最符合协议设定的,但可以满足绝大多数组件场景) 在【组合列配置】组件中,我们可以允许用户添加/移除组合,并且每个组合有两个属性,【标题】和【字段】。 准备工作 此处你应该已经在某个业务模型下,可以完整执行当前模型的全部【增删改查】操作。 业务模型定义 (以下仅展示本文章用到的模型字段,忽略其他无关字段。) 名称 API名称 业务类型 是否多值 长度(单值长度) 编码 code 文本 否 128 名称 name 文本 否 128 创建时间 createDate 日期时间 否 – 更新时间 updateDate 日期时间 否 – 实现页面效果展示 表格视图 创建组件、元件 准备工作完成后,我们需要根据【业务背景】确定【组件】以及【元件】相关信息,并在【界面设计器】中进行创建。 以下操作过程将省略详细步骤,仅展示可能需要确认的关键页面。 创建组合列组件 创建组合列元件 创建组合列配置组件 创建组合列配置元件 设计组合列元件属性面板 创建compositeConfig字段,并切换至【组合配置】组件。 设计组合列配置元件属性面板 启动SDK工程进行组件基本功能开发 PS:这里由于我们创建了两个组件,因此,将SDK分开下载后,然后将组合列配置SDK中的演示代码(kunlun-plugin/src)移动到组合列SDK中,在同一工程中进行开发,最后只需将相关JS文件和CSS文件上传到组合列组件中即可,组合列配置组件可以不进行上传。这里需要注意的是,上传多个包含相同组件功能的JS文件和CSS文件可能在运行时导致无法正常替换、冲突等问题。 (npm相关操作请自行查看SDK工程中内置的README.MD) 开发步骤参考 打开【表格】视图,将【名称】字段的组件切换为【组合列】组件。 在属性面板中看到【组合列配置】组件,并优先实现【组合列配置】组件。这里的属性面板就是【组合列配置】对应的【执行页面】。 当【组合列配置】组件可以按照预先设计的数据结构正确保存compositeConfig属性时,可以在【组合列】组件中的props定义中直接获取该属性,接下来就可以进行【组合列】组件的开发。 代码实现参考 工程结构 typing.ts export interface CompositeConfig { key: string; label?: string; field?: string; value?: string; } CompositeColumnConfig.vue <template> <div class="composite-column-config"> <oio-form v-for="item in list" :data="item" :key="item.key"> <oio-form-item label="标题" name="label"> <oio-input v-model:value="item.label" /> </oio-form-item> <oio-form-item label="字段" name="field"> <a-select class="oio-select" dropdownClassName="oio-select-dropdown" v-model:value="item.field" :options="fields" /> </oio-form-item> <oio-button type="link" @click="() => removeItem(item)">移除</oio-button> </oio-form> <oio-button type="primary" block @click="addItem">添加</oio-button> </div> </template> <script lang="ts"> import { uniqueKeyGenerator } from '@kunlun/dependencies'; import { WidgetInstance } from '@kunlun/ui-designer-dependencies'; import { OioButton, OioForm, OioFormItem, OioInput } from '@kunlun/vue-ui-antd'; import { Select as ASelect } from 'ant-design-vue'; import { computed, defineComponent, PropType, ref, watch } from 'vue'; import { CompositeConfig } from '../../typing'; export default defineComponent({ name: 'CompositeColumnConfig', components: { OioForm, OioFormItem, OioInput, OioButton, ASelect }, props: { currentInstance: { type:…

    2023年11月1日
    64700
  • 表单字段API

    FormFieldWidget 表单字段的基类,包含了表单字段通用的属性跟方法 示例 class MyFieldClass extends FormFieldWidget{ } 字段属性 属性名 说明 类型 可选值 默认值 value 当前字段的值 any – null formData 当前表单视图的数据 Object – {} rootData 跟视图的数据,如果当前只有一个视图,那么与formData是一样的 Array – [] metadataRuntimeContext 当前视图运行时的上下文,可以获取当前模型、字段、动作、视图等所有的数据 Object – – urlParameters 当前url参数 Object – – field 当前字段的元数据 Object – – model 当前模型 Object – – view 当前视图 Object – – disabled 是否禁用 Boolean – false invisible 当前字段是否不可见 Boolean – false required 当前字段是否必填,如果当前字段是在详情页,那么是false Boolean – false readonly 当前字段是否只读,如果当前字段是在详情页、搜索,那么是false Boolean – false placeholder 占位符 String – 当前字段的displayName label 字段的标题 String – 当前字段的displayName 方法 方法名 说明 参数 例子 getDsl 获取当前字段所有的配置 – change 修改当前字段的值 any focus 获取焦点触发的方法 – blur 失去焦点触发的方法 – executeValidator 执行当前字段的校验,异步的 – submit 重写当前字段的提交逻辑 – submit() { return ‘value’ } reloadActiveRecords 替换当前视图的数据 Array this.reloadActiveRecords([{code: xxx, name: 111}]) reloadRootData 替换根视图的数据 Array this.reloadRootData([{code: xxx, name: 111}])

    2023年11月15日
    82700
  • 提交数据动作如何把弹窗内的数据完全返回

    场景介绍 表格行的操作列有一个打开弹窗的动作 弹窗内为表格行数据的表单,表单内有一个o2m字段,展示了除关联关系字段(大部分场景为id)外的其他字段 弹窗底部动作区域有一个提交数据的客户端动作,该动作会将弹窗内表单的数据回写到表格行的数据上 场景截图 问题现象 点击提交数据的客户端动作,会将数据回写到表格行的数据上,但是表格行拿到的o2m字段的数据只有id字段,o2m字段的编码和名称并不会提交到表格行,o2m字段默认提交规则是只会提交关联关系字段(大部分场景为id)的数据 解决方案 该方案适合5.x版本,4.x版本新建的字段组件无法自动生成属性面板,建议拿下面的组件在SPI加上model和name注册实现 自定义o2m字段所在的组件,m2m字段或者其他类似问题的组件也是如下面组件一样覆写submit方法即可 import { BaseFieldWidget, FormO2MTableFieldWidget, ModelFieldType, SPI, SubmitRelationValue, SubmitValue, ViewType } from '@kunlun/dependencies'; @SPI.ClassFactory( BaseFieldWidget.Token({ viewType: ViewType.Form, ttype: ModelFieldType.OneToMany, widget: 'SubmitAllDataO2MTable' }) ) export class MyFormO2MTableFieldWidget extends FormO2MTableFieldWidget { public async submit(submitValue: SubmitValue): Promise<Record<string, unknown> | SubmitRelationValue | undefined> { return { [this.itemName]: this.value }; } } 在界面设计器的组件功能内新增对应业务类型的自定义组件,组件内的元件api名称填写上面组件的名称SubmitAllDataO2MTable 在界面设计器的设计页面切换o2m字段组件为SubmitAllDataO2MTable 参考文档 自定义组件文档

    2024年6月28日
    66800
  • 如何自定义表格单元格样式

    介绍 OinOne的表格是基于Vxe-Table实现的,我们将Vxe-table内置的关于单元格样式的方法、属性开放到了表格组件TableWidget上 Vxe-Table相关文档 vxe-table的单元格样式 vxe-table的单元格动态样式 单元格样式 行的样式、单元格样式,表头的样式、表尾的样式、全部都可以完全自定义,通过设置 cellClassName、headerCellClassName、rowClassName …等参数 (注:当自定义样式之后可能会覆盖表格的样式,比如选中行..等,记得自行处理好相关样式) 单元格动态样式 行的动态样式、单元格动态样式,表头的动态样式、表尾的动态样式、可以通过设置 cellStyle、headerCellStyle、rowStyle …等参数 (注:当自定义样式之后可能会覆盖表格的样式,比如选中行..等,记得自行处理好相关样式) 示例代码 这里仅演示cellClassName和cellStyle,其他方法的出入参数请参考上面的Vxe-Table文档 import { BaseElementWidget, SPI, TableWidget, ViewType, Widget } from '@kunlun/dependencies'; @SPI.ClassFactory(BaseElementWidget.Token({ viewType: ViewType.Table, widget: 'CustomStyleTableWidget', })) export class CustomStyleTableWidget extends TableWidget { @Widget.Method() protected cellClassName({ row, rowIndex, $rowIndex, column, columnIndex, $columnIndex }) { if (column.field === 'field00019') { return `demo-cell-${column.field}`; } return ''; } @Widget.Method() protected cellStyle({ row, rowIndex, $rowIndex, column, columnIndex, $columnIndex }) { if (column.field === 'field00019') { return { backgroundColor: '#f60', color: '#ffffff' }; } return ''; } } 效果预览

    2024年10月30日
    69000

Leave a Reply

登录后才能评论