feat: 商品库存明细接口联调

src/views/order/factoryOrderNew/component/OrderInventoryDialog.vue

@@ -46,7 +46,7 @@
           </ElFormItem>
           <ElFormItem label="库存状况">
             <ElSelect
-              v-model="filterForm.stockStatus"
+              v-model="filterForm.inventoryStatus"
               placeholder="请选择库存状况"
               clearable
               style="width: 160px"
@@ -103,15 +103,16 @@ import {
   getOrderInventoryListApi,
   exportOrderInventoryApi,
 } from '@/api/factoryOrderNew'
+import BigNumber from 'bignumber.js'
 const props = defineProps<{
   visible: boolean
   selectedRows: FactoryOrderNewListData[]
   warehouseList: WarehouseListData[]
 }>()
 const stockStatusOptions = [
-  { label: '缺货商品', value: 'OUT_OF_STOCK' },
-  { label: '不缺货商品', value: 'IN_STOCK' },
-  { label: '未入过库的商品', value: 'NEVER_STOCKED' },
+  { label: '缺货商品', value: 1 },
+  { label: '不缺货商品', value: 2 },
+  { label: '未入过库的商品', value: 3 },
 ]
 
 const emit = defineEmits<{
@@ -132,7 +133,7 @@ watch(visible, (newVal) => {
       warehouseId: undefined,
       warehouseSku: '',
       productNo: '',
-      stockStatus: undefined,
+      inventoryStatus: undefined,
     }
     refresh()
   }
@@ -141,7 +142,7 @@ const filterForm = ref({
   warehouseId: undefined as number | undefined,
   warehouseSku: '',
   productNo: '',
-  stockStatus: undefined as string | undefined,
+  inventoryStatus: undefined as string | undefined,
 })
 
 const buildQueryParams = () => ({
@@ -149,7 +150,7 @@ const buildQueryParams = () => ({
   warehouseId: filterForm.value.warehouseId || undefined,
   warehouseSku: filterForm.value.warehouseSku || undefined,
   productNo: filterForm.value.productNo || undefined,
-  stockStatus: filterForm.value.stockStatus || undefined,
+  inventoryStatus: filterForm.value.inventoryStatus || undefined,
 })
 
 const {
@@ -174,6 +175,20 @@ const {
   },
 })
 
+/** 可用数量 = 库存数量 - 占用数量 - 冻结数量 */
+function getAvailableQuantity(row: OrderInventoryData): number {
+  return new BigNumber(row.inventory ?? 0)
+    .minus(row.occupyInventory ?? 0)
+    .minus(row.freezeInventory ?? 0)
+    .toNumber()
+}
+function getShortageQuantity(row: OrderInventoryData): number {
+  const shortage = new BigNumber(row.salesNum ?? 0)
+    .minus(getAvailableQuantity(row))
+    .toNumber()
+  return Math.max(0, shortage)
+}
+
 const columns = [
   {
     label: '图片',
@@ -181,9 +196,9 @@ const columns = [
     align: 'center',
     render: (row: OrderInventoryData) => (
       <el-image
-        src={row.image ?? ''}
+        src={row.variantImage ?? ''}
         style={{ width: '40px', height: '40px' }}
-        preview-src-list={row.image ? [row.image] : []}
+        preview-src-list={row.variantImage ? [row.variantImage] : []}
         preview-teleported
         fit="cover"
       />
@@ -215,7 +230,7 @@ const columns = [
   {
     prop: 'skuName',
     label: '商品名称',
-    minWidth: 120,
+    minWidth: 140,
     showOverflowTooltip: true,
   },
   {
@@ -223,7 +238,7 @@ const columns = [
     width: 100,
     align: 'right',
     render: (row: OrderInventoryData) => {
-      const v = row.shortageQuantity ?? 0
+      const v = getShortageQuantity(row)
       if (v > 0) {
         return <span style="color: #f56c6c; font-weight: bold">{v}</span>
       }
@@ -231,16 +246,31 @@ const columns = [
     },
   },
   {
-    prop: 'demandQuantity',
+    prop: 'salesNum',
     label: '需求数量',
     width: 100,
     align: 'right',
+    render: (row: OrderInventoryData) => {
+      return (
+        <span
+          style={{
+            color: row.inventoryStatus === 3 ? '#E6A23C' : '',
+            fontWeight: row.inventoryStatus === 3 ? 'bold' : '',
+          }}
+        >
+          {row.salesNum || 0}
+        </span>
+      )
+    },
   },
   {
     prop: 'usableQuantity',
     label: '可用数量',
     width: 100,
     align: 'right',
+    render: (row: OrderInventoryData) => {
+      return <span>{getAvailableQuantity(row)}</span>
+    },
   },
   {
     prop: 'inventory',
@@ -253,6 +283,9 @@ const columns = [
     label: '占用数量',
     width: 100,
     align: 'right',
+    render: (row: OrderInventoryData) => {
+      return <span>{row.occupyInventory || 0}</span>
+    },
   },
   {
     prop: 'freezeInventory',
@@ -269,7 +302,7 @@ const handleSearch = () => {
 const handleExport = async () => {
   try {
     await exportOrderInventoryApi(buildQueryParams())
-    ElMessage.success('导出成功')
+    ElMessage.success('请求成功，请稍后到右上角[我的下载]中查看')
   } catch (e) {
     console.error(e)
   }