From 7c8a2801dcbadf8c4665bc33215f00a2f8a7c76a Mon Sep 17 00:00:00 2001
From: hwj <huangweijie@gdngsk.com>
Date: Wed, 24 Jun 2026 14:10:26 +0800
Subject: [PATCH] =?UTF-8?q?style=EF=BC=9A=E5=BA=93=E5=AD=98=E6=9F=A5?=
 =?UTF-8?q?=E8=AF=A2=E6=B7=BB=E5=8A=A0=E5=BA=93=E5=8C=BA=E5=BA=93=E5=AD=98?=
 =?UTF-8?q?=E3=80=81=E6=80=BB=E5=8C=85=E6=95=B0=E3=80=81=E6=80=BB=E4=B8=AA?=
 =?UTF-8?q?=E6=95=B0=E5=AD=97=E6=AE=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/erp/stock/stock/index.ts    |  10 +++
 src/locales/en.ts                   |   3 +
 src/locales/zh-CN.ts                |   3 +
 src/views/erp/stock/stock/index.vue | 100 +++++++++++++++++++++++++++-
 4 files changed, 115 insertions(+), 1 deletion(-)

diff --git a/src/api/erp/stock/stock/index.ts b/src/api/erp/stock/stock/index.ts
index a9dd22b4..50032944 100644
--- a/src/api/erp/stock/stock/index.ts
+++ b/src/api/erp/stock/stock/index.ts
@@ -22,6 +22,16 @@ export interface StockVO {
   packagingRule?: string
   // 库存展示
   stockDisplay?: string
+  areaStocks?: Array<{
+    areaId?: number
+    areaName?: string
+    count?: number
+    packageCount?: number
+    baseCount?: number
+    stockDisplay?: string
+  }>
+  totalPackageCount?: number
+  totalBaseCount?: number
   // 库存数量
   count: number
   latestInTime?: number | string
diff --git a/src/locales/en.ts b/src/locales/en.ts
index c8f429cc..57ee43c0 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -416,6 +416,9 @@ export default {
       area: 'Area',
       packagingRule: 'Packaging / Conversion Rule',
       stockDisplay: 'Stock Display',
+      areaStockDisplay: 'Area Stock',
+      totalPackageCount: 'Total Packages',
+      totalBaseCount: 'Total Base Count',
       unit: 'Unit',
       count: 'Base Quantity',
       latestInTime: 'Latest Inbound',
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
index dfcf7e88..b260bf93 100644
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -416,6 +416,9 @@ export default {
       area: '库区',
       packagingRule: '包装/换算规则',
       stockDisplay: '库存展示',
+      areaStockDisplay: '库区库存',
+      totalPackageCount: '总包数',
+      totalBaseCount: '总个数',
       unit: '单位',
       count: '基本数量',
       latestInTime: '最近入库',
diff --git a/src/views/erp/stock/stock/index.vue b/src/views/erp/stock/stock/index.vue
index cf131c6c..5b4be8d5 100644
--- a/src/views/erp/stock/stock/index.vue
+++ b/src/views/erp/stock/stock/index.vue
@@ -97,7 +97,6 @@
       <el-table-column :label="t('ErpStock.Stock.subCategory')" align="center" prop="categoryName" min-width="120" sortable />
       <el-table-column :label="t('ErpStock.Stock.packagingRule')" align="center" prop="packagingRule" min-width="180" />
       <el-table-column :label="t('ErpStock.Stock.warehouse')" align="center" prop="warehouseName" min-width="140" sortable />
-      <el-table-column :label="t('ErpStock.Stock.area')" align="center" prop="areaName" min-width="120" sortable />
       <el-table-column :label="t('ErpStock.Stock.stockDisplay')" align="center" prop="stockDisplay" min-width="220">
         <template #default="{ row }">
           <span
@@ -116,6 +115,51 @@
           <span v-else>-</span>
         </template>
       </el-table-column>
+      <el-table-column :label="t('ErpStock.Stock.areaStockDisplay')" align="center" min-width="260">
+        <template #default="{ row }">
+          <el-popover
+            v-if="getAreaStockDisplayList(row.areaStocks).length"
+            trigger="hover"
+            placement="top"
+            width="320"
+          >
+            <template #reference>
+              <span class="area-stock-summary" :style="getStockDisplayStyle(row.categoryType)">
+                <span
+                  v-for="item in getVisibleAreaStockDisplayList(row.areaStocks)"
+                  :key="item"
+                  class="area-stock-tag"
+                >
+                  {{ item }}
+                </span>
+                <span v-if="getHiddenAreaStockCount(row.areaStocks)" class="area-stock-more">
+                  +{{ getHiddenAreaStockCount(row.areaStocks) }}
+                </span>
+              </span>
+            </template>
+            <div class="area-stock-detail">
+              <div
+                v-for="item in getAreaStockDisplayList(row.areaStocks)"
+                :key="item"
+                class="area-stock-detail__item"
+              >
+                {{ item }}
+              </div>
+            </div>
+          </el-popover>
+          <span v-else>-</span>
+        </template>
+      </el-table-column>
+      <el-table-column :label="t('ErpStock.Stock.totalPackageCount')" align="center" sortable prop="totalPackageCount" min-width="120">
+        <template #default="{ row }">
+          {{ formatStockCount(row.totalPackageCount) }}
+        </template>
+      </el-table-column>
+      <el-table-column :label="t('ErpStock.Stock.totalBaseCount')" align="center" sortable prop="totalBaseCount" min-width="120">
+        <template #default="{ row }">
+          {{ formatStockCount(row.totalBaseCount) }}
+        </template>
+      </el-table-column>
       <el-table-column :label="t('ErpStock.Stock.count')" align="center" sortable prop="count" min-width="120">
         <template #default="{ row }">
           {{ formatStockCount(row.count) }}
@@ -200,6 +244,23 @@ const formatStockDisplay = (value: string | undefined) => {
     .filter(Boolean)
 }
 
+const AREA_STOCK_VISIBLE_COUNT = 2
+
+const getAreaStockDisplayList = (value: StockVO['areaStocks']) => {
+  if (!Array.isArray(value)) return []
+  return value
+    .map((item) => item?.stockDisplay?.trim())
+    .filter((item): item is string => Boolean(item))
+}
+
+const getVisibleAreaStockDisplayList = (value: StockVO['areaStocks']) => {
+  return getAreaStockDisplayList(value).slice(0, AREA_STOCK_VISIBLE_COUNT)
+}
+
+const getHiddenAreaStockCount = (value: StockVO['areaStocks']) => {
+  return Math.max(getAreaStockDisplayList(value).length - AREA_STOCK_VISIBLE_COUNT, 0)
+}
+
 const getStockDisplayStyle = (categoryType: number | string | undefined) => {
   const dict = getDictObj(DICT_TYPE.MATERIAL_CLASSIFICATION_TYPE, categoryType)
   if (dict?.cssClass && isHexColor(dict.cssClass)) {
@@ -326,4 +387,41 @@ onMounted(async () => {
 .stock-display__item {
   white-space: nowrap;
 }
+
+.area-stock-summary {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  max-width: 100%;
+  vertical-align: middle;
+}
+
+.area-stock-tag {
+  max-width: 108px;
+  padding: 1px 6px;
+  overflow: hidden;
+  line-height: 20px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  background: var(--el-fill-color-light);
+  border: 1px solid var(--el-border-color-light);
+  border-radius: 4px;
+}
+
+.area-stock-more {
+  flex-shrink: 0;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.area-stock-detail {
+  max-height: 260px;
+  overflow-y: auto;
+  line-height: 22px;
+}
+
+.area-stock-detail__item + .area-stock-detail__item {
+  margin-top: 6px;
+}
 </style>