607 lines
31 KiB
HTML
607 lines
31 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>管理员仪表板 - 车管家4S店车辆维保管理系统</title>
|
||
<link href="/lib/bootstrap.min.css" rel="stylesheet">
|
||
<link href="/lib/bootstrap-icons.css" rel="stylesheet">
|
||
<link rel="stylesheet" href="../css/style.css">
|
||
</head>
|
||
<body>
|
||
<div class="dashboard-wrapper">
|
||
<!-- 侧边栏 -->
|
||
<nav class="sidebar">
|
||
<div class="sidebar-header">
|
||
<i class="bi bi-car-front-fill fs-1 d-block mb-2"></i>
|
||
<h5 class="mb-1">车管家系统</h5>
|
||
<small>管理员控制台</small>
|
||
</div>
|
||
<div class="mt-4">
|
||
<a class="menu-item active" onclick="showSection('overview')">
|
||
<i class="bi bi-speedometer2"></i>
|
||
<span>系统概览</span>
|
||
</a>
|
||
<a class="menu-item" onclick="showSection('users')">
|
||
<i class="bi bi-people-fill"></i>
|
||
<span>用户管理</span>
|
||
</a>
|
||
<a class="menu-item" onclick="showSection('vehicles')">
|
||
<i class="bi bi-car-front"></i>
|
||
<span>车辆管理</span>
|
||
</a>
|
||
<a class="menu-item" onclick="showSection('orders')">
|
||
<i class="bi bi-clipboard-data"></i>
|
||
<span>工单管理</span>
|
||
</a>
|
||
<a class="menu-item" onclick="showSection('parts')">
|
||
<i class="bi bi-box-seam"></i>
|
||
<span>配件管理</span>
|
||
</a>
|
||
<a class="menu-item" onclick="showSection('appointments')">
|
||
<i class="bi bi-calendar-check"></i>
|
||
<span>预约管理</span>
|
||
</a>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- 主内容区 -->
|
||
<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="d-flex align-items-center gap-3">
|
||
<div class="dropdown">
|
||
<button class="btn btn-outline-light dropdown-toggle" style="color: black;" 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>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 系统概览 -->
|
||
<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="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="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="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="card-header">
|
||
<h6 class="mb-0"><i class="bi bi-clock-history"></i> 最近工单</h6>
|
||
</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="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="content-section" style="display: none;">
|
||
<div class="content-card">
|
||
<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="content-section" style="display: none;">
|
||
<div class="content-card">
|
||
<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="content-section" style="display: none;">
|
||
<div class="content-card">
|
||
<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="content-section" style="display: none;">
|
||
<div class="content-card">
|
||
<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="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="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>
|
||
|
||
<!-- 配件编辑模态框 -->
|
||
<div class="modal fade" id="partModal" tabindex="-1">
|
||
<div class="modal-dialog">
|
||
<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-6 mb-3">
|
||
<label class="form-label">配件编号</label>
|
||
<input type="text" class="form-control" id="partPartNo" required>
|
||
</div>
|
||
<div class="col-6 mb-3">
|
||
<label class="form-label">配件名称</label>
|
||
<input type="text" class="form-control" id="partPartName" required>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-6 mb-3">
|
||
<label class="form-label">类别</label>
|
||
<input type="text" class="form-control" id="partCategory" placeholder="如：机油滤清器">
|
||
</div>
|
||
<div class="col-6 mb-3">
|
||
<label class="form-label">品牌</label>
|
||
<input type="text" class="form-control" id="partBrand">
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-6 mb-3">
|
||
<label class="form-label">型号</label>
|
||
<input type="text" class="form-control" id="partModel">
|
||
</div>
|
||
<div class="col-6 mb-3">
|
||
<label class="form-label">单位</label>
|
||
<select class="form-select" id="partUnit">
|
||
<option value="个">个</option>
|
||
<option value="套">套</option>
|
||
<option value="桶">桶</option>
|
||
<option value="瓶">瓶</option>
|
||
<option value="对">对</option>
|
||
<option value="件">件</option>
|
||
</select>
|
||
</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="partUnitPrice" required>
|
||
</div>
|
||
<div class="col-6 mb-3">
|
||
<label class="form-label">库存数量</label>
|
||
<input type="number" class="form-control" id="partStockQuantity" required>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-6 mb-3">
|
||
<label class="form-label">
|
||
最小库存
|
||
<span class="text-danger" title="低于此值将触发库存预警">*</span>
|
||
</label>
|
||
<input type="number" class="form-control" id="partMinStock" required>
|
||
</div>
|
||
<div class="col-6 mb-3">
|
||
<label class="form-label">供应商</label>
|
||
<input type="text" class="form-control" id="partSupplier">
|
||
</div>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="form-label">仓库位置</label>
|
||
<input type="text" class="form-control" id="partWarehouseLocation" placeholder="如：A区01架02层">
|
||
</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>
|
||
|
||
<!-- 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="/lib/bootstrap.bundle.min.js"></script>
|
||
<script src="../js/config.js"></script>
|
||
<script src="../js/api.js"></script>
|
||
<script src="../js/app.js"></script>
|
||
<script src="../js/admin.js"></script>
|
||
</body>
|
||
</html>
|