完善轨形管理页面

src/pages/rail/RailConfig.tsx

@@ -0,0 +1,119 @@
+import "./rail.scss";
+import { Button, Modal, Pagination, Table, TableColumnsType } from 'antd'
+import {useState} from 'react'
+import Upload from './Upload'
+export default function RailManage() {
+  type RailItem = {
+    id?: number;
+    name: string;
+    createName: string;
+    createTime: string,
+    updateTime: string
+  }
+  let [loading, setLoading] = useState()
+
+  const [selectionType, setSelectionType] = useState<'checkbox'>('checkbox');
+    const [selectRows, setSelectedRow] = useState<RailItem[]>([])
+    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
+	const rowSelection = {
+    selectedRowKeys,
+    onChange: (selectedRowKeys: React.Key[], selectedRows: RailItem[]) => {
+      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
+      setSelectedRow(selectedRows)
+      setSelectedRowKeys(selectedRowKeys)
+    },
+    getCheckboxProps: (record:RailItem) => ({
+      name: record.name,
+    }),
+  };
+
+  const [pageNum, setPageNum] = useState(1)
+	const [pageSize, setPageSize] = useState(5)
+  const onPageChange = (pageNumValue:number, pageSizeValue:number) => {
+		setPageNum(pageNumValue)
+		setPageSize(pageSizeValue)
+		let params = {
+			pageSize:pageSizeValue,
+			pageNum:pageNumValue,
+		}
+	}
+
+  const onShowDetail = (recordData:RailItem) => {
+
+  }
+
+  let [total, setTotal] = useState()
+  let [tableData, setTableData] = useState<RailItem[]>([{
+    name:'60形',
+    createName:'张三',
+    createTime:'2025-03-03',
+    updateTime:''
+  }])
+  const columns: TableColumnsType<RailItem> = [{
+    title: '序号',
+    dataIndex: 'seq',
+    render:(_, record, index)=>{
+      return index + 1
+    }
+  },
+  {
+    title: '轨型名称',
+    dataIndex: 'name',
+  },
+  {
+    title: '创建者',
+    dataIndex: 'createName',
+  },{
+    title: '时间',
+    dataIndex: 'createtTime',
+  },{
+    title: '操作',
+    dataIndex: 'op',
+    render:(_, record)=>{
+      return <div>
+        <Button type="link" onClick={()=>onShowDetail(record)}>查看轨形</Button>
+      </div>
+    }
+  }]
+
+  let [uploadVisible, setUploadVisible] = useState(false)
+  const onUploadFile = () => {
+    setUploadVisible(true)
+  }
+
+  const onCancel = () =>{
+    setUploadVisible(false)
+  }
+  return (
+    <div className="main-page">
+      <main className="bg-white rounded-xl h-full ml-4 mr-6 overflow-auto">
+        <div className="p-[1rem] flex gap-[5px]">
+          <Button type="primary">删除</Button>
+          <Button type="primary" onClick={onUploadFile}>上传轨型</Button>
+        </div>
+
+        <div>
+          <Table
+            locale={{
+              emptyText: '无数据',
+            }}
+            loading={loading}
+            rowSelection={{ type: selectionType, ...rowSelection }}
+            columns={columns}
+            rowKey="id"
+            dataSource={tableData && tableData.map(item => ({ ...item, key: item.name }))}
+            pagination={false}
+            scroll={{ y: 500 }} 
+
+          />
+          <div className="float-right mt-[10px] mr-[1rem]">
+            <Pagination  onChange={onPageChange} current={pageNum} pageSizeOptions={[5,10,20,30]} defaultCurrent={pageNum} defaultPageSize={pageSize} total={total}/>
+          </div>
+        </div>
+        <Modal open={uploadVisible} footer={[]}>
+          <Upload cancel={onCancel}/>
+        </Modal>
+      </main>
+    </div>
+  );
+}