ai-proj-demo/src/module/datasource/component/DatasourceManage.jsx

import React, { useState } from 'react'
import { Space, Table, Modal } from 'antd'
import DatasourceData from '../component/DatasourceData'

export default function DatasourceManage() {
  const [dataModalVisible, setDataModalVisible] = useState(false)
  const formatTime = time => {
    const date = new Date(Number(time))
    const YY = date.getFullYear()
    const MM =
      date.getMonth() + 1 < 10
        ? '0' + (date.getMonth() + 1)
        : date.getMonth() + 1
    const DD = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
    const hh = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
    const mm =
      date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
    const ss =
      date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
    return YY + '-' + MM + '-' + DD + ' ' + hh + ':' + mm + ':' + ss
  }
  const checkData = () => {
    setDataModalVisible(true)
    console.log('查看数据源')
  }
  const editData = () => {
    console.log('编辑数据源')
  }
  const deleteData = () => {
    console.log('删除数据源')
  }
  const columns = [
    {
      title: '数据源名称',
      dataIndex: 'dataName',
      key: 'dataName',
    },
    {
      title: '数据源类型',
      dataIndex: 'dataType',
      key: 'dataType',
    },
    {
      title: '标签',
      dataIndex: 'dataTag',
      key: 'dataTag',
      render: text => <span style={{ color: '#1881DA' }}>{text}</span>,
    },
    {
      title: '详情',
      key: 'dataDetails',
      dataIndex: 'dataDetails',
    },
    {
      title: '创建时间',
      key: 'createTime',
      dataIndex: 'createTime',
      render: time => formatTime(time),
    },
    {
      title: '更新时间',
      key: 'updateTime',
      dataIndex: 'updateTime',
      render: time => formatTime(time),
    },
    {
      title: '操作',
      key: 'operation',
      render: _ => (
        <Space size="middle">
          <a href="/#" onClick={checkData} style={{ color: '#1881DA' }}>
            查看
          </a>
          <a href="/#" onClick={editData} style={{ color: '#1881DA' }}>
            编辑
          </a>
          <a href="/#" onClick={deleteData} style={{ color: '#1881DA' }}>
            删除
          </a>
        </Space>
      ),
    },
  ]
  const data = [
    {
      key: '1',
      dataName: '奶粉渠道销售库',
      dataType: 'MYSQL',
      dataTag: '开发',
      dataDetails: '七台河信息5',
      createTime: '1660391639458',
      updateTime: '1660391639458',
    },
    {
      key: '2',
      dataName: '奶粉渠道销售库',
      dataType: 'HIVE',
      dataTag: '测试',
      dataDetails: '七台河信息4',
      createTime: '1660391639458',
      updateTime: '1660391639458',
    },
    {
      key: '3',
      dataName: '奶粉渠道销售库',
      dataType: 'MYSQL',
      dataTag: '线上',
      dataDetails: '七台河信息3',
      createTime: '1660391639458',
      updateTime: '1660391639458',
    },
  ]

  const handledataModalCancel = () => {
    setDataModalVisible(false)
  }

  const dataModal = (
    <Modal
      title="数据表预览"
      visible={dataModalVisible}
      onCancel={handledataModalCancel}
      footer={null}
      width={800}
      bodyStyle={{ paddingTop: 0 }}>
      <DatasourceData />
    </Modal>
  )
  return (
    <>
      <Table columns={columns} dataSource={data} bordered /> {dataModal}
    </>
  )
}