refactor(CommonTable): 优化代码格式并添加导出记录功能

调整代码缩进和格式以提高可读性
新增导出记录功能，支持导出数据到记录中

src/components/CommonPage/CommonTable.vue

@@ -1,9 +1,10 @@
 <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">
+        <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>
@@ -12,108 +13,162 @@
 </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);
+    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));
     }
-    
-    return queryPage({ ...initKeys, ...where, ...tempOrders, ...pages });
-};
 
-const finalDatasource = (table) => {
-    if (props.datasource) {
-        return props.datasource(table);
+    /** 表格数据源 */
+    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`
+        );
     }
-    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;
+
+    //导出数据 进导出记录
+    function exportRecord(params, method = "POST") {
+        let data = method === "POST" ? { data: params } : {params};
+        return proxy.$http({
+            url: props.pageConfig.exportUrl,
+            method,
+            ...data,
+        }); // 导出记录
     }
-    title = title || "是否确认当前操作？";
-    ElMessageBox.confirm(title, "提示", {
-        type: "warning",
-        draggable: true,
-    })
-        .then(() => {
-            const loading = EleMessage.loading({
-                message: "请求中..",
-                plain: true,
-            });
-            proxy.$http[method](url, 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("操作成功");
-                        reload();
+                        EleMessage.success("操作成功,请前往导出记录下载");
                     } else {
                         EleMessage.error(res.data.msg);
                     }
@@ -123,85 +178,36 @@ const operatBatch = ({ method, row, url, title, data = {} }) => {
                     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") {
-    return proxy.$http({
-        url: props.pageConfig.exportUrl,
-        method,
-        data: params,
-    }); // 导出记录
-}
-
-/** 导出数据 */
-const exportData = (name, method = "POST") => {
-    const loading = EleMessage.loading({
-        message: "请求中..",
-        plain: true,
-    });
-    tableRef.value?.fetch?.(({ where, orders }) => {
-        let initKeys = props.pageConfig.params || {};
-        exportRecord({ ...where, ...orders, ...initKeys }, method)
-            .then((res) => {
+        });
+    };
+
+    function messageBoxConfirm({ message, fetch }) {
+        ElMessageBox.confirm(message, "提示", {
+            confirmButtonText: "确定",
+            cancelButtonText: "关闭",
+            type: "warning",
+        }).then(() => {
+            fetch().then((res) => {
                 if (res.data.code === 200) {
-                    EleMessage.success("操作成功,请前往导出记录下载");
+                    EleMessage.success("操作成功");
+                    reload();
                 } 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;
+    }
+
+    defineExpose({
+        reload,
+        exportData,
+        operatBatch,
+        getSelections,
+        messageBoxConfirm,
     });
-}
-
-function getSelections() {
-    console.log(selections.value, "selections.value");
-    return selections.value;
-}
-
-defineExpose({
-    reload,
-    exportData,
-    operatBatch,
-    getSelections,
-    messageBoxConfirm,
-});
 </script>