wraper.vue

<template>
    <div class="tw-flex tw-flex-col tw-h-full">
        <div class="tw-overflow-y-hidden tw-flex-1">
            <div class="tw-overflow-y-auto tw-h-full">
                <slot />
            </div>
        </div>
        <template>
            <a-divider />
            <a-space class="tw-justify-end">
                <a-button @click="cancel">取消</a-button>
                <slot name="footer">
                    <a-button type="primary" @click="ok" :loading="loading">确认</a-button>
                </slot>
            </a-space>
        </template>
    </div>
</template>

<script>
import { EMPTY_FUN } from '@/utils';

export default {
    props: {
        onOk: {
            type: Function,
            default: EMPTY_FUN,
        },
        onCancel: Function,
        hidden: {
            type: Function,
            default: EMPTY_FUN,
        },
        refresh: {
            type: Function,
            default: EMPTY_FUN,
        },
    },
    data: () => ({
        loading: false,
    }),
    methods: {
        cancel() {
            if (this.onCancel) this.onCancel();
            this.hidden();
        },

        async ok() {
            this.loading = true;
            try {
                await this.onOk();
                this.hidden();
                this.refresh();
            } catch (error) {
                // todo
            }
            this.loading = false;
        },
    },
};
</script>