index.tsx

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

const { Column } = Table;

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

interface ServiceSettingProp {}

const ServiceSetting: FC<ServiceSettingProp> = () => {
  const [modalShow, setModalShow] = useState(false)
  const [tableData, setTableData] = useState<ServiceProp[]>()
  const initData = useCallback(async () => {
    try {
      const result = await getServiceList()
      console.log('initData', result.data)
      if (result.data) {
        setTableData(result.data)
      }
    } catch (error) {
      console.log(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<ServiceProp>> title="应用ID" dataIndex="id" align="center" />
        <Column<ColumnProps<ServiceProp>> title="系统名称" dataIndex="systemName" align="center" />
        <Column<ColumnProps<ServiceProp>> title="应用名称" dataIndex="name" align="center" />
        <Column<ColumnProps<ServiceProp>>
          title="创建时间"
          dataIndex="createTime"
          align="center"
          render={(text) => <span>{text ? dayjs(text).format('YYYY-MM-DD HH:mm:ss') : '--'}</span>}
        />
        <Column<ColumnProps<ServiceProp>>
          title="操作"
          align="center"
          render={() => (
            <Space>
              <Button
                type="link"
                size="small"
              >编辑</Button>
              <Button
                type="link"
                size="small"
              >删除</Button>
            </Space>
          )}
        />
      </Table>
      <ServiceModal
        modalVisible={modalShow}
        onCreate={ (value) => {
          console.log(value)
          setModalShow(false)
        } }
        onCancel={ () => setModalShow(false) }
      />
    </div>
  )
}

export default ServiceSetting;