MTP2.0_WEB/src/common/setup/modal/modal.ts

import { ModalName } from '@/common/constants/modalName';
import { inject, provide, ref, SetupContext, watchEffect } from 'vue';

/**
 * 控制关闭弹窗
 * @param modelName 相对应的弹窗组件名
 * @param context 上次ui上下文，用于关闭弹窗时候需要刷新数据
 * @returns
 */
export function closeModal(modelName: keyof ModalName, context?: SetupContext) {
    // 控制弹窗 flag
    const visible = ref<boolean>(false);
    const show = inject(modelName, ref<boolean>(false))
    watchEffect(() => {
        visible.value = show.value
    })
    /**
     * 取消弹窗
     */
    function cancel() {
        visible.value = false;
        show.value = false
    }
    // 组件关闭弹窗需要刷新列表数据
    function refresh() {
        context?.emit('refresh')
        cancel()

    }
    return { visible, cancel, refresh }
}

/**
 * 控制打开弹窗
 * @param modelName 相对应的弹窗组件名
 * @returns openAction 打开弹窗方法
 */
export function openModal(modelName: keyof ModalName, data?: any) {
    const name = ref<boolean>(false)
    provide(modelName, name);
    /**
     * 打开弹窗
     * @param value 弹窗名
     */
    function openAction() {
        console.log('弹窗组件名', modelName);
        name.value = true;
    }
    return { openAction }
}



export type { ModalName };

type emitFn = 'cancel' | 'update'

export function _closeModal(context: SetupContext<emitFn[]>) {
    const visible = ref<boolean>(true);
    /**
     * 关闭弹窗
     * @param isRefresh 是否需要刷新页面: tur => 刷新；false => 不刷新
     */
    function cancel(isRefresh = false) {
        visible.value = false;
        context.emit('cancel', isRefresh)
    }
    return { visible, cancel }
}