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

项目目录结构:

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

目录

1.创建项目

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


1.创建项目

bash 复制代码
npx create-react-app my-app
cd my-app
npm install antd
npm install axios

App.js

bash 复制代码
// 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

bash 复制代码
// 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;
相关推荐
海底火旺几秒前
以一个简单的React应用理解数据绑定的重要性
前端·css·react.js
爱学习的茄子3 分钟前
React Hooks驱动的Todo应用:现代函数式组件开发实践与组件化架构深度解析
前端·react.js·面试
宇宙全栈Link3 分钟前
当 React 组件调用自定义 hooks,hooks 又调用其他 hooks 时,状态变化如何传播?
前端·javascript·react.js
南方kenny4 分钟前
从0到1理解JS事件委托:让你的代码性能提升一个level
前端·javascript
西瓜树枝4 分钟前
用 iframe 实现前端批量下载的优雅方案 —— 从原理到实战
前端·javascript
归于尽5 分钟前
原生JS与React的事件差异
前端·javascript·react.js
独立开阀者_FwtCoder26 分钟前
面试官:为什么在 Vue3 中 ref 变量要用 .value?
前端·javascript·vue.js
独立开阀者_FwtCoder30 分钟前
手握两大前端框架,Vercel 再出手拿下 Nuxt.js,对前端有什么影响?
前端·javascript·vue.js
独立开阀者_FwtCoder30 分钟前
弃用 html2canvas!快 93 倍的截图神器!
前端·javascript·vue.js
伍哥的传说1 小时前
H3初识——入门介绍之常用中间件
前端·javascript·react.js·中间件·前端框架·node.js·ecmascript