zfb_mp/src/views/product/list.data.ts

import { BasicColumn, FormProps } from '/@/components/Table';

import { UnSaleApi, EnSaleApi } from '/@/api/product/list';
import { h } from 'vue';
import { Switch } from 'ant-design-vue';
import { useMessage } from '/@/hooks/web/useMessage';
import { useI18n } from '/@/hooks/web/useI18n';
import { useUserStore } from '/@/store/modules/user';
const userStore = useUserStore();
const { getCheckRole } = userStore;
export const searchForm: Partial<FormProps> = {
  labelWidth: 100,
  schemas: [
    {
      field: 'name',
      label: '商品名称',
      component: 'Input',
      componentProps: {
        placeholder: '请输入商品名称',
        maxLength: 100,
      },
      colProps: {
        xl: 6,
        xxl: 6,
      },
    },
    {
      field: 'brandName',
      label: '直播间名称',
      component: 'Input',
      componentProps: {
        placeholder: '请输入直播间名称',
        maxLength: 100,
      },
      colProps: {
        xl: 6,
        xxl: 6,
      },
    },
  ],
};
export const columns: BasicColumn[] = [
  // {
  //   title: 'ID',
  //   dataIndex: 'id',
  //   fixed: 'left',
  //   width: 60,
  // },
  {
    title: '商品名称',
    dataIndex: 'name',
    width: 160,
  },
  // {
  //   title: '商品描述',
  //   dataIndex: 'goodsSimpleDesc',
  //   width: 150,
  // },
  {
    title: '购买链接',
    dataIndex: 'realShopUrl',
    slots: { customRender: 'realShopUrl' },
    width: 150,
  },
  {
    title: '商品分类',
    dataIndex: 'categoryName',
    // slots: { customRender: 'productType' },
    sorter: true,
    width: 120,
  },
  {
    title: '直播间名称',
    dataIndex: 'brandName',
    // customRender: ({ record }) => {
    //   return record.steamRoom.name as unknown as {};
    // },
    sorter: true,
    width: 120,
  },
  {
    title: '零售价格',
    dataIndex: 'retailPrice',
    sorter: true,
    width: 80,
  },
  {
    title: '销售量',
    dataIndex: 'sellVolume',
    sorter: true,
    width: 80,
  },
  {
    title: '市场价',
    dataIndex: 'marketPrice',
    sorter: true,
    width: 80,
  },
  {
    title: '创建时间',
    dataIndex: 'addTime',
    slots: { customRender: 'addTime' },
    sorter: true,
    width: 140,
  },
  {
    title: '上架状态',
    dataIndex: 'isOnSale',
    width: 180,
    customRender: ({ record }) => {
      if (!Reflect.has(record, 'pendingStatus')) {
        record.pendingStatus = false;
      }
      return h(Switch, {
        checked: record.isOnSale === 1,
        checkedChildren: '上架',
        unCheckedChildren: '下架',
        loading: false,
        onChange: async (checked: boolean) => {
          record.pendingStatus = true;
          const id: string = record.id || '';
          const newStatus = checked ? 1 : 0;
          const { createMessage } = useMessage();
          const { t } = useI18n();
          if (checked) {
            Reflect.set(record, 'isOnSale', newStatus);
            await EnSaleApi([id]);
          } else {
            Reflect.set(record, 'isOnSale', newStatus);
            await UnSaleApi([id]);
          }
          createMessage.success(t('common.optSuccess'));
          // createMessage.info(`暂未接入` + newStatus);
        },
      });
    },
  },
  {
    title: '操作',
    dataIndex: '',
    slots: { customRender: 'action' },
    ifShow: !getCheckRole('tourist'),
    fixed: 'right',
    width: 120,
  },
];