refactor(订单明细表格): 将订单明细逻辑提取为mixin以提高复用性

src/components/order-item-table/index.vue

@@ -62,63 +62,11 @@
 </template>
 
 <script>
-import { getList } from '@/api/order/order-item'
-import { getOrderItemStatusLabel, getOrderItemStatusTagType } from '@/constants'
+import orderItemTableMixin from '@/mixins/order/orderItemTableMixin'
 
 export default {
   name: 'OrderItemTable',
-  props: {
-    orderId: {
-      type: [String, Number],
-      required: true
-    }
-  },
-  data() {
-    return {
-      itemData: [],
-      loading: false
-    }
-  },
-
-  watch: {
-    orderId: {
-      handler(newVal) {
-        if (newVal) {
-          this.loadItemData()
-        }
-      },
-      immediate: true
-    }
-  },
-  methods: {
-    async loadItemData() {
-      if (!this.orderId) return
-      
-      this.loading = true
-      try {
-        const response = await getList(1, 1000, { orderId: this.orderId })
-        this.itemData = response.data.data.records || []
-      } catch (error) {
-        console.error('加载订单明细失败:', error)
-        this.$message.error('加载订单明细失败')
-        this.itemData = []
-      } finally {
-        this.loading = false
-      }
-    },
-    getStatusText(status) {
-      return getOrderItemStatusLabel(status)
-    },
-    getStatusType(status) {
-      return getOrderItemStatusTagType(status)
-    }
-  },
-  filters: {
-    numberFormat(value, precision = 2) {
-      if (value === null || value === undefined || value === '') return '0.00'
-      return parseFloat(value).toFixed(precision)
-    }
-  }
+  mixins: [orderItemTableMixin]
 }
 </script>
 

src/mixins/order/orderItemTableMixin.js

@@ -0,0 +1,57 @@
+import { getList } from '@/api/order/order-item'
+import { getOrderItemStatusLabel, getOrderItemStatusTagType } from '@/constants'
+
+export default {
+  props: {
+    orderId: {
+      type: [String, Number],
+      required: true
+    }
+  },
+  data() {
+    return {
+      itemData: [],
+      loading: false
+    }
+  },
+
+  watch: {
+    orderId: {
+      handler(newVal) {
+        if (newVal) {
+          this.loadItemData()
+        }
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    async loadItemData() {
+      if (!this.orderId) return
+      
+      this.loading = true
+      try {
+        const response = await getList(1, 1000, { orderId: this.orderId })
+        this.itemData = response.data.data.records || []
+      } catch (error) {
+        console.error('加载订单明细失败:', error)
+        this.$message.error('加载订单明细失败')
+        this.itemData = []
+      } finally {
+        this.loading = false
+      }
+    },
+    getStatusText(status) {
+      return getOrderItemStatusLabel(status)
+    },
+    getStatusType(status) {
+      return getOrderItemStatusTagType(status)
+    }
+  },
+  filters: {
+    numberFormat(value, precision = 2) {
+      if (value === null || value === undefined || value === '') return '0.00'
+      return parseFloat(value).toFixed(precision)
+    }
+  }
+}