544 lines
19 KiB
HTML
544 lines
19 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>管理员 - 员工保险管理</title>
|
|
<style>
|
|
body {
|
|
font-family: 'Microsoft YaHei', sans-serif;
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #f4f6f9;
|
|
}
|
|
.header {
|
|
background-color: #2c3e50;
|
|
color: white;
|
|
padding: 15px 20px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.header h1 {
|
|
margin: 0;
|
|
font-size: 22px;
|
|
}
|
|
.user-info {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.user-info span {
|
|
margin-right: 15px;
|
|
}
|
|
.logout-btn {
|
|
background-color: #e74c3c;
|
|
color: white;
|
|
border: none;
|
|
padding: 5px 10px;
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
}
|
|
.container {
|
|
display: flex;
|
|
min-height: calc(100vh - 60px);
|
|
}
|
|
.sidebar {
|
|
width: 220px;
|
|
background-color: #34495e;
|
|
color: white;
|
|
padding: 20px 0;
|
|
}
|
|
.sidebar-menu {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
.sidebar-menu li {
|
|
padding: 12px 20px;
|
|
cursor: pointer;
|
|
transition: background-color 0.3s;
|
|
}
|
|
.sidebar-menu li:hover {
|
|
background-color: #2c3e50;
|
|
}
|
|
.sidebar-menu li.active {
|
|
background-color: #2c3e50;
|
|
border-left: 4px solid #3498db;
|
|
}
|
|
.main-content {
|
|
flex: 1;
|
|
padding: 20px;
|
|
}
|
|
.card {
|
|
background-color: white;
|
|
border-radius: 5px;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.card-header {
|
|
border-bottom: 1px solid #eee;
|
|
padding-bottom: 10px;
|
|
margin-bottom: 15px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.card-header h2 {
|
|
margin: 0;
|
|
font-size: 18px;
|
|
color: #2c3e50;
|
|
}
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
th, td {
|
|
padding: 12px 15px;
|
|
text-align: left;
|
|
border-bottom: 1px solid #ddd;
|
|
}
|
|
th {
|
|
background-color: #f8f9fa;
|
|
font-weight: bold;
|
|
color: #2c3e50;
|
|
}
|
|
tr:hover {
|
|
background-color: #f5f5f5;
|
|
}
|
|
.status-active {
|
|
color: #27ae60;
|
|
font-weight: bold;
|
|
}
|
|
.status-expired {
|
|
color: #e74c3c;
|
|
font-weight: bold;
|
|
}
|
|
.btn {
|
|
padding: 8px 12px;
|
|
border-radius: 3px;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
margin-right: 5px;
|
|
}
|
|
.btn-primary {
|
|
background-color: #3498db;
|
|
color: white;
|
|
}
|
|
.btn-success {
|
|
background-color: #27ae60;
|
|
color: white;
|
|
}
|
|
.btn-danger {
|
|
background-color: #e74c3c;
|
|
color: white;
|
|
}
|
|
.btn-warning {
|
|
background-color: #f39c12;
|
|
color: white;
|
|
}
|
|
.btn-primary:hover {
|
|
background-color: #2980b9;
|
|
}
|
|
.btn-success:hover {
|
|
background-color: #219653;
|
|
}
|
|
.btn-danger:hover {
|
|
background-color: #c0392b;
|
|
}
|
|
.btn-warning:hover {
|
|
background-color: #d35400;
|
|
}
|
|
.search-bar {
|
|
display: flex;
|
|
margin-bottom: 20px;
|
|
}
|
|
.search-bar input {
|
|
flex: 1;
|
|
padding: 10px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px 0 0 4px;
|
|
}
|
|
.search-bar button {
|
|
padding: 10px 15px;
|
|
background-color: #3498db;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 0 4px 4px 0;
|
|
cursor: pointer;
|
|
}
|
|
.pagination {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 20px;
|
|
}
|
|
.pagination a {
|
|
color: #3498db;
|
|
padding: 8px 16px;
|
|
text-decoration: none;
|
|
border: 1px solid #ddd;
|
|
margin: 0 4px;
|
|
}
|
|
.pagination a.active {
|
|
background-color: #3498db;
|
|
color: white;
|
|
border: 1px solid #3498db;
|
|
}
|
|
.pagination a:hover:not(.active) {
|
|
background-color: #ddd;
|
|
}
|
|
.modal {
|
|
display: none;
|
|
position: fixed;
|
|
z-index: 1;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: auto;
|
|
background-color: rgba(0,0,0,0.4);
|
|
}
|
|
.modal-content {
|
|
background-color: #fefefe;
|
|
margin: 10% auto;
|
|
padding: 20px;
|
|
border: 1px solid #888;
|
|
width: 60%;
|
|
border-radius: 5px;
|
|
}
|
|
.close {
|
|
color: #aaa;
|
|
float: right;
|
|
font-size: 28px;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
}
|
|
.close:hover {
|
|
color: black;
|
|
}
|
|
.form-group {
|
|
margin-bottom: 15px;
|
|
}
|
|
.form-group label {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
font-weight: bold;
|
|
}
|
|
.form-group input, .form-group select {
|
|
width: 100%;
|
|
padding: 8px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
}
|
|
.form-actions {
|
|
text-align: right;
|
|
margin-top: 20px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<h1>员工保险管理系统</h1>
|
|
<div class="user-info">
|
|
<span>管理员</span>
|
|
<button class="logout-btn" onclick="window.location.href='login.html'">退出</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="sidebar">
|
|
<ul class="sidebar-menu">
|
|
<li class="active">员工保险管理</li>
|
|
<li onclick="window.location.href='settings.html'">系统设置</li>
|
|
<li onclick="window.location.href='reports.html'">统计报表</li>
|
|
<li>添加新员工</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="main-content">
|
|
<div class="search-bar">
|
|
<input type="text" placeholder="搜索员工姓名、工号或保单号...">
|
|
<button>搜索</button>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2>员工保险列表</h2>
|
|
<button class="btn btn-success" onclick="document.getElementById('addModal').style.display='block'">添加保险</button>
|
|
</div>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>员工姓名</th>
|
|
<th>工号</th>
|
|
<th>保险公司</th>
|
|
<th>保险类型</th>
|
|
<th>保单号</th>
|
|
<th>保费</th>
|
|
<th>保额</th>
|
|
<th>生效日期</th>
|
|
<th>到期日期</th>
|
|
<th>状态</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>张三</td>
|
|
<td>EMP001</td>
|
|
<td>中国人寿</td>
|
|
<td>医疗保险</td>
|
|
<td>CL12345678</td>
|
|
<td>¥8,500</td>
|
|
<td>¥500,000</td>
|
|
<td>2023-01-01</td>
|
|
<td>2023-12-31</td>
|
|
<td class="status-active">有效</td>
|
|
<td>
|
|
<button class="btn btn-primary">编辑</button>
|
|
<button class="btn btn-danger">删除</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>李四</td>
|
|
<td>EMP002</td>
|
|
<td>平安保险</td>
|
|
<td>意外险</td>
|
|
<td>PA87654321</td>
|
|
<td>¥1,200</td>
|
|
<td>¥1,000,000</td>
|
|
<td>2023-01-01</td>
|
|
<td>2023-12-31</td>
|
|
<td class="status-active">有效</td>
|
|
<td>
|
|
<button class="btn btn-primary">编辑</button>
|
|
<button class="btn btn-danger">删除</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>王五</td>
|
|
<td>EMP003</td>
|
|
<td>太平洋保险</td>
|
|
<td>养老保险</td>
|
|
<td>TP11223344</td>
|
|
<td>¥12,000</td>
|
|
<td>¥300,000</td>
|
|
<td>2022-01-01</td>
|
|
<td>2022-12-31</td>
|
|
<td class="status-expired">已过期</td>
|
|
<td>
|
|
<button class="btn btn-primary">编辑</button>
|
|
<button class="btn btn-danger">删除</button>
|
|
<button class="btn btn-warning">续保</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>赵六</td>
|
|
<td>EMP004</td>
|
|
<td>泰康保险</td>
|
|
<td>重大疾病险</td>
|
|
<td>TK55667788</td>
|
|
<td>¥5,800</td>
|
|
<td>¥800,000</td>
|
|
<td>2023-06-01</td>
|
|
<td>2024-05-31</td>
|
|
<td class="status-active">有效</td>
|
|
<td>
|
|
<button class="btn btn-primary">编辑</button>
|
|
<button class="btn btn-danger">删除</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<div class="pagination">
|
|
<a href="#">«</a>
|
|
<a href="#" class="active">1</a>
|
|
<a href="#">2</a>
|
|
<a href="#">3</a>
|
|
<a href="#">»</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2>保单文件管理</h2>
|
|
<button class="btn btn-success" onclick="document.getElementById('uploadModal').style.display='block'">上传文件</button>
|
|
</div>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>员工姓名</th>
|
|
<th>工号</th>
|
|
<th>文件名</th>
|
|
<th>文件类型</th>
|
|
<th>上传日期</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>张三</td>
|
|
<td>EMP001</td>
|
|
<td>医疗保险合同.pdf</td>
|
|
<td>PDF文档</td>
|
|
<td>2023-01-05</td>
|
|
<td>
|
|
<button class="btn btn-primary">下载</button>
|
|
<button class="btn btn-danger">删除</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>李四</td>
|
|
<td>EMP002</td>
|
|
<td>意外险合同.pdf</td>
|
|
<td>PDF文档</td>
|
|
<td>2023-01-05</td>
|
|
<td>
|
|
<button class="btn btn-primary">下载</button>
|
|
<button class="btn btn-danger">删除</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>王五</td>
|
|
<td>EMP003</td>
|
|
<td>养老保险合同.pdf</td>
|
|
<td>PDF文档</td>
|
|
<td>2022-01-05</td>
|
|
<td>
|
|
<button class="btn btn-primary">下载</button>
|
|
<button class="btn btn-danger">删除</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 添加保险模态框 -->
|
|
<div id="addModal" class="modal">
|
|
<div class="modal-content">
|
|
<span class="close" onclick="document.getElementById('addModal').style.display='none'">×</span>
|
|
<h2>添加新保险</h2>
|
|
<form>
|
|
<div class="form-group">
|
|
<label for="employee">员工</label>
|
|
<select id="employee">
|
|
<option value="">请选择员工</option>
|
|
<option value="EMP001">张三 (EMP001)</option>
|
|
<option value="EMP002">李四 (EMP002)</option>
|
|
<option value="EMP003">王五 (EMP003)</option>
|
|
<option value="EMP004">赵六 (EMP004)</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="insuranceCompany">保险公司</label>
|
|
<select id="insuranceCompany">
|
|
<option value="">请选择保险公司</option>
|
|
<option value="中国人寿">中国人寿</option>
|
|
<option value="平安保险">平安保险</option>
|
|
<option value="太平洋保险">太平洋保险</option>
|
|
<option value="泰康保险">泰康保险</option>
|
|
<option value="其他">其他</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="insuranceType">保险类型</label>
|
|
<select id="insuranceType">
|
|
<option value="">请选择保险类型</option>
|
|
<option value="医疗保险">医疗保险</option>
|
|
<option value="意外险">意外险</option>
|
|
<option value="养老保险">养老保险</option>
|
|
<option value="重大疾病险">重大疾病险</option>
|
|
<option value="其他">其他</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="policyNumber">保单号</label>
|
|
<input type="text" id="policyNumber" placeholder="请输入保单号">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="startDate">生效日期</label>
|
|
<input type="date" id="startDate">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="endDate">到期日期</label>
|
|
<input type="date" id="endDate">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="premium">保费</label>
|
|
<input type="number" id="premium" placeholder="请输入保费金额">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="coverage">保额</label>
|
|
<input type="number" id="coverage" placeholder="请输入保额">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="notes">备注</label>
|
|
<textarea id="notes" rows="3" style="width: 100%; border: 1px solid #ddd; border-radius: 4px;"></textarea>
|
|
</div>
|
|
<div class="form-actions">
|
|
<button type="button" class="btn btn-danger" onclick="document.getElementById('addModal').style.display='none'">取消</button>
|
|
<button type="submit" class="btn btn-success">保存</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 上传文件模态框 -->
|
|
<div id="uploadModal" class="modal">
|
|
<div class="modal-content">
|
|
<span class="close" onclick="document.getElementById('uploadModal').style.display='none'">×</span>
|
|
<h2>上传保单文件</h2>
|
|
<form>
|
|
<div class="form-group">
|
|
<label for="fileEmployee">员工</label>
|
|
<select id="fileEmployee">
|
|
<option value="">请选择员工</option>
|
|
<option value="EMP001">张三 (EMP001)</option>
|
|
<option value="EMP002">李四 (EMP002)</option>
|
|
<option value="EMP003">王五 (EMP003)</option>
|
|
<option value="EMP004">赵六 (EMP004)</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="fileType">文件类型</label>
|
|
<select id="fileType">
|
|
<option value="">请选择文件类型</option>
|
|
<option value="保险合同">保险合同</option>
|
|
<option value="保险凭证">保险凭证</option>
|
|
<option value="理赔材料">理赔材料</option>
|
|
<option value="其他">其他</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="fileUpload">选择文件</label>
|
|
<input type="file" id="fileUpload">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="fileDescription">文件描述</label>
|
|
<textarea id="fileDescription" rows="3" style="width: 100%; border: 1px solid #ddd; border-radius: 4px;"></textarea>
|
|
</div>
|
|
<div class="form-actions">
|
|
<button type="button" class="btn btn-danger" onclick="document.getElementById('uploadModal').style.display='none'">取消</button>
|
|
<button type="submit" class="btn btn-success">上传</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 点击模态框外部关闭模态框
|
|
window.onclick = function(event) {
|
|
if (event.target == document.getElementById('addModal')) {
|
|
document.getElementById('addModal').style.display = "none";
|
|
}
|
|
if (event.target == document.getElementById('uploadModal')) {
|
|
document.getElementById('uploadModal').style.display = "none";
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |