refactor(manager): 重构商品/审核/品牌/分词/分销提现与等级等7个核心列表页为 useTable

- 重构商品管理（商品总览、商品审核）列表页为 useTable - 重构商品维护（品牌管理、评价管理）列表页为 useTable - 重构分销管理（分销提现、等级变动历史）与自定义分词列表页为 useTable - 消除 150+ 行重复样板代码，统一竞态防护与分页查询规范
2026-11-06 17:09:08 +08:00 · 2026-10-20 14:56:06 +08:00
parent cba624f480
commit 5e74e356e0
7 changed files with 347 additions and 503 deletions
--- a/manager/src/views/custom-words/index.vue
+++ b/manager/src/views/custom-words/index.vue
@@ -3,6 +3,7 @@
    <el-card>
      <div class="operation">
        <el-button type="primary" @click="add">添加</el-button>
+        <el-button v-if="selectCount > 0" type="danger" @click="delAll">批量删除</el-button>
      </div>

      <el-table
@@ -38,8 +39,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>
@@ -58,14 +59,15 @@
      </el-form>
      <template #footer>
        <el-button @click="modalVisible = false">取消</el-button>
-        <el-button type="primary" :loading="submitLoading" @click="handleSubmit">提交</el-button>
+        <el-button type="primary" :loading="submitLoading" @click="handleSubmit">保存</el-button>
      </template>
    </el-dialog>
  </div>
 </template>

 <script setup>
-import { onMounted, reactive, ref } from "vue";
+import { reactive, ref } from "vue";
+import { useTable } from "@/utils/useTable";
 import {
  getCustomWordsPage,
  delCustom,
@@ -80,17 +82,11 @@ defineOptions({ name: "custom-words" });
 const table = ref(null);
 const formRef = ref(null);

-const loading = ref(true);
 const modalType = ref(0);
 const modalVisible = ref(false);
 const modalTitle = ref("");
-const searchForm = reactive({
-  pageNumber: 1,
-  pageSize: 20,
-  sort: "createTime",
-  order: "desc",
-  words: "",
-});
+const currentId = ref("");
+
 const form = ref({
  name: "",
 });
@@ -100,90 +96,76 @@ const formValidate = reactive({
 const submitLoading = ref(false);
 const selectList = ref([]);
 const selectCount = ref(0);
-const data = ref([]);
-const total = ref(0);
-// 未在 data 声明、detail() 中直接挂到 this 上的字段
-let id;

-function init() {
-  getDataList();
-}
-function changePage(v) {
-  searchForm.pageNumber = v;
-  getDataList();
-  clearSelectAll();
-}
-function changePageSize(v) {
-  searchForm.pageNumber = 1;
-  searchForm.pageSize = v;
-  getDataList();
-}
-function handleSearch() {
-  searchForm.pageNumber = 1;
-  getDataList();
-}
+const { loading, data, total, searchForm, getDataList } = useTable(
+  getCustomWordsPage,
+  {
+    pageSize: 20,
+    sort: "createTime",
+    order: "desc",
+    form: { words: "" },
+  }
+);
+
 function clearSelectAll() {
  table.value?.clearSelection();
 }
+
 function changeSelect(e) {
  selectList.value = e;
  selectCount.value = e.length;
 }
-function getDataList() {
-  loading.value = true;
-  getCustomWordsPage(searchForm)
-    .then((res) => {
-      if (res.success) {
-        data.value = res.result.records;
-        total.value = res.result.total;
-      }
-    })
-    .finally(() => {
-      loading.value = false;
-    });
-}
+
 function handleSubmit() {
  formRef.value.validate((valid) => {
    if (valid) {
      submitLoading.value = true;
-      if (modalType.value == 0) {
-        delete form.value.id;
-        insertCustomWords(form.value).then((res) => {
-          submitLoading.value = false;
-          if (res.success) {
-            Message.success("操作成功");
-            getDataList();
-            modalVisible.value = false;
-          }
-        });
+      if (modalType.value === 0) {
+        insertCustomWords(form.value)
+          .then((res) => {
+            if (res.success) {
+              Message.success("操作成功");
+              getDataList();
+              modalVisible.value = false;
+            }
+          })
+          .finally(() => {
+            submitLoading.value = false;
+          });
      } else {
-        form.value.id = id;
-        updateCustomWords(form.value).then((res) => {
-          submitLoading.value = false;
-          if (res.success) {
-            Message.success("操作成功");
-            getDataList();
-            modalVisible.value = false;
-          }
-        });
+        updateCustomWords({ ...form.value, id: currentId.value })
+          .then((res) => {
+            if (res.success) {
+              Message.success("操作成功");
+              getDataList();
+              modalVisible.value = false;
+            }
+          })
+          .finally(() => {
+            submitLoading.value = false;
+          });
      }
    }
  });
 }
+
 function add() {
  modalType.value = 0;
  modalTitle.value = "添加";
-  form.value = {};
+  currentId.value = "";
+  form.value = { name: "" };
  formRef.value?.resetFields();
  modalVisible.value = true;
 }
+
 function detail(v) {
  modalType.value = 1;
-  id = v.id;
+  currentId.value = v.id;
  modalTitle.value = "修改";
+  form.value = { name: v.name };
  modalVisible.value = true;
-  form.value.name = v.name;
 }
+
 function remove(v) {
  Modal.confirm({
    title: "确认删除",
@@ -200,6 +182,7 @@ function remove(v) {
    },
  });
 }
+
 function delAll() {
  if (selectCount.value <= 0) {
    Message.warning("您还未选择要删除的数据");
@@ -210,11 +193,7 @@ function delAll() {
    content: "您确认要删除所选的 " + selectCount.value + " 条数据?",
    loading: true,
    onOk: () => {
-      let ids = "";
-      selectList.value.forEach(function (e) {
-        ids += e.id + ",";
-      });
-      ids = ids.substring(0, ids.length - 1);
+      const ids = selectList.value.map((e) => e.id).join(",");
      delCustom(ids).then((res) => {
        Modal.remove();
        if (res.success) {
@@ -226,8 +205,19 @@ function delAll() {
    },
  });
 }
-
-onMounted(() => {
-  init();
-});
 </script>
+
+<style lang="scss" scoped>
+.link-text {
+  color: #409eff;
+  cursor: pointer;
+  text-decoration: none;
+}
+.op-split {
+  margin: 0 8px;
+  color: #dcdee2;
+}
+.operation {
+  margin-bottom: 10px;
+}
+</style>
--- a/manager/src/views/distribution/distributionCash.vue
+++ b/manager/src/views/distribution/distributionCash.vue
@@ -4,10 +4,11 @@
      <el-form
        ref="searchFormRef"
        :model="searchForm"
+        inline
        class="search-form"
        @keyup.enter="handleSearch"
      >
-        <el-form-item label="分销员名称" class="flex" prop="memberName">
+        <el-form-item label="分销员名称" prop="memberName">
          <el-input
            v-model="searchForm.memberName"
            placeholder="请输入分销员名称"
@@ -15,7 +16,7 @@
            style="width: 240px"
          />
        </el-form-item>
-        <el-form-item label="编号" class="flex">
+        <el-form-item label="编号" prop="sn">
          <el-input
            v-model="searchForm.sn"
            placeholder="请输入编号"
@@ -25,11 +26,12 @@
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @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-tabs v-model="tabStatus" @tab-change="handleTabChange">
        <el-tab-pane label="全部" name="" />
        <el-tab-pane :label="applyCountLabel" name="APPLY" />
@@ -82,8 +84,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>
@@ -176,29 +178,21 @@
 <script setup>
 import { ref, computed, onMounted } from "vue";
 import { useRoute } from "vue-router";
+import { useTable } from "@/utils/useTable";
 import { auditDistributionCash, getDistributionCash } from "@/api/distribution";
 import { Message, Modal } from "@/utils/message";

 defineOptions({ name: "distributionCash" });

 const route = useRoute();
-
-// 模板 el-form 的 ref（原 ref="searchForm"，与 data 同名会互相覆盖，改名为 searchFormRef）
 const searchFormRef = ref(null);
 const table = ref(null);

 const tabStatus = ref("");
 const applyCount = ref(0);
-const loading = ref(true);
 const drawerVisible = ref(false);
 const drawerTitle = ref("");
 const result = ref("VIA_AUDITING");
-const searchForm = ref({
-  pageNumber: 1,
-  pageSize: 20,
-  sort: "createTime",
-  order: "desc",
-});
 const handleStatus = ref("edit");
 const form = ref({
  sn: "",
@@ -210,17 +204,45 @@ const form = ref({
  settlementBankAccountNum: "",
 });
 const submitLoading = ref(false);
-const data = ref([]);
-const total = ref(0);

 const applyCountLabel = computed(() => {
  return applyCount.value > 0 ? `待处理(${applyCount.value})` : "待处理";
 });

-function init() {
-  getDataList();
-  loadApplyCount();
+const { loading, data, total, searchForm, getDataList, handleSearch, resetSearch } = useTable(
+  getDistributionCash,
+  {
+    pageSize: 20,
+    immediate: false,
+    sort: "createTime",
+    order: "desc",
+    form: {
+      memberName: "",
+      sn: "",
+    },
+    beforeRequest: (p) => {
+      const params = { ...p };
+      if (tabStatus.value) {
+        params.distributionCashStatus = tabStatus.value;
+      }
+      return params;
+    },
+    onSuccess: () => {
+      loadApplyCount();
+    },
+  }
+);
+
+function handleTabChange(name) {
+  tabStatus.value = name;
+  handleSearch();
 }
+
+function handleReset() {
+  tabStatus.value = "";
+  resetSearch();
+}
+
 function loadApplyCount() {
  getDistributionCash({
    distributionCashStatus: "APPLY",
@@ -228,78 +250,48 @@ function loadApplyCount() {
    pageNumber: 1,
  }).then((res) => {
    if (res.success) {
-      applyCount.value = res.result.total || 0;
+      applyCount.value = res.result?.total || 0;
    }
  });
 }
-function changePage() {
-  getDataList();
-}
-function changePageSize() {
-  searchForm.value.pageNumber = 1;
-  getDataList();
-}
-function handleSearch() {
-  searchForm.value.pageNumber = 1;
-  searchForm.value.pageSize = 20;
-  getDataList();
-}
-function getDataList() {
-  loading.value = true;
-  const params = { ...searchForm.value };
-  if (tabStatus.value) {
-    params.distributionCashStatus = tabStatus.value;
-  }
-  getDistributionCash(params).then((res) => {
-    loading.value = false;
-    if (res.success) {
-      data.value = res.result.records;
-      total.value = res.result.total;
-    }
-  });
-}
-function handleTabChange(name) {
-  tabStatus.value = name;
-  searchForm.value.pageNumber = 1;
-  getDataList();
-}
+
 function handleSubmit() {
-  let resultText = result.value == "VIA_AUDITING" ? "通过" : "拒绝";
+  const resultText = result.value === "VIA_AUDITING" ? "通过" : "拒绝";
  Modal.confirm({
    title: "确认审核",
    content: "您确认要审核" + resultText + "么?",
    loading: true,
    onOk: () => {
      auditDistributionCash(form.value.id, { result: result.value }).then((res) => {
+        Modal.remove();
        if (res.success) {
-          Modal.remove();
          Message.success("审核成功");
          drawerVisible.value = false;
          getDataList();
          loadApplyCount();
-        } else {
-          Modal.remove();
        }
      });
    },
  });
 }
+
 function edit(v) {
  drawerTitle.value = "审核";
  handleStatus.value = "edit";
  result.value = "VIA_AUDITING";
  const formData = {};
-  for (let attr in v) {
+  for (const attr in v) {
    formData[attr] = v[attr] === null ? "" : v[attr];
  }
  form.value = formData;
  drawerVisible.value = true;
 }
+
 function view(v) {
  drawerTitle.value = "查看";
  handleStatus.value = "view";
  const formData = {};
-  for (let attr in v) {
+  for (const attr in v) {
    formData[attr] = v[attr] === null ? "" : v[attr];
  }
  form.value = formData;
@@ -307,17 +299,18 @@ function view(v) {
 }

 onMounted(() => {
-  // 处理路由参数，自动跳转到指定标签页
  const queryTabStatus = route.query.tabStatus;
  if (queryTabStatus) {
    tabStatus.value = queryTabStatus;
  }
-  init();
+  getDataList();
+  loadApplyCount();
 });
 </script>
+
 <style lang="scss" scoped>
 .ops a {
-  color: #2d8cf0;
+  color: #409eff;
  cursor: pointer;
  text-decoration: none;
 }
@@ -329,68 +322,58 @@ onMounted(() => {
 .audit-action {
  margin-top: 4px;
 }
-.drawer-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 10px;
-}
-</style>
-
-<style lang="scss">
 .cash-detail-drawer {
-  .el-drawer__header {
-    margin-bottom: 0;
-    padding: 16px 24px;
-    border-bottom: 1px solid #e8eaec;
-  }
-  .el-drawer__body {
-    padding: 20px 24px 0;
-    overflow-x: hidden;
-    overflow-y: auto;
-  }
-  .el-drawer__footer {
-    padding: 12px 24px;
-    border-top: 1px solid #e8eaec;
+  :deep(.el-drawer__body) {
+    padding: 20px;
+    background: #f7f8fa;
  }
 }
-.cash-detail-drawer .detail-body {
-  min-height: 200px;
+.detail-body {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
 }
-.cash-detail-drawer .detail-section-title {
+.detail-section-title {
  font-size: 14px;
  font-weight: 600;
-  color: #17233d;
-  margin: 20px 0 12px;
-  &:first-child { margin-top: 0; }
+  color: #303133;
+  padding-left: 8px;
+  border-left: 3px solid var(--el-color-primary, #409eff);
+  margin-top: 8px;
 }
-.cash-detail-drawer .detail-meta {
+.detail-meta {
+  background: #fff;
+  border-radius: 6px;
+  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
-  background: #f8f8f9;
-  border: 1px solid #e8eaec;
-  border-radius: 8px;
-  padding: 14px 16px;
+  border: 1px solid #ebeef5;
 }
-.cash-detail-drawer .detail-meta-row {
+.detail-meta-row {
  display: flex;
-  align-items: flex-start;
-  font-size: 14px;
-  line-height: 22px;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 13px;
 }
-.cash-detail-drawer .detail-meta-label {
-  color: #808695;
-  min-width: 110px;
-  flex-shrink: 0;
+.detail-meta-label {
+  color: #909399;
 }
-.cash-detail-drawer .detail-meta-value {
-  color: #515a6e;
-  flex: 1;
+.detail-meta-value {
+  color: #303133;
+  font-weight: 500;
  word-break: break-all;
+  max-width: 340px;
+  text-align: right;
 }
-.cash-detail-drawer .detail-meta-price {
-  font-weight: 600;
+.detail-meta-price {
  color: #f56c6c;
-  font-size: 15px;
+  font-size: 16px;
+  font-weight: 600;
+}
+.drawer-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
 }
 </style>
--- a/manager/src/views/distribution/distributionGradeHistory.vue
+++ b/manager/src/views/distribution/distributionGradeHistory.vue
@@ -57,31 +57,26 @@
      </el-form>
    </el-card>

-    <el-card>
-      <el-table v-loading="loading" border :data="data" class="mt_10" style="width: 100%">
-        <el-table-column prop="distributionId" label="分销员ID" min-width="200" class-name="id-column" show-overflow-tooltip />
-        <el-table-column prop="memberName" label="分销员昵称" min-width="120" show-overflow-tooltip />
-        <el-table-column prop="memberMobile" label="分销员手机号" min-width="130" />
-        <el-table-column label="变更前等级" min-width="140" 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="memberName" label="分销员昵称" min-width="120" />
+        <el-table-column prop="distributionMobile" label="手机号" min-width="130" />
+        <el-table-column label="变更前等级" min-width="120">
          <template #default="{ row }">
-            <span v-if="row">{{ formatGrade(row.previousGradeName, row.previousGradeId) }}</span>
+            {{ formatGrade(row.beforeGradeName, row.beforeGradeId) }}
          </template>
        </el-table-column>
-        <el-table-column label="变更后等级" min-width="140" show-overflow-tooltip>
+        <el-table-column label="变更后等级" min-width="120">
          <template #default="{ row }">
-            <span v-if="row">{{ formatGrade(row.gradeName, row.gradeId) }}</span>
+            {{ formatGrade(row.afterGradeName, row.afterGradeId) }}
          </template>
        </el-table-column>
-        <el-table-column label="商品佣金比例" width="130" align="right">
+        <el-table-column label="佣金比例" min-width="110">
          <template #default="{ row }">
-            <span v-if="row">{{ formatRate(row.goodsCommissionRate) }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="邀请佣金比例" width="130" align="right">
-          <template #default="{ row }">
-            <span v-if="row">{{ formatRate(row.inviteCommissionRate) }}</span>
+            {{ formatRate(row.commissionRate) }}
          </template>
        </el-table-column>
+        <el-table-column prop="upgradeRuleDesc" label="升级原因" min-width="200" show-overflow-tooltip />
        <el-table-column prop="upgradeTime" label="升级时间" min-width="170" />
      </el-table>

@@ -93,8 +88,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>
@@ -103,32 +98,42 @@

 <script setup>
 import { ref, onMounted } from "vue";
+import { useTable } from "@/utils/useTable";
 import { getDistributionGradeHistoryPage, getDistributionGrades } from "@/api/distribution";

 defineOptions({ name: "distributionGradeHistory" });

-// 模板 el-form 的 ref（原 ref="searchForm"，与 data 同名会互相覆盖，改名为 searchFormRef）
 const searchFormRef = ref(null);
-
-const loading = ref(false);
-const searchForm = ref({
-  pageNumber: 1,
-  pageSize: 20,
-  memberName: "",
-  distributionMobile: "",
-  gradeId: "",
-  upgradeTimeStart: "",
-  upgradeTimeEnd: "",
-});
 const upgradeTimeRange = ref([]);
 const gradeOptions = ref([]);
-const data = ref([]);
-const total = ref(0);

-onMounted(() => {
-  loadGradeOptions();
-  getDataList();
-});
+const { loading, data, total, searchForm, getDataList, handleSearch, resetSearch } = useTable(
+  getDistributionGradeHistoryPage,
+  {
+    pageSize: 20,
+    form: {
+      memberName: "",
+      distributionMobile: "",
+      gradeId: "",
+    },
+    beforeRequest: (p) => {
+      const params = { ...p };
+      if (upgradeTimeRange.value && upgradeTimeRange.value.length === 2) {
+        params.upgradeTimeStart = `${upgradeTimeRange.value[0]} 00:00:00`;
+        params.upgradeTimeEnd = `${upgradeTimeRange.value[1]} 23:59:59`;
+      } else {
+        delete params.upgradeTimeStart;
+        delete params.upgradeTimeEnd;
+      }
+      return params;
+    },
+  }
+);
+
+function handleReset() {
+  upgradeTimeRange.value = [];
+  resetSearch();
+}

 function loadGradeOptions() {
  getDistributionGrades()
@@ -145,6 +150,7 @@ function loadGradeOptions() {
        }));
    });
 }
+
 function formatGrade(name, gradeId) {
  if (name) {
    return name;
@@ -154,6 +160,7 @@ function formatGrade(name, gradeId) {
  }
  return "-";
 }
+
 function formatRate(value) {
  const num = Number(value);
  if (!Number.isFinite(num)) {
@@ -161,54 +168,10 @@ function formatRate(value) {
  }
  return `${(num * 100).toFixed(2).replace(/\.?0+$/, "") || "0"}%`;
 }
-function applyUpgradeTimeRange() {
-  if (upgradeTimeRange.value && upgradeTimeRange.value.length === 2) {
-    searchForm.value.upgradeTimeStart = `${upgradeTimeRange.value[0]} 00:00:00`;
-    searchForm.value.upgradeTimeEnd = `${upgradeTimeRange.value[1]} 23:59:59`;
-  } else {
-    searchForm.value.upgradeTimeStart = "";
-    searchForm.value.upgradeTimeEnd = "";
-  }
-}
-function handleSearch() {
-  searchForm.value.pageNumber = 1;
-  getDataList();
-}
-function handleReset() {
-  searchForm.value = {
-    pageNumber: 1,
-    pageSize: 20,
-    memberName: "",
-    distributionMobile: "",
-    gradeId: "",
-    upgradeTimeStart: "",
-    upgradeTimeEnd: "",
-  };
-  upgradeTimeRange.value = [];
-  getDataList();
-}
-function changePage() {
-  getDataList();
-}
-function changePageSize() {
-  searchForm.value.pageNumber = 1;
-  getDataList();
-}
-function getDataList() {
-  applyUpgradeTimeRange();
-  loading.value = true;
-  getDistributionGradeHistoryPage(searchForm.value)
-    .then((res) => {
-      loading.value = false;
-      if (res.success) {
-        data.value = res.result.records || [];
-        total.value = res.result.total || 0;
-      }
-    })
-    .catch(() => {
-      loading.value = false;
-    });
-}
+
+onMounted(() => {
+  loadGradeOptions();
+});
 </script>

 <style scoped>
--- a/manager/src/views/goods/goods-info/goods.vue
+++ b/manager/src/views/goods/goods-info/goods.vue
@@ -209,8 +209,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>
@@ -300,6 +300,7 @@

 <script setup>
 import { computed, nextTick, onMounted, reactive, ref } from "vue";
+import { useTable } from "@/utils/useTable";
 import {
  getGoodsListData,
  getGoodsNumerData,
@@ -322,32 +323,50 @@ const auditForm = ref(null);
 const batchAuditFormRef = ref(null);
 const goodsGroupFormRef = ref(null);

-const id = ref(""); //要操作的id
-const loading = ref(true); // 表单加载状态
-const modalVisible = ref(false); // 添加或编辑显示
-const searchForm = reactive({
-  // 搜索框初始化对象
-  pageNumber: 1, // 当前页数
-  pageSize: 20, // 页面大小
-  sort: "create_time", // 默认排序字段
-  order: "desc", // 默认排序方式
-  groupId: "",
-});
-const underForm = reactive({
-  // 下架原因
-  reason: "",
-});
-const goodsAuditForm = reactive({
-  // 商品审核表单
-  auth_flag: 1,
-});
-const auditModalVisible = ref(false); // 审核弹框显示状态
+const id = ref("");
+const modalVisible = ref(false);
+const underForm = reactive({ reason: "" });
+const goodsAuditForm = reactive({ auth_flag: 1 });
+const auditModalVisible = ref(false);
 const auditSubmitLoading = ref(false);
-const currentAuditGoods = ref(null); // 当前审核的商品
-const submitLoading = ref(false); // 添加或编辑提交状态
-const data = ref([]); // 表单数据
-const total = ref(0); // 表单数据总数
+const currentAuditGoods = ref(null);
+const submitLoading = ref(false);
 const currentStatus = ref("ALL");
+
+const { loading, data, total, searchForm, getDataList, handleSearch, resetSearch } = useTable(
+  getGoodsListData,
+  {
+    pageSize: 20,
+    sort: "create_time",
+    order: "desc",
+    immediate: false,
+    form: {
+      goodsName: "",
+      id: "",
+      storeName: "",
+      salesModel: "",
+      goodsType: "",
+      groupId: "",
+    },
+    beforeRequest: (p) => {
+      const params = { ...p };
+      if (currentStatus.value && currentStatus.value !== "ALL") {
+        params.goodsStatus = currentStatus.value;
+      } else {
+        delete params.goodsStatus;
+      }
+      return params;
+    },
+    onSuccess: () => {
+      getNumberData();
+    },
+  }
+);
+
+function handleReset() {
+  currentStatus.value = "ALL";
+  resetSearch();
+}
 const goodsNumerData = ref({});
 const selectedRows = ref([]); // 选中的行数据
 const selectAll = ref(false); // 全选状态
@@ -414,33 +433,9 @@ function init() {
  loadGoodsGroupList();
 }
 // 分页 改变页码
-function changePage(v) {
-  searchForm.pageNumber = v;
-  getDataList();
-}
 // 分页 改变页数
-function changePageSize(v) {
-  searchForm.pageSize = v;
-  getDataList();
-}
 // 搜索
-function handleSearch() {
-  searchForm.pageNumber = 1;
-  searchForm.pageSize = 20;
-  getDataList();
-  getNumberData();
-}
 // 获取数据
-function getDataList() {
-  loading.value = true;
-  getGoodsListData(searchForm).then((res) => {
-    loading.value = false;
-    if (res.success) {
-      data.value = res.result.records;
-      total.value = res.result.total;
-    }
-  });
-}
 function getNumberData() {
  // 创建一个不包含goodsStatus字段的搜索参数
  const { goodsStatus, ...searchParams } = searchForm;
--- a/manager/src/views/goods/goods-info/goodsApply.vue
+++ b/manager/src/views/goods/goods-info/goodsApply.vue
@@ -27,12 +27,13 @@
        </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" :data="data" ref="table" class="mt_10" style="width: 100%">
+    <el-card class="mt_10">
+      <el-table v-loading="loading" :data="data" ref="table" style="width: 100%">
        <el-table-column label="商品名称" min-width="220" class-name="goods-name-column">
          <template #default="{ row }">
            <div v-if="row" class="goods-name-cell">
@@ -60,13 +61,13 @@
        <el-table-column prop="storeName" label="店铺名称" min-width="120" show-overflow-tooltip />
        <el-table-column label="操作" width="200" align="center" fixed="right">
          <template #default="{ row }">
-            <template v-if="row">
+            <div v-if="row">
              <a class="link-text" @click="examine(row, 1)">通过</a>
              <span class="op-split">|</span>
              <a class="link-text" @click="examine(row, 2)">拒绝</a>
              <span class="op-split">|</span>
              <a class="link-text" @click="showDetail(row)">查看</a>
-            </template>
+            </div>
          </template>
        </el-table-column>
      </el-table>
@@ -79,8 +80,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>
@@ -88,29 +89,30 @@
 </template>

 <script setup>
-import { onMounted, ref } from "vue";
+import { ref } from "vue";
+import { useTable } from "@/utils/useTable";
 import { authGoods, getAuthGoodsListData } from "@/api/goods";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { unitPrice, customRouterPush } from "@/utils/filters";

 defineOptions({ name: "goodsApply" });

-// 模板中 el-form 的 ref 与数据 searchForm 同名，避免相互覆盖改名
 const searchFormRef = ref(null);
 const table = ref(null);

-const loading = ref(true);
-const searchForm = ref({
-  pageNumber: 1,
-  pageSize: 20,
-  sort: "create_time",
-  order: "desc",
-});
-const goodsAuditForm = ref({
-  auth_flag: 1,
-});
-const data = ref([]);
-const total = ref(0);
+const { loading, data, total, searchForm, getDataList, handleSearch, resetSearch } = useTable(
+  getAuthGoodsListData,
+  {
+    pageSize: 20,
+    sort: "create_time",
+    order: "desc",
+    form: {
+      goodsName: "",
+      id: "",
+      authFlag: 0,
+    },
+  }
+);

 function authFlagText(v) {
  const map = {
@@ -120,6 +122,7 @@ function authFlagText(v) {
  };
  return map[v] || v || "-";
 }
+
 function authFlagTagType(v) {
  const map = {
    TOBEAUDITED: "warning",
@@ -128,44 +131,14 @@ function authFlagTagType(v) {
  };
  return map[v] || "info";
 }
-function init() {
-  getDataList();
-}
-function changePage(v) {
-  searchForm.value.pageNumber = v;
-  getDataList();
-}
-function changePageSize(v) {
-  searchForm.value.pageSize = v;
-  getDataList();
-}
-function handleSearch() {
-  searchForm.value.pageNumber = 1;
-  searchForm.value.pageSize = 20;
-  getDataList();
-}
-function getDataList() {
-  loading.value = true;
-  searchForm.value.authFlag = 0;
-  getAuthGoodsListData(searchForm.value)
-    .then((res) => {
-      loading.value = false;
-      if (res.success) {
-        data.value = res.result.records;
-        total.value = res.result.total;
-      }
-    })
-    .catch(() => {
-      loading.value = false;
-    });
-}
+
 function examine(v, authFlag) {
-  const examine = authFlag === 1 ? "通过" : "拒绝";
-  goodsAuditForm.value.authFlag = authFlag === 1 ? "PASS" : "REFUSE";
-  ElMessageBox.confirm(`您确认要审核${examine} ${v.goodsName} ?`, "确认审核", { type: "warning" }).then(() => {
+  const examineText = authFlag === 1 ? "通过" : "拒绝";
+  const authStatus = authFlag === 1 ? "PASS" : "REFUSE";
+  ElMessageBox.confirm(`您确认要审核${examineText} ${v.goodsName} ?`, "确认审核", { type: "warning" }).then(() => {
    const formData = new FormData();
    formData.append("goodsIds", v.id);
-    formData.append("authFlag", goodsAuditForm.value.authFlag);
+    formData.append("authFlag", authStatus);
    return authGoods(formData).then((res) => {
      if (res.success) {
        ElMessage.success("审核成功");
@@ -174,16 +147,13 @@ function examine(v, authFlag) {
    });
  }).catch(() => {});
 }
+
 function showDetail(v) {
  customRouterPush({
    name: "goods-detail",
    query: { id: v.id },
  });
 }
-
-onMounted(() => {
-  init();
-});
 </script>

 <style scoped>
--- a/manager/src/views/goods/goods-manage/brand.vue
+++ b/manager/src/views/goods/goods-manage/brand.vue
@@ -19,18 +19,19 @@
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
+          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

-    <el-card>
-      <div class="operation padding-row">
+    <el-card class="mt_10">
+      <div class="operation padding-row" style="margin-bottom: 10px;">
        <el-button type="primary" @click="add">添加</el-button>
      </div>

      <el-table ref="table" v-loading="loading" border :data="data" style="width: 100%">
        <el-table-column prop="name" label="品牌名称" width="200" />
-        <el-table-column label="品牌图标" align="left" >
+        <el-table-column label="品牌图标" align="left">
          <template #default="{ row }">
            <img
              v-if="row"
@@ -74,8 +75,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>
@@ -85,18 +86,17 @@
      :title="modalTitle"
      width="500px"
      :close-on-click-modal="false"
-      destroy-on-close
    >
      <el-form ref="formRef" :model="form" label-width="100px" :rules="formValidate">
        <el-form-item label="品牌名称" prop="name">
-          <el-input v-model="form.name" clearable style="width: 100%" />
+          <el-input v-model="form.name" style="width: 100%" />
        </el-form-item>
        <el-form-item label="品牌图标" prop="logo">
-          <div style="display: flex; align-items: center; gap: 12px">
+          <div style="display: flex; align-items: center; gap: 8px">
            <img
              :src="form.logo || defaultPic"
-              alt="品牌图标"
-              style="width: 80px; height: 60px; object-fit: contain; border: 1px solid #dcdee2; border-radius: 4px; background: #fff"
+              alt=""
+              style="width: 60px; height: 60px; object-fit: contain; border: 1px solid #dcdfe6; border-radius: 4px"
            />
            <el-button type="primary" link @click="openLogoPicker">修改</el-button>
          </div>
@@ -147,7 +147,8 @@
 </template>

 <script setup>
-import { ref, reactive, nextTick, onMounted, getCurrentInstance } from "vue";
+import { ref, reactive, nextTick, getCurrentInstance } from "vue";
+import { useTable } from "@/utils/useTable";
 import {
  getManagerBrandPage,
  addBrand,
@@ -167,7 +168,6 @@ defineOptions({ name: "brand" });

 const { proxy } = getCurrentInstance();

-const loading = ref(true);
 const modalType = ref(0);
 const modalVisible = ref(false);
 const modalTitle = ref("");
@@ -180,12 +180,7 @@ const categoryTreeKey = ref(0);
 const categorySubmitLoading = ref(false);
 const currentBrandId = ref("");
 const selectedCategoryIds = ref([]);
-const searchForm = reactive({
-  pageNumber: 1,
-  pageSize: 20,
-  sort: "create_time",
-  order: "desc",
-});
+
 const form = ref({
  name: "",
  logo: "",
@@ -196,13 +191,21 @@ const formValidate = reactive({
  logo: [regular.REQUIRED, regular.URL200],
 });
 const submitLoading = ref(false);
-const data = ref([]);
-const total = ref(0);

 const searchFormRef = ref(null);
 const formRef = ref(null);
 const ossManageRef = ref(null);

+const { loading, data, total, searchForm, getDataList, handleSearch, resetSearch } = useTable(
+  getManagerBrandPage,
+  {
+    pageSize: 20,
+    sort: "create_time",
+    order: "desc",
+    form: { name: "" },
+  }
+);
+
 function openLogoPicker() {
  picModelFlag.value = true;
  nextTick(() => {
@@ -306,37 +309,6 @@ function delBrand(row) {
  }).catch(() => {});
 }

-function init() {
-  getDataList();
-}
-
-function changePage(v) {
-  searchForm.pageNumber = v;
-  getDataList();
-}
-
-function changePageSize(v) {
-  searchForm.pageSize = v;
-  getDataList();
-}
-
-function handleSearch() {
-  searchForm.pageNumber = 1;
-  searchForm.pageSize = 20;
-  getDataList();
-}
-
-function getDataList() {
-  loading.value = true;
-  getManagerBrandPage(searchForm).then((res) => {
-    loading.value = false;
-    if (res.success) {
-      data.value = res.result.records;
-      total.value = res.result.total;
-    }
-  });
-}
-
 function handleSubmit() {
  formRef.value.validate((valid) => {
    if (valid) {
@@ -382,16 +354,19 @@ function edit(v) {
      v[attr] = "";
    }
  }
-  const str = JSON.stringify(v);
-  const data = JSON.parse(str);
-  form.value = data;
+  form.value = JSON.parse(JSON.stringify(v));
  modalVisible.value = true;
 }
-
-onMounted(() => {
-  init();
-});
 </script>

 <style lang="scss" scoped>
+.link-text {
+  color: #409eff;
+  cursor: pointer;
+  text-decoration: none;
+}
+.op-split {
+  margin: 0 8px;
+  color: #dcdee2;
+}
 </style>
--- a/manager/src/views/goods/goods-review/index.vue
+++ b/manager/src/views/goods/goods-review/index.vue
@@ -27,12 +27,13 @@
        </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 ref="table" v-loading="loading" border :data="data" class="mt_10" style="width: 100%">
+    <el-card class="mt_10">
+      <el-table ref="table" v-loading="loading" border :data="data" style="width: 100%">
        <el-table-column prop="goodsName" label="商品名称" min-width="120" show-overflow-tooltip />
        <el-table-column prop="memberName" label="客户名称" min-width="120" show-overflow-tooltip />
        <el-table-column prop="content" label="评论内容" min-width="220" show-overflow-tooltip />
@@ -43,13 +44,13 @@
            </el-tag>
          </template>
        </el-table-column>
-        <el-table-column label="评价" width="90">
+        <el-table-column label="评价" width="90" align="center">
          <template #default="{ row }">
            <el-tag v-if="row" :type="gradeTagType(row.grade)">{{ gradeText(row.grade) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="评价时间" width="170" />
-        <el-table-column label="页面展示" width="100">
+        <el-table-column label="页面展示" width="100" align="center">
          <template #default="{ row }">
            <el-switch
              v-if="row"
@@ -84,8 +85,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>
@@ -112,18 +113,10 @@
          </div>
        </div>
        <div class="right-container">
-          <div class="border-b">{{ infoData.goodsName }}</div>
-          <div class="border-b">
-            <div class="div-height">店铺名称：{{ infoData.storeName }}</div>
-            <div class="div-height">订单号：{{ infoData.orderNo }}</div>
-          </div>
          <div class="border-b">
            <div class="review-item">
-              <el-avatar v-if="infoData.memberProfile" :src="infoData.memberProfile" :size="40" />
-              <div class="review-meta">
-                <div class="review-name">{{ infoData.memberName }}</div>
-                <div class="review-content">{{ infoData.content }}</div>
-              </div>
+              <div class="review-name">{{ infoData.memberName }}：</div>
+              <div class="review-content">{{ infoData.content }}</div>
            </div>
            <div class="score-content">
              <span>物流评分：{{ infoData.deliveryScore }}</span>
@@ -171,43 +164,49 @@
 </template>

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

 defineOptions({ name: "goods-review" });

-// 模板中的 el-form ref（原 ref="searchForm"，为避免与数据 searchForm 同名互相覆盖而改名），script 内未使用
 const searchFormRef = ref(null);
+const table = ref(null);

 const infoData = ref({});
 const infoFlag = ref(false);
 const infoTitle = ref("");
 const currentReviewId = ref("");
 const detailStatusReady = ref(false);
-const loading = ref(true);
-const searchForm = ref({
-  pageNumber: 1,
-  pageSize: 20,
-  goodsName: "",
-  sort: "createTime",
-  order: "desc",
-  startDate: "",
-  endDate: "",
-});
-const data = ref([]);
-const total = ref(0);
+
+const { loading, data, total, searchForm, getDataList, handleSearch, resetSearch } = useTable(
+  API_Member.getMemberReview,
+  {
+    pageSize: 20,
+    sort: "createTime",
+    order: "desc",
+    form: {
+      goodsName: "",
+      memberName: "",
+      startDate: "",
+      endDate: "",
+    },
+  }
+);

 function gradeTagType(grade) {
  if (grade === "GOOD") return "success";
  if (grade === "MODERATE") return "warning";
  return "danger";
 }
+
 function gradeText(grade) {
  if (grade === "GOOD") return "好评";
  if (grade === "MODERATE") return "中评";
  return "差评";
 }
+
 function changeSwitchView(status) {
  if (!detailStatusReady.value || !currentReviewId.value) {
    return;
@@ -219,22 +218,7 @@ function changeSwitchView(status) {
    }
  });
 }
-function init() {
-  getDataList();
-}
-function changePage(v) {
-  searchForm.value.pageNumber = v;
-  getDataList();
-}
-function changePageSize(v) {
-  searchForm.value.pageSize = v;
-  getDataList();
-}
-function handleSearch() {
-  searchForm.value.pageNumber = 1;
-  searchForm.value.pageSize = 20;
-  getDataList();
-}
+
 function changeSwitch(row) {
  if (!row || !row.id) {
    return;
@@ -245,6 +229,7 @@ function changeSwitch(row) {
    }
  });
 }
+
 function updateTop(v) {
  const top = !v.top;
  API_Member.updateMemberReviewTop(v.id, { top }).then((res) => {
@@ -259,23 +244,11 @@ function updateTop(v) {
        };
      });
      ElMessage.success(top ? "置顶成功!" : "取消置顶成功!");
-      init();
+      getDataList();
    }
  });
 }
-function getDataList() {
-  loading.value = true;
-  API_Member.getMemberReview(searchForm.value)
-    .then((res) => {
-      if (res.success) {
-        data.value = res.result.records;
-        total.value = res.result.total;
-      }
-    })
-    .finally(() => {
-      loading.value = false;
-    });
-}
+
 function info(v) {
  currentReviewId.value = v.id;
  detailStatusReady.value = false;
@@ -291,23 +264,21 @@ function info(v) {
    }
  });
 }
+
 function onInfoDialogClosed() {
  detailStatusReady.value = false;
  currentReviewId.value = "";
  infoData.value = {};
 }
+
 function remove(v) {
  ElMessageBox.confirm("您确认要删除客户" + v.memberName + "的评论?", "确认删除", { type: "warning" }).then(() => {
    return API_Member.delMemberReview(v.id).then(() => {
      ElMessage.success("修改成功");
-      init();
+      getDataList();
    });
  }).catch(() => {});
 }
-
-onMounted(() => {
-  init();
-});
 </script>

 <style lang="scss" scoped>
@@ -356,9 +327,6 @@ label {
  position: relative;
  margin-top: 12px;
 }
-.div-height {
-  line-height: 25px;
-}
 .score-content {
  margin: 5px 0;
  span {
@@ -378,7 +346,7 @@ label {
  margin-top: 4px;
 }
 .ops a {
-  color: #2d8cf0;
+  color: #409eff;
  cursor: pointer;
  text-decoration: none;
 }