介绍
在业务中，我们可能会遇到在弹窗关闭后执行业务逻辑的场景，这个时候可以通过自定义弹窗动作来实现
注意: 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低代码应用平台体验
