op-admin-ui/src/pages/message/sms/channel/table/index.tsx

import React, { useRef } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { ProTable } from '@ant-design/pro-components';

import type { ProColumns, ActionType } from '@ant-design/pro-components';
import { Button, Popconfirm, Spin, Tag } from 'antd';
import UpsertSmsChannelModalForm from './component/UpsertSmsChannelModalForm';
import { PlusOutlined } from '@ant-design/icons';
import { pageQuerySmsChannel } from '@/services/op-admin/message/sms';
/**
 * @author bianlanzhou
 * @since 2024-11-07
 * @desc 
 */
const SmsChannelTable: React.FC = () => {

  /** 引用 */
  const actionRef = useRef<ActionType>();

  /** 列定义 */
  const columns: ProColumns<SMS.Channel>[] = [
    {
      title: '序号',
      dataIndex: 'index',
      valueType: 'indexBorder',
      width: 48,
    },
    {
      title: '通道名称',
      dataIndex: 'channelName',
    },
    {
      title: '短信平台名称',
      dataIndex: 'platformName',
    },
    {
      title: '创建人',
      dataIndex: 'createUsername',
      search: false,
    },
    {
      title: '创建时间',
      dataIndex: 'gmtCreate',
      search: false,
    },
    {
      title: '修改人',
      dataIndex: 'modifyUsername',
      search: false,
    },
    {
      title: '修改时间',
      dataIndex: 'gmtModify',
      search: false,
    },
    {
      title: '状态',
      dataIndex: 'status',
      search: false,
      render: (_, record) => {
        if (record.status === 'draft') {
          return [<Tag key='status' color='orange'>草稿</Tag>]
        }
        if (record.status === 'ok') {
          return [<Tag key='status' color='blue'>已启用</Tag>]
        }
        if (record.status === 'draft') {
          return [<Tag key='status' color='red'>已停用</Tag>]
        }
        if (record.status === 'delete') {
          return [<Tag key='status' color='purple'>已删除</Tag>]
        }
        return [<Tag key='status' color='#f50'>未知</Tag>]
      }
    },
    {
      title: '操作',
      valueType: 'option',
      width: '10%',
      render: (_, record) => [
        <UpsertSmsChannelModalForm
          key="edit"
          trigger={
            <a
              key="edit"
            >
              编辑
            </a>
          }
          callback={() => {
            actionRef.current?.reload()
          }}
          data={record}
        />
        ,
        <Popconfirm
          key="delete"
          title="确认删除此条记录?"
          okText="确定"
          cancelText="取消"
          onConfirm={async () => {

          }}
        >
          <Spin spinning={false} >
            <a
              key="delete"
            >
              删除
            </a>
          </Spin>
        </Popconfirm>,
      ],
    },
  ]
  return (
    <PageContainer
      header={{
        title: '',
      }}
    >
      <ProTable<SMS.Channel>
        columns={columns}
        cardBordered
        actionRef={actionRef}
        request={pageQuerySmsChannel}
        editable={{
          type: 'multiple',
        }}
        rowKey="id"
        search={{
          labelWidth: 'auto',
        }}
        pagination={{
          pageSize: 10,
        }}
        toolBarRender={() => [
          <UpsertSmsChannelModalForm
            key="create"
            trigger={
              <Button key="create" type="primary" icon={<PlusOutlined />}>
                创建短信通道
              </Button>
            }
            callback={() => {
              actionRef.current?.reload();
            }}
          />,
        ]}
        headerTitle="短信通道列表"
      />
    </PageContainer>
  );
}
export default SmsChannelTable;