perf(订单): 优化订单明细加载性能

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

@@ -0,0 +1,145 @@
+<template>
+  <div class="order-item-table-optimized">
+    <el-table
+      :data="itemData"
+      :loading="loading"
+      border
+      size="small"
+      style="width: 100%"
+    >
+      <el-table-column prop="itemCode" label="物料编码" width="120" />
+      <el-table-column prop="itemName" label="物料名称" width="150" />
+      <el-table-column prop="specs" label="规格型号" width="120" />
+      <el-table-column prop="mainItemCategoryName" label="主物料分类" width="120" />
+      <el-table-column prop="warehouseName" label="仓库名称" width="120" />
+      <el-table-column prop="availableQuantity" label="库存数量" width="100" align="right">
+        <template slot-scope="scope">
+          {{ scope.row.availableQuantity | numberFormat(4) }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="orderQuantity" label="订单数量" width="100" align="right">
+        <template slot-scope="scope">
+          {{ scope.row.orderQuantity | numberFormat(4) }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="confirmQuantity" label="确认数量" width="100" align="right">
+        <template slot-scope="scope">
+          {{ scope.row.confirmQuantity | numberFormat(4) }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="unitPrice" label="单价" width="100" align="right">
+        <template slot-scope="scope">
+          ¥{{ scope.row.unitPrice | numberFormat(2) }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="taxRate" label="税率" width="80" align="right">
+        <template slot-scope="scope">
+          {{ scope.row.taxRate | numberFormat(2) }}%
+        </template>
+      </el-table-column>
+      <el-table-column prop="taxAmount" label="税额" width="100" align="right">
+        <template slot-scope="scope">
+          ¥{{ scope.row.taxAmount | numberFormat(2) }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="totalAmount" label="总金额" width="100" align="right">
+        <template slot-scope="scope">
+          ¥{{ scope.row.totalAmount | numberFormat(2) }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="itemStatus" label="明细状态" width="100" align="center">
+        <template slot-scope="scope">
+          <el-tag
+            :type="getStatusType(scope.row.itemStatus)"
+            size="mini"
+          >
+            {{ getStatusText(scope.row.itemStatus) }}
+          </el-tag>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { getList } from '@/api/order/order-item'
+import { getOrderItemStatusLabel, getOrderItemStatusTagType } from '@/constants'
+import { formatFloatNumber } from '@/components/order-form/number-format-utils'
+
+export default {
+  name: 'OrderItemTableOptimized',
+  props: {
+    // 新增：支持直接传入明细数据
+    orderItemData: {
+      type: Array,
+      default: () => []
+    },
+    // 保持原有兼容性
+    orderId: {
+      type: [String, Number],
+      default: null
+    }
+  },
+  data() {
+    return {
+      itemData: [],
+      loading: false
+    }
+  },
+  watch: {
+    // 优先使用传入的明细数据
+    orderItemData: {
+      handler(newVal) {
+        if (Array.isArray(newVal) && newVal.length > 0) {
+          this.itemData = newVal
+          this.loading = false
+        }
+      },
+      immediate: true
+    },
+    // 降级：如果没有传入数据，则按原有方式查询
+    orderId: {
+      handler(newVal) {
+        if (newVal && (!this.orderItemData || this.orderItemData.length === 0)) {
+          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) {
+      return formatFloatNumber(value)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.order-item-table-optimized {
+  padding: 10px 0;
+}
+</style>

src/views/order/order/index-avue.vue

@@ -120,7 +120,10 @@
             <span class="order-code">订单编码：{{ row.orderCode }}</span>
           </div>
           <div class="expand-body">
-            <order-item-table :order-id="row.id" />
+            <order-item-table-optimized
+              :order-id="row.id"
+              :order-item-data="row.pcBladeOrderItemList"
+            />
           </div>
         </div>
       </template>
@@ -146,7 +149,7 @@ import {
   getOrderStatusLabel,
   getOrderStatusTagType
 } from '@/constants'
-import OrderItemTable from '@/components/order-item-table/index.vue'
+import OrderItemTableOptimized from '@/components/order-item-table-optimized/index.vue'
 import OrderForm from '@/components/order-form/order-form.vue'
 import { ORDER_FORM_EVENTS } from '@/components/order-form/events'
 import { mapGetters } from 'vuex'
@@ -154,7 +157,7 @@ import { mapGetters } from 'vuex'
 export default {
   name: 'OrderAvue',
   components: {
-    OrderItemTable,
+    OrderItemTableOptimized,
     OrderForm
   },
   data() {
@@ -218,21 +221,19 @@ export default {
       }
       Object.keys(query).forEach(k => query[k] === undefined && delete query[k])
 
-      getOrderList(page.currentPage, page.pageSize, query).then(async res => {
+      getOrderList(page.currentPage, page.pageSize, query).then(res => {
         const data = res.data.data
         const records = Array.isArray(data.records) ? data.records : []
-        // 与工厂列表一致：并行查询每条订单的明细总数，使用分页响应的 total
-        const counts = await Promise.all(records.map(async (row) => {
-          try {
-            const resp = await getOrderItemList(1, 1, { orderId: row.id })
-            const payload = resp && resp.data && resp.data.data ? resp.data.data : { total: 0 }
-            return Number(payload.total || 0)
-          } catch (e) {
-            return 0
-          }
+
+        // 优化：直接使用接口返回的明细数据，无需额外查询
+        this.data = records.map(row => ({
+          ...row,
+          // 如果接口返回了pcBladeOrderItemList，计算明细条数；否则使用原有逻辑作为降级
+          detailCount: Array.isArray(row.pcBladeOrderItemList)
+            ? row.pcBladeOrderItemList.length
+            : (row.detailCount || 0)
         }))
-        // 将计算得到的明细条数合并到每条记录的 detailCount 字段
-        this.data = records.map((row, idx) => ({ ...row, detailCount: counts[idx] }))
+
         this.page.total = data.total
         this.loading = false
       }).catch(() => {