xfflod-resCenter/src/views/Base/St/DataTable.tsx

import { Button, Divider, Drawer, Form, Input, Modal, Popconfirm, Space, Table } from 'antd';
import { ColumnsType } from 'antd/lib/table';
import moment from 'moment';
import React, { useMemo, useState } from 'react';
import OpButton, { DelOpButton, EditOpButton } from '../../../components/crud/OpButton';
import { DamItem } from '../../../models/_/defs';
import { IContextProp } from './_';




const DataTable: React.FC<{
  ctx: IContextProp
}> = ({ ctx }) => {

  const { pager, crud } = ctx;
  const columns = useMemo<ColumnsType<DamItem>>(() => [
    { title: '序号', key: '序号', dataIndex: '序号', width: 120, align: 'center' },
    { title: '站名', key: '站名', dataIndex: '站名', width: 130, align: 'center' },
    { title: '管理单位', key: '管理单位', dataIndex: '管理单位', width: 120, align: 'center' },
    { title: 'RTU编码', key: 'RTU编码', dataIndex: 'RTU编码', width: 120, align: 'center' },
    { title: '经度', key: '经度', dataIndex: '经度', width: 120, },
    { title: '纬度', key: '纬度', dataIndex: '纬度', width: 120, align: 'center' },
    { title: '基础准高程', key: '基础准高程', dataIndex: '基础准高程', width: 120, align: 'center' },
    { title: '修正值', key: '修正值', dataIndex: '修正值', width: 120, align: 'center' },
    { title: '站类', key: '站类', dataIndex: '站类', width: 120, align: 'center' },
    { title: '归属协议', key: '归属协议', dataIndex: '归属协议', width: 120, align: 'center' },
    { title: '创建日期', key: '创建日期', dataIndex: '创建日期', width: 120, align: 'center' },
    {
      title: '操作', key: '_',  width: 100, align: 'center', fixed: 'right',render: (value:any,row:any) => (
        <Space split={<Divider type="vertical" />}>
          <div className='act-but'><Button className='but3' type="link" 
          onClick={async() =>
          {
            console.log("www",row)
            showModal()
            
            }}>编辑</Button></div>
            <Button type="link" >	删除</Button>
            {/* <Button type="link" >	采集项管理</Button>
            <Button type="link" >	 	站点管理</Button> */}

           

        </Space>
      )
    }
  ], []);

  const [openIntroduction, setOpenIntroduction] = useState(false);


  const onCloseIntroduction = () => {
    setOpenIntroduction(false);
  };
  const [form] = Form.useForm();
  // 弹框
  const [isModalOpen, setIsModalOpen] = useState(false);

  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  return (
    <>
      <Table
        columns={columns}
        rowKey={row => row.大坝代码}
        {...pager.tableProps}
      />
        <Modal title="详情" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
       <Form form={form} name="validateOnly" layout="vertical" autoComplete="off" >
      <Form.Item name="序号" label="序号" rules={[{ required: true }]}>
        <Input />
      </Form.Item>
      <Form.Item name="管理单位" label="管理单位" rules={[{ required: true }]}>
        <Input />
      </Form.Item>
      <Form.Item name="RTU编码" label="RTU编码" rules={[{ required: true }]}>
        <Input />
      </Form.Item>
      <Form.Item>
        <Space>
        
          <Button htmlType="reset">Reset</Button>
        </Space>
      </Form.Item>
    </Form>
    </Modal>
    </>
  )
}

export default DataTable