feat: 配货中添加缺货标记 #1011818

src/types/api/factoryOrderNew/index.ts

@@ -160,7 +160,8 @@ export interface operateOrderListData {
   isReplenishment?: boolean
   isReplenishment?: boolean
   totalProductionNum?: number
   totalProductionNum?: number
   status?: string
   status?: string
-  outOfStock?: boolean
+  /** 0-正常, 1-缺货 */
+  outOfStock?: number
   arrange?: boolean
   arrange?: boolean
   version?: number
   version?: number
   createTime?: string
   createTime?: string

src/types/api/order/factoryOrderNew.ts

@@ -178,7 +178,8 @@ export interface operateOrderListData {
   isReplenishment?: boolean
   isReplenishment?: boolean
   totalProductionNum?: number
   totalProductionNum?: number
   status?: string
   status?: string
-  outOfStock?: boolean
+  /** 0-正常, 1-缺货 */
+  outOfStock?: number
   arrange?: boolean
   arrange?: boolean
   version?: number
   version?: number
   createTime?: string
   createTime?: string

src/views/order/factoryOrderNew/index.vue

@@ -2247,26 +2247,22 @@ const operationOrderColumns = computed(() => [
     align: 'center',
     align: 'center',
     render: (row: operateOrderListData) => {
     render: (row: operateOrderListData) => {
       const list = parseOperationOrderImageAry(row.imageAry)
       const list = parseOperationOrderImageAry(row.imageAry)
-      if (!list.length) {
-        return (
-          <div style="display:flex;gap:4px;">
-            <el-image
-              src={row.variantImage}
-              style="width:50px;height:50px"
-              previewSrcList={[row.variantImage ?? '']}
-              previewTeleported
-            />
-          </div>
-        )
-      }
-      const urls = list.map((i) => i.url)
-      return (
+      const images = !list.length ? (
+        <div style="display:flex;gap:4px;">
+          <el-image
+            src={row.variantImage}
+            style="width:50px;height:50px"
+            previewSrcList={[row.variantImage ?? '']}
+            previewTeleported
+          />
+        </div>
+      ) : (
         <div style="display:flex;gap:4px;">
         <div style="display:flex;gap:4px;">
           {list.map((img, idx) => (
           {list.map((img, idx) => (
             <el-image
             <el-image
               key={idx}
               key={idx}
               src={img.url}
               src={img.url}
-              previewSrcList={urls}
+              previewSrcList={list.map((i) => i.url)}
               previewTeleported={true}
               previewTeleported={true}
               initialIndex={idx}
               initialIndex={idx}
               style="width:50px;height:50px"
               style="width:50px;height:50px"
@@ -2275,6 +2271,18 @@ const operationOrderColumns = computed(() => [
           ))}
           ))}
         </div>
         </div>
       )
       )
+      return (
+        <div style="display:flex;align-items:center;gap:4px;">
+          {images}
+          {row.outOfStock == 1 && (
+            <el-tooltip effect="light" content="缺货" placement="bottom">
+              <div style="background-color:#f56c6c;color:#fff;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:4px;font-size:12px;flex-shrink:0;">
+                缺
+              </div>
+            </el-tooltip>
+          )}
+        </div>
+      )
     },
     },
   },
   },
   {
   {