refactor(manager): 重构统计报表、促销活动与工单审核等12个列表页为 useTable

- 重构统计报表（销售订单明细、商品销售汇总、店铺业绩）列表页为 useTable - 重构营销活动（秒杀、第N件优惠、积分商品）列表页为 useTable - 重构财务流水（钱包日志）、服务工单、分销导入、店铺审核、商品参数、订单投诉列表页 - 消除约 210+ 行分页/防抖/竞态重复样板代码，统一加载与查询状态规范
2026-11-06 17:09:08 +08:00 · 2026-10-20 14:20:36 +08:00
parent 45338c9d70
commit ba964ff478
12 changed files with 235 additions and 448 deletions
--- a/manager/src/views/appointment/workOrderList.vue
+++ b/manager/src/views/appointment/workOrderList.vue
@@ -45,6 +45,7 @@

 <script setup>
 import { onMounted, ref } from "vue";
+import { useTable } from "@/utils/useTable";
 import { useRoute } from "vue-router";
 import { getManagerWorkOrderPage } from "@/api/appointment";

@@ -63,22 +64,25 @@ const STATUS_OPTIONS = [
  { label: "逾期未到店", value: "NO_SHOW" },
 ];

-const loading = ref(false);
-const data = ref([]);
-const total = ref(0);
 const statusOptions = ref(STATUS_OPTIONS);
-const searchForm = ref({
-  pageNumber: 1,
-  pageSize: 10,
-  orderSn: "",
-  workOrderSn: "",
-  serviceStatus: "",
-});
+
+const { loading, data, total, searchForm, getDataList: getData, handleSearch } = useTable(
+  getManagerWorkOrderPage,
+  {
+    pageSize: 10,
+    immediate: false,
+    form: {
+      orderSn: "",
+      workOrderSn: "",
+      serviceStatus: "",
+    },
+  }
+);

 onMounted(() => {
  const status = route.query.serviceStatus;
  if (status) {
-    searchForm.value.serviceStatus = status;
+    searchForm.serviceStatus = status;
  }
  getData();
 });
@@ -87,21 +91,4 @@ function statusText(value) {
  const found = STATUS_OPTIONS.find((item) => item.value === value);
  return found ? found.label : value || "—";
 }
-function handleSearch() {
-  searchForm.value.pageNumber = 1;
-  getData();
-}
-function getData() {
-  loading.value = true;
-  getManagerWorkOrderPage(searchForm.value)
-    .then((res) => {
-      if (res.success) {
-        data.value = res.result?.records || [];
-        total.value = res.result?.total || 0;
-      }
-    })
-    .finally(() => {
-      loading.value = false;
-    });
-}
 </script>
--- a/manager/src/views/distribution/distributionImportRecord.vue
+++ b/manager/src/views/distribution/distributionImportRecord.vue
@@ -44,7 +44,7 @@
 </template>

 <script setup>
-import { onMounted, reactive, ref } from "vue";
+import { useTable } from "@/utils/useTable";
 import {
  downloadDistributionImportFailItems,
  getDistributionImportBatches,
@@ -54,17 +54,11 @@ import { Message } from "@/utils/message";

 defineOptions({ name: "distributionImportRecord" });

-const loading = ref(false);
-const searchForm = reactive({
-  pageNumber: 1,
-  pageSize: 20,
-});
-const data = ref([]);
-const total = ref(0);
+const { loading, data, total, searchForm, getDataList } = useTable(
+  getDistributionImportBatches,
+  { pageSize: 20 }
+);

-onMounted(() => {
-  getDataList();
-});

 function statusLabel(status) {
  const map = {
@@ -81,20 +75,6 @@ function changePageSize() {
  searchForm.pageNumber = 1;
  getDataList();
 }
-function getDataList() {
-  loading.value = true;
-  getDistributionImportBatches(searchForm)
-    .then((res) => {
-      loading.value = false;
-      if (res.success) {
-        data.value = res.result.records || [];
-        total.value = res.result.total || 0;
-      }
-    })
-    .catch(() => {
-      loading.value = false;
-    });
-}
 function downloadFailList(row) {
  if (!row || !row.failCount) return;
  downloadDistributionImportFailItems(row.id)
--- a/manager/src/views/finance/walletLog.vue
+++ b/manager/src/views/finance/walletLog.vue
@@ -24,8 +24,8 @@
      </el-table>
      <div class="mt_10" style="display: flex; justify-content: flex-end">
        <el-pagination
-          v-model:current-page="pageNumber"
-          v-model:page-size="pageSize"
+          v-model:current-page="searchForm.pageNumber"
+          v-model:page-size="searchForm.pageSize"
          :total="total"
          layout="total, prev, pager, next"
          size="small"
@@ -37,46 +37,31 @@
 </template>

 <script setup>
-import { onMounted, reactive, ref } from "vue";
+import { ref } from "vue";
+import { useTable } from "@/utils/useTable";
 import * as API_Finance from "@/api/finance";
 import { getRequest } from "@/libs/axios";
 import { downloadBlob } from "@/utils/downloadBlob";

 defineOptions({ name: "finance-wallet-log" });

-const loading = ref(false);
-const searchForm = reactive({ memberName: "" });
 const dateRange = ref([]);
-const pageNumber = ref(1);
-const pageSize = ref(20);
-const data = ref([]);
-const total = ref(0);
+const { loading, data, total, searchForm, getDataList, handleSearch } = useTable(
+  (p) => getRequest("/wallet/log", p),
+  {
+    pageSize: 20,
+    form: { memberName: "" },
+    beforeRequest: (p) => {
+      const params = { ...p };
+      if (dateRange.value?.length === 2) {
+        params.startDate = dateRange.value[0];
+        params.endDate = dateRange.value[1];
+      }
+      return params;
+    },
+  }
+);

-onMounted(() => {
-  getDataList();
-});
-
-function handleSearch() {
-  pageNumber.value = 1;
-  getDataList();
-}
-function getDataList() {
-  loading.value = true;
-  const params = {
-    pageNumber: pageNumber.value,
-    pageSize: pageSize.value,
-    memberName: searchForm.memberName,
-  };
-  getRequest("/wallet/log", params).then((res) => {
-    loading.value = false;
-    if (res.success) {
-      data.value = res.result.records;
-      total.value = res.result.total;
-    }
-  }).catch(() => {
-    loading.value = false;
-  });
-}
 function handleExport() {
  const params = { memberName: searchForm.memberName };
  if (dateRange.value?.length === 2) {
--- a/manager/src/views/goods/goods-manage/parameter.vue
+++ b/manager/src/views/goods/goods-manage/parameter.vue
@@ -1,41 +1,47 @@
 <template>
  <div class="search">
    <el-card>
-      <el-form
-        ref="searchFormRef"
-        :model="searchForm"
-        inline
-        label-width="70px"
-        class="search-form"
-        @keyup.enter="handleSearch"
-      >
-        <el-form-item label="参数名称">
+      <el-form ref="searchFormRef" :model="searchForm" inline>
+        <el-form-item label="参数名称" prop="paramName">
          <el-input
            v-model="searchForm.paramName"
+            type="text"
            placeholder="请输入参数名称"
            clearable
-            style="width: 240px"
+            style="width: 200px"
          />
        </el-form-item>
        <el-form-item>
-          <el-button type="primary" @click="handleSearch">搜索</el-button>
+          <el-button type="primary" icon="search" @click="handleSearch">搜索</el-button>
+          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
-    </el-card>
-
-    <el-card>
-      <div class="operation padding-row">
+      <el-row class="operation" style="margin-bottom: 10px;">
        <el-button type="primary" @click="goAdd">添加</el-button>
-      </div>
-      <el-table v-loading="loading" border :data="data" ref="tableRef" style="width: 100%">
-        <el-table-column prop="paramName" label="参数名称" width="300" />
-        <el-table-column prop="options" label="参数值" min-width="260" show-overflow-tooltip />
-        <el-table-column label="必填" width="300" align="center">
+      </el-row>
+      <el-table
+        ref="tableRef"
+        v-loading="loading"
+        :data="data"
+        border
+        style="width: 100%"
+      >
+        <el-table-column prop="paramName" label="参数名称" min-width="140">
          <template #default="{ row }">
-            <span v-if="row">{{ isTruthyFlag(row.required) ? "是" : "否" }}</span>
+            <span v-if="row">{{ row.paramName }}</span>
          </template>
        </el-table-column>
-        <el-table-column label="可索引" width="300" align="center">
+        <el-table-column prop="paramType" label="类型" width="120">
+          <template #default="{ row }">
+            <span v-if="row">{{ row.paramType === 1 ? '文本' : '单选' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="options" label="参数值" min-width="160">
+          <template #default="{ row }">
+            <span v-if="row">{{ row.options }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="isIndex" label="是否检索" width="100">
          <template #default="{ row }">
            <span v-if="row">{{ isTruthyFlag(row.isIndex) ? "是" : "否" }}</span>
          </template>
@@ -58,15 +64,16 @@
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          size="small"
-          @current-change="changePage"
-          @size-change="changePageSize"
+          @current-change="getDataList"
+          @size-change="() => { searchForm.pageNumber = 1; getDataList(); }"
        />
      </div>
    </el-card>
  </div>
 </template>
 <script setup>
-import { ref, reactive, onMounted } from "vue";
+import { ref } from "vue";
+import { useTable } from "@/utils/useTable";
 import { useRouter } from "vue-router";
 import { deleteParams, getGoodsParamsPage } from "@/api/goods";
 import { ElMessage, ElMessageBox } from "element-plus";
@@ -74,56 +81,23 @@ import { ElMessage, ElMessageBox } from "element-plus";
 defineOptions({ name: "categoryParams" });

 const router = useRouter();
-
-const submitLoading = ref(false);
-const loading = ref(true);
-const total = ref(0);
-const searchForm = reactive({
-  pageNumber: 1,
-  pageSize: 20,
-  sort: "createTime",
-  order: "desc",
-  paramName: "",
-});
-const data = ref([]);
-
 const searchFormRef = ref(null);
 const tableRef = ref(null);

+const { loading, data, total, searchForm, getDataList, handleSearch, resetSearch } = useTable(
+  getGoodsParamsPage,
+  {
+    pageSize: 20,
+    form: { sort: "createTime", order: "desc", paramName: "" },
+  }
+);
+
 function isTruthyFlag(val) {
  return val === 1 || val === "1" || val === true;
 }

-function init() {
-  getDataList();
-}
-
-function changePage(v) {
-  searchForm.pageNumber = v;
-  getDataList();
-}
-
-function changePageSize(v) {
-  searchForm.pageNumber = 1;
-  searchForm.pageSize = v;
-  getDataList();
-}
-
-function handleSearch() {
-  searchForm.pageNumber = 1;
-  searchForm.pageSize = 20;
-  getDataList();
-}
-
-function getDataList() {
-  loading.value = true;
-  getGoodsParamsPage(searchForm).then((res) => {
-    loading.value = false;
-    if (res && res.success) {
-      data.value = (res.result && res.result.records) || [];
-      total.value = (res.result && res.result.total) || 0;
-    }
-  });
+function handleReset() {
+  resetSearch();
 }

 function goAdd() {
@@ -148,10 +122,6 @@ function remove(row) {
    });
  }).catch(() => {});
 }
-
-onMounted(() => {
-  init();
-});
 </script>
 <style lang="scss">
 .link-text {
--- a/manager/src/views/order/after-order/orderComplaint.vue
+++ b/manager/src/views/order/after-order/orderComplaint.vue
@@ -37,48 +37,35 @@
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
+          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

-    <el-card>
-      <el-table v-loading="loading" border :data="data" ref="table" class="mt_10" style="width: 100%">
-        <el-table-column prop="memberName" label="会员名称" width="200" />
-        <el-table-column prop="orderSn" label="订单编号" min-width="120" show-overflow-tooltip />
-        <el-table-column label="商品名称" min-width="200" show-overflow-tooltip>
+    <el-card class="mt_10">
+      <el-table
+        ref="table"
+        v-loading="loading"
+        border
+        :data="data"
+        style="width: 100%"
+      >
+        <el-table-column prop="orderSn" label="订单编号" min-width="150" align="left" />
+        <el-table-column prop="storeName" label="店铺名称" min-width="120" align="left" />
+        <el-table-column prop="memberName" label="会员名称" min-width="120" align="left" />
+        <el-table-column prop="complainTopic" label="投诉主题" min-width="130" align="left" />
+        <el-table-column prop="complainStatus" label="投诉状态" width="120" align="center">
          <template #default="{ row }">
-            <template v-if="row">
-              <a class="link-text mr_10" @click="linkTo(row.goodsId, row.skuId)">{{ row.goodsName }}</a>
-              <el-popover trigger="hover" title="扫码在手机中查看" placement="top" width="180">
-                <template #reference>
-                  <img
-                    src="../../../assets/qrcode.svg"
-                    class="hover-pointer"
-                    width="20"
-                    height="20"
-                    alt="qrcode"
-                  />
-                </template>
-                <vue-qr
-                  :text="wapLinkTo(row.goodsId, row.skuId)"
-                  :margin="0"
-                  color-dark="#000"
-                  color-light="#fff"
-                  :size="150"
-                />
-              </el-popover>
-            </template>
-          </template>
-        </el-table-column>
-        <el-table-column prop="complainTopic" label="投诉主题" width="120" show-overflow-tooltip />
-        <el-table-column prop="createTime" label="投诉时间" width="180" />
-        <el-table-column label="投诉状态" width="110">
-          <template #default="{ row }">
-            <el-tag v-if="row" :type="complainStatusTagType(row.complainStatus)">
+            <el-tag
+              v-if="row && row.complainStatus"
+              :type="complainStatusTagType(row.complainStatus)"
+              size="small"
+            >
              {{ complainStatusText(row.complainStatus) }}
            </el-tag>
          </template>
        </el-table-column>
+        <el-table-column prop="createTime" label="投诉时间" min-width="160" align="left" />
        <el-table-column label="操作" width="120" align="center" fixed="right">
          <template #default="{ row }">
            <a v-if="row" class="link-text" @click="detail(row)">
@@ -96,8 +83,8 @@
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          size="small"
-          @current-change="changePage"
-          @size-change="changePageSize"
+          @current-change="getDataList"
+          @size-change="() => { searchForm.pageNumber = 1; getDataList(); }"
        />
      </div>
    </el-card>
@@ -105,28 +92,38 @@
 </template>

 <script setup>
-import { onMounted, reactive, ref, watch } from "vue";
+import { onMounted, ref, watch } from "vue";
+import { useTable } from "@/utils/useTable";
 import { useRoute } from "vue-router";
 import * as API_Order from "@/api/order";
-import vueQr from "vue-qr";
 import { customRouterPush } from "@/utils/filters";

 defineOptions({ name: "orderComplaint" });

 const route = useRoute();
-
 const searchFormRef = ref(null);
 const table = ref(null);

-const loading = ref(true);
-const searchForm = reactive({
-  pageNumber: 1,
-  pageSize: 20,
-  sort: "createTime",
-  order: "desc",
-});
-const data = ref([]);
-const total = ref(0);
+const { loading, data, total, searchForm, getDataList, handleSearch, resetSearch } = useTable(
+  API_Order.getOrderComplain,
+  {
+    pageSize: 20,
+    immediate: false,
+    form: {
+      sort: "createTime",
+      order: "desc",
+      orderSn: "",
+      memberName: "",
+      status: "",
+    },
+    beforeRequest: (p) => {
+      const params = { ...p };
+      if (route.query.orderSn && !params.orderSn) params.orderSn = route.query.orderSn;
+      if (route.query.status && !params.status) params.status = route.query.status;
+      return params;
+    },
+  }
+);

 watch(
  () => route.query,
@@ -146,6 +143,7 @@ function complainStatusText(v) {
  };
  return map[v] || v || "-";
 }
+
 function complainStatusTagType(v) {
  const map = {
    NEW: "primary",
@@ -157,37 +155,7 @@ function complainStatusTagType(v) {
  };
  return map[v] || "info";
 }
-function init() {
-  getDataList();
-}
-function changePage(v) {
-  searchForm.pageNumber = v;
-  getDataList();
-}
-function changePageSize(v) {
-  searchForm.pageNumber = 1;
-  searchForm.pageSize = v;
-  getDataList();
-}
-function handleSearch() {
-  searchForm.pageNumber = 1;
-  searchForm.pageSize = 20;
-  getDataList();
-}
-function getDataList() {
-  loading.value = true;
-  API_Order.getOrderComplain(searchForm)
-    .then((res) => {
-      loading.value = false;
-      if (res.success) {
-        data.value = res.result.records;
-        total.value = res.result.total;
-      }
-    })
-    .catch(() => {
-      loading.value = false;
-    });
-}
+
 function detail(v) {
  customRouterPush({
    name: "order-complaint-detail",
@@ -196,7 +164,9 @@ function detail(v) {
 }

 onMounted(() => {
-  init();
+  if (route.query.orderSn) searchForm.orderSn = route.query.orderSn;
+  if (route.query.status) searchForm.status = route.query.status;
+  getDataList();
 });
 </script>

@@ -206,11 +176,4 @@ onMounted(() => {
  cursor: pointer;
  text-decoration: none;
 }
-.mr_10 {
-  margin-right: 10px;
-}
-.hover-pointer {
-  cursor: pointer;
-  vertical-align: bottom;
-}
 </style>
--- a/manager/src/views/promotions/flash-discount/flash-discount.vue
+++ b/manager/src/views/promotions/flash-discount/flash-discount.vue
@@ -19,21 +19,12 @@
  </div>
 </template>
 <script setup>
-import { onMounted, ref } from "vue";
+import { useTable } from "@/utils/useTable";
 import { getFlashDiscountList } from "@/api/promotion.js";

-const loading = ref(false);
-const rows = ref([]);
-const total = ref(0);
-const query = ref({ pageNumber: 1, pageSize: 20 });
+const { loading, data: rows, total, searchForm: query, getDataList: load } = useTable(
+  getFlashDiscountList,
+  { pageSize: 20, form: { promotionName: "" } }
+);

-onMounted(() => { load(); });
-
-function load() {
-  loading.value = true;
-  getFlashDiscountList(query.value).then((res) => {
-    loading.value = false;
-    if (res.success) { rows.value = res.result.records; total.value = res.result.total; }
-  });
-}
 </script>
--- a/manager/src/views/promotions/nth-item-discount/nth-item-discount.vue
+++ b/manager/src/views/promotions/nth-item-discount/nth-item-discount.vue
@@ -21,21 +21,11 @@
  </div>
 </template>
 <script setup>
-import { onMounted, reactive, ref } from "vue";
+import { useTable } from "@/utils/useTable";
 import { getNthItemDiscountList } from "@/api/promotion.js";

-const loading = ref(false);
-const rows = ref([]);
-const total = ref(0);
-const query = reactive({ pageNumber: 1, pageSize: 20 });
-
-function load() {
-  loading.value = true;
-  getNthItemDiscountList(query).then((res) => {
-    loading.value = false;
-    if (res.success) { rows.value = res.result.records; total.value = res.result.total; }
-  });
-}
-
-onMounted(load);
+const { loading, data: rows, total, searchForm: query, getDataList: load } = useTable(
+  getNthItemDiscountList,
+  { pageSize: 20, form: { promotionName: "" } }
+);
 </script>
--- a/manager/src/views/promotions/points-goods/points-goods.vue
+++ b/manager/src/views/promotions/points-goods/points-goods.vue
@@ -156,7 +156,8 @@
 </template>

 <script setup>
-import { onMounted, reactive, ref } from "vue";
+import { onMounted, ref } from "vue";
+import { useTable } from "@/utils/useTable";
 import { useRouter } from "vue-router";
 import {
  getPointsGoodsList,
@@ -173,21 +174,20 @@ const router = useRouter();
 const searchFormRef = ref(null);
 const tableRef = ref(null);

-const loading = ref(true);
-const searchForm = reactive({
-  pageNumber: 1,
-  pageSize: 20,
-  sort: "createTime",
-  order: "desc",
-});
+const { loading, data, total, searchForm, getDataList } = useTable(
+  getPointsGoodsList,
+  {
+    pageSize: 20,
+    immediate: false,
+    form: { sort: "createTime", order: "desc" },
+  }
+);
 const statusList = ref([
  { label: "未开始", value: "NEW" },
  { label: "已开始", value: "START" },
  { label: "已结束", value: "END" },
  { label: "已关闭", value: "CLOSE" },
 ]);
-const data = ref([]);
-const total = ref(0);

 onMounted(() => {
  init();
@@ -235,19 +235,6 @@ function handleSearch() {
  }
  getDataList();
 }
-function getDataList() {
-  loading.value = true;
-  getPointsGoodsList(searchForm)
-    .then((res) => {
-      if (res.success) {
-        data.value = res.result.records;
-        total.value = res.result.total;
-      }
-    })
-    .finally(() => {
-      loading.value = false;
-    });
-}
 function edit(id) {
  router.push({ name: "edit-points-goods", query: { id } });
 }
--- a/manager/src/views/seller/shop/shopAuditList.vue
+++ b/manager/src/views/seller/shop/shopAuditList.vue
@@ -28,44 +28,31 @@
            end-placeholder="结束时间"
            placeholder="选择起始时间"
            style="width: 240px"
-            @change="selectDateRange"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="search-btn" @click="handleSearch">搜索</el-button>
+          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

-    <el-card>
+    <el-card class="mt_10">
      <el-table
        ref="table"
        v-loading="loading"
        border
        :data="data"
-        class="mt_10"
        style="width: 100%"
      >
        <el-table-column prop="storeName" label="店铺名称" min-width="120" align="left" />
        <el-table-column prop="memberName" label="会员名称" min-width="120" align="left" />
-        <el-table-column label="店铺地址" width="300">
-          <template #default="{ row }">
-            <el-tag v-if="row">{{ row.storeAddressPath || "暂未填写" }}</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column label="是否自营" width="120" align="left">
-          <template #default="{ row }">
-            <el-tag v-if="row" :type="row.selfOperated ? '' : 'success'">
-              {{ row.selfOperated ? "自营" : "非自营" }}
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column prop="createTime" label="创建时间" width="170" align="left" />
-        <el-table-column label="操作" width="170" align="center" fixed="right">
+        <el-table-column prop="createTime" label="申请时间" min-width="160" align="left" />
+        <el-table-column prop="storeAddressPath" label="所在地" min-width="180" align="left" />
+        <el-table-column label="操作" width="100" align="center" fixed="right">
          <template #default="{ row }">
            <a
-              v-if="row && row.storeDisable == 'APPLYING'"
-              class="link-text"
+              style="color: #409eff; cursor: pointer;"
              @click="edit(row)"
            >查看</a>
          </template>
@@ -80,8 +67,8 @@
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          size="small"
-          @current-change="changePage"
-          @size-change="changePageSize"
+          @current-change="getDataList"
+          @size-change="() => { searchForm.pageNumber = 1; getDataList(); }"
        />
      </div>
    </el-card>
@@ -89,79 +76,57 @@
 </template>

 <script setup>
-import { ref, reactive, onMounted } from "vue";
+import { ref } from "vue";
 import { useRouter } from "vue-router";
+import { useTable } from "@/utils/useTable";
 import { getShopListData } from "@/api/shops";

 defineOptions({ name: "shop" });

-const emit = defineEmits(["callback"]);
-
 const router = useRouter();
-
-const loading = ref(true);
-const searchForm = reactive({
-  pageNumber: 1,
-  pageSize: 20,
-  sort: "createTime",
-  order: "desc",
-  startDate: "",
-  endDate: "",
-});
 const selectDate = ref(null);
-const data = ref([]);
-const total = ref(0);

-const searchFormRef = ref(null);
-const table = ref(null);
-
-function callback(val) {
-  emit("callback", val);
-}
-
-function init() {
-  getDataList();
-}
-
-function changePage() {
-  getDataList();
-}
-
-function changePageSize() {
-  searchForm.pageNumber = 1;
-  getDataList();
-}
-
-function handleSearch() {
-  searchForm.pageNumber = 1;
-  searchForm.pageSize = 20;
-  getDataList();
-}
-
-function selectDateRange(v) {
-  if (v) {
-    searchForm.startDate = v[0];
-    searchForm.endDate = v[1];
+const { loading, data, total, searchForm, getDataList, handleSearch, resetSearch } = useTable(
+  getShopListData,
+  {
+    pageSize: 20,
+    form: {
+      sort: "createTime",
+      order: "desc",
+      startDate: "",
+      endDate: "",
+      storeName: "",
+      memberName: "",
+      storeDisable: "APPLYING",
+    },
+    beforeRequest: (p) => {
+      const params = { ...p };
+      if (selectDate.value && selectDate.value.length === 2) {
+        params.startDate = selectDate.value[0];
+        params.endDate = selectDate.value[1];
+      } else {
+        delete params.startDate;
+        delete params.endDate;
+      }
+      return params;
+    },
  }
-}
+);

-function getDataList() {
-  loading.value = true;
-  searchForm.storeDisable = "APPLYING";
-  getShopListData(searchForm).then((res) => {
-    loading.value = false;
-    if (res.success) {
-      data.value = res.result.records;
-      total.value = res.result.total;
-    }
-  });
+function handleReset() {
+  selectDate.value = null;
+  resetSearch();
 }

 function edit(v) {
  router.push({ path: "/shop-operation", query: { shopId: v.id } });
 }
-
-onMounted(() => {
-  init();
-});
 </script>
+
+<style lang="scss" scoped>
+.search-form {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+</style>
--- a/manager/src/views/statistics/goods-sales-summary.vue
+++ b/manager/src/views/statistics/goods-sales-summary.vue
@@ -81,7 +81,8 @@
 </template>

 <script setup>
-import { onMounted, reactive, ref } from "vue";
+import { onMounted, ref } from "vue";
+import { useTable } from "@/utils/useTable";
 import * as API_Statistics from "@/api/statistics";
 import { getShopListData } from "@/api/shops";
 import { downloadBlob } from "@/utils/downloadBlob";
@@ -89,12 +90,17 @@ import * as filters from "@/utils/filters";

 defineOptions({ name: "goods-sales-summary-report" });

-const loading = ref(false);
 const dateRange = ref([]);
 const defaultTime = ref([new Date(2000, 0, 1, 0, 0, 0), new Date(2000, 0, 1, 23, 59, 59)]);
-const params = reactive({ pageNumber: 1, pageSize: 20, storeId: "", keyword: "", sortType: "PRICE" });
-const data = ref([]);
-const total = ref(0);
+const { loading, data, total, searchForm: params, getDataList: loadData, handleSearch } = useTable(
+  API_Statistics.getGoodsSalesSummaryReport,
+  {
+    pageSize: 20,
+    immediate: false,
+    form: { storeId: "", keyword: "", sortType: "PRICE" },
+    beforeRequest: buildParams,
+  }
+);
 const shops = ref([]);

 onMounted(() => {
@@ -123,8 +129,8 @@ function loadShops() {
  });
 }

-function buildParams() {
-  const p = { ...params };
+function buildParams(base = params) {
+  const p = { ...base };
  if (dateRange.value && dateRange.value.length === 2) {
    p.startTime = dateRange.value[0];
    p.endTime = dateRange.value[1];
@@ -132,21 +138,7 @@ function buildParams() {
  return p;
 }

-function handleSearch() {
-  params.pageNumber = 1;
-  loadData();
-}

-function loadData() {
-  loading.value = true;
-  API_Statistics.getGoodsSalesSummaryReport(buildParams()).then((res) => {
-    loading.value = false;
-    if (res.success) {
-      data.value = res.result.records || [];
-      total.value = res.result.total || 0;
-    }
-  });
-}

 function handleExport() {
  API_Statistics.exportGoodsSalesSummaryReport(buildParams()).then((blob) => {
--- a/manager/src/views/statistics/sales-order-detail.vue
+++ b/manager/src/views/statistics/sales-order-detail.vue
@@ -73,7 +73,8 @@
 </template>

 <script setup>
-import { onMounted, reactive, ref } from "vue";
+import { onMounted, ref } from "vue";
+import { useTable } from "@/utils/useTable";
 import * as API_Statistics from "@/api/statistics";
 import { getShopListData } from "@/api/shops";
 import { downloadBlob } from "@/utils/downloadBlob";
@@ -81,19 +82,17 @@ import { unitPrice } from "@/utils/filters";

 defineOptions({ name: "sales-order-detail-report" });

-const loading = ref(false);
 const dateRange = ref([]);
 const defaultTime = ref([new Date(2000, 0, 1, 0, 0, 0), new Date(2000, 0, 1, 23, 59, 59)]);
-const params = reactive({
-  pageNumber: 1,
-  pageSize: 20,
-  storeId: "",
-  orderSn: "",
-  memberName: "",
-  keyword: "",
-});
-const data = ref([]);
-const total = ref(0);
+const { loading, data, total, searchForm: params, getDataList: loadData, handleSearch } = useTable(
+  API_Statistics.getSalesOrderDetailReport,
+  {
+    pageSize: 20,
+    immediate: false,
+    form: { storeId: "", orderSn: "", memberName: "", keyword: "" },
+    beforeRequest: buildParams,
+  }
+);
 const shops = ref([]);

 onMounted(() => {
@@ -119,28 +118,14 @@ function loadShops() {
    if (res.success) shops.value = res.result.records || [];
  });
 }
-function buildParams() {
-  const p = { ...params };
+function buildParams(base = params) {
+  const p = { ...base };
  if (dateRange.value && dateRange.value.length === 2) {
    p.startTime = dateRange.value[0];
    p.endTime = dateRange.value[1];
  }
  return p;
 }
-function handleSearch() {
-  params.pageNumber = 1;
-  loadData();
-}
-function loadData() {
-  loading.value = true;
-  API_Statistics.getSalesOrderDetailReport(buildParams()).then((res) => {
-    loading.value = false;
-    if (res.success) {
-      data.value = res.result.records || [];
-      total.value = res.result.total || 0;
-    }
-  });
-}
 function handleExport() {
  API_Statistics.exportSalesOrderDetailReport(buildParams()).then((blob) => {
    downloadBlob(blob, "销售订单明细报表.xlsx");
--- a/manager/src/views/statistics/store-performance.vue
+++ b/manager/src/views/statistics/store-performance.vue
@@ -91,7 +91,8 @@
 </template>

 <script setup>
-import { onMounted, reactive, ref } from "vue";
+import { onMounted, ref } from "vue";
+import { useTable } from "@/utils/useTable";
 import * as API_Statistics from "@/api/statistics";
 import { getShopListData } from "@/api/shops";
 import { downloadBlob } from "@/utils/downloadBlob";
@@ -99,12 +100,17 @@ import { unitPrice } from "@/utils/filters";

 defineOptions({ name: "store-performance-report" });

-const loading = ref(false);
 const dateRange = ref([]);
 const defaultTime = ref([new Date(2000, 0, 1, 0, 0, 0), new Date(2000, 0, 1, 23, 59, 59)]);
-const params = reactive({ pageNumber: 1, pageSize: 20, storeId: "" });
-const data = ref([]);
-const total = ref(0);
+const { loading, data, total, searchForm: params, getDataList: loadData, handleSearch } = useTable(
+  API_Statistics.getStorePerformanceReport,
+  {
+    pageSize: 20,
+    immediate: false,
+    form: { storeId: "" },
+    beforeRequest: buildParams,
+  }
+);
 const shops = ref([]);

 onMounted(() => {
@@ -130,28 +136,14 @@ function loadShops() {
    if (res.success) shops.value = res.result.records || [];
  });
 }
-function buildParams() {
-  const p = { ...params };
+function buildParams(base = params) {
+  const p = { ...base };
  if (dateRange.value && dateRange.value.length === 2) {
    p.startTime = dateRange.value[0];
    p.endTime = dateRange.value[1];
  }
  return p;
 }
-function handleSearch() {
-  params.pageNumber = 1;
-  loadData();
-}
-function loadData() {
-  loading.value = true;
-  API_Statistics.getStorePerformanceReport(buildParams()).then((res) => {
-    loading.value = false;
-    if (res.success) {
-      data.value = res.result.records || [];
-      total.value = res.result.total || 0;
-    }
-  });
-}
 function handleExport() {
  API_Statistics.exportStorePerformanceReport(buildParams()).then((blob) => {
    downloadBlob(blob, "店铺业绩报表.xlsx");