当前位置：首页 > news >正文

基于TypeScript+React+AntDesign 的车辆车型管理页面

news 来源：原创 2024/9/28 4:07:53

项目目录结构：

my-app/├── node_modules/├── public/├── src/│   ├── App.js│   ├── VehicleForm.js│   └── index.js├── package.json└── README.md

1.创建项目

2.列表页面VehicleForm.js,预留接口使用axios

1.创建项目

npx create-react-app my-app
cd my-app
npm install antd
npm install axios

App.js

// App.js
import React from 'react';
import 'antd/dist/reset.css'; // Import Ant Design styles
import VehicleForm from './VehicleForm'; // Import the VehicleForm componentconst App = () => {return (<div style={{ margin: '50px' }}><VehicleForm /></div>);
};export default App;

2.列表页面VehicleForm.js,预留接口使用axios

// VehicleForm.js
import React from 'react';
import { Form, Input, Button, Select, Row, Col, Tabs, Upload, message } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import axios from 'axios';const { Option } = Select;
const { TabPane } = Tabs;const VehicleForm = () => {// Placeholder function for form submissionconst handleFormSubmit = async (values) => {try {// Example API call for form submissionconst response = await axios.post('/api/vehicle/create', values);message.success('车型已创建成功');console.log('Form submission response:', response.data);} catch (error) {console.error('Error submitting form:', error);message.error('创建车型失败');}};// Placeholder function for file uploadconst handleFileUpload = (file) => {// Simulate file upload requestconst formData = new FormData();formData.append('file', file);axios.post('/api/vehicle/upload', formData).then(response => {message.success('文件上传成功');console.log('File upload response:', response.data);}).catch(error => {console.error('File upload failed:', error);message.error('文件上传失败');});// Prevent default upload behavior (since we're manually handling it)return false;};return (<div style={{ padding: '20px', backgroundColor: '#fff', borderRadius: '8px' }}><h2>创建自定义车型</h2><Form onFinish={handleFormSubmit} layout="vertical"><Row gutter={16}>{/* 参数标识 */}<Col span={8}><Form.Item label="参数标识" name="paramId"><Input placeholder="请输入参数标识" /></Form.Item></Col>{/* 车辆厂商 */}<Col span={8}><Form.Item label="车辆厂商" name="manufacturer"><Input placeholder="请输入车辆厂商" /></Form.Item></Col>{/* 车型用途 */}<Col span={8}><Form.Itemlabel="车型用途"name="useType"rules={[{ required: true, message: '请选择车型用途' }]}><Select placeholder="请选择车型用途"><Option value="passenger">乘用车</Option><Option value="commercial">商用车</Option></Select></Form.Item></Col></Row><Row gutter={16}>{/* 相机个数 */}<Col span={8}><Form.Item label="相机个数" name="cameraCount"><Input placeholder="请输入相机个数" /></Form.Item></Col>{/* 版本 */}<Col span={8}><Form.Item label="版本" name="version"><Input placeholder="请输入版本" /></Form.Item></Col>{/* 雷米波雷达个数 */}<Col span={8}><Form.Item label="雷米波雷达个数" name="radarCount"><Input placeholder="请输入雷米波雷达个数" /></Form.Item></Col></Row><Row gutter={16}>{/* 车型年份 */}<Col span={8}><Form.Itemlabel="车型年份"name="year"rules={[{ required: true, message: '请输入车型年份' }]}><Input placeholder="请输入车型年份" /></Form.Item></Col>{/* 备注 */}<Col span={16}><Form.Item label="备注" name="remark"><Input placeholder="参考注: 修改了***内容, 解决了***问题" /></Form.Item></Col></Row>{/* 上传按钮 */}<Form.Item><Upload beforeUpload={handleFileUpload}><Button icon={<UploadOutlined />}>上传车型参数</Button></Upload></Form.Item><Tabs defaultActiveKey="1" style={{ marginTop: '20px' }}><TabPane tab="车辆基础信息" key="1"><Upload beforeUpload={handleFileUpload}><Button icon={<UploadOutlined />}>基础信息上传</Button></Upload></TabPane><TabPane tab="开源版 Cam & Lidar 标定参数" key="2">添加内容</TabPane><TabPane tab="车联网参数" key="3">添加内容</TabPane><TabPane tab="传感器参数" key="4">添加内容</TabPane></Tabs>{/* 创建车型按钮 */}<Form.Item><Button type="primary" htmlType="submit">创建车型</Button></Form.Item></Form></div>);
};export default VehicleForm;