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

import { MyResponseType, renderTextHelper } from '@/common';
import { ProColumns } from '@ant-design/pro-components';
import { Image, Popconfirm, 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="是"
            cancelText="否"
          >
            <Tag color="gray" style={{ cursor: 'pointer' }}>
              已禁用
            </Tag>
          </Popconfirm>
        ) : (
          <Popconfirm
            title="禁用"
            description="您确认禁用吗？"
            onConfirm={() => {
              onSoftDelete?.({ id: item.id }).then(() => action?.reload());
            }}
            okText="是"
            cancelText="否"
          >
            <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: 'left',
      renderText(text: any) {
        const _enum: any = rest?.valueEnum ?? {};
        if (!_enum) return <>-</>;
        const item = _enum[text] ?? undefined;
        if (!item) return <>-</>;
        return <Tag>{item.text}</Tag>;
        // return <Tag style={{ color: item?.color }}>{item.text}</Tag>;
        //修改列表的标签样式
      },
      ...rest,
    };
  },
  Option({ ...rest }: ReturnType): ReturnType {
    return {
      title: '操作',
      valueType: 'option',
      align: 'right',
      fixed: 'right',
      ...rest,
    };
  },

  Token({ ...rest }) {
    return {
      title: 'Token',
      renderText(text: string) {
        return <Tag color="blue">{text}</Tag>;
      },
      ...rest,
    };
  },
  Image({ ...rest }) {
    return {
      search: false,
      renderText(text: { url: string }[]) {
        return <Image src={text[0]?.url} width={50} height={50} />;
      },
      ...rest,
    };
  },
  Ffdefault({
    Ffdefault,
    dataIndex,
    ...rest
  }: {
    Ffdefault: (data: any) => Promise<MyResponseType>;
    dataIndex: any;
  } & ReturnType): ReturnType {
    return {
      title: '是否默认',
      renderText(text: boolean, record: any, index, action: any) {
        let form: any = { id: record.id };
        form[dataIndex] = record[dataIndex] ? 0 : 1;
        return (
          <Popconfirm
            title="提示"
            description="您确认要修改默认吗？"
            onConfirm={() => {
              Ffdefault?.(form).then(() => action?.reload());
            }}
            okText="是"
            cancelText="否"
          >
            <Tag
              color={record[dataIndex] ? 'green' : 'gray'}
              style={{ cursor: 'pointer' }}
            >
              {record[dataIndex] ? '是' : '否'}
            </Tag>
          </Popconfirm>
        );
      },
      ...rest,
    };
  },
};