feat(product-manage): 优化商品管理模块

- 调整商品信息列的宽度和布局
- 增加竞品的商品信息状态显示
- 优化 SKU 显示逻辑
- 改进图片加载和显示方式
- 统一查询条件样式
- 调整表格样式

src/views/product-manage/Columns.ts

@@ -5,7 +5,7 @@ export const ProductColumns = [
     slots: { default: 'is_monitor' }
   },
   {
-    field: 'product_info', title: '商品信息', width: 240, align: 'center', fixed: 'left',
+    field: 'product_info', title: '商品信息', width: 'auto', align: 'center', fixed: 'left',
     slots: { default: 'product_info' }
   },
   {
@@ -69,7 +69,7 @@ export const ProductColumns = [
 export const ProductMonitorColumns = [
   { type: 'checkbox', minWidth: 50, align: 'center', fixed: 'left' },
   {
-    field: 'product_info', title: '商品信息', minWidth: 240, align: 'center', fixed: 'left',
+    field: 'product_info', title: '商品信息', minWidth: 260, align: 'center', fixed: 'left',
     slots: { default: 'product_info' }
   },
   {
@@ -165,7 +165,7 @@ export const ProductMonitorColumns = [
 export const CompetitorMonitorColumns = [
   { type: 'checkbox', minWidth: 50, align: 'center', fixed: 'left' },
   {
-    field: 'product_info', title: '商品信息', minWidth: 240, align: 'center', fixed: 'left',
+    field: 'product_info', title: '商品信息', minWidth: 260, align: 'center', fixed: 'left',
     slots: { default: 'product_info' }
   },
   {

src/views/product-manage/competitor-monitor/component/DataTableSlot.vue

@@ -79,7 +79,7 @@ function goto() {
 <template>
   <div class="font-medium">
     <div v-if="field === 'product_info'">
-      <ProductInfo :img-width="50" :item="row.goods" />
+      <ProductInfo :img-width="60" :item="row.goods" />
     </div>
     <div v-else-if="field === 'country_code'">
       <el-tag :disable-transitions="true" :style="{ color: color, borderColor: color }" effect="plain" round>

src/views/product-manage/competitor-monitor/index.vue

@@ -77,6 +77,7 @@ function resetParameter() {
   for (const key in formInline) {
     formInline[key] = '';
   }
+  handleQuery();
 }
 </script>
 

src/views/product-manage/component/ProductInfo.vue

@@ -5,7 +5,6 @@
  */
 import { DocumentCopy } from '@element-plus/icons-vue';
 import { handleCopy } from '/@/utils/useCopyText';
-import VerticalDivider from '/@/components/VerticalDivider/index.vue';
 
 
 const props = defineProps({
@@ -24,18 +23,22 @@ const props = defineProps({
   displaySKU: {
     type: Boolean,
     default: false
+  },
+  displayCompetitor: {
+    type: Boolean,
+    default: false
   }
 });
 </script>
 
 <template>
   <div class="flex justify-start items-center font-medium">
-    <div v-if="item.img">
+    <div v-if="item.img" :style="`width: ${imgWidth}px; height: ${imgWidth}px; margin-right: 5px;`">
       <el-tooltip effect="light" placement="right-start">
         <el-image
             :src="`https://d1ge0kk1l5kms0.cloudfront.net/images/I/${item.img}.jpg`"
-            :style="`width: ${imgWidth}px; margin-right: 5px;`"
-            fit="fill"
+            :style="`width: ${imgWidth}px; height: ${imgWidth}px; margin-right: 5px;`"
+            fit="scale-down"
             lazy
         />
         <template #content>
@@ -55,7 +58,10 @@ const props = defineProps({
       <el-tooltip :content="item.title" :disabled="showTitleTooltip || !item.title" effect="dark" placement="top-start"
                   show-after="350">
         <el-link :disabled="!item.title" :href="item.url" :underline="false" target="_blank" type="primary">
-          <span class="line-clamp-2 text-ellipsis whitespace-normal">{{ item.title || '--' }}</span>
+          <span :class="item.is_competitors && displayCompetitor ? 'line-clamp-1' : 'line-clamp-2' + 
+          ' text-ellipsis whitespace-normal'">
+            {{ item.title || '--' }}
+          </span>
         </el-link>
       </el-tooltip>
       <div>
@@ -68,13 +74,18 @@ const props = defineProps({
                      @click="handleCopy(item.asin || '')">
           </el-button>
         </div>
-        <!--<el-tooltip :content="item.sku" effect="light" show-after="300" :disabled="!item.sku">-->
-        <!--  <p class="m-0 p-0 line-clamp-1 text-ellipsis">-->
-        <!--    SKU:-->
-        <!--    <span style="color: #1d2129;">-->
-        <!--      {{ item.sku || '&#45;&#45;' }} -->
-        <!--    </span>-->
-        <!--  </p>-->
+        <!--<el-tooltip :content="item.sku" :disabled="!item.sku" effect="light" show-after="300">-->
+        <div v-if="item.is_competitors && displayCompetitor">
+          <p class="m-0 p-0 line-clamp-1 text-ellipsis">
+            <!--竞品:-->
+            <span :style="item.is_competitors ? 'color: #F77D7C;' : ''">
+              <el-tag effect="plain" size="small" type="danger">
+              {{ item.is_competitors ? '竞品' : '否' }}
+              </el-tag>
+            </span>
+          </p>
+        </div>
+
         <!--</el-tooltip>-->
       </div>
     </div>

src/views/product-manage/product-list/component/DataTable.vue

@@ -29,6 +29,8 @@ interface Parameter {
   asin: string,
   sku: string,
   shop: string,
+  isCompetitors: string
+  platformNumber: string
 }
 
 const queryParameter: Parameter | undefined = inject('query-parameter');
@@ -108,7 +110,9 @@ async function fetchList(isQuery = false) {
     status: queryParameter?.status,
     asin: queryParameter?.asin,
     sku: queryParameter?.sku,
-    shop: queryParameter?.shop
+    shop: queryParameter?.shop,
+    is_competitors: queryParameter?.isCompetitors,
+    platform_number: queryParameter?.platformNumber
   };
 
   await useTableData(api.getTableData, query, gridOptions);

src/views/product-manage/product-list/component/DataTableSlot.vue

@@ -47,22 +47,22 @@ function handleMonitor() {
       <el-switch v-model=row.is_monitor @change="handleMonitor" />
     </div>
     <div v-else-if="field === 'product_info'">
-      <ProductInfo :img-width="50" :item="row" />
+      <ProductInfo :img-width="60" :item="row" :displayCompetitor="true" />
     </div>
     <div v-else-if="field === 'sku'" style="color: #1d2129;">
-      <div v-if="row.sku" class="flex items-center justify-center max-h-5">
-        {{ row.sku }}
-        <el-button :icon="DocumentCopy" class="ml-1 cursor-pointer" link @click="handleCopy(row.sku || '')">
+      <div class="flex items-center justify-center max-h-5">
+        {{ row.sku ? row.sku : '-' }}
+        <el-button v-if="row.sku" :icon="DocumentCopy" class="ml-1 cursor-pointer" link @click="handleCopy(row.sku || '')">
         </el-button>
       </div>
       <div v-if="row.sku2" class="flex items-center justify-center max-h-5">
-        {{ row.sku2 }}
-        <el-button :icon="DocumentCopy" class="ml-1 cursor-pointer" link @click="handleCopy(row.sku2 || '')">
+        {{ row.sku2 ? row.sku2 : '-' }}
+        <el-button v-if="row.sku2" :icon="DocumentCopy" class="ml-1 cursor-pointer" link @click="handleCopy(row.sku2 || '')">
         </el-button>
       </div>
       <div v-if="row.sku3" class="flex items-center justify-center max-h-5">
-        {{ row.sku3 }}
-        <el-button :icon="DocumentCopy" class="ml-1 cursor-pointer" link @click="handleCopy(row.sku3 || '')">
+        {{ row.sku3 ? row.sku3 : '-' }}
+        <el-button v-if="row.sku3" :icon="DocumentCopy" class="ml-1 cursor-pointer" link @click="handleCopy(row.sku3 || '')">
         </el-button>
       </div>
     </div>

src/views/product-manage/product-list/index.vue

@@ -32,7 +32,9 @@ const formInline = reactive<any>({
   status: '',
   asin: '',
   sku: '',
-  shop: ''
+  shop: '',
+  isCompetitors: '',
+  platformNumber: ''
 });
 provide('query-parameter', formInline);
 
@@ -64,6 +66,7 @@ function resetParameter() {
   for (const key in formInline) {
     formInline[key] = '';
   }
+  handleQuery();
 }
 </script>
 
@@ -76,7 +79,7 @@ function resetParameter() {
         <div class="flex flex-1">
           <div class="w-full whitespace-nowrap">
             <el-row :gutter="20" style="margin-bottom: 16px;">
-              <el-col :span="6">
+              <el-col :span="5">
                 <div class="flex items-center">
                   <span class="mr-2">国 家</span>
                   <el-select v-model="formInline.country" clearable placeholder="请选择国家">
@@ -85,7 +88,7 @@ function resetParameter() {
                   </el-select>
                 </div>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="5">
                 <div class="flex items-center">
                   <span class="mr-2">品 牌</span>
                   <el-select v-model="formInline.brand" clearable placeholder="请选择品牌">
@@ -93,7 +96,7 @@ function resetParameter() {
                   </el-select>
                 </div>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="5">
                 <div class="flex items-center">
                   <span class="mr-2">分 组</span>
                   <el-select v-model="formInline.group" clearable placeholder="请选择分组">
@@ -101,7 +104,7 @@ function resetParameter() {
                   </el-select>
                 </div>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="5">
                 <div class="flex items-center">
                   <span class="mr-2">状 态</span>
                   <el-select v-model="formInline.status" clearable placeholder="请选择状态">
@@ -110,24 +113,39 @@ function resetParameter() {
                   </el-select>
                 </div>
               </el-col>
+              <el-col :span="4" class="flex">
+                <div class="flex items-center">
+                  <span class="mr-2">竞 品</span>
+                  <el-select v-model="formInline.isCompetitors" clearable placeholder="请选择是否竞品">
+                    <el-option label="是" value="1" />
+                    <el-option label="否" value="0" />
+                  </el-select>
+                </div>
+              </el-col>
             </el-row>
             <el-row :gutter="20">
               <el-col :span="6">
                 <div class="flex items-center">
                   <span class="mr-2">ASIN</span>
-                  <el-input v-model="formInline.asin" clearable placeholder="请输入ASIN"></el-input>
+                  <el-input v-model="formInline.asin" clearable placeholder="请输入ASIN" />
                 </div>
               </el-col>
               <el-col :span="6">
                 <div class="flex items-center">
                   <span class="mr-2">SKU</span>
-                  <el-input v-model="formInline.sku" clearable placeholder="请输入SKU"></el-input>
+                  <el-input v-model="formInline.sku" clearable placeholder="请输入SKU" />
                 </div>
               </el-col>
               <el-col :span="6" class="flex">
                 <div class="flex items-center">
                   <span class="mr-2">店 铺</span>
-                  <el-input v-model="formInline.shop" clearable placeholder="请输入店铺"></el-input>
+                  <el-input v-model="formInline.shop" clearable placeholder="请输入店铺" />
+                </div>
+              </el-col>
+              <el-col :span="6" class="flex">
+                <div class="flex items-center">
+                  <span class="mr-2">平台编号</span>
+                  <el-input v-model="formInline.platformNumber" clearable placeholder="请输入平台编号" />
                 </div>
               </el-col>
             </el-row>

src/views/product-manage/product-monitor/component/DataTableSlot.vue

@@ -60,7 +60,7 @@ function goto() {
 <template>
   <div class="font-medium">
     <div v-if="field === 'product_info'">
-      <ProductInfo :img-width="50" :item="row.goods" />
+      <ProductInfo :img-width="60" :item="row.goods" />
     </div>
     <div v-else-if="field === 'sku'" style="color: #1d2129;">
       <div v-if="row.goods.sku" class="flex items-center justify-center max-h-5">

src/views/product-manage/product-monitor/index.vue

@@ -68,6 +68,7 @@ function resetParameter() {
   for (const key in formInline) {
     formInline[key] = '';
   }
+  handleQuery();
 }
 </script>
 

src/views/sku-manage/company-sku/index.vue

@@ -54,6 +54,7 @@ function resetParameter() {
   for (const key in formInline) {
     formInline[key] = '';
   }
+  handleQuery();
 }
 </script>
 
@@ -82,7 +83,7 @@ function resetParameter() {
                   </el-select>
                 </div>
               </el-col>
-              <el-col :span="3">
+              <el-col :span="4">
                 <div class="flex items-center">
                   <span class="mr-2">状 态</span>
                   <el-select v-model="formInline.status" clearable placeholder="请选择">

src/views/sku-manage/product-attribute/index.vue

@@ -35,6 +35,7 @@ function resetParameter() {
   for (const key in formInline) {
     formInline[key] = '';
   }
+  handleQuery();
 }
 </script>
 

src/views/sku-manage/product-brand/index.vue

@@ -34,6 +34,7 @@ function resetParameter() {
   for (const key in formInline) {
     formInline[key] = '';
   }
+  handleQuery();
 }
 </script>
 

src/views/sku-manage/product-category/component/DataTable.vue

@@ -138,7 +138,7 @@ defineExpose({ fetchList });
     </template>
     <!-- 工具栏右侧 -->
     <template #toolbar_tools>
-      <el-button circle class="toolbar-btn" @click="handleRefresh">
+      <el-button circle class="mr-3 toolbar-btn" @click="handleRefresh">
         <el-icon>
           <Refresh />
         </el-icon>

src/views/sku-manage/product-category/index.vue

@@ -34,6 +34,7 @@ function resetParameter() {
   for (const key in formInline) {
     formInline[key] = '';
   }
+  handleQuery();
 }
 </script>
 

src/views/store-manage/market-store/index.vue

@@ -42,6 +42,7 @@ function resetParameter() {
   for (const key in formInline) {
     formInline[key] = '';
   }
+  handleQuery();
 }
 </script>
 

src/views/store-manage/online-merchandise/index.vue

@@ -59,6 +59,7 @@ function resetParameter() {
   for (const key in formInline) {
     formInline[key] = '';
   }
+  handleQuery();
 }
 </script>