refactor(manager): 引入 useTable 并重构采购/财务/会员等10个列表页

- 引入通用 useTable composable 实现分页与查询标准化 - 重构采购单/入库单/报损单/盘点单4个采购管理列表页 - 重构退款日志/预存款流水/会员充值/会员经验等财务与会员日志列表页 - 重构支付流水与退款流水列表页 - 统一竞态防护与 loading 状态管理，消除 150+ 行冗余样板代码
2026-11-06 17:09:08 +08:00 · 2026-10-20 14:02:03 +08:00
parent 8fd353a766
commit 6b6dc2c4f3
11 changed files with 201 additions and 241 deletions
--- a/manager/src/utils/useTable.js
+++ b/manager/src/utils/useTable.js
@@ -0,0 +1,119 @@
+import { onMounted, reactive, ref } from "vue";
+
+/**
+ * 分页列表通用逻辑：loading / data / total / searchForm / 查询 / 重置 / 刷新。
+ *
+ * 用法：
+ *   const { loading, data, total, searchForm, getDataList, handleSearch, resetSearch } =
+ *     useTable(getXxxPage, { form: { name: "", status: "" } });
+ *
+ *   <el-table v-loading="loading" :data="data" />
+ *   <el-pagination
+ *     v-model:current-page="searchForm.pageNumber"
+ *     v-model:page-size="searchForm.pageSize"
+ *     :total="total"
+ *     @current-change="getDataList"
+ *     @size-change="getDataList"
+ *   />
+ *
+ * @param {(params: object) => Promise<any>} fetcher  请求函数，入参为 searchForm
+ * @param {object}   [options]
+ * @param {object}   [options.form]        查询条件默认值（会与分页/排序默认值合并）
+ * @param {number}   [options.pageSize=10] 默认每页条数
+ * @param {string}   [options.sort]        默认排序字段
+ * @param {string}   [options.order]       默认排序方向
+ * @param {boolean}  [options.immediate=true] 挂载后是否自动查询
+ * @param {(res: any) => ({records: any[], total: number}|null|undefined)} [options.resolve]
+ *        从响应中取出 { records, total }；返回空表示请求失败（保持原数据）。
+ *        默认：res.success 为真时取 res.result.records / res.result.total
+ * @param {(params: object) => object} [options.beforeRequest] 请求前加工参数（返回新对象，不影响 searchForm）
+ * @param {(res: any, parsed: {records: any[], total: number}) => void} [options.onSuccess]
+ *        查询成功且数据已更新后回调（仅最后一次请求触发），可用于刷新状态计数等
+ */
+export function useTable(fetcher, options = {}) {
+  const {
+    form = {},
+    pageSize = 10,
+    sort,
+    order,
+    immediate = true,
+    resolve = defaultResolve,
+    beforeRequest,
+    onSuccess,
+  } = options;
+
+  const loading = ref(false);
+  const data = ref([]);
+  const total = ref(0);
+
+  const initialForm = { ...form };
+  const searchForm = reactive({
+    pageNumber: 1,
+    pageSize,
+    ...(sort ? { sort } : {}),
+    ...(order ? { order } : {}),
+    ...form,
+  });
+
+  // 只采纳最后一次请求的结果，避免快速切换页码/条件时旧响应覆盖新数据
+  let requestId = 0;
+
+  function getDataList() {
+    const current = ++requestId;
+    loading.value = true;
+    const params = beforeRequest ? beforeRequest({ ...searchForm }) : searchForm;
+    return Promise.resolve(fetcher(params))
+      .then((res) => {
+        if (current !== requestId) return res;
+        const parsed = resolve(res);
+        if (parsed) {
+          data.value = parsed.records || [];
+          total.value = parsed.total || 0;
+          if (onSuccess) onSuccess(res, parsed);
+        }
+        return res;
+      })
+      .finally(() => {
+        if (current === requestId) loading.value = false;
+      });
+  }
+
+  /** 以当前条件从第 1 页重新查询 */
+  function handleSearch() {
+    searchForm.pageNumber = 1;
+    return getDataList();
+  }
+
+  /** 恢复查询条件默认值（保留当前每页条数）并从第 1 页查询 */
+  function resetSearch() {
+    Object.assign(searchForm, initialForm);
+    return handleSearch();
+  }
+
+  /** 保持当前页刷新（如删除/修改后） */
+  function refresh() {
+    return getDataList();
+  }
+
+  if (immediate) {
+    onMounted(getDataList);
+  }
+
+  return {
+    loading,
+    data,
+    total,
+    searchForm,
+    getDataList,
+    handleSearch,
+    resetSearch,
+    refresh,
+  };
+}
+
+function defaultResolve(res) {
+  if (res && res.success && res.result) {
+    return { records: res.result.records, total: res.result.total };
+  }
+  return null;
+}
--- a/manager/src/views/finance/refundLog.vue
+++ b/manager/src/views/finance/refundLog.vue
@@ -35,35 +35,18 @@
 </template>

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

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

-const loading = ref(false);
-const searchForm = reactive({ pageNumber: 1, pageSize: 20, orderSn: "" });
-const data = ref([]);
-const total = ref(0);
+const { loading, data, total, searchForm, getDataList, handleSearch } = useTable(
+  API_Finance.refundLogPage,
+  { pageSize: 20, form: { orderSn: "" } }
+);

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

-function handleSearch() {
-  searchForm.pageNumber = 1;
-  getDataList();
-}
-function getDataList() {
-  loading.value = true;
-  API_Finance.refundLogPage(searchForm).then((res) => {
-    loading.value = false;
-    if (res.success) {
-      data.value = res.result.records;
-      total.value = res.result.total;
-    }
-  });
-}
 function handleExport() {
  const { pageNumber, pageSize, ...rest } = searchForm;
  API_Finance.exportRefundFlow(rest).then((blob) => {
--- a/manager/src/views/member/advance/recharge.vue
+++ b/manager/src/views/member/advance/recharge.vue
@@ -91,7 +91,8 @@
 </template>

 <script setup>
-import { ref, reactive, onMounted } from "vue";
+import { ref } from "vue";
+import { useTable } from "@/utils/useTable";
 import { getUserRecharge } from "@/api/member";

 defineOptions({ name: "recharge" });
@@ -100,19 +101,15 @@ defineOptions({ name: "recharge" });
 const searchFormRef = ref(null);
 const table = ref(null);

-const loading = ref(true);
-const searchForm = reactive({
-  pageNumber: 1,
-  pageSize: 20,
-  sort: "createTime",
-  order: "desc",
-  startDate: "",
-  endDate: "",
-  memberName: "",
-});
 const selectDate = ref(null);
-const data = ref([]);
-const total = ref(0);
+const { loading, data, total, searchForm, getDataList } = useTable(
+  getUserRecharge,
+  {
+    pageSize: 20,
+    immediate: false,
+    form: { sort: "createTime", order: "desc", startDate: "", endDate: "", memberName: "" },
+  }
+);

 function rechargeWayText(way) {
  if (way === "ALIPAY") return "支付宝";
@@ -146,16 +143,6 @@ function selectDateRange(v) {
    searchForm.endDate = "";
  }
 }
-function getDataList() {
-  loading.value = true;
-  getUserRecharge(searchForm).then((res) => {
-    loading.value = false;
-    if (res.success) {
-      data.value = res.result.records;
-      total.value = res.result.total;
-    }
-  });
-}

 onMounted(() => {
  init();
--- a/manager/src/views/member/advance/walletLog.vue
+++ b/manager/src/views/member/advance/walletLog.vue
@@ -86,7 +86,8 @@
 </template>

 <script setup>
-import { ref, reactive, onMounted } from "vue";
+import { ref } from "vue";
+import { useTable } from "@/utils/useTable";
 import { getUserWallet } from "@/api/member";

 defineOptions({ name: "walletLog" });
@@ -95,19 +96,15 @@ defineOptions({ name: "walletLog" });
 const searchFormRef = ref(null);
 const table = ref(null);

-const loading = ref(true);
-const searchForm = reactive({
-  pageNumber: 1,
-  pageSize: 20,
-  sort: "createTime",
-  order: "desc",
-  startDate: "",
-  endDate: "",
-  memberName: "",
-});
 const selectDate = ref(null);
-const data = ref([]);
-const total = ref(0);
+const { loading, data, total, searchForm, getDataList } = useTable(
+  getUserWallet,
+  {
+    pageSize: 20,
+    immediate: false,
+    form: { sort: "createTime", order: "desc", startDate: "", endDate: "", memberName: "" },
+  }
+);

 function serviceTypeText(type) {
  if (type === "WALLET_WITHDRAWAL") return "余额提现";
@@ -142,16 +139,6 @@ function selectDateRange(v) {
    searchForm.endDate = "";
  }
 }
-function getDataList() {
-  loading.value = true;
-  getUserWallet(searchForm).then((res) => {
-    loading.value = false;
-    if (res.success) {
-      data.value = res.result.records;
-      total.value = res.result.total;
-    }
-  });
-}

 onMounted(() => {
  init();
--- a/manager/src/views/member/grade/experience-log.vue
+++ b/manager/src/views/member/grade/experience-log.vue
@@ -79,7 +79,8 @@
 </template>

 <script setup>
-import { onMounted, reactive, ref } from "vue";
+import { onMounted, ref } from "vue";
+import { useTable } from "@/utils/useTable";
 import * as API_Member from "@/api/member";

 const RULE_OPTIONS = [
@@ -100,16 +101,15 @@ defineOptions({ name: "memberGradeExperienceLog" });

 const searchFormRef = ref(null);

-const loading = ref(false);
-const total = ref(0);
-const data = ref([]);
-const ruleOptions = RULE_OPTIONS;
-const searchForm = reactive({
-  pageNumber: 1,
-  pageSize: 20,
-  memberMobile: "",
-  ruleKey: "",
-});
+const { loading, data, total, searchForm, getDataList: getData } = useTable(
+  API_Member.getMemberExperienceByPage,
+  {
+    pageSize: 20,
+    immediate: false,
+    form: { memberMobile: "", ruleKey: "" },
+    beforeRequest: buildParams,
+  }
+);

 onMounted(() => {
  init();
@@ -130,31 +130,15 @@ function findRuleName(ruleKey) {
 function init() {
  getData();
 }
-function buildParams() {
+function buildParams(base = searchForm) {
  const params = {
-    pageNumber: searchForm.pageNumber,
-    pageSize: searchForm.pageSize,
+    pageNumber: base.pageNumber,
+    pageSize: base.pageSize,
  };
-  if (searchForm.memberMobile) params.mobile = searchForm.memberMobile;
-  if (searchForm.ruleKey) params.ruleKey = searchForm.ruleKey;
+  if (base.memberMobile) params.mobile = base.memberMobile;
+  if (base.ruleKey) params.ruleKey = base.ruleKey;
  return params;
 }
-function getData() {
-  loading.value = true;
-  API_Member.getMemberExperienceByPage(buildParams())
-    .then((res) => {
-      if (res && res.success && res.result) {
-        data.value = res.result.records || [];
-        total.value = res.result.total || 0;
-      } else {
-        data.value = [];
-        total.value = 0;
-      }
-    })
-    .finally(() => {
-      loading.value = false;
-    });
-}
 function handleSearch() {
  searchForm.pageNumber = 1;
  getData();
--- a/manager/src/views/order/flow/paymentLog.vue
+++ b/manager/src/views/order/flow/paymentLog.vue
@@ -112,27 +112,23 @@
 </template>

 <script setup>
-import { onMounted, reactive, ref } from "vue";
+import { onMounted, ref } from "vue";
+import { useTable } from "@/utils/useTable";
 import * as API_Order from "@/api/order";

 defineOptions({ name: "paymentLog" });

 const searchFormRef = ref(null);

-const loading = ref(true);
-const searchForm = reactive({
-  pageNumber: 1,
-  pageSize: 20,
-  sort: "createTime",
-  order: "desc",
-  sn: "",
-  payStatus: "",
-  startDate: "",
-  endDate: "",
-});
 const times = ref([]);
-const data = ref([]);
-const total = ref(0);
+const { loading, data, total, searchForm, getDataList } = useTable(
+  API_Order.paymentLog,
+  {
+    pageSize: 20,
+    immediate: false,
+    form: { sort: "createTime", order: "desc", sn: "", payStatus: "", startDate: "", endDate: "" },
+  }
+);

 function init() {
  getDataList();
@@ -153,16 +149,6 @@ function changeDate(val) {
  searchForm.startDate = val[0];
  searchForm.endDate = val[1];
 }
-function getDataList() {
-  loading.value = true;
-  API_Order.paymentLog(searchForm).then((res) => {
-    loading.value = false;
-    if (res.success) {
-      data.value = res.result.records;
-      total.value = res.result.total;
-    }
-  });
-}

 onMounted(() => {
  init();
--- a/manager/src/views/order/flow/refundLog.vue
+++ b/manager/src/views/order/flow/refundLog.vue
@@ -109,7 +109,8 @@
 </template>

 <script setup>
-import { onMounted, reactive, ref } from "vue";
+import { onMounted, ref } from "vue";
+import { useTable } from "@/utils/useTable";
 import * as API_Order from "@/api/order";
 import { unitPrice } from "@/utils/filters";

@@ -117,20 +118,15 @@ defineOptions({ name: "refundLog" });

 const searchFormRef = ref(null);

-const loading = ref(true);
-const searchForm = reactive({
-  pageNumber: 1,
-  pageSize: 20,
-  sort: "createTime",
-  order: "desc",
-  startDate: "",
-  endDate: "",
-  orderSn: "",
-  isRefund: "",
-});
 const selectDate = ref(null);
-const data = ref([]);
-const total = ref(0);
+const { loading, data, total, searchForm, getDataList } = useTable(
+  API_Order.refundLog,
+  {
+    pageSize: 20,
+    immediate: false,
+    form: { sort: "createTime", order: "desc", startDate: "", endDate: "", orderSn: "", isRefund: "" },
+  }
+);

 function init() {
  getDataList();
@@ -158,16 +154,6 @@ function selectDateRange(v) {
    searchForm.endDate = "";
  }
 }
-function getDataList() {
-  loading.value = true;
-  API_Order.refundLog(searchForm).then((res) => {
-    loading.value = false;
-    if (res.success) {
-      data.value = res.result.records;
-      total.value = res.result.total;
-    }
-  });
-}

 onMounted(() => {
  init();
--- a/manager/src/views/procurement/damage-report/list.vue
+++ b/manager/src/views/procurement/damage-report/list.vue
@@ -49,7 +49,7 @@
 </template>

 <script setup>
-import { ref, reactive, onMounted } from "vue";
+import { useTable } from "@/utils/useTable";
 import { useRouter } from "vue-router";
 import { getDamageReportPage } from "@/api/procurement";
 import { DAMAGE_STATUS, damageStatusText, damageStatusTag, formatMoney } from "../constants";
@@ -58,33 +58,13 @@ defineOptions({ name: "manager-damage-report-list" });

 const router = useRouter();

-const loading = ref(false);
-const data = ref([]);
-const total = ref(0);
-const searchForm = reactive({ pageNumber: 1, pageSize: 10, storeId: "", status: "" });
+const { loading, data, total, searchForm, getDataList, handleSearch } = useTable(
+  getDamageReportPage,
+  { pageSize: 10, form: { storeId: "", status: "" } }
+);

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

-function handleSearch() {
-  searchForm.pageNumber = 1;
-  getDataList();
-}

-function getDataList() {
-  loading.value = true;
-  getDamageReportPage(searchForm)
-    .then((res) => {
-      if (res.success) {
-        data.value = res.result.records || [];
-        total.value = res.result.total || 0;
-      }
-    })
-    .finally(() => {
-      loading.value = false;
-    });
-}

 function goDetail(row) {
  router.push({ name: "manager-damage-report-detail", query: { id: row.id } });
--- a/manager/src/views/procurement/inbound/list.vue
+++ b/manager/src/views/procurement/inbound/list.vue
@@ -40,7 +40,7 @@
 </template>

 <script setup>
-import { onMounted, reactive, ref } from "vue";
+import { useTable } from "@/utils/useTable";
 import { useRouter } from "vue-router";
 import { getProcurementInboundPage } from "@/api/procurement";
 import { formatMoney } from "../constants";
@@ -49,32 +49,12 @@ defineOptions({ name: "manager-procurement-inbound-list" });

 const router = useRouter();

-const loading = ref(false);
-const data = ref([]);
-const total = ref(0);
-const searchForm = reactive({ pageNumber: 1, pageSize: 10, inboundSn: "" });
+const { loading, data, total, searchForm, getDataList, handleSearch } = useTable(
+  getProcurementInboundPage,
+  { pageSize: 10, form: { inboundSn: "" } }
+);

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

-function handleSearch() {
-  searchForm.pageNumber = 1;
-  getDataList();
-}
-function getDataList() {
-  loading.value = true;
-  getProcurementInboundPage(searchForm)
-    .then((res) => {
-      if (res.success) {
-        data.value = res.result.records || [];
-        total.value = res.result.total || 0;
-      }
-    })
-    .finally(() => {
-      loading.value = false;
-    });
-}
 function goDetail(row) {
  router.push({ name: "manager-procurement-inbound-detail", query: { id: row.id } });
 }
--- a/manager/src/views/procurement/inventory-count/list.vue
+++ b/manager/src/views/procurement/inventory-count/list.vue
@@ -29,7 +29,7 @@
 </template>

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

@@ -37,28 +37,12 @@ defineOptions({ name: "manager-inventory-count-list" });

 const router = useRouter();

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

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

-function getDataList() {
-  loading.value = true;
-  getInventoryCountPage(searchForm.value)
-    .then((res) => {
-      if (res.success) {
-        data.value = res.result.records || [];
-        total.value = res.result.total || 0;
-      }
-    })
-    .finally(() => {
-      loading.value = false;
-    });
-}
 function goDetail(row) {
  router.push({ name: "manager-inventory-count-detail", query: { id: row.id, sn: row.sn } });
 }
--- a/manager/src/views/procurement/purchase-order/list.vue
+++ b/manager/src/views/procurement/purchase-order/list.vue
@@ -54,7 +54,8 @@
 </template>

 <script setup>
-import { onMounted, reactive, ref } from "vue";
+import { onMounted } from "vue";
+import { useTable } from "@/utils/useTable";
 import { useRoute, useRouter } from "vue-router";
 import { getProcurementOrderPage } from "@/api/procurement";
 import { PROCUREMENT_STATUS, procurementStatusText, procurementStatusTag, formatMoney } from "../constants";
@@ -64,10 +65,10 @@ defineOptions({ name: "manager-procurement-order-list" });
 const route = useRoute();
 const router = useRouter();

-const loading = ref(false);
-const data = ref([]);
-const total = ref(0);
-const searchForm = reactive({ pageNumber: 1, pageSize: 10, orderSn: "", goodsName: "", status: "" });
+const { loading, data, total, searchForm, getDataList, handleSearch } = useTable(
+  getProcurementOrderPage,
+  { pageSize: 10, immediate: false, form: { orderSn: "", goodsName: "", status: "" } }
+);

 onMounted(() => {
  const status = route.query.status;
@@ -77,23 +78,6 @@ onMounted(() => {
  getDataList();
 });

-function handleSearch() {
-  searchForm.pageNumber = 1;
-  getDataList();
-}
-function getDataList() {
-  loading.value = true;
-  getProcurementOrderPage(searchForm)
-    .then((res) => {
-      if (res.success) {
-        data.value = res.result.records || [];
-        total.value = res.result.total || 0;
-      }
-    })
-    .finally(() => {
-      loading.value = false;
-    });
-}
 function goDetail(row) {
  router.push({ name: "manager-procurement-order-detail", query: { id: row.id } });
 }