diff --git a/backend/src/main/java/com/carmaintenance/controller/AppointmentController.java b/backend/src/main/java/com/carmaintenance/controller/AppointmentController.java index 648592b..35159f1 100644 --- a/backend/src/main/java/com/carmaintenance/controller/AppointmentController.java +++ b/backend/src/main/java/com/carmaintenance/controller/AppointmentController.java @@ -122,6 +122,6 @@ public class AppointmentController { return Result.notFound("预约不存在"); } appointmentRepository.deleteById(id); - return Result.success("删除成功"); + return Result.success("删除成功", null); } } diff --git a/backend/src/main/java/com/carmaintenance/controller/AuthController.java b/backend/src/main/java/com/carmaintenance/controller/AuthController.java index 3ec2079..87479ea 100644 --- a/backend/src/main/java/com/carmaintenance/controller/AuthController.java +++ b/backend/src/main/java/com/carmaintenance/controller/AuthController.java @@ -82,6 +82,6 @@ public class AuthController { */ @PostMapping("/logout") public Result logout() { - return Result.success("退出成功"); + return Result.success("退出成功", null); } } diff --git a/backend/src/main/java/com/carmaintenance/controller/PartsInventoryController.java b/backend/src/main/java/com/carmaintenance/controller/PartsInventoryController.java index f20b75f..67863aa 100644 --- a/backend/src/main/java/com/carmaintenance/controller/PartsInventoryController.java +++ b/backend/src/main/java/com/carmaintenance/controller/PartsInventoryController.java @@ -109,6 +109,6 @@ public class PartsInventoryController { return Result.notFound("配件不存在"); } partsInventoryRepository.deleteById(id); - return Result.success("删除成功"); + return Result.success("删除成功", null); } } diff --git a/backend/src/main/java/com/carmaintenance/controller/ServiceOrderController.java b/backend/src/main/java/com/carmaintenance/controller/ServiceOrderController.java index 05cc562..9ca3197 100644 --- a/backend/src/main/java/com/carmaintenance/controller/ServiceOrderController.java +++ b/backend/src/main/java/com/carmaintenance/controller/ServiceOrderController.java @@ -126,7 +126,7 @@ public class ServiceOrderController { return Result.notFound("工单不存在"); } serviceOrderRepository.deleteById(id); - return Result.success("删除成功"); + return Result.success("删除成功", null); } /** diff --git a/backend/src/main/java/com/carmaintenance/controller/UserController.java b/backend/src/main/java/com/carmaintenance/controller/UserController.java index 731eccf..330cb6c 100644 --- a/backend/src/main/java/com/carmaintenance/controller/UserController.java +++ b/backend/src/main/java/com/carmaintenance/controller/UserController.java @@ -102,7 +102,7 @@ public class UserController { return Result.notFound("用户不存在"); } userRepository.deleteById(id); - return Result.success("删除成功"); + return Result.success("删除成功", null); } /** @@ -123,6 +123,6 @@ public class UserController { user.setPassword(newPassword); userRepository.save(user); - return Result.success("密码修改成功"); + return Result.success("密码修改成功", null); } } diff --git a/backend/src/main/java/com/carmaintenance/controller/VehicleController.java b/backend/src/main/java/com/carmaintenance/controller/VehicleController.java index ca7499a..d550b80 100644 --- a/backend/src/main/java/com/carmaintenance/controller/VehicleController.java +++ b/backend/src/main/java/com/carmaintenance/controller/VehicleController.java @@ -107,6 +107,6 @@ public class VehicleController { return Result.notFound("车辆不存在"); } vehicleRepository.deleteById(id); - return Result.success("删除成功"); + return Result.success("删除成功", null); } } diff --git a/backend/src/main/resources/application.properties b/backend/src/main/resources/application.properties index b81269e..07cbfdf 100644 --- a/backend/src/main/resources/application.properties +++ b/backend/src/main/resources/application.properties @@ -5,9 +5,9 @@ server.servlet.context-path=/api # 数据库配置 spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver -spring.datasource.url=jdbc:mysql://localhost:3306/car_maintenance_db?useUnicode=true&characterEncoding=utf8&useSSL=false&serverTimezone=Asia/Shanghai&allowPublicKeyRetrieval=true +spring.datasource.url=jdbc:mysql://localhost:3307/car_maintenance_db?useUnicode=true&characterEncoding=utf8&useSSL=false&serverTimezone=Asia/Shanghai&allowPublicKeyRetrieval=true spring.datasource.username=root -spring.datasource.password=123456 +spring.datasource.password=qq5211314 # JPA配置 spring.jpa.database=mysql diff --git a/frontend/FEATURES.md b/frontend/FEATURES.md new file mode 100644 index 0000000..b96a5ba --- /dev/null +++ b/frontend/FEATURES.md @@ -0,0 +1,170 @@ +# 功能测试说明 + +## ✅ 已实现的真实功能 + +### 管理员功能 (admin/dashboard.html) + +#### 1. 用户管理 +- ✅ **查看用户**：点击"查看"按钮打开模态框，显示用户详细信息（只读模式） +- ✅ **编辑用户**：点击"编辑"按钮打开模态框，可修改用户信息并保存 +- ✅ **删除用户**：点击"删除"按钮，确认后删除用户 +- ✅ **添加用户**：点击"添加用户"按钮，打开空白表单创建新用户 + +**测试步骤：** +1. 登录后进入"用户管理" +2. 点击任意用户的"查看"按钮 - 应弹出模态框显示详细信息 +3. 点击"编辑"按钮 - 应弹出可编辑的模态框 +4. 修改真实姓名后点击"保存" - 应显示"更新成功"提示 +5. 点击"删除"按钮 - 确认后删除该用户 + +#### 2. 车辆管理 +- ✅ **查看车辆**：显示车辆详细信息（只读） +- ✅ **编辑车辆**：可修改里程、状态等信息 +- ✅ **删除车辆**：确认后删除 +- ✅ **添加车辆**：创建新车辆档案 + +**测试步骤：** +1. 进入"车辆管理" +2. 查看奔驰C200L的详细信息 +3. 修改里程数并保存 +4. 尝试添加新车辆（车牌号不能重复） + +#### 3. 工单管理 +- ✅ **查看工单**：显示工单完整信息 +- ✅ **编辑工单**：可修改服务类型、费用、状态等 +- ✅ **自动计算**：配件费用+工时费用=总费用 +- ✅ **删除工单**：确认后删除 +- ✅ **状态筛选**：下拉框过滤不同状态的工单 + +**测试步骤：** +1. 进入"工单管理" +2. 查看工单SO202501070001的详情 +3. 编辑工单，修改配件费用和工时费用，观察总费用自动计算 +4. 修改工单状态为"已完成" +5. 使用状态下拉框筛选"进行中"的工单 + +#### 4. 配件管理 +- ✅ **查看配件**：显示配件信息 +- ✅ **编辑库存**：快速修改库存数量 +- ✅ **库存预警**：库存<=最小库存时显示红色预警标签 +- ✅ **删除配件**：确认后删除 + +**测试步骤：** +1. 进入"配件管理" +2. 观察库存预警标签 +3. 点击"编辑"修改库存数量 +4. 删除某个配件 + +#### 5. 预约管理 +- ✅ **查看预约**：显示预约列表 +- ✅ **确认预约**：将预约状态改为"已确认" +- ✅ **取消预约**：将预约状态改为"已取消" + +### 工作人员功能 (staff/dashboard.html) + +#### 1. 车辆查询 +- ✅ **按车牌号查询**：输入车牌号后显示车辆详细信息 +- ✅ **回车搜索**：支持按回车键直接搜索 + +**测试步骤：** +1. 进入"车辆查询" +2. 输入"京A12345"点击查询或按回车 +3. 查看车辆完整信息 + +#### 2. 配件查询 +- ✅ **关键词搜索**：按配件名称或编号搜索 +- ✅ **库存预警**：显示库存预警标签 + +**测试步骤：** +1. 进入"配件查询" +2. 输入"机油"搜索 +3. 查看搜索结果和库存状态 + +### 客户功能 (customer/dashboard.html) + +#### 1. 我的车辆 +- ✅ **卡片式展示**：美观的车辆卡片 +- ✅ **详细信息**：品牌、型号、颜色、里程、保养时间 + +#### 2. 维保记录 +- ✅ **历史记录**：显示所有维保工单 +- ✅ **详细信息**：工单号、服务类型、费用、状态 + +#### 3. 我的预约 +- ✅ **预约列表**：显示所有预约 +- ✅ **取消预约**：可取消待确认的预约 +- ✅ **状态标识**：不同颜色的状态标签 + +#### 4. 在线预约 +- ✅ **表单验证**：验证必填项 +- ✅ **创建预约**：提交后创建新预约 +- ✅ **自动刷新**：预约成功后自动刷新列表 + +**测试步骤：** +1. 进入"在线预约" +2. 选择车辆、服务类型、预约时间 +3. 填写联系电话 +4. 点击"提交预约" +5. 查看"我的预约"中的新记录 + +--- + +## 🔧 API端点对照表 + +| 功能 | 方法 | 端点 | 说明 | +|------|------|------|------| +| 登录 | POST | /api/auth/login | 用户登录 | +| 获取所有用户 | GET | /api/users | 获取用户列表 | +| 获取单个用户 | GET | /api/users/{id} | 获取用户详情 | +| 更新用户 | PUT | /api/users/{id} | 更新用户信息 | +| 删除用户 | DELETE | /api/users/{id} | 删除用户 | +| 获取所有车辆 | GET | /api/vehicles | 获取车辆列表 | +| 按车牌查询 | GET | /api/vehicles/plate/{plate} | 查询车辆 | +| 更新车辆 | PUT | /api/vehicles/{id} | 更新车辆信息 | +| 删除车辆 | DELETE | /api/vehicles/{id} | 删除车辆 | +| 获取所有工单 | GET | /api/orders | 获取工单列表 | +| 获取单个工单 | GET | /api/orders/{id} | 获取工单详情 | +| 更新工单 | PUT | /api/orders/{id} | 更新工单信息 | +| 删除工单 | DELETE | /api/orders/{id} | 删除工单 | +| 获取所有配件 | GET | /api/parts | 获取配件列表 | +| 更新配件 | PUT | /api/parts/{id} | 更新配件信息 | +| 删除配件 | DELETE | /api/parts/{id} | 删除配件 | +| 获取所有预约 | GET | /api/appointments | 获取预约列表 | +| 确认预约 | PUT | /api/appointments/{id} | 确认预约 | +| 取消预约 | PUT | /api/appointments/{id}/cancel | 取消预约 | +| 创建预约 | POST | /api/appointments | 创建新预约 | + +--- + +## 📝 常见问题 + +### 1. 模态框不弹出 +- 确保Bootstrap JS已正确加载 +- 检查浏览器控制台是否有错误 + +### 2. 数据不刷新 +- 检查API请求是否成功 +- 查看浏览器Network面板的请求响应 + +### 3. 保存失败 +- 检查后端服务是否启动 +- 确认数据库连接正常 +- 查看后端控制台错误日志 + +### 4. 跨域错误 +- 确认后端CORS配置正确 +- 检查API_BASE_URL配置 + +--- + +## 🎯 测试账号 + +| 角色 | 用户名 | 密码 | 权限 | +|------|--------|------|------| +| 管理员 | admin | 123456 | 所有功能 | +| 工作人员 | staff001 | 123456 | 查询、处理工单 | +| 客户 | customer001 | 123456 | 车辆、预约 | + +--- + +所有功能现在都是真实的！数据会真正保存到数据库并实时刷新！ diff --git a/frontend/admin/dashboard.html b/frontend/admin/dashboard.html index 97f5196..544bd4f 100644 --- a/frontend/admin/dashboard.html +++ b/frontend/admin/dashboard.html @@ -4,297 +4,514 @@ 管理员仪表板 - 车管家4S店车辆维保管理系统 - - + + + -
+
-
+ -
- -
-
-

管理员仪表板

+
+ +
+
+
+ 管理员仪表板 +
-
- -
-
-
-
👥
-
-

0

-

用户总数

+
+ +
+
+
+
+ +
+
0
+
用户总数
-
-
🚗
-
-

0

-

车辆总数

+
+
+
+ +
+
0
+
车辆总数
-
-
📋
-
-

0

-

工单总数

+
+
+
+ +
+
0
+
工单总数
-
-
🔧
-
-

0

-

库存预警

+
+
+
+ +
+
0
+
库存预警
+
-
-

最近工单

+
+
最近工单
-
- - - - - - - - - - - - - -
工单编号服务类型车牌号状态创建时间
加载中...
+
+
+ + + + + + + + + + + + + + + + +
工单编号服务类型车牌号总费用状态创建时间
+ + 加载中... +
+
-
+
-
-
- - - - - - - - - - - - - - - -
预约ID服务类型车牌号预约时间联系电话状态操作
加载中...
-
+ + + + + + + + + +
+ +
+ + +
+ +
+ + - + + diff --git a/frontend/admin/modals.html b/frontend/admin/modals.html new file mode 100644 index 0000000..5cf180d --- /dev/null +++ b/frontend/admin/modals.html @@ -0,0 +1,313 @@ + + + + + + + + + + + diff --git a/frontend/css/style.css b/frontend/css/style.css new file mode 100644 index 0000000..1e4a699 --- /dev/null +++ b/frontend/css/style.css @@ -0,0 +1,397 @@ +/* 车管家4S店车辆维保管理系统 - 自定义样式 */ + +:root { + --primary-color: #0d6efd; + --secondary-color: #6c757d; + --success-color: #198754; + --danger-color: #dc3545; + --warning-color: #ffc107; + --info-color: #0dcaf0; + --light-bg: #f8f9fa; + --dark-text: #212529; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; + background-color: var(--light-bg); + min-height: 100vh; +} + +/* ==================== 登录页面样式 ==================== */ +.login-container { + min-height: 100vh; + display: flex; + align-items: center; + justify-content: center; + padding: 20px; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); +} + +.login-container .card { + width: 100%; + max-width: 450px; + border-radius: 15px; +} + +.login-container .card-header { + border-radius: 15px 15px 0 0 !important; +} + +/* ==================== 仪表板样式 ==================== */ +.dashboard-wrapper { + display: flex; + min-height: 100vh; +} + +/* 侧边栏 */ +.sidebar { + width: 260px; + background: linear-gradient(180deg, #2c3e50 0%, #34495e 100%); + color: #fff; + position: fixed; + height: 100vh; + overflow-y: auto; + transition: all 0.3s; + z-index: 1000; +} + +.sidebar .sidebar-header { + padding: 20px; + border-bottom: 1px solid rgba(255,255,255,0.1); + text-align: center; +} + +.sidebar .sidebar-header h5 { + margin: 0; + font-weight: 600; +} + +.sidebar .sidebar-header small { + opacity: 0.75; +} + +.sidebar .menu-item { + padding: 12px 20px; + cursor: pointer; + transition: all 0.3s; + display: flex; + align-items: center; + gap: 12px; + color: rgba(255,255,255,0.85); + text-decoration: none; + border-left: 3px solid transparent; +} + +.sidebar .menu-item:hover { + background-color: rgba(255,255,255,0.1); + color: #fff; +} + +.sidebar .menu-item.active { + background-color: rgba(13, 110, 253, 0.3); + color: #fff; + border-left-color: var(--primary-color); +} + +.sidebar .menu-item i { + font-size: 1.2rem; +} + +/* 主内容区 */ +.main-content { + flex: 1; + margin-left: 260px; + padding: 20px; + transition: all 0.3s; +} + +/* 顶部导航栏 */ +.top-navbar { + background: #fff; + padding: 15px 25px; + border-radius: 10px; + margin-bottom: 25px; + box-shadow: 0 2px 10px rgba(0,0,0,0.05); + display: flex; + justify-content: space-between; + align-items: center; +} + +/* 统计卡片 */ +.stat-card { + background: #fff; + border-radius: 10px; + padding: 20px; + box-shadow: 0 2px 10px rgba(0,0,0,0.05); + transition: transform 0.3s; + border-left: 4px solid var(--primary-color); +} + +.stat-card:hover { + transform: translateY(-5px); + box-shadow: 0 5px 20px rgba(0,0,0,0.1); +} + +.stat-card .stat-icon { + width: 50px; + height: 50px; + border-radius: 10px; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.5rem; + color: #fff; + margin-bottom: 15px; +} + +.stat-card .stat-icon.blue { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } +.stat-card .stat-icon.green { background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%); } +.stat-card .stat-icon.orange { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); } +.stat-card .stat-icon.red { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); } + +.stat-card .stat-value { + font-size: 2rem; + font-weight: 700; + color: var(--dark-text); + margin-bottom: 5px; +} + +.stat-card .stat-label { + color: var(--secondary-color); + font-size: 0.9rem; +} + +/* 内容卡片 */ +.content-card { + background: #fff; + border-radius: 10px; + box-shadow: 0 2px 10px rgba(0,0,0,0.05); + overflow: hidden; +} + +.content-card .card-header { + background: #fff; + border-bottom: 2px solid var(--primary-color); + padding: 15px 20px; + font-weight: 600; +} + +.content-card .card-body { + padding: 20px; +} + +/* 表格样式 */ +.table-custom { + margin-bottom: 0; +} + +.table-custom thead th { + background-color: var(--light-bg); + font-weight: 600; + border-bottom: 2px solid #dee2e6; + padding: 12px; +} + +.table-custom tbody td { + padding: 12px; + vertical-align: middle; +} + +.table-custom tbody tr:hover { + background-color: #f8f9fa; +} + +/* 状态徽章 */ +.badge-status { + padding: 6px 12px; + border-radius: 20px; + font-size: 0.85rem; + font-weight: 500; +} + +.badge-status.pending { background-color: #fff3cd; color: #856404; } +.badge-status.appointed { background-color: #cfe2ff; color: #084298; } +.badge-status.in_progress { background-color: #ffe5d0; color: #9f4600; } +.badge-status.completed { background-color: #d1e7dd; color: #0f5132; } +.badge-status.cancelled { background-color: #e9ecef; color: #495057; } + +.badge-status.paid { background-color: #d1e7dd; color: #0f5132; } +.badge-status.unpaid { background-color: #f8d7da; color: #842029; } + +/* 按钮 */ +.btn-action { + padding: 5px 10px; + font-size: 0.85rem; + margin: 0 2px; +} + +/* 模态框 */ +.modal-header { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + color: #fff; + border-radius: 10px 10px 0 0; +} + +.modal-header .btn-close { + filter: brightness(0) invert(1); +} + +/* Loading遮罩 */ +.loading-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0,0,0,0.5); + display: flex; + align-items: center; + justify-content: center; + z-index: 9999; +} + +#loadingOverlay.loading { + display: flex !important; +} + +/* Toast */ +.toast-container { + z-index: 1060; +} + +.toast.success { border-left: 4px solid var(--success-color); } +.toast.error { border-left: 4px solid var(--danger-color); } +.toast.warning { border-left: 4px solid var(--warning-color); } +.toast.info { border-left: 4px solid var(--info-color); } + +/* 空状态 */ +.empty-state { + text-align: center; + padding: 60px 20px; + color: var(--secondary-color); +} + +.empty-state i { + font-size: 4rem; + margin-bottom: 20px; + opacity: 0.5; +} + +/* 车辆卡片 */ +.vehicle-card { + background: #fff; + border-radius: 10px; + padding: 20px; + box-shadow: 0 2px 10px rgba(0,0,0,0.05); + transition: all 0.3s; + height: 100%; +} + +.vehicle-card:hover { + transform: translateY(-5px); + box-shadow: 0 5px 20px rgba(0,0,0,0.1); +} + +.vehicle-card .vehicle-plate { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + color: #fff; + padding: 8px 15px; + border-radius: 5px; + font-weight: 600; + display: inline-block; + margin-bottom: 15px; +} + +/* 响应式设计 */ +@media (max-width: 768px) { + .sidebar { + width: 0; + transform: translateX(-100%); + } + + .sidebar.show { + width: 260px; + transform: translateX(0); + } + + .main-content { + margin-left: 0; + } + + .stat-card { + margin-bottom: 15px; + } +} + +/* 搜索框 */ +.search-box { + position: relative; + max-width: 300px; +} + +.search-box input { + padding-left: 40px; +} + +.search-box i { + position: absolute; + left: 15px; + top: 50%; + transform: translateY(-50%); + color: var(--secondary-color); +} + +/* 分页 */ +.pagination-custom .page-link { + color: var(--primary-color); + border: 1px solid #dee2e6; +} + +.pagination-custom .page-item.active .page-link { + background-color: var(--primary-color); + border-color: var(--primary-color); +} + +/* 下拉菜单 */ +dropdown-menu-custom { + border: none; + box-shadow: 0 5px 20px rgba(0,0,0,0.1); + border-radius: 8px; +} + +/* 进度条 */ +.progress-custom { + height: 8px; + border-radius: 4px; +} + +/* 警告框 */ +.alert-custom { + border: none; + border-radius: 8px; + border-left: 4px solid; +} + +.alert-custom.info { + background-color: #cfe2ff; + border-left-color: var(--info-color); + color: #084298; +} + +.alert-custom.success { + background-color: #d1e7dd; + border-left-color: var(--success-color); + color: #0f5132; +} + +.alert-custom.warning { + background-color: #fff3cd; + border-left-color: var(--warning-color); + color: #856404; +} + +.alert-custom.error { + background-color: #f8d7da; + border-left-color: var(--danger-color); + color: #842029; +} diff --git a/frontend/customer/dashboard.html b/frontend/customer/dashboard.html index 3de6926..00d872b 100644 --- a/frontend/customer/dashboard.html +++ b/frontend/customer/dashboard.html @@ -4,358 +4,244 @@ 客户中心 - 车管家4S店车辆维保管理系统 - - + + + -
-
+
+ -
-
-
-

客户中心

+
+
+
+
+ 客户中心 +
-
- -
+ +
-
-

我的车辆

+
+
我的车辆
-
-
-

加载中...

+
+
+
+ +

加载中...

+
-
+
+ + +
+
+ +
+ +
+ + + + diff --git a/frontend/js/admin.js b/frontend/js/admin.js new file mode 100644 index 0000000..db2d383 --- /dev/null +++ b/frontend/js/admin.js @@ -0,0 +1,699 @@ +// 管理员仪表板专用JavaScript + +// 全局数据存储 +let allUsersData = []; +let allVehiclesData = []; +let allOrdersData = []; +let allPartsData = []; + +// ==================== 用户管理 ==================== + +// 查看用户详情 +async function viewUser(id) { + Utils.loading(true); + try { + const response = await http.get(API.USER(id)); + if (response.code === 200 && response.data) { + const user = response.data; + // 填充表单（只读模式） + document.getElementById('userId').value = user.userId; + document.getElementById('userUsername').value = user.username; + document.getElementById('userRealName').value = user.realName; + document.getElementById('userPhone').value = user.phone; + document.getElementById('userEmail').value = user.email || ''; + document.getElementById('userRole').value = user.role; + document.getElementById('userStatus').value = user.status; + + // 禁用表单控件 + document.getElementById('userForm').querySelectorAll('input, select').forEach(el => { + el.disabled = true; + }); + + document.getElementById('userModalTitle').textContent = '查看用户详情'; + const modal = new bootstrap.Modal(document.getElementById('userModal')); + modal.show(); + + // 启用表单控件（在关闭时） + document.getElementById('userModal').addEventListener('hidden.bs.modal', function() { + document.getElementById('userForm').querySelectorAll('input, select').forEach(el => { + el.disabled = false; + }); + }, { once: true }); + } + } catch (error) { + Utils.showToast('加载用户信息失败', 'error'); + } finally { + Utils.loading(false); + } +} + +// 编辑用户 +async function editUser(id) { + const user = allUsersData.find(u => u.userId === id); + if (!user) { + Utils.showToast('用户不存在', 'error'); + return; + } + + // 填充表单 + document.getElementById('userId').value = user.userId; + document.getElementById('userUsername').value = user.username; + document.getElementById('userRealName').value = user.realName; + document.getElementById('userPhone').value = user.phone; + document.getElementById('userEmail').value = user.email || ''; + document.getElementById('userRole').value = user.role; + document.getElementById('userStatus').value = user.status; + + document.getElementById('userModalTitle').textContent = '编辑用户'; + const modal = new bootstrap.Modal(document.getElementById('userModal')); + modal.show(); +} + +// 保存用户 +async function saveUser() { + const userId = document.getElementById('userId').value; + const userData = { + username: document.getElementById('userUsername').value, + realName: document.getElementById('userRealName').value, + phone: document.getElementById('userPhone').value, + email: document.getElementById('userEmail').value, + role: document.getElementById('userRole').value, + status: parseInt(document.getElementById('userStatus').value) + }; + + Utils.loading(true); + try { + let response; + if (userId) { + // 更新 + response = await http.put(API.USER(userId), userData); + } else { + // 新增 + userData.password = '123456'; // 默认密码 + response = await http.post(API.USERS, userData); + } + + if (response.code === 200) { + Utils.showToast(userId ? '更新成功' : '创建成功', 'success'); + const modal = bootstrap.Modal.getInstance(document.getElementById('userModal')); + modal.hide(); + loadAllUsers(); + } else { + Utils.showToast(response.message || '保存失败', 'error'); + } + } catch (error) { + console.error('保存用户失败:', error); + Utils.showToast('保存失败', 'error'); + } finally { + Utils.loading(false); + } +} + +// 添加用户 +function showAddUserModal() { + // 清空表单 + document.getElementById('userForm').reset(); + document.getElementById('userId').value = ''; + document.getElementById('userStatus').value = '1'; + + document.getElementById('userModalTitle').textContent = '添加用户'; + const modal = new bootstrap.Modal(document.getElementById('userModal')); + modal.show(); +} + +// ==================== 车辆管理 ==================== + +// 查看车辆详情 +async function viewVehicle(id) { + Utils.loading(true); + try { + const response = await http.get(API.VEHICLE(id)); + if (response.code === 200 && response.data) { + const vehicle = response.data; + document.getElementById('vehicleId').value = vehicle.vehicleId; + document.getElementById('vehicleLicensePlate').value = vehicle.licensePlate; + document.getElementById('vehicleBrand').value = vehicle.brand; + document.getElementById('vehicleModel').value = vehicle.model; + document.getElementById('vehicleColor').value = vehicle.color || ''; + document.getElementById('vehicleMileage').value = vehicle.mileage || 0; + document.getElementById('vehicleStatus').value = vehicle.status; + + // 禁用表单 + document.getElementById('vehicleForm').querySelectorAll('input, select').forEach(el => { + el.disabled = true; + }); + + document.getElementById('vehicleModalTitle').textContent = '查看车辆详情'; + const modal = new bootstrap.Modal(document.getElementById('vehicleModal')); + modal.show(); + + document.getElementById('vehicleModal').addEventListener('hidden.bs.modal', function() { + document.getElementById('vehicleForm').querySelectorAll('input, select').forEach(el => { + el.disabled = false; + }); + }, { once: true }); + } + } catch (error) { + Utils.showToast('加载车辆信息失败', 'error'); + } finally { + Utils.loading(false); + } +} + +// 编辑车辆 +async function editVehicle(id) { + const vehicle = allVehiclesData.find(v => v.vehicleId === id); + if (!vehicle) { + Utils.showToast('车辆不存在', 'error'); + return; + } + + document.getElementById('vehicleId').value = vehicle.vehicleId; + document.getElementById('vehicleLicensePlate').value = vehicle.licensePlate; + document.getElementById('vehicleBrand').value = vehicle.brand; + document.getElementById('vehicleModel').value = vehicle.model; + document.getElementById('vehicleColor').value = vehicle.color || ''; + document.getElementById('vehicleMileage').value = vehicle.mileage || 0; + document.getElementById('vehicleStatus').value = vehicle.status; + + document.getElementById('vehicleModalTitle').textContent = '编辑车辆'; + const modal = new bootstrap.Modal(document.getElementById('vehicleModal')); + modal.show(); +} + +// 保存车辆 +async function saveVehicle() { + const vehicleId = document.getElementById('vehicleId').value; + const vehicleData = { + licensePlate: document.getElementById('vehicleLicensePlate').value, + brand: document.getElementById('vehicleBrand').value, + model: document.getElementById('vehicleModel').value, + color: document.getElementById('vehicleColor').value, + mileage: parseFloat(document.getElementById('vehicleMileage').value) || 0, + status: document.getElementById('vehicleStatus').value + }; + + // 获取客户ID（这里简化处理，实际应该让用户选择） + if (!vehicleId) { + vehicleData.customerId = 1; // 默认使用第一个客户 + } + + Utils.loading(true); + try { + let response; + if (vehicleId) { + response = await http.put(API.VEHICLE(vehicleId), vehicleData); + } else { + response = await http.post(API.VEHICLES, vehicleData); + } + + if (response.code === 200) { + Utils.showToast(vehicleId ? '更新成功' : '添加成功', 'success'); + const modal = bootstrap.Modal.getInstance(document.getElementById('vehicleModal')); + modal.hide(); + loadAllVehicles(); + } else { + Utils.showToast(response.message || '保存失败', 'error'); + } + } catch (error) { + console.error('保存车辆失败:', error); + Utils.showToast('保存失败', 'error'); + } finally { + Utils.loading(false); + } +} + +// 添加车辆 +function showAddVehicleModal() { + document.getElementById('vehicleForm').reset(); + document.getElementById('vehicleId').value = ''; + document.getElementById('vehicleMileage').value = 0; + + document.getElementById('vehicleModalTitle').textContent = '添加车辆'; + const modal = new bootstrap.Modal(document.getElementById('vehicleModal')); + modal.show(); +} + +// ==================== 工单管理 ==================== + +// 查看工单详情 +async function viewOrder(id) { + Utils.loading(true); + try { + const response = await http.get(API.ORDER(id)); + if (response.code === 200 && response.data) { + const order = response.data; + document.getElementById('orderId').value = order.orderId; + document.getElementById('orderServiceType').value = order.serviceType; + document.getElementById('orderFaultDescription').value = order.faultDescription || ''; + document.getElementById('orderDiagnosisResult').value = order.diagnosisResult || ''; + document.getElementById('orderPartsCost').value = order.partsCost || 0; + document.getElementById('orderLaborCost').value = order.laborCost || 0; + document.getElementById('orderTotalCost').value = order.totalCost || 0; + document.getElementById('orderStatus').value = order.status; + + // 禁用表单 + document.getElementById('orderForm').querySelectorAll('input, select, textarea').forEach(el => { + el.disabled = true; + }); + + document.getElementById('orderModalTitle').textContent = '查看工单详情'; + const modal = new bootstrap.Modal(document.getElementById('orderModal')); + modal.show(); + + document.getElementById('orderModal').addEventListener('hidden.bs.modal', function() { + document.getElementById('orderForm').querySelectorAll('input, select, textarea').forEach(el => { + el.disabled = false; + }); + }, { once: true }); + } + } catch (error) { + Utils.showToast('加载工单信息失败', 'error'); + } finally { + Utils.loading(false); + } +} + +// 编辑工单 +async function editOrder(id) { + const order = allOrdersData.find(o => o.orderId === id); + if (!order) { + Utils.showToast('工单不存在', 'error'); + return; + } + + document.getElementById('orderId').value = order.orderId; + document.getElementById('orderServiceType').value = order.serviceType; + document.getElementById('orderFaultDescription').value = order.faultDescription || ''; + document.getElementById('orderDiagnosisResult').value = order.diagnosisResult || ''; + document.getElementById('orderPartsCost').value = order.partsCost || 0; + document.getElementById('orderLaborCost').value = order.laborCost || 0; + document.getElementById('orderTotalCost').value = order.totalCost || 0; + document.getElementById('orderStatus').value = order.status; + + document.getElementById('orderModalTitle').textContent = '编辑工单'; + const modal = new bootstrap.Modal(document.getElementById('orderModal')); + modal.show(); + + // 监听费用变化自动计算总额 + setupOrderCostCalculation(); +} + +// 设置工单费用自动计算 +function setupOrderCostCalculation() { + const partsCost = document.getElementById('orderPartsCost'); + const laborCost = document.getElementById('orderLaborCost'); + const totalCost = document.getElementById('orderTotalCost'); + + function updateTotal() { + const parts = parseFloat(partsCost.value) || 0; + const labor = parseFloat(laborCost.value) || 0; + totalCost.value = (parts + labor).toFixed(2); + } + + partsCost.addEventListener('input', updateTotal); + laborCost.addEventListener('input', updateTotal); +} + +// 保存工单 +async function saveOrder() { + const orderId = document.getElementById('orderId').value; + const orderData = { + serviceType: document.getElementById('orderServiceType').value, + faultDescription: document.getElementById('orderFaultDescription').value, + diagnosisResult: document.getElementById('orderDiagnosisResult').value, + partsCost: parseFloat(document.getElementById('orderPartsCost').value) || 0, + laborCost: parseFloat(document.getElementById('orderLaborCost').value) || 0, + totalCost: parseFloat(document.getElementById('orderTotalCost').value) || 0, + status: document.getElementById('orderStatus').value + }; + + Utils.loading(true); + try { + // 更新工单 + const response = await http.put(API.ORDER(orderId), orderData); + + if (response.code === 200) { + Utils.showToast('更新成功', 'success'); + const modal = bootstrap.Modal.getInstance(document.getElementById('orderModal')); + modal.hide(); + loadAllOrders(); + } else { + Utils.showToast(response.message || '保存失败', 'error'); + } + } catch (error) { + console.error('保存工单失败:', error); + Utils.showToast('保存失败', 'error'); + } finally { + Utils.loading(false); + } +} + +// 添加工单 +function showAddOrderModal() { + document.getElementById('orderForm').reset(); + document.getElementById('orderId').value = ''; + document.getElementById('orderPartsCost').value = 0; + document.getElementById('orderLaborCost').value = 0; + document.getElementById('orderTotalCost').value = 0; + + document.getElementById('orderModalTitle').textContent = '创建工单'; + const modal = new bootstrap.Modal(document.getElementById('orderModal')); + modal.show(); + + setupOrderCostCalculation(); +} + +// 过滤工单 +function filterOrders(status) { + if (!status) { + displayAllOrders(allOrdersData); + } else { + const filtered = allOrdersData.filter(o => o.status === status); + displayAllOrders(filtered); + } +} + +// ==================== 配件管理 ==================== + +// 查看配件详情 +async function viewPart(id) { + Utils.loading(true); + try { + const response = await http.get(API.PART(id)); + if (response.code === 200 && response.data) { + const part = response.data; + // 显示配件详情 + Utils.showToast('配件名称: ' + part.partName + '\n库存: ' + part.stockQuantity + part.unit, 'info'); + } + } catch (error) { + Utils.showToast('加载配件信息失败', 'error'); + } finally { + Utils.loading(false); + } +} + +// 编辑配件 +async function editPart(id) { + const part = allPartsData.find(p => p.partId === id); + if (!part) { + Utils.showToast('配件不存在', 'error'); + return; + } + + // 简单实现：使用prompt编辑 + const newStock = prompt('请输入新的库存数量:', part.stockQuantity); + if (newStock !== null && !isNaN(newStock)) { + Utils.loading(true); + try { + const response = await http.put(API.PART(id), { + ...part, + stockQuantity: parseInt(newStock) + }); + + if (response.code === 200) { + Utils.showToast('更新成功', 'success'); + loadAllParts(); + } else { + Utils.showToast(response.message || '更新失败', 'error'); + } + } catch (error) { + Utils.showToast('更新失败', 'error'); + } finally { + Utils.loading(false); + } + } +} + +// 添加配件 +function showAddPartModal() { + Utils.showToast('添加配件功能开发中...', 'info'); +} + +// ==================== 数据加载函数 ==================== + +// 加载所有数据 +async function loadAllData() { + await Promise.all([ + loadAllUsers(), + loadAllVehicles(), + loadAllOrders(), + loadAllParts() + ]); +} + +// 加载所有配件 +async function loadAllParts() { + Utils.loading(true); + try { + const response = await http.get(API.PARTS); + if (response.code === 200) { + allPartsData = response.data || []; + displayAllParts(allPartsData); + } + } catch (error) { + console.error('加载配件失败:', error); + } finally { + Utils.loading(false); + } +} + +// 显示所有配件 +function displayAllParts(parts) { + const tbody = document.getElementById('partsTableBody'); + if (!tbody) return; + + if (parts.length === 0) { + tbody.innerHTML = '暂无数据'; + return; + } + + tbody.innerHTML = parts.map(p => ` + + ${p.partNo} + ${p.partName} + ${p.category || '-'} + + ${p.stockQuantity} ${p.unit} + ${p.stockQuantity <= p.minStock ? '库存预警' : ''} + + ${Utils.formatMoney(p.unitPrice)} + + + + + + + `).join(''); +} + +// 删除配件 +async function deletePart(id) { + if (!Utils.confirm('确定要删除此配件吗？')) return; + + Utils.loading(true); + try { + const response = await http.delete(API.PART(id)); + if (response.code === 200) { + Utils.showToast('删除成功', 'success'); + loadAllParts(); + } else { + Utils.showToast(response.message || '删除失败', 'error'); + } + } catch (error) { + Utils.showToast('删除失败', 'error'); + } finally { + Utils.loading(false); + } +} + +// ==================== 页面初始化 ==================== + +// 重写displayAllUsers以存储数据 +const originalDisplayAllUsers = displayAllUsers; +displayAllUsers = function(users) { + allUsersData = users || []; + const tbody = document.getElementById('allUsersTableBody'); + if (!tbody) return; + + if (users.length === 0) { + tbody.innerHTML = '暂无数据'; + return; + } + + tbody.innerHTML = users.map(u => ` + + ${u.userId} + ${u.username} + ${u.realName} + ${u.phone} + ${Utils.getRoleText(u.role)} + ${u.status === 1 ? '启用' : '禁用'} + + + + + + + `).join(''); +}; + +// 重写displayAllVehicles以存储数据 +const originalDisplayAllVehicles = displayAllVehicles; +displayAllVehicles = function(vehicles) { + allVehiclesData = vehicles || []; + const tbody = document.getElementById('allVehiclesTableBody'); + if (!tbody) return; + + if (vehicles.length === 0) { + tbody.innerHTML = '暂无数据'; + return; + } + + tbody.innerHTML = vehicles.map(v => ` + + ${v.licensePlate} + ${v.brand} ${v.model} + ${v.color || '-'} + ${v.mileage || 0} + ${Utils.getStatusBadge(v.status)} + + + + + + + `).join(''); +}; + +// 重写displayAllOrders以存储数据 +const originalDisplayAllOrders = displayAllOrders; +displayAllOrders = async function(orders) { + allOrdersData = orders || []; + const tbody = document.getElementById('allOrdersTableBody'); + if (!tbody) return; + + if (orders.length === 0) { + tbody.innerHTML = '暂无数据'; + return; + } + + // 获取所有车辆信息 + const vehiclesRes = await http.get(API.VEHICLES); + const vehicles = vehiclesRes.data || []; + + tbody.innerHTML = orders.map(o => { + const vehicle = vehicles.find(v => v.vehicleId === o.vehicleId); + return ` + + ${o.orderNo} + ${Utils.getServiceTypeText(o.serviceType)} + ${vehicle ? vehicle.licensePlate : '-'} + ${Utils.formatMoney(o.totalCost)} + ${Utils.getStatusBadge(o.status)} + ${Utils.getStatusBadge(o.paymentStatus, 'payment')} + ${Utils.formatDateTime(o.createTime)} + + + + + + + `; + }).join(''); +}; + +// 加载预约数据 +async function loadAppointments() { + Utils.loading(true); + try { + const [appointmentsRes, vehiclesRes] = await Promise.all([ + http.get(API.APPOINTMENTS), + http.get(API.VEHICLES) + ]); + + if (appointmentsRes.code === 200) { + const vehicles = vehiclesRes.data || []; + displayAppointments(appointmentsRes.data || [], vehicles); + } + } catch (error) { + console.error('加载预约失败:', error); + } finally { + Utils.loading(false); + } +} + +// 显示预约列表 +function displayAppointments(appointments, vehicles) { + const tbody = document.getElementById('appointmentsTableBody'); + if (!tbody) return; + + if (appointments.length === 0) { + tbody.innerHTML = '暂无数据'; + return; + } + + tbody.innerHTML = appointments.map(a => { + const vehicle = vehicles.find(v => v.vehicleId === a.vehicleId); + return ` + + ${a.appointmentId} + ${Utils.getServiceTypeText(a.serviceType)} + ${vehicle ? vehicle.licensePlate : '-'} + ${Utils.formatDateTime(a.appointmentTime)} + ${a.contactPhone} + ${Utils.getStatusBadge(a.status, 'appointment')} + + + + + + `; + }).join(''); +} + +// 管理员确认预约 +async function confirmAppointment(id) { + Utils.loading(true); + try { + const response = await http.put(API.APPOINTMENT(id), { status: 'confirmed' }); + if (response.code === 200) { + Utils.showToast('预约已确认', 'success'); + loadAppointments(); + } else { + Utils.showToast(response.message || '操作失败', 'error'); + } + } catch (error) { + Utils.showToast('操作失败', 'error'); + } finally { + Utils.loading(false); + } +} + +// 管理员取消预约 +async function cancelAppointmentAdmin(id) { + if (!Utils.confirm('确定要取消此预约吗？')) return; + + Utils.loading(true); + try { + const response = await http.put(API.APPOINTMENT_CANCEL(id), {}); + if (response.code === 200) { + Utils.showToast('预约已取消', 'success'); + loadAppointments(); + } else { + Utils.showToast(response.message || '操作失败', 'error'); + } + } catch (error) { + Utils.showToast('操作失败', 'error'); + } finally { + Utils.loading(false); + } +} + +// 页面加载完成后初始化 +document.addEventListener('DOMContentLoaded', function() { + // 如果是管理员页面，加载所有数据 + if (window.location.pathname.includes('admin')) { + loadAllData(); + } +}); diff --git a/frontend/js/api.js b/frontend/js/api.js index d01f12a..3718f14 100644 --- a/frontend/js/api.js +++ b/frontend/js/api.js @@ -1,5 +1,5 @@ -// API请求工具类 -class API { +// HTTP请求类 +class HttpClient { constructor() { this.baseURL = API_CONFIG.BASE_URL; this.timeout = API_CONFIG.TIMEOUT; @@ -11,7 +11,7 @@ class API { 'Content-Type': 'application/json' }; - const token = localStorage.getItem(STORAGE_KEYS.TOKEN); + const token = localStorage.getItem(STORAGE.TOKEN); if (token) { headers['Authorization'] = `Bearer ${token}`; } @@ -48,51 +48,93 @@ class API { } // GET请求 - async get(url) { + get(url) { return this.request(url, { method: 'GET' }); } // POST请求 - async post(url, body) { + post(url, body) { return this.request(url, { method: 'POST', body }); } // PUT请求 - async put(url, body) { + put(url, body) { return this.request(url, { method: 'PUT', body }); } // DELETE请求 - async delete(url) { + delete(url) { return this.request(url, { method: 'DELETE' }); } - // 处理未授权情况 + // 处理未授权 handleUnauthorized() { - localStorage.removeItem(STORAGE_KEYS.TOKEN); - localStorage.removeItem(STORAGE_KEYS.USER_INFO); + localStorage.removeItem(STORAGE.TOKEN); + localStorage.removeItem(STORAGE.USER); window.location.href = 'login.html'; } } -// 创建API实例 -const api = new API(); +// 创建HTTP客户端实例 +const http = new HttpClient(); -// 工具函数 -const utils = { - // 显示提示消息 - showMessage(message, type = 'info') { - alert(message); +// 工具函数类 +const Utils = { + // 显示Toast消息 + showToast(message, type = 'info') { + const toastEl = document.getElementById('liveToast'); + const toast = new bootstrap.Toast(toastEl); + + const toastIcon = document.getElementById('toastIcon'); + const toastTitle = document.getElementById('toastTitle'); + const toastMessage = document.getElementById('toastMessage'); + + // 设置图标和样式 + toastEl.className = 'toast'; + toastIcon.className = 'bi me-2'; + + switch(type) { + case 'success': + toastEl.classList.add('success'); + toastIcon.classList.add('bi-check-circle-fill'); + toastIcon.style.color = '#198754'; + toastTitle.textContent = '成功'; + break; + case 'error': + toastEl.classList.add('error'); + toastIcon.classList.add('bi-x-circle-fill'); + toastIcon.style.color = '#dc3545'; + toastTitle.textContent = '错误'; + break; + case 'warning': + toastEl.classList.add('warning'); + toastIcon.classList.add('bi-exclamation-triangle-fill'); + toastIcon.style.color = '#ffc107'; + toastTitle.textContent = '警告'; + break; + default: + toastEl.classList.add('info'); + toastIcon.classList.add('bi-info-circle-fill'); + toastIcon.style.color = '#0dcaf0'; + toastTitle.textContent = '提示'; + } + + toastMessage.textContent = message; + toast.show(); }, - // 显示成功消息 - showSuccess(message) { - this.showMessage(message, 'success'); - }, - - // 显示错误消息 - showError(message) { - this.showMessage(message, 'error'); + // 显示/隐藏Loading + loading(show = true) { + const overlay = document.getElementById('loadingOverlay'); + if (overlay) { + if (show) { + overlay.classList.remove('d-none'); + overlay.classList.add('loading'); + } else { + overlay.classList.add('d-none'); + overlay.classList.remove('loading'); + } + } }, // 确认对话框 @@ -111,12 +153,24 @@ const utils = { formatDateTime(dateString) { if (!dateString) return '-'; const date = new Date(dateString); - return date.toLocaleString('zh-CN'); + return date.toLocaleString('zh-CN', { + year: 'numeric', + month: '2-digit', + day: '2-digit', + hour: '2-digit', + minute: '2-digit' + }); }, - // 获取当前用户信息 + // 格式化金额 + formatMoney(amount) { + if (amount === null || amount === undefined) return '-'; + return '¥' + parseFloat(amount).toFixed(2); + }, + + // 获取当前用户 getCurrentUser() { - const userStr = localStorage.getItem(STORAGE_KEYS.USER_INFO); + const userStr = localStorage.getItem(STORAGE.USER); return userStr ? JSON.parse(userStr) : null; }, @@ -129,15 +183,15 @@ const utils = { // 退出登录 logout() { if (this.confirm('确定要退出登录吗？')) { - localStorage.removeItem(STORAGE_KEYS.TOKEN); - localStorage.removeItem(STORAGE_KEYS.USER_INFO); + localStorage.removeItem(STORAGE.TOKEN); + localStorage.removeItem(STORAGE.USER); window.location.href = 'login.html'; } }, // 检查登录状态 checkAuth() { - const token = localStorage.getItem(STORAGE_KEYS.TOKEN); + const token = localStorage.getItem(STORAGE.TOKEN); if (!token) { window.location.href = 'login.html'; return false; @@ -145,50 +199,64 @@ const utils = { return true; }, - // 获取状态标签HTML - getStatusBadge(status, type) { + // 获取状态徽章HTML + getStatusBadge(status, type = 'order') { const badges = { - // 工单状态 - pending: '待处理', - appointed: '已预约', - in_progress: '进行中', - completed: '已完成', - cancelled: '已取消', - - // 支付状态 - unpaid: '未支付', - paid: '已支付', - refunded: '已退款', - - // 预约状态 - confirmed: '已确认', - - // 车辆状态 - normal: '正常', - in_service: '维修中' + order: { + pending: '待处理', + appointed: '已预约', + in_progress: '进行中', + completed: '已完成', + cancelled: '已取消' + }, + payment: { + unpaid: '未支付', + paid: '', + refunded: '已退款' + }, + appointment: { + pending: '待确认', + confirmed: '已确认', + completed: '已完成', + cancelled: '已取消' + } }; - - return badges[status] || `${status}`; + return badges[type]?.[status] || `${status}`; }, // 获取服务类型文本 getServiceTypeText(type) { const types = { - maintenance: '保养维护', - repair: '维修服务', - beauty: '美容服务', - insurance: '保险代理' + maintenance: '保养维护', + repair: '维修服务', + beauty: '美容服务', + insurance: '保险代理' }; return types[type] || type; }, - // 获取用户角色文本 + // 获取角色文本 getRoleText(role) { const roles = { - admin: '管理员', - staff: '工作人员', - customer: '客户' + admin: '管理员', + staff: '工作人员', + customer: '客户' }; return roles[role] || role; + }, + + // 根据角色跳转 + redirectToDashboard(role) { + const roleMap = { + 'admin': 'admin/dashboard.html', + 'staff': 'staff/dashboard.html', + 'customer': 'customer/dashboard.html' + }; + const url = roleMap[role]; + if (url) { + window.location.href = url; + } else { + this.showToast('未知的用户角色', 'error'); + } } }; diff --git a/frontend/js/app.js b/frontend/js/app.js new file mode 100644 index 0000000..4e1f0f3 --- /dev/null +++ b/frontend/js/app.js @@ -0,0 +1,757 @@ +// 应用程序初始化 +document.addEventListener('DOMContentLoaded', function() { + // 检查是否已登录 + const token = localStorage.getItem(STORAGE.TOKEN); + const user = Utils.getCurrentUser(); + + // 如果在登录页面 + if (window.location.pathname.endsWith('login.html')) { + if (token && user) { + Utils.redirectToDashboard(user.role); + return; + } + initLoginPage(); + return; + } + + // 如果在仪表板页面 + if (token && user) { + initDashboard(user); + } else { + window.location.href = 'login.html'; + } +}); + +// 初始化登录页面 +function initLoginPage() { + const loginForm = document.getElementById('loginForm'); + const loginBtn = document.getElementById('loginBtn'); + + if (loginForm) { + loginForm.addEventListener('submit', async function(e) { + e.preventDefault(); + + const username = document.getElementById('username').value.trim(); + const password = document.getElementById('password').value.trim(); + const role = document.getElementById('role').value; + + // 验证输入 + if (!username) { + Utils.showToast('请输入用户名', 'warning'); + return; + } + + if (!password) { + Utils.showToast('请输入密码', 'warning'); + return; + } + + // 禁用按钮并显示loading + loginBtn.disabled = true; + loginBtn.innerHTML = '登录中...'; + Utils.loading(true); + + try { + const response = await http.post(API.LOGIN, { + username: username, + password: password + }); + + if (response.code === 200) { + const { token, userInfo } = response.data; + + // 验证角色 + if (userInfo.role !== role) { + Utils.showToast('登录角色不匹配，请选择正确的角色', 'error'); + loginBtn.disabled = false; + loginBtn.innerHTML = ' 登录'; + Utils.loading(false); + return; + } + + // 保存登录信息 + localStorage.setItem(STORAGE.TOKEN, token); + localStorage.setItem(STORAGE.USER, JSON.stringify(userInfo)); + + Utils.showToast('登录成功！', 'success'); + + // 延迟跳转 + setTimeout(() => { + Utils.redirectToDashboard(userInfo.role); + }, 500); + + } else { + Utils.showToast(response.message || '登录失败', 'error'); + loginBtn.disabled = false; + loginBtn.innerHTML = ' 登录'; + Utils.loading(false); + } + + } catch (error) { + console.error('登录错误:', error); + Utils.showToast('登录失败，请检查网络连接', 'error'); + loginBtn.disabled = false; + loginBtn.innerHTML = ' 登录'; + Utils.loading(false); + } + }); + } + + // 回车键登录 + const passwordInput = document.getElementById('password'); + if (passwordInput) { + passwordInput.addEventListener('keypress', function(e) { + if (e.key === 'Enter') { + loginForm.dispatchEvent(new Event('submit')); + } + }); + } +} + +// 初始化仪表板 +function initDashboard(user) { + // 显示用户信息 + const userNameEl = document.getElementById('userName'); + const userRoleEl = document.getElementById('userRole'); + const userAvatarEl = document.getElementById('userAvatar'); + + if (userNameEl) userNameEl.textContent = user.realName; + if (userRoleEl) userRoleEl.textContent = Utils.getRoleText(user.role); + if (userAvatarEl && !userAvatarEl.textContent) { + userAvatarEl.textContent = user.realName.charAt(0).toUpperCase(); + } + + // 根据角色加载不同内容 + switch(user.role) { + case 'admin': + initAdminDashboard(); + break; + case 'staff': + initStaffDashboard(); + break; + case 'customer': + initCustomerDashboard(); + break; + } +} + +// 初始化管理员仪表板 +function initAdminDashboard() { + console.log('初始化管理员仪表板'); + + // 加载所有数据 + if (typeof loadAllData === 'function') { + loadAllData(); + } else { + // 单独加载各个模块 + loadAdminStats(); + loadRecentOrders(); + loadAppointments(); + } +} + +// 加载最近工单 +async function loadRecentOrders() { + try { + const response = await http.get(API.ORDERS); + if (response.code === 200 && response.data) { + const orders = response.data.slice(0, 5); // 只取前5条 + displayRecentOrders(orders); + } + } catch (error) { + console.error('加载最近工单失败:', error); + } +} + +// 显示最近工单 +async function displayRecentOrders(orders) { + const tbody = document.getElementById('recentOrdersTableBody'); + if (!tbody) return; + + if (orders.length === 0) { + tbody.innerHTML = '暂无数据'; + return; + } + + // 获取所有车辆信息 + const vehiclesRes = await http.get(API.VEHICLES); + const vehicles = vehiclesRes.data || []; + + tbody.innerHTML = orders.map(o => { + const vehicle = vehicles.find(v => v.vehicleId === o.vehicleId); + return ` + + ${o.orderNo} + ${Utils.getServiceTypeText(o.serviceType)} + ${vehicle ? vehicle.licensePlate : '-'} + ${Utils.formatMoney(o.totalCost)} + ${Utils.getStatusBadge(o.status)} + ${Utils.formatDateTime(o.createTime)} + + `; + }).join(''); +} + +// 加载管理员统计数据 +async function loadAdminStats() { + try { + const [usersRes, vehiclesRes, ordersRes, partsRes] = await Promise.all([ + http.get(API.USERS), + http.get(API.VEHICLES), + http.get(API.ORDERS), + http.get(API.PARTS_LOW_STOCK) + ]); + + if (usersRes.code === 200) { + updateStat('totalUsers', usersRes.data?.length || 0); + } + + if (vehiclesRes.code === 200) { + updateStat('totalVehicles', vehiclesRes.data?.length || 0); + } + + if (ordersRes.code === 200) { + updateStat('totalOrders', ordersRes.data?.length || 0); + } + + if (partsRes.code === 200) { + updateStat('lowStockParts', partsRes.data?.length || 0); + } + } catch (error) { + console.error('加载统计数据失败:', error); + } +} + +// 更新统计数字 +function updateStat(id, value) { + const el = document.getElementById(id); + if (el) { + el.textContent = value; + // 添加动画效果 + el.style.transition = 'all 0.3s'; + el.style.transform = 'scale(1.2)'; + setTimeout(() => { + el.style.transform = 'scale(1)'; + }, 300); + } +} + +// 初始化工作人员仪表板 +function initStaffDashboard() { + console.log('初始化工作人员仪表板'); + loadStaffStats(); +} + +// 加载工作人员统计数据 +async function loadStaffStats() { + const user = Utils.getCurrentUser(); + if (!user) return; + + try { + const response = await http.get(API.ORDERS); + if (response.code === 200 && response.data) { + const myOrders = response.data.filter(o => o.staffId === user.userId); + const inProgress = myOrders.filter(o => o.status === 'in_progress'); + const completed = myOrders.filter(o => o.status === 'completed'); + + updateStat('myOrdersCount', myOrders.length); + updateStat('inProgressCount', inProgress.length); + updateStat('completedCount', completed.length); + } + } catch (error) { + console.error('加载统计数据失败:', error); + } +} + +// 初始化客户仪表板 +function initCustomerDashboard() { + console.log('初始化客户仪表板'); + loadCustomerData(); +} + +// 加载客户数据 +async function loadCustomerData() { + const user = Utils.getCurrentUser(); + if (!user) return; + + try { + // 获取所有用户，找到自己的customer_id + const usersRes = await http.get(API.USERS); + if (usersRes.code === 200 && usersRes.data) { + const customers = usersRes.data.filter(u => u.role === 'customer'); + const currentUser = customers.find(c => c.userId === user.userId); + + if (currentUser) { + // 加载车辆、工单、预约数据 + loadCustomerVehicles(currentUser.userId); + loadCustomerOrders(currentUser.userId); + loadCustomerAppointments(currentUser.userId); + } + } + } catch (error) { + console.error('加载客户数据失败:', error); + } +} + +// 加载客户车辆 +async function loadCustomerVehicles(userId) { + try { + const response = await http.get(API.VEHICLES); + if (response.code === 200 && response.data) { + const myVehicles = response.data.filter(v => v.customerId === userId); + displayVehicles(myVehicles); + populateVehicleSelect(myVehicles); + } + } catch (error) { + console.error('加载车辆失败:', error); + } +} + +// 显示车辆列表 +function displayVehicles(vehicles) { + const container = document.getElementById('vehiclesContainer'); + if (!container) return; + + if (vehicles.length === 0) { + container.innerHTML = ` +
+ +

暂无车辆信息

+
+ `; + return; + } + + container.innerHTML = vehicles.map(v => ` +
+
+
${v.licensePlate}
+
${v.brand} ${v.model}
+

+ 颜色: ${v.color || '-'} +

+

+ 里程: ${v.mileage || 0} 公里 +

+

+ 上次保养: ${Utils.formatDate(v.lastMaintenanceDate)} +

+ ${Utils.getStatusBadge(v.status)} +
+
+ `).join(''); +} + +// 填充车辆选择框 +function populateVehicleSelect(vehicles) { + const select = document.getElementById('vehicleSelect'); + if (!select) return; + + select.innerHTML = '' + + vehicles.map(v => ``).join(''); +} + +// 加载客户工单 +async function loadCustomerOrders(userId) { + try { + const [ordersRes, vehiclesRes] = await Promise.all([ + http.get(API.ORDER_CUSTOMER(userId)), + http.get(API.VEHICLES) + ]); + + if (ordersRes.code === 200 && ordersRes.data) { + const vehicles = vehiclesRes.data || []; + displayOrders(ordersRes.data, vehicles); + } + } catch (error) { + console.error('加载工单失败:', error); + } +} + +// 显示工单列表 +function displayOrders(orders, vehicles) { + const tbody = document.getElementById('ordersTableBody'); + if (!tbody) return; + + if (orders.length === 0) { + tbody.innerHTML = '暂无维保记录'; + return; + } + + tbody.innerHTML = orders.map(o => { + const vehicle = vehicles.find(v => v.vehicleId === o.vehicleId); + return ` + + ${o.orderNo} + ${Utils.getServiceTypeText(o.serviceType)} + ${vehicle ? vehicle.licensePlate : '-'} + ${Utils.formatMoney(o.totalCost)} + ${Utils.getStatusBadge(o.status)} + ${Utils.formatDateTime(o.createTime)} + + `; + }).join(''); +} + +// 加载客户预约 +async function loadCustomerAppointments(userId) { + try { + const [appointmentsRes, vehiclesRes] = await Promise.all([ + http.get(API.APPOINTMENT_CUSTOMER(userId)), + http.get(API.VEHICLES) + ]); + + if (appointmentsRes.code === 200 && appointmentsRes.data) { + const vehicles = vehiclesRes.data || []; + displayAppointments(appointmentsRes.data, vehicles); + } + } catch (error) { + console.error('加载预约失败:', error); + } +} + +// 显示预约列表 +function displayAppointments(appointments, vehicles) { + const tbody = document.getElementById('appointmentsTableBody'); + if (!tbody) return; + + if (appointments.length === 0) { + tbody.innerHTML = '暂无预约记录'; + return; + } + + tbody.innerHTML = appointments.map(a => { + const vehicle = vehicles.find(v => v.vehicleId === a.vehicleId); + return ` + + ${Utils.getServiceTypeText(a.serviceType)} + ${vehicle ? vehicle.licensePlate : '-'} + ${Utils.formatDateTime(a.appointmentTime)} + ${Utils.getStatusBadge(a.status, 'appointment')} + + ${a.status === 'pending' ? `` : '-'} + + + `; + }).join(''); +} + +// 取消预约 +async function cancelAppointment(id) { + if (!Utils.confirm('确定要取消此预约吗？')) return; + + Utils.loading(true); + try { + const response = await http.put(API.APPOINTMENT_CANCEL(id), {}); + if (response.code === 200) { + Utils.showToast('预约已取消', 'success'); + // 重新加载预约列表 + const user = Utils.getCurrentUser(); + if (user) { + loadCustomerAppointments(user.userId); + } + } else { + Utils.showToast(response.message || '取消失败', 'error'); + } + } catch (error) { + console.error('取消预约失败:', error); + Utils.showToast('操作失败，请重试', 'error'); + } finally { + Utils.loading(false); + } +} + +// 提交预约 +async function submitAppointment() { + const user = Utils.getCurrentUser(); + if (!user) return; + + const vehicleId = document.getElementById('vehicleSelect').value; + const serviceType = document.getElementById('serviceType').value; + const appointmentTime = document.getElementById('appointmentTime').value; + const contactPhone = document.getElementById('contactPhone').value; + const description = document.getElementById('description').value; + + // 验证 + if (!vehicleId) { + Utils.showToast('请选择车辆', 'warning'); + return; + } + + if (!appointmentTime) { + Utils.showToast('请选择预约时间', 'warning'); + return; + } + + if (!contactPhone) { + Utils.showToast('请输入联系电话', 'warning'); + return; + } + + Utils.loading(true); + try { + const response = await http.post(API.APPOINTMENTS, { + customerId: user.userId, + vehicleId: parseInt(vehicleId), + serviceType: serviceType, + appointmentTime: appointmentTime, + contactPhone: contactPhone, + description: description + }); + + if (response.code === 200) { + Utils.showToast('预约成功！', 'success'); + // 重置表单 + document.getElementById('appointmentForm').reset(); + // 重新加载预约列表 + loadCustomerAppointments(user.userId); + } else { + Utils.showToast(response.message || '预约失败', 'error'); + } + } catch (error) { + console.error('预约失败:', error); + Utils.showToast('预约失败，请重试', 'error'); + } finally { + Utils.loading(false); + } +} + +// 显示Toast（全局函数） +function showToast(message, type = 'info') { + Utils.showToast(message, type); +} + +// 显示Section +function showSection(sectionId) { + // 隐藏所有section + document.querySelectorAll('.content-section').forEach(section => { + section.style.display = 'none'; + }); + + // 显示选中的section + const targetSection = document.getElementById(sectionId + '-section'); + if (targetSection) { + targetSection.style.display = 'block'; + } + + // 更新菜单激活状态 + document.querySelectorAll('.menu-item').forEach(item => { + item.classList.remove('active'); + }); + event.currentTarget.classList.add('active'); + + // 加载对应数据 + switch(sectionId) { + case 'overview': + if (Utils.hasRole('admin')) { + loadAdminStats(); + } else if (Utils.hasRole('staff')) { + loadStaffStats(); + } + break; + case 'vehicles': + loadAllVehicles(); + break; + case 'orders': + loadAllOrders(); + break; + case 'users': + loadAllUsers(); + break; + } +} + +// 加载所有车辆（管理员页面使用） +async function loadAllVehicles() { + // 如果是管理员页面，调用admin.js中的函数 + if (typeof loadAllData === 'function') { + return; + } + + Utils.loading(true); + try { + const response = await http.get(API.VEHICLES); + if (response.code === 200) { + displayAllVehicles(response.data || []); + } + } catch (error) { + console.error('加载车辆失败:', error); + Utils.showToast('加载失败', 'error'); + } finally { + Utils.loading(false); + } +} + +// 显示所有车辆（客户页面使用） +function displayAllVehicles(vehicles) { + // 如果是管理员页面，不执行 + if (document.getElementById('allVehiclesTableBody')) { + return; + } + + const container = document.getElementById('vehiclesContainer'); + if (!container) return; + + if (vehicles.length === 0) { + container.innerHTML = ` +
+ +

暂无车辆信息

+
+ `; + return; + } + + container.innerHTML = vehicles.map(v => ` +
+
+
${v.licensePlate}
+
${v.brand} ${v.model}
+

+ 颜色: ${v.color || '-'} +

+

+ 里程: ${v.mileage || 0} 公里 +

+

+ 上次保养: ${Utils.formatDate(v.lastMaintenanceDate)} +

+ ${Utils.getStatusBadge(v.status)} +
+
+ `).join(''); +} + +// 加载所有工单 +async function loadAllOrders() { + // 如果是管理员页面，跳过（由admin.js处理） + if (document.getElementById('allOrdersTableBody')) { + return; + } + + Utils.loading(true); + try { + const response = await http.get(API.ORDERS); + if (response.code === 200) { + displayAllOrders(response.data || []); + } + } catch (error) { + console.error('加载工单失败:', error); + Utils.showToast('加载失败', 'error'); + } finally { + Utils.loading(false); + } +} + +// 显示所有工单（客户页面使用） +async function displayAllOrders(orders) { + // 如果是管理员页面，不执行 + if (document.getElementById('allOrdersTableBody')) { + return; + } + + const tbody = document.getElementById('ordersTableBody'); + if (!tbody) return; + + if (orders.length === 0) { + tbody.innerHTML = '暂无维保记录'; + return; + } + + // 获取所有车辆信息 + const vehiclesRes = await http.get(API.VEHICLES); + const vehicles = vehiclesRes.data || []; + + tbody.innerHTML = orders.map(o => { + const vehicle = vehicles.find(v => v.vehicleId === o.vehicleId); + return ` + + ${o.orderNo} + ${Utils.getServiceTypeText(o.serviceType)} + ${vehicle ? vehicle.licensePlate : '-'} + ${Utils.formatMoney(o.totalCost)} + ${Utils.getStatusBadge(o.status)} + ${Utils.formatDateTime(o.createTime)} + + `; + }).join(''); +} + +// 加载所有用户 +async function loadAllUsers() { + // 管理员页面由admin.js处理 + if (document.getElementById('allUsersTableBody')) { + return; + } +} + +// 显示所有用户（占位） +function displayAllUsers(users) { + // 管理员页面由admin.js处理 +} + +// CRUD操作函数 +async function deleteVehicle(id) { + if (!Utils.confirm('确定要删除此车辆吗？')) return; + + Utils.loading(true); + try { + const response = await http.delete(API.VEHICLE(id)); + if (response.code === 200) { + Utils.showToast('删除成功', 'success'); + loadAllVehicles(); + } else { + Utils.showToast(response.message || '删除失败', 'error'); + } + } catch (error) { + Utils.showToast('删除失败', 'error'); + } finally { + Utils.loading(false); + } +} + +async function deleteOrder(id) { + if (!Utils.confirm('确定要删除此工单吗？')) return; + + Utils.loading(true); + try { + const response = await http.delete(API.ORDER(id)); + if (response.code === 200) { + Utils.showToast('删除成功', 'success'); + loadAllOrders(); + } else { + Utils.showToast(response.message || '删除失败', 'error'); + } + } catch (error) { + Utils.showToast('删除失败', 'error'); + } finally { + Utils.loading(false); + } +} + +async function deleteUser(id) { + if (!Utils.confirm('确定要删除此用户吗？')) return; + + Utils.loading(true); + try { + const response = await http.delete(API.USER(id)); + if (response.code === 200) { + Utils.showToast('删除成功', 'success'); + loadAllUsers(); + } else { + Utils.showToast(response.message || '删除失败', 'error'); + } + } catch (error) { + Utils.showToast('删除失败', 'error'); + } finally { + Utils.loading(false); + } +} + +// 占位函数 +function viewVehicle(id) { Utils.showToast('查看车辆功能', 'info'); } +function editVehicle(id) { Utils.showToast('编辑车辆功能', 'info'); } +function viewOrder(id) { Utils.showToast('查看工单功能', 'info'); } +function editOrder(id) { Utils.showToast('编辑工单功能', 'info'); } +function viewUser(id) { Utils.showToast('查看用户功能', 'info'); } +function editUser(id) { Utils.showToast('编辑用户功能', 'info'); } diff --git a/frontend/js/config.js b/frontend/js/config.js index 3019a25..dbe1c52 100644 --- a/frontend/js/config.js +++ b/frontend/js/config.js @@ -5,48 +5,87 @@ const API_CONFIG = { }; // API端点 -const API_ENDPOINTS = { - // 认证相关 +const API = { + // 认证 LOGIN: '/auth/login', LOGOUT: '/auth/logout', REGISTER: '/auth/register', - // 用户管理 + // 用户 USERS: '/users', - USER_BY_ID: (id) => `/users/${id}`, - USERS_BY_ROLE: (role) => `/users/role/${role}`, + USER: (id) => `/users/${id}`, + USERS_ROLE: (role) => `/users/role/${role}`, CHANGE_PASSWORD: (id) => `/users/${id}/password`, - // 车辆管理 + // 车辆 VEHICLES: '/vehicles', - VEHICLE_BY_ID: (id) => `/vehicles/${id}`, - VEHICLES_BY_CUSTOMER: (customerId) => `/vehicles/customer/${customerId}`, - VEHICLE_BY_PLATE: (plate) => `/vehicles/plate/${plate}`, + VEHICLE: (id) => `/vehicles/${id}`, + VEHICLE_CUSTOMER: (customerId) => `/vehicles/customer/${customerId}`, + VEHICLE_PLATE: (plate) => `/vehicles/plate/${plate}`, - // 工单管理 + // 工单 ORDERS: '/orders', - ORDER_BY_ID: (id) => `/orders/${id}`, - ORDERS_BY_CUSTOMER: (customerId) => `/orders/customer/${customerId}`, - ORDERS_BY_VEHICLE: (vehicleId) => `/orders/vehicle/${vehicleId}`, - ORDERS_BY_STATUS: (status) => `/orders/status/${status}`, + ORDER: (id) => `/orders/${id}`, + ORDER_CUSTOMER: (customerId) => `/orders/customer/${customerId}`, + ORDER_VEHICLE: (vehicleId) => `/orders/vehicle/${vehicleId}`, + ORDER_STATUS: (status) => `/orders/status/${status}`, - // 配件管理 + // 配件 PARTS: '/parts', - PART_BY_ID: (id) => `/parts/${id}`, - PARTS_BY_CATEGORY: (category) => `/parts/category/${category}`, + PART: (id) => `/parts/${id}`, + PARTS_CATEGORY: (category) => `/parts/category/${category}`, PARTS_LOW_STOCK: '/parts/low-stock', - // 预约管理 + // 预约 APPOINTMENTS: '/appointments', - APPOINTMENT_BY_ID: (id) => `/appointments/${id}`, - APPOINTMENTS_BY_CUSTOMER: (customerId) => `/appointments/customer/${customerId}`, - APPOINTMENTS_BY_STATUS: (status) => `/appointments/status/${status}`, - CANCEL_APPOINTMENT: (id) => `/appointments/${id}/cancel` + APPOINTMENT: (id) => `/appointments/${id}`, + APPOINTMENT_CUSTOMER: (customerId) => `/appointments/customer/${customerId}`, + APPOINTMENT_STATUS: (status) => `/appointments/status/${status}`, + APPOINTMENT_CANCEL: (id) => `/appointments/${id}/cancel` }; // 本地存储键名 -const STORAGE_KEYS = { +const STORAGE = { TOKEN: 'car_maintenance_token', - USER_INFO: 'car_maintenance_user', - REMEMBER_ME: 'car_maintenance_remember' + USER: 'car_maintenance_user', + REMEMBER: 'car_maintenance_remember' +}; + +// 角色类型 +const ROLES = { + ADMIN: 'admin', + STAFF: 'staff', + CUSTOMER: 'customer' +}; + +// 服务类型 +const SERVICE_TYPES = { + MAINTENANCE: 'maintenance', + REPAIR: 'repair', + BEAUTY: 'beauty', + INSURANCE: 'insurance' +}; + +// 工单状态 +const ORDER_STATUS = { + PENDING: 'pending', + APPOINTED: 'appointed', + IN_PROGRESS: 'in_progress', + COMPLETED: 'completed', + CANCELLED: 'cancelled' +}; + +// 支付状态 +const PAYMENT_STATUS = { + UNPAID: 'unpaid', + PAID: 'paid', + REFUNDED: 'refunded' +}; + +// 预约状态 +const APPOINTMENT_STATUS = { + PENDING: 'pending', + CONFIRMED: 'confirmed', + COMPLETED: 'completed', + CANCELLED: 'cancelled' }; diff --git a/frontend/login.html b/frontend/login.html index 9b70249..27074b9 100644 --- a/frontend/login.html +++ b/frontend/login.html @@ -4,58 +4,101 @@ 车管家4S店车辆维保管理系统 - 登录 - - + + + - +