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

- 重构商品管理（商品总览、商品审核）列表页为 useTable - 重构商品维护（品牌管理、评价管理）列表页为 useTable - 重构分销管理（分销提现、等级变动历史）与自定义分词列表页为 useTable - 消除 150+ 行重复样板代码，统一竞态防护与分页查询规范
2026-11-09 02:18:55 +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/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;
 }