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

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


const countryInfoStore = useCountryInfoStore();

export const productColumns = (handleMonitor: Function) => [
  { type: 'checkbox', width: 50, align: 'center', fixed: 'left' },
  { type: 'seq', title: 'No.', width: 60, align: 'center' },
  {
    field: 'is_monitor', title: '监控管理', width: 90, align: 'center',
    slots: {
      default({ row }: any) {
        return <el-switch v-model={ row.is_monitor }
                          onChange={ (newVal: any) => handleMonitor({ id: row.id, isMonitor: newVal }) } />;
      }
    }
  },
  {
    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.sku ? row.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.platform_number ? row.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.tag) }>
              { row.tag ? row.tag : '--' }
            </el-tag>
        );
      }
    }
  },
  {
    field: 'brand', title: '品 牌', minWidth: 'auto', align: 'center',
    slots: {
      default({ row }: any) {
        return (
            <el-tag type={ getTagType.value(row.brand) } effect="plain" round>
              { row.brand ? row.brand : '--' }
            </el-tag>
        );
      }
    }
  },
  {
    field: 'price_info', title: '价 格', minWidth: 'auto', align: 'center',
    slots: {
      default({ row }: any) {
        return (
            <div v-if={ row.price > 0 } class={ `font-medium text-left` }>
              <p>现 价：{ row.currency_code + '‎' + row.price }</p>
              <p>折 扣：{ row.discount > 0 ? row.discount + '%' : '-' }</p>
              <p>优惠劵：{ !row || row.coupon <= 0 ? '-' : row.currency_code + '‎' + row.coupon }</p>
            </div>
        );
      }
    }
  },
  {
    field: 'show_price', title: '展示价格', minWidth: 'auto', align: 'center',
    slots: {
      default({ row }: any) {
        return <div class={ 'font-medium' }>{ row.show_price ? row.currency_code + row.show_price : '--' }</div>;
      }
    }
  },
  {
    field: 'activity_price', title: '平时活动售价', minWidth: 'auto', align: 'center',
    slots: {
      default({ row }: any) {
        return <div
            class={ 'font-medium' }>{ row.activity_price ? row.currency_code + row.activity_price : '--' }</div>;
      }
    }
  },
  {
    field: 'minimum_price', title: '最低活动售价', minWidth: 'auto', align: 'center',
    slots: {
      default({ row }: any) {
        return <div class={ 'font-medium' }>{ row.minimum_price ? row.currency_code + row.minimum_price : '--' }</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' }
  }
];