xingyou/vue/backend/src/views/product/product/table.data.ts

import type { BasicTableProps, BasicColumn } from '/@/components/Table';
import type { DynamicProps } from '/#/utils';
import { api } from '/@/api/eav/index';
import { h, unref } from 'vue';
import { Avatar, Button } from 'ant-design-vue';
import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
import { useMessage } from '/@/hooks/web/useMessage';

const { clipboardRef, copiedRef } = useCopyToClipboard();
const { createMessage } = useMessage();

type Props = Partial<DynamicProps<BasicTableProps>>;

const getBasicColumns: BasicColumn[] = [
  {
    title: '标题',
    dataIndex: 'title',
    width: 150,
    customRender: ({ record }) => {
      return h('span', [
        h(Avatar, { src: record.logo, style: { marginRight: '5px' } }),
        h('span', record.title),
      ]);
    },
  },
  {
    title: '域名',
    dataIndex: 'logo',
    customRender: ({ record }) => {
      return h('div', [
        h('div', [h('a', { target: '_blank', href: 'https://www.xingyousoft.com' }, '官网')]),
        h(
          Button,
          {
            onclick: () => {
              clipboardRef.value = 'http://www.xingyousoft.com/download/' + record.mid;
              if (unref(copiedRef)) {
                createMessage.warning('下载地址 复制成功！');
              }
            },
          },
          {
            default: () => {
              return '复制下载地址';
            },
          },
        ),
      ]);
    },
  },
  {
    title: '月价',
    dataIndex: 'price1',
    customRender: ({ record }) => {
      return h('div', [
        h('div', '月价: ' + record.price1),
        h('div', '半年价: ' + record.price2),
        h('div', '一年价: ' + record.price3),
        h('div', '永久价: ' + record.price4),
      ]);
    },
  },
  {
    title: '7天价',
    dataIndex: 'price5',
  },
  {
    title: '状态',
    dataIndex: 'status',
    slots: { customRender: 'status' },
  },
  {
    title: '管理',
    slots: { customRender: 'menu' },
  },
];

const registerTableProps: Props = {
  title: '产品列表',
  titleHelpMessage: '比如:后台管理模块,前台管理模块，命名空间必须与代码模块保持一致！',
  api: () => {
    return api('product_list', {});
  },
  columns: getBasicColumns,
  bordered: true,
  showTableSetting: true,
  loading: true,
  pagination: {
    defaultPageSize: 20,
  },
  actionColumn: {
    width: 280,
    title: '操作',
    dataIndex: 'action',
    slots: { customRender: 'action' },
  },
};

export { registerTableProps };