This commit is contained in:
cqq 2025-07-25 17:57:25 +08:00
parent 5bf8c62d9e
commit cbf7ef838e
27 changed files with 23352 additions and 542 deletions

Binary file not shown.

View File

@ -155,6 +155,7 @@
font-weight: bold;
}
/* 新增样式 */
.insurance-detail {
display: none;
margin-top: 15px;
@ -260,88 +261,6 @@
font-weight: bold;
color: #555;
}
/* 新增提醒相关样式 */
.sidebar-notification {
position: relative;
padding: 12px 20px;
cursor: pointer;
transition: background-color 0.3s;
}
.sidebar-notification:hover {
background-color: #2c3e50;
}
.notification-badge {
position: absolute;
top: 5px;
right: 15px;
background-color: #e74c3c;
color: white;
border-radius: 50%;
width: 20px;
height: 20px;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.reminder-item {
padding: 15px;
border-bottom: 1px solid #eee;
display: flex;
justify-content: space-between;
align-items: center;
}
.reminder-item.urgent {
border-left: 4px solid #e74c3c;
background-color: #fff5f5;
}
.reminder-item.warning {
border-left: 4px solid #f39c12;
background-color: #fffaf0;
}
.reminder-content h4 {
margin: 0 0 5px 0;
color: #2c3e50;
}
.reminder-content p {
margin: 0;
color: #7f8c8d;
font-size: 14px;
}
.reminder-actions {
display: flex;
gap: 10px;
}
.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;
}
</style>
</head>
<body>
@ -361,10 +280,6 @@
<li>个人信息</li>
<li>修改密码</li>
</ul>
<div class="sidebar-notification" onclick="showReminders()">
<span>保险提醒</span>
<span class="notification-badge" id="reminderBadge">2</span>
</div>
</div>
<div class="main-content">
@ -554,38 +469,6 @@
</table>
</div>
<div class="card">
<div class="card-header">
<h2>我的保险提醒</h2>
</div>
<div id="remindersList">
<div class="reminder-item urgent">
<div class="reminder-content">
<h4>医疗保险即将到期</h4>
<p>保单号: CL12345678</p>
<p>到期日期: 2023-12-31 (剩余15天)</p>
<p>提醒内容: 您的医疗保险即将到期,请及时处理续保事宜。</p>
</div>
<div class="reminder-actions">
<button class="btn btn-primary" onclick="viewInsuranceDetail('CL12345678')">查看详情</button>
<button class="btn btn-success" onclick="acknowledgeReminder('1')">续保</button>
</div>
</div>
<div class="reminder-item warning">
<div class="reminder-content">
<h4>意外险即将到期</h4>
<p>保单号: PA87654321</p>
<p>到期日期: 2023-12-25 (剩余9天)</p>
<p>提醒内容: 您的意外险即将到期,请及时处理续保事宜。</p>
</div>
<div class="reminder-actions">
<button class="btn btn-primary" onclick="viewInsuranceDetail('PA87654321')">查看详情</button>
<button class="btn btn-success" onclick="acknowledgeReminder('2')">续保</button>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h2>保单文件</h2>
@ -694,129 +577,35 @@
</div>
</div>
<!-- 新增:提醒详情模态框 -->
<div id="remindersModal" class="modal">
<div class="modal-content" style="width: 80%; max-width: 800px;">
<span class="close" onclick="document.getElementById('remindersModal').style.display='none'">&times;</span>
<h2>我的保险提醒</h2>
<div id="modalRemindersList">
<!-- 内容由JavaScript动态加载 -->
</div>
</div>
</div>
<script>
// 原有脚本保持不变
// 切换保险详情显示
function toggleDetail(detailId) {
const detailElement = document.getElementById(detailId);
if (detailElement.style.display === 'block') {
detailElement.style.display = 'none';
} else {
// 先关闭所有已打开的详情
document.querySelectorAll('.insurance-detail').forEach(detail => {
detail.style.display = 'none';
});
// 再打开当前点击的详情
detailElement.style.display = 'block';
}
}
// 侧边栏菜单切换
document.querySelectorAll('.sidebar-menu li').forEach(item => {
item.addEventListener('click', function() {
document.querySelectorAll('.sidebar-menu li').forEach(li => {
li.classList.remove('active');
});
this.classList.add('active');
// 这里可以添加切换内容的逻辑
// 例如: document.querySelectorAll('.card').forEach(card => card.style.display = 'none');
// document.getElementById(this.dataset.target).style.display = 'block';
});
});
// 新增提醒功能脚本
function showReminders() {
loadReminders();
document.getElementById('remindersModal').style.display = 'block';
}
function loadReminders() {
// 模拟数据
const reminders = [
{
id: '1',
insuranceId: 'CL12345678',
insuranceType: '医疗保险',
endDate: '2023-12-31',
daysLeft: 15,
message: '您的医疗保险即将到期,请及时处理续保事宜。',
isUrgent: true
},
{
id: '2',
insuranceId: 'PA87654321',
insuranceType: '意外险',
endDate: '2023-12-25',
daysLeft: 9,
message: '您的意外险即将到期,请及时处理续保事宜。',
isUrgent: false
}
];
const list = document.getElementById('modalRemindersList');
list.innerHTML = '';
if (reminders.length === 0) {
list.innerHTML = '<p>暂无待处理的保险提醒</p>';
document.getElementById('reminderBadge').style.display = 'none';
return;
}
document.getElementById('reminderBadge').textContent = reminders.length;
reminders.forEach(reminder => {
const item = document.createElement('div');
item.className = `reminder-item ${reminder.isUrgent ? 'urgent' : 'warning'}`;
item.innerHTML = `
<div class="reminder-content">
<h4>${reminder.insuranceType}即将到期</h4>
<p>保单号: ${reminder.insuranceId}</p>
<p>到期日期: ${reminder.endDate} (剩余${reminder.daysLeft}天)</p>
<p>${reminder.message}</p>
</div>
<div class="reminder-actions">
<button class="btn btn-primary" onclick="viewInsuranceDetail('${reminder.insuranceId}')">查看详情</button>
<button class="btn btn-success" onclick="acknowledgeReminder('${reminder.id}')">续保</button>
</div>
`;
list.appendChild(item);
});
}
function viewInsuranceDetail(policyId) {
alert(`查看保单 ${policyId} 的详情`);
document.getElementById('remindersModal').style.display = 'none';
}
function acknowledgeReminder(reminderId) {
// 这里应该是AJAX请求标记提醒为已处理
alert(`已续保 ${reminderId}`);
// 更新UI
const badge = document.getElementById('reminderBadge');
const newCount = parseInt(badge.textContent) - 1;
badge.textContent = newCount > 0 ? newCount : '0';
if (newCount <= 0) {
badge.style.display = 'none';
}
// 从列表中移除
const item = document.querySelector(`[onclick="acknowledgeReminder('${reminderId}')"]`).closest('.reminder-item');
if (item) item.style.display = 'none';
}
// 点击模态框外部关闭模态框
window.onclick = function(event) {
if (event.target == document.getElementById('remindersModal')) {
document.getElementById('remindersModal').style.display = "none";
}
}
</script>
</body>
</html>

View File

@ -235,69 +235,12 @@
text-align: right;
margin-top: 20px;
}
/* 新增提醒相关样式 */
.notification-btn {
position: relative;
display: inline-flex;
align-items: center;
gap: 5px;
margin-right: 15px;
cursor: pointer;
color: white;
}
.notification-badge {
position: absolute;
top: -5px;
right: -5px;
background-color: #e74c3c;
color: white;
border-radius: 50%;
width: 18px;
height: 18px;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.reminder-item {
padding: 12px;
border-bottom: 1px solid #eee;
display: flex;
justify-content: space-between;
align-items: center;
}
.reminder-item.urgent {
border-left: 4px solid #e74c3c;
background-color: #fff5f5;
}
.reminder-item.warning {
border-left: 4px solid #f39c12;
background-color: #fffaf0;
}
.reminder-content h4 {
margin: 0 0 5px 0;
color: #2c3e50;
}
.reminder-content p {
margin: 0;
color: #7f8c8d;
font-size: 14px;
}
.reminder-actions {
display: flex;
gap: 8px;
}
</style>
</head>
<body>
<div class="header">
<h1>员工保险管理系统</h1>
<div class="user-info">
<div class="notification-btn" onclick="showAdminReminders()">
<span>提醒管理</span>
<span class="notification-badge" id="adminReminderBadge" style="display: none;">0</span>
</div>
<span>管理员</span>
<button class="logout-btn" onclick="window.location.href='login.html'">退出</button>
</div>
@ -355,7 +298,6 @@
<td>
<button class="btn btn-primary">编辑</button>
<button class="btn btn-danger">删除</button>
<button class="btn btn-warning" onclick="showSetReminderModal('CL12345678')">设置提醒</button>
</td>
</tr>
<tr>
@ -372,7 +314,6 @@
<td>
<button class="btn btn-primary">编辑</button>
<button class="btn btn-danger">删除</button>
<button class="btn btn-warning" onclick="showSetReminderModal('PA87654321')">设置提醒</button>
</td>
</tr>
<tr>
@ -406,7 +347,6 @@
<td>
<button class="btn btn-primary">编辑</button>
<button class="btn btn-danger">删除</button>
<button class="btn btn-warning" onclick="showSetReminderModal('TK55667788')">设置提醒</button>
</td>
</tr>
</tbody>
@ -421,54 +361,6 @@
</div>
</div>
<div class="card">
<div class="card-header">
<h2>保险到期提醒管理</h2>
</div>
<table>
<thead>
<tr>
<th>员工姓名</th>
<th>工号</th>
<th>保险公司</th>
<th>保险类型</th>
<th>到期日期</th>
<th>剩余天数</th>
<th>提醒状态</th>
<th>操作</th>
</tr>
</thead>
<tbody id="reminderManagementList">
<tr>
<td>张三</td>
<td>EMP001</td>
<td>中国人寿</td>
<td>医疗保险</td>
<td>2023-12-31</td>
<td>15</td>
<td>待发送</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>2023-12-31</td>
<td>15</td>
<td>已发送</td>
<td>
<button class="btn btn-primary">重新发送</button>
<button class="btn btn-danger">取消</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="card">
<div class="card-header">
<h2>保单文件管理</h2>
@ -525,7 +417,7 @@
</div>
</div>
<!-- 添加保险模态框(原有) -->
<!-- 添加保险模态框 -->
<div id="addModal" class="modal">
<div class="modal-content">
<span class="close" onclick="document.getElementById('addModal').style.display='none'">&times;</span>
@ -595,7 +487,7 @@
</div>
</div>
<!-- 上传文件模态框(原有) -->
<!-- 上传文件模态框 -->
<div id="uploadModal" class="modal">
<div class="modal-content">
<span class="close" onclick="document.getElementById('uploadModal').style.display='none'">&times;</span>
@ -637,65 +529,8 @@
</div>
</div>
<!-- 新增:设置提醒模态框 -->
<div id="setReminderModal" class="modal">
<div class="modal-content">
<span class="close" onclick="document.getElementById('setReminderModal').style.display='none'">&times;</span>
<h2>设置保险到期提醒</h2>
<form id="reminderForm">
<input type="hidden" id="reminderPolicyId">
<div class="form-group">
<label for="reminderDays">提前提醒天数</label>
<input type="number" id="reminderDays" min="1" max="365" value="30">
</div>
<div class="form-group">
<label for="reminderMessage">提醒消息内容</label>
<textarea id="reminderMessage" rows="3">您的保险即将到期,请及时处理续保事宜。</textarea>
</div>
<div class="form-actions">
<button type="button" class="btn btn-danger" onclick="document.getElementById('setReminderModal').style.display='none'">取消</button>
<button type="submit" class="btn btn-success">保存设置</button>
</div>
</form>
</div>
</div>
<!-- 新增:提醒管理模态框 -->
<div id="adminRemindersModal" class="modal">
<div class="modal-content" style="width: 80%; max-width: 800px;">
<span class="close" onclick="document.getElementById('adminRemindersModal').style.display='none'">&times;</span>
<h2>保险到期提醒</h2>
<div id="adminRemindersList">
<div class="reminder-item urgent">
<div class="reminder-content">
<h4>张三 - 医疗保险即将到期</h4>
<p>保单号: CL12345678</p>
<p>到期日期: 2023-12-31 (剩余15天)</p>
<p>提醒内容: 您的医疗保险即将到期,请及时处理续保事宜。</p>
</div>
<div class="reminder-actions">
<button class="btn btn-primary">查看详情</button>
<button class="btn btn-success">标记为已发送</button>
</div>
</div>
<div class="reminder-item warning">
<div class="reminder-content">
<h4>李四 - 意外险即将到期</h4>
<p>保单号: PA87654321</p>
<p>到期日期: 2023-12-25 (剩余9天)</p>
<p>提醒内容: 您的意外险即将到期,请及时处理续保事宜。</p>
</div>
<div class="reminder-actions">
<button class="btn btn-primary">查看详情</button>
<button class="btn btn-success">标记为已发送</button>
</div>
</div>
</div>
</div>
</div>
<script>
// 原有脚本保持不变
// 点击模态框外部关闭模态框
window.onclick = function(event) {
if (event.target == document.getElementById('addModal')) {
document.getElementById('addModal').style.display = "none";
@ -703,77 +538,7 @@
if (event.target == document.getElementById('uploadModal')) {
document.getElementById('uploadModal').style.display = "none";
}
if (event.target == document.getElementById('setReminderModal')) {
document.getElementById('setReminderModal').style.display = "none";
}
if (event.target == document.getElementById('adminRemindersModal')) {
document.getElementById('adminRemindersModal').style.display = "none";
}
}
// 新增提醒功能脚本
function showSetReminderModal(policyId) {
document.getElementById('reminderPolicyId').value = policyId;
document.getElementById('setReminderModal').style.display = 'block';
}
function showAdminReminders() {
document.getElementById('adminRemindersModal').style.display = 'block';
updateAdminReminderBadge(0); // 清除未读提醒
}
function updateAdminReminderBadge(count) {
const badge = document.getElementById('adminReminderBadge');
if (count > 0) {
badge.style.display = 'flex';
badge.textContent = count;
} else {
badge.style.display = 'none';
}
}
document.getElementById('reminderForm').addEventListener('submit', function(e) {
e.preventDefault();
const policyId = document.getElementById('reminderPolicyId').value;
const days = document.getElementById('reminderDays').value;
const message = document.getElementById('reminderMessage').value;
alert(`已为保单 ${policyId} 设置提前 ${days} 天提醒`);
document.getElementById('setReminderModal').style.display = 'none';
// 模拟添加新提醒到管理列表
addNewReminderToManagementList({
employeeName: '张三',
employeeId: 'EMP001',
company: '中国人寿',
type: '医疗保险',
endDate: '2023-12-31',
daysLeft: days,
status: '待发送'
});
});
function addNewReminderToManagementList(data) {
const row = document.createElement('tr');
row.innerHTML = `
<td>${data.employeeName}</td>
<td>${data.employeeId}</td>
<td>${data.company}</td>
<td>${data.type}</td>
<td>${data.endDate}</td>
<td>${data.daysLeft}</td>
<td>${data.status}</td>
<td>
<button class="btn btn-primary">发送提醒</button>
<button class="btn btn-danger">取消</button>
</td>
`;
document.getElementById('reminderManagementList').prepend(row);
updateAdminReminderBadge(parseInt(document.getElementById('adminReminderBadge').textContent || '0') + 1);
}
// 初始化
updateAdminReminderBadge(2); // 模拟有2个待处理提醒
</script>
</body>
</html>

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

BIN
平台功能模块图.xmind Normal file

Binary file not shown.

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff