| <!DOCTYPE html> |
| <html lang="zh-CN"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>HR Payroll Wizard Pro | 智能薪资核算</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| primary: '#3b82f6', |
| secondary: '#10b981', |
| danger: '#ef4444' |
| } |
| } |
| } |
| } |
| </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; |
| } |
| .progress-bar { |
| transition: width 0.5s ease-in-out; |
| } |
| </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="credit-card" class="w-6 h-6 text-white"></i> |
| <span class="ml-2 text-xl font-semibold text-white">Payroll Wizard</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-gray-700 rounded-md hover:bg-gray-100"> |
| <i data-feather="home" class="w-4 h-4 mr-3"></i> |
| 薪资概览 |
| </a> |
| <a href="payroll.html" class="flex items-center px-4 py-2 text-sm font-medium text-white rounded-md bg-primary-500"> |
| <i data-feather="calculator" 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="check-circle" 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">payroll@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 flex-col mb-6 space-y-4 md:flex-row md:space-y-0 md:space-x-4"> |
| <div class="flex-1"> |
| <label class="block text-sm font-medium text-gray-700">选择薪资周期</label> |
| <input type="month" 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"> |
| </div> |
| <div class="flex-1"> |
| <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 class="flex items-end"> |
| <button id="calculateBtn" class="px-4 py-2 text-sm font-medium text-white rounded-md bg-primary-500 hover:bg-primary-600"> |
| <i data-feather="play" class="w-4 h-4 mr-2 inline"></i>智能核算 |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div id="progressContainer" class="hidden mb-6"> |
| <div class="flex justify-between mb-1 text-sm font-medium text-gray-700"> |
| <span>核算进度</span> |
| <span id="progressPercent">0%</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> |
| <div id="progressBar" class="progress-bar h-2.5 rounded-full bg-primary-500" style="width: 0%"></div> |
| </div> |
| </div> |
|
|
| |
| <div id="resultsContainer" class="hidden"> |
| |
| <div class="grid grid-cols-1 gap-6 mb-6 md:grid-cols-4"> |
| <div class="p-4 bg-white rounded-lg shadow"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-sm font-medium text-gray-500">总人数</p> |
| <p id="totalEmployees" class="text-2xl font-semibold text-gray-800">0</p> |
| </div> |
| <div class="p-3 rounded-full bg-primary-100"> |
| <i data-feather="users" class="w-6 h-6 text-primary-500"></i> |
| </div> |
| </div> |
| </div> |
| <div class="p-4 bg-white rounded-lg shadow"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-sm font-medium text-gray-500">应发总额</p> |
| <p id="totalGross" class="text-2xl font-semibold text-gray-800">¥0.00</p> |
| </div> |
| <div class="p-3 rounded-full bg-green-100"> |
| <i data-feather="dollar-sign" class="w-6 h-6 text-green-500"></i> |
| </div> |
| </div> |
| </div> |
| <div class="p-4 bg-white rounded-lg shadow"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-sm font-medium text-gray-500">扣除总额</p> |
| <p id="totalDeductions" class="text-2xl font-semibold text-gray-800">¥0.00</p> |
| </div> |
| <div class="p-3 rounded-full bg-red-100"> |
| <i data-feather="minus-circle" class="w-6 h-6 text-red-500"></i> |
| </div> |
| </div> |
| </div> |
| <div class="p-4 bg-white rounded-lg shadow"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-sm font-medium text-gray-500">实发总额</p> |
| <p id="totalNet" class="text-2xl font-semibold text-gray-800">¥0.00</p> |
| </div> |
| <div class="p-3 rounded-full bg-blue-100"> |
| <i data-feather="check-circle" class="w-6 h-6 text-blue-500"></i> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="p-6 mb-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> |
| <div class="flex space-x-2"> |
| <button class="px-3 py-1 text-sm font-medium text-white rounded-md bg-primary-500 hover:bg-primary-600"> |
| <i data-feather="download" class="w-4 h-4 mr-1 inline"></i>导出Excel |
| </button> |
| <button class="px-3 py-1 text-sm font-medium text-white rounded-md bg-green-500 hover:bg-green-600"> |
| <i data-feather="check" class="w-4 h-4 mr-1 inline"></i>确认发放 |
| </button> |
| </div> |
| </div> |
| <div class="overflow-x-auto"> |
| <table class="min-w-full divide-y divide-gray-200"> |
| <thead class="bg-gray-50"> |
| <tr> |
| <th scope="col" class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">员工编号</th> |
| <th scope="col" class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">姓名</th> |
| <th scope="col" class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">部门</th> |
| <th scope="col" class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">基本工资</th> |
| <th scope="col" class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">绩效奖金</th> |
| <th scope="col" class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">补贴</th> |
| <th scope="col" class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">社保扣除</th> |
| <th scope="col" class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">个税</th> |
| <th scope="col" class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">实发工资</th> |
| <th scope="col" class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">状态</th> |
| </tr> |
| </thead> |
| <tbody id="payrollTableBody" class="bg-white divide-y divide-gray-200"> |
| |
| </tbody> |
| </table> |
| </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> |
| <span class="px-3 py-1 text-sm font-medium text-white bg-green-500 rounded-full">校验通过</span> |
| </div> |
| <div class="grid grid-cols-1 gap-4 md:grid-cols-3"> |
| <div class="p-4 border border-green-200 rounded-lg bg-green-50"> |
| <div class="flex"> |
| <i data-feather="check-circle" class="w-5 h-5 mt-0.5 mr-2 text-green-500"></i> |
| <div> |
| <h3 class="font-medium text-green-800">考勤校验</h3> |
| <p class="text-sm text-green-600">所有员工考勤数据完整，无异常</p> |
| </div> |
| </div> |
| </div> |
| <div class="p-4 border border-green-200 rounded-lg bg-green-50"> |
| <div class="flex"> |
| <i data-feather="check-circle" class="w-5 h-5 mt-0.5 mr-2 text-green-500"></i> |
| <div> |
| <h3 class="font-medium text-green-800">社保公积金</h3> |
| <p class="text-sm text-green-600">缴纳基数与比例符合政策要求</p> |
| </div> |
| </div> |
| </div> |
| <div class="p-4 border border-yellow-200 rounded-lg bg-yellow-50"> |
| <div class="flex"> |
| <i data-feather="alert-circle" class="w-5 h-5 mt-0.5 mr-2 text-yellow-500"></i> |
| <div> |
| <h3 class="font-medium text-yellow-800">个税预警</h3> |
| <p class="text-sm text-yellow-600">3名员工达到更高税率档位</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| feather.replace(); |
| |
| |
| document.getElementById('calculateBtn').addEventListener('click', function() { |
| const progressContainer = document.getElementById('progressContainer'); |
| const resultsContainer = document.getElementById('resultsContainer'); |
| const progressBar = document.getElementById('progressBar'); |
| const progressPercent = document.getElementById('progressPercent'); |
| |
| |
| progressContainer.classList.remove('hidden'); |
| resultsContainer.classList.add('hidden'); |
| |
| |
| let progress = 0; |
| const interval = setInterval(() => { |
| progress += Math.random() * 10; |
| if (progress > 100) progress = 100; |
| progressBar.style.width = `${progress}%`; |
| progressPercent.textContent = `${Math.floor(progress)}%`; |
| |
| if (progress === 100) { |
| clearInterval(interval); |
| setTimeout(() => { |
| |
| resultsContainer.classList.remove('hidden'); |
| |
| |
| document.getElementById('totalEmployees').textContent = '42'; |
| document.getElementById('totalGross').textContent = '¥328,500.00'; |
| document.getElementById('totalDeductions').textContent = '¥48,729.00'; |
| document.getElementById('totalNet').textContent = '¥279,771.00'; |
| |
| |
| const tableBody = document.getElementById('payrollTableBody'); |
| tableBody.innerHTML = ''; |
| |
| const departments = ['技术部', '市场部', '人力资源部', '财务部']; |
| const statuses = ['待发放', '已确认', '已发放']; |
| |
| for (let i = 1; i <= 10; i++) { |
| const baseSalary = Math.floor(Math.random() * 10000) + 10000; |
| const bonus = Math.floor(Math.random() * 3000); |
| const allowance = Math.floor(Math.random() * 2000); |
| const insurance = Math.floor(baseSalary * 0.22); |
| const tax = Math.floor((baseSalary + bonus + allowance - insurance - 5000) * 0.1); |
| const netSalary = baseSalary + bonus + allowance - insurance - tax; |
| const status = statuses[Math.floor(Math.random() * statuses.length)]; |
| |
| const row = document.createElement('tr'); |
| row.innerHTML = ` |
| <td class="px-6 py-4 text-sm text-gray-900 whitespace-nowrap">EMP-2023-${i.toString().padStart(3, '0')}</td> |
| <td class="px-6 py-4 text-sm text-gray-900 whitespace-nowrap">员工${i}</td> |
| <td class="px-6 py-4 text-sm text-gray-900 whitespace-nowrap">${departments[i % 4]}</td> |
| <td class="px-6 py-4 text-sm text-gray-900 whitespace-nowrap">¥${baseSalary.toLocaleString()}</td> |
| <td class="px-6 py-4 text-sm text-gray-900 whitespace-nowrap">¥${bonus.toLocaleString()}</td> |
| <td class="px-6 py-4 text-sm text-gray-900 whitespace-nowrap">¥${allowance.toLocaleString()}</td> |
| <td class="px-6 py-4 text-sm text-gray-900 whitespace-nowrap">¥${insurance.toLocaleString()}</td> |
| <td class="px-6 py-4 text-sm text-gray-900 whitespace-nowrap">¥${tax.toLocaleString()}</td> |
| <td class="px-6 py-4 text-sm font-medium text-gray-900 whitespace-nowrap">¥${netSalary.toLocaleString()}</td> |
| <td class="px-6 py-4 text-sm text-gray-900 whitespace-nowrap"> |
| <span class="px-2 py-1 text-xs font-medium rounded-full ${status === '已发放' ? 'bg-green-100 text-green-800' : status === '已确认' ? 'bg-blue-100 text-blue-800' : 'bg-gray-100 text-gray-800'}">${status}</span> |
| </td> |
| `; |
| tableBody.appendChild(row); |
| } |
| }, 500); |
| } |
| }, 200); |
| }); |
| </script> |
| </body> |
| </html> |
