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

import {getDetailList, delDetail} from '../../../services/measure/analysis'
import { useState, useEffect } from 'react'
import  {message, Button, type TableColumnsType, type TableProps, Modal, Table  } from 'antd';

import { useNavigate } from 'react-router-dom';
import type { DetailTable } from "../../../services/measure/type";
import { ExclamationCircleFilled } from '@ant-design/icons';

export default function MeasureDetail() {
	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: 'lineName',
		},
		{
			title: '位置',
			dataIndex: 'location',
		},
		{
			title: '轨型',
			dataIndex: 'trackShapeCode',
		},
		{
			title: '方向',
			dataIndex: 'direction',
		},
		{
			title: '创建者',
			dataIndex: 'operatorName',
		},
		{
			title: '时间',
			dataIndex: 'createTime',
		},
	];

	const [tableData, setTableData] = useState<DetailTable[]>([])
	const getDetailDataList = () => {
		getDetailList().then(res => {
			if (res.success) {
				setTableData(res.data.list)
			} else {
				setTableData(detailList)
			}
		}).catch(e=>{
			//如果接口异常，则使用mock数据
			// setTableData(detailList)
		})
	}
	
	const [selectionType, setSelectionType] = useState<'checkbox'>('checkbox');
	const { confirm } = Modal;
	const onDel = () => {
		console.log('selectedRows====', selectRows)

		confirm({
			title: '提示',
			icon: <ExclamationCircleFilled />,
			content: '请确认是否删除此条数据',
			okText:'确认',
			cancelText:'取消',
			onOk() {
				onHandelDelData()
			},
			onCancel() {
				console.log('Cancel');
			},
		});
	}

	const onHandelDelData = () =>{
		let list = [...selectRows]
		const ids = list.map(item => item.id)
		if(!ids ||  !ids.length){
			return;
		}
		const params = {
			ids:ids.join(',')
		}
		delDetail(params).then(res => {
			if(res.status === 0){
				getDetailList()
				message.success('删除成功')	
			}
		}).catch(e=> {
			//删除mock的数据
			const filterList = tableData.filter(item => !ids.includes(item.id))
			setTableData(filterList)
			message.success('删除成功')
			setSelectedRow([])
		})
		
	}

	return (
		<div>
			<div className="p-[30px]">
				<Button 
				disabled={!selectRows.length}
				type="primary" 
				onClick={onDel}>
					删除
				</Button>
			</div>
			<div>
				<Table<DetailTable>
					locale={{
						emptyText: '无数据',
					}}
					rowSelection={{ type: selectionType, ...rowSelection }}
					columns={columns}
					dataSource={tableData.map(item => ({ ...item, key: item.name }))}
				/>
			</div>

		</div>
	);
}