ui: update ProductPerformanceProfitability page to enhance table views and tabs management

ui/src/pages/OrderPriceList.vue

@@ -1222,49 +1222,58 @@ async function reloadData ({ page = 1 } = {}) {
 }
 
 async function loadImagesForRows (list) {
-  const targets = []
+  const items = []
+  const rowByKey = new Map()
   const seen = new Set()
   for (const row of list) {
     const key = `${row.productCode}|${row.dim1 || 0}|${row.dim3 || 0}`
     if (!row.productCode || seen.has(key)) continue
     seen.add(key)
-    targets.push({ row, key })
-  }
-  const concurrency = 12
-  let cursor = 0
-  let loaded = 0
-  const workers = Array.from({ length: Math.min(concurrency, targets.length) }, async () => {
-    for (;;) {
-      const target = targets[cursor]
-      cursor += 1
-      if (!target) return
-      const { row, key } = target
     if (imageCache.has(key)) {
       row.imageUrl = imageCache.get(key)
       continue
     }
+    rowByKey.set(key, row)
+    items.push({
+      key,
+      code: row.productCode,
+      dim1: row.dim1 || '',
+      dim3: row.dim3 || ''
+    })
+  }
+  if (!items.length) {
+    rows.value = [...rows.value]
+    return
+  }
+
+  const chunks = []
+  for (let i = 0; i < items.length; i += 250) chunks.push(items.slice(i, i + 250))
+  for (const chunk of chunks) {
     try {
-      const res = await api.get('/product-images', {
-        params: {
-          code: row.productCode,
-          dim1_id: row.dim1 || '',
-          dim3_id: row.dim3 || ''
-        },
-        timeout: 15000
-      })
-      const first = Array.isArray(res?.data) ? res.data[0] : null
-      const url = resolveProductImageUrl(first)
-      imageCache.set(key, url)
-      row.imageUrl = url
-      imageListCache.set(key, Array.isArray(res?.data) ? res.data : [])
+      const res = await api.post('/product-images/batch', { items: chunk }, { timeout: 30000 })
+      const returned = new Set()
+      for (const item of Array.isArray(res?.data) ? res.data : []) {
+        const key = toText(item?.key)
+        if (!key) continue
+        returned.add(key)
+        const list = Array.isArray(item.images) ? item.images : []
+        const url = resolveProductImageUrl(list[0])
+        imageCache.set(key, url)
+        imageListCache.set(key, list)
+        const row = rowByKey.get(key)
+        if (row) row.imageUrl = url
+      }
+      for (const item of chunk) {
+        if (!returned.has(item.key)) {
+          imageCache.set(item.key, '')
+          imageListCache.set(item.key, [])
+        }
+      }
     } catch {
-      imageCache.set(key, '')
+      for (const item of chunk) imageCache.set(item.key, '')
     }
-      loaded += 1
-      if (loaded % 12 === 0) rows.value = [...rows.value]
-    }
-  })
-  await Promise.all(workers)
+    rows.value = [...rows.value]
+  }
   rows.value = [...rows.value]
 }