Spaces:
Running
Running
File size: 24,813 Bytes
6c89189 d6cacc0 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 | <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HR Master Pro | 员工信息管理</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#3b82f6',
secondary: '#10b981'
}
}
}
}
</script>
<style>
.custom-scrollbar::-webkit-scrollbar {
width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: #f1f1f1;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: #888;
border-radius: 3px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background: #555;
}
</style>
</head>
<body class="bg-gray-50 font-sans">
<div class="flex h-screen overflow-hidden">
<!-- 侧边栏 -->
<div class="hidden md:flex md:flex-shrink-0">
<div class="flex flex-col w-64 bg-white border-r border-gray-200">
<div class="flex items-center justify-center h-16 px-4 bg-primary-600">
<div class="flex items-center">
<i data-feather="users" class="w-6 h-6 text-white"></i>
<span class="ml-2 text-xl font-semibold text-white">HR Master Pro</span>
</div>
</div>
<div class="flex flex-col flex-grow px-4 py-4 overflow-y-auto custom-scrollbar">
<nav class="flex-1 space-y-2">
<a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-white rounded-md bg-primary-500">
<i data-feather="home" class="w-4 h-4 mr-3"></i>
仪表盘
</a>
<a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 rounded-md hover:bg-gray-100">
<i data-feather="user" class="w-4 h-4 mr-3"></i>
员工管理
</a>
<a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 rounded-md hover:bg-gray-100">
<i data-feather="file-text" class="w-4 h-4 mr-3"></i>
人事档案
</a>
<a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 rounded-md hover:bg-gray-100">
<i data-feather="clock" class="w-4 h-4 mr-3"></i>
考勤管理
</a>
<a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 rounded-md hover:bg-gray-100">
<i data-feather="dollar-sign" class="w-4 h-4 mr-3"></i>
薪资管理
</a>
<a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 rounded-md hover:bg-gray-100">
<i data-feather="settings" class="w-4 h-4 mr-3"></i>
系统设置
</a>
</nav>
</div>
<div class="p-4 border-t border-gray-200">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full" src="http://static.photos/people/200x200/1" alt="用户头像">
<div class="ml-3">
<p class="text-sm font-medium text-gray-700">管理员</p>
<p class="text-xs text-gray-500">admin@company.com</p>
</div>
</div>
</div>
</div>
</div>
<!-- 主内容区 -->
<div class="flex flex-col flex-1 overflow-hidden">
<!-- 顶部导航 -->
<div class="flex items-center justify-between h-16 px-4 bg-white border-b border-gray-200">
<div class="flex items-center">
<button class="p-1 text-gray-500 rounded-md md:hidden hover:text-gray-600 hover:bg-gray-100">
<i data-feather="menu" class="w-6 h-6"></i>
</button>
<h1 class="ml-4 text-lg font-semibold text-gray-800">员工信息编辑器</h1>
</div>
<div class="flex items-center space-x-4">
<button class="p-1 text-gray-500 rounded-md hover:text-gray-600 hover:bg-gray-100">
<i data-feather="bell" class="w-5 h-5"></i>
</button>
<button class="p-1 text-gray-500 rounded-md hover:text-gray-600 hover:bg-gray-100">
<i data-feather="help-circle" class="w-5 h-5"></i>
</button>
</div>
</div>
<!-- 内容区域 -->
<div class="flex-1 overflow-auto custom-scrollbar">
<div class="p-6">
<!-- 角色切换 -->
<div class="flex mb-6 space-x-4">
<button class="px-4 py-2 text-sm font-medium rounded-md bg-primary-500 text-white">
管理员视图
</button>
<button class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50">
HR视图
</button>
<button class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50">
普通员工视图
</button>
</div>
<!-- 员工信息表单 -->
<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
<!-- 基本信息 -->
<div class="p-6 bg-white rounded-lg shadow">
<div class="flex items-center justify-between mb-4">
<h2 class="text-lg font-medium text-gray-800">基本信息</h2>
<button class="p-1 text-gray-500 rounded-md hover:text-gray-600 hover:bg-gray-100">
<i data-feather="edit" class="w-4 h-4"></i>
</button>
</div>
<div class="space-y-4">
<div class="flex items-center">
<img class="w-16 h-16 rounded-full" src="http://static.photos/people/200x200/2" alt="员工头像">
<div class="ml-4">
<button class="px-3 py-1 text-xs font-medium text-white rounded-md bg-primary-500">上传新照片</button>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">姓名</label>
<input type="text" class="w-full px-3 py-2 mt-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-primary-500" value="张三">
</div>
<div>
<label class="block text-sm font-medium text-gray-700">性别</label>
<select class="w-full px-3 py-2 mt-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-primary-500">
<option>男</option>
<option>女</option>
<option>其他</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">出生日期</label>
<input type="date" class="w-full px-3 py-2 mt-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-primary-500" value="1990-05-15">
</div>
</div>
</div>
<!-- 工作信息 -->
<div class="p-6 bg-white rounded-lg shadow">
<div class="flex items-center justify-between mb-4">
<h2 class="text-lg font-medium text-gray-800">工作信息</h2>
<button class="p-1 text-gray-500 rounded-md hover:text-gray-600 hover:bg-gray-100">
<i data-feather="edit" class="w-4 h-4"></i>
</button>
</div>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700">员工编号</label>
<input type="text" class="w-full px-3 py-2 mt-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-primary-500" value="EMP-2023-001">
</div>
<div>
<label class="block text-sm font-medium text-gray-700">部门</label>
<select class="w-full px-3 py-2 mt-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-primary-500">
<option>技术部</option>
<option>市场部</option>
<option>人力资源部</option>
<option>财务部</option>
<option>行政部</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">职位</label>
<input type="text" class="w-full px-3 py-2 mt-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-primary-500" value="高级前端开发工程师">
</div>
<div>
<label class="block text-sm font-medium text-gray-700">入职日期</label>
<input type="date" class="w-full px-3 py-2 mt-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-primary-500" value="2020-03-10">
</div>
<div>
<label class="block text-sm font-medium text-gray-700">工作状态</label>
<select class="w-full px-3 py-2 mt-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-primary-500">
<option>在职</option>
<option>试用期</option>
<option>离职</option>
<option>停职</option>
</select>
</div>
</div>
</div>
<!-- 联系方式 -->
<div class="p-6 bg-white rounded-lg shadow">
<div class="flex items-center justify-between mb-4">
<h2 class="text-lg font-medium text-gray-800">联系方式</h2>
<button class="p-1 text-gray-500 rounded-md hover:text-gray-600 hover:bg-gray-100">
<i data-feather="edit" class="w-4 h-4"></i>
</button>
</div>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700">手机号码</label>
<input type="tel" class="w-full px-3 py-2 mt-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-primary-500" value="13800138000">
</div>
<div>
<label class="block text-sm font-medium text-gray-700">电子邮箱</label>
<input type="email" class="w-full px-3 py-2 mt-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-primary-500" value="zhangsan@company.com">
</div>
<div>
<label class="block text-sm font-medium text-gray-700">紧急联系人</label>
<input type="text" class="w-full px-3 py-2 mt-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-primary-500" value="李四">
</div>
<div>
<label class="block text-sm font-medium text-gray-700">紧急联系电话</label>
<input type="tel" class="w-full px-3 py-2 mt-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-primary-500" value="13900139000">
</div>
</div>
</div>
<!-- 教育背景 -->
<div class="p-6 bg-white rounded-lg shadow">
<div class="flex items-center justify-between mb-4">
<h2 class="text-lg font-medium text-gray-800">教育背景</h2>
<button class="p-1 text-gray-500 rounded-md hover:text-gray-600 hover:bg-gray-100">
<i data-feather="plus" class="w-4 h-4"></i>
</button>
</div>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700">学历</label>
<select class="w-full px-3 py-2 mt-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-primary-500">
<option>博士</option>
<option>硕士</option>
<option selected>本科</option>
<option>大专</option>
<option>高中</option>
<option>其他</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">毕业院校</label>
<input type="text" class="w-full px-3 py-2 mt-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-primary-500" value="清华大学">
</div>
<div>
<label class="block text-sm font-medium text-gray-700">专业</label>
<input type="text" class="w-full px-3 py-2 mt-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-primary-500" value="计算机科学与技术">
</div>
<div>
<label class="block text-sm font-medium text-gray-700">毕业时间</label>
<input type="date" class="w-full px-3 py-2 mt-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-primary-500" value="2012-06-30">
</div>
</div>
</div>
<!-- 薪资信息 -->
<div class="p-6 bg-white rounded-lg shadow">
<div class="flex items-center justify-between mb-4">
<h2 class="text-lg font-medium text-gray-800">薪资信息</h2>
<button class="p-1 text-gray-500 rounded-md hover:text-gray-600 hover:bg-gray-100">
<i data-feather="lock" class="w-4 h-4"></i>
</button>
</div>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700">基本工资</label>
<input type="number" class="w-full px-3 py-2 mt-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-primary-500" value="15000" disabled>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">岗位津贴</label>
<input type="number" class="w-full px-3 py-2 mt-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-primary-500" value="3000" disabled>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">绩效奖金</label>
<input type="number" class="w-full px-3 py-2 mt-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-primary-500" value="2000" disabled>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">社保基数</label>
<input type="number" class="w-full px-3 py-2 mt-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-primary-500" value="10000" disabled>
</div>
</div>
</div>
<!-- 权限设置 -->
<div class="p-6 bg-white rounded-lg shadow">
<div class="flex items-center justify-between mb-4">
<h2 class="text-lg font-medium text-gray-800">系统权限</h2>
<button class="p-1 text-gray-500 rounded-md hover:text-gray-600 hover:bg-gray-100">
<i data-feather="settings" class="w-4 h-4"></i>
</button>
</div>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700">用户角色</label>
<select class="w-full px-3 py-2 mt-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-primary-500">
<option>普通员工</option>
<option selected>部门经理</option>
<option>HR专员</option>
<option>系统管理员</option>
</select>
</div>
<div>
<label class="flex items-center">
<input type="checkbox" class="w-4 h-4 text-primary-500 border-gray-300 rounded focus:ring-primary-500" checked>
<span class="ml-2 text-sm text-gray-700">考勤管理权限</span>
</label>
</div>
<div>
<label class="flex items-center">
<input type="checkbox" class="w-4 h-4 text-primary-500 border-gray-300 rounded focus:ring-primary-500">
<span class="ml-2 text-sm text-gray-700">薪资管理权限</span>
</label>
</div>
<div>
<label class="flex items-center">
<input type="checkbox" class="w-4 h-4 text-primary-500 border-gray-300 rounded focus:ring-primary-500" checked>
<span class="ml-2 text-sm text-gray-700">人事管理权限</span>
</label>
</div>
<div>
<label class="flex items-center">
<input type="checkbox" class="w-4 h-4 text-primary-500 border-gray-300 rounded focus:ring-primary-500">
<span class="ml-2 text-sm text-gray-700">系统管理权限</span>
</label>
</div>
</div>
</div>
</div>
<!-- 操作按钮 -->
<div class="flex justify-end mt-6 space-x-4">
<button class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50">
取消
</button>
<button class="px-4 py-2 text-sm font-medium text-white rounded-md bg-primary-500 hover:bg-primary-600">
保存更改
</button>
</div>
</div>
</div>
</div>
</div>
<script>
feather.replace();
// 角色切换按钮功能
document.querySelectorAll('.flex.space-x-4 button').forEach(button => {
button.addEventListener('click', function() {
document.querySelectorAll('.flex.space-x-4 button').forEach(btn => {
btn.classList.remove('bg-primary-500', 'text-white');
btn.classList.add('text-gray-700', 'bg-white', 'border', 'border-gray-300', 'hover:bg-gray-50');
});
this.classList.remove('text-gray-700', 'bg-white', 'border', 'border-gray-300', 'hover:bg-gray-50');
this.classList.add('bg-primary-500', 'text-white');
// 根据角色显示/隐藏相应字段
const role = this.textContent.trim();
if(role === 'HR视图') {
document.querySelector('input[value="15000"]').disabled = false;
document.querySelector('input[value="3000"]').disabled = false;
document.querySelector('input[value="2000"]').disabled = false;
document.querySelector('input[value="10000"]').disabled = false;
} else {
document.querySelector('input[value="15000"]').disabled = true;
document.querySelector('input[value="3000"]').disabled = true;
document.querySelector('input[value="2000"]').disabled = true;
document.querySelector('input[value="10000"]').disabled = true;
}
});
});
</script>
</body>
</html>
|