refactor: 四端完成 Options API → script setup + vuex → pinia 迁移

- buyer(95) / seller(169) / im(53) / manager(280) 共 597 个组件全部从 Options API 转换为 <script setup> - 四端 vuex 全部移除，状态管理统一迁移至 pinia 4（stores/ 目录） - util.js 等基础设施去除 vm 首参依赖；全局属性（$Message/$filters 等）在 script 内改为具名导入 - 被外部 ref 访问的公共组件均已补齐 defineExpose（清单见各端 MIGRATION-VUE3.md） - 各端 eslint 启用 vue/component-api-style 防止新代码回退 Options API - 四端 yarn build 全部通过；迁移约定与注意事项已更新至各端 MIGRATION-VUE3.md
2026-11-13 04:18:55 +08:00 · 2026-10-13 07:06:59 +08:00
parent 870bacdd8c
commit 88fc1b0b2a
674 changed files with 71220 additions and 69943 deletions
--- a/manager/src/views/goods/group/index.vue
+++ b/manager/src/views/goods/group/index.vue
@@ -36,7 +36,7 @@
    </el-card>

    <el-dialog v-model="addFlag" title="添加商品分组" width="500px" :close-on-click-modal="false" destroy-on-close>
-      <el-form ref="addForm" :model="formAdd" :rules="rulesAdd" label-width="90px">
+      <el-form ref="addFormRef" :model="formAdd" :rules="rulesAdd" label-width="90px">
        <el-form-item label="分组名称" prop="groupName" style="width: 90%">
          <el-input v-model="formAdd.groupName" maxlength="30" placeholder="请输入分组名称" />
        </el-form-item>
@@ -51,7 +51,7 @@
    </el-dialog>

    <el-dialog v-model="editFlag" title="编辑商品分组" width="500px" :close-on-click-modal="false" destroy-on-close>
-      <el-form ref="editForm" :model="formEdit" :rules="rulesEdit" label-width="90px">
+      <el-form ref="editFormRef" :model="formEdit" :rules="rulesEdit" label-width="90px">
        <el-input v-model="formEdit.id" style="display: none" />
        <el-form-item label="分组名称" prop="groupName" style="width: 90%">
          <el-input v-model="formEdit.groupName" maxlength="30" placeholder="请输入分组名称" />
@@ -68,166 +68,173 @@
  </div>
 </template>

-<script>
+<script setup>
+import { ref, reactive, nextTick, onMounted } from "vue";
 import * as API_Goods from "@/api/goods.js";
 import { ElMessage, ElMessageBox } from "element-plus";

-export default {
-  name: "goodsGroup",
-  data() {
-    return {
-      loading: true,
-      searchForm: {
-        pageNumber: 1,
-        pageSize: 20,
-      },
-      data: [],
-      total: 0,
-      addFlag: false,
-      editFlag: false,
-      submitAddLoading: false,
-      submitEditLoading: false,
-      formAdd: {
-        groupName: "",
-        description: "",
-      },
-      formEdit: {
-        id: "",
-        groupName: "",
-        description: "",
-      },
-      rulesAdd: {
-        groupName: [{ required: true, message: "请输入分组名称", trigger: "blur" }],
-      },
-      rulesEdit: {
-        groupName: [{ required: true, message: "请输入分组名称", trigger: "blur" }],
-      },
-    };
-  },
-  methods: {
-    init() {
-      this.getData();
-    },
-    changePage(v) {
-      this.searchForm.pageNumber = v;
-      this.getData();
-    },
-    changePageSize(v) {
-      this.searchForm.pageNumber = 1;
-      this.searchForm.pageSize = v;
-      this.getData();
-    },
-    getData() {
-      this.loading = true;
-      API_Goods.getGoodsGroupByPage(this.searchForm)
-        .then((res) => {
-          this.loading = false;
-          if (res && res.success && res.result) {
-            this.data = res.result.records || [];
-            this.total = res.result.total || 0;
-          } else if (res && res.message) {
-            ElMessage.error(res.message);
-          }
-        })
-        .catch(() => {
-          this.loading = false;
-          ElMessage.error("加载商品分组失败");
-        });
-    },
-    openAdd() {
-      this.addFlag = true;
-      this.$nextTick(() => {
-        if (this.$refs.addForm) this.$refs.addForm.resetFields();
-        this.formAdd = { groupName: "", description: "" };
+defineOptions({ name: "goodsGroup" });
+
+const loading = ref(true);
+const searchForm = reactive({
+  pageNumber: 1,
+  pageSize: 20,
+});
+const data = ref([]);
+const total = ref(0);
+const addFlag = ref(false);
+const editFlag = ref(false);
+const submitAddLoading = ref(false);
+const submitEditLoading = ref(false);
+const formAdd = ref({
+  groupName: "",
+  description: "",
+});
+const formEdit = ref({
+  id: "",
+  groupName: "",
+  description: "",
+});
+const rulesAdd = reactive({
+  groupName: [{ required: true, message: "请输入分组名称", trigger: "blur" }],
+});
+const rulesEdit = reactive({
+  groupName: [{ required: true, message: "请输入分组名称", trigger: "blur" }],
+});
+
+const addFormRef = ref(null);
+const editFormRef = ref(null);
+
+function init() {
+  getData();
+}
+
+function changePage(v) {
+  searchForm.pageNumber = v;
+  getData();
+}
+
+function changePageSize(v) {
+  searchForm.pageNumber = 1;
+  searchForm.pageSize = v;
+  getData();
+}
+
+function getData() {
+  loading.value = true;
+  API_Goods.getGoodsGroupByPage(searchForm)
+    .then((res) => {
+      loading.value = false;
+      if (res && res.success && res.result) {
+        data.value = res.result.records || [];
+        total.value = res.result.total || 0;
+      } else if (res && res.message) {
+        ElMessage.error(res.message);
+      }
+    })
+    .catch(() => {
+      loading.value = false;
+      ElMessage.error("加载商品分组失败");
+    });
+}
+
+function openAdd() {
+  addFlag.value = true;
+  nextTick(() => {
+    if (addFormRef.value) addFormRef.value.resetFields();
+    formAdd.value = { groupName: "", description: "" };
+  });
+}
+
+function submitAdd() {
+  addFormRef.value.validate((valid) => {
+    if (!valid) return;
+    submitAddLoading.value = true;
+    API_Goods.addGoodsGroup(formAdd.value)
+      .then((res) => {
+        submitAddLoading.value = false;
+        if (res && res.success) {
+          ElMessage.success("添加成功");
+          addFlag.value = false;
+          getData();
+        } else if (res && res.message) {
+          ElMessage.error(res.message);
+        }
+      })
+      .catch(() => {
+        submitAddLoading.value = false;
+        ElMessage.error("添加失败，请检查权限或后端接口");
      });
-    },
-    submitAdd() {
-      this.$refs.addForm.validate((valid) => {
-        if (!valid) return;
-        this.submitAddLoading = true;
-        API_Goods.addGoodsGroup(this.formAdd)
-          .then((res) => {
-            this.submitAddLoading = false;
-            if (res && res.success) {
-              ElMessage.success("添加成功");
-              this.addFlag = false;
-              this.getData();
-            } else if (res && res.message) {
-              ElMessage.error(res.message);
-            }
-          })
-          .catch(() => {
-            this.submitAddLoading = false;
-            ElMessage.error("添加失败，请检查权限或后端接口");
-          });
+  });
+}
+
+function openEdit(row) {
+  editFlag.value = true;
+  submitEditLoading.value = false;
+  API_Goods.getGoodsGroup(row.id)
+    .then((res) => {
+      if (res && res.success && res.result) {
+        formEdit.value = {
+          id: res.result.id,
+          groupName: res.result.groupName || "",
+          description: res.result.description || "",
+        };
+      } else {
+        formEdit.value = {
+          id: row.id,
+          groupName: row.groupName || "",
+          description: row.description || "",
+        };
+      }
+    })
+    .catch(() => {
+      ElMessage.error("获取分组详情失败");
+    });
+}
+
+function submitEdit() {
+  editFormRef.value.validate((valid) => {
+    if (!valid) return;
+    submitEditLoading.value = true;
+    const { id, groupName, description } = formEdit.value;
+    API_Goods.updateGoodsGroup(id, { id, groupName, description })
+      .then((res) => {
+        submitEditLoading.value = false;
+        if (res && res.success) {
+          ElMessage.success("修改成功");
+          editFlag.value = false;
+          getData();
+        } else if (res && res.message) {
+          ElMessage.error(res.message);
+        }
+      })
+      .catch(() => {
+        submitEditLoading.value = false;
+        ElMessage.error("修改失败，请检查权限或后端接口");
      });
-    },
-    openEdit(row) {
-      this.editFlag = true;
-      this.submitEditLoading = false;
-      API_Goods.getGoodsGroup(row.id)
-        .then((res) => {
-          if (res && res.success && res.result) {
-            this.formEdit = {
-              id: res.result.id,
-              groupName: res.result.groupName || "",
-              description: res.result.description || "",
-            };
-          } else {
-            this.formEdit = {
-              id: row.id,
-              groupName: row.groupName || "",
-              description: row.description || "",
-            };
-          }
-        })
-        .catch(() => {
-          ElMessage.error("获取分组详情失败");
-        });
-    },
-    submitEdit() {
-      this.$refs.editForm.validate((valid) => {
-        if (!valid) return;
-        this.submitEditLoading = true;
-        const { id, groupName, description } = this.formEdit;
-        API_Goods.updateGoodsGroup(id, { id, groupName, description })
-          .then((res) => {
-            this.submitEditLoading = false;
-            if (res && res.success) {
-              ElMessage.success("修改成功");
-              this.editFlag = false;
-              this.getData();
-            } else if (res && res.message) {
-              ElMessage.error(res.message);
-            }
-          })
-          .catch(() => {
-            this.submitEditLoading = false;
-            ElMessage.error("修改失败，请检查权限或后端接口");
-          });
+  });
+}
+
+function remove(row) {
+  ElMessageBox.confirm("确定删除该分组？", "提示", { type: "warning" }).then(() => {
+    return API_Goods.deleteGoodsGroup(row.id)
+      .then((res) => {
+        if (res && res.success) {
+          ElMessage.success("删除成功");
+          getData();
+        } else if (res && res.message) {
+          ElMessage.error(res.message);
+        }
+      })
+      .catch(() => {
+        ElMessage.error("删除失败，请检查权限或后端接口");
      });
-    },
-    remove(row) {
-      ElMessageBox.confirm("确定删除该分组？", "提示", { type: "warning" }).then(() => {
-        return API_Goods.deleteGoodsGroup(row.id)
-          .then((res) => {
-            if (res && res.success) {
-              ElMessage.success("删除成功");
-              this.getData();
-            } else if (res && res.message) {
-              ElMessage.error(res.message);
-            }
-          })
-          .catch(() => {
-            ElMessage.error("删除失败，请检查权限或后端接口");
-          });
-      }).catch(() => {});
-    },
-  },
-  mounted() {
-    this.init();
-  },
-};
+  }).catch(() => {});
+}
+
+onMounted(() => {
+  init();
+});
 </script>

 <style scoped>