568 lines
23 KiB
HTML
568 lines
23 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;
|
|
}
|
|
.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-primary:hover {
|
|
background-color: #2980b9;
|
|
}
|
|
.btn-success:hover {
|
|
background-color: #219653;
|
|
}
|
|
.btn-danger:hover {
|
|
background-color: #c0392b;
|
|
}
|
|
.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;
|
|
}
|
|
.tabs {
|
|
display: flex;
|
|
border-bottom: 1px solid #ddd;
|
|
margin-bottom: 20px;
|
|
}
|
|
.tab {
|
|
padding: 10px 20px;
|
|
cursor: pointer;
|
|
border: 1px solid transparent;
|
|
border-bottom: none;
|
|
margin-right: 5px;
|
|
background-color: #f8f9fa;
|
|
border-radius: 5px 5px 0 0;
|
|
}
|
|
.tab.active {
|
|
background-color: white;
|
|
border-color: #ddd;
|
|
border-bottom-color: white;
|
|
margin-bottom: -1px;
|
|
font-weight: bold;
|
|
}
|
|
.tab-content {
|
|
display: none;
|
|
}
|
|
.tab-content.active {
|
|
display: block;
|
|
}
|
|
</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 onclick="window.location.href='admin.html'">员工保险管理</li>
|
|
<li class="active">系统设置</li>
|
|
<li onclick="window.location.href='reports.html'">统计报表</li>
|
|
<li>添加新员工</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="main-content">
|
|
<div class="card">
|
|
<div class="tabs">
|
|
<div class="tab active" onclick="switchTab('users')">用户管理</div>
|
|
<div class="tab" onclick="switchTab('companies')">保险公司管理</div>
|
|
<div class="tab" onclick="switchTab('types')">保险类型管理</div>
|
|
<div class="tab" onclick="switchTab('system')">系统配置</div>
|
|
</div>
|
|
|
|
<div id="users" class="tab-content active">
|
|
<div class="card-header">
|
|
<h2>用户列表</h2>
|
|
<button class="btn btn-success" onclick="document.getElementById('addUserModal').style.display='block'">添加用户</button>
|
|
</div>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>用户名</th>
|
|
<th>姓名</th>
|
|
<th>角色</th>
|
|
<th>部门</th>
|
|
<th>工号</th>
|
|
<th>状态</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>admin</td>
|
|
<td>系统管理员</td>
|
|
<td>管理员</td>
|
|
<td>人事部</td>
|
|
<td>ADM001</td>
|
|
<td>激活</td>
|
|
<td>
|
|
<button class="btn btn-primary">编辑</button>
|
|
<button class="btn btn-danger">禁用</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>zhangsan</td>
|
|
<td>张三</td>
|
|
<td>员工</td>
|
|
<td>技术部</td>
|
|
<td>EMP001</td>
|
|
<td>激活</td>
|
|
<td>
|
|
<button class="btn btn-primary">编辑</button>
|
|
<button class="btn btn-danger">禁用</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>lisi</td>
|
|
<td>李四</td>
|
|
<td>员工</td>
|
|
<td>市场部</td>
|
|
<td>EMP002</td>
|
|
<td>激活</td>
|
|
<td>
|
|
<button class="btn btn-primary">编辑</button>
|
|
<button class="btn btn-danger">禁用</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>wangwu</td>
|
|
<td>王五</td>
|
|
<td>员工</td>
|
|
<td>财务部</td>
|
|
<td>EMP003</td>
|
|
<td>已禁用</td>
|
|
<td>
|
|
<button class="btn btn-primary">编辑</button>
|
|
<button class="btn btn-success">激活</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div id="companies" class="tab-content">
|
|
<div class="card-header">
|
|
<h2>保险公司管理</h2>
|
|
<button class="btn btn-success" onclick="document.getElementById('addCompanyModal').style.display='block'">添加保险公司</button>
|
|
</div>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>保险公司名称</th>
|
|
<th>联系人</th>
|
|
<th>联系电话</th>
|
|
<th>合作状态</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>中国人寿</td>
|
|
<td>张经理</td>
|
|
<td>13800138001</td>
|
|
<td>合作中</td>
|
|
<td>
|
|
<button class="btn btn-primary">编辑</button>
|
|
<button class="btn btn-danger">终止合作</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>平安保险</td>
|
|
<td>李经理</td>
|
|
<td>13800138002</td>
|
|
<td>合作中</td>
|
|
<td>
|
|
<button class="btn btn-primary">编辑</button>
|
|
<button class="btn btn-danger">终止合作</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>太平洋保险</td>
|
|
<td>王经理</td>
|
|
<td>13800138003</td>
|
|
<td>合作中</td>
|
|
<td>
|
|
<button class="btn btn-primary">编辑</button>
|
|
<button class="btn btn-danger">终止合作</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div id="types" class="tab-content">
|
|
<div class="card-header">
|
|
<h2>保险类型管理</h2>
|
|
<button class="btn btn-success" onclick="document.getElementById('addTypeModal').style.display='block'">添加保险类型</button>
|
|
</div>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>保险类型</th>
|
|
<th>描述</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>医疗保险</td>
|
|
<td>员工医疗费用报销</td>
|
|
<td>
|
|
<button class="btn btn-primary">编辑</button>
|
|
<button class="btn btn-danger">删除</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>意外险</td>
|
|
<td>员工意外伤害保障</td>
|
|
<td>
|
|
<button class="btn btn-primary">编辑</button>
|
|
<button class="btn btn-danger">删除</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>养老保险</td>
|
|
<td>员工退休养老保障</td>
|
|
<td>
|
|
<button class="btn btn-primary">编辑</button>
|
|
<button class="btn btn-danger">删除</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>重大疾病险</td>
|
|
<td>员工重大疾病保障</td>
|
|
<td>
|
|
<button class="btn btn-primary">编辑</button>
|
|
<button class="btn btn-danger">删除</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div id="system" class="tab-content">
|
|
<div class="card-header">
|
|
<h2>系统配置</h2>
|
|
</div>
|
|
<form>
|
|
<div class="form-group">
|
|
<label for="systemName">系统名称</label>
|
|
<input type="text" id="systemName" value="员工保险管理系统">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="companyName">公司名称</label>
|
|
<input type="text" id="companyName" value="某某科技有限公司">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="expireWarning">保险到期提前提醒天数</label>
|
|
<input type="number" id="expireWarning" value="30">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="backupFrequency">数据备份频率</label>
|
|
<select id="backupFrequency">
|
|
<option value="daily">每天</option>
|
|
<option value="weekly" selected>每周</option>
|
|
<option value="monthly">每月</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-actions">
|
|
<button type="reset" class="btn btn-danger">重置</button>
|
|
<button type="submit" class="btn btn-success">保存配置</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 添加用户模态框 -->
|
|
<div id="addUserModal" class="modal">
|
|
<div class="modal-content">
|
|
<span class="close" onclick="document.getElementById('addUserModal').style.display='none'">×</span>
|
|
<h2>添加新用户</h2>
|
|
<form>
|
|
<div class="form-group">
|
|
<label for="username">用户名</label>
|
|
<input type="text" id="username" placeholder="请输入用户名">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="fullname">姓名</label>
|
|
<input type="text" id="fullname" placeholder="请输入姓名">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="password">密码</label>
|
|
<input type="password" id="password" placeholder="请输入密码">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="confirmPassword">确认密码</label>
|
|
<input type="password" id="confirmPassword" placeholder="请再次输入密码">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="role">角色</label>
|
|
<select id="role">
|
|
<option value="employee">员工</option>
|
|
<option value="admin">管理员</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="department">部门</label>
|
|
<select id="department">
|
|
<option value="hr">人事部</option>
|
|
<option value="tech">技术部</option>
|
|
<option value="market">市场部</option>
|
|
<option value="finance">财务部</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="employeeId">工号</label>
|
|
<input type="text" id="employeeId" placeholder="请输入工号">
|
|
</div>
|
|
<div class="form-actions">
|
|
<button type="button" class="btn btn-danger" onclick="document.getElementById('addUserModal').style.display='none'">取消</button>
|
|
<button type="submit" class="btn btn-success">保存</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 添加保险公司模态框 -->
|
|
<div id="addCompanyModal" class="modal">
|
|
<div class="modal-content">
|
|
<span class="close" onclick="document.getElementById('addCompanyModal').style.display='none'">×</span>
|
|
<h2>添加保险公司</h2>
|
|
<form>
|
|
<div class="form-group">
|
|
<label for="companyName">保险公司名称</label>
|
|
<input type="text" id="companyName" placeholder="请输入保险公司名称">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="contactPerson">联系人</label>
|
|
<input type="text" id="contactPerson" placeholder="请输入联系人">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="contactPhone">联系电话</label>
|
|
<input type="text" id="contactPhone" placeholder="请输入联系电话">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="email">电子邮箱</label>
|
|
<input type="email" id="email" placeholder="请输入电子邮箱">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="address">公司地址</label>
|
|
<input type="text" id="address" placeholder="请输入公司地址">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="cooperationDate">合作开始日期</label>
|
|
<input type="date" id="cooperationDate">
|
|
</div>
|
|
<div class="form-actions">
|
|
<button type="button" class="btn btn-danger" onclick="document.getElementById('addCompanyModal').style.display='none'">取消</button>
|
|
<button type="submit" class="btn btn-success">保存</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 添加保险类型模态框 -->
|
|
<div id="addTypeModal" class="modal">
|
|
<div class="modal-content">
|
|
<span class="close" onclick="document.getElementById('addTypeModal').style.display='none'">×</span>
|
|
<h2>添加保险类型</h2>
|
|
<form>
|
|
<div class="form-group">
|
|
<label for="insuranceType">保险类型</label>
|
|
<input type="text" id="insuranceType" placeholder="请输入保险类型">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="typeDescription">描述</label>
|
|
<textarea id="typeDescription" rows="3" placeholder="请输入保险类型描述"></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="coverageRange">保障范围</label>
|
|
<textarea id="coverageRange" rows="3" placeholder="请输入保障范围"></textarea>
|
|
</div>
|
|
<div class="form-actions">
|
|
<button type="button" class="btn btn-danger" onclick="document.getElementById('addTypeModal').style.display='none'">取消</button>
|
|
<button type="submit" class="btn btn-success">保存</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 切换标签页
|
|
function switchTab(tabId) {
|
|
// 隐藏所有标签内容
|
|
document.querySelectorAll('.tab-content').forEach(content => {
|
|
content.classList.remove('active');
|
|
});
|
|
|
|
// 取消所有标签的活动状态
|
|
document.querySelectorAll('.tab').forEach(tab => {
|
|
tab.classList.remove('active');
|
|
});
|
|
|
|
// 显示选中的标签内容
|
|
document.getElementById(tabId).classList.add('active');
|
|
|
|
// 设置选中标签的活动状态
|
|
event.currentTarget.classList.add('active');
|
|
}
|
|
|
|
// 点击模态框外部关闭模态框
|
|
window.onclick = function(event) {
|
|
if (event.target == document.getElementById('addUserModal')) {
|
|
document.getElementById('addUserModal').style.display = "none";
|
|
}
|
|
if (event.target == document.getElementById('addCompanyModal')) {
|
|
document.getElementById('addCompanyModal').style.display = "none";
|
|
}
|
|
if (event.target == document.getElementById('addTypeModal')) {
|
|
document.getElementById('addTypeModal').style.display = "none";
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|