✨ feat: 表格功能完善

.prettierrc.js

@@ -2,7 +2,7 @@ module.exports = {
 	singleAttributePerLine: false,
 	htmlWhitespaceSensitivity: 'ignore',
 	// 一行最多多少个字符
-	printWidth: 180,
+	printWidth: 260,
 	// 指定每个缩进级别的空格数
 	tabWidth: 2,
 	// 使用制表符而不是空格缩进行

src/views/productCenter/productList/api.ts

@@ -97,14 +97,14 @@ export function getTableDataForProductLine(query) {
 }
 export function getTableDataForParentASIN(query) {
   return request({
-    url: '/api/sellers/home/productline/list/',
+    url: '/api/sellers/home/pasin/list/',
     method: 'GET',
     params: query,
   })
 }
 export function getTableDataForASIN(query) {
   return request({
-    url: '/api/sellers/home/productline/list/',
+    url: '/api/sellers/home/asin/list/',
     method: 'GET',
     params: query,
   })

src/views/productCenter/productList/components/CustomCell/index.vue

@@ -1,15 +1,49 @@
 <template>
   <div>
-    <!-- 这里可以基于 field 和 row 自定义不同的展示 -->
-    <!-- <div v-if="field === 'TotalSales'">
-      {{ formatTotalSales(value) }}
-    </div> -->
-    <div>
+    <!-- 特定字段的自定义显示，例如 'rank' -->
+    <div v-if="field === 'rank'">
+      <div style="font-weight: 700">BigRank: #{{ row.bigCatRank ? row.bigCatRank : '--' }}</div>
+      <div style="color: #c9cdd4">Rank: #{{ row.smallCatRank ? row.smallCatRank : '--' }}</div>
+      <div style="font-weight: 700">BigTitle: {{ row.bigCatTitle }}</div>
+      <div style="color: #c9cdd4">Title: {{ row.smallCatTitle }}</div>
+    </div>
+
+    <div v-else-if="field === 'sku'">
+      <div class="list-content">
+        <div class="image-item">
+          <img :src="row.Image" />
+        </div>
+        <div>
+          <el-tooltip effect="dark" :content="row.Title" placement="top-start">
+            <span class="item-title">{{ row.Title }}</span>
+          </el-tooltip>
+          <div>
+            <span class="item-font">{{ row.quantity ? '有库存' : '缺货' }}</span>
+          </div>
+          <span class="item-font">ASIN: <span class="black-color">{{ row.Asin }}</span></span>
+          <el-tooltip effect="dark" :content="row.sku" placement="top-start">
+            <span class="item-font display-line">SKU: <span class="black-color">{{ row.sku }}</span></span>
+          </el-tooltip>
+        </div>
+      </div>
+    </div>
+
+    <div v-else-if="field === 'status'">
+      <el-tag v-if="value === 'Active'" type="success">在售</el-tag>
+      <el-tag v-if="value === 'Inactive'" type="info">停售</el-tag>
+      <el-tag v-if="value === 'Incomplete'" type="warning">不完整</el-tag>
+    </div>
+    <div v-else-if="field === 'launchDatetime'">
+      {{ value ? value.split('T')[0] : '--' }}
+    </div>
+
+    <!-- 其他字段的通用显示逻辑 -->
+    <div v-else>
       {{ value }}
       <!-- 根据 gapValue 的值和 isCompare 调整显示内容 -->
-      <div v-if="isCompare" :style="{ color: gapValue > 0 ? '#59b939' : gapValue < 0 ? '#ee7973' : 'black' }">
-        <el-icon v-if="gapValue > 0"><Top /></el-icon>
-        <el-icon v-else-if="gapValue < 0"><Bottom /></el-icon>
+      <div v-if="isCompare" :style="{ color: gapValue > 0 ? '#59b939' : gapValue < 0 ? '#ee7973' : '#dde0eb' }">
+        <el-icon v-if="gapValue > 0"><Top style="position: absolute; top: 2" /></el-icon>
+        <el-icon v-else-if="gapValue < 0"><Bottom style="position: absolute; top: 2" /></el-icon>
         <!-- 显示 gapValue 值，根据情况加上百分号 -->
         {{ gapValue !== undefined ? (gapValue === null || gapValue === 0 ? '0%' : (gapValue < 0 ? '-' : '') + Math.abs(gapValue) + '%') : '' }}
       </div>
@@ -33,3 +67,59 @@ const gapValue = computed(() => {
   return props.row[gapField] // 返回行数据中对应的 gap 值
 })
 </script>
+
+<style scoped>
+.img-container {
+  width: 72px;
+  height: 72px;
+  border: 1px solid #dde0eb;
+  border-radius: 4px;
+}
+.img-content {
+  width: 100%;
+  height: 100%;
+  border-radius: 4px;
+}
+
+.list-content {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.image-item {
+  min-width: 72px;
+  height: 72px;
+}
+.image-item img {
+  min-width: 72px;
+  height: 72px;
+  border: 1px solid #dde0eb;
+  border-radius: 4px;
+}
+.item-title {
+  font-weight: 500;
+  color: #1d2129;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--line-clamp);
+  white-space: pre-wrap;
+  --line-clamp: 1;
+}
+.item-font {
+  color: #6b7785;
+  font-size: 13px;
+  line-height: 13px;
+}
+.display-line {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--line-clamp);
+  white-space: pre-wrap;
+  --line-clamp: 1;
+}
+.black-color {
+  color: black;
+}
+</style>

src/views/productCenter/productList/components/CustomFooterCell/index.vue

@@ -8,15 +8,14 @@
     <div>{{ totalValue === 0 || totalValue === null ? '0' : totalValue }}</div>
     <!-- 当 isCompare 为 true 时，根据条件显示 gapValue 或 '0'，如果是 undefined 则不显示 -->
     <div v-if="isCompare" :style="{ color: gapValue > 0 ? '#59b939' : gapValue < 0 ? '#ee7973' : 'black' }">
-      <el-icon v-if="gapValue > 0"><Top /></el-icon>
-        <el-icon v-else-if="gapValue < 0"><Bottom /></el-icon>
-      <span>{{ gapValue === 0 || gapValue === null ? '0%' : gapValue !== undefined ? gapValue + '%' : '' }}</span>
+      <el-icon v-if="gapValue > 0"><Top style="position: absolute; top: 2" /></el-icon>
+      <el-icon v-else-if="gapValue < 0"><Bottom style="position: absolute; top: 2" /></el-icon>
+      {{ gapValue === 0 || gapValue === null ? '0%' : gapValue !== undefined ? gapValue + '%' : '' }}
     </div>
   </div>
 </template>
 
 <script setup>
-
 defineProps({
   totalValue: [Number, String],
   gapValue: Number,

src/views/productCenter/productList/components/DataTable/index.vue

@@ -38,7 +38,7 @@ import CustomFooterCell from '../CustomFooterCell/index.vue'
 import { getTableDataForASIN, getTableDataForParentASIN, getTableDataForProductLine, getTableDataForSKU } from '/@/views/productCenter/productList/api'
 import useProductlineId from '/@/views/productCenter/productList/hooks/useProductlineId'
 import useTableColumns from '/@/views/productCenter/productList/hooks/useTableColumns'
-import { productLineColumns, skuColumns } from '/@/views/productCenter/productList/utils/columns'
+import { productLineColumns, parentAsinColumns, asinColumns, skuColumns } from '/@/views/productCenter/productList/utils/columns'
 
 const profile = <any>inject('profile')
 const dateRange = <any>inject('dateRange')
@@ -119,10 +119,10 @@ async function fetchTableData(type) {
 
   // 要用引号扩住key '产品线'
   const typeToApiAndColumns = {
-    产品线: { api: getTableDataForProductLine, columns: productLineColumns },
-    SKU: { api: getTableDataForSKU, columns: skuColumns },
-    父ASIN: { api: getTableDataForParentASIN, columns: skuColumns },
-    ASIN: { api: getTableDataForASIN, columns: skuColumns },
+    '产品线': { api: getTableDataForProductLine, columns: productLineColumns },
+    '父ASIN': { api: getTableDataForParentASIN, columns: parentAsinColumns },
+    'ASIN': { api: getTableDataForASIN, columns: asinColumns },
+    'SKU': { api: getTableDataForSKU, columns: skuColumns },
   }
   // 根据类型获取对应的API函数和列配置
   const { api: apiFunction, columns } = typeToApiAndColumns[type] || {}

src/views/productCenter/productList/hooks/useProductlineId.ts

@@ -12,7 +12,7 @@ export default function useProductlineId() {
 
   onBeforeUnmount(() => {
     emitter.all.clear()
-    console.log('cleared')
+    // console.log('cleared')
   })
   return { productlineId }
 }

src/views/productCenter/productList/hooks/useTableColumns.ts

@@ -61,6 +61,11 @@ export default function () {
     gapCPO: value => `${value}`,
     gapCPA: value => `${value}`,
     gapProductCr: value => `${value}`,
+    parentAsin: value => `${value}`,
+    Asin: value => `${value}`,
+    sku: value => `${value}`,
+    status: value => `${value}`,
+    launchDatetime: value => `${value}`,
   }
 
   return { totalSummary, summaryFormats }

src/views/productCenter/productList/utils/columns.ts

@@ -1,71 +1,15 @@
 const universal = [
   { field: 'TotalSales', title: '总销售额', align: 'right', width: 130, sortable: true, slots: { default: 'TotalSales_default', footer: 'TotalSales_footer' } },
   { field: 'TotalOrderItems', title: '总订单数', align: 'right', width: 130, sortable: true, slots: { default: 'TotalOrderItems_default', footer: 'TotalOrderItems_footer' } },
-  {
-    field: 'TotalUnitOrdered',
-    title: '总销量',
-    align: 'right',
-    width: 130,
-    sortable: true,
-    slots: { default: 'TotalUnitOrdered_default', footer: 'TotalUnitOrdered_footer' },
-  },
-  {
-    field: 'TotalAdSales',
-    title: '广告销售额',
-    align: 'right',
-    width: 130,
-    sortable: true,
-    slots: { default: 'TotalAdSales_default', footer: 'TotalAdSales_footer' },
-  },
-  {
-    field: 'TotalAdSalesSameSKU',
-    title: '本商品广告销售额',
-    align: 'right',
-    width: 180,
-    sortable: true,
-    slots: { default: 'TotalAdSalesSameSKU_default', footer: 'TotalAdSalesSameSKU_footer' },
-  },
-  {
-    field: 'TotalAdPurchases',
-    title: '广告订单数',
-    align: 'right',
-    width: 130,
-    sortable: true,
-    slots: { default: 'TotalAdPurchases_default', footer: 'TotalAdPurchases_footer' },
-  },
-  {
-    field: 'TotalAdPurchasesSameSKU',
-    title: '本商品广告订单数',
-    align: 'right',
-    width: 180,
-    sortable: true,
-    slots: { default: 'TotalAdPurchasesSameSKU_default', footer: 'TotalAdPurchasesSameSKU_footer' },
-  },
-  {
-    field: 'TotalAdUnitOrdered',
-    title: '广告销量',
-    align: 'right',
-    width: 130,
-    sortable: true,
-    slots: { default: 'TotalAdUnitOrdered_default', footer: 'TotalAdUnitOrdered_footer' },
-  },
-  {
-    field: 'TotalAdUnitOrderedSameSKU',
-    title: '本商品广告销量',
-    align: 'right',
-    width: 180,
-    sortable: true,
-    slots: { default: 'TotalAdUnitOrderedSameSKU_default', footer: 'TotalAdUnitOrderedSameSKU_footer' },
-  },
-  {
-    field: 'Spend',
-    title: '花费',
-    align: 'right',
-    width: 130,
-    sortable: true,
-    showOverflow: true,
-    slots: { default: 'Spend_default', footer: 'Spend_footer' },
-  },
+  { field: 'TotalUnitOrdered', title: '总销量', align: 'right', width: 130, sortable: true, slots: { default: 'TotalUnitOrdered_default', footer: 'TotalUnitOrdered_footer' } },
+  { field: 'SAP', title: '单均价', align: 'right', width: 130, sortable: true, slots: { default: 'SAP_default', footer: 'SAP_footer' } },
+  { field: 'TotalAdSales', title: '广告销售额', align: 'right', width: 130, sortable: true, slots: { default: 'TotalAdSales_default', footer: 'TotalAdSales_footer' } },
+  { field: 'TotalAdSalesSameSKU', title: '本商品广告销售额', align: 'right', width: 180, sortable: true, slots: { default: 'TotalAdSalesSameSKU_default', footer: 'TotalAdSalesSameSKU_footer' } },
+  { field: 'TotalAdPurchases', title: '广告订单数', align: 'right', width: 130, sortable: true, slots: { default: 'TotalAdPurchases_default', footer: 'TotalAdPurchases_footer' } },
+  { field: 'TotalAdPurchasesSameSKU', title: '本商品广告订单数', align: 'right', width: 180, sortable: true, slots: { default: 'TotalAdPurchasesSameSKU_default', footer: 'TotalAdPurchasesSameSKU_footer' } },
+  { field: 'TotalAdUnitOrdered', title: '广告销量', align: 'right', width: 130, sortable: true, slots: { default: 'TotalAdUnitOrdered_default', footer: 'TotalAdUnitOrdered_footer' } },
+  { field: 'TotalAdUnitOrderedSameSKU', title: '本商品广告销量', align: 'right', width: 180, sortable: true, slots: { default: 'TotalAdUnitOrderedSameSKU_default', footer: 'TotalAdUnitOrderedSameSKU_footer' } },
+  { field: 'Spend', title: '花费', align: 'right', width: 130, sortable: true, showOverflow: true, slots: { default: 'Spend_default', footer: 'Spend_footer' } },
   { field: 'ACOS', title: 'ACOS', align: 'right', width: 130, sortable: true, slots: { default: 'ACOS_default', footer: 'ACOS_footer' } },
   { field: 'ROAS', title: 'ROAS', align: 'right', width: 130, sortable: true, slots: { default: 'ROAS_default', footer: 'ROAS_footer' } },
   { field: 'TACOS', title: 'TACOS', align: 'right', width: 130, sortable: true, slots: { default: 'TACOS_default', footer: 'TACOS_footer' } },
@@ -74,151 +18,40 @@ const universal = [
   { field: 'CPC', title: '点击成本', align: 'right', width: 130, sortable: true, slots: { default: 'CPC_default', footer: 'CPC_footer' } },
   { field: 'CPO', title: '总订单成本', align: 'right', width: 130, sortable: true, slots: { default: 'CPO_default', footer: 'CPO_footer' } },
   { field: 'CPA', title: '广告订单成本', align: 'right', width: 180, sortable: true, slots: { default: 'CPA_default', footer: 'CPA_footer' } },
-  {
-    field: 'Impression',
-    title: '曝光量',
-    align: 'right',
-    width: 130,
-    sortable: true,
-    slots: { default: 'Impression_default', footer: 'Impression_footer' },
-  },
+  { field: 'Impression', title: '曝光量', align: 'right', width: 130, sortable: true, slots: { default: 'Impression_default', footer: 'Impression_footer' } },
   { field: 'Click', title: '点击量', align: 'right', width: 130, sortable: true, slots: { default: 'Click_default', footer: 'Click_footer' } },
-  {
-    field: 'Sessions',
-    title: '会话次数',
-    align: 'right',
-    width: 150,
-    sortable: true,
-    slots: { default: 'Sessions_default', footer: 'Sessions_footer' },
-  },
-  {
-    field: 'ProductCr',
-    title: '商品会话百分比',
-    align: 'right',
-    width: 150,
-    sortable: true,
-    slots: { default: 'ProductCr_default', footer: 'ProductCr_footer' },
-  },
-  {
-    field: 'PageViews',
-    title: '页面浏览量',
-    align: 'right',
-    width: 130,
-    sortable: true,
-    slots: { default: 'PageViews_default', footer: 'PageViews_footer' },
-  },
-  {
-    field: 'BuyBoxPercentage',
-    title: '推荐报价（购买按钮）百分比',
-    align: 'right',
-    width: 180,
-    sortable: true,
-    showHeaderOverflow: true,
-    slots: { default: 'BuyBoxPercentage_default', footer: 'BuyBoxPercentage_footer' },
-  },
+  { field: 'Sessions', title: '会话次数', align: 'right', width: 150, sortable: true, slots: { default: 'Sessions_default', footer: 'Sessions_footer' } },
+  { field: 'ProductCr', title: '商品会话百分比', align: 'right', width: 150, sortable: true, slots: { default: 'ProductCr_default', footer: 'ProductCr_footer' } },
+  { field: 'PageViews', title: '页面浏览量', align: 'right', width: 130, sortable: true, slots: { default: 'PageViews_default', footer: 'PageViews_footer' } },
+  { field: 'BuyBoxPercentage', title: '推荐报价（购买按钮）百分比', align: 'right', width: 180, sortable: true, showHeaderOverflow: true, slots: { default: 'BuyBoxPercentage_default', footer: 'BuyBoxPercentage_footer' } },
   { field: 'FBAQuantity', title: 'FBA库存', align: 'right', width: 130, sortable: true, slots: { footer: 'FBAQuantity_footer' } },
-  {
-    field: 'FBMQuantity',
-    title: 'FBM库存',
-    align: 'right',
-    width: 130,
-    sortable: true,
-    showHeaderOverflow: true,
-    slots: { footer: 'FBMQuantity_footer' },
-  },
+  { field: 'FBMQuantity', title: 'FBM库存', align: 'right', width: 130, sortable: true, showHeaderOverflow: true, slots: { footer: 'FBMQuantity_footer' } },
 ]
 
-export const productLineColumns = [
-  {
-    field: 'productlineName',
-    title: '产品线',
-    align: 'left',
-    fixed: 'left',
-    width: 180,
-    sortable: true,
-    slots: { default: 'productlineName_default', footer: 'productlineName_footer' },
-  },
-  { field: 'SAP', title: '单均价', align: 'right', width: 130, sortable: true, slots: { default: 'SAP_default', footer: 'SAP_footer' } },
-  ...universal,
-]
+export const productLineColumns = [{ field: 'productlineName', title: '产品线', align: 'left', fixed: 'left', width: 180, sortable: true, slots: { default: 'productlineName_default', footer: 'productlineName_footer' } }, ...universal]
 
 export const parentAsinColumns = [
-  {
-    field: 'parentAsin',
-    title: '父ASIN',
-    align: 'left',
-    fixed: 'left',
-    width: 180,
-    sortable: true,
-    slots: { default: 'productlineName_default', footer: 'parentAsin_footer' },
-  },
-  {
-    field: 'TotalSales',
-    title: '最佳SKU',
-    align: 'right',
-    width: 130,
-    sortable: true,
-    slots: { default: 'TotalSales_default', footer: 'TotalSales_footer' },
-  },
-  { field: 'SAP', title: '单均价', align: 'right', width: 130, sortable: true, slots: { default: 'SAP_default', footer: 'SAP_footer' } },
+  { field: 'parentAsin', title: '父ASIN', align: 'left', fixed: 'left', width: 180, sortable: true, slots: { default: 'parentAsin_default', footer: 'parentAsin_footer' } },
+  { field: 'bestSku', title: '最佳SKU', align: 'right', width: 260, sortable: true, slots: { default: 'bestSku_default', footer: 'bestSku_footer' } },
   // { field: 'TACOS', title: '预警TACOS', align: 'right', width: 130, slots: { default: 'TACOS_default', footer: 'TACOS_footer' } },
   ...universal,
 ]
 
 export const asinColumns = [
-  {
-    field: 'Asin',
-    title: 'ASIN',
-    align: 'left',
-    fixed: 'left',
-    width: 180,
-    sortable: true,
-    slots: { default: 'productlineName_default', footer: 'Asin_footer' },
-  },
-  {
-    field: 'productlineName',
-    title: '产品线',
-    align: 'left',
-    fixed: 'left',
-    width: 180,
-    sortable: true,
-    slots: { default: 'productlineName_default', footer: 'productlineName_footer' },
-  },
-  {
-    field: 'rank',
-    title: '排名',
-    align: 'left',
-    fixed: 'left',
-    width: 180,
-    sortable: true,
-    slots: { default: 'productlineName_default', footer: 'rank_footer' },
-  },
-  { field: 'SAP', title: '单均价', align: 'right', width: 130, sortable: true, slots: { default: 'SAP_default', footer: 'SAP_footer' } },
+  { field: 'Asin', title: 'ASIN', align: 'left', fixed: 'left', width: 180, sortable: true, slots: { default: 'Asin_default', footer: 'Asin_footer' } },
+  { field: 'productlineName', title: '产品线', align: 'left', fixed: 'left', width: 180, sortable: true, slots: { default: 'productlineName_default', footer: 'productlineName_footer' } },
+  { field: 'rank', title: '排名', align: 'left', fixed: 'left', width: 120, sortable: true, slots: { default: 'rank_default', footer: 'rank_footer' } },
   // { field: 'TACOS', title: '预警TACOS', align: 'right', width: 130, slots: { default: 'TACOS_default', footer: 'TACOS_footer' } },
   ...universal,
 ]
 
 export const skuColumns = [
-  { field: 'sku', title: 'SKU', align: 'left', fixed: 'left', width: 130, slots: { default: 'sku_default', footer: 'sku_footer' } },
-  {
-    field: 'productlineName',
-    title: '产品线',
-    align: 'left',
-    width: 180,
-    slots: { default: 'productlineName_default', footer: 'productlineName_footer' },
-  },
-  { field: 'status', title: '商品状态', align: 'right', width: 130, slots: { default: 'status_default', footer: 'status_footer' } },
-  { field: 'time', title: '排名', align: 'right', width: 130, slots: { default: 'time_default', footer: 'time_footer' } },
-  { field: 'SAP', title: '单均价', align: 'right', width: 130, sortable: true, slots: { default: 'SAP_default', footer: 'SAP_footer' } },
-  { field: 'parentAsin', title: '父ASIN', align: 'right', width: 130, slots: { default: 'parentAsin_default', footer: 'parentAsin_footer' } },
-  {
-    field: 'launchDatetime',
-    title: '上架时间',
-    align: 'right',
-    width: 130,
-    sortable: true,
-    slots: { default: 'launchDatetime_default', footer: 'launchDatetime_footer' },
-  },
+  { field: 'sku', title: 'SKU', align: 'left', fixed: 'left', width: 260, slots: { default: 'sku_default', footer: 'sku_footer' } },
+  { field: 'productlineName', title: '产品线', align: 'left', width: 180, slots: { default: 'productlineName_default', footer: 'productlineName_footer' } },
+  { field: 'status', title: '商品状态', align: 'center', width: 80, slots: { default: 'status_default', footer: 'status_footer' } },
+  { field: 'rank', title: '排名', align: 'left', width: 130, slots: { default: 'rank_default', footer: 'rank_footer' } },
+  { field: 'parentAsin', title: '父ASIN', align: 'left', width: 130, slots: { default: 'parentAsin_default', footer: 'parentAsin_footer' } },
+  { field: 'launchDatetime', title: '上架时间', align: 'center', width: 120, sortable: true, slots: { default: 'launchDatetime_default', footer: 'launchDatetime_footer' } },
   ...universal,
   // { field: 'ABP', title: '异常推广', align: 'right', width: 130, slots: { default: 'ABP_default', footer: 'ABP_footer' } },
   // { field: 'TACOS', title: '预警TACOS', align: 'right', width: 130, slots: { default: 'TACOS_default', footer: 'TACOS_footer' } },