Outline/src/pages/measure/components/MeasureDetail.tsx

// 引入相关的hooks
import { useSelector, useDispatch } from "react-redux";
// 引入对应的方法
import {getDetailList} from '../../../services/measure/analysis'
import { useState, useEffect } from 'react'
import  {message, type TableColumnsType, type TableProps, Button, Table  } from 'antd';
import { useNavigate } from 'react-router-dom';
import type { DetailTable } from "../../../services/measure/type";
export default function MeasureDetail() {
	// 通过useSelector直接拿到store中定义的value
    //@ts-ignore
	const { value } = useSelector(store => store.counter);
	// 通过useDispatch 派发事件
	const dispatch = useDispatch();
	const navigate = useNavigate();
	function onToMeasure(){
		navigate('/measure/config')
	}

	useEffect(()=>{
		getDetailDataList()
	}, [])

	const [selectRows, setSelectedRow] = useState<DetailTable[]>([])
	const rowSelection: TableProps<DetailTable>['rowSelection'] = {
		onChange: (selectedRowKeys: React.Key[], selectedRows: DetailTable[]) => {
			console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
			setSelectedRow(selectedRows)
		},
		getCheckboxProps: (record: DetailTable) => ({
			name: record.name,
		}),
	};

	const columns: TableColumnsType<DetailTable> = [
		{
			title: '测量名称',
			dataIndex: 'name',
		},
		{
			title: '创建者',
			dataIndex: 'operatorName',
		},
		{
			title: '时间',
			dataIndex: 'createTime',
		},
	];

	const [tableData, setTableData] = useState<DetailTable[]>([])
	const getDetailDataList = () => {
		getDetailList().then(res => {
			setTableData(res.data.list)
		})
	}
	
	const [selectionType, setSelectionType] = useState<'checkbox'>('checkbox');
	const onDel = () => {
		console.log('selectedRows====', selectRows)
		message.error('正在做')
	}

	return (
		<div>
			<div className="p-[30px]">
				<Button type="primary" onClick={onDel}>删除</Button>
			</div>
			<div>
				<Table<DetailTable>
					rowSelection={{ type: selectionType, ...rowSelection }}
					columns={columns}
					dataSource={tableData.map(item => ({ ...item, key: item.name }))}
				/>
			</div>
		</div>
	);
}