Преглед на файлове

refactor(product): 优化 SKU展示布局

- 调整 SKU 展示方式,使用 flex 布局实现垂直排列
- 为每个 SKU 添加复制按钮
- 统一展示样式,提高可读性和操作便利性
WanGxC преди 6 месеца
родител
ревизия
b119927650

+ 13 - 7
src/views/product-manage/product-list/component/DataTableSlot.vue

@@ -53,19 +53,25 @@ function handleMonitor() {
       <ProductInfo :displayCompetitor="true" :img-width="60" :item="row" />
     </div>
     <div v-else-if="field === 'sku'" style="color: #1d2129;">
-      <div v-if="row.sku || row.sku2 || row.sku3" class="flex items-center justify-center max-h-5">
-        <div v-if="row.sku">
-          {{ row.sku }}
+      <div v-if="row.sku || row.sku2 || row.sku3" class="flex flex-col items-center justify-center">
+        <div v-if="row.sku" class="flex max-h-5">
+          <div>
+            {{ row.sku }}
+          </div>
           <el-button :icon="CopyDocument" class="ml-1 cursor-pointer" link
                      @click="handleCopy(row.sku || '')"></el-button>
         </div>
-        <div v-if="row.sku2">
-          {{ row.sku2 }}
+        <div v-if="row.sku2" class="flex max-h-5">
+          <div>
+            {{ row.sku2 }}
+          </div>
           <el-button :icon="CopyDocument" class="ml-1 cursor-pointer" link
                      @click="handleCopy(row.sku2 || '')"></el-button>
         </div>
-        <div v-if="row.sku3">
-          {{ row.sku3 }}
+        <div v-if="row.sku3" class="flex max-h-5">
+          <div>
+            {{ row.sku3 }}
+          </div>
           <el-button :icon="CopyDocument" class="ml-1 cursor-pointer" link
                      @click="handleCopy(row.sku3 || '')"></el-button>
         </div>

+ 13 - 7
src/views/product-manage/product-monitor/component/DataTableSlot.vue

@@ -68,19 +68,25 @@ function goto() {
       <ProductInfo :img-width="60" :item="row.goods" />
     </div>
     <div v-else-if="field === 'sku'" style="color: #1d2129;">
-      <div v-if="row.goods.sku || row.goods.sku2 || row.goods.sku3" class="flex items-center justify-center max-h-5">
-        <div v-if="row.goods.sku">
-          {{ row.goods.sku }}
+      <div v-if="row.goods.sku || row.goods.sku2 || row.goods.sku3" class="flex flex-col items-center justify-center">
+        <div v-if="row.goods.sku" class="flex max-h-5">
+          <div>
+            {{ row.goods.sku }}
+          </div>
           <el-button :icon="CopyDocument" class="ml-1 cursor-pointer" link
                      @click="handleCopy(row.goods.sku || '')"></el-button>
         </div>
-        <div v-if="row.goods.sku2">
-          {{ row.goods.sku2 }}
+        <div v-if="row.goods.sku2" class="flex max-h-5">
+          <div>
+            {{ row.goods.sku2 }}
+          </div>
           <el-button :icon="CopyDocument" class="ml-1 cursor-pointer" link
                      @click="handleCopy(row.goods.sku2 || '')"></el-button>
         </div>
-        <div v-if="row.goods.sku3">
-          {{ row.goods.sku3 }}
+        <div v-if="row.goods.sku3" class="flex max-h-5">
+          <div>
+            {{ row.goods.sku3 }}
+          </div>
           <el-button :icon="CopyDocument" class="ml-1 cursor-pointer" link
                      @click="handleCopy(row.goods.sku3 || '')"></el-button>
         </div>