index.vue

<template>
    <div>
        <div :class="$style.card" v-if="$scopedSlots.search">
            <a-form-model layout="inline" :model="queryForm">
                <slot name="search" :query="queryForm" />
            </a-form-model>

            <div class="tw-text-right tw-mt-2">
                <a-space>
                    <a-button @click="queryForm = {}">重置</a-button>
                    <a-button type="primary" @click="getData">查询</a-button>
                </a-space>
            </div>
        </div>

        <div class="tw-mt-3" :class="$style.card">
            <a-space class="tw-mb-2.5">
                <a-button v-if="addBtn" type="primary" key="add" v-bind="addBtn.options" @click="add">
                    {{ addBtn.text || '新建' }}
                </a-button>
                <template v-for="btn of buttons">
                    <a-button :type="btn.primary" :key="btn.text">{{ btn.text }}</a-button>
                </template>
            </a-space>

            <a-table :data-source="data" :loading="loading" v-bind="$attrs">
                <slot />
            </a-table>
        </div>

        <!-- 新增 -->
        <a-drawer
            :title="addBtn.title || '新建'"
            placement="right"
            :visible="addVisible"
            @close="addDrawerClose"
            v-if="addBtn"
            :maskClosable="addBtn.maskClosable"
        >
            <slot name="add" />
        </a-drawer>
    </div>
</template>

<script>
import { request, METHOD } from '@/utils/requestUtil';

const data = [
    {
        key: 1,
        name: 'John Brown sr.',
        age: 60,
        address: 'New York No. 1 Lake Park',
        children: [
            {
                key: 11,
                name: 'John Brown',
                age: 42,
                address: 'New York No. 2 Lake Park',
            },
            {
                key: 12,
                name: 'John Brown jr.',
                age: 30,
                address: 'New York No. 3 Lake Park',
                children: [
                    {
                        key: 121,
                        name: 'Jimmy Brown',
                        age: 16,
                        address: 'New York No. 3 Lake Park',
                    },
                ],
            },
            {
                key: 13,
                name: 'Jim Green sr.',
                age: 72,
                address: 'London No. 1 Lake Park',
                children: [
                    {
                        key: 131,
                        name: 'Jim Green',
                        age: 42,
                        address: 'London No. 2 Lake Park',
                        children: [
                            {
                                key: 1311,
                                name: 'Jim Green jr.',
                                age: 25,
                                address: 'London No. 3 Lake Park',
                            },
                            {
                                key: 1312,
                                name: 'Jimmy Green sr.',
                                age: 18,
                                address: 'London No. 4 Lake Park',
                            },
                        ],
                    },
                ],
            },
        ],
    },
    {
        key: 2,
        name: 'Joe Black',
        age: 32,
        address: 'Sidney No. 1 Lake Park',
    },
];

export default {
    props: {
        url: String,
        buttons: {
            type: Array,
            default: () => [],
        },
        addBtn: {
            type: Object,
        },
        formatData: Function,
    },
    data() {
        return {
            data: [],
            queryForm: {},
            loading: false,
            addVisible: false,
        };
    },
    mounted() {
        console.log(this.addBtn);
        this.getData();
    },

    methods: {
        async getData() {
            this.loading = true;
            try {
                const res = await request(this.url, METHOD.GET);
                if (this.formatData) this.data = this.formatData(res);
                else this.data = res;
            } catch (error) {
                // todo
            }
            this.loading = false;
        },
        add() {
            this.addVisible = true;
        },
        addDrawerClose() {
            this.addVisible = false;
        },
    },
};
</script>

<style module>
.card {
    @apply tw-bg-white tw-rounded-md tw-p-4;
}
</style>