add
This commit is contained in:
wangziqi
@@ -122,6 +122,6 @@ public class AppointmentController {
|
||||
return Result.notFound("预约不存在");
|
||||
}
|
||||
appointmentRepository.deleteById(id);
|
||||
return Result.success("删除成功");
|
||||
return Result.<Void>success("删除成功", null);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -82,6 +82,6 @@ public class AuthController {
|
||||
*/
|
||||
@PostMapping("/logout")
|
||||
public Result<Void> logout() {
|
||||
return Result.success("退出成功");
|
||||
return Result.<Void>success("退出成功", null);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -109,6 +109,6 @@ public class PartsInventoryController {
|
||||
return Result.notFound("配件不存在");
|
||||
}
|
||||
partsInventoryRepository.deleteById(id);
|
||||
return Result.success("删除成功");
|
||||
return Result.<Void>success("删除成功", null);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -126,7 +126,7 @@ public class ServiceOrderController {
|
||||
return Result.notFound("工单不存在");
|
||||
}
|
||||
serviceOrderRepository.deleteById(id);
|
||||
return Result.success("删除成功");
|
||||
return Result.<Void>success("删除成功", null);
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -102,7 +102,7 @@ public class UserController {
|
||||
return Result.notFound("用户不存在");
|
||||
}
|
||||
userRepository.deleteById(id);
|
||||
return Result.success("删除成功");
|
||||
return Result.<Void>success("删除成功", null);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -123,6 +123,6 @@ public class UserController {
|
||||
|
||||
user.setPassword(newPassword);
|
||||
userRepository.save(user);
|
||||
return Result.success("密码修改成功");
|
||||
return Result.<Void>success("密码修改成功", null);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -107,6 +107,6 @@ public class VehicleController {
|
||||
return Result.notFound("车辆不存在");
|
||||
}
|
||||
vehicleRepository.deleteById(id);
|
||||
return Result.success("删除成功");
|
||||
return Result.<Void>success("删除成功", null);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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
|
||||
|
||||
170
frontend/FEATURES.md
Normal file
170
frontend/FEATURES.md
Normal file
@@ -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 | 车辆、预约 |
|
||||
|
||||
---
|
||||
|
||||
所有功能现在都是真实的！数据会真正保存到数据库并实时刷新！
|
||||
@@ -4,297 +4,514 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>管理员仪表板 - 车管家4S店车辆维保管理系统</title>
|
||||
<link rel="stylesheet" href="../css/common.css">
|
||||
<link rel="stylesheet" href="../css/dashboard.css">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="dashboard-container">
|
||||
<div class="dashboard-wrapper">
|
||||
<!-- 侧边栏 -->
|
||||
<div class="sidebar">
|
||||
<nav class="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<h2>车管家系统</h2>
|
||||
<p>管理员控制台</p>
|
||||
<i class="bi bi-car-front-fill fs-1 d-block mb-2"></i>
|
||||
<h5 class="mb-1">车管家系统</h5>
|
||||
<small>管理员控制台</small>
|
||||
</div>
|
||||
<div class="sidebar-menu">
|
||||
<div class="menu-item active" onclick="showSection('overview')">
|
||||
<span class="menu-icon">📊</span>
|
||||
<div class="mt-4">
|
||||
<a class="menu-item active" onclick="showSection('overview')">
|
||||
<i class="bi bi-speedometer2"></i>
|
||||
<span>系统概览</span>
|
||||
</div>
|
||||
<div class="menu-item" onclick="showSection('users')">
|
||||
<span class="menu-icon">👥</span>
|
||||
</a>
|
||||
<a class="menu-item" onclick="showSection('users')">
|
||||
<i class="bi bi-people-fill"></i>
|
||||
<span>用户管理</span>
|
||||
</div>
|
||||
<div class="menu-item" onclick="showSection('vehicles')">
|
||||
<span class="menu-icon">🚗</span>
|
||||
</a>
|
||||
<a class="menu-item" onclick="showSection('vehicles')">
|
||||
<i class="bi bi-car-front"></i>
|
||||
<span>车辆管理</span>
|
||||
</div>
|
||||
<div class="menu-item" onclick="showSection('orders')">
|
||||
<span class="menu-icon">📋</span>
|
||||
</a>
|
||||
<a class="menu-item" onclick="showSection('orders')">
|
||||
<i class="bi bi-clipboard-data"></i>
|
||||
<span>工单管理</span>
|
||||
</div>
|
||||
<div class="menu-item" onclick="showSection('parts')">
|
||||
<span class="menu-icon">🔧</span>
|
||||
</a>
|
||||
<a class="menu-item" onclick="showSection('parts')">
|
||||
<i class="bi bi-box-seam"></i>
|
||||
<span>配件管理</span>
|
||||
</div>
|
||||
<div class="menu-item" onclick="showSection('appointments')">
|
||||
<span class="menu-icon">📅</span>
|
||||
</a>
|
||||
<a class="menu-item" onclick="showSection('appointments')">
|
||||
<i class="bi bi-calendar-check"></i>
|
||||
<span>预约管理</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="main-content">
|
||||
<!-- 顶部导航 -->
|
||||
<div class="top-nav">
|
||||
<div class="top-nav-left">
|
||||
<h1>管理员仪表板</h1>
|
||||
<main class="main-content">
|
||||
<!-- 顶部导航栏 -->
|
||||
<div class="top-navbar">
|
||||
<div class="d-flex align-items-center">
|
||||
<h5 class="mb-0 me-3">
|
||||
<i class="bi bi-speedometer2"></i> 管理员仪表板
|
||||
</h5>
|
||||
</div>
|
||||
<div class="top-nav-right">
|
||||
<div class="user-info">
|
||||
<div class="user-avatar" id="userAvatar">A</div>
|
||||
<span class="user-name" id="userName">管理员</span>
|
||||
<div class="d-flex align-items-center gap-3">
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-outline-light dropdown-toggle" type="button" data-bs-toggle="dropdown">
|
||||
<i class="bi bi-person-circle"></i>
|
||||
<span id="userName">管理员</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end">
|
||||
<li><h6 class="dropdown-header">当前角色</h6></li>
|
||||
<li><span class="dropdown-item" id="userRole"></span></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="#" onclick="Utils.logout()">
|
||||
<i class="bi bi-box-arrow-right"></i> 退出登录
|
||||
</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<button class="btn-logout" onclick="utils.logout()">退出登录</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 系统概览 -->
|
||||
<div id="overview-section" class="section">
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon blue">👥</div>
|
||||
<div class="stat-info">
|
||||
<h3 id="totalUsers">0</h3>
|
||||
<p>用户总数</p>
|
||||
<div id="overview-section" class="content-section">
|
||||
<!-- 统计卡片 -->
|
||||
<div class="row g-4 mb-4">
|
||||
<div class="col-md-3">
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon blue">
|
||||
<i class="bi bi-people-fill"></i>
|
||||
</div>
|
||||
<div class="stat-value" id="totalUsers">0</div>
|
||||
<div class="stat-label">用户总数</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon green">🚗</div>
|
||||
<div class="stat-info">
|
||||
<h3 id="totalVehicles">0</h3>
|
||||
<p>车辆总数</p>
|
||||
<div class="col-md-3">
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon green">
|
||||
<i class="bi bi-car-front-fill"></i>
|
||||
</div>
|
||||
<div class="stat-value" id="totalVehicles">0</div>
|
||||
<div class="stat-label">车辆总数</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon orange">📋</div>
|
||||
<div class="stat-info">
|
||||
<h3 id="totalOrders">0</h3>
|
||||
<p>工单总数</p>
|
||||
<div class="col-md-3">
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon orange">
|
||||
<i class="bi bi-clipboard-data-fill"></i>
|
||||
</div>
|
||||
<div class="stat-value" id="totalOrders">0</div>
|
||||
<div class="stat-label">工单总数</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon red">🔧</div>
|
||||
<div class="stat-info">
|
||||
<h3 id="lowStockParts">0</h3>
|
||||
<p>库存预警</p>
|
||||
<div class="col-md-3">
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon red">
|
||||
<i class="bi bi-exclamation-triangle-fill"></i>
|
||||
</div>
|
||||
<div class="stat-value" id="lowStockParts">0</div>
|
||||
<div class="stat-label">库存预警</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 最近工单 -->
|
||||
<div class="content-card">
|
||||
<div class="content-header">
|
||||
<h2>最近工单</h2>
|
||||
<div class="card-header">
|
||||
<h6 class="mb-0"><i class="bi bi-clock-history"></i> 最近工单</h6>
|
||||
</div>
|
||||
<div class="content-body">
|
||||
<table class="table" id="recentOrdersTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>工单编号</th>
|
||||
<th>服务类型</th>
|
||||
<th>车牌号</th>
|
||||
<th>状态</th>
|
||||
<th>创建时间</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="recentOrdersBody">
|
||||
<tr><td colspan="5" class="empty-state">加载中...</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-custom">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>工单编号</th>
|
||||
<th>服务类型</th>
|
||||
<th>车牌号</th>
|
||||
<th>总费用</th>
|
||||
<th>状态</th>
|
||||
<th>创建时间</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="recentOrdersTableBody">
|
||||
<tr>
|
||||
<td colspan="6" class="text-center text-muted py-4">
|
||||
<div class="spinner-border spinner-border-sm me-2"></div>
|
||||
加载中...
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 用户管理 -->
|
||||
<div id="users-section" class="section" style="display: none;">
|
||||
<div class="toolbar">
|
||||
<div class="toolbar-left">
|
||||
<button class="btn btn-primary" onclick="showAddUserModal()">添加用户</button>
|
||||
</div>
|
||||
<div class="search-box">
|
||||
<input type="text" id="searchUser" placeholder="搜索用户..." onkeyup="searchUsers()">
|
||||
<button>🔍</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="users-section" class="content-section" style="display: none;">
|
||||
<div class="content-card">
|
||||
<div class="content-body">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>用户名</th>
|
||||
<th>真实姓名</th>
|
||||
<th>手机号</th>
|
||||
<th>角色</th>
|
||||
<th>状态</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="usersTableBody">
|
||||
<tr><td colspan="7" class="empty-state">加载中...</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h6 class="mb-0"><i class="bi bi-people-fill"></i> 用户管理</h6>
|
||||
<button class="btn btn-primary btn-sm" onclick="showAddUserModal()">
|
||||
<i class="bi bi-person-plus"></i> 添加用户
|
||||
</button>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-custom">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>用户名</th>
|
||||
<th>真实姓名</th>
|
||||
<th>手机号</th>
|
||||
<th>角色</th>
|
||||
<th>状态</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="allUsersTableBody">
|
||||
<tr>
|
||||
<td colspan="7" class="text-center text-muted py-4">加载中...</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 车辆管理 -->
|
||||
<div id="vehicles-section" class="section" style="display: none;">
|
||||
<div class="toolbar">
|
||||
<div class="toolbar-left">
|
||||
<button class="btn btn-primary" onclick="showAddVehicleModal()">添加车辆</button>
|
||||
</div>
|
||||
<div class="search-box">
|
||||
<input type="text" id="searchVehicle" placeholder="搜索车辆..." onkeyup="searchVehicles()">
|
||||
<button>🔍</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="vehicles-section" class="content-section" style="display: none;">
|
||||
<div class="content-card">
|
||||
<div class="content-body">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>车牌号</th>
|
||||
<th>品牌型号</th>
|
||||
<th>颜色</th>
|
||||
<th>里程数</th>
|
||||
<th>状态</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="vehiclesTableBody">
|
||||
<tr><td colspan="6" class="empty-state">加载中...</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h6 class="mb-0"><i class="bi bi-car-front"></i> 车辆管理</h6>
|
||||
<button class="btn btn-primary btn-sm" onclick="showAddVehicleModal()">
|
||||
<i class="bi bi-plus-circle"></i> 添加车辆
|
||||
</button>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-custom">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>车牌号</th>
|
||||
<th>品牌型号</th>
|
||||
<th>颜色</th>
|
||||
<th>里程(公里)</th>
|
||||
<th>状态</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="allVehiclesTableBody">
|
||||
<tr>
|
||||
<td colspan="6" class="text-center text-muted py-4">加载中...</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 工单管理 -->
|
||||
<div id="orders-section" class="section" style="display: none;">
|
||||
<div class="toolbar">
|
||||
<div class="toolbar-left">
|
||||
<button class="btn btn-primary" onclick="showAddOrderModal()">创建工单</button>
|
||||
<select id="orderStatusFilter" onchange="filterOrders()">
|
||||
<option value="">全部状态</option>
|
||||
<option value="pending">待处理</option>
|
||||
<option value="appointed">已预约</option>
|
||||
<option value="in_progress">进行中</option>
|
||||
<option value="completed">已完成</option>
|
||||
<option value="cancelled">已取消</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="orders-section" class="content-section" style="display: none;">
|
||||
<div class="content-card">
|
||||
<div class="content-body">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>工单编号</th>
|
||||
<th>服务类型</th>
|
||||
<th>车牌号</th>
|
||||
<th>总费用</th>
|
||||
<th>状态</th>
|
||||
<th>创建时间</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="ordersTableBody">
|
||||
<tr><td colspan="7" class="empty-state">加载中...</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h6 class="mb-0"><i class="bi bi-clipboard-data"></i> 工单管理</h6>
|
||||
<div>
|
||||
<select class="form-select form-select-sm d-inline-block w-auto me-2" onchange="filterOrders(this.value)">
|
||||
<option value="">全部状态</option>
|
||||
<option value="pending">待处理</option>
|
||||
<option value="appointed">已预约</option>
|
||||
<option value="in_progress">进行中</option>
|
||||
<option value="completed">已完成</option>
|
||||
<option value="cancelled">已取消</option>
|
||||
</select>
|
||||
<button class="btn btn-primary btn-sm" onclick="showAddOrderModal()">
|
||||
<i class="bi bi-plus-circle"></i> 创建工单
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-custom">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>工单编号</th>
|
||||
<th>服务类型</th>
|
||||
<th>车牌号</th>
|
||||
<th>总费用</th>
|
||||
<th>工单状态</th>
|
||||
<th>支付状态</th>
|
||||
<th>创建时间</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="allOrdersTableBody">
|
||||
<tr>
|
||||
<td colspan="8" class="text-center text-muted py-4">加载中...</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 配件管理 -->
|
||||
<div id="parts-section" class="section" style="display: none;">
|
||||
<div class="toolbar">
|
||||
<div class="toolbar-left">
|
||||
<button class="btn btn-primary" onclick="showAddPartModal()">添加配件</button>
|
||||
<button class="btn btn-warning" onclick="showLowStockParts()">库存预警</button>
|
||||
</div>
|
||||
<div class="search-box">
|
||||
<input type="text" id="searchPart" placeholder="搜索配件..." onkeyup="searchParts()">
|
||||
<button>🔍</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="parts-section" class="content-section" style="display: none;">
|
||||
<div class="content-card">
|
||||
<div class="content-body">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>配件编号</th>
|
||||
<th>配件名称</th>
|
||||
<th>类别</th>
|
||||
<th>库存数量</th>
|
||||
<th>单价</th>
|
||||
<th>状态</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="partsTableBody">
|
||||
<tr><td colspan="7" class="empty-state">加载中...</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h6 class="mb-0"><i class="bi bi-box-seam"></i> 配件管理</h6>
|
||||
<button class="btn btn-primary btn-sm" onclick="showAddPartModal()">
|
||||
<i class="bi bi-plus-circle"></i> 添加配件
|
||||
</button>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-custom">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>配件编号</th>
|
||||
<th>配件名称</th>
|
||||
<th>类别</th>
|
||||
<th>库存数量</th>
|
||||
<th>单价</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="partsTableBody">
|
||||
<tr>
|
||||
<td colspan="6" class="text-center text-muted py-4">加载中...</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 预约管理 -->
|
||||
<div id="appointments-section" class="section" style="display: none;">
|
||||
<div class="toolbar">
|
||||
<div class="toolbar-left">
|
||||
<select id="appointmentStatusFilter" onchange="filterAppointments()">
|
||||
<option value="">全部状态</option>
|
||||
<option value="pending">待确认</option>
|
||||
<option value="confirmed">已确认</option>
|
||||
<option value="completed">已完成</option>
|
||||
<option value="cancelled">已取消</option>
|
||||
</select>
|
||||
<div id="appointments-section" class="content-section" style="display: none;">
|
||||
<div class="content-card">
|
||||
<div class="card-header">
|
||||
<h6 class="mb-0"><i class="bi bi-calendar-check"></i> 预约管理</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-custom">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>预约ID</th>
|
||||
<th>服务类型</th>
|
||||
<th>车牌号</th>
|
||||
<th>预约时间</th>
|
||||
<th>联系电话</th>
|
||||
<th>状态</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="appointmentsTableBody">
|
||||
<tr>
|
||||
<td colspan="7" class="text-center text-muted py-4">加载中...</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<div class="content-card">
|
||||
<div class="content-body">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>预约ID</th>
|
||||
<th>服务类型</th>
|
||||
<th>车牌号</th>
|
||||
<th>预约时间</th>
|
||||
<th>联系电话</th>
|
||||
<th>状态</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="appointmentsTableBody">
|
||||
<tr><td colspan="7" class="empty-state">加载中...</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- 用户编辑模态框 -->
|
||||
<div class="modal fade" id="userModal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="userModalTitle">编辑用户</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="userForm">
|
||||
<input type="hidden" id="userId">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">用户名</label>
|
||||
<input type="text" class="form-control" id="userUsername" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">真实姓名</label>
|
||||
<input type="text" class="form-control" id="userRealName" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">手机号</label>
|
||||
<input type="tel" class="form-control" id="userPhone" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">邮箱</label>
|
||||
<input type="email" class="form-control" id="userEmail">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">角色</label>
|
||||
<select class="form-select" id="userRole" required>
|
||||
<option value="admin">管理员</option>
|
||||
<option value="staff">工作人员</option>
|
||||
<option value="customer">客户</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">状态</label>
|
||||
<select class="form-select" id="userStatus">
|
||||
<option value="1">启用</option>
|
||||
<option value="0">禁用</option>
|
||||
</select>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
|
||||
<button type="button" class="btn btn-primary" onclick="saveUser()">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 车辆编辑模态框 -->
|
||||
<div class="modal fade" id="vehicleModal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="vehicleModalTitle">编辑车辆</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="vehicleForm">
|
||||
<input type="hidden" id="vehicleId">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">车牌号</label>
|
||||
<input type="text" class="form-control" id="vehicleLicensePlate" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">品牌</label>
|
||||
<input type="text" class="form-control" id="vehicleBrand" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">型号</label>
|
||||
<input type="text" class="form-control" id="vehicleModel" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">颜色</label>
|
||||
<input type="text" class="form-control" id="vehicleColor">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">里程(公里)</label>
|
||||
<input type="number" step="0.01" class="form-control" id="vehicleMileage" value="0">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">状态</label>
|
||||
<select class="form-select" id="vehicleStatus">
|
||||
<option value="normal">正常</option>
|
||||
<option value="in_service">维修中</option>
|
||||
<option value="completed">已完成</option>
|
||||
</select>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
|
||||
<button type="button" class="btn btn-primary" onclick="saveVehicle()">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 工单编辑模态框 -->
|
||||
<div class="modal fade" id="orderModal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="orderModalTitle">编辑工单</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="orderForm">
|
||||
<input type="hidden" id="orderId">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">服务类型</label>
|
||||
<select class="form-select" id="orderServiceType" required>
|
||||
<option value="maintenance">保养维护</option>
|
||||
<option value="repair">维修服务</option>
|
||||
<option value="beauty">美容服务</option>
|
||||
<option value="insurance">保险代理</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">故障描述</label>
|
||||
<textarea class="form-control" id="orderFaultDescription" rows="2"></textarea>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">诊断结果</label>
|
||||
<textarea class="form-control" id="orderDiagnosisResult" rows="2"></textarea>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6 mb-3">
|
||||
<label class="form-label">配件费用</label>
|
||||
<input type="number" step="0.01" class="form-control" id="orderPartsCost" value="0">
|
||||
</div>
|
||||
<div class="col-6 mb-3">
|
||||
<label class="form-label">工时费用</label>
|
||||
<input type="number" step="0.01" class="form-control" id="orderLaborCost" value="0">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6 mb-3">
|
||||
<label class="form-label">总费用</label>
|
||||
<input type="number" step="0.01" class="form-control" id="orderTotalCost" value="0" readonly>
|
||||
</div>
|
||||
<div class="col-6 mb-3">
|
||||
<label class="form-label">状态</label>
|
||||
<select class="form-select" id="orderStatus">
|
||||
<option value="pending">待处理</option>
|
||||
<option value="appointed">已预约</option>
|
||||
<option value="in_progress">进行中</option>
|
||||
<option value="completed">已完成</option>
|
||||
<option value="cancelled">已取消</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
|
||||
<button type="button" class="btn btn-primary" onclick="saveOrder()">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Toast 通知 -->
|
||||
<div class="toast-container position-fixed top-0 end-0 p-3">
|
||||
<div id="liveToast" class="toast" role="alert">
|
||||
<div class="toast-header">
|
||||
<i class="bi bi-bell me-2" id="toastIcon"></i>
|
||||
<strong class="me-auto" id="toastTitle">提示</strong>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="toast"></button>
|
||||
</div>
|
||||
<div class="toast-body" id="toastMessage"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Loading 遮罩 -->
|
||||
<div id="loadingOverlay" class="loading-overlay d-none">
|
||||
<div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="../js/config.js"></script>
|
||||
<script src="../js/api.js"></script>
|
||||
<script src="../js/admin-dashboard.js"></script>
|
||||
<script src="../js/admin.js"></script>
|
||||
<script src="../js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
313
frontend/admin/modals.html
Normal file
313
frontend/admin/modals.html
Normal file
@@ -0,0 +1,313 @@
|
||||
<!-- 用户编辑模态框 -->
|
||||
<div class="modal fade" id="userModal" tabindex="-1">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="userModalTitle">用户信息</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="userForm">
|
||||
<input type="hidden" id="userId">
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label">用户名</label>
|
||||
<input type="text" class="form-control" id="userUsername" required>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label">真实姓名</label>
|
||||
<input type="text" class="form-control" id="userRealName" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label">手机号</label>
|
||||
<input type="tel" class="form-control" id="userPhone" required>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label">邮箱</label>
|
||||
<input type="email" class="form-control" id="userEmail">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label">角色</label>
|
||||
<select class="form-select" id="userRole" required>
|
||||
<option value="admin">管理员</option>
|
||||
<option value="staff">工作人员</option>
|
||||
<option value="customer">客户</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label">状态</label>
|
||||
<select class="form-select" id="userStatus">
|
||||
<option value="1">启用</option>
|
||||
<option value="0">禁用</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">密码</label>
|
||||
<input type="password" class="form-control" id="userPassword" placeholder="不修改请留空">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
|
||||
<button type="button" class="btn btn-primary" onclick="saveUser()">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 车辆编辑模态框 -->
|
||||
<div class="modal fade" id="vehicleModal" tabindex="-1">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="vehicleModalTitle">车辆信息</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="vehicleForm">
|
||||
<input type="hidden" id="vehicleId">
|
||||
<input type="hidden" id="vehicleCustomerId">
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label">车牌号</label>
|
||||
<input type="text" class="form-control" id="vehicleLicensePlate" required>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label">品牌</label>
|
||||
<input type="text" class="form-control" id="vehicleBrand" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label">型号</label>
|
||||
<input type="text" class="form-control" id="vehicleModel" required>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label">颜色</label>
|
||||
<input type="text" class="form-control" id="vehicleColor">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label">车架号</label>
|
||||
<input type="text" class="form-control" id="vehicleVin">
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label">发动机号</label>
|
||||
<input type="text" class="form-control" id="vehicleEngineNo">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label">购买日期</label>
|
||||
<input type="date" class="form-control" id="vehiclePurchaseDate">
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label">当前里程(公里)</label>
|
||||
<input type="number" step="0.01" class="form-control" id="vehicleMileage">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label">上次保养日期</label>
|
||||
<input type="date" class="form-control" id="vehicleLastMaintenanceDate">
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label">下次保养日期</label>
|
||||
<input type="date" class="form-control" id="vehicleNextMaintenanceDate">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">状态</label>
|
||||
<select class="form-select" id="vehicleStatus">
|
||||
<option value="normal">正常</option>
|
||||
<option value="in_service">维修中</option>
|
||||
<option value="completed">已完成</option>
|
||||
</select>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
|
||||
<button type="button" class="btn btn-primary" onclick="saveVehicle()">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 工单编辑模态框 -->
|
||||
<div class="modal fade" id="orderModal" tabindex="-1">
|
||||
<div class="modal-dialog modal-xl">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="orderModalTitle">工单信息</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="orderForm">
|
||||
<input type="hidden" id="orderId">
|
||||
<div class="row">
|
||||
<div class="col-md-4 mb-3">
|
||||
<label class="form-label">工单编号</label>
|
||||
<input type="text" class="form-control" id="orderNo" readonly>
|
||||
</div>
|
||||
<div class="col-md-4 mb-3">
|
||||
<label class="form-label">服务类型</label>
|
||||
<select class="form-select" id="orderServiceType" required>
|
||||
<option value="maintenance">保养维护</option>
|
||||
<option value="repair">维修服务</option>
|
||||
<option value="beauty">美容服务</option>
|
||||
<option value="insurance">保险代理</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-4 mb-3">
|
||||
<label class="form-label">当前里程(公里)</label>
|
||||
<input type="number" step="0.01" class="form-control" id="orderCurrentMileage">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">故障描述</label>
|
||||
<textarea class="form-control" id="orderFaultDescription" rows="3"></textarea>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">诊断结果</label>
|
||||
<textarea class="form-control" id="orderDiagnosisResult" rows="3"></textarea>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-4 mb-3">
|
||||
<label class="form-label">配件费用</label>
|
||||
<input type="number" step="0.01" class="form-control" id="orderPartsCost" value="0">
|
||||
</div>
|
||||
<div class="col-md-4 mb-3">
|
||||
<label class="form-label">工时费用</label>
|
||||
<input type="number" step="0.01" class="form-control" id="orderLaborCost" value="0">
|
||||
</div>
|
||||
<div class="col-md-4 mb-3">
|
||||
<label class="form-label">总费用</label>
|
||||
<input type="number" step="0.01" class="form-control" id="orderTotalCost" value="0" readonly>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label">工单状态</label>
|
||||
<select class="form-select" id="orderStatus">
|
||||
<option value="pending">待处理</option>
|
||||
<option value="appointed">已预约</option>
|
||||
<option value="in_progress">进行中</option>
|
||||
<option value="completed">已完成</option>
|
||||
<option value="cancelled">已取消</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label">支付状态</label>
|
||||
<select class="form-select" id="orderPaymentStatus">
|
||||
<option value="unpaid">未支付</option>
|
||||
<option value="paid">已支付</option>
|
||||
<option value="refunded">已退款</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">备注</label>
|
||||
<textarea class="form-control" id="orderRemark" rows="2"></textarea>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
|
||||
<button type="button" class="btn btn-primary" onclick="saveOrder()">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 配件编辑模态框 -->
|
||||
<div class="modal fade" id="partModal" tabindex="-1">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="partModalTitle">配件信息</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="partForm">
|
||||
<input type="hidden" id="partId">
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label">配件编号</label>
|
||||
<input type="text" class="form-control" id="partNo" required>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label">配件名称</label>
|
||||
<input type="text" class="form-control" id="partName" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label">类别</label>
|
||||
<input type="text" class="form-control" id="partCategory">
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label">品牌</label>
|
||||
<input type="text" class="form-control" id="partBrand">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-4 mb-3">
|
||||
<label class="form-label">单位</label>
|
||||
<input type="text" class="form-control" id="partUnit" value="个">
|
||||
</div>
|
||||
<div class="col-md-4 mb-3">
|
||||
<label class="form-label">单价</label>
|
||||
<input type="number" step="0.01" class="form-control" id="partUnitPrice" required>
|
||||
</div>
|
||||
<div class="col-md-4 mb-3">
|
||||
<label class="form-label">库存数量</label>
|
||||
<input type="number" class="form-control" id="partStockQuantity" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-4 mb-3">
|
||||
<label class="form-label">最小库存</label>
|
||||
<input type="number" class="form-control" id="partMinStock" value="10">
|
||||
</div>
|
||||
<div class="col-md-4 mb-3">
|
||||
<label class="form-label">供应商</label>
|
||||
<input type="text" class="form-control" id="partSupplier">
|
||||
</div>
|
||||
<div class="col-md-4 mb-3">
|
||||
<label class="form-label">仓库位置</label>
|
||||
<input type="text" class="form-control" id="partWarehouseLocation">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">适用车型</label>
|
||||
<input type="text" class="form-control" id="partModel">
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="form-label">状态</label>
|
||||
<select class="form-select" id="partStatus">
|
||||
<option value="1">正常</option>
|
||||
<option value="0">停用</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">备注</label>
|
||||
<textarea class="form-control" id="partRemark" rows="2"></textarea>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
|
||||
<button type="button" class="btn btn-primary" onclick="savePart()">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
397
frontend/css/style.css
Normal file
397
frontend/css/style.css
Normal file
@@ -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;
|
||||
}
|
||||
@@ -4,358 +4,244 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>客户中心 - 车管家4S店车辆维保管理系统</title>
|
||||
<link rel="stylesheet" href="../css/common.css">
|
||||
<link rel="stylesheet" href="../css/dashboard.css">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="dashboard-container">
|
||||
<div class="sidebar">
|
||||
<div class="dashboard-wrapper">
|
||||
<nav class="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<h2>车管家系统</h2>
|
||||
<p>客户中心</p>
|
||||
<i class="bi bi-car-front-fill fs-1 d-block mb-2"></i>
|
||||
<h5 class="mb-1">车管家系统</h5>
|
||||
<small>客户中心</small>
|
||||
</div>
|
||||
<div class="sidebar-menu">
|
||||
<div class="menu-item active" onclick="showSection('myvehicles')">
|
||||
<span class="menu-icon">🚗</span>
|
||||
<div class="mt-4">
|
||||
<a class="menu-item active" onclick="showSection('myvehicles')">
|
||||
<i class="bi bi-car-front"></i>
|
||||
<span>我的车辆</span>
|
||||
</div>
|
||||
<div class="menu-item" onclick="showSection('myorders')">
|
||||
<span class="menu-icon">📋</span>
|
||||
</a>
|
||||
<a class="menu-item" onclick="showSection('myorders')">
|
||||
<i class="bi bi-clipboard-data"></i>
|
||||
<span>维保记录</span>
|
||||
</div>
|
||||
<div class="menu-item" onclick="showSection('appointments')">
|
||||
<span class="menu-icon">📅</span>
|
||||
</a>
|
||||
<a class="menu-item" onclick="showSection('appointments')">
|
||||
<i class="bi bi-calendar-check"></i>
|
||||
<span>我的预约</span>
|
||||
</div>
|
||||
<div class="menu-item" onclick="showSection('newappointment')">
|
||||
<span class="menu-icon">➕</span>
|
||||
</a>
|
||||
<a class="menu-item" onclick="showSection('newappointment')">
|
||||
<i class="bi bi-plus-circle"></i>
|
||||
<span>在线预约</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="main-content">
|
||||
<div class="top-nav">
|
||||
<div class="top-nav-left">
|
||||
<h1>客户中心</h1>
|
||||
<main class="main-content">
|
||||
<div class="top-navbar">
|
||||
<div class="d-flex align-items-center">
|
||||
<h5 class="mb-0 me-3">
|
||||
<i class="bi bi-person-circle"></i> 客户中心
|
||||
</h5>
|
||||
</div>
|
||||
<div class="top-nav-right">
|
||||
<div class="user-info">
|
||||
<div class="user-avatar" id="userAvatar">C</div>
|
||||
<span class="user-name" id="userName">客户</span>
|
||||
<div class="d-flex align-items-center gap-3">
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-outline-light dropdown-toggle" type="button" data-bs-toggle="dropdown">
|
||||
<i class="bi bi-person-circle"></i>
|
||||
<span id="userName">客户</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end">
|
||||
<li><h6 class="dropdown-header">当前角色</h6></li>
|
||||
<li><span class="dropdown-item" id="userRole"></span></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="#" onclick="Utils.logout()">
|
||||
<i class="bi bi-box-arrow-right"></i> 退出登录
|
||||
</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<button class="btn-logout" onclick="utils.logout()">退出登录</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="myvehicles-section" class="section">
|
||||
<!-- 我的车辆 -->
|
||||
<div id="myvehicles-section" class="content-section">
|
||||
<div class="content-card">
|
||||
<div class="content-header">
|
||||
<h2>我的车辆</h2>
|
||||
<div class="card-header">
|
||||
<h6 class="mb-0"><i class="bi bi-car-front"></i> 我的车辆</h6>
|
||||
</div>
|
||||
<div class="content-body">
|
||||
<div id="vehiclesGrid" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;">
|
||||
<p class="empty-state">加载中...</p>
|
||||
<div class="card-body">
|
||||
<div class="row" id="vehiclesContainer">
|
||||
<div class="col-12 text-center text-muted py-5">
|
||||
<div class="spinner-border text-primary mb-3" role="status"></div>
|
||||
<p>加载中...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="myorders-section" class="section" style="display: none;">
|
||||
<!-- 维保记录 -->
|
||||
<div id="myorders-section" class="content-section" style="display: none;">
|
||||
<div class="content-card">
|
||||
<div class="content-header">
|
||||
<h2>维保记录</h2>
|
||||
<div class="card-header">
|
||||
<h6 class="mb-0"><i class="bi bi-clipboard-data"></i> 维保记录</h6>
|
||||
</div>
|
||||
<div class="content-body">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>工单编号</th>
|
||||
<th>服务类型</th>
|
||||
<th>车牌号</th>
|
||||
<th>费用</th>
|
||||
<th>状态</th>
|
||||
<th>创建时间</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="ordersBody">
|
||||
<tr><td colspan="6" class="empty-state">加载中...</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-custom">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>工单编号</th>
|
||||
<th>服务类型</th>
|
||||
<th>车牌号</th>
|
||||
<th>费用</th>
|
||||
<th>状态</th>
|
||||
<th>创建时间</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="ordersTableBody">
|
||||
<tr>
|
||||
<td colspan="6" class="text-center text-muted py-4">
|
||||
<div class="spinner-border spinner-border-sm me-2"></div>
|
||||
加载中...
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="appointments-section" class="section" style="display: none;">
|
||||
<!-- 我的预约 -->
|
||||
<div id="appointments-section" class="content-section" style="display: none;">
|
||||
<div class="content-card">
|
||||
<div class="content-header">
|
||||
<h2>我的预约</h2>
|
||||
<div class="card-header">
|
||||
<h6 class="mb-0"><i class="bi bi-calendar-check"></i> 我的预约</h6>
|
||||
</div>
|
||||
<div class="content-body">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>服务类型</th>
|
||||
<th>车牌号</th>
|
||||
<th>预约时间</th>
|
||||
<th>状态</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="appointmentsBody">
|
||||
<tr><td colspan="5" class="empty-state">加载中...</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-custom">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>服务类型</th>
|
||||
<th>车牌号</th>
|
||||
<th>预约时间</th>
|
||||
<th>状态</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="appointmentsTableBody">
|
||||
<tr>
|
||||
<td colspan="5" class="text-center text-muted py-4">
|
||||
<div class="spinner-border spinner-border-sm me-2"></div>
|
||||
加载中...
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="newappointment-section" class="section" style="display: none;">
|
||||
<!-- 在线预约 -->
|
||||
<div id="newappointment-section" class="content-section" style="display: none;">
|
||||
<div class="content-card">
|
||||
<div class="content-header">
|
||||
<h2>在线预约服务</h2>
|
||||
<div class="card-header">
|
||||
<h6 class="mb-0"><i class="bi bi-plus-circle"></i> 在线预约服务</h6>
|
||||
</div>
|
||||
<div class="content-body">
|
||||
<form id="appointmentForm" style="max-width:600px;">
|
||||
<div class="form-group">
|
||||
<label>选择车辆</label>
|
||||
<select id="vehicleSelect" required>
|
||||
<div class="card-body">
|
||||
<form id="appointmentForm" style="max-width: 600px;">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">
|
||||
<i class="bi bi-car-front"></i> 选择车辆
|
||||
<span class="text-danger">*</span>
|
||||
</label>
|
||||
<select class="form-select" id="vehicleSelect" required>
|
||||
<option value="">请选择车辆</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>服务类型</label>
|
||||
<select id="serviceType" required>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">
|
||||
<i class="bi bi-gear"></i> 服务类型
|
||||
<span class="text-danger">*</span>
|
||||
</label>
|
||||
<select class="form-select" id="serviceType" required>
|
||||
<option value="maintenance">保养维护</option>
|
||||
<option value="repair">维修服务</option>
|
||||
<option value="beauty">美容服务</option>
|
||||
<option value="insurance">保险代理</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>预约时间</label>
|
||||
<input type="datetime-local" id="appointmentTime" required>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">
|
||||
<i class="bi bi-calendar"></i> 预约时间
|
||||
<span class="text-danger">*</span>
|
||||
</label>
|
||||
<input type="datetime-local" class="form-control" id="appointmentTime" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>联系电话</label>
|
||||
<input type="tel" id="contactPhone" required>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">
|
||||
<i class="bi bi-telephone"></i> 联系电话
|
||||
<span class="text-danger">*</span>
|
||||
</label>
|
||||
<input type="tel" class="form-control" id="contactPhone" placeholder="请输入联系电话" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>预约说明</label>
|
||||
<textarea id="description" placeholder="请描述您的需求"></textarea>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="form-label">
|
||||
<i class="bi bi-chat-text"></i> 预约说明
|
||||
</label>
|
||||
<textarea class="form-control" id="description" rows="4" placeholder="请描述您的服务需求..."></textarea>
|
||||
</div>
|
||||
|
||||
<div class="d-flex gap-2">
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="bi bi-check-circle"></i> 提交预约
|
||||
</button>
|
||||
<button type="reset" class="btn btn-secondary">
|
||||
<i class="bi bi-x-circle"></i> 重置
|
||||
</button>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">提交预约</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- Toast 通知 -->
|
||||
<div class="toast-container position-fixed top-0 end-0 p-3">
|
||||
<div id="liveToast" class="toast" role="alert">
|
||||
<div class="toast-header">
|
||||
<i class="bi bi-bell me-2" id="toastIcon"></i>
|
||||
<strong class="me-auto" id="toastTitle">提示</strong>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="toast"></button>
|
||||
</div>
|
||||
<div class="toast-body" id="toastMessage"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Loading 遮罩 -->
|
||||
<div id="loadingOverlay" class="loading-overlay d-none">
|
||||
<div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="../js/config.js"></script>
|
||||
<script src="../js/api.js"></script>
|
||||
<script src="../js/app.js"></script>
|
||||
|
||||
<script>
|
||||
if (!utils.checkAuth() || !utils.hasRole('customer')) {
|
||||
window.location.href = '../login.html';
|
||||
}
|
||||
|
||||
let currentCustomerId = null;
|
||||
|
||||
window.addEventListener('DOMContentLoaded', async () => {
|
||||
const user = utils.getCurrentUser();
|
||||
if (user) {
|
||||
document.getElementById('userName').textContent = user.realName;
|
||||
document.getElementById('userAvatar').textContent = user.realName.charAt(0);
|
||||
document.getElementById('contactPhone').value = user.phone;
|
||||
|
||||
await loadCustomerData(user.userId);
|
||||
}
|
||||
});
|
||||
|
||||
async function loadCustomerData(userId) {
|
||||
try {
|
||||
const usersRes = await api.get(API_ENDPOINTS.USERS);
|
||||
const customers = usersRes.data?.filter(u => u.role === 'customer') || [];
|
||||
const currentUser = customers.find(c => c.userId === userId);
|
||||
|
||||
if (currentUser) {
|
||||
currentCustomerId = currentUser.userId;
|
||||
loadVehicles();
|
||||
loadOrders();
|
||||
loadAppointments();
|
||||
loadVehicleOptions();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载数据失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
async function loadVehicles() {
|
||||
try {
|
||||
const response = await api.get(API_ENDPOINTS.VEHICLES);
|
||||
if (response.code === 200 && response.data) {
|
||||
const myVehicles = response.data.filter(v => v.customerId === currentCustomerId);
|
||||
displayVehicles(myVehicles);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载车辆失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
function displayVehicles(vehicles) {
|
||||
const grid = document.getElementById('vehiclesGrid');
|
||||
if (vehicles.length === 0) {
|
||||
grid.innerHTML = '<p class="empty-state">暂无车辆</p>';
|
||||
return;
|
||||
}
|
||||
grid.innerHTML = vehicles.map(v => `
|
||||
<div class="card">
|
||||
<h3 style="color:#1890ff;">${v.licensePlate}</h3>
|
||||
<p><strong>品牌:</strong> ${v.brand} ${v.model}</p>
|
||||
<p><strong>颜色:</strong> ${v.color || '-'}</p>
|
||||
<p><strong>里程:</strong> ${v.mileage || 0} 公里</p>
|
||||
<p><strong>上次保养:</strong> ${utils.formatDate(v.lastMaintenanceDate)}</p>
|
||||
<p><strong>下次保养:</strong> ${utils.formatDate(v.nextMaintenanceDate)}</p>
|
||||
<p><strong>状态:</strong> ${utils.getStatusBadge(v.status)}</p>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
async function loadOrders() {
|
||||
try {
|
||||
const [ordersRes, vehiclesRes] = await Promise.all([
|
||||
api.get(API_ENDPOINTS.ORDERS),
|
||||
api.get(API_ENDPOINTS.VEHICLES)
|
||||
]);
|
||||
|
||||
if (ordersRes.code === 200 && ordersRes.data) {
|
||||
const myOrders = ordersRes.data.filter(o => o.customerId === currentCustomerId);
|
||||
const vehicles = vehiclesRes.data || [];
|
||||
const tbody = document.getElementById('ordersBody');
|
||||
|
||||
if (myOrders.length === 0) {
|
||||
tbody.innerHTML = '<tr><td colspan="6" class="empty-state">暂无维保记录</td></tr>';
|
||||
return;
|
||||
}
|
||||
|
||||
tbody.innerHTML = myOrders.map(o => {
|
||||
const vehicle = vehicles.find(v => v.vehicleId === o.vehicleId);
|
||||
return `
|
||||
<tr>
|
||||
<td>${o.orderNo}</td>
|
||||
<td>${utils.getServiceTypeText(o.serviceType)}</td>
|
||||
<td>${vehicle ? vehicle.licensePlate : '-'}</td>
|
||||
<td>¥${o.totalCost || 0}</td>
|
||||
<td>${utils.getStatusBadge(o.status)}</td>
|
||||
<td>${utils.formatDateTime(o.createTime)}</td>
|
||||
</tr>
|
||||
`;
|
||||
}).join('');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载工单失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
async function loadAppointments() {
|
||||
try {
|
||||
const [appointmentsRes, vehiclesRes] = await Promise.all([
|
||||
api.get(API_ENDPOINTS.APPOINTMENTS),
|
||||
api.get(API_ENDPOINTS.VEHICLES)
|
||||
]);
|
||||
|
||||
if (appointmentsRes.code === 200 && appointmentsRes.data) {
|
||||
const myAppointments = appointmentsRes.data.filter(a => a.customerId === currentCustomerId);
|
||||
const vehicles = vehiclesRes.data || [];
|
||||
const tbody = document.getElementById('appointmentsBody');
|
||||
|
||||
if (myAppointments.length === 0) {
|
||||
tbody.innerHTML = '<tr><td colspan="5" class="empty-state">暂无预约记录</td></tr>';
|
||||
return;
|
||||
}
|
||||
|
||||
tbody.innerHTML = myAppointments.map(a => {
|
||||
const vehicle = vehicles.find(v => v.vehicleId === a.vehicleId);
|
||||
return `
|
||||
<tr>
|
||||
<td>${utils.getServiceTypeText(a.serviceType)}</td>
|
||||
<td>${vehicle ? vehicle.licensePlate : '-'}</td>
|
||||
<td>${utils.formatDateTime(a.appointmentTime)}</td>
|
||||
<td>${utils.getStatusBadge(a.status)}</td>
|
||||
<td>
|
||||
${a.status === 'pending' ? `<button class="btn btn-danger" onclick="cancelAppointment(${a.appointmentId})">取消</button>` : '-'}
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
}).join('');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载预约失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
async function loadVehicleOptions() {
|
||||
try {
|
||||
const response = await api.get(API_ENDPOINTS.VEHICLES);
|
||||
if (response.code === 200 && response.data) {
|
||||
const myVehicles = response.data.filter(v => v.customerId === currentCustomerId);
|
||||
const select = document.getElementById('vehicleSelect');
|
||||
select.innerHTML = '<option value="">请选择车辆</option>' +
|
||||
myVehicles.map(v => `<option value="${v.vehicleId}">${v.licensePlate} - ${v.brand} ${v.model}</option>`).join('');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载车辆选项失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById('appointmentForm').addEventListener('submit', async (e) => {
|
||||
// 预约表单提交
|
||||
document.getElementById('appointmentForm').addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const data = {
|
||||
customerId: currentCustomerId,
|
||||
vehicleId: parseInt(document.getElementById('vehicleSelect').value),
|
||||
serviceType: document.getElementById('serviceType').value,
|
||||
appointmentTime: document.getElementById('appointmentTime').value,
|
||||
contactPhone: document.getElementById('contactPhone').value,
|
||||
description: document.getElementById('description').value
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await api.post(API_ENDPOINTS.APPOINTMENTS, data);
|
||||
if (response.code === 200) {
|
||||
utils.showSuccess('预约成功!');
|
||||
document.getElementById('appointmentForm').reset();
|
||||
loadAppointments();
|
||||
} else {
|
||||
utils.showError(response.message);
|
||||
}
|
||||
} catch (error) {
|
||||
utils.showError('预约失败');
|
||||
}
|
||||
submitAppointment();
|
||||
});
|
||||
|
||||
async function cancelAppointment(id) {
|
||||
if (utils.confirm('确定要取消此预约吗？')) {
|
||||
try {
|
||||
const response = await api.put(API_ENDPOINTS.CANCEL_APPOINTMENT(id));
|
||||
if (response.code === 200) {
|
||||
utils.showSuccess('预约已取消');
|
||||
loadAppointments();
|
||||
} else {
|
||||
utils.showError(response.message);
|
||||
}
|
||||
} catch (error) {
|
||||
utils.showError('操作失败');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function showSection(name) {
|
||||
document.querySelectorAll('.section').forEach(s => s.style.display = 'none');
|
||||
document.querySelectorAll('.menu-item').forEach(m => m.classList.remove('active'));
|
||||
event.currentTarget.classList.add('active');
|
||||
document.getElementById(name + '-section').style.display = 'block';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
699
frontend/js/admin.js
Normal file
699
frontend/js/admin.js
Normal file
@@ -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 = '<tr><td colspan="6" class="text-center text-muted py-4">暂无数据</td></tr>';
|
||||
return;
|
||||
}
|
||||
|
||||
tbody.innerHTML = parts.map(p => `
|
||||
<tr>
|
||||
<td>${p.partNo}</td>
|
||||
<td>${p.partName}</td>
|
||||
<td>${p.category || '-'}</td>
|
||||
<td>
|
||||
${p.stockQuantity} ${p.unit}
|
||||
${p.stockQuantity <= p.minStock ? '<span class="badge bg-danger ms-2">库存预警</span>' : ''}
|
||||
</td>
|
||||
<td>${Utils.formatMoney(p.unitPrice)}</td>
|
||||
<td>
|
||||
<button class="btn btn-sm btn-info" onclick="viewPart(${p.partId})">查看</button>
|
||||
<button class="btn btn-sm btn-warning" onclick="editPart(${p.partId})">编辑</button>
|
||||
<button class="btn btn-sm btn-danger" onclick="deletePart(${p.partId})">删除</button>
|
||||
</td>
|
||||
</tr>
|
||||
`).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 = '<tr><td colspan="7" class="text-center text-muted py-4">暂无数据</td></tr>';
|
||||
return;
|
||||
}
|
||||
|
||||
tbody.innerHTML = users.map(u => `
|
||||
<tr>
|
||||
<td>${u.userId}</td>
|
||||
<td>${u.username}</td>
|
||||
<td>${u.realName}</td>
|
||||
<td>${u.phone}</td>
|
||||
<td>${Utils.getRoleText(u.role)}</td>
|
||||
<td>${u.status === 1 ? '<span class="badge bg-success">启用</span>' : '<span class="badge bg-secondary">禁用</span>'}</td>
|
||||
<td>
|
||||
<button class="btn btn-sm btn-info" onclick="viewUser(${u.userId})">查看</button>
|
||||
<button class="btn btn-sm btn-warning" onclick="editUser(${u.userId})">编辑</button>
|
||||
<button class="btn btn-sm btn-danger" onclick="deleteUser(${u.userId})">删除</button>
|
||||
</td>
|
||||
</tr>
|
||||
`).join('');
|
||||
};
|
||||
|
||||
// 重写displayAllVehicles以存储数据
|
||||
const originalDisplayAllVehicles = displayAllVehicles;
|
||||
displayAllVehicles = function(vehicles) {
|
||||
allVehiclesData = vehicles || [];
|
||||
const tbody = document.getElementById('allVehiclesTableBody');
|
||||
if (!tbody) return;
|
||||
|
||||
if (vehicles.length === 0) {
|
||||
tbody.innerHTML = '<tr><td colspan="6" class="text-center text-muted py-4">暂无数据</td></tr>';
|
||||
return;
|
||||
}
|
||||
|
||||
tbody.innerHTML = vehicles.map(v => `
|
||||
<tr>
|
||||
<td>${v.licensePlate}</td>
|
||||
<td>${v.brand} ${v.model}</td>
|
||||
<td>${v.color || '-'}</td>
|
||||
<td>${v.mileage || 0}</td>
|
||||
<td>${Utils.getStatusBadge(v.status)}</td>
|
||||
<td>
|
||||
<button class="btn btn-sm btn-info" onclick="viewVehicle(${v.vehicleId})">查看</button>
|
||||
<button class="btn btn-sm btn-warning" onclick="editVehicle(${v.vehicleId})">编辑</button>
|
||||
<button class="btn btn-sm btn-danger" onclick="deleteVehicle(${v.vehicleId})">删除</button>
|
||||
</td>
|
||||
</tr>
|
||||
`).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 = '<tr><td colspan="8" class="text-center text-muted py-4">暂无数据</td></tr>';
|
||||
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 `
|
||||
<tr>
|
||||
<td>${o.orderNo}</td>
|
||||
<td>${Utils.getServiceTypeText(o.serviceType)}</td>
|
||||
<td>${vehicle ? vehicle.licensePlate : '-'}</td>
|
||||
<td>${Utils.formatMoney(o.totalCost)}</td>
|
||||
<td>${Utils.getStatusBadge(o.status)}</td>
|
||||
<td>${Utils.getStatusBadge(o.paymentStatus, 'payment')}</td>
|
||||
<td>${Utils.formatDateTime(o.createTime)}</td>
|
||||
<td>
|
||||
<button class="btn btn-sm btn-info" onclick="viewOrder(${o.orderId})">查看</button>
|
||||
<button class="btn btn-sm btn-warning" onclick="editOrder(${o.orderId})">编辑</button>
|
||||
<button class="btn btn-sm btn-danger" onclick="deleteOrder(${o.orderId})">删除</button>
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
}).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 = '<tr><td colspan="7" class="text-center text-muted py-4">暂无数据</td></tr>';
|
||||
return;
|
||||
}
|
||||
|
||||
tbody.innerHTML = appointments.map(a => {
|
||||
const vehicle = vehicles.find(v => v.vehicleId === a.vehicleId);
|
||||
return `
|
||||
<tr>
|
||||
<td>${a.appointmentId}</td>
|
||||
<td>${Utils.getServiceTypeText(a.serviceType)}</td>
|
||||
<td>${vehicle ? vehicle.licensePlate : '-'}</td>
|
||||
<td>${Utils.formatDateTime(a.appointmentTime)}</td>
|
||||
<td>${a.contactPhone}</td>
|
||||
<td>${Utils.getStatusBadge(a.status, 'appointment')}</td>
|
||||
<td>
|
||||
<button class="btn btn-sm btn-success" onclick="confirmAppointment(${a.appointmentId})">确认</button>
|
||||
<button class="btn btn-sm btn-danger" onclick="cancelAppointmentAdmin(${a.appointmentId})">取消</button>
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
}).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();
|
||||
}
|
||||
});
|
||||
@@ -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: '<span class="badge badge-info">待处理</span>',
|
||||
appointed: '<span class="badge badge-info">已预约</span>',
|
||||
in_progress: '<span class="badge badge-warning">进行中</span>',
|
||||
completed: '<span class="badge badge-success">已完成</span>',
|
||||
cancelled: '<span class="badge badge-secondary">已取消</span>',
|
||||
|
||||
// 支付状态
|
||||
unpaid: '<span class="badge badge-danger">未支付</span>',
|
||||
paid: '<span class="badge badge-success">已支付</span>',
|
||||
refunded: '<span class="badge badge-secondary">已退款</span>',
|
||||
|
||||
// 预约状态
|
||||
confirmed: '<span class="badge badge-success">已确认</span>',
|
||||
|
||||
// 车辆状态
|
||||
normal: '<span class="badge badge-success">正常</span>',
|
||||
in_service: '<span class="badge badge-warning">维修中</span>'
|
||||
order: {
|
||||
pending: '<span class="badge badge-status pending">待处理</span>',
|
||||
appointed: '<span class="badge badge-status appointed">已预约</span>',
|
||||
in_progress: '<span class="badge badge-status in_progress">进行中</span>',
|
||||
completed: '<span class="badge badge-status completed">已完成</span>',
|
||||
cancelled: '<span class="badge badge-status cancelled">已取消</span>'
|
||||
},
|
||||
payment: {
|
||||
unpaid: '<span class="badge badge-status unpaid">未支付</span>',
|
||||
paid: '<span class="badge badge-status paid">已支付</span>',
|
||||
refunded: '<span class="badge badge-status cancelled">已退款</span>'
|
||||
},
|
||||
appointment: {
|
||||
pending: '<span class="badge badge-status pending">待确认</span>',
|
||||
confirmed: '<span class="badge badge-status completed">已确认</span>',
|
||||
completed: '<span class="badge badge-status completed">已完成</span>',
|
||||
cancelled: '<span class="badge badge-status cancelled">已取消</span>'
|
||||
}
|
||||
};
|
||||
|
||||
return badges[status] || `<span class="badge badge-secondary">${status}</span>`;
|
||||
return badges[type]?.[status] || `<span class="badge bg-secondary">${status}</span>`;
|
||||
},
|
||||
|
||||
// 获取服务类型文本
|
||||
getServiceTypeText(type) {
|
||||
const types = {
|
||||
maintenance: '保养维护',
|
||||
repair: '维修服务',
|
||||
beauty: '美容服务',
|
||||
insurance: '保险代理'
|
||||
maintenance: '<span class="badge bg-primary">保养维护</span>',
|
||||
repair: '<span class="badge bg-warning">维修服务</span>',
|
||||
beauty: '<span class="badge bg-info">美容服务</span>',
|
||||
insurance: '<span class="badge bg-success">保险代理</span>'
|
||||
};
|
||||
return types[type] || type;
|
||||
},
|
||||
|
||||
// 获取用户角色文本
|
||||
// 获取角色文本
|
||||
getRoleText(role) {
|
||||
const roles = {
|
||||
admin: '管理员',
|
||||
staff: '工作人员',
|
||||
customer: '客户'
|
||||
admin: '<span class="badge bg-danger">管理员</span>',
|
||||
staff: '<span class="badge bg-success">工作人员</span>',
|
||||
customer: '<span class="badge bg-info">客户</span>'
|
||||
};
|
||||
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');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
757
frontend/js/app.js
Normal file
757
frontend/js/app.js
Normal file
@@ -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 = '<span class="spinner-border spinner-border-sm me-2"></span>登录中...';
|
||||
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 = '<i class="bi bi-box-arrow-in-right"></i> 登录';
|
||||
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 = '<i class="bi bi-box-arrow-in-right"></i> 登录';
|
||||
Utils.loading(false);
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('登录错误:', error);
|
||||
Utils.showToast('登录失败，请检查网络连接', 'error');
|
||||
loginBtn.disabled = false;
|
||||
loginBtn.innerHTML = '<i class="bi bi-box-arrow-in-right"></i> 登录';
|
||||
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 = '<tr><td colspan="6" class="text-center text-muted py-4">暂无数据</td></tr>';
|
||||
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 `
|
||||
<tr>
|
||||
<td>${o.orderNo}</td>
|
||||
<td>${Utils.getServiceTypeText(o.serviceType)}</td>
|
||||
<td>${vehicle ? vehicle.licensePlate : '-'}</td>
|
||||
<td>${Utils.formatMoney(o.totalCost)}</td>
|
||||
<td>${Utils.getStatusBadge(o.status)}</td>
|
||||
<td>${Utils.formatDateTime(o.createTime)}</td>
|
||||
</tr>
|
||||
`;
|
||||
}).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 = `
|
||||
<div class="empty-state">
|
||||
<i class="bi bi-car-front"></i>
|
||||
<p>暂无车辆信息</p>
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = vehicles.map(v => `
|
||||
<div class="col-md-6 col-lg-4 mb-4">
|
||||
<div class="vehicle-card">
|
||||
<div class="vehicle-plate">${v.licensePlate}</div>
|
||||
<h6 class="mb-2">${v.brand} ${v.model}</h6>
|
||||
<p class="text-muted small mb-1">
|
||||
<i class="bi bi-palette"></i> 颜色: ${v.color || '-'}
|
||||
</p>
|
||||
<p class="text-muted small mb-1">
|
||||
<i class="bi bi-speedometer2"></i> 里程: ${v.mileage || 0} 公里
|
||||
</p>
|
||||
<p class="text-muted small mb-2">
|
||||
<i class="bi bi-calendar-check"></i> 上次保养: ${Utils.formatDate(v.lastMaintenanceDate)}
|
||||
</p>
|
||||
${Utils.getStatusBadge(v.status)}
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
// 填充车辆选择框
|
||||
function populateVehicleSelect(vehicles) {
|
||||
const select = document.getElementById('vehicleSelect');
|
||||
if (!select) return;
|
||||
|
||||
select.innerHTML = '<option value="">请选择车辆</option>' +
|
||||
vehicles.map(v => `<option value="${v.vehicleId}">${v.licensePlate} - ${v.brand} ${v.model}</option>`).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 = '<tr><td colspan="6" class="text-center text-muted py-4">暂无维保记录</td></tr>';
|
||||
return;
|
||||
}
|
||||
|
||||
tbody.innerHTML = orders.map(o => {
|
||||
const vehicle = vehicles.find(v => v.vehicleId === o.vehicleId);
|
||||
return `
|
||||
<tr>
|
||||
<td>${o.orderNo}</td>
|
||||
<td>${Utils.getServiceTypeText(o.serviceType)}</td>
|
||||
<td>${vehicle ? vehicle.licensePlate : '-'}</td>
|
||||
<td>${Utils.formatMoney(o.totalCost)}</td>
|
||||
<td>${Utils.getStatusBadge(o.status)}</td>
|
||||
<td>${Utils.formatDateTime(o.createTime)}</td>
|
||||
</tr>
|
||||
`;
|
||||
}).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 = '<tr><td colspan="5" class="text-center text-muted py-4">暂无预约记录</td></tr>';
|
||||
return;
|
||||
}
|
||||
|
||||
tbody.innerHTML = appointments.map(a => {
|
||||
const vehicle = vehicles.find(v => v.vehicleId === a.vehicleId);
|
||||
return `
|
||||
<tr>
|
||||
<td>${Utils.getServiceTypeText(a.serviceType)}</td>
|
||||
<td>${vehicle ? vehicle.licensePlate : '-'}</td>
|
||||
<td>${Utils.formatDateTime(a.appointmentTime)}</td>
|
||||
<td>${Utils.getStatusBadge(a.status, 'appointment')}</td>
|
||||
<td>
|
||||
${a.status === 'pending' ? `<button class="btn btn-sm btn-danger" onclick="cancelAppointment(${a.appointmentId})">取消</button>` : '-'}
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
}).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 = `
|
||||
<div class="col-12 text-center text-muted py-5">
|
||||
<i class="bi bi-car-front fs-1 d-block mb-3"></i>
|
||||
<p>暂无车辆信息</p>
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = vehicles.map(v => `
|
||||
<div class="col-md-6 col-lg-4 mb-4">
|
||||
<div class="vehicle-card">
|
||||
<div class="vehicle-plate">${v.licensePlate}</div>
|
||||
<h6 class="mb-2">${v.brand} ${v.model}</h6>
|
||||
<p class="text-muted small mb-1">
|
||||
<i class="bi bi-palette"></i> 颜色: ${v.color || '-'}
|
||||
</p>
|
||||
<p class="text-muted small mb-1">
|
||||
<i class="bi bi-speedometer2"></i> 里程: ${v.mileage || 0} 公里
|
||||
</p>
|
||||
<p class="text-muted small mb-2">
|
||||
<i class="bi bi-calendar-check"></i> 上次保养: ${Utils.formatDate(v.lastMaintenanceDate)}
|
||||
</p>
|
||||
${Utils.getStatusBadge(v.status)}
|
||||
</div>
|
||||
</div>
|
||||
`).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 = '<tr><td colspan="6" class="text-center text-muted py-4">暂无维保记录</td></tr>';
|
||||
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 `
|
||||
<tr>
|
||||
<td>${o.orderNo}</td>
|
||||
<td>${Utils.getServiceTypeText(o.serviceType)}</td>
|
||||
<td>${vehicle ? vehicle.licensePlate : '-'}</td>
|
||||
<td>${Utils.formatMoney(o.totalCost)}</td>
|
||||
<td>${Utils.getStatusBadge(o.status)}</td>
|
||||
<td>${Utils.formatDateTime(o.createTime)}</td>
|
||||
</tr>
|
||||
`;
|
||||
}).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'); }
|
||||
@@ -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'
|
||||
};
|
||||
|
||||
@@ -4,58 +4,101 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>车管家4S店车辆维保管理系统 - 登录</title>
|
||||
<link rel="stylesheet" href="css/common.css">
|
||||
<link rel="stylesheet" href="css/login.css">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<body class="bg-light">
|
||||
<div class="login-container">
|
||||
<div class="login-box">
|
||||
<div class="login-header">
|
||||
<h1>车管家4S店车辆维保管理系统</h1>
|
||||
<p>Car Maintenance Management System</p>
|
||||
<div class="card shadow-lg border-0">
|
||||
<div class="card-header bg-primary text-white text-center py-4">
|
||||
<i class="bi bi-car-front-fill fs-1 d-block mb-2"></i>
|
||||
<h4 class="mb-0">车管家4S店</h4>
|
||||
<p class="mb-0 opacity-75">车辆维保管理系统</p>
|
||||
</div>
|
||||
<div class="card-body p-4">
|
||||
<form id="loginForm">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">
|
||||
<i class="bi bi-person-fill"></i> 用户名
|
||||
</label>
|
||||
<input type="text" class="form-control form-control-lg" id="username" name="username" placeholder="请输入用户名" required>
|
||||
</div>
|
||||
|
||||
<div class="login-form">
|
||||
<div class="form-group">
|
||||
<label for="username">用户名</label>
|
||||
<input type="text" id="username" name="username" placeholder="请输入用户名" autocomplete="off">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">
|
||||
<i class="bi bi-lock-fill"></i> 密码
|
||||
</label>
|
||||
<input type="password" class="form-control form-control-lg" id="password" name="password" placeholder="请输入密码" required>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="form-label">
|
||||
<i class="bi bi-person-badge-fill"></i> 登录角色
|
||||
</label>
|
||||
<select class="form-select form-select-lg" id="role" name="role">
|
||||
<option value="admin">管理员</option>
|
||||
<option value="staff">工作人员</option>
|
||||
<option value="customer">客户</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary btn-lg w-100 mb-3" id="loginBtn">
|
||||
<i class="bi bi-box-arrow-in-right"></i> 登录
|
||||
</button>
|
||||
|
||||
<div class="d-flex justify-content-between">
|
||||
<a href="#" class="text-decoration-none" onclick="showToast('请联系管理员重置密码', 'info')">
|
||||
<i class="bi bi-question-circle"></i> 忘记密码?
|
||||
</a>
|
||||
<a href="#" class="text-decoration-none" onclick="showToast('客户可自助注册，工作人员请联系管理员', 'info')">
|
||||
<i class="bi bi-person-plus"></i> 注册账号
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<hr class="my-4">
|
||||
|
||||
<div class="demo-accounts bg-light p-3 rounded">
|
||||
<h6 class="text-muted mb-2"><i class="bi bi-info-circle"></i> 演示账号</h6>
|
||||
<div class="row g-2 text-small">
|
||||
<div class="col-12">
|
||||
<span class="badge bg-primary">管理员</span> admin / 123456
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<span class="badge bg-success">工作人员</span> staff001 / 123456
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<span class="badge bg-info">客户</span> customer001 / 123456
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="password">密码</label>
|
||||
<input type="password" id="password" name="password" placeholder="请输入密码">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="role">登录角色</label>
|
||||
<select id="role" name="role">
|
||||
<option value="admin">管理员</option>
|
||||
<option value="staff">工作人员</option>
|
||||
<option value="customer">客户</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<button class="btn-login" onclick="handleLogin()">登录</button>
|
||||
|
||||
<div class="login-footer">
|
||||
<a href="#" onclick="alert('请联系管理员重置密码')">忘记密码?</a>
|
||||
<a href="#" onclick="alert('客户可自助注册，工作人员请联系管理员')">注册账号</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-accounts">
|
||||
<p>演示账号:</p>
|
||||
<ul>
|
||||
<li>管理员: admin / 123456</li>
|
||||
<li>工作人员: staff001 / 123456</li>
|
||||
<li>客户: customer001 / 123456</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Toast 通知 -->
|
||||
<div class="toast-container position-fixed top-0 end-0 p-3">
|
||||
<div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
|
||||
<div class="toast-header">
|
||||
<i class="bi bi-bell me-2" id="toastIcon"></i>
|
||||
<strong class="me-auto" id="toastTitle">提示</strong>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="toast-body" id="toastMessage"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Loading -->
|
||||
<div id="loadingOverlay" class="d-none">
|
||||
<div class="spinner-border text-primary" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="js/config.js"></script>
|
||||
<script src="js/api.js"></script>
|
||||
<script src="js/login.js"></script>
|
||||
<script src="js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -4,267 +4,362 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>工作人员仪表板 - 车管家4S店车辆维保管理系统</title>
|
||||
<link rel="stylesheet" href="../css/common.css">
|
||||
<link rel="stylesheet" href="../css/dashboard.css">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="dashboard-container">
|
||||
<div class="sidebar">
|
||||
<div class="dashboard-wrapper">
|
||||
<nav class="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<h2>车管家系统</h2>
|
||||
<p>工作人员控制台</p>
|
||||
<i class="bi bi-car-front-fill fs-1 d-block mb-2"></i>
|
||||
<h5 class="mb-1">车管家系统</h5>
|
||||
<small>工作人员控制台</small>
|
||||
</div>
|
||||
<div class="sidebar-menu">
|
||||
<div class="menu-item active" onclick="showSection('overview')">
|
||||
<span class="menu-icon">📊</span>
|
||||
<div class="mt-4">
|
||||
<a class="menu-item active" onclick="showSection('overview')">
|
||||
<i class="bi bi-speedometer2"></i>
|
||||
<span>工作概览</span>
|
||||
</div>
|
||||
<div class="menu-item" onclick="showSection('myorders')">
|
||||
<span class="menu-icon">📋</span>
|
||||
</a>
|
||||
<a class="menu-item" onclick="showSection('myorders')">
|
||||
<i class="bi bi-clipboard-data"></i>
|
||||
<span>我的工单</span>
|
||||
</div>
|
||||
<div class="menu-item" onclick="showSection('vehicles')">
|
||||
<span class="menu-icon">🚗</span>
|
||||
</a>
|
||||
<a class="menu-item" onclick="showSection('search-vehicle')">
|
||||
<i class="bi bi-search"></i>
|
||||
<span>车辆查询</span>
|
||||
</div>
|
||||
<div class="menu-item" onclick="showSection('parts')">
|
||||
<span class="menu-icon">🔧</span>
|
||||
</a>
|
||||
<a class="menu-item" onclick="showSection('search-parts')">
|
||||
<i class="bi bi-box-seam"></i>
|
||||
<span>配件查询</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="main-content">
|
||||
<div class="top-nav">
|
||||
<div class="top-nav-left">
|
||||
<h1>工作人员仪表板</h1>
|
||||
<main class="main-content">
|
||||
<div class="top-navbar">
|
||||
<div class="d-flex align-items-center">
|
||||
<h5 class="mb-0 me-3">
|
||||
<i class="bi bi-speedometer2"></i> 工作人员仪表板
|
||||
</h5>
|
||||
</div>
|
||||
<div class="top-nav-right">
|
||||
<div class="user-info">
|
||||
<div class="user-avatar" id="userAvatar">S</div>
|
||||
<span class="user-name" id="userName">工作人员</span>
|
||||
<div class="d-flex align-items-center gap-3">
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-outline-light dropdown-toggle" type="button" data-bs-toggle="dropdown">
|
||||
<i class="bi bi-person-circle"></i>
|
||||
<span id="userName">工作人员</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end">
|
||||
<li><h6 class="dropdown-header">当前角色</h6></li>
|
||||
<li><span class="dropdown-item" id="userRole"></span></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="#" onclick="Utils.logout()">
|
||||
<i class="bi bi-box-arrow-right"></i> 退出登录
|
||||
</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<button class="btn-logout" onclick="utils.logout()">退出登录</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="overview-section" class="section">
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon blue">📋</div>
|
||||
<div class="stat-info">
|
||||
<h3 id="myOrdersCount">0</h3>
|
||||
<p>我的工单</p>
|
||||
<!-- 工作概览 -->
|
||||
<div id="overview-section" class="content-section">
|
||||
<div class="row g-4 mb-4">
|
||||
<div class="col-md-4">
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon blue">
|
||||
<i class="bi bi-clipboard-data-fill"></i>
|
||||
</div>
|
||||
<div class="stat-value" id="myOrdersCount">0</div>
|
||||
<div class="stat-label">我的工单</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon orange">⏳</div>
|
||||
<div class="stat-info">
|
||||
<h3 id="inProgressCount">0</h3>
|
||||
<p>进行中</p>
|
||||
<div class="col-md-4">
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon orange">
|
||||
<i class="bi bi-hourglass-split"></i>
|
||||
</div>
|
||||
<div class="stat-value" id="inProgressCount">0</div>
|
||||
<div class="stat-label">进行中</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon green">✅</div>
|
||||
<div class="stat-info">
|
||||
<h3 id="completedCount">0</h3>
|
||||
<p>已完成</p>
|
||||
<div class="col-md-4">
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon green">
|
||||
<i class="bi bi-check-circle-fill"></i>
|
||||
</div>
|
||||
<div class="stat-value" id="completedCount">0</div>
|
||||
<div class="stat-label">已完成</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-card">
|
||||
<div class="content-header">
|
||||
<h2>待处理工单</h2>
|
||||
<div class="card-header">
|
||||
<h6 class="mb-0"><i class="bi bi-clock-history"></i> 待处理工单</h6>
|
||||
</div>
|
||||
<div class="content-body">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>工单编号</th>
|
||||
<th>服务类型</th>
|
||||
<th>车牌号</th>
|
||||
<th>状态</th>
|
||||
<th>预约时间</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="pendingOrdersBody">
|
||||
<tr><td colspan="6" class="empty-state">暂无待处理工单</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-custom">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>工单编号</th>
|
||||
<th>服务类型</th>
|
||||
<th>车牌号</th>
|
||||
<th>状态</th>
|
||||
<th>预约时间</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="pendingOrdersTableBody">
|
||||
<tr>
|
||||
<td colspan="6" class="text-center text-muted py-4">
|
||||
<div class="spinner-border spinner-border-sm me-2"></div>
|
||||
加载中...
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="myorders-section" class="section" style="display: none;">
|
||||
<!-- 我的工单 -->
|
||||
<div id="myorders-section" class="content-section" style="display: none;">
|
||||
<div class="content-card">
|
||||
<div class="content-header">
|
||||
<h2>我的工单列表</h2>
|
||||
<div class="card-header">
|
||||
<h6 class="mb-0"><i class="bi bi-clipboard-data"></i> 我的工单列表</h6>
|
||||
</div>
|
||||
<div class="content-body">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>工单编号</th>
|
||||
<th>服务类型</th>
|
||||
<th>车牌号</th>
|
||||
<th>客户姓名</th>
|
||||
<th>状态</th>
|
||||
<th>创建时间</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="myOrdersBody">
|
||||
<tr><td colspan="7" class="empty-state">加载中...</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-custom">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>工单编号</th>
|
||||
<th>服务类型</th>
|
||||
<th>车牌号</th>
|
||||
<th>客户姓名</th>
|
||||
<th>状态</th>
|
||||
<th>创建时间</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="myOrdersTableBody">
|
||||
<tr>
|
||||
<td colspan="7" class="text-center text-muted py-4">加载中...</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="vehicles-section" class="section" style="display: none;">
|
||||
<div class="toolbar">
|
||||
<div class="search-box">
|
||||
<input type="text" id="searchVehicle" placeholder="输入车牌号查询...">
|
||||
<button onclick="searchVehicle()">🔍</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 车辆查询 -->
|
||||
<div id="search-vehicle-section" class="content-section" style="display: none;">
|
||||
<div class="content-card">
|
||||
<div class="content-body">
|
||||
<div id="vehicleResult"></div>
|
||||
<div class="card-header">
|
||||
<h6 class="mb-0"><i class="bi bi-search"></i> 车辆信息查询</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="mb-4">
|
||||
<div class="input-group">
|
||||
<span class="input-group-text"><i class="bi bi-car-front"></i></span>
|
||||
<input type="text" class="form-control" id="searchVehiclePlate" placeholder="请输入车牌号查询...">
|
||||
<button class="btn btn-primary" onclick="searchVehicle()">
|
||||
<i class="bi bi-search"></i> 查询
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="vehicleSearchResult">
|
||||
<div class="empty-state">
|
||||
<i class="bi bi-car-front"></i>
|
||||
<p>请输入车牌号进行查询</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="parts-section" class="section" style="display: none;">
|
||||
<div class="toolbar">
|
||||
<div class="search-box">
|
||||
<input type="text" id="searchPart" placeholder="搜索配件...">
|
||||
<button onclick="searchParts()">🔍</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 配件查询 -->
|
||||
<div id="search-parts-section" class="content-section" style="display: none;">
|
||||
<div class="content-card">
|
||||
<div class="content-body">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>配件编号</th>
|
||||
<th>配件名称</th>
|
||||
<th>类别</th>
|
||||
<th>库存数量</th>
|
||||
<th>单价</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="partsBody">
|
||||
<tr><td colspan="5" class="empty-state">请输入关键词搜索配件</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="card-header">
|
||||
<h6 class="mb-0"><i class="bi bi-box-seam"></i> 配件库存查询</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="mb-4">
|
||||
<div class="input-group">
|
||||
<span class="input-group-text"><i class="bi bi-search"></i></span>
|
||||
<input type="text" class="form-control" id="searchPartKeyword" placeholder="请输入配件名称或编号...">
|
||||
<button class="btn btn-primary" onclick="searchParts()">
|
||||
<i class="bi bi-search"></i> 搜索
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="partsSearchResult">
|
||||
<div class="empty-state">
|
||||
<i class="bi bi-box-seam"></i>
|
||||
<p>请输入关键词搜索配件</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- Toast 通知 -->
|
||||
<div class="toast-container position-fixed top-0 end-0 p-3">
|
||||
<div id="liveToast" class="toast" role="alert">
|
||||
<div class="toast-header">
|
||||
<i class="bi bi-bell me-2" id="toastIcon"></i>
|
||||
<strong class="me-auto" id="toastTitle">提示</strong>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="toast"></button>
|
||||
</div>
|
||||
<div class="toast-body" id="toastMessage"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Loading 遮罩 -->
|
||||
<div id="loadingOverlay" class="loading-overlay d-none">
|
||||
<div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="../js/config.js"></script>
|
||||
<script src="../js/api.js"></script>
|
||||
<script>
|
||||
if (!utils.checkAuth() || !utils.hasRole('staff')) {
|
||||
window.location.href = '../login.html';
|
||||
}
|
||||
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
const user = utils.getCurrentUser();
|
||||
if (user) {
|
||||
document.getElementById('userName').textContent = user.realName;
|
||||
document.getElementById('userAvatar').textContent = user.realName.charAt(0);
|
||||
loadStaffData(user.userId);
|
||||
}
|
||||
});
|
||||
|
||||
function showSection(name) {
|
||||
document.querySelectorAll('.section').forEach(s => s.style.display = 'none');
|
||||
document.querySelectorAll('.menu-item').forEach(m => m.classList.remove('active'));
|
||||
event.currentTarget.classList.add('active');
|
||||
document.getElementById(name + '-section').style.display = 'block';
|
||||
}
|
||||
|
||||
async function loadStaffData(staffId) {
|
||||
try {
|
||||
const response = await api.get(API_ENDPOINTS.ORDERS);
|
||||
if (response.code === 200 && response.data) {
|
||||
const myOrders = response.data.filter(o => o.staffId === staffId);
|
||||
const inProgress = myOrders.filter(o => o.status === 'in_progress');
|
||||
const completed = myOrders.filter(o => o.status === 'completed');
|
||||
|
||||
document.getElementById('myOrdersCount').textContent = myOrders.length;
|
||||
document.getElementById('inProgressCount').textContent = inProgress.length;
|
||||
document.getElementById('completedCount').textContent = completed.length;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载数据失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// 车辆查询
|
||||
async function searchVehicle() {
|
||||
const plate = document.getElementById('searchVehicle').value.trim();
|
||||
const plate = document.getElementById('searchVehiclePlate').value.trim();
|
||||
if (!plate) {
|
||||
utils.showError('请输入车牌号');
|
||||
Utils.showToast('请输入车牌号', 'warning');
|
||||
return;
|
||||
}
|
||||
|
||||
Utils.loading(true);
|
||||
try {
|
||||
const response = await api.get(API_ENDPOINTS.VEHICLE_BY_PLATE(plate));
|
||||
const response = await http.get(API.VEHICLE_PLATE(plate));
|
||||
const resultDiv = document.getElementById('vehicleSearchResult');
|
||||
|
||||
if (response.code === 200 && response.data) {
|
||||
const v = response.data;
|
||||
document.getElementById('vehicleResult').innerHTML = `
|
||||
<div class="card">
|
||||
<h3>车辆信息</h3>
|
||||
<p><strong>车牌号:</strong> ${v.licensePlate}</p>
|
||||
<p><strong>品牌型号:</strong> ${v.brand} ${v.model}</p>
|
||||
<p><strong>颜色:</strong> ${v.color || '-'}</p>
|
||||
<p><strong>车架号:</strong> ${v.vin || '-'}</p>
|
||||
<p><strong>里程数:</strong> ${v.mileage || 0} 公里</p>
|
||||
<p><strong>状态:</strong> ${utils.getStatusBadge(v.status)}</p>
|
||||
resultDiv.innerHTML = `
|
||||
<div class="card border-primary mb-3">
|
||||
<div class="card-header bg-primary text-white">
|
||||
<i class="bi bi-car-front"></i> 车辆信息
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<p class="mb-2"><strong>车牌号:</strong> <span class="badge bg-primary fs-6">${v.licensePlate}</span></p>
|
||||
<p class="mb-2"><strong>品牌型号:</strong> ${v.brand} ${v.model}</p>
|
||||
<p class="mb-2"><strong>颜色:</strong> ${v.color || '-'}</p>
|
||||
<p class="mb-2"><strong>车架号:</strong> ${v.vin || '-'}</p>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<p class="mb-2"><strong>当前里程:</strong> ${v.mileage || 0} 公里</p>
|
||||
<p class="mb-2"><strong>上次保养:</strong> ${Utils.formatDate(v.lastMaintenanceDate)}</p>
|
||||
<p class="mb-2"><strong>下次保养:</strong> ${Utils.formatDate(v.nextMaintenanceDate)}</p>
|
||||
<p class="mb-0"><strong>车辆状态:</strong> ${Utils.getStatusBadge(v.status)}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
} else {
|
||||
document.getElementById('vehicleResult').innerHTML = '<p class="empty-state">未找到该车辆</p>';
|
||||
resultDiv.innerHTML = `
|
||||
<div class="alert alert-warning">
|
||||
<i class="bi bi-exclamation-triangle"></i> 未找到该车辆
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
} catch (error) {
|
||||
utils.showError('查询失败');
|
||||
console.error('查询失败:', error);
|
||||
Utils.showToast('查询失败', 'error');
|
||||
} finally {
|
||||
Utils.loading(false);
|
||||
}
|
||||
}
|
||||
|
||||
// 配件搜索
|
||||
async function searchParts() {
|
||||
const keyword = document.getElementById('searchPartKeyword').value.trim();
|
||||
if (!keyword) {
|
||||
Utils.showToast('请输入搜索关键词', 'warning');
|
||||
return;
|
||||
}
|
||||
|
||||
Utils.loading(true);
|
||||
try {
|
||||
const response = await api.get(API_ENDPOINTS.PARTS);
|
||||
const response = await http.get(API.PARTS);
|
||||
const resultDiv = document.getElementById('partsSearchResult');
|
||||
|
||||
if (response.code === 200 && response.data) {
|
||||
const tbody = document.getElementById('partsBody');
|
||||
const keyword = document.getElementById('searchPart').value.toLowerCase();
|
||||
const filtered = response.data.filter(p =>
|
||||
p.partName.toLowerCase().includes(keyword) ||
|
||||
p.partNo.toLowerCase().includes(keyword)
|
||||
p.partName.toLowerCase().includes(keyword.toLowerCase()) ||
|
||||
p.partNo.toLowerCase().includes(keyword.toLowerCase())
|
||||
);
|
||||
|
||||
if (filtered.length === 0) {
|
||||
tbody.innerHTML = '<tr><td colspan="5" class="empty-state">未找到配件</td></tr>';
|
||||
resultDiv.innerHTML = `
|
||||
<div class="alert alert-info">
|
||||
<i class="bi bi-info-circle"></i> 未找到匹配的配件
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
tbody.innerHTML = filtered.map(p => `
|
||||
<tr>
|
||||
<td>${p.partNo}</td>
|
||||
<td>${p.partName}</td>
|
||||
<td>${p.category || '-'}</td>
|
||||
<td>${p.stockQuantity} ${p.unit}</td>
|
||||
<td>¥${p.unitPrice}</td>
|
||||
</tr>
|
||||
`).join('');
|
||||
resultDiv.innerHTML = `
|
||||
<div class="table-responsive">
|
||||
<table class="table table-custom">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>配件编号</th>
|
||||
<th>配件名称</th>
|
||||
<th>类别</th>
|
||||
<th>库存数量</th>
|
||||
<th>单价</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
${filtered.map(p => `
|
||||
<tr>
|
||||
<td>${p.partNo}</td>
|
||||
<td>${p.partName}</td>
|
||||
<td>${p.category || '-'}</td>
|
||||
<td>
|
||||
${p.stockQuantity} ${p.unit}
|
||||
${p.stockQuantity <= p.minStock ? '<span class="badge bg-danger ms-2">库存预警</span>' : ''}
|
||||
</td>
|
||||
<td>${Utils.formatMoney(p.unitPrice)}</td>
|
||||
</tr>
|
||||
`).join('')}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
} catch (error) {
|
||||
utils.showError('搜索失败');
|
||||
console.error('搜索失败:', error);
|
||||
Utils.showToast('搜索失败', 'error');
|
||||
} finally {
|
||||
Utils.loading(false);
|
||||
}
|
||||
}
|
||||
|
||||
// 回车搜索
|
||||
document.getElementById('searchVehiclePlate')?.addEventListener('keypress', function(e) {
|
||||
if (e.key === 'Enter') searchVehicle();
|
||||
});
|
||||
|
||||
document.getElementById('searchPartKeyword')?.addEventListener('keypress', function(e) {
|
||||
if (e.key === 'Enter') searchParts();
|
||||
});
|
||||
</script>
|
||||
<script src="../js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
135
实训报告要求.md
Normal file
135
实训报告要求.md
Normal file
@@ -0,0 +1,135 @@
|
||||
# 辽宁科技学院
|
||||
|
||||
# 实习报告
|
||||
|
||||
姓名：
|
||||
|
||||
学号：
|
||||
|
||||
系 部： 电信学院
|
||||
|
||||
专业：计算机科学与技术
|
||||
|
||||
班 级： 计BZ24
|
||||
|
||||
指导教师：
|
||||
|
||||
实习名称：校企合作训练项目
|
||||
|
||||
实习时间：2025.12.1-2026.1.16
|
||||
|
||||
实习单位： 智慧南楼-502
|
||||
|
||||
辽宁科技学院教务处制
|
||||
|
||||
<table><tr><td>个
|
||||
人
|
||||
总
|
||||
结</td><td>1、课程实践的目的、意义:(自己适当修改,红字部分删掉)
|
||||
实习内容为Web应用开发(CSS+JavaScript)、Java Web应用开发、移动应用开发。
|
||||
计划在校内实施相关项目学习,由校方老师和企业老师指导具体实习任务。
|
||||
(一)获取知识目标
|
||||
教学目标1:掌握Android应用开发的一般流程。
|
||||
教学目标2:了解Java Web开发方法;掌握相应Web前端及Java Web项目设计方
|
||||
法;能够熟练使用Java Web开发的方法与技巧。
|
||||
(二)分析问题目标
|
||||
教学目标3:了解项目调试的一般方法;能够自行解决项目调试过程中遇到的常
|
||||
见问题,掌握项目调试过程中一般问题的解决方法。
|
||||
(三)解决问题目标
|
||||
教学目标4:整理所做工作的文档、图表,依照报告格式要求撰写课程设计报告。
|
||||
实习报告的内容完整,格式整齐、图表正确、杜绝抄袭。
|
||||
(四)思政目标
|
||||
着眼于大学生世界观、价值观的塑造,使学生明白科技创新的重要性;使学生明
|
||||
确作为社会主义事业建设者和接班人所肩负的责任和使命。
|
||||
2、课程实践的内容(本次实习个人所做的具体工作和学习内容,按照如下主要内
|
||||
容进行撰写,可以有截图和代码,红字部分删掉)
|
||||
1、绪论
|
||||
1.1研究目的与意义
|
||||
1.2国内外研究现状
|
||||
2、系统分析
|
||||
2.1需求分析
|
||||
2.2可行性分析
|
||||
3、系统使用相关技术
|
||||
4、系统设计
|
||||
4.1项目1:JavaScript+CSS项目
|
||||
4.1.1、页面布局;</td></tr></table>
|
||||
|
||||
4.1.2、页面设计；
|
||||
|
||||
4.1.3、表单验证。
|
||||
|
||||
4.2项目2：后端功能模块设计
|
||||
|
||||
4.2.1、登录和注册模块；
|
||||
|
||||
4.2.2、主调模块；
|
||||
|
||||
4.2.3、分功能模块。
|
||||
|
||||
4.3 项目 3: Android 应用开发
|
||||
|
||||
4.3.1、UI界面设计；
|
||||
|
||||
4.3.2、Activity 的跳转；
|
||||
|
||||
4.3.3、菜单的使用；
|
||||
|
||||
4.3.4、对话框的使用。
|
||||
|
||||
5、系统测试与运行
|
||||
|
||||
3、课程实践总结（本次实践的总结或体会，总结在新的一页，最好一页写完，红字部分删掉）
|
||||
|
||||
本人签字：
|
||||
|
||||
年月日
|
||||
|
||||
# 评阅教师评阅意见
|
||||
|
||||
评阅成绩：
|
||||
|
||||
评阅教师：
|
||||
|
||||
年月日
|
||||
|
||||
# 【实习报告的主要内容要求】
|
||||
|
||||
实习报告是对实习内容全面，系统的总结回顾。内容包括实习目的，实习内容, 实习结果，实习总结或体会四个部分，全文字数一般不得少于 12000 字。
|
||||
|
||||
1. 实习目的：介绍实习的目的、意义，实习单位的概况及发展情况，实习要求等内容。【这部分内容通常以前言或引言形式，不单列标题及序号】
|
||||
|
||||
2. 实习内容: 先介绍实习安排概况, 包括时间, 内容, 地点等。然后按照安排顺序逐项介绍具体内容。【以记叙或白描手法为基调, 在完整介绍实习内容基础上, 对自己认为有重要意义或需要研究解决的问题重点介绍, 其它一般内容则简述。】
|
||||
|
||||
3. 实习结果: 围绕实习目的要求, 重点介绍对实习中发现的问题的分析, 思考, 提出解决问题的对策, 建议等。分析、讨论及对策、建议要有依据, 有参考文献, 并在正文后附录。【分析讨论的内容及推理过程是实习报告的重要内容之一, 包括所提出的对策, 建议, 是反映或评价实习报告水平的重要依据。】
|
||||
|
||||
4. 实习总结或体会:用自己的语言对实习的效果进行评价, 着重介绍自己的收获、体会、对所学专业的认识和了解、对本专业前景的看法。【内容较多时可列出小标题, 逐一汇报。总结或体会的最后部分, 应针对实习中发现的自身不足之处, 简要地提出今后学习, 锻炼的努力方向。】
|
||||
|
||||
# 【打字与装订规范】
|
||||
|
||||
1、封皮和内容统一使用 A4 纸打印，左侧装订；
|
||||
|
||||
2、页边距设置为：上 $2.5 \mathrm{~cm}$ ，下 $2.0 \mathrm{~cm}$ ，左 $3 \mathrm{~cm}$ ，右 $2.5 \mathrm{~cm}$ ；
|
||||
|
||||
3、无特殊说明的一级标题采用（小三、黑体），内容采用（小四、宋体，行间距为 1.5 倍）；
|
||||
|
||||
4、页眉为“辽宁科技学院实习报告”，采用五号、宋体，居中书写；
|
||||
|
||||
5、页码从前言内容开始按阿拉伯数字（宋体、小五）连续编排，居中书写；
|
||||
|
||||
6、实习报告正文参照给定格式中内容进行书写。各系部可以制定自己内部标准，但须报请教务处批准后，统一执行。
|
||||
|
||||
# 实习结果：
|
||||
|
||||
围绕实习目的要求，重点介绍对实习中发现的问题的分析，思考，提出解决问题的对策，建议等。分析、讨论及对策、建议要有依据，有参考文献，并在正
|
||||
|
||||
文后附录。
|
||||
|
||||
# 实习总结或体会：
|
||||
|
||||
用自己的语言对实习的效果进行评价，着重介绍自己的收获、体会、对所学专业的认识和了解、对本专业前景的看法。
|
||||
|
||||
|
||||
实习指导教师：（每位同学写自己对应的指导教师）
|
||||
|
||||
|
||||
<table><tr><td>指导教师</td><td>班级</td><td>学生姓名</td></tr><tr><td>刘辉13941498227</td><td>计 BZ241</td><td>韩晶晶、芦勃志、马新雨、王焱、范晓佳、崔政日、王暖、王晓阳、吴志鹏、朱美慧、陈雨晴、王昊、曲月媛、张隆逸、高倩、董乙譚、左奥、魏祎汝、杨佳畅、郭春晓、冯家仪、张文杰、赵蕊、王宁、李春维</td></tr><tr><td>杜钢13841479588</td><td>计BZ241-242</td><td>范阳洋、王伟、付昊阳、宗宇璠、王晴、程丽丽、曾庆茜、何丽、胡文青、郭金凤、张博文、盛瀚文、申鑫语、姜振川、李心如、阚君茹、王可鑫、宫嘉悦、管郡、李岩纹、张欣瑶、柴宏微、李婉莹、孙宝怡、赵津楠</td></tr><tr><td>王波13050296225</td><td>计BZ242-243</td><td>王釜丞、马田、金思如、马毓、王杰、王湘楠、李淼、何思颖李丹、邢祥东、赵龙、赵蕊、梁远、李文迪、杨笑然、孟燕燕何娟娟、张聪、张俊博、李晴怡、宫婷婷、王子墨、张文文李轩宇、杜欣遥、包安娜</td></tr><tr><td>赵扬川13050296879</td><td>计BZ243</td><td>刘子杰、王紫微、周诗平、韩雨佟、吕姝婷、尹齐、施唯佳、张文欣、于杰、杨扬、孙蕊、张伟萍、王博、卜子悦、徐婉卿、薛茗轩、郑立君、李梓怡、李达、李馨悦、杨伟奇、赵怡舒、龚镐玲、黎雪莲、詹仕粉</td></tr><tr><td>陈铁13942482935</td><td>计BZ244</td><td>田雅、李博天、袁梓瑞、肇博文、李博希、杨冠东、孙睿聪、张智文、刘修明、周雨男、张胜金、王敬博、佟国成、王淼、苑铁赢、潘尧、刘馨瑶、李浩铭、史心慈、史宏媛、唐铭遥、叶佳琪尹杰、陈博然、王帅、郑赢</td></tr><tr><td>吴吉红15504248295</td><td>计BZ244-245</td><td>李宗环、刘宁、任菲菲、刘欣颖、王斯雯、李朝阳、曹彦峰、王梦阳、王彤瑶、李国磊、刘超群、郝艺博、白杨、张晓雯、邢哲吴宇涵、任博暄、朱冬宁、李卓伟、张宇航、刘美琦、孙嘉忆、吴宗旭、项恩宇、张钟艺、赵海旭</td></tr><tr><td>宋阳17740083624</td><td>计BZ245-246</td><td>卢美如、白岫、鲁冰、王艳佳、孔小乙、袁梦旋、杜莹、孙振东崔鹏、陈野、吕娜、赵悦茗、陈丽、崔晓北、张金阳、韩佳芜、赵微、王佳鑫、武慧琴、王依然、刘正、刘洋、于媛媛、常宝顺兰铂涵、宋英歌</td></tr><tr><td>王宇婷18504121031</td><td>计BZ246</td><td>王名川、马金羊、王鹏宇、邹明倩、祁馨铭、葛思莹、张婷、闫星樵、赵丹扬、张莹、张佳佳、杨璐、黄家兴、王宏宇、聂思文张天皓、李佳琪、刘乐、王子桐、王策、辛悦、张博文、陈硕、张裕、易幻幻、邓博雅</td></tr></table>
|
||||
141
杨璐《车管家4S店车辆维保管理系统》.md
Normal file
141
杨璐《车管家4S店车辆维保管理系统》.md
Normal file
@@ -0,0 +1,141 @@
|
||||
# 辽宁科技学院
|
||||
|
||||
# 本科生毕业设计（论文）任务书
|
||||
|
||||
题 目： 车管家4S店车辆维保管理系统
|
||||
|
||||
专题： 无
|
||||
|
||||
系 别： 电子与信息工程学院
|
||||
|
||||
专业： 计算机科学与技术
|
||||
|
||||
班级： 计BZ246
|
||||
|
||||
学生姓名： 杨璐
|
||||
|
||||
学号： 74133240622
|
||||
|
||||
指导教师： 刘慧宇
|
||||
|
||||
2025年12月5日
|
||||
|
||||
# 一、设计（论文）的主要任务与内容（含专题）
|
||||
|
||||
# （一）主要内容：
|
||||
|
||||
基于 Spring Boot 与 Vue.js 的前后端分离技术，开发一个功能完善的 B/S 架构车辆维保（4S 店）管理系统。该系统旨在为 4S 店提供一个集客户管理、车辆档案、维保流程、配件库存等功能于一体的高效信息化管理平台，同时为车主提供便捷的在线预约与查询服务。
|
||||
|
||||
# （二）相关任务：
|
||||
|
||||
系统架构设计：搭建成熟稳定的前后端分离开发环境，后端采用Spring Boot框架并遵循RESTful API设计规范，前端采用Vue.js进行组件化开发，确保代码规范统一。
|
||||
|
||||
数据库分析与设计：执行完整的数据库设计流程，包括需求分析、绘制E-R图进行概念结构设计、以及逻辑表结构设计，确保数据的一致性、完整性和安全性。
|
||||
|
||||
功能模块开发：根据管理员、工作人员、客户等不同角色的业务需求，编写高质量代码实现用户管理、档案管理、工单流转、库存管理及营销服务等功能。
|
||||
|
||||
交互体验优化：针对不同用户角色设计友好、直观的操作界面，优化前端交互逻辑，确保用户能够快速上手并获得良好的使用体验。
|
||||
|
||||
系统测试与集成：对系统进行全面的功能测试与调试，分析并解决开发过程中遇到的复杂工程问题，验证系统功能的完善性与稳定性。
|
||||
|
||||
论文撰写与答辩准备：整理系统开发过程中的设计文档与测试数据，按照学校毕业论文规范撰写毕业设计论文，完成论文查重、修改定稿及答辩PPT制作，准备参加毕业答辩。
|
||||
|
||||
# 二、设计（论文）的基本要求
|
||||
|
||||
1.根据所设计的车管家4S店车辆维保管理系统，撰写毕业设计论文，论文书写规范，认真仔细，文字通顺。
|
||||
|
||||
2. 毕业设计论文全文一般在 1.5 万~2 万字左右，中文摘要一般为 $300 \sim 500$ 字，并翻译成英文。
|
||||
|
||||
3. 设计类题目查阅参考文献一般不少于 15 篇，其中至少 2 篇为外文文献并译成中文，累计 0.3 万汉字左右。
|
||||
|
||||
4. 掌握文献检索、资料查询的基本方法以及获取新知识的能力。
|
||||
|
||||
5. 掌握基本的 SpringBoot 框架的理论知识。
|
||||
|
||||
6. 掌握 MySQL 数据库相关的理论知识。
|
||||
|
||||
7. 综合运用所学专业知识对车管家4S店车辆维保管理系统的整体框架进行构建、设计，并实现相关功能。
|
||||
|
||||
# 三、推荐参考文献（一般 $8 \sim 10$ 篇，其中外文文献至少2篇）
|
||||
|
||||
|
||||
|
||||
[1]粟梁.基于SSM框架的汽车租赁管理系统设计与实现[J].电脑编程技巧与维护,2024,32(1):43-45,52.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
[2] 武卫翔,吴雪宁,童欣,秦睿,陈海燕.基于Java的第三方物流协同订单管理系统的设计与实现[J].物流科技,2024,42(12):77-81.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
[3] 丁禹钧,朱一龙,王雪静.基于 SpringBoot 和 Vue 的高校学生社团管理系统[J].电脑编程技巧与维护,2025,(9):110-112,165.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
[4]丁子木,刘美彤,韩梦杰,曹严,赵礼扬.Vue框架中的MVVM思想的实践与优化[J].电脑编程技巧与维护,2025,(4):76-78.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
[5] 柳伟卫. Vue.js+Spring Boot 全栈开发实战[M]. 人民邮电出版社, 2023.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
[6] 刘靓丽. HTML5 与 CSS3 在网页前端设计优化中的应用研究[J]. 电脑知识与技术, 2025,21(22),51-53.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
[7] 翟宝峰,邓明亮. HTML5+CSS3 网页设计基础与实战[M]. 人民邮电出版社,2024,250.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
[8] 张晓颖,石磊. Web 交互界面设计与制作[M].人民邮电出版社:2024,449.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
[9] Shangguan S, Chen W. HTML5-Powered Causal Explanations: Fueling Deep Science Learning[J]. World Journal of Innovation and Modern Technology, 2025, 12.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
[10]K. Nandhini. Veterinary Hospital Management System Using AI Integrated Advisory[J]. International Journal of Science, Engineering and Technology, 2025, 13(2).
|
||||
|
||||
|
||||
|
||||
# 四、进度要求
|
||||
|
||||
<table><tr><td>序号</td><td>时间要求</td><td>应完成的内容（任务）提要</td></tr><tr><td>1</td><td>2025年10月29日－2026年2月22日</td><td>选题、调研、搜集资料</td></tr><tr><td>2</td><td>2026年2月23日－2026年3月7日</td><td>论证、开题</td></tr><tr><td>3</td><td>2026年3月8日-2026年3月22日</td><td>总体设计、数据库设计</td></tr><tr><td>4</td><td>2026年3月23日-2026年4月19日</td><td>系统详细设计、完成各部分模块</td></tr><tr><td>5</td><td>2026年4月20日-2026年4月26日</td><td>撰写中期检查报告、中期检查</td></tr><tr><td>6</td><td>2026年4月27日-2026年5月10日</td><td>提交初稿、程序修改</td></tr><tr><td>7</td><td>2026年5月11日-2026年5月24日</td><td>论文外审、程序修改、查重</td></tr><tr><td>8</td><td>2026年5月25日-2026年6月7日</td><td>定稿、打印、准备答辩</td></tr><tr><td>9</td><td>2026年6月8日-2026年6月17日</td><td>答辩、毕业手册制作</td></tr></table>
|
||||
|
||||
# 五、专业教研室审核意见
|
||||
|
||||
教研室主任签字：
|
||||
|
||||
年月日
|
||||
|
||||
# 六、教学院系审核意见
|
||||
|
||||
教学院长签字：
|
||||
|
||||
年月日
|
||||
|
||||
注：1. 本任务书由指导教师编制完成，经教研室及所在院系审核同意后生效。
|
||||
|
||||
2. 本任务书一式两份（可复印），原件在毕业设计（论文）手册中，复印件由学生保存。
|
||||
|
||||
3. 空白部分可根据内容多少自行增删。
|
||||
Reference in New Issue
Block a user