2664 lines
118 KiB
HTML
2664 lines
118 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>
|
||
:root {
|
||
--primary-color: #3498db;
|
||
--secondary-color: #2c3e50;
|
||
--success-color: #27ae60;
|
||
--danger-color: #e74c3c;
|
||
--warning-color: #f39c12;
|
||
--light-color: #f8f9fa;
|
||
--dark-color: #343a40;
|
||
--gray-color: #7f8c8d;
|
||
--border-color: #ddd;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Microsoft YaHei', sans-serif;
|
||
margin: 0;
|
||
padding: 0;
|
||
background-color: #f4f6f9;
|
||
color: #333;
|
||
}
|
||
|
||
.header {
|
||
background-color: var(--secondary-color);
|
||
color: white;
|
||
padding: 15px 20px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.header h1 {
|
||
margin: 0;
|
||
font-size: 22px;
|
||
}
|
||
|
||
.user-info {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.user-info span {
|
||
margin-right: 15px;
|
||
}
|
||
|
||
.logout-btn {
|
||
background-color: var(--danger-color);
|
||
color: white;
|
||
border: none;
|
||
padding: 5px 10px;
|
||
border-radius: 3px;
|
||
cursor: pointer;
|
||
transition: background-color 0.3s;
|
||
}
|
||
|
||
.logout-btn:hover {
|
||
background-color: #c0392b;
|
||
}
|
||
|
||
.container {
|
||
display: flex;
|
||
min-height: calc(100vh - 60px);
|
||
}
|
||
|
||
.sidebar {
|
||
width: 220px;
|
||
background-color: #34495e;
|
||
color: white;
|
||
padding: 20px 0;
|
||
transition: width 0.3s;
|
||
}
|
||
|
||
.sidebar-menu {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
.sidebar-menu li {
|
||
padding: 12px 20px;
|
||
cursor: pointer;
|
||
transition: background-color 0.3s;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.sidebar-menu li i {
|
||
margin-right: 10px;
|
||
width: 20px;
|
||
text-align: center;
|
||
}
|
||
|
||
.sidebar-menu li:hover {
|
||
background-color: var(--secondary-color);
|
||
}
|
||
|
||
.sidebar-menu li.active {
|
||
background-color: var(--secondary-color);
|
||
border-left: 4px solid var(--primary-color);
|
||
}
|
||
|
||
.main-content {
|
||
flex: 1;
|
||
padding: 20px;
|
||
transition: margin-left 0.3s;
|
||
}
|
||
|
||
.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 var(--border-color);
|
||
padding-bottom: 10px;
|
||
margin-bottom: 15px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.card-header h2 {
|
||
margin: 0;
|
||
font-size: 18px;
|
||
color: var(--secondary-color);
|
||
}
|
||
|
||
table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
}
|
||
|
||
th, td {
|
||
padding: 12px 15px;
|
||
text-align: left;
|
||
border-bottom: 1px solid var(--border-color);
|
||
}
|
||
|
||
th {
|
||
background-color: var(--light-color);
|
||
font-weight: bold;
|
||
color: var(--secondary-color);
|
||
}
|
||
|
||
tr:hover {
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
.btn {
|
||
padding: 8px 12px;
|
||
border-radius: 3px;
|
||
border: none;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
margin-right: 5px;
|
||
transition: background-color 0.3s;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.btn i {
|
||
margin-right: 5px;
|
||
}
|
||
|
||
.btn-primary {
|
||
background-color: var(--primary-color);
|
||
color: white;
|
||
}
|
||
|
||
.btn-success {
|
||
background-color: var(--success-color);
|
||
color: white;
|
||
}
|
||
|
||
.btn-danger {
|
||
background-color: var(--danger-color);
|
||
color: white;
|
||
}
|
||
|
||
.btn-warning {
|
||
background-color: var(--warning-color);
|
||
color: white;
|
||
}
|
||
|
||
.btn-info {
|
||
background-color: #17a2b8;
|
||
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: #e67e22;
|
||
}
|
||
|
||
.btn-info:hover {
|
||
background-color: #138496;
|
||
}
|
||
|
||
.status-active {
|
||
color: var(--success-color);
|
||
font-weight: bold;
|
||
}
|
||
|
||
.status-expired {
|
||
color: var(--danger-color);
|
||
font-weight: bold;
|
||
}
|
||
|
||
.status-pending {
|
||
color: var(--warning-color);
|
||
font-weight: bold;
|
||
}
|
||
|
||
.status-warning {
|
||
color: var(--warning-color);
|
||
font-weight: bold;
|
||
}
|
||
|
||
.insurance-detail {
|
||
display: none;
|
||
margin-top: 15px;
|
||
padding: 15px;
|
||
background-color: #f9f9f9;
|
||
border-radius: 5px;
|
||
border-left: 4px solid var(--primary-color);
|
||
}
|
||
|
||
.detail-row {
|
||
display: flex;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.detail-label {
|
||
width: 150px;
|
||
font-weight: bold;
|
||
color: #555;
|
||
}
|
||
|
||
.detail-value {
|
||
flex: 1;
|
||
}
|
||
|
||
.policy-benefits {
|
||
margin-top: 15px;
|
||
padding-top: 15px;
|
||
border-top: 1px solid var(--border-color);
|
||
}
|
||
|
||
.benefit-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 8px 0;
|
||
border-bottom: 1px dashed var(--border-color);
|
||
}
|
||
|
||
.text-success {
|
||
color: var(--success-color);
|
||
}
|
||
|
||
.text-warning {
|
||
color: var(--warning-color);
|
||
}
|
||
|
||
.text-danger {
|
||
color: var(--danger-color);
|
||
}
|
||
|
||
.text-info {
|
||
color: #17a2b8;
|
||
}
|
||
|
||
.file-list {
|
||
list-style: none;
|
||
padding: 0;
|
||
}
|
||
|
||
.file-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 10px;
|
||
border-bottom: 1px solid var(--border-color);
|
||
align-items: center;
|
||
}
|
||
|
||
.file-item:hover {
|
||
background-color: #f9f9f9;
|
||
}
|
||
|
||
.file-icon {
|
||
margin-right: 10px;
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
.profile-section {
|
||
display: flex;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.profile-avatar {
|
||
width: 100px;
|
||
height: 100px;
|
||
border-radius: 50%;
|
||
background-color: #eee;
|
||
margin-right: 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
overflow: hidden;
|
||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.profile-avatar img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.profile-info {
|
||
flex: 1;
|
||
}
|
||
|
||
.profile-name {
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.profile-meta {
|
||
color: var(--gray-color);
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.profile-actions {
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.info-table {
|
||
width: 100%;
|
||
}
|
||
|
||
.info-table td {
|
||
padding: 10px;
|
||
border-bottom: 1px solid var(--border-color);
|
||
}
|
||
|
||
.info-table td:first-child {
|
||
width: 30%;
|
||
font-weight: bold;
|
||
color: #555;
|
||
}
|
||
|
||
.search-bar {
|
||
display: flex;
|
||
margin-bottom: 20px;
|
||
gap: 10px;
|
||
}
|
||
|
||
.search-bar input {
|
||
flex: 1;
|
||
padding: 10px;
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.search-bar button {
|
||
padding: 10px 15px;
|
||
background-color: var(--primary-color);
|
||
color: white;
|
||
border: none;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
transition: background-color 0.3s;
|
||
}
|
||
|
||
.search-bar button:hover {
|
||
background-color: #2980b9;
|
||
}
|
||
|
||
.pagination {
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.pagination a {
|
||
color: var(--primary-color);
|
||
padding: 8px 16px;
|
||
text-decoration: none;
|
||
border: 1px solid var(--border-color);
|
||
margin: 0 4px;
|
||
}
|
||
|
||
.pagination a.active {
|
||
background-color: var(--primary-color);
|
||
color: white;
|
||
border: 1px solid var(--primary-color);
|
||
}
|
||
|
||
.pagination a:hover:not(.active) {
|
||
background-color: #ddd;
|
||
}
|
||
|
||
.modal {
|
||
display: none;
|
||
position: fixed;
|
||
z-index: 1000;
|
||
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;
|
||
max-width: 800px;
|
||
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
|
||
}
|
||
|
||
.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,
|
||
.form-group textarea {
|
||
width: 100%;
|
||
padding: 8px;
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 4px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.form-group textarea {
|
||
min-height: 100px;
|
||
resize: vertical;
|
||
}
|
||
|
||
.form-actions {
|
||
text-align: right;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.tabs {
|
||
display: flex;
|
||
border-bottom: 1px solid var(--border-color);
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.tab {
|
||
padding: 10px 20px;
|
||
cursor: pointer;
|
||
border: 1px solid transparent;
|
||
border-bottom: none;
|
||
margin-right: 5px;
|
||
background-color: var(--light-color);
|
||
border-radius: 5px 5px 0 0;
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.tab:hover {
|
||
background-color: #e9ecef;
|
||
}
|
||
|
||
.tab.active {
|
||
background-color: white;
|
||
border-color: var(--border-color);
|
||
border-bottom-color: white;
|
||
margin-bottom: -1px;
|
||
font-weight: bold;
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
.tab-content {
|
||
display: none;
|
||
}
|
||
|
||
.tab-content.active {
|
||
display: block;
|
||
}
|
||
|
||
.chart-container {
|
||
width: 100%;
|
||
height: 400px;
|
||
margin-bottom: 20px;
|
||
background-color: white;
|
||
border-radius: 5px;
|
||
padding: 20px;
|
||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.filter-bar {
|
||
display: flex;
|
||
margin-bottom: 20px;
|
||
gap: 10px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.filter-bar select,
|
||
.filter-bar input {
|
||
padding: 8px;
|
||
border: 1px solid var(--border-color);
|
||
border-radius: 4px;
|
||
min-width: 150px;
|
||
}
|
||
|
||
.filter-bar button {
|
||
padding: 8px 15px;
|
||
background-color: var(--primary-color);
|
||
color: white;
|
||
border: none;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
transition: background-color 0.3s;
|
||
}
|
||
|
||
.filter-bar button:hover {
|
||
background-color: #2980b9;
|
||
}
|
||
|
||
.stat-cards {
|
||
display: flex;
|
||
gap: 20px;
|
||
margin-bottom: 20px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.stat-card {
|
||
flex: 1;
|
||
min-width: 200px;
|
||
background-color: white;
|
||
border-radius: 5px;
|
||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||
padding: 20px;
|
||
text-align: center;
|
||
}
|
||
|
||
.stat-card h3 {
|
||
margin-top: 0;
|
||
color: var(--gray-color);
|
||
}
|
||
|
||
.stat-card .value {
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
margin: 10px 0;
|
||
}
|
||
|
||
.stat-card .trend {
|
||
font-size: 14px;
|
||
color: var(--success-color);
|
||
}
|
||
|
||
.stat-card .trend.down {
|
||
color: var(--danger-color);
|
||
}
|
||
|
||
.health-record {
|
||
margin-bottom: 20px;
|
||
padding: 15px;
|
||
background-color: white;
|
||
border-radius: 5px;
|
||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.health-record-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 10px;
|
||
padding-bottom: 10px;
|
||
border-bottom: 1px solid var(--border-color);
|
||
}
|
||
|
||
.health-record-title {
|
||
font-weight: bold;
|
||
color: var(--secondary-color);
|
||
}
|
||
|
||
.health-record-date {
|
||
color: var(--gray-color);
|
||
font-size: 14px;
|
||
}
|
||
|
||
.health-record-content {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 20px;
|
||
}
|
||
|
||
.health-record-section {
|
||
flex: 1;
|
||
min-width: 250px;
|
||
}
|
||
|
||
.health-record-section h4 {
|
||
margin-top: 0;
|
||
color: var(--secondary-color);
|
||
border-bottom: 1px solid var(--border-color);
|
||
padding-bottom: 5px;
|
||
}
|
||
|
||
.health-record-item {
|
||
display: flex;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.health-record-label {
|
||
width: 120px;
|
||
font-weight: bold;
|
||
color: #555;
|
||
}
|
||
|
||
.health-record-value {
|
||
flex: 1;
|
||
}
|
||
|
||
.badge {
|
||
display: inline-block;
|
||
padding: 3px 8px;
|
||
border-radius: 10px;
|
||
font-size: 12px;
|
||
font-weight: bold;
|
||
margin-left: 5px;
|
||
}
|
||
|
||
.badge-success {
|
||
background-color: var(--success-color);
|
||
color: white;
|
||
}
|
||
|
||
.badge-warning {
|
||
background-color: var(--warning-color);
|
||
color: white;
|
||
}
|
||
|
||
.badge-danger {
|
||
background-color: var(--danger-color);
|
||
color: white;
|
||
}
|
||
|
||
.badge-info {
|
||
background-color: #17a2b8;
|
||
color: white;
|
||
}
|
||
|
||
.alert {
|
||
padding: 10px 15px;
|
||
border-radius: 4px;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.alert-warning {
|
||
background-color: #fff3cd;
|
||
color: #856404;
|
||
border-left: 4px solid var(--warning-color);
|
||
}
|
||
|
||
.alert-info {
|
||
background-color: #d1ecf1;
|
||
color: #0c5460;
|
||
border-left: 4px solid #17a2b8;
|
||
}
|
||
|
||
.toggle-sidebar {
|
||
display: none;
|
||
background: none;
|
||
border: none;
|
||
color: white;
|
||
font-size: 20px;
|
||
cursor: pointer;
|
||
margin-right: 15px;
|
||
}
|
||
|
||
@media (max-width: 992px) {
|
||
.sidebar {
|
||
width: 60px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.sidebar-menu li span {
|
||
display: none;
|
||
}
|
||
|
||
.sidebar-menu li i {
|
||
margin-right: 0;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.sidebar.expanded {
|
||
width: 220px;
|
||
}
|
||
|
||
.sidebar.expanded .sidebar-menu li span {
|
||
display: inline;
|
||
}
|
||
|
||
.toggle-sidebar {
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.container {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.sidebar {
|
||
width: 100%;
|
||
padding: 10px 0;
|
||
}
|
||
|
||
.sidebar-menu {
|
||
display: flex;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.sidebar-menu li {
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.sidebar.expanded .sidebar-menu {
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.main-content {
|
||
padding: 15px;
|
||
}
|
||
|
||
.stat-cards {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.health-record-content {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.modal-content {
|
||
width: 90%;
|
||
margin: 20px auto;
|
||
}
|
||
}
|
||
</style>
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
|
||
</head>
|
||
<body>
|
||
<div class="header">
|
||
<div>
|
||
<button class="toggle-sidebar" onclick="toggleSidebar()">
|
||
<i class="fas fa-bars"></i>
|
||
</button>
|
||
<h1>员工保险与健康管理系统</h1>
|
||
</div>
|
||
<div class="user-info">
|
||
<span id="current-username">张三 (EMP001)</span>
|
||
<button class="logout-btn" onclick="logout()">
|
||
<i class="fas fa-sign-out-alt"></i> 退出
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="container">
|
||
<div class="sidebar" id="sidebar">
|
||
<ul class="sidebar-menu" id="admin-menu">
|
||
<li class="active" data-target="dashboard">
|
||
<i class="fas fa-tachometer-alt"></i>
|
||
<span>工作台</span>
|
||
</li>
|
||
<li data-target="insurance">
|
||
<i class="fas fa-shield-alt"></i>
|
||
<span>我的保险</span>
|
||
</li>
|
||
<li data-target="health">
|
||
<i class="fas fa-heartbeat"></i>
|
||
<span>健康档案</span>
|
||
</li>
|
||
<li data-target="documents">
|
||
<i class="fas fa-file-alt"></i>
|
||
<span>保单文件</span>
|
||
</li>
|
||
<li data-target="profile">
|
||
<i class="fas fa-user"></i>
|
||
<span>个人信息</span>
|
||
</li>
|
||
<li data-target="password">
|
||
<i class="fas fa-key"></i>
|
||
<span>修改密码</span>
|
||
</li>
|
||
</ul>
|
||
|
||
<ul class="sidebar-menu" id="employee-menu" style="display: none;">
|
||
<li class="active" data-target="dashboard">
|
||
<i class="fas fa-tachometer-alt"></i>
|
||
<span>工作台</span>
|
||
</li>
|
||
<li data-target="insurance">
|
||
<i class="fas fa-shield-alt"></i>
|
||
<span>我的保险</span>
|
||
</li>
|
||
<li data-target="health">
|
||
<i class="fas fa-heartbeat"></i>
|
||
<span>健康档案</span>
|
||
</li>
|
||
<li data-target="documents">
|
||
<i class="fas fa-file-alt"></i>
|
||
<span>保单文件</span>
|
||
</li>
|
||
<li data-target="profile">
|
||
<i class="fas fa-user"></i>
|
||
<span>个人信息</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="main-content" id="main-content">
|
||
<!-- 工作台 -->
|
||
<div id="dashboard" class="tab-content active">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h2><i class="fas fa-tachometer-alt"></i> 工作台概览</h2>
|
||
</div>
|
||
|
||
<div id="admin-dashboard">
|
||
<div class="stat-cards">
|
||
<div class="stat-card">
|
||
<h3>员工总数</h3>
|
||
<div class="value">156</div>
|
||
<div class="trend">↑ 5% 较上月</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<h3>有效保单</h3>
|
||
<div class="value">142</div>
|
||
<div class="trend">↑ 3% 较上月</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<h3>即将到期</h3>
|
||
<div class="value">23</div>
|
||
<div class="trend down">↑ 5% 较上月</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<h3>年度总保费</h3>
|
||
<div class="value">¥ 1,256,800</div>
|
||
<div class="trend">↑ 8% 较上年</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="filter-bar">
|
||
<select>
|
||
<option>全部部门</option>
|
||
<option>人事部</option>
|
||
<option>技术部</option>
|
||
<option>市场部</option>
|
||
<option>财务部</option>
|
||
</select>
|
||
<button class="btn btn-primary">
|
||
<i class="fas fa-filter"></i> 筛选
|
||
</button>
|
||
<button class="btn btn-success">
|
||
<i class="fas fa-file-excel"></i> 导出Excel
|
||
</button>
|
||
</div>
|
||
|
||
<div class="alert alert-warning">
|
||
<i class="fas fa-exclamation-triangle"></i> 您有 <strong>3份</strong> 保险即将在30天内到期，请及时处理。
|
||
</div>
|
||
|
||
<div class="chart-container">
|
||
<img src="https://via.placeholder.com/1200x400?text=保险类型分布图表" alt="保险类型分布图表" style="width:100%; border:1px solid #eee; border-radius:5px;">
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h2><i class="fas fa-bell"></i> 待办事项</h2>
|
||
</div>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>事项</th>
|
||
<th>相关员工</th>
|
||
<th>截止日期</th>
|
||
<th>状态</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>张三-医疗保险续保</td>
|
||
<td>张三 (EMP001)</td>
|
||
<td>2023-12-15</td>
|
||
<td class="status-warning">即将到期</td>
|
||
<td>
|
||
<button class="btn btn-primary btn-sm">
|
||
<i class="fas fa-edit"></i> 处理
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>李四-意外险续保</td>
|
||
<td>李四 (EMP002)</td>
|
||
<td>2023-12-20</td>
|
||
<td class="status-warning">即将到期</td>
|
||
<td>
|
||
<button class="btn btn-primary btn-sm">
|
||
<i class="fas fa-edit"></i> 处理
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>王五-体检报告审核</td>
|
||
<td>王五 (EMP003)</td>
|
||
<td>2023-11-30</td>
|
||
<td class="status-danger">已过期</td>
|
||
<td>
|
||
<button class="btn btn-primary btn-sm">
|
||
<i class="fas fa-edit"></i> 处理
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="employee-dashboard" style="display: none;">
|
||
<div class="stat-cards">
|
||
<div class="stat-card">
|
||
<h3>我的保险</h3>
|
||
<div class="value">3</div>
|
||
<div class="trend">全部有效</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<h3>最近体检</h3>
|
||
<div class="value">2023-10-15</div>
|
||
<div class="trend">正常</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<h3>即将到期</h3>
|
||
<div class="value">1</div>
|
||
<div class="trend down">医疗保险</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<h3>健康评分</h3>
|
||
<div class="value">86</div>
|
||
<div class="trend">↑ 2% 较上月</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="alert alert-warning">
|
||
<i class="fas fa-exclamation-triangle"></i> 您的医疗保险将于 <strong>15天</strong> 后到期，请及时联系HR处理续保事宜。
|
||
</div>
|
||
|
||
<div class="alert alert-info">
|
||
<i class="fas fa-info-circle"></i> 您的下一次体检安排在 <strong>2024-04-15</strong>，请提前做好准备。
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h2><i class="fas fa-bell"></i> 我的提醒</h2>
|
||
</div>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>事项</th>
|
||
<th>日期</th>
|
||
<th>状态</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>医疗保险续保</td>
|
||
<td>2023-12-15</td>
|
||
<td class="status-warning">即将到期</td>
|
||
<td>
|
||
<button class="btn btn-primary btn-sm">
|
||
<i class="fas fa-info-circle"></i> 详情
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>年度体检</td>
|
||
<td>2024-04-15</td>
|
||
<td class="status-active">待安排</td>
|
||
<td>
|
||
<button class="btn btn-primary btn-sm">
|
||
<i class="fas fa-info-circle"></i> 详情
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>健康问卷</td>
|
||
<td>2023-12-01</td>
|
||
<td class="status-pending">待完成</td>
|
||
<td>
|
||
<button class="btn btn-primary btn-sm">
|
||
<i class="fas fa-edit"></i> 填写
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 我的保险 -->
|
||
<div id="insurance" class="tab-content">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h2><i class="fas fa-shield-alt"></i> 我的保险信息</h2>
|
||
<button class="btn btn-success" id="add-insurance-btn" style="display: none;">
|
||
<i class="fas fa-plus"></i> 添加保险
|
||
</button>
|
||
</div>
|
||
|
||
<div id="admin-insurance-view" style="display: none;">
|
||
<div class="search-bar">
|
||
<input type="text" placeholder="搜索员工姓名、工号或保单号...">
|
||
<button class="btn btn-primary">
|
||
<i class="fas fa-search"></i> 搜索
|
||
</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 btn-sm">
|
||
<i class="fas fa-edit"></i> 编辑
|
||
</button>
|
||
<button class="btn btn-danger btn-sm">
|
||
<i class="fas fa-trash"></i> 删除
|
||
</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 btn-sm">
|
||
<i class="fas fa-edit"></i> 编辑
|
||
</button>
|
||
<button class="btn btn-danger btn-sm">
|
||
<i class="fas fa-trash"></i> 删除
|
||
</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 btn-sm">
|
||
<i class="fas fa-edit"></i> 编辑
|
||
</button>
|
||
<button class="btn btn-danger btn-sm">
|
||
<i class="fas fa-trash"></i> 删除
|
||
</button>
|
||
<button class="btn btn-warning btn-sm">
|
||
<i class="fas fa-sync-alt"></i> 续保
|
||
</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 id="employee-insurance-view">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>保险公司</th>
|
||
<th>保险类型</th>
|
||
<th>保单号</th>
|
||
<th>生效日期</th>
|
||
<th>到期日期</th>
|
||
<th>状态</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>中国人寿</td>
|
||
<td>医疗保险</td>
|
||
<td>CL12345678</td>
|
||
<td>2023-01-01</td>
|
||
<td>2023-12-31</td>
|
||
<td class="status-active">有效</td>
|
||
<td>
|
||
<button class="btn btn-primary btn-sm" onclick="toggleDetail('detail1')">
|
||
<i class="fas fa-eye"></i> 查看详情
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td colspan="7">
|
||
<div id="detail1" class="insurance-detail">
|
||
<div class="detail-row">
|
||
<div class="detail-label">保费:</div>
|
||
<div class="detail-value">¥ 8,500/年 (公司承担¥6,800，个人承担¥1,700)</div>
|
||
</div>
|
||
<div class="detail-row">
|
||
<div class="detail-label">保额:</div>
|
||
<div class="detail-value">¥ 500,000</div>
|
||
</div>
|
||
<div class="detail-row">
|
||
<div class="detail-label">受益人:</div>
|
||
<div class="detail-value">张三本人</div>
|
||
</div>
|
||
<div class="detail-row">
|
||
<div class="detail-label">缴费方式:</div>
|
||
<div class="detail-value">年缴</div>
|
||
</div>
|
||
<div class="detail-row">
|
||
<div class="detail-label">备注:</div>
|
||
<div class="detail-value">包含门诊和住院医疗，无免赔额</div>
|
||
</div>
|
||
|
||
<div class="policy-benefits">
|
||
<h4>保障内容:</h4>
|
||
<div class="benefit-item">
|
||
<span>住院医疗费用报销</span>
|
||
<span class="text-success">最高¥200,000 (90%报销)</span>
|
||
</div>
|
||
<div class="benefit-item">
|
||
<span>门诊医疗费用报销</span>
|
||
<span class="text-success">最高¥50,000 (80%报销)</span>
|
||
</div>
|
||
<div class="benefit-item">
|
||
<span>重大疾病保障</span>
|
||
<span class="text-success">一次性给付¥300,000 (涵盖30种重疾)</span>
|
||
</div>
|
||
<div class="benefit-item">
|
||
<span>住院津贴</span>
|
||
<span class="text-warning">¥200/天(最高90天)</span>
|
||
</div>
|
||
<div class="benefit-item">
|
||
<span>年度体检</span>
|
||
<span class="text-success">免费基础体检1次/年</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>平安保险</td>
|
||
<td>意外险</td>
|
||
<td>PA87654321</td>
|
||
<td>2023-01-01</td>
|
||
<td>2023-12-31</td>
|
||
<td class="status-active">有效</td>
|
||
<td>
|
||
<button class="btn btn-primary btn-sm" onclick="toggleDetail('detail2')">
|
||
<i class="fas fa-eye"></i> 查看详情
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td colspan="7">
|
||
<div id="detail2" class="insurance-detail">
|
||
<div class="detail-row">
|
||
<div class="detail-label">保费:</div>
|
||
<div class="detail-value">¥ 1,200/年 (公司全额承担)</div>
|
||
</div>
|
||
<div class="detail-row">
|
||
<div class="detail-label">保额:</div>
|
||
<div class="detail-value">¥ 1,000,000</div>
|
||
</div>
|
||
<div class="detail-row">
|
||
<div class="detail-label">受益人:</div>
|
||
<div class="detail-value">张三本人、配偶、子女</div>
|
||
</div>
|
||
<div class="detail-row">
|
||
<div class="detail-label">保障地区:</div>
|
||
<div class="detail-value">全球范围(战争地区除外)</div>
|
||
</div>
|
||
|
||
<div class="policy-benefits">
|
||
<h4>保障内容:</h4>
|
||
<div class="benefit-item">
|
||
<span>意外身故/全残</span>
|
||
<span class="text-success">¥1,000,000</span>
|
||
</div>
|
||
<div class="benefit-item">
|
||
<span>意外医疗费用</span>
|
||
<span class="text-success">¥50,000 (100%报销)</span>
|
||
</div>
|
||
<div class="benefit-item">
|
||
<span>意外住院津贴</span>
|
||
<span class="text-warning">¥150/天(最高180天)</span>
|
||
</div>
|
||
<div class="benefit-item">
|
||
<span>公共交通意外</span>
|
||
<span class="text-success">额外¥500,000</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>泰康保险</td>
|
||
<td>养老保险</td>
|
||
<td>TK33445566</td>
|
||
<td>2022-01-01</td>
|
||
<td>2042-12-31</td>
|
||
<td class="status-active">有效</td>
|
||
<td>
|
||
<button class="btn btn-primary btn-sm" onclick="toggleDetail('detail3')">
|
||
<i class="fas fa-eye"></i> 查看详情
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td colspan="7">
|
||
<div id="detail3" class="insurance-detail">
|
||
<div class="detail-row">
|
||
<div class="detail-label">保费:</div>
|
||
<div class="detail-value">¥ 12,000/年 (公司承担¥6,000，个人承担¥6,000)</div>
|
||
</div>
|
||
<div class="detail-row">
|
||
<div class="detail-label">保额:</div>
|
||
<div class="detail-value">退休后每月¥3,000 (保证领取20年)</div>
|
||
</div>
|
||
<div class="detail-row">
|
||
<div class="detail-label">受益人:</div>
|
||
<div class="detail-value">张三本人</div>
|
||
</div>
|
||
<div class="detail-row">
|
||
<div class="detail-label">缴费期限:</div>
|
||
<div class="detail-value">20年 (已缴1年)</div>
|
||
</div>
|
||
<div class="detail-row">
|
||
<div class="detail-label">预计退休金:</div>
|
||
<div class="detail-value text-success">¥3,000/月 (按当前标准)</div>
|
||
</div>
|
||
|
||
<div class="policy-benefits">
|
||
<h4>保障内容:</h4>
|
||
<div class="benefit-item">
|
||
<span>养老金</span>
|
||
<span class="text-success">60岁起每月领取¥3,000</span>
|
||
</div>
|
||
<div class="benefit-item">
|
||
<span>身故保障</span>
|
||
<span class="text-success">缴费期内身故返还已缴保费120%</span>
|
||
</div>
|
||
<div class="benefit-item">
|
||
<span>全残保障</span>
|
||
<span class="text-success">缴费期内全残免缴后续保费</span>
|
||
</div>
|
||
<div class="benefit-item">
|
||
<span>分红权益</span>
|
||
<span class="text-warning">参与公司盈利分配(浮动)</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 健康档案 -->
|
||
<div id="health" class="tab-content">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h2><i class="fas fa-heartbeat"></i> 健康档案</h2>
|
||
<button class="btn btn-success" id="add-health-btn">
|
||
<i class="fas fa-plus"></i> 添加记录
|
||
</button>
|
||
</div>
|
||
|
||
<div id="admin-health-view" style="display: none;">
|
||
<div class="search-bar">
|
||
<input type="text" placeholder="搜索员工姓名或工号...">
|
||
<button class="btn btn-primary">
|
||
<i class="fas fa-search"></i> 搜索
|
||
</button>
|
||
</div>
|
||
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>员工姓名</th>
|
||
<th>工号</th>
|
||
<th>最近体检日期</th>
|
||
<th>体检医院</th>
|
||
<th>体检结果</th>
|
||
<th>下次体检日期</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>张三</td>
|
||
<td>EMP001</td>
|
||
<td>2023-10-15</td>
|
||
<td>北京协和医院</td>
|
||
<td><span class="badge badge-success">正常</span></td>
|
||
<td>2024-10-15</td>
|
||
<td>
|
||
<button class="btn btn-primary btn-sm">
|
||
<i class="fas fa-eye"></i> 查看
|
||
</button>
|
||
<button class="btn btn-info btn-sm">
|
||
<i class="fas fa-edit"></i> 编辑
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>李四</td>
|
||
<td>EMP002</td>
|
||
<td>2023-09-20</td>
|
||
<td>上海瑞金医院</td>
|
||
<td><span class="badge badge-warning">轻度异常</span></td>
|
||
<td>2024-03-20</td>
|
||
<td>
|
||
<button class="btn btn-primary btn-sm">
|
||
<i class="fas fa-eye"></i> 查看
|
||
</button>
|
||
<button class="btn btn-info btn-sm">
|
||
<i class="fas fa-edit"></i> 编辑
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>王五</td>
|
||
<td>EMP003</td>
|
||
<td>2023-08-10</td>
|
||
<td>广州中山医院</td>
|
||
<td><span class="badge badge-danger">异常</span></td>
|
||
<td>2023-11-10</td>
|
||
<td>
|
||
<button class="btn btn-primary btn-sm">
|
||
<i class="fas fa-eye"></i> 查看
|
||
</button>
|
||
<button class="btn btn-info btn-sm">
|
||
<i class="fas fa-edit"></i> 编辑
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div id="employee-health-view">
|
||
<div class="health-record">
|
||
<div class="health-record-header">
|
||
<div class="health-record-title">
|
||
2023年度体检报告
|
||
<span class="badge badge-success">正常</span>
|
||
</div>
|
||
<div class="health-record-date">
|
||
体检日期: 2023-10-15 | 有效期至: 2024-10-15
|
||
</div>
|
||
</div>
|
||
<div class="health-record-content">
|
||
<div class="health-record-section">
|
||
<h4><i class="fas fa-hospital"></i> 基本信息</h4>
|
||
<div class="health-record-item">
|
||
<div class="health-record-label">体检医院:</div>
|
||
<div class="health-record-value">北京协和医院</div>
|
||
</div>
|
||
<div class="health-record-item">
|
||
<div class="health-record-label">体检套餐:</div>
|
||
<div class="health-record-value">高级管理人员套餐</div>
|
||
</div>
|
||
<div class="health-record-item">
|
||
<div class="health-record-label">总评:</div>
|
||
<div class="health-record-value">健康状况良好，无明显异常</div>
|
||
</div>
|
||
<div class="health-record-item">
|
||
<div class="health-record-label">建议:</div>
|
||
<div class="health-record-value">保持规律作息，适量运动，控制饮食</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="health-record-section">
|
||
<h4><i class="fas fa-flask"></i> 检验结果</h4>
|
||
<div class="health-record-item">
|
||
<div class="health-record-label">血常规:</div>
|
||
<div class="health-record-value">正常</div>
|
||
</div>
|
||
<div class="health-record-item">
|
||
<div class="health-record-label">尿常规:</div>
|
||
<div class="health-record-value">正常</div>
|
||
</div>
|
||
<div class="health-record-item">
|
||
<div class="health-record-label">肝功能:</div>
|
||
<div class="health-record-value">正常</div>
|
||
</div>
|
||
<div class="health-record-item">
|
||
<div class="health-record-label">肾功能:</div>
|
||
<div class="health-record-value">正常</div>
|
||
</div>
|
||
<div class="health-record-item">
|
||
<div class="health-record-label">血脂:</div>
|
||
<div class="health-record-value">
|
||
总胆固醇 5.2 mmol/L <span class="badge badge-warning">偏高</span>
|
||
</div>
|
||
</div>
|
||
<div class="health-record-item">
|
||
<div class="health-record-label">血糖:</div>
|
||
<div class="health-record-value">5.1 mmol/L (正常)</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="health-record-section">
|
||
<h4><i class="fas fa-procedures"></i> 检查结果</h4>
|
||
<div class="health-record-item">
|
||
<div class="health-record-label">心电图:</div>
|
||
<div class="health-record-value">窦性心律，正常心电图</div>
|
||
</div>
|
||
<div class="health-record-item">
|
||
<div class="health-record-label">胸部X光:</div>
|
||
<div class="health-record-value">心肺膈未见明显异常</div>
|
||
</div>
|
||
<div class="health-record-item">
|
||
<div class="health-record-label">腹部B超:</div>
|
||
<div class="health-record-value">肝胆胰脾肾未见明显异常</div>
|
||
</div>
|
||
<div class="health-record-item">
|
||
<div class="health-record-label">眼科检查:</div>
|
||
<div class="health-record-value">
|
||
视力: 左眼1.0，右眼1.2
|
||
<span class="badge badge-warning">轻度视疲劳</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="health-record">
|
||
<div class="health-record-header">
|
||
<div class="health-record-title">
|
||
2022年度体检报告
|
||
<span class="badge badge-success">正常</span>
|
||
</div>
|
||
<div class="health-record-date">
|
||
体检日期: 2022-10-20 | 有效期至: 2023-10-20
|
||
</div>
|
||
</div>
|
||
<div class="health-record-content">
|
||
<div class="health-record-section">
|
||
<h4><i class="fas fa-hospital"></i> 基本信息</h4>
|
||
<div class="health-record-item">
|
||
<div class="health-record-label">体检医院:</div>
|
||
<div class="health-record-value">北京协和医院</div>
|
||
</div>
|
||
<div class="health-record-item">
|
||
<div class="health-record-label">体检套餐:</div>
|
||
<div class="health-record-value">高级管理人员套餐</div>
|
||
</div>
|
||
<div class="health-record-item">
|
||
<div class="health-record-label">总评:</div>
|
||
<div class="health-record-value">健康状况良好</div>
|
||
</div>
|
||
<div class="health-record-item">
|
||
<div class="health-record-label">建议:</div>
|
||
<div class="health-record-value">注意控制体重，减少高脂饮食</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="health-record-section">
|
||
<h4><i class="fas fa-flask"></i> 检验结果</h4>
|
||
<div class="health-record-item">
|
||
<div class="health-record-label">血常规:</div>
|
||
<div class="health-record-value">正常</div>
|
||
</div>
|
||
<div class="health-record-item">
|
||
<div class="health-record-label">尿常规:</div>
|
||
<div class="health-record-value">正常</div>
|
||
</div>
|
||
<div class="health-record-item">
|
||
<div class="health-record-label">肝功能:</div>
|
||
<div class="health-record-value">正常</div>
|
||
</div>
|
||
<div class="health-record-item">
|
||
<div class="health-record-label">肾功能:</div>
|
||
<div class="health-record-value">正常</div>
|
||
</div>
|
||
<div class="health-record-item">
|
||
<div class="health-record-label">血脂:</div>
|
||
<div class="health-record-value">
|
||
总胆固醇 5.0 mmol/L <span class="badge badge-warning">偏高</span>
|
||
</div>
|
||
</div>
|
||
<div class="health-record-item">
|
||
<div class="health-record-label">血糖:</div>
|
||
<div class="health-record-value">5.0 mmol/L (正常)</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 保单文件 -->
|
||
<div id="documents" class="tab-content">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h2><i class="fas fa-file-alt"></i> 保单文件</h2>
|
||
<button class="btn btn-success" id="upload-document-btn">
|
||
<i class="fas fa-upload"></i> 上传文件
|
||
</button>
|
||
</div>
|
||
|
||
<div id="admin-documents-view" style="display: none;">
|
||
<div class="search-bar">
|
||
<input type="text" placeholder="搜索员工姓名、工号或文件名...">
|
||
<button class="btn btn-primary">
|
||
<i class="fas fa-search"></i> 搜索
|
||
</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 btn-sm">
|
||
<i class="fas fa-eye"></i> 查看
|
||
</button>
|
||
<button class="btn btn-success btn-sm">
|
||
<i class="fas fa-download"></i> 下载
|
||
</button>
|
||
<button class="btn btn-danger btn-sm">
|
||
<i class="fas fa-trash"></i> 删除
|
||
</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 btn-sm">
|
||
<i class="fas fa-eye"></i> 查看
|
||
</button>
|
||
<button class="btn btn-success btn-sm">
|
||
<i class="fas fa-download"></i> 下载
|
||
</button>
|
||
<button class="btn btn-danger btn-sm">
|
||
<i class="fas fa-trash"></i> 删除
|
||
</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 btn-sm">
|
||
<i class="fas fa-eye"></i> 查看
|
||
</button>
|
||
<button class="btn btn-success btn-sm">
|
||
<i class="fas fa-download"></i> 下载
|
||
</button>
|
||
<button class="btn btn-danger btn-sm">
|
||
<i class="fas fa-trash"></i> 删除
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div id="employee-documents-view">
|
||
<ul class="file-list">
|
||
<li class="file-item">
|
||
<div>
|
||
<span class="file-icon">📄</span>
|
||
<span>中国人寿-医疗保险-保单.pdf</span>
|
||
<small class="text-muted">上传于 2023-01-05</small>
|
||
</div>
|
||
<div>
|
||
<button class="btn btn-primary btn-sm">
|
||
<i class="fas fa-eye"></i> 查看
|
||
</button>
|
||
<button class="btn btn-success btn-sm">
|
||
<i class="fas fa-download"></i> 下载
|
||
</button>
|
||
</div>
|
||
</li>
|
||
<li class="file-item">
|
||
<div>
|
||
<span class="file-icon">📄</span>
|
||
<span>平安保险-意外险-保单.pdf</span>
|
||
<small class="text-muted">上传于 2023-01-05</small>
|
||
</div>
|
||
<div>
|
||
<button class="btn btn-primary btn-sm">
|
||
<i class="fas fa-eye"></i> 查看
|
||
</button>
|
||
<button class="btn btn-success btn-sm">
|
||
<i class="fas fa-download"></i> 下载
|
||
</button>
|
||
</div>
|
||
</li>
|
||
<li class="file-item">
|
||
<div>
|
||
<span class="file-icon">📄</span>
|
||
<span>泰康保险-养老保险-保单.pdf</span>
|
||
<small class="text-muted">上传于 2022-01-05</small>
|
||
</div>
|
||
<div>
|
||
<button class="btn btn-primary btn-sm">
|
||
<i class="fas fa-eye"></i> 查看
|
||
</button>
|
||
<button class="btn btn-success btn-sm">
|
||
<i class="fas fa-download"></i> 下载
|
||
</button>
|
||
</div>
|
||
</li>
|
||
<li class="file-item">
|
||
<div>
|
||
<span class="file-icon">📄</span>
|
||
<span>保险条款说明.docx</span>
|
||
<small class="text-muted">上传于 2022-01-10</small>
|
||
</div>
|
||
<div>
|
||
<button class="btn btn-primary btn-sm">
|
||
<i class="fas fa-eye"></i> 查看
|
||
</button>
|
||
<button class="btn btn-success btn-sm">
|
||
<i class="fas fa-download"></i> 下载
|
||
</button>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 个人信息 -->
|
||
<div id="profile" class="tab-content">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h2><i class="fas fa-user"></i> 个人信息</h2>
|
||
<button class="btn btn-primary" id="edit-profile-btn">
|
||
<i class="fas fa-edit"></i> 编辑信息
|
||
</button>
|
||
</div>
|
||
|
||
<div class="profile-section">
|
||
<div class="profile-avatar">
|
||
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="员工头像">
|
||
</div>
|
||
<div class="profile-info">
|
||
<div class="profile-name" id="profile-name">张三</div>
|
||
<div class="profile-meta">
|
||
<span id="profile-empid">EMP001</span> |
|
||
<span id="profile-dept">技术部</span> |
|
||
<span id="profile-position">高级软件工程师</span>
|
||
</div>
|
||
<div class="profile-actions">
|
||
<button class="btn btn-primary btn-sm">
|
||
<i class="fas fa-camera"></i> 更换头像
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<table class="info-table">
|
||
<tr>
|
||
<td>员工编号</td>
|
||
<td id="employee-id">EMP001</td>
|
||
</tr>
|
||
<tr>
|
||
<td>部门</td>
|
||
<td id="department">技术部</td>
|
||
</tr>
|
||
<tr>
|
||
<td>职位</td>
|
||
<td id="position">高级软件工程师</td>
|
||
</tr>
|
||
<tr>
|
||
<td>入职日期</td>
|
||
<td id="hire-date">2020-05-15</td>
|
||
</tr>
|
||
<tr>
|
||
<td>联系电话</td>
|
||
<td id="phone">13800138001</td>
|
||
</tr>
|
||
<tr>
|
||
<td>电子邮箱</td>
|
||
<td id="email">zhangsan@company.com</td>
|
||
</tr>
|
||
<tr>
|
||
<td>身份证号</td>
|
||
<td id="id-card">**************1234</td>
|
||
</tr>
|
||
<tr>
|
||
<td>联系地址</td>
|
||
<td id="address">北京市海淀区中关村软件园1号楼</td>
|
||
</tr>
|
||
<tr>
|
||
<td>紧急联系人</td>
|
||
<td id="emergency-contact">李四 (配偶) 13800138002</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 修改密码 -->
|
||
<div id="password" class="tab-content">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h2><i class="fas fa-key"></i> 修改密码</h2>
|
||
</div>
|
||
|
||
<form id="change-password-form">
|
||
<div class="form-group">
|
||
<label for="current-password">当前密码</label>
|
||
<input type="password" id="current-password" placeholder="请输入当前密码" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="new-password">新密码</label>
|
||
<input type="password" id="new-password" placeholder="请输入新密码" required>
|
||
<small class="text-muted">密码长度至少8位，包含字母和数字</small>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="confirm-password">确认新密码</label>
|
||
<input type="password" id="confirm-password" placeholder="请再次输入新密码" required>
|
||
</div>
|
||
<div class="form-actions">
|
||
<button type="reset" class="btn btn-danger">
|
||
<i class="fas fa-times"></i> 重置
|
||
</button>
|
||
<button type="submit" class="btn btn-success">
|
||
<i class="fas fa-check"></i> 保存
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 系统设置 (仅管理员可见) -->
|
||
<div id="settings" class="tab-content">
|
||
<div class="card">
|
||
<div class="tabs">
|
||
<div class="tab active" onclick="switchSettingsTab('users')">用户管理</div>
|
||
<div class="tab" onclick="switchSettingsTab('companies')">保险公司管理</div>
|
||
<div class="tab" onclick="switchSettingsTab('types')">保险类型管理</div>
|
||
<div class="tab" onclick="switchSettingsTab('system')">系统配置</div>
|
||
</div>
|
||
|
||
<div id="settings-users" class="settings-tab-content active">
|
||
<div class="card-header">
|
||
<h2><i class="fas fa-users"></i> 用户列表</h2>
|
||
<button class="btn btn-success" onclick="showAddUserModal()">
|
||
<i class="fas fa-plus"></i> 添加用户
|
||
</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 btn-sm">
|
||
<i class="fas fa-edit"></i> 编辑
|
||
</button>
|
||
<button class="btn btn-danger btn-sm">
|
||
<i class="fas fa-ban"></i> 禁用
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>zhangsan</td>
|
||
<td>张三</td>
|
||
<td>员工</td>
|
||
<td>技术部</td>
|
||
<td>EMP001</td>
|
||
<td>激活</td>
|
||
<td>
|
||
<button class="btn btn-primary btn-sm">
|
||
<i class="fas fa-edit"></i> 编辑
|
||
</button>
|
||
<button class="btn btn-danger btn-sm">
|
||
<i class="fas fa-ban"></i> 禁用
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>lisi</td>
|
||
<td>李四</td>
|
||
<td>员工</td>
|
||
<td>市场部</td>
|
||
<td>EMP002</td>
|
||
<td>激活</td>
|
||
<td>
|
||
<button class="btn btn-primary btn-sm">
|
||
<i class="fas fa-edit"></i> 编辑
|
||
</button>
|
||
<button class="btn btn-danger btn-sm">
|
||
<i class="fas fa-ban"></i> 禁用
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>wangwu</td>
|
||
<td>王五</td>
|
||
<td>员工</td>
|
||
<td>财务部</td>
|
||
<td>EMP003</td>
|
||
<td>已禁用</td>
|
||
<td>
|
||
<button class="btn btn-primary btn-sm">
|
||
<i class="fas fa-edit"></i> 编辑
|
||
</button>
|
||
<button class="btn btn-success btn-sm">
|
||
<i class="fas fa-check"></i> 激活
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div id="settings-companies" class="settings-tab-content">
|
||
<div class="card-header">
|
||
<h2><i class="fas fa-building"></i> 保险公司管理</h2>
|
||
<button class="btn btn-success" onclick="showAddCompanyModal()">
|
||
<i class="fas fa-plus"></i> 添加保险公司
|
||
</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 btn-sm">
|
||
<i class="fas fa-edit"></i> 编辑
|
||
</button>
|
||
<button class="btn btn-danger btn-sm">
|
||
<i class="fas fa-times"></i> 终止合作
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>平安保险</td>
|
||
<td>李经理</td>
|
||
<td>13800138002</td>
|
||
<td>合作中</td>
|
||
<td>
|
||
<button class="btn btn-primary btn-sm">
|
||
<i class="fas fa-edit"></i> 编辑
|
||
</button>
|
||
<button class="btn btn-danger btn-sm">
|
||
<i class="fas fa-times"></i> 终止合作
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>太平洋保险</td>
|
||
<td>王经理</td>
|
||
<td>13800138003</td>
|
||
<td>合作中</td>
|
||
<td>
|
||
<button class="btn btn-primary btn-sm">
|
||
<i class="fas fa-edit"></i> 编辑
|
||
</button>
|
||
<button class="btn btn-danger btn-sm">
|
||
<i class="fas fa-times"></i> 终止合作
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div id="settings-types" class="settings-tab-content">
|
||
<div class="card-header">
|
||
<h2><i class="fas fa-list-alt"></i> 保险类型管理</h2>
|
||
<button class="btn btn-success" onclick="showAddInsuranceTypeModal()">
|
||
<i class="fas fa-plus"></i> 添加保险类型
|
||
</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 btn-sm">
|
||
<i class="fas fa-edit"></i> 编辑
|
||
</button>
|
||
<button class="btn btn-danger btn-sm">
|
||
<i class="fas fa-trash"></i> 删除
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>意外险</td>
|
||
<td>员工意外伤害保障</td>
|
||
<td>
|
||
<button class="btn btn-primary btn-sm">
|
||
<i class="fas fa-edit"></i> 编辑
|
||
</button>
|
||
<button class="btn btn-danger btn-sm">
|
||
<i class="fas fa-trash"></i> 删除
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>养老保险</td>
|
||
<td>员工退休养老保障</td>
|
||
<td>
|
||
<button class="btn btn-primary btn-sm">
|
||
<i class="fas fa-edit"></i> 编辑
|
||
</button>
|
||
<button class="btn btn-danger btn-sm">
|
||
<i class="fas fa-trash"></i> 删除
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>重大疾病险</td>
|
||
<td>员工重大疾病保障</td>
|
||
<td>
|
||
<button class="btn btn-primary btn-sm">
|
||
<i class="fas fa-edit"></i> 编辑
|
||
</button>
|
||
<button class="btn btn-danger btn-sm">
|
||
<i class="fas fa-trash"></i> 删除
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div id="settings-system" class="settings-tab-content">
|
||
<div class="card-header">
|
||
<h2><i class="fas fa-cog"></i> 系统配置</h2>
|
||
</div>
|
||
<form>
|
||
<div class="form-group">
|
||
<label for="system-name">系统名称</label>
|
||
<input type="text" id="system-name" value="员工保险与健康管理系统">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="company-name">公司名称</label>
|
||
<input type="text" id="company-name" value="某某科技有限公司">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="expire-warning">保险到期提前提醒天数</label>
|
||
<input type="number" id="expire-warning" value="30">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="health-check-interval">体检间隔(月)</label>
|
||
<input type="number" id="health-check-interval" value="12">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="backup-frequency">数据备份频率</label>
|
||
<select id="backup-frequency">
|
||
<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">
|
||
<i class="fas fa-times"></i> 重置
|
||
</button>
|
||
<button type="submit" class="btn btn-success">
|
||
<i class="fas fa-check"></i> 保存配置
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 添加保险模态框 -->
|
||
<div id="addInsuranceModal" class="modal">
|
||
<div class="modal-content">
|
||
<span class="close" onclick="hideModal('addInsuranceModal')">×</span>
|
||
<h2><i class="fas fa-plus-circle"></i> 添加新保险</h2>
|
||
<form>
|
||
<div class="form-group">
|
||
<label for="insurance-employee">员工</label>
|
||
<select id="insurance-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="insurance-company">保险公司</label>
|
||
<select id="insurance-company">
|
||
<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="insurance-type">保险类型</label>
|
||
<select id="insurance-type">
|
||
<option value="">请选择保险类型</option>
|
||
<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="policy-number">保单号</label>
|
||
<input type="text" id="policy-number" placeholder="请输入保单号">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="start-date">生效日期</label>
|
||
<input type="date" id="start-date">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="end-date">到期日期</label>
|
||
<input type="date" id="end-date">
|
||
</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="beneficiary">受益人</label>
|
||
<input type="text" id="beneficiary" placeholder="请输入受益人">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="insurance-notes">备注</label>
|
||
<textarea id="insurance-notes" rows="3" placeholder="请输入备注信息"></textarea>
|
||
</div>
|
||
<div class="form-actions">
|
||
<button type="button" class="btn btn-danger" onclick="hideModal('addInsuranceModal')">
|
||
<i class="fas fa-times"></i> 取消
|
||
</button>
|
||
<button type="submit" class="btn btn-success">
|
||
<i class="fas fa-check"></i> 保存
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 添加上传文件模态框 -->
|
||
<div id="uploadDocumentModal" class="modal">
|
||
<div class="modal-content">
|
||
<span class="close" onclick="hideModal('uploadDocumentModal')">×</span>
|
||
<h2><i class="fas fa-upload"></i> 上传保单文件</h2>
|
||
<form>
|
||
<div class="form-group">
|
||
<label for="document-employee">员工</label>
|
||
<select id="document-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="document-type">文件类型</label>
|
||
<select id="document-type">
|
||
<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="file-upload">选择文件</label>
|
||
<input type="file" id="file-upload">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="document-description">文件描述</label>
|
||
<textarea id="document-description" rows="3" placeholder="请输入文件描述"></textarea>
|
||
</div>
|
||
<div class="form-actions">
|
||
<button type="button" class="btn btn-danger" onclick="hideModal('uploadDocumentModal')">
|
||
<i class="fas fa-times"></i> 取消
|
||
</button>
|
||
<button type="submit" class="btn btn-success">
|
||
<i class="fas fa-upload"></i> 上传
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 添加健康记录模态框 -->
|
||
<div id="addHealthRecordModal" class="modal">
|
||
<div class="modal-content">
|
||
<span class="close" onclick="hideModal('addHealthRecordModal')">×</span>
|
||
<h2><i class="fas fa-plus-circle"></i> 添加健康记录</h2>
|
||
<form>
|
||
<div class="form-group">
|
||
<label for="health-employee">员工</label>
|
||
<select id="health-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="checkup-date">体检日期</label>
|
||
<input type="date" id="checkup-date">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="hospital">体检医院</label>
|
||
<input type="text" id="hospital" placeholder="请输入体检医院">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="checkup-type">体检类型</label>
|
||
<select id="checkup-type">
|
||
<option value="常规体检">常规体检</option>
|
||
<option value="入职体检">入职体检</option>
|
||
<option value="年度体检">年度体检</option>
|
||
<option value="专项体检">专项体检</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="checkup-result">体检结果</label>
|
||
<select id="checkup-result">
|
||
<option value="正常">正常</option>
|
||
<option value="轻度异常">轻度异常</option>
|
||
<option value="异常">异常</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="next-checkup">下次体检日期</label>
|
||
<input type="date" id="next-checkup">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="health-summary">体检总结</label>
|
||
<textarea id="health-summary" rows="3" placeholder="请输入体检总结"></textarea>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="health-suggestion">医生建议</label>
|
||
<textarea id="health-suggestion" rows="3" placeholder="请输入医生建议"></textarea>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="health-report">体检报告</label>
|
||
<input type="file" id="health-report">
|
||
</div>
|
||
<div class="form-actions">
|
||
<button type="button" class="btn btn-danger" onclick="hideModal('addHealthRecordModal')">
|
||
<i class="fas fa-times"></i> 取消
|
||
</button>
|
||
<button type="submit" class="btn btn-success">
|
||
<i class="fas fa-check"></i> 保存
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 添加用户模态框 -->
|
||
<div id="addUserModal" class="modal">
|
||
<div class="modal-content">
|
||
<span class="close" onclick="hideModal('addUserModal')">×</span>
|
||
<h2><i class="fas fa-user-plus"></i> 添加新用户</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="confirm-password">确认密码</label>
|
||
<input type="password" id="confirm-password" 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="employee-id">工号</label>
|
||
<input type="text" id="employee-id" placeholder="请输入工号">
|
||
</div>
|
||
<div class="form-actions">
|
||
<button type="button" class="btn btn-danger" onclick="hideModal('addUserModal')">
|
||
<i class="fas fa-times"></i> 取消
|
||
</button>
|
||
<button type="submit" class="btn btn-success">
|
||
<i class="fas fa-check"></i> 保存
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 添加保险公司模态框 -->
|
||
<div id="addCompanyModal" class="modal">
|
||
<div class="modal-content">
|
||
<span class="close" onclick="hideModal('addCompanyModal')">×</span>
|
||
<h2><i class="fas fa-building"></i> 添加保险公司</h2>
|
||
<form>
|
||
<div class="form-group">
|
||
<label for="company-name">保险公司名称</label>
|
||
<input type="text" id="company-name" placeholder="请输入保险公司名称">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="contact-person">联系人</label>
|
||
<input type="text" id="contact-person" placeholder="请输入联系人">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="contact-phone">联系电话</label>
|
||
<input type="text" id="contact-phone" placeholder="请输入联系电话">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="company-email">电子邮箱</label>
|
||
<input type="email" id="company-email" placeholder="请输入电子邮箱">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="company-address">公司地址</label>
|
||
<input type="text" id="company-address" placeholder="请输入公司地址">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="cooperation-date">合作开始日期</label>
|
||
<input type="date" id="cooperation-date">
|
||
</div>
|
||
<div class="form-actions">
|
||
<button type="button" class="btn btn-danger" onclick="hideModal('addCompanyModal')">
|
||
<i class="fas fa-times"></i> 取消
|
||
</button>
|
||
<button type="submit" class="btn btn-success">
|
||
<i class="fas fa-check"></i> 保存
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 添加保险类型模态框 -->
|
||
<div id="addInsuranceTypeModal" class="modal">
|
||
<div class="modal-content">
|
||
<span class="close" onclick="hideModal('addInsuranceTypeModal')">×</span>
|
||
<h2><i class="fas fa-list-alt"></i> 添加保险类型</h2>
|
||
<form>
|
||
<div class="form-group">
|
||
<label for="insurance-type-name">保险类型</label>
|
||
<input type="text" id="insurance-type-name" placeholder="请输入保险类型">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="type-description">描述</label>
|
||
<textarea id="type-description" rows="3" placeholder="请输入保险类型描述"></textarea>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="coverage-range">保障范围</label>
|
||
<textarea id="coverage-range" rows="3" placeholder="请输入保障范围"></textarea>
|
||
</div>
|
||
<div class="form-actions">
|
||
<button type="button" class="btn btn-danger" onclick="hideModal('addInsuranceTypeModal')">
|
||
<i class="fas fa-times"></i> 取消
|
||
</button>
|
||
<button type="submit" class="btn btn-success">
|
||
<i class="fas fa-check"></i> 保存
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// 当前用户角色 (模拟数据，实际应用中应从登录信息获取)
|
||
let currentUserRole = 'employee'; // 'admin' 或 'employee'
|
||
let currentUserId = 'EMP001';
|
||
let currentUserName = '张三';
|
||
|
||
// 初始化页面
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 根据用户角色初始化界面
|
||
initUserInterface();
|
||
|
||
// 绑定侧边栏菜单点击事件
|
||
bindSidebarMenuEvents();
|
||
|
||
// 绑定其他事件
|
||
bindEvents();
|
||
});
|
||
|
||
// 根据用户角色初始化界面
|
||
function initUserInterface() {
|
||
const adminMenu = document.getElementById('admin-menu');
|
||
const employeeMenu = document.getElementById('employee-menu');
|
||
const adminDashboard = document.getElementById('admin-dashboard');
|
||
const employeeDashboard = document.getElementById('employee-dashboard');
|
||
const adminInsuranceView = document.getElementById('admin-insurance-view');
|
||
const employeeInsuranceView = document.getElementById('employee-insurance-view');
|
||
const adminHealthView = document.getElementById('admin-health-view');
|
||
const employeeHealthView = document.getElementById('employee-health-view');
|
||
const adminDocumentsView = document.getElementById('admin-documents-view');
|
||
const employeeDocumentsView = document.getElementById('employee-documents-view');
|
||
const settingsTab = document.getElementById('settings');
|
||
const addInsuranceBtn = document.getElementById('add-insurance-btn');
|
||
const addHealthBtn = document.getElementById('add-health-btn');
|
||
const uploadDocumentBtn = document.getElementById('upload-document-btn');
|
||
const editProfileBtn = document.getElementById('edit-profile-btn');
|
||
const currentUsername = document.getElementById('current-username');
|
||
|
||
if (currentUserRole === 'admin') {
|
||
// 管理员视图
|
||
adminMenu.style.display = 'block';
|
||
employeeMenu.style.display = 'none';
|
||
adminDashboard.style.display = 'block';
|
||
employeeDashboard.style.display = 'none';
|
||
adminInsuranceView.style.display = 'block';
|
||
employeeInsuranceView.style.display = 'none';
|
||
adminHealthView.style.display = 'block';
|
||
employeeHealthView.style.display = 'none';
|
||
adminDocumentsView.style.display = 'block';
|
||
employeeDocumentsView.style.display = 'none';
|
||
settingsTab.style.display = 'block';
|
||
addInsuranceBtn.style.display = 'inline-block';
|
||
addHealthBtn.style.display = 'inline-block';
|
||
uploadDocumentBtn.style.display = 'inline-block';
|
||
editProfileBtn.style.display = 'inline-block';
|
||
currentUsername.textContent = '系统管理员';
|
||
} else {
|
||
// 员工视图
|
||
adminMenu.style.display = 'none';
|
||
employeeMenu.style.display = 'block';
|
||
adminDashboard.style.display = 'none';
|
||
employeeDashboard.style.display = 'block';
|
||
adminInsuranceView.style.display = 'none';
|
||
employeeInsuranceView.style.display = 'block';
|
||
adminHealthView.style.display = 'none';
|
||
employeeHealthView.style.display = 'block';
|
||
adminDocumentsView.style.display = 'none';
|
||
employeeDocumentsView.style.display = 'block';
|
||
settingsTab.style.display = 'none';
|
||
addInsuranceBtn.style.display = 'none';
|
||
addHealthBtn.style.display = 'none';
|
||
uploadDocumentBtn.style.display = 'none';
|
||
editProfileBtn.style.display = 'inline-block';
|
||
currentUsername.textContent = currentUserName + ' (' + currentUserId + ')';
|
||
}
|
||
}
|
||
|
||
// 绑定侧边栏菜单点击事件
|
||
function bindSidebarMenuEvents() {
|
||
const menuItems = document.querySelectorAll('.sidebar-menu li');
|
||
|
||
menuItems.forEach(item => {
|
||
item.addEventListener('click', function() {
|
||
// 移除所有菜单项的active类
|
||
menuItems.forEach(li => li.classList.remove('active'));
|
||
|
||
// 给当前点击的菜单项添加active类
|
||
this.classList.add('active');
|
||
|
||
// 获取目标内容区域ID
|
||
const targetId = this.getAttribute('data-target');
|
||
|
||
// 隐藏所有内容区域
|
||
document.querySelectorAll('.tab-content').forEach(content => {
|
||
content.classList.remove('active');
|
||
});
|
||
|
||
// 显示目标内容区域
|
||
document.getElementById(targetId).classList.add('active');
|
||
});
|
||
});
|
||
}
|
||
|
||
// 绑定其他事件
|
||
function bindEvents() {
|
||
// 添加保险按钮点击事件
|
||
document.getElementById('add-insurance-btn')?.addEventListener('click', function() {
|
||
showModal('addInsuranceModal');
|
||
});
|
||
|
||
// 上传文件按钮点击事件
|
||
document.getElementById('upload-document-btn')?.addEventListener('click', function() {
|
||
showModal('uploadDocumentModal');
|
||
});
|
||
|
||
// 添加健康记录按钮点击事件
|
||
document.getElementById('add-health-btn')?.addEventListener('click', function() {
|
||
showModal('addHealthRecordModal');
|
||
});
|
||
|
||
// 修改密码表单提交事件
|
||
document.getElementById('change-password-form')?.addEventListener('submit', function(e) {
|
||
e.preventDefault();
|
||
alert('密码修改成功！');
|
||
this.reset();
|
||
});
|
||
|
||
// 点击模态框外部关闭模态框
|
||
window.addEventListener('click', function(event) {
|
||
if (event.target.classList.contains('modal')) {
|
||
event.target.style.display = 'none';
|
||
}
|
||
});
|
||
}
|
||
|
||
// 显示模态框
|
||
function showModal(modalId) {
|
||
document.getElementById(modalId).style.display = 'block';
|
||
}
|
||
|
||
// 隐藏模态框
|
||
function hideModal(modalId) {
|
||
document.getElementById(modalId).style.display = 'none';
|
||
}
|
||
|
||
// 切换保险详情显示
|
||
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';
|
||
}
|
||
}
|
||
|
||
// 切换系统设置标签页
|
||
function switchSettingsTab(tabId) {
|
||
// 隐藏所有标签内容
|
||
document.querySelectorAll('.settings-tab-content').forEach(content => {
|
||
content.classList.remove('active');
|
||
});
|
||
|
||
// 取消所有标签的活动状态
|
||
document.querySelectorAll('#settings .tab').forEach(tab => {
|
||
tab.classList.remove('active');
|
||
});
|
||
|
||
// 显示选中的标签内容
|
||
document.getElementById('settings-' + tabId).classList.add('active');
|
||
|
||
// 设置选中标签的活动状态
|
||
event.currentTarget.classList.add('active');
|
||
}
|
||
|
||
// 显示添加用户模态框
|
||
function showAddUserModal() {
|
||
showModal('addUserModal');
|
||
}
|
||
|
||
// 显示添加保险公司模态框
|
||
function showAddCompanyModal() {
|
||
showModal('addCompanyModal');
|
||
}
|
||
|
||
// 显示添加保险类型模态框
|
||
function showAddInsuranceTypeModal() {
|
||
showModal('addInsuranceTypeModal');
|
||
}
|
||
|
||
// 切换侧边栏显示状态
|
||
function toggleSidebar() {
|
||
const sidebar = document.getElementById('sidebar');
|
||
sidebar.classList.toggle('expanded');
|
||
|
||
const mainContent = document.getElementById('main-content');
|
||
if (sidebar.classList.contains('expanded')) {
|
||
mainContent.style.marginLeft = '220px';
|
||
} else {
|
||
mainContent.style.marginLeft = '60px';
|
||
}
|
||
}
|
||
|
||
// 退出登录
|
||
function logout() {
|
||
if (confirm('确定要退出系统吗？')) {
|
||
window.location.href = 'login.html';
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |