index.vue

<template>
    <div>
        <my-card v-if="$scopedSlots.search">
            <div class="tw-flex">
                <slot name="search" :query="queryForm" />
            </div>

            <div class="tw-text-right tw-mt-2">
                <a-space>
                    <a-button @click="reset">{{ $t('table.reset') }}</a-button>
                    <a-button type="primary" @click="getData">{{ $t('table.search') }}</a-button>
                </a-space>
            </div>
        </my-card>

        <my-card :class="$scopedSlots.search ? 'tw-mt-3' : ''">
            <a-space class="tw-mb-2.5">
                <a-button v-if="addBtn" type="primary" key="add" v-bind="addBtn.options" @click="add">
                    {{ addBtn.text || $t('table.add') }}
                </a-button>
                <slot name="buttons" />
            </a-space>
            <div class="tw-mb-2">
                <a-alert
                    v-if="selectedRowKeys.length"
                    :message="$t('table.hasSelectedSome', { num: selectedRowKeys.length })"
                    type="success"
                    closable
                    :after-close="handleClose"
                />
            </div>
            <a-table
                :data-source="data"
                :loading="loading"
                v-bind="$attrs"
                :pagination="pagination"
                @change="pageChange"
                :row-selection="isRowSelection"
            >
                <slot />
            </a-table>
        </my-card>

        <!-- 新增 -->
        <a-drawer
            :title="title"
            placement="right"
            :visible="addVisible"
            @close="addDrawerClose"
            v-if="$slots.drawer"
            :maskClosable="addBtn && !!addBtn.maskClosable"
            :drawerStyle="drawerStyle"
            :bodyStyle="bodyStyle"
            :width="(addBtn && addBtn.width) || 600"
            destroyOnClose
        >
            <div class="tw-overflow-y-hidden tw-flex-1">
                <div class="tw-overflow-y-auto tw-h-full">
                    <slot name="drawer" />
                </div>
            </div>
            <template v-if="!noFooter">
                <a-divider />
                <a-space class="tw-justify-end">
                    <a-button @click="addVisible = false">{{ $t('table.cancel') }}</a-button>
                    <a-button type="primary" @click="submit" :loading="submitLoading">
                        {{ $t('table.confirm') }}
                    </a-button>
                </a-space>
            </template>
        </a-drawer>
        <slot name="children" />
    </div>
</template>

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

const initQuery = {
    pageSize: 10,
    pageNum: 1,
};

export default {
    props: {
        url: String,
        buttons: { type: Array, default: () => [] },
        addBtn: { type: Object },
        formatData: Function,
        noPage: Boolean,
        rowSelection: Object, //  radio  OR  checkbox
        tableParam: {
            type: Object,
            default: () => ({}),
        },
    },
    data() {
        return {
            initQuery: {
                ...initQuery,
                ...this.tableParam,
            },
            title: '新增',
            data: [],
            queryForm: {},
            loading: false,
            addVisible: false,
            submitLoading: false,
            drawerStyle: {
                display: 'flex',
                flexDirection: 'column',
                overflowY: 'hidden',
            },
            bodyStyle: {
                flex: 1,
                overflow: 'hidden',
                display: 'flex',
                flexDirection: 'column',
            },
            noFooter: false,
            layout: {
                labelCol: { span: 4 },
                wrapperCol: { span: 20 },
            },
            total: 0,
            selectedRowKeys: [],
            selectedRows: [],
        };
    },
    watch: {
        addVisible(val) {
            if (!val && this?.addBtn?.onCancel) this.addBtn.onCancel();
        },
        tableParam(val) {
            this.reset();
        },
    },
    mounted() {
        this.getData();
    },

    computed: {
        pagination() {
            return this.noPage
                ? false
                : {
                      current: this.initQuery.pageNum,
                      pageSize: this.initQuery.pageSize,
                      total: this.total,
                      showQuickJumper: true,
                  };
        },
        isRowSelection() {
            return this.rowSelection
                ? {
                      ...this.rowSelection,
                      selectedRowKeys: this.selectedRowKeys,
                      onChange: this.onSelectChange,
                  }
                : undefined;
        },
    },

    methods: {
        async getData() {
            this.loading = true;
            try {
                this.noPage ? await this.getDataNoPage() : await this.getDataWithPage();
            } catch (error) {
                // todo
            }
            this.loading = false;
        },
        async getDataNoPage() {
            const res = await request(this.url, METHOD.GET, this.queryForm);
            if (this.formatData) this.data = await this.formatData(res);
            else this.data = res;
        },

        async getDataWithPage() {
            const res = await request(this.url, METHOD.GET, { ...this.initQuery, ...this.queryForm });
            this.total = res.total;
            if (this.formatData) this.data = await this.formatData(res);
            else this.data = res.records;
        },

        add() {
            this.addVisible = true;
            this.type = 0;
            this.noFooter = false;
            this.title = this.$t('table.add');
        },
        addDrawerClose() {
            this.addVisible = false;
        },
        async submit() {
            this.submitLoading = true;
            try {
                await this.addBtn?.onOk();
                this.addVisible = false;
                this.getData();
            } catch (error) {
                // todo
            }
            this.submitLoading = false;
        },
        show({ type, title, noFooter } = {}) {
            if (type === 0) {
                this.title = this.$t('table.add');
            }
            if (type === 1) {
                this.title = this.$t('table.edit');
            }
            if (type === 2) {
                this.title = this.$t('table.view');
            }
            if (title) {
                this.title = title;
            }
            this.noFooter = noFooter;
            this.addVisible = true;
        },
        reset() {
            this.queryForm = {};
            this.initQuery = { ...initQuery, ...this.tableParam };
            this.getData();
        },
        pageChange(page) {
            this.initQuery.pageNum = page.current;
            this.getData();
        },

        onSelectChange(selectedRowKeys, selectedRows) {
            this.selectedRowKeys = selectedRowKeys;
            this.selectedRows = selectedRows;
        },
        handleClose() {
            this.selectedRowKeys = [];
            this.selectedRows = [];
        },
        getSelectedRowKeys() {
            return this.selectedRowKeys;
        },
        getTableData() {
            return this.data;
        },
        setTableData(data) {
            this.data = data;
        },
    },
};
</script>