xin-school/web/pages/finance/transaction/index.tsx

import { Tag, Typography } from 'antd';
import React from 'react';
import XinTable from '@/components/XinTable';
import type { XinTableColumn, XinTableProps } from '@/components/XinTable/typings';
import type IPaymentTransaction from '@/domain/iPaymentTransaction';
import { useTranslation } from 'react-i18next';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';

const { Title, Text } = Typography;
dayjs.extend(relativeTime);

const statusMap: Record<number, { color: string; text: string }> = {
  0: { color: 'processing', text: '待支付' },
  1: { color: 'success', text: '支付成功' },
  2: { color: 'error', text: '支付失败' },
  3: { color: 'warning', text: '已退款' },
};

const Table: React.FC = () => {
  const { t } = useTranslation();

  const columns: XinTableColumn<IPaymentTransaction>[] = [
    {
      title: t('finance.transaction.id'),
      dataIndex: 'id',
      hideInForm: true,
      sorter: true,
      align: 'center',
      width: 80,
    },
    {
      title: t('finance.transaction.transaction_no'),
      dataIndex: 'transaction_no',
      valueType: 'text',
      align: 'center',
      width: 220,
    },
    {
      title: t('finance.transaction.out_trade_no'),
      dataIndex: 'out_trade_no',
      valueType: 'text',
      align: 'center',
      width: 200,
    },
    {
      title: t('finance.transaction.pay_type'),
      dataIndex: 'pay_type',
      valueType: 'radioButton',
      fieldProps: {
        options: [
          { value: 'wechat', label: t('finance.transaction.pay_type.wechat') },
          { value: 'alipay', label: t('finance.transaction.pay_type.alipay') },
        ],
      },
      render: (value: string) => (
        <Tag>{value === 'wechat' ? t('finance.transaction.pay_type.wechat') : t('finance.transaction.pay_type.alipay')}</Tag>
      ),
      filters: [
        { text: t('finance.transaction.pay_type.wechat'), value: 'wechat' },
        { text: t('finance.transaction.pay_type.alipay'), value: 'alipay' },
      ],
      align: 'center',
      width: 100,
    },
    {
      title: t('finance.transaction.amount'),
      dataIndex: 'amount',
      valueType: 'text',
      align: 'center',
      width: 120,
      render: (value: string) => `¥${value || '0.00'}`,
    },
    {
      title: t('finance.transaction.status'),
      dataIndex: 'status',
      valueType: 'radioButton',
      fieldProps: {
        options: [
          { value: 0, label: '待支付' },
          { value: 1, label: '支付成功' },
          { value: 2, label: '支付失败' },
          { value: 3, label: '已退款' },
        ],
      },
      render: (value: number) => {
        const item = statusMap[value] || { color: 'default', text: '未知' };
        return <Tag color={item.color}>{item.text}</Tag>;
      },
      filters: [
        { text: '待支付', value: 0 },
        { text: '支付成功', value: 1 },
        { text: '支付失败', value: 2 },
        { text: '已退款', value: 3 },
      ],
      align: 'center',
      width: 100,
    },
    {
      title: t('finance.transaction.business_type'),
      dataIndex: 'business_type',
      valueType: 'radioButton',
      fieldProps: {
        options: [
          { value: 'task', label: t('finance.transaction.business_type.task') },
          { value: 'deposit', label: t('finance.transaction.business_type.deposit') },
          { value: 'order', label: t('finance.transaction.business_type.order') },
        ],
      },
      render: (value: string) => {
        const labels: Record<string, string> = {
          task: t('finance.transaction.business_type.task'),
          deposit: t('finance.transaction.business_type.deposit'),
          order: t('finance.transaction.business_type.order'),
        };
        return <Tag>{labels[value] || value}</Tag>;
      },
      filters: [
        { text: t('finance.transaction.business_type.task'), value: 'task' },
        { text: t('finance.transaction.business_type.deposit'), value: 'deposit' },
        { text: t('finance.transaction.business_type.order'), value: 'order' },
      ],
      align: 'center',
      width: 110,
    },
    {
      title: t('finance.transaction.business_id'),
      dataIndex: 'business_id',
      valueType: 'text',
      align: 'center',
      width: 90,
    },
    {
      title: t('finance.transaction.user_id'),
      dataIndex: 'user_id',
      valueType: 'text',
      align: 'center',
      width: 90,
    },
    {
      title: t('finance.transaction.paid_at'),
      dataIndex: 'paid_at',
      valueType: 'date',
      hideInSearch: true,
      align: 'center',
      width: 180,
      render: (value: string) => (value ? dayjs(value).format('YYYY-MM-DD HH:mm:ss') : '-'),
    },
    {
      title: t('finance.transaction.created_at'),
      hideInForm: true,
      hideInSearch: true,
      dataIndex: 'created_at',
      align: 'center',
      width: 160,
      render: (value: string) => (value ? dayjs(value).fromNow() : '-'),
    },
  ];

  const tableProps: XinTableProps<IPaymentTransaction> = {
    api: '/finance/payment-transaction',
    columns,
    rowKey: 'id',
    accessName: 'finance.transaction',
    addShow: false,
    editShow: false,
    scroll: { x: 1500 },
    formProps: {
      grid: true,
      colProps: { span: 12 },
      rowProps: { gutter: [30, 0] },
      layout: 'vertical',
    },
    modalProps: {
      width: 800,
    },
    cardProps: {
      variant: 'borderless',
    },
    pagination: {
      size: 'small',
      style: { marginBottom: 0 },
    },
  };

  return (
    <>
      <div className="mb-5">
        <Title level={3}>{t('finance.transaction.page.title')}</Title>
        <Text type="secondary">{t('finance.transaction.page.description')}</Text>
      </div>
      <XinTable<IPaymentTransaction> {...tableProps} />
    </>
  );
};

export default Table;