基于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;
相关推荐
an__ya__5 分钟前
Vue数据响应式reactive
前端·javascript·vue.js
华仔啊20 分钟前
面试都被问懵了?CSS 的 flex:1 和 flex:auto 真不是一回事!90%的人都搞错了
前端·javascript
前端康师傅23 分钟前
JavaScript 函数详解
前端·javascript
葡萄城技术团队26 分钟前
从基础到实战:一文吃透 JS Tuples 与 Records 的所有核心用法
javascript
@小红花1 小时前
从0到1学习Vue框架Day03
前端·javascript·vue.js·学习·ecmascript
前端与小赵1 小时前
vue3中 ref() 和 reactive() 的区别
前端·javascript·vue.js
魔云连洲2 小时前
Vue的响应式底层原理:Proxy vs defineProperty
前端·javascript·vue.js
Hilaku2 小时前
深入URL和URLSearchParams:别再用正则表达式去折磨URL了
前端·javascript·代码规范
weixin_456904272 小时前
Vue.jsmain.js/request.js/user.js/store/index.js Vuex状态管理项目核心模块深度解析
前端·javascript·vue.js
伍哥的传说2 小时前
Vue 3.6 Alien Signals:让响应式性能飞跃式提升
前端·javascript·vue.js·vue性能优化·alien-signals·细粒度更新·vue 3.6新特性