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

项目目录结构：

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 component

const 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 submission
  const handleFormSubmit = async (values) => {
    try {
      // Example API call for form submission
      const 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 upload
  const handleFileUpload = (file) => {
    // Simulate file upload request
    const 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.Item
              label="车型用途"
              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.Item
              label="车型年份"
              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;