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

import { Button, Form, Input, Select } from "antd";
import { useNavigate } from "react-router";

export default function MeasureConfig() {
    const navigate = useNavigate()
    const onFinish = (values: any) => {
        console.log('Received values of form: ', values);
        navigate('../action')
      };
	return (
		<div className="h-full flex justify-center items-center">
			<Form
				name="basic"
				labelCol={{ span: 8 }}
				wrapperCol={{ span: 16 }}
				style={{ minWidth: 360, maxWidth: 600 }}
				size="large"
				initialValues={{ remember: true }}
				onFinish={onFinish}
				// onFinishFailed={onFinishFailed}
				autoComplete="off">
				<Form.Item label="操作员" name="username" rules={[{ required: true, message: "Please input your username!" }]}>
					<Input />
				</Form.Item>

				<Form.Item label="轨型" name="trackType">
					<Select>
						<Select.Option value="demo">Demo</Select.Option>
					</Select>
				</Form.Item>
				<Form.Item label="核校" name="calibrationType">
					<Select>
						<Select.Option value="demo">Demo</Select.Option>
					</Select>
				</Form.Item>
				<Form.Item label="测量名称" name="measureName" rules={[{ required: true, message: "Please input your username!" }]}>
					<Input />
				</Form.Item>
				<Form.Item label="线路名称" name="lineName" rules={[{ required: true, message: "Please input your username!" }]}>
					<Input />
				</Form.Item>
				<Form.Item label="位置" name="position" rules={[{ required: true, message: "Please input your username!" }]}>
					<Input />
				</Form.Item>
				<Form.Item label="方向" name="direction" rules={[{ required: true, message: "Please input your username!" }]}>
					<Input />
				</Form.Item>

				<Form.Item label={null}>
					<Button type="primary" size="large" style={{ width: 220 }} htmlType="submit">
						开始测量
					</Button>
				</Form.Item>
			</Form>
		</div>
	);
}