shuhi-ui/src/components/CommonPage/CommonTable.vue

<template>
    <ele-card :body-style="{ paddingTop: '8px', ...bodyStyle }" :flex-table="flexTable">
        <!-- 表格 -->
        <ele-pro-table ref="tableRef" :row-key="pageConfig.rowKey || 'id'" :columns="columns"
            :datasource="finalDatasource" :show-overflow-tooltip="true" v-model:selections="selections"
            highlight-current-row :export-config="{ fileName: pageConfig.fileName }" :cache-key="pageConfig.cacheKey"
            border v-bind="$attrs">
            <template v-for="(val, key) in slotArray" #[key]="{ row }">
                <slot :name="key" :row="row"></slot>
            </template>
        </ele-pro-table>
    </ele-card>
</template>

<script setup>
    import { ref, getCurrentInstance, useSlots } from "vue";
    import { ElMessageBox } from "element-plus/es";
    import { EleMessage } from "ele-admin-plus/es";
    import { useDictData } from "@/utils/use-dict-data";
    import { download, toFormData, checkDownloadRes } from "@/utils/common";

    const slotArray = useSlots();

    let props = defineProps({
        pageConfig: {
            type: Object,
            default: () => ({
                cacheKey: "recycleOrderTable",
                fileName: "回收订单查询",
                rowKey: "id",
            }),
        },
        pageUrl: { type: String, default: "" },
        columns: { type: Array, default: () => [] },
        bodyStyle: { type: Object, default: () => ({}) },
        flexTable: { type: Boolean, default: true },
        sortFunction: { type: Function },
        datasource: { type: Function },
    });
    let { proxy } = getCurrentInstance();

    /** 表格实例 */
    const tableRef = ref(null);

    /** 表格选中数据 */
    const selections = ref([]);

    async function queryPage(params) {
        let url = props.pageConfig.pageUrl || props.pageUrl;
        if (!url) {
            return Promise.reject(new Error("请配置页面URL"));
        }
        const res = await proxy.$http.get(url, { params });
        if (res.data.code === 200) {
            return res.data;
        }
        return Promise.reject(new Error(res.data.msg));
    }

    /** 表格数据源 */
    const whereCache = ref({});
    const defaultDatasource = (table) => {
        let { pages, where, orders, sorter } = table;
        let initKeys = props.pageConfig.params || {};
        whereCache.value = where;

        let tempOrders = {};
        console.log('orders', orders);
        if (orders && orders.orderByColumn) {
            tempOrders.orderType = sorter.column.columnKey;
            tempOrders.orderWay = orders.isAsc === "ascending" ? "asc" : "desc";
        }
        // 兼容激活码排序
        if (props.sortFunction) {
            tempOrders = props.sortFunction(orders);
        }

        return queryPage({ ...initKeys, ...where, ...tempOrders, ...pages });
    };

    const finalDatasource = (table) => {
        if (props.datasource) {
            return props.datasource(table);
        }
        return defaultDatasource(table);
    };

    /** 搜索 */
    const reload = (where = {}) => {
        let data = where && where.search ? { page: 1, where } : { where: { ...whereCache.value, ...where } };
        delete data.where?.search;
        delete data.where?.isReset;
        tableRef.value?.reload?.(data);
    };

    /** 批量操作 */
    const operatBatch = ({ method, row, url, title, data = {} }) => {
        const rows = row == null ? selections.value : [row];
        if (!rows.length) {
            EleMessage.error("请至少选择一条数据");
            return;
        }
        title = title || "是否确认当前操作？";
        ElMessageBox.confirm(title, "提示", {
            type: "warning",
            draggable: true,
        })
            .then(() => {
                const loading = EleMessage.loading({
                    message: "请求中..",
                    plain: true,
                });
                proxy.$http[method](url, data)
                    .then((res) => {
                        if (res.data.code === 200) {
                            EleMessage.success("操作成功");
                            reload();
                        } else {
                            EleMessage.error(res.data.msg);
                        }
                        loading.close();
                    })
                    .catch((e) => {
                        loading.close();
                        EleMessage.error(e.message);
                    });
            })
            .catch(() => { });
    };

    /// 导出数据
    async function exportPage(params, name, method = "POST") {
        const res = await proxy.$http({
            url: props.pageConfig.exportUrl,
            method,
            data: toFormData(params),
            responseType: "blob",
        });
        await checkDownloadRes(res);
        download(
            res.data,
            name ? `${name}_${Date.now()}.xlsx` : `post_${Date.now()}.xlsx`
        );
    }

    //导出数据 进导出记录
    function exportRecord(params, method = "POST") {
        let data = method === "POST" ? { data: params } : { params };
        return proxy.$http({
            url: props.pageConfig.exportUrl,
            method,
            ...data,
        }); // 导出记录
    }

    /** 导出数据 */
    const exportData = (name, method = "POST") => {
        const loading = EleMessage.loading({
            message: "请求中..",
            plain: true,
        });
        tableRef.value?.fetch?.(({ where, orders }) => {
            let initKeys = props.pageConfig.params || {};
            console.log('where', where);
            console.log('orders', orders);
            console.log('initKeys', initKeys);

            exportRecord({ ...where, ...orders, ...initKeys }, method)
                .then((res) => {
                    if (res.data.code === 200) {
                        EleMessage.success("操作成功,请前往导出记录下载");
                    } else {
                        EleMessage.error(res.data.msg);
                    }
                    loading.close();
                })
                .catch((e) => {
                    loading.close();
                    EleMessage.error(e.message);
                });
        });
    };

    function messageBoxConfirm({ message, fetch }) {
        ElMessageBox.confirm(message, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "关闭",
            type: "warning",
        }).then(() => {
            fetch().then((res) => {
                if (res.data.code === 200) {
                    EleMessage.success("操作成功");
                    reload();
                } else {
                    EleMessage.error(res.data.msg);
                }
            });
        });
    }

    function getSelections() {
        console.log(selections.value, "selections.value");
        return selections.value;
    }

    function setSelectedRows(rows) {
        selections.value = rows;
        // Also try to toggle if table instance is available and supports it, 
        // ensuring visual sync if v-model isn't enough for pre-load
        if (tableRef.value?.toggleRowSelection) {
             rows.forEach(row => {
                 tableRef.value.toggleRowSelection(row, true);
             });
        }
    }

    function clearSelection() {
        selections.value = [];
        tableRef.value?.clearSelection?.();
    }

    defineExpose({
        reload,
        exportData,
        operatBatch,
        getSelections,
        setSelectedRows,
        clearSelection,
        messageBoxConfirm,
    });
</script>