pay-admin/src/common/components/schema/MyColumns.tsx

import { MyResponseType, renderTextHelper } from '@/common';
import { Apis } from '@/gen/Apis';
import { ProColumns } from '@ant-design/pro-components';
import { Popconfirm, Space, Tag } from 'antd';

type ReturnType = ProColumns<Record<string, any>, 'text'>;

export const MyColumns = {
  ID(props?: ReturnType): ReturnType {
    return { title: 'ID', dataIndex: 'id', hideInSearch: true, ...props };
  },
  DayStatus: (start: string, end: string) => {
    const now = new Date();
    const startDate = new Date(start);
    const endDate = new Date(end);
    // 判断当前时间与开始时间和结束时间的关系
    if (now < startDate) {
      return (
        <Tag color="green" style={{ cursor: 'pointer' }}>
          未开始
        </Tag>
      );
    } else if (now > endDate) {
      return (
        <Tag color="default" style={{ cursor: 'pointer' }}>
          已结束
        </Tag>
      );
    } else {
      return (
        <Tag color="#f50" style={{ cursor: 'pointer' }}>
          进行中
        </Tag>
      );
    }
  },
  Images({ ...rest }: ReturnType): ReturnType {
    return {
      hideInSearch: true,
      renderText: renderTextHelper.Images,
      ...rest,
    };
  },
  SoftDelete({
    onRestore,
    onSoftDelete,
    ...rest
  }: {
    onRestore: (data: { id: number }) => Promise<MyResponseType>;
    onSoftDelete: (data: { id: number }) => Promise<MyResponseType>;
  } & ReturnType): ReturnType {
    return {
      title: '启/禁用',
      render: (_, item, index, action) =>
        item?.deleted_at ? (
          <Popconfirm
            title="启用"
            description="您确认启用吗？"
            onConfirm={() => {
              onRestore?.({ id: item.id }).then(() => action?.reload());
            }}
            okText="Yes"
            cancelText="No"
          >
            <Tag color="gray" style={{ cursor: 'pointer' }}>
              已禁用
            </Tag>
          </Popconfirm>
        ) : (
          <Popconfirm
            title="禁用"
            description="您确认禁用吗？"
            onConfirm={() => {
              onSoftDelete?.({ id: item.id }).then(() => action?.reload());
            }}
            okText="Yes"
            cancelText="No"
          >
            <Tag color="green" style={{ cursor: 'pointer' }}>
              已启用
            </Tag>
          </Popconfirm>
        ),
      search: false,
      ...rest,
    };
  },
  CreatedAt(props?: ReturnType): ReturnType {
    return {
      title: '创建时间',
      dataIndex: 'created_at',
      hideInSearch: true,
      valueType: 'dateTime',
      sorter: true,
      align: 'right',
      ...props,
    };
  },
  UpdatedAt(): ReturnType {
    return {
      title: '最近修改',
      dataIndex: 'updated_at',
      hideInSearch: true,
      valueType: 'dateTime',
      sorter: true,
      align: 'right',
    };
  },
  FinishedAt(): ReturnType {
    return {
      title: '完成时间',
      dataIndex: 'finished_at',
      hideInSearch: true,
      valueType: 'dateTime',
      sorter: true,
      align: 'right',
    };
  },
  Boolean({ label, ...rest }: { label?: string[] } & ReturnType): ReturnType {
    const option: { value: boolean; label: string; color: string }[] = [
      { value: false, label: label?.[0] ?? '否', color: 'gray' },
      { value: true, label: label?.[1] ?? '是', color: 'green' },
    ];
    return {
      align: 'center',
      request: async () => option,
      renderText(text: boolean) {
        const item = option.find((item) => item.value === Boolean(text));
        return <Tag color={item?.color}>{item?.label}</Tag>;
      },
      ...rest,
    };
  },
  YesOrNo({
    yes = '已',
    no = '未',
    ...rest
  }: {
    yes?: string;
    no?: string;
  } & ReturnType): ReturnType {
    return {
      align: 'center',
      renderText(text) {
        return (
          <Tag bordered={false} color={text ? 'processing' : 'error'}>
            {text ? yes : no}
          </Tag>
        );
      },
      ...rest,
    };
  },
  EnumTag({ ...rest }: ReturnType): ReturnType {
    return {
      align: 'center',
      renderText(text: string | number) {
        const _enum = rest.valueEnum ?? {};
        if (!_enum) return <>-</>;
        const item = _enum[text] ?? undefined;
        if (!item) return <>-</>;
        return <Tag color={item.color}>{item.text}</Tag>;
      },
      ...rest,
    };
  },
  Option({ ...rest }: ReturnType): ReturnType {
    return {
      title: '操作',
      valueType: 'option',
      align: 'right',
      fixed: 'right',
      ...rest,
    };
  },
  Network(props?: ReturnType): ReturnType {
    return {
      title: 'network',
      ...props,
      render: (_: any, item: any) => {
        const data = props?.dataIndex === 'network' ? item.network : item;
        return (
          <Space>
            <img width={24} src={data.icon[0].url} />
            <div>{data.name}</div>
          </Space>
        );
      },
      valueType: 'select',
      key: 'networks_id',
      fieldProps: {
        fieldNames: { value: 'id', label: 'name' },
        optionRender: (item: any) => {
          return (
            <Space>
              <img width={24} src={item.data.icon[0].url} />
              <div>{item.data.name}</div>
            </Space>
          );
        },
      },
      request: async () => (await Apis.Select.Networks()).data,
    };
  },
  Token({ ...rest }) {
    return {
      title: 'Token',
      renderText(text: string) {
        return <Tag color="blue">{text}</Tag>;
      },
      ...rest,
    };
  },
};