index.tsx

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

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

const { Column } = Table;

interface System {
  createTime: string
  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()
      console.log('initData', result.data)
      if (result.data) {
        setTableData(result.data)
      }
    } catch (error) {
      console.error(error)
    }
  }, [])
  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>}
        />
      </Table>
      <SystemModal
        modalVisible={modalShow}
        onCreate={ (value) => {
          console.log(value)
          setModalShow(false)
        } }
        onCancel={ () => setModalShow(false) }
      />
    </div>
  )
}

export default SystemSetting;