index.tsx

import React, { FC, useState, useEffect, useCallback } from 'react';
import { Table, Button, Space, Modal } from "antd";
import { PlusOutlined, ExclamationCircleOutlined } from "@ant-design/icons";
import { ColumnProps } from "antd/es/table";
import dayjs from 'dayjs';
import SystemModal from './SystemModal';
import { getSystemList, deleteSystem } from "../../api/system.api";

// const utc = require('dayjs/plugin/utc');
// dayjs.extend(utc);

const { Column } = Table;
const { confirm } = Modal;

interface System {
  createTime: number
  description: string
  id: number
  modifyTime: null
  name: string
  status: number
}

interface SystemSettingProp {}

const SystemSetting: FC<SystemSettingProp> = () => {
  const [modalShow, setModalShow] = useState(false)
  const [tableData, setTableData] = useState<System[]>()
  const initData = useCallback(async () => {
    try {
      const result = await getSystemList()
      if (result.data) {
        setTableData(result.data)
      }
    } catch (error) {
      console.error(error)
    }
  }, [])

  /**
   * 删除节点
   */
  const onRemoveRow = (selectedRow: any) => {
    console.log('onRemoveRow::', selectedRow)
    confirm({
      title: '你确定要删除吗?',
      icon: <ExclamationCircleOutlined />,
      okText: '确认',
      okType: 'danger',
      cancelText: '取消',
      async onOk() {
        console.log('OK');
        const deleteRes = await deleteSystem(selectedRow.id) as any
        console.log('deleteRes', deleteRes)
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }
  useEffect(() => {
    initData()
  }, [initData])
  return (
    <div>
      <Button
        type="primary"
        icon={<PlusOutlined />}
        onClick={ () => setModalShow(true) }
        style={{ marginBottom: '10px' }}
      >添加系统</Button>
      <Table dataSource={tableData} rowKey="id">
        <Column<ColumnProps<System>> title="系统ID" dataIndex="id" align="center" />
        <Column<ColumnProps<System>> title="系统名称" dataIndex="name" align="center" />
        <Column<ColumnProps<System>>
          title="创建时间"
          dataIndex="createTime"
          align="center"
          render={(text) => <span>{text ? dayjs(text).format('YYYY-MM-DD HH:mm:ss') : '--'}</span>}
        />
        <Column<ColumnProps<System>>
          title="操作"
          align="center"
          render={(_, record) => (
            <Space>
              <Button
                type="link"
                size="small"
              >编辑</Button>
              <Button
                type="link"
                size="small"
                onClick={ () => {
                  onRemoveRow(record)
                }}
              >删除</Button>
            </Space>
          )}
        />
      </Table>
      <SystemModal
        modalVisible={modalShow}
        onCreate={ (value) => {
          console.log(value)
          initData()
          setModalShow(false)
        } }
        onCancel={ () => setModalShow(false) }
      />
    </div>
  )
}

export default SystemSetting;