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

- 引入通用 useTable composable 实现分页与查询标准化
- 重构采购单/入库单/报损单/盘点单4个采购管理列表页
- 重构退款日志/预存款流水/会员充值/会员经验等财务与会员日志列表页
- 重构支付流水与退款流水列表页
- 统一竞态防护与 loading 状态管理，消除 150+ 行冗余样板代码

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 } });

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 } });
 }

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 } });
 }

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 } });
 }