index.tsx

import React, { FC, useState, useEffect, useCallback } from 'react';
import { Button, Table } from "antd";
import { ColumnProps } from "antd/es/table";
import { getSystemList } from "../../api/system.api";

interface SystemTableProp {
  key: string
  systemName: string
  systemId: number
  createTime: string | Date
}

const columns:ColumnProps<SystemTableProp>[]  = [
  {
    title: '系统ID',
    dataIndex: 'systemId',
    key: 'systemId',
    align: 'center',
  },
  {
    title: '系统名称',
    dataIndex: 'systemName',
    key: 'systemName',
    align: 'center',
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
    align: 'center',
  },
];

const data: SystemTableProp[] = [
  {
    key: '1',
    systemName: 'John Brown',
    systemId: 32,
    createTime: '2020-05-27 12:47:33',
  },
  {
    key: '2',
    systemName: 'Jim Green',
    systemId: 32,
    createTime: '2020-05-27 12:47:33',
  },
  {
    key: '3',
    systemName: 'Joe Black',
    systemId: 32,
    createTime: '2020-05-27 12:47:33',
  },
];


interface SystemSettingProp {}

const SystemSetting: FC<SystemSettingProp> = () => {
  const initData = useCallback(async () => {
    try {
      const result = await getSystemList()
      console.log('initData', result)
    } catch (error) {
      console.error(error)
    }
  }, [])
  useEffect(() => {
    initData()
  }, [initData])
  return (
    <div>
      <Button type="primary">添加系统</Button>
      <Table columns={columns} dataSource={data} />
    </div>
  )
}

export default SystemSetting;