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

manager/src/views/procurement/damage-report/detail.vue

@@ -40,28 +40,30 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, ref } from "vue";
+import { useRoute } from "vue-router";
 import { getDamageReportDetail, getDamageReportItems } from "@/api/procurement";
 import { damageStatusText, damageStatusTag, formatMoney } from "../constants";
 
-export default {
-  name: "manager-damage-report-detail",
-  data() {
-    return { detail: {}, items: [] };
-  },
-  mounted() {
-    const id = this.$route.query.id;
-    if (id) {
-      getDamageReportDetail(id).then((res) => {
-        if (res.success) this.detail = res.result || {};
-      });
-      getDamageReportItems(id).then((res) => {
-        if (res.success) this.items = res.result || [];
-      });
-    }
-  },
-  methods: { damageStatusText, damageStatusTag, formatMoney },
-};
+defineOptions({ name: "manager-damage-report-detail" });
+
+const route = useRoute();
+
+const detail = ref({});
+const items = ref([]);
+
+onMounted(() => {
+  const id = route.query.id;
+  if (id) {
+    getDamageReportDetail(id).then((res) => {
+      if (res.success) detail.value = res.result || {};
+    });
+    getDamageReportItems(id).then((res) => {
+      if (res.success) items.value = res.result || [];
+    });
+  }
+});
 </script>
 
 <style scoped>

manager/src/views/procurement/damage-report/list.vue

@@ -48,48 +48,45 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, reactive, onMounted } from "vue";
+import { useRouter } from "vue-router";
 import { getDamageReportPage } from "@/api/procurement";
 import { DAMAGE_STATUS, damageStatusText, damageStatusTag, formatMoney } from "../constants";
 
-export default {
-  name: "manager-damage-report-list",
-  data() {
-    return {
-      DAMAGE_STATUS,
-      loading: false,
-      data: [],
-      total: 0,
-      searchForm: { pageNumber: 1, pageSize: 10, storeId: "", status: "" },
-    };
-  },
-  mounted() {
-    this.getDataList();
-  },
-  methods: {
-    damageStatusText,
-    damageStatusTag,
-    formatMoney,
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.getDataList();
-    },
-    getDataList() {
-      this.loading = true;
-      getDamageReportPage(this.searchForm)
-        .then((res) => {
-          if (res.success) {
-            this.data = res.result.records || [];
-            this.total = res.result.total || 0;
-          }
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-    goDetail(row) {
-      this.$router.push({ name: "manager-damage-report-detail", query: { id: row.id } });
-    },
-  },
-};
+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: "" });
+
+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 } });
+}
 </script>

manager/src/views/procurement/inbound/detail.vue

@@ -27,36 +27,37 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, onMounted, ref } from "vue";
+import { useRoute } from "vue-router";
 import { getProcurementInboundDetail, getProcurementInboundItems } from "@/api/procurement";
 import { formatMoney } from "../constants";
 
-export default {
-  name: "manager-procurement-inbound-detail",
-  data() {
-    return { detail: {}, items: [] };
-  },
-  computed: {
-    totalInboundQuantity() {
-      return (this.items || []).reduce(
-        (sum, item) => sum + (Number(item.inboundQuantity) || 0),
-        0
-      );
-    },
-  },
-  mounted() {
-    const id = this.$route.query.id;
-    if (id) {
-      getProcurementInboundDetail(id).then((res) => {
-        if (res.success) this.detail = res.result || {};
-      });
-      getProcurementInboundItems(id).then((res) => {
-        if (res.success) this.items = res.result || [];
-      });
-    }
-  },
-  methods: { formatMoney },
-};
+defineOptions({ name: "manager-procurement-inbound-detail" });
+
+const route = useRoute();
+
+const detail = ref({});
+const items = ref([]);
+
+const totalInboundQuantity = computed(() => {
+  return (items.value || []).reduce(
+    (sum, item) => sum + (Number(item.inboundQuantity) || 0),
+    0
+  );
+});
+
+onMounted(() => {
+  const id = route.query.id;
+  if (id) {
+    getProcurementInboundDetail(id).then((res) => {
+      if (res.success) detail.value = res.result || {};
+    });
+    getProcurementInboundItems(id).then((res) => {
+      if (res.success) items.value = res.result || [];
+    });
+  }
+});
 </script>
 
 <style scoped>

manager/src/views/procurement/inbound/list.vue

@@ -39,45 +39,43 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
+import { useRouter } from "vue-router";
 import { getProcurementInboundPage } from "@/api/procurement";
 import { formatMoney } from "../constants";
 
-export default {
-  name: "manager-procurement-inbound-list",
-  data() {
-    return {
-      loading: false,
-      data: [],
-      total: 0,
-      searchForm: { pageNumber: 1, pageSize: 10, inboundSn: "" },
-    };
-  },
-  mounted() {
-    this.getDataList();
-  },
-  methods: {
-    formatMoney,
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.getDataList();
-    },
-    getDataList() {
-      this.loading = true;
-      getProcurementInboundPage(this.searchForm)
-        .then((res) => {
-          if (res.success) {
-            this.data = res.result.records || [];
-            this.total = res.result.total || 0;
-          }
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-    goDetail(row) {
-      this.$router.push({ name: "manager-procurement-inbound-detail", query: { id: row.id } });
-    },
-  },
-};
+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: "" });
+
+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 } });
+}
 </script>

manager/src/views/procurement/inventory-count/detail.vue

@@ -35,56 +35,55 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
+import { useRoute } from "vue-router";
 import { getInventoryCountItemsPage, exportInventoryCountItems } from "@/api/procurement";
 import { downloadBlob } from "@/utils/downloadBlob";
 
-export default {
-  name: "manager-inventory-count-detail",
-  data() {
-    return {
-      loading: false,
-      exporting: false,
-      data: [],
-      total: 0,
-      sn: "",
-      searchForm: { pageNumber: 1, pageSize: 20 },
-    };
-  },
-  mounted() {
-    this.sn = this.$route.query.sn || "";
-    this.getDataList();
-  },
-  methods: {
-    getDataList() {
-      const id = this.$route.query.id;
-      if (!id) return;
-      this.loading = true;
-      getInventoryCountItemsPage(id, this.searchForm)
-        .then((res) => {
-          if (res.success) {
-            this.data = res.result.records || [];
-            this.total = res.result.total || 0;
-          }
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-    handleExport() {
-      const id = this.$route.query.id;
-      if (!id) return;
-      this.exporting = true;
-      exportInventoryCountItems(id)
-        .then((blob) => {
-          downloadBlob(blob, `盘点单_${this.sn || id}.xlsx`);
-        })
-        .finally(() => {
-          this.exporting = false;
-        });
-    },
-  },
-};
+defineOptions({ name: "manager-inventory-count-detail" });
+
+const route = useRoute();
+
+const loading = ref(false);
+const exporting = ref(false);
+const data = ref([]);
+const total = ref(0);
+const sn = ref("");
+const searchForm = reactive({ pageNumber: 1, pageSize: 20 });
+
+onMounted(() => {
+  sn.value = route.query.sn || "";
+  getDataList();
+});
+
+function getDataList() {
+  const id = route.query.id;
+  if (!id) return;
+  loading.value = true;
+  getInventoryCountItemsPage(id, searchForm)
+    .then((res) => {
+      if (res.success) {
+        data.value = res.result.records || [];
+        total.value = res.result.total || 0;
+      }
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+function handleExport() {
+  const id = route.query.id;
+  if (!id) return;
+  exporting.value = true;
+  exportInventoryCountItems(id)
+    .then((blob) => {
+      downloadBlob(blob, `盘点单_${sn.value || id}.xlsx`);
+    })
+    .finally(() => {
+      exporting.value = false;
+    });
+}
 </script>
 
 <style scoped>

manager/src/views/procurement/inventory-count/list.vue

@@ -28,39 +28,38 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, ref } from "vue";
+import { useRouter } from "vue-router";
 import { getInventoryCountPage } from "@/api/procurement";
 
-export default {
-  name: "manager-inventory-count-list",
-  data() {
-    return {
-      loading: false,
-      data: [],
-      total: 0,
-      searchForm: { pageNumber: 1, pageSize: 10 },
-    };
-  },
-  mounted() {
-    this.getDataList();
-  },
-  methods: {
-    getDataList() {
-      this.loading = true;
-      getInventoryCountPage(this.searchForm)
-        .then((res) => {
-          if (res.success) {
-            this.data = res.result.records || [];
-            this.total = res.result.total || 0;
-          }
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-    goDetail(row) {
-      this.$router.push({ name: "manager-inventory-count-detail", query: { id: row.id, sn: row.sn } });
-    },
-  },
-};
+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 });
+
+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 } });
+}
 </script>

manager/src/views/procurement/purchase-order/detail.vue

@@ -41,36 +41,37 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { computed, onMounted, ref } from "vue";
+import { useRoute } from "vue-router";
 import { getProcurementOrderDetail, getStockReasonPage } from "@/api/procurement";
 import { procurementStatusText, procurementStatusTag, formatMoney } from "../constants";
 
-export default {
-  name: "manager-procurement-order-detail",
-  data() {
-    return { detail: {}, reasonOptions: [] };
-  },
-  computed: {
-    stockReasonText() {
-      const reason = this.reasonOptions.find((item) => item.id === this.detail.stockReasonId);
-      return reason ? reason.reason : "-";
-    },
-  },
-  mounted() {
-    getStockReasonPage({ category: "INBOUND", pageNumber: 1, pageSize: 100 }).then((res) => {
-      if (res.success) {
-        this.reasonOptions = res.result.records || [];
-      }
-    });
-    const id = this.$route.query.id;
-    if (id) {
-      getProcurementOrderDetail(id).then((res) => {
-        if (res.success) this.detail = res.result || {};
-      });
+defineOptions({ name: "manager-procurement-order-detail" });
+
+const route = useRoute();
+
+const detail = ref({});
+const reasonOptions = ref([]);
+
+const stockReasonText = computed(() => {
+  const reason = reasonOptions.value.find((item) => item.id === detail.value.stockReasonId);
+  return reason ? reason.reason : "-";
+});
+
+onMounted(() => {
+  getStockReasonPage({ category: "INBOUND", pageNumber: 1, pageSize: 100 }).then((res) => {
+    if (res.success) {
+      reasonOptions.value = res.result.records || [];
     }
-  },
-  methods: { procurementStatusText, procurementStatusTag, formatMoney },
-};
+  });
+  const id = route.query.id;
+  if (id) {
+    getProcurementOrderDetail(id).then((res) => {
+      if (res.success) detail.value = res.result || {};
+    });
+  }
+});
 </script>
 
 <style scoped>

manager/src/views/procurement/purchase-order/list.vue

@@ -53,52 +53,48 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { onMounted, reactive, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import { getProcurementOrderPage } from "@/api/procurement";
 import { PROCUREMENT_STATUS, procurementStatusText, procurementStatusTag, formatMoney } from "../constants";
 
-export default {
-  name: "manager-procurement-order-list",
-  data() {
-    return {
-      PROCUREMENT_STATUS,
-      loading: false,
-      data: [],
-      total: 0,
-      searchForm: { pageNumber: 1, pageSize: 10, orderSn: "", goodsName: "", status: "" },
-    };
-  },
-  mounted() {
-    const status = this.$route.query.status;
-    if (status) {
-      this.searchForm.status = status;
-    }
-    this.getDataList();
-  },
-  methods: {
-    procurementStatusText,
-    procurementStatusTag,
-    formatMoney,
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.getDataList();
-    },
-    getDataList() {
-      this.loading = true;
-      getProcurementOrderPage(this.searchForm)
-        .then((res) => {
-          if (res.success) {
-            this.data = res.result.records || [];
-            this.total = res.result.total || 0;
-          }
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-    goDetail(row) {
-      this.$router.push({ name: "manager-procurement-order-detail", query: { id: row.id } });
-    },
-  },
-};
+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: "" });
+
+onMounted(() => {
+  const status = route.query.status;
+  if (status) {
+    searchForm.status = status;
+  }
+  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 } });
+}
 </script>

manager/src/views/procurement/reason/reasonManage.vue

@@ -67,7 +67,8 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, reactive, onMounted } from "vue";
 import {
   getStockReasonPage,
   addStockReason,
@@ -75,90 +76,92 @@ import {
   deleteStockReason,
 } from "@/api/procurement";
 import { stockReasonCategoryText } from "../constants";
+import { Message, Modal } from "@/utils/message";
 
-export default {
-  name: "manager-stock-reason-manage",
-  data() {
-    return {
-      loading: false,
-      submitLoading: false,
-      modalVisible: false,
-      modalTitle: "添加原因",
-      data: [],
-      total: 0,
-      searchForm: { pageNumber: 1, pageSize: 10, reason: "", category: "" },
-      form: { id: "", reason: "", category: "INBOUND" },
-    };
-  },
-  mounted() {
-    this.getDataList();
-  },
-  methods: {
-    stockReasonCategoryText,
-    handleSearch() {
-      this.searchForm.pageNumber = 1;
-      this.getDataList();
-    },
-    getDataList() {
-      this.loading = true;
-      getStockReasonPage(this.searchForm)
-        .then((res) => {
-          if (res.success) {
-            this.data = res.result.records || [];
-            this.total = res.result.total || 0;
-          }
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-    openAdd() {
-      this.modalTitle = "添加原因";
-      this.form = { id: "", reason: "", category: "INBOUND" };
-      this.modalVisible = true;
-    },
-    openEdit(row) {
-      this.modalTitle = "编辑原因";
-      this.form = { id: row.id, reason: row.reason, category: row.category };
-      this.modalVisible = true;
-    },
-    handleSubmit() {
-      if (!this.form.reason || !this.form.category) {
-        this.$Message.warning("请填写完整信息");
-        return;
+defineOptions({ name: "manager-stock-reason-manage" });
+
+const loading = ref(false);
+const submitLoading = ref(false);
+const modalVisible = ref(false);
+const modalTitle = ref("添加原因");
+const data = ref([]);
+const total = ref(0);
+const searchForm = reactive({ pageNumber: 1, pageSize: 10, reason: "", category: "" });
+const form = ref({ id: "", reason: "", category: "INBOUND" });
+
+const formRef = ref(null);
+
+function handleSearch() {
+  searchForm.pageNumber = 1;
+  getDataList();
+}
+
+function getDataList() {
+  loading.value = true;
+  getStockReasonPage(searchForm)
+    .then((res) => {
+      if (res.success) {
+        data.value = res.result.records || [];
+        total.value = res.result.total || 0;
       }
-      this.submitLoading = true;
-      const req = this.form.id
-        ? updateStockReason(this.form)
-        : addStockReason({ reason: this.form.reason, category: this.form.category });
-      req
-        .then((res) => {
-          if (res.success) {
-            this.$Message.success("保存成功");
-            this.modalVisible = false;
-            this.getDataList();
-          }
-        })
-        .finally(() => {
-          this.submitLoading = false;
-        });
-    },
-    handleDelete(row) {
-      this.$Modal.confirm({
-        title: "删除确认",
-        content: `确认删除原因「${row.reason}」？`,
-        onOk: () => {
-          deleteStockReason(row.id).then((res) => {
-            if (res.success) {
-              this.$Message.success("删除成功");
-              this.getDataList();
-            }
-          });
-        },
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+
+function openAdd() {
+  modalTitle.value = "添加原因";
+  form.value = { id: "", reason: "", category: "INBOUND" };
+  modalVisible.value = true;
+}
+
+function openEdit(row) {
+  modalTitle.value = "编辑原因";
+  form.value = { id: row.id, reason: row.reason, category: row.category };
+  modalVisible.value = true;
+}
+
+function handleSubmit() {
+  if (!form.value.reason || !form.value.category) {
+    Message.warning("请填写完整信息");
+    return;
+  }
+  submitLoading.value = true;
+  const req = form.value.id
+    ? updateStockReason(form.value)
+    : addStockReason({ reason: form.value.reason, category: form.value.category });
+  req
+    .then((res) => {
+      if (res.success) {
+        Message.success("保存成功");
+        modalVisible.value = false;
+        getDataList();
+      }
+    })
+    .finally(() => {
+      submitLoading.value = false;
+    });
+}
+
+function handleDelete(row) {
+  Modal.confirm({
+    title: "删除确认",
+    content: `确认删除原因「${row.reason}」？`,
+    onOk: () => {
+      deleteStockReason(row.id).then((res) => {
+        if (res.success) {
+          Message.success("删除成功");
+          getDataList();
+        }
       });
     },
-  },
-};
+  });
+}
+
+onMounted(() => {
+  getDataList();
+});
 </script>
 
 <style scoped>