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

- 重构统计报表（销售订单明细、商品销售汇总、店铺业绩）列表页为 useTable

- 重构营销活动（秒杀、第N件优惠、积分商品）列表页为 useTable

- 重构财务流水（钱包日志）、服务工单、分销导入、店铺审核、商品参数、订单投诉列表页

- 消除约 210+ 行分页/防抖/竞态重复样板代码，统一加载与查询状态规范

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,
+const { loading, data, total, searchForm, getDataList: getData, handleSearch } = useTable(
-  pageSize: 10,
+  getManagerWorkOrderPage,
-  orderSn: "",
+  {
-  workOrderSn: "",
+    pageSize: 10,
-  serviceStatus: "",
+    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>

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 { loading, data, total, searchForm, getDataList } = useTable(
-const searchForm = reactive({
+  getDistributionImportBatches,
-  pageNumber: 1,
+  { pageSize: 20 }
-  pageSize: 20,
+);
-});
-const data = ref([]);
-const total = ref(0);
 
-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)

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:current-page="searchForm.pageNumber"
-          v-model:page-size="pageSize"
+          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 { loading, data, total, searchForm, getDataList, handleSearch } = useTable(
-const pageSize = ref(20);
+  (p) => getRequest("/wallet/log", p),
-const data = ref([]);
+  {
-const total = ref(0);
+    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) {

manager/src/views/goods/goods-manage/parameter.vue

@@ -1,41 +1,47 @@
 <template>
   <div class="search">
     <el-card>
-      <el-form
+      <el-form ref="searchFormRef" :model="searchForm" inline>
-        ref="searchFormRef"
+        <el-form-item label="参数名称" prop="paramName">
-        :model="searchForm"
-        inline
-        label-width="70px"
-        class="search-form"
-        @keyup.enter="handleSearch"
-      >
-        <el-form-item label="参数名称">
           <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-row class="operation" style="margin-bottom: 10px;">
-
-    <el-card>
-      <div class="operation padding-row">
         <el-button type="primary" @click="goAdd">添加</el-button>
-      </div>
+      </el-row>
-      <el-table v-loading="loading" border :data="data" ref="tableRef" style="width: 100%">
+      <el-table
-        <el-table-column prop="paramName" label="参数名称" width="300" />
+        ref="tableRef"
-        <el-table-column prop="options" label="参数值" min-width="260" show-overflow-tooltip />
+        v-loading="loading"
-        <el-table-column label="必填" width="300" align="center">
+        :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"
+          @current-change="getDataList"
-          @size-change="changePageSize"
+          @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() {
+function handleReset() {
-  getDataList();
+  resetSearch();
-}
-
-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 goAdd() {
@@ -148,10 +122,6 @@ function remove(row) {
     });
   }).catch(() => {});
 }
-
-onMounted(() => {
-  init();
-});
 </script>
 <style lang="scss">
 .link-text {

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-card class="mt_10">
-      <el-table v-loading="loading" border :data="data" ref="table" class="mt_10" style="width: 100%">
+      <el-table
-        <el-table-column prop="memberName" label="会员名称" width="200" />
+        ref="table"
-        <el-table-column prop="orderSn" label="订单编号" min-width="120" show-overflow-tooltip />
+        v-loading="loading"
-        <el-table-column label="商品名称" min-width="200" show-overflow-tooltip>
+        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">
+            <el-tag
-              <a class="link-text mr_10" @click="linkTo(row.goodsId, row.skuId)">{{ row.goodsName }}</a>
+              v-if="row && row.complainStatus"
-              <el-popover trigger="hover" title="扫码在手机中查看" placement="top" width="180">
+              :type="complainStatusTagType(row.complainStatus)"
-                <template #reference>
+              size="small"
-                  <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)">
               {{ 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"
+          @current-change="getDataList"
-          @size-change="changePageSize"
+          @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 { loading, data, total, searchForm, getDataList, handleSearch, resetSearch } = useTable(
-const searchForm = reactive({
+  API_Order.getOrderComplain,
-  pageNumber: 1,
+  {
-  pageSize: 20,
+    pageSize: 20,
-  sort: "createTime",
+    immediate: false,
-  order: "desc",
+    form: {
-});
+      sort: "createTime",
-const data = ref([]);
+      order: "desc",
-const total = ref(0);
+      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>

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

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 { loading, data: rows, total, searchForm: query, getDataList: load } = useTable(
-const rows = ref([]);
+  getNthItemDiscountList,
-const total = ref(0);
+  { pageSize: 20, form: { promotionName: "" } }
-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);
 </script>

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 { loading, data, total, searchForm, getDataList } = useTable(
-const searchForm = reactive({
+  getPointsGoodsList,
-  pageNumber: 1,
+  {
-  pageSize: 20,
+    pageSize: 20,
-  sort: "createTime",
+    immediate: false,
-  order: "desc",
+    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 } });
 }

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">
+        <el-table-column prop="createTime" label="申请时间" min-width="160" align="left" />
-          <template #default="{ row }">
+        <el-table-column prop="storeAddressPath" label="所在地" min-width="180" align="left" />
-            <el-tag v-if="row">{{ row.storeAddressPath || "暂未填写" }}</el-tag>
+        <el-table-column label="操作" width="100" align="center" fixed="right">
-          </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">
           <template #default="{ row }">
             <a
-              v-if="row && row.storeDisable == 'APPLYING'"
+              style="color: #409eff; cursor: pointer;"
-              class="link-text"
               @click="edit(row)"
             >查看</a>
           </template>
@@ -80,8 +67,8 @@
           :total="total"
           layout="total, sizes, prev, pager, next, jumper"
           size="small"
-          @current-change="changePage"
+          @current-change="getDataList"
-          @size-change="changePageSize"
+          @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 { loading, data, total, searchForm, getDataList, handleSearch, resetSearch } = useTable(
-const table = ref(null);
+  getShopListData,
-
+  {
-function callback(val) {
+    pageSize: 20,
-  emit("callback", val);
+    form: {
-}
+      sort: "createTime",
-
+      order: "desc",
-function init() {
+      startDate: "",
-  getDataList();
+      endDate: "",
-}
+      storeName: "",
-
+      memberName: "",
-function changePage() {
+      storeDisable: "APPLYING",
-  getDataList();
+    },
-}
+    beforeRequest: (p) => {
-
+      const params = { ...p };
-function changePageSize() {
+      if (selectDate.value && selectDate.value.length === 2) {
-  searchForm.pageNumber = 1;
+        params.startDate = selectDate.value[0];
-  getDataList();
+        params.endDate = selectDate.value[1];
-}
+      } else {
-
+        delete params.startDate;
-function handleSearch() {
+        delete params.endDate;
-  searchForm.pageNumber = 1;
+      }
-  searchForm.pageSize = 20;
+      return params;
-  getDataList();
+    },
-}
-
-function selectDateRange(v) {
-  if (v) {
-    searchForm.startDate = v[0];
-    searchForm.endDate = v[1];
   }
-}
+);
 
-function getDataList() {
+function handleReset() {
-  loading.value = true;
+  selectDate.value = null;
-  searchForm.storeDisable = "APPLYING";
+  resetSearch();
-  getShopListData(searchForm).then((res) => {
-    loading.value = false;
-    if (res.success) {
-      data.value = res.result.records;
-      total.value = res.result.total;
-    }
-  });
 }
 
 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>

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 { loading, data, total, searchForm: params, getDataList: loadData, handleSearch } = useTable(
-const data = ref([]);
+  API_Statistics.getGoodsSalesSummaryReport,
-const total = ref(0);
+  {
+    pageSize: 20,
+    immediate: false,
+    form: { storeId: "", keyword: "", sortType: "PRICE" },
+    beforeRequest: buildParams,
+  }
+);
 const shops = ref([]);
 
 onMounted(() => {
@@ -123,8 +129,8 @@ function loadShops() {
   });
 }
 
-function buildParams() {
+function buildParams(base = params) {
-  const p = { ...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) => {

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({
+const { loading, data, total, searchForm: params, getDataList: loadData, handleSearch } = useTable(
-  pageNumber: 1,
+  API_Statistics.getSalesOrderDetailReport,
-  pageSize: 20,
+  {
-  storeId: "",
+    pageSize: 20,
-  orderSn: "",
+    immediate: false,
-  memberName: "",
+    form: { storeId: "", orderSn: "", memberName: "", keyword: "" },
-  keyword: "",
+    beforeRequest: buildParams,
-});
+  }
-const data = ref([]);
+);
-const total = ref(0);
 const shops = ref([]);
 
 onMounted(() => {
@@ -119,28 +118,14 @@ function loadShops() {
     if (res.success) shops.value = res.result.records || [];
   });
 }
-function buildParams() {
+function buildParams(base = params) {
-  const p = { ...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");

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 { loading, data, total, searchForm: params, getDataList: loadData, handleSearch } = useTable(
-const data = ref([]);
+  API_Statistics.getStorePerformanceReport,
-const total = ref(0);
+  {
+    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() {
+function buildParams(base = params) {
-  const p = { ...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");