如何处理车辆管理系统预订列表及用ReactJS实现预订管控功能

一、业务逻辑核心处理方式 #

数据结构设计 #

每个预订需包含核心字段：

• 预订ID、用户ID、车辆信息（型号/ID）、起止时间、状态（待处理/已接受/已拒绝）、操作管理员ID（可选）、拒绝原因（可选）

权限与视图区分 #

• 管理员端：
  • 获取系统内所有预订数据
  • 仅对「待处理」状态的预订执行接受/拒绝操作
  • 操作后记录操作人ID，拒绝时需填写原因
• 客户端：
  • 仅获取自身提交的预订数据
  • 只能查看预订状态，无修改权限
  • 若预订被拒绝，可查看拒绝原因

状态流转规则 #

1. 客户提交预订 → 状态设为「待处理」
2. 管理员点击「接受」→ 状态更新为「已接受」，触发车辆锁定、客户通知等后续流程
3. 管理员点击「拒绝」→ 状态更新为「已拒绝」，记录原因并通知客户

二、ReactJS代码实现示例 #

以下是一个基础的预订列表组件，包含权限区分、状态操作和视图渲染：

import { useState, useEffect } from 'react';

// 模拟后端返回的预订数据集
const mockBookingData = [
  {
    id: 1,
    userId: 100,
    carModel: '特斯拉Model 3',
    startTime: '2024-06-01 09:00',
    endTime: '2024-06-03 18:00',
    status: 'pending', // pending/accepted/rejected
    operatorId: null,
    rejectReason: ''
  },
  {
    id: 2,
    userId: 200,
    carModel: '比亚迪汉',
    startTime: '2024-06-02 10:00',
    endTime: '2024-06-04 17:00',
    status: 'accepted',
    operatorId: 999,
    rejectReason: ''
  },
  {
    id: 3,
    userId: 100,
    carModel: '大众ID.4',
    startTime: '2024-06-05 08:30',
    endTime: '2024-06-07 19:00',
    status: 'rejected',
    operatorId: 999,
    rejectReason: '该时段车辆已被预订'
  }
];

// 模拟当前登录用户（实际项目从全局状态/登录接口获取）
const currentUser = { id: 100, role: 'customer' };
// 切换为管理员角色测试：const currentUser = { id: 999, role: 'admin' };

const BookingList = () => {
  const [bookings, setBookings] = useState([]);

  useEffect(() => {
    // 模拟API请求，根据角色过滤数据
    const fetchBookings = () => {
      let filteredData = mockBookingData;
      if (currentUser.role === 'customer') {
        filteredData = mockBookingData.filter(booking => booking.userId === currentUser.id);
      }
      setBookings(filteredData);
    };
    fetchBookings();
  }, []);

  // 管理员更新预订状态的方法
  const updateBookingStatus = (bookingId, newStatus, rejectReason = '') => {
    if (currentUser.role !== 'admin') return;

    // 模拟后端API调用，更新数据后同步前端状态
    const updatedBookings = bookings.map(booking => {
      if (booking.id === bookingId) {
        return {
          ...booking,
          status: newStatus,
          operatorId: currentUser.id,
          rejectReason
        };
      }
      return booking;
    });
    setBookings(updatedBookings);

    // 此处可添加客户通知逻辑（如调用推送接口）
  };

  // 格式化状态显示文本
  const formatStatus = (status) => {
    switch (status) {
      case 'pending': return '待处理';
      case 'accepted': return '已接受';
      case 'rejected': return '已拒绝';
      default: return '未知状态';
    }
  };

  return (
    <div style={{ padding: '20px' }}>
      <h2>{currentUser.role === 'admin' ? '全系统预订列表' : '我的预订'}</h2>
      <table border="1" style={{ width: '100%', marginTop: '10px' }}>
        <thead>
          <tr>
            <th>车辆型号</th>
            <th>预订时段</th>
            <th>状态</th>
            {currentUser.role === 'admin' && <th>操作</th>}
            {currentUser.role === 'customer' && <th>备注</th>}
          </tr>
        </thead>
        <tbody>
          {bookings.map(booking => (
            <tr key={booking.id}>
              <td>{booking.carModel}</td>
              <td>{`${booking.startTime} 至 ${booking.endTime}`}</td>
              <td>{formatStatus(booking.status)}</td>
              {currentUser.role === 'admin' && (
                <td>
                  {booking.status === 'pending' && (
                    <>
                      <button 
                        onClick={() => updateBookingStatus(booking.id, 'accepted')}
                        style={{ marginRight: '8px' }}
                      >
                        接受
                      </button>
                      <button 
                        onClick={() => {
                          const reason = prompt('请输入拒绝原因：');
                          reason && updateBookingStatus(booking.id, 'rejected', reason);
                        }}
                      >
                        拒绝
                      </button>
                    </>
                  )}
                  {booking.status !== 'pending' && <span>无操作权限</span>}
                </td>
              )}
              {currentUser.role === 'customer' && (
                <td>
                  {booking.status === 'rejected' ? booking.rejectReason : '-'}
                </td>
              )}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default BookingList;

关键注意事项 #

1. 权限校验：前端的角色判断仅用于视图控制，真正的权限校验必须在后端实现，防止恶意请求修改状态
2. 数据同步：示例中用本地状态模拟更新，实际项目中需调用后端API，更新成功后重新拉取最新数据
3. 状态管理：大型项目建议使用Zustand、Redux等状态管理工具，统一维护用户角色和预订数据
4. 实时通知：可集成WebSocket实现状态变更的实时推送，避免用户手动刷新页面

内容的提问来源于stack exchange，提问作者ROBERT NURU