style：库存查询-库区库存列字段调整

src/views/erp/stock/stock/index.vue

@@ -117,36 +117,19 @@
       </el-table-column>
       <el-table-column :label="t('ErpStock.Stock.areaStockDisplay')" align="center" min-width="260">
         <template #default="{ row }">
-          <el-popover
+          <div
             v-if="getAreaStockDisplayList(row.areaStocks).length"
-            trigger="hover"
+            class="area-stock-list"
-            placement="top"
+            :style="getStockDisplayStyle(row.categoryType)"
-            width="320"
           >
-            <template #reference>
+            <div
-              <span class="area-stock-summary" :style="getStockDisplayStyle(row.categoryType)">
+              v-for="item in getAreaStockDisplayList(row.areaStocks)"
-                <span
+              :key="item"
-                  v-for="item in getVisibleAreaStockDisplayList(row.areaStocks)"
+              class="area-stock-list__item"
-                  :key="item"
+            >
-                  class="area-stock-tag"
+              {{ item }}
-                >
-                  {{ 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>
+          </div>
           <span v-else>-</span>
         </template>
       </el-table-column>
@@ -244,8 +227,6 @@ 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
@@ -253,14 +234,6 @@ const getAreaStockDisplayList = (value: StockVO['areaStocks']) => {
     .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)) {
@@ -399,40 +372,16 @@ onMounted(async () => {
   white-space: nowrap;
 }
 
-.area-stock-summary {
+.area-stock-list {
-  display: inline-flex;
+  display: flex;
+  flex-direction: column;
   align-items: center;
-  justify-content: center;
+  gap: 4px;
-  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 {
+.area-stock-list__item {
-  flex-shrink: 0;
+  max-width: 100%;
-  font-weight: 500;
+  word-break: break-all;
-  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>