opt_web/src/views/product-manage/product-monitor/ColumnsTsx.tsx

import { useCountryInfoStore } from '/@/stores/countryInfo';
import { getTagType } from '/@/utils/useTagColor';


const countryInfoStore = useCountryInfoStore();

export const productColumns = [
  { type: 'checkbox', width: 50, align: 'center', fixed: 'left' },
  { type: 'seq', title: 'No.', width: 60, align: 'center' },
  {
    field: 'product_info', title: '商品信息', minWidth: 'auto', align: 'center',
    slots: { default: 'product_info' }
  },
  {
    field: 'sku', title: 'SKU', minWidth: 'auto', align: 'center',
    slots: {
      default({ row }: any) {
        return <span class={ 'font-medium' }>{ row.goods.sku ? row.goods.sku : '--' }</span>;
      }
    }
  },
  {
    field: 'country_code', title: '国 家', minWidth: 'auto', align: 'center',
    slots: {
      default({ row }: any) {
        const country = countryInfoStore.countries.find(c => c.code === row.country_code);
        const color = country ? country.color : '#3875F6';
        return (
            <el-tag effect="plain" round
                    style={ { color: color, borderColor: color } }>{ country ? country.name : '--' }
            </el-tag>
        );
      }
    }
  },
  {
    field: 'platform_number', title: '平台编号', minWidth: 'auto', align: 'center',
    slots: {
      default({ row }: any) {
        return <span class={ 'font-medium' }>{ row.goods.platform_number ? row.goods.platform_number : '--' }</span>;
      }
    }
  },
  {
    field: 'shop_name', title: '店 铺', minWidth: 'auto', align: 'center',
    slots: {
      default({ row }: any) {
        return (
            <el-tag type={ getTagType.value(row.shop_name) }>
              { row.shop_name ? row.shop_name : '--' }
            </el-tag>
        );
      }
    }
  },
  {
    field: 'tag', title: '分 组',  minWidth: 'auto', align: 'center',
    slots: {
      default({ row }: any) {
        return (
            <el-tag type={ getTagType.value(row.goods.tag) }>
              { row.goods.tag ? row.goods.tag : '--' }
            </el-tag>
        );
      }
    }
  },
  {
    field: 'brand', title: '品 牌', minWidth: 'auto', align: 'center',
    slots: {
      default({ row }: any) {
        return (
            <el-tag type={ getTagType.value(row.goods.brand) } effect="plain" round>
              { row.goods.brand ? row.goods.brand : '--' }
            </el-tag>
        );
      }
    }
  },
  {
    field: 'price_info', title: '价 格', minWidth: 'auto', align: 'center',
    slots: {
      default({ row }: any) {
        return (
            <div v-if={ row.goods.price > 0 } class={ `font-medium text-left` }>
              <p>现 价：{ row.goods.currency_code + '‎' + row.goods.price }</p>
              <p>折 扣：{ row.goods.discount > 0 ? row.goods.discount + '%' : '-' }</p>
              <p>优惠劵：{ !row || row.goods.coupon <= 0 ? '-' : row.goods.currency_code + '‎' + row.goods.coupon }</p>
            </div>
        );
      }
    }
  },
  {
    field: 'show_price', title: '展示价格', minWidth: 'auto', align: 'center',
    slots: {
      default({ row }: any) {
        return <div class={ 'font-medium' }>{ row.goods.show_price ? row.goods.currency_code + row.goods.show_price : '--' }</div>;
      }
    }
  },
  {
    field: 'activity_price', title: '平时活动售价', minWidth: 'auto', align: 'center',
    slots: {
      default({ row }: any) {
        return <div
            class={ 'font-medium' }>{ row.goods.activity_price ? row.goods.currency_code + row.goods.activity_price : '--' }</div>;
      }
    }
  },
  {
    field: 'minimum_price', title: '最低活动售价', minWidth: 'auto', align: 'center',
    slots: {
      default({ row }: any) {
        return <div class={ 'font-medium' }>{ row.goods.minimum_price ? row.goods.currency_code + row.goods.minimum_price : '--' }</div>;
      }
    }
  },
  {
    field: 'ratings', title: '子ASIN评分人数', minWidth: 'auto', align: 'center',
    slots: {
      default({ row }: any) {
        return <div class={ 'font-medium' }>{ row.goods.ratings ? row.goods.ratings : '--' }</div>;
      }
    }
  },
  {
    field: 'all_ratings', title: '亚马逊显示评分人数', minWidth: 'auto', align: 'center',
    slots: {
      default({ row }: any) {
        return <div class={ 'font-medium' }>{ row.goods.all_ratings ? row.goods.all_ratings : '--' }</div>;
      }
    }
  },
  {
    field: 'reviews', title: '子ASIN评论人数', minWidth: 'auto', align: 'center',
    slots: {
      default({ row }: any) {
        return <div class={ 'font-medium' }>{ row.goods.reviews ? row.goods.reviews : '--' }</div>;
      }
    }
  },
  {
    field: 'all_reviews', title: '亚马逊显示评论人数', minWidth: 'auto', align: 'center',
    slots: {
      default({ row }: any) {
        return <div class={ 'font-medium' }>{ row.goods.all_reviews ? row.goods.all_reviews : '--' }</div>;
      }
    }
  },
  {
    field: 'score', title: '子ASIN计算评分', minWidth: 'auto', align: 'center',
    slots: {
      default({ row }: any) {
        return <div class={ 'font-medium' }>{ row.goods.score ? row.goods.score : '--' }</div>;
      }
    }
  },
  {
    field: 'all_score', title: '亚马逊显示评分', minWidth: 'auto', align: 'center',
    slots: {
      default({ row }: any) {
        return <div class={ 'font-medium' }>{ row.goods.all_score ? row.goods.all_score : '--' }</div>;
      }
    }
  },
  {
    field: 'launch_date', title: '上架日期', minWidth: 'auto', align: 'center', sortable: true,
    slots: {
      default({ row }: any) {
        return <div class={ 'font-medium' }>{ row.launch_date ? row.launch_date : '--' }</div>;
      }
    }
  },
  {
    field: 'category', title: '类 目', minWidth: 'auto', align: 'center',
    slots: {
      default({ row }: any) {
        return <div class={ 'font-medium' }>{ row.category ? row.category : '--' }</div>;
      }
    }
  },
  {
    field: 'status', title: '状 态', minWidth: 'auto', align: 'center',
    slots: {
      default({ row }: any) {
        const statusText = row.status === 1 ? '在售' : '停售';
        const statusType = row.status === 1 ? 'success' : 'info';

        return (
            <el-tag type={ statusType }>
              { statusText }
            </el-tag>
        );
      }
    }
  },
  {
    field: 'update_datetime', title: '更新时间', minWidth: 'auto', align: 'center',
    slots: {
      default({ row }: any) {
        return <div class={ 'font-medium' }>{ row.update_datetime ? row.update_datetime : '--' }</div>;
      }
    }
  },
  {
    field: 'create_datetime', title: '创建时间', minWidth: 'auto', align: 'center',
    slots: {
      default({ row }: any) {
        return <div class={ 'font-medium' }>{ row.create_datetime ? row.create_datetime : '--' }</div>;
      }
    }
  },
  {
    field: 'operate', title: '操 作', width: 100, align: 'center', fixed: 'right',
    slots: { default: 'operate' }
  }
];