Compare commits
2 Commits
c38fa31c9b
...
c1280737eb
| Author | SHA1 | Date |
|---|---|---|
jiangxucong
|
c1280737eb | 1 month ago |
|
jiangxucong
|
aa0c7ed6ea | 1 month ago |
@ -1,563 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="zh-CN">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>人力资源管理系统 - 多维统计</title>
|
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
|
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
|
|
||||||
<script>
|
|
||||||
tailwind.config = {
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
colors: {
|
|
||||||
primary: '#2D5CF6',
|
|
||||||
secondary: '#F5F6FA'
|
|
||||||
},
|
|
||||||
borderRadius: {
|
|
||||||
'none': '0px',
|
|
||||||
'sm': '2px',
|
|
||||||
DEFAULT: '4px',
|
|
||||||
'md': '8px',
|
|
||||||
'lg': '12px',
|
|
||||||
'xl': '16px',
|
|
||||||
'2xl': '20px',
|
|
||||||
'3xl': '24px',
|
|
||||||
'full': '9999px',
|
|
||||||
'button': '4px'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
[type="number"]::-webkit-inner-spin-button,
|
|
||||||
[type="number"]::-webkit-outer-spin-button {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
.chart-container {
|
|
||||||
width: 100%;
|
|
||||||
height: 300px;
|
|
||||||
}
|
|
||||||
.fa-icon {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="min-h-[1024px] bg-secondary font-sans">
|
|
||||||
<!-- 顶部导航 -->
|
|
||||||
<!-- <header class="w-full bg-primary text-white shadow-md">
|
|
||||||
<div class="container mx-auto px-6 h-16 flex items-center justify-between">
|
|
||||||
<div class="flex items-center space-x-8">
|
|
||||||
<a href="#" class="text-2xl font-['Pacifico']">人力</a>
|
|
||||||
<nav class="hidden md:flex space-x-6">
|
|
||||||
<a href="#" class="text-sm hover:text-gray-200 transition">多维统计</a>
|
|
||||||
<a href="#" class="text-sm hover:text-gray-200 transition">人员管理</a>
|
|
||||||
<a href="#" class="text-sm hover:text-gray-200 transition">组织管理</a>
|
|
||||||
<a href="#" class="text-sm hover:text-gray-200 transition">考勤管理</a>
|
|
||||||
<a href="#" class="text-sm hover:text-gray-200 transition">绩效管理</a>
|
|
||||||
<a href="#" class="text-sm hover:text-gray-200 transition">薪酬管理</a>
|
|
||||||
<a href="#" class="text-sm hover:text-gray-200 transition">知识库</a>
|
|
||||||
<a href="#" class="text-sm hover:text-gray-200 transition">后台管理</a>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center space-x-4">
|
|
||||||
<div class="relative">
|
|
||||||
<input type="text" placeholder="搜索..." class="bg-white/20 text-sm px-4 py-2 rounded-button w-48 focus:outline-none focus:ring-2 focus:ring-white/50">
|
|
||||||
<i class="fa-icon fa-solid fa-magnifying-glass absolute right-3 top-1/2 transform -translate-y-1/2 text-white/70"></i>
|
|
||||||
</div>
|
|
||||||
<button class="flex items-center space-x-1 bg-white/10 hover:bg-white/20 px-3 py-1 rounded-button transition">
|
|
||||||
<i class="fa-icon fa-solid fa-robot"></i>
|
|
||||||
<span class="text-sm">AI助手</span>
|
|
||||||
</button>
|
|
||||||
<div class="w-8 h-8 rounded-full bg-white/20 flex items-center justify-center cursor-pointer">
|
|
||||||
<i class="fa-icon fa-solid fa-user"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header> -->
|
|
||||||
|
|
||||||
<!-- 主要内容 -->
|
|
||||||
<main class="container mx-auto px-6 py-8">
|
|
||||||
<!-- 数据卡片行 -->
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
|
||||||
<div class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition">
|
|
||||||
<div class="flex justify-between items-start">
|
|
||||||
<div>
|
|
||||||
<p class="text-gray-500 text-sm">员工总数</p>
|
|
||||||
<p class="text-3xl font-bold mt-2">1,248</p>
|
|
||||||
</div>
|
|
||||||
<div class="bg-green-100 text-green-800 px-2 py-1 rounded-button text-xs flex items-center">
|
|
||||||
<i class="fa-icon fa-solid fa-arrow-up mr-1"></i>
|
|
||||||
<span>5.2%</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p class="text-gray-500 text-xs mt-2">较上月增加 62 人</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition">
|
|
||||||
<div>
|
|
||||||
<p class="text-gray-500 text-sm">本月入职</p>
|
|
||||||
<p class="text-3xl font-bold mt-2">87</p>
|
|
||||||
</div>
|
|
||||||
<p class="text-gray-500 text-xs mt-2">其中社招 52 人，校招 35 人</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition">
|
|
||||||
<div>
|
|
||||||
<p class="text-gray-500 text-sm">本月离职</p>
|
|
||||||
<p class="text-3xl font-bold mt-2">25</p>
|
|
||||||
</div>
|
|
||||||
<p class="text-gray-500 text-xs mt-2">主动离职 18 人，被动离职 7 人</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition">
|
|
||||||
<div>
|
|
||||||
<p class="text-gray-500 text-sm">平均工龄</p>
|
|
||||||
<p class="text-3xl font-bold mt-2">3.2</p>
|
|
||||||
</div>
|
|
||||||
<p class="text-gray-500 text-xs mt-2">年，较行业平均高 0.8 年</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 图表行1 -->
|
|
||||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
|
|
||||||
<div class="bg-white p-6 rounded-lg shadow-sm">
|
|
||||||
<h3 class="text-lg font-semibold mb-4">部门人员分布</h3>
|
|
||||||
<div class="chart-container" id="departmentChart"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-white p-6 rounded-lg shadow-sm">
|
|
||||||
<h3 class="text-lg font-semibold mb-4">职位分布</h3>
|
|
||||||
<div class="chart-container" id="positionChart"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 图表行2 -->
|
|
||||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
|
|
||||||
<div class="bg-white p-6 rounded-lg shadow-sm">
|
|
||||||
<h3 class="text-lg font-semibold mb-4">员工年龄分布</h3>
|
|
||||||
<div class="chart-container" id="ageChart"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-white p-6 rounded-lg shadow-sm">
|
|
||||||
<h3 class="text-lg font-semibold mb-4">员工工龄分布</h3>
|
|
||||||
<div class="chart-container" id="seniorityChart"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 图表行3 -->
|
|
||||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
|
|
||||||
<div class="bg-white p-6 rounded-lg shadow-sm">
|
|
||||||
<h3 class="text-lg font-semibold mb-4">员工绩效分布</h3>
|
|
||||||
<div class="chart-container" id="performanceChart"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-white p-6 rounded-lg shadow-sm">
|
|
||||||
<h3 class="text-lg font-semibold mb-4">招聘渠道分布</h3>
|
|
||||||
<div class="chart-container" id="recruitmentChart"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<!-- 页脚 -->
|
|
||||||
<footer class="w-full bg-gray-800 text-white py-8 mt-auto">
|
|
||||||
<div class="container mx-auto px-6">
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
||||||
<div>
|
|
||||||
<h3 class="text-lg font-semibold mb-4">关于我们</h3>
|
|
||||||
<p class="text-sm text-gray-400 mb-4">人力科技是一家专注于企业人力资源数字化解决方案的高科技公司，致力于为企业提供智能化的人力资源管理工具。</p>
|
|
||||||
<div class="flex space-x-4">
|
|
||||||
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fa-icon fa-brands fa-weixin"></i></a>
|
|
||||||
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fa-icon fa-brands fa-weibo"></i></a>
|
|
||||||
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fa-icon fa-brands fa-linkedin"></i></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<h3 class="text-lg font-semibold mb-4">快速链接</h3>
|
|
||||||
<ul class="space-y-2">
|
|
||||||
<li><a href="#" class="text-sm text-gray-400 hover:text-white transition">产品介绍</a></li>
|
|
||||||
<li><a href="#" class="text-sm text-gray-400 hover:text-white transition">解决方案</a></li>
|
|
||||||
<li><a href="#" class="text-sm text-gray-400 hover:text-white transition">客户案例</a></li>
|
|
||||||
<li><a href="#" class="text-sm text-gray-400 hover:text-white transition">价格方案</a></li>
|
|
||||||
<li><a href="#" class="text-sm text-gray-400 hover:text-white transition">帮助中心</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<h3 class="text-lg font-semibold mb-4">联系我们</h3>
|
|
||||||
<ul class="space-y-2 text-sm text-gray-400">
|
|
||||||
<li class="flex items-start">
|
|
||||||
<i class="fa-icon fa-solid fa-map-marker-alt mt-1 mr-2"></i>
|
|
||||||
<span>北京市海淀区中关村软件园 12 号楼 3 层</span>
|
|
||||||
</li>
|
|
||||||
<li class="flex items-center">
|
|
||||||
<i class="fa-icon fa-solid fa-phone mr-2"></i>
|
|
||||||
<span>400-888-8888</span>
|
|
||||||
</li>
|
|
||||||
<li class="flex items-center">
|
|
||||||
<i class="fa-icon fa-solid fa-envelope mr-2"></i>
|
|
||||||
<span>contact@hrtech.com</span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="border-t border-gray-700 mt-8 pt-6 text-center text-sm text-gray-400">
|
|
||||||
<p>© 2023 人力科技 版权所有 | 京ICP备12345678号-1 | 京公网安备11010802023456号</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
// 部门分布图表
|
|
||||||
const departmentChart = echarts.init(document.getElementById('departmentChart'));
|
|
||||||
departmentChart.setOption({
|
|
||||||
animation: false,
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'item'
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
orient: 'vertical',
|
|
||||||
right: 10,
|
|
||||||
top: 'center',
|
|
||||||
data: ['技术部', '产品部', '市场部', '销售部', '人力资源', '财务部', '行政部']
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: '部门分布',
|
|
||||||
type: 'pie',
|
|
||||||
radius: ['40%', '70%'],
|
|
||||||
avoidLabelOverlap: false,
|
|
||||||
itemStyle: {
|
|
||||||
borderRadius: 4,
|
|
||||||
borderColor: '#fff',
|
|
||||||
borderWidth: 2
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
show: false,
|
|
||||||
position: 'center'
|
|
||||||
},
|
|
||||||
emphasis: {
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
fontSize: '18',
|
|
||||||
fontWeight: 'bold'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
labelLine: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
data: [
|
|
||||||
{ value: 320, name: '技术部' },
|
|
||||||
{ value: 240, name: '产品部' },
|
|
||||||
{ value: 149, name: '市场部' },
|
|
||||||
{ value: 180, name: '销售部' },
|
|
||||||
{ value: 98, name: '人力资源' },
|
|
||||||
{ value: 56, name: '财务部' },
|
|
||||||
{ value: 105, name: '行政部' }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
});
|
|
||||||
|
|
||||||
// 职位分布图表
|
|
||||||
const positionChart = echarts.init(document.getElementById('positionChart'));
|
|
||||||
positionChart.setOption({
|
|
||||||
animation: false,
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'item'
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
orient: 'vertical',
|
|
||||||
right: 10,
|
|
||||||
top: 'center',
|
|
||||||
data: ['工程师', '产品经理', '设计师', '市场专员', '销售代表', 'HRBP', '财务专员', '行政专员']
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: '职位分布',
|
|
||||||
type: 'pie',
|
|
||||||
radius: ['40%', '70%'],
|
|
||||||
avoidLabelOverlap: false,
|
|
||||||
itemStyle: {
|
|
||||||
borderRadius: 4,
|
|
||||||
borderColor: '#fff',
|
|
||||||
borderWidth: 2
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
show: false,
|
|
||||||
position: 'center'
|
|
||||||
},
|
|
||||||
emphasis: {
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
fontSize: '18',
|
|
||||||
fontWeight: 'bold'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
labelLine: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
data: [
|
|
||||||
{ value: 280, name: '工程师' },
|
|
||||||
{ value: 120, name: '产品经理' },
|
|
||||||
{ value: 90, name: '设计师' },
|
|
||||||
{ value: 80, name: '市场专员' },
|
|
||||||
{ value: 150, name: '销售代表' },
|
|
||||||
{ value: 60, name: 'HRBP' },
|
|
||||||
{ value: 40, name: '财务专员' },
|
|
||||||
{ value: 80, name: '行政专员' }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
});
|
|
||||||
|
|
||||||
// 年龄分布图表
|
|
||||||
const ageChart = echarts.init(document.getElementById('ageChart'));
|
|
||||||
ageChart.setOption({
|
|
||||||
animation: false,
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis',
|
|
||||||
axisPointer: {
|
|
||||||
type: 'shadow'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
left: '3%',
|
|
||||||
right: '4%',
|
|
||||||
bottom: '3%',
|
|
||||||
containLabel: true
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
|
||||||
data: ['20-25岁', '26-30岁', '31-35岁', '36-40岁', '41岁以上'],
|
|
||||||
axisTick: {
|
|
||||||
alignWithLabel: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'value'
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: '人数',
|
|
||||||
type: 'bar',
|
|
||||||
barWidth: '60%',
|
|
||||||
itemStyle: {
|
|
||||||
color: '#2D5CF6'
|
|
||||||
},
|
|
||||||
data: [120, 480, 360, 180, 108]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
});
|
|
||||||
|
|
||||||
// 工龄分布图表
|
|
||||||
const seniorityChart = echarts.init(document.getElementById('seniorityChart'));
|
|
||||||
seniorityChart.setOption({
|
|
||||||
animation: false,
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'item'
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
orient: 'vertical',
|
|
||||||
right: 10,
|
|
||||||
top: 'center',
|
|
||||||
data: ['1年以内', '1-3年', '3-5年', '5-10年', '10年以上']
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: '工龄分布',
|
|
||||||
type: 'pie',
|
|
||||||
radius: ['40%', '70%'],
|
|
||||||
avoidLabelOverlap: false,
|
|
||||||
itemStyle: {
|
|
||||||
borderRadius: 4,
|
|
||||||
borderColor: '#fff',
|
|
||||||
borderWidth: 2
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
show: false,
|
|
||||||
position: 'center'
|
|
||||||
},
|
|
||||||
emphasis: {
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
fontSize: '18',
|
|
||||||
fontWeight: 'bold'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
labelLine: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
data: [
|
|
||||||
{ value: 280, name: '1年以内' },
|
|
||||||
{ value: 420, name: '1-3年' },
|
|
||||||
{ value: 300, name: '3-5年' },
|
|
||||||
{ value: 180, name: '5-10年' },
|
|
||||||
{ value: 68, name: '10年以上' }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
});
|
|
||||||
|
|
||||||
// 绩效分布图表
|
|
||||||
const performanceChart = echarts.init(document.getElementById('performanceChart'));
|
|
||||||
performanceChart.setOption({
|
|
||||||
animation: false,
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'item'
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
orient: 'vertical',
|
|
||||||
right: 10,
|
|
||||||
top: 'center',
|
|
||||||
data: ['A(优秀)', 'B(良好)', 'C(合格)', 'D(待改进)']
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: '绩效分布',
|
|
||||||
type: 'pie',
|
|
||||||
radius: ['40%', '70%'],
|
|
||||||
avoidLabelOverlap: false,
|
|
||||||
itemStyle: {
|
|
||||||
borderRadius: 4,
|
|
||||||
borderColor: '#fff',
|
|
||||||
borderWidth: 2
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
show: false,
|
|
||||||
position: 'center'
|
|
||||||
},
|
|
||||||
emphasis: {
|
|
||||||
label: {
|
|
||||||
show: true,
|
|
||||||
fontSize: '18',
|
|
||||||
fontWeight: 'bold'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
labelLine: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
data: [
|
|
||||||
{ value: 180, name: 'A(优秀)' },
|
|
||||||
{ value: 420, name: 'B(良好)' },
|
|
||||||
{ value: 480, name: 'C(合格)' },
|
|
||||||
{ value: 68, name: 'D(待改进)' }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
});
|
|
||||||
|
|
||||||
// 招聘渠道图表
|
|
||||||
const recruitmentChart = echarts.init(document.getElementById('recruitmentChart'));
|
|
||||||
recruitmentChart.setOption({
|
|
||||||
animation: false,
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis',
|
|
||||||
axisPointer: {
|
|
||||||
type: 'shadow'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
data: ['猎头', '招聘网站', '内部推荐', '校园招聘', '社交媒体']
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
left: '3%',
|
|
||||||
right: '4%',
|
|
||||||
bottom: '3%',
|
|
||||||
containLabel: true
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'value'
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'category',
|
|
||||||
data: ['1月', '2月', '3月', '4月', '5月', '6月']
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: '猎头',
|
|
||||||
type: 'bar',
|
|
||||||
stack: 'total',
|
|
||||||
label: {
|
|
||||||
show: true
|
|
||||||
},
|
|
||||||
emphasis: {
|
|
||||||
focus: 'series'
|
|
||||||
},
|
|
||||||
data: [5, 3, 7, 4, 6, 8]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '招聘网站',
|
|
||||||
type: 'bar',
|
|
||||||
stack: 'total',
|
|
||||||
label: {
|
|
||||||
show: true
|
|
||||||
},
|
|
||||||
emphasis: {
|
|
||||||
focus: 'series'
|
|
||||||
},
|
|
||||||
data: [12, 10, 15, 18, 14, 16]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '内部推荐',
|
|
||||||
type: 'bar',
|
|
||||||
stack: 'total',
|
|
||||||
label: {
|
|
||||||
show: true
|
|
||||||
},
|
|
||||||
emphasis: {
|
|
||||||
focus: 'series'
|
|
||||||
},
|
|
||||||
data: [8, 6, 10, 7, 9, 11]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '校园招聘',
|
|
||||||
type: 'bar',
|
|
||||||
stack: 'total',
|
|
||||||
label: {
|
|
||||||
show: true
|
|
||||||
},
|
|
||||||
emphasis: {
|
|
||||||
focus: 'series'
|
|
||||||
},
|
|
||||||
data: [0, 0, 0, 15, 12, 10]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '社交媒体',
|
|
||||||
type: 'bar',
|
|
||||||
stack: 'total',
|
|
||||||
label: {
|
|
||||||
show: true
|
|
||||||
},
|
|
||||||
emphasis: {
|
|
||||||
focus: 'series'
|
|
||||||
},
|
|
||||||
data: [3, 5, 4, 6, 5, 7]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
});
|
|
||||||
|
|
||||||
// 窗口大小变化时重新调整图表大小
|
|
||||||
window.addEventListener('resize', function() {
|
|
||||||
departmentChart.resize();
|
|
||||||
positionChart.resize();
|
|
||||||
ageChart.resize();
|
|
||||||
seniorityChart.resize();
|
|
||||||
performanceChart.resize();
|
|
||||||
recruitmentChart.resize();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,400 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="zh-CN">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>人力管理系统 - 知识库</title>
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
|
|
||||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
|
|
||||||
<script>
|
|
||||||
tailwind.config = {
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
colors: {
|
|
||||||
primary: '#2D5CF6',
|
|
||||||
secondary: '#F5F6FA',
|
|
||||||
},
|
|
||||||
borderRadius: {
|
|
||||||
'none': '0px',
|
|
||||||
'sm': '2px',
|
|
||||||
DEFAULT: '4px',
|
|
||||||
'md': '8px',
|
|
||||||
'lg': '12px',
|
|
||||||
'xl': '16px',
|
|
||||||
'2xl': '20px',
|
|
||||||
'3xl': '24px',
|
|
||||||
'full': '9999px',
|
|
||||||
'button': '4px'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.fa-icon {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.scroll-container {
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
.scroll-content {
|
|
||||||
display: inline-block;
|
|
||||||
animation: scroll 20s linear infinite;
|
|
||||||
}
|
|
||||||
@keyframes scroll {
|
|
||||||
0% { transform: translateX(0); }
|
|
||||||
100% { transform: translateX(-100%); }
|
|
||||||
}
|
|
||||||
.card-hover:hover {
|
|
||||||
transform: translateY(-4px);
|
|
||||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="min-h-[1024px] flex flex-col bg-secondary">
|
|
||||||
<!-- 顶部导航栏 -->
|
|
||||||
<!-- <header class="w-full bg-primary text-white shadow-md">
|
|
||||||
<div class="container mx-auto px-6 h-[60px] flex items-center justify-between">
|
|
||||||
<div class="flex items-center space-x-8">
|
|
||||||
<a href="#" class="text-2xl font-['Pacifico']">人力</a>
|
|
||||||
<nav class="hidden md:flex space-x-6">
|
|
||||||
<a href="#" class="text-sm hover:opacity-80">多维统计</a>
|
|
||||||
<a href="#" class="text-sm hover:opacity-80">人员管理</a>
|
|
||||||
<a href="#" class="text-sm hover:opacity-80">组织管理</a>
|
|
||||||
<a href="#" class="text-sm hover:opacity-80">考勤管理</a>
|
|
||||||
<a href="#" class="text-sm hover:opacity-80">绩效管理</a>
|
|
||||||
<a href="#" class="text-sm hover:opacity-80">薪酬管理</a>
|
|
||||||
<a href="#" class="text-sm font-semibold hover:opacity-80">知识库</a>
|
|
||||||
<a href="#" class="text-sm hover:opacity-80">后台管理</a>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center space-x-4">
|
|
||||||
<div class="relative hidden md:block">
|
|
||||||
<input type="text" placeholder="搜索..." class="py-1 pl-8 pr-4 text-sm rounded-button bg-white bg-opacity-20 placeholder-white focus:outline-none focus:ring-1 focus:ring-white">
|
|
||||||
<i class="fas fa-search fa-icon text-sm absolute left-2 top-1/2 transform -translate-y-1/2"></i>
|
|
||||||
</div>
|
|
||||||
<button class="flex items-center space-x-1 bg-white bg-opacity-20 px-3 py-1 rounded-button hover:bg-opacity-30">
|
|
||||||
<i class="fas fa-robot fa-icon text-sm"></i>
|
|
||||||
<span class="text-sm whitespace-nowrap">AI 助手</span>
|
|
||||||
</button>
|
|
||||||
<div class="w-8 h-8 rounded-full bg-white flex items-center justify-center overflow-hidden">
|
|
||||||
<img src="https://mastergo.com/ai/api/search-image?query=professional20business20profile20photo20of20a20young20asian20female20executive20with20short20hair20wearing20formal20attire20against20a20neutral20light20gray20background&width=80&height=80&orientation=squarish&flag=7fe686c57027aca4551bef56744d5fdf" alt="用户头像" class="w-full h-full object-cover">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header> -->
|
|
||||||
|
|
||||||
<!-- 主内容区域 -->
|
|
||||||
<main class="flex-1 container mx-auto px-6 py-8">
|
|
||||||
<!-- 面包屑导航 -->
|
|
||||||
<!-- <div class="flex items-center text-sm text-gray-600 mb-4">
|
|
||||||
<a href="#" class="hover:text-primary">首页</a>
|
|
||||||
<i class="fas fa-chevron-right fa-icon mx-2 text-xs"></i>
|
|
||||||
<span>知识库</span>
|
|
||||||
</div> -->
|
|
||||||
|
|
||||||
<!-- 页面标题和操作区 -->
|
|
||||||
<div class="flex justify-between items-center mb-6">
|
|
||||||
<h1 class="text-2xl font-bold text-gray-800">知识库管理</h1>
|
|
||||||
<div class="flex space-x-3">
|
|
||||||
<div class="relative">
|
|
||||||
<input type="text" placeholder="搜索知识..." class="py-2 pl-10 pr-4 text-sm rounded-button border border-gray-300 focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
|
|
||||||
<i class="fas fa-search fa-icon text-gray-400 absolute left-3 top-1/2 transform -translate-y-1/2"></i>
|
|
||||||
</div>
|
|
||||||
<button class="bg-primary text-white px-4 py-2 rounded-button hover:bg-opacity-90 flex items-center space-x-2">
|
|
||||||
<i class="fas fa-plus fa-icon text-sm"></i>
|
|
||||||
<span class="whitespace-nowrap">新建知识</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 公告栏 -->
|
|
||||||
<div class="bg-white rounded-md shadow-sm p-3 mb-6">
|
|
||||||
<div class="flex items-center">
|
|
||||||
<div class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded-button text-xs font-medium mr-3">公告</div>
|
|
||||||
<div class="scroll-container w-full">
|
|
||||||
<div class="scroll-content text-sm text-gray-700">
|
|
||||||
<span class="mr-8">系统将于 2023 年 12 月 15 日 00:00 - 02:00 进行维护升级</span>
|
|
||||||
<span class="mr-8">新员工入职指南已更新，请及时查阅</span>
|
|
||||||
<span class="mr-8">2023 年度绩效考核标准已发布</span>
|
|
||||||
<span class="mr-8">系统将于 2023 年 12 月 15 日 00:00 - 02:00 进行维护升级</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 分类筛选 -->
|
|
||||||
<div class="flex items-center space-x-4 mb-6 overflow-x-auto pb-2">
|
|
||||||
<button class="px-4 py-2 bg-primary text-white rounded-button whitespace-nowrap">全部</button>
|
|
||||||
<button class="px-4 py-2 bg-white border border-gray-200 rounded-button hover:bg-gray-50 whitespace-nowrap">政策制度</button>
|
|
||||||
<button class="px-4 py-2 bg-white border border-gray-200 rounded-button hover:bg-gray-50 whitespace-nowrap">操作手册</button>
|
|
||||||
<button class="px-4 py-2 bg-white border border-gray-200 rounded-button hover:bg-gray-50 whitespace-nowrap">培训资料</button>
|
|
||||||
<button class="px-4 py-2 bg-white border border-gray-200 rounded-button hover:bg-gray-50 whitespace-nowrap">常见问题</button>
|
|
||||||
<button class="px-4 py-2 bg-white border border-gray-200 rounded-button hover:bg-gray-50 whitespace-nowrap">模板下载</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 知识卡片列表 -->
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
|
|
||||||
<!-- 卡片1 -->
|
|
||||||
<div class="bg-white rounded-md shadow-sm overflow-hidden transition-all duration-300 card-hover">
|
|
||||||
<div class="h-40 overflow-hidden">
|
|
||||||
<img src="https://mastergo.com/ai/api/search-image?query=a20modern20business20document20with20clean20design20and20minimalist20layout20on20a20white20desk20with20a20pen20and20coffee20cup20in20the20background&width=400&height=200&orientation=landscape&flag=1e4cf2beacde2cc80fc63a0f89a9703a" alt="文档封面" class="w-full h-full object-cover">
|
|
||||||
</div>
|
|
||||||
<div class="p-4">
|
|
||||||
<div class="flex justify-between items-start mb-2">
|
|
||||||
<h3 class="font-medium text-gray-800">2023 年员工手册</h3>
|
|
||||||
<span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-button">政策制度</span>
|
|
||||||
</div>
|
|
||||||
<p class="text-sm text-gray-600 mb-3 line-clamp-2">包含公司文化、行为规范、考勤制度、福利政策等最新修订版员工手册，适用于全体员工。</p>
|
|
||||||
<div class="flex justify-between items-center text-xs text-gray-500">
|
|
||||||
<span>更新于 2023-11-20</span>
|
|
||||||
<span>下载 128 次</span>
|
|
||||||
</div>
|
|
||||||
<div class="mt-3 flex space-x-2">
|
|
||||||
<button class="text-primary hover:text-primary-dark text-sm flex items-center">
|
|
||||||
<i class="fas fa-eye fa-icon mr-1"></i> 预览
|
|
||||||
</button>
|
|
||||||
<button class="text-primary hover:text-primary-dark text-sm flex items-center">
|
|
||||||
<i class="fas fa-download fa-icon mr-1"></i> 下载
|
|
||||||
</button>
|
|
||||||
<button class="text-primary hover:text-primary-dark text-sm flex items-center">
|
|
||||||
<i class="fas fa-share-alt fa-icon mr-1"></i> 分享
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 卡片2 -->
|
|
||||||
<div class="bg-white rounded-md shadow-sm overflow-hidden transition-all duration-300 card-hover">
|
|
||||||
<div class="h-40 overflow-hidden">
|
|
||||||
<img src="https://mastergo.com/ai/api/search-image?query=a20step20by20step20illustration20of20HR20software20interface20with20clear20numbering20and20annotations20on20a20light20gray20background&width=400&height=200&orientation=landscape&flag=108451af3b1eb2058f31b710d4071080" alt="操作手册封面" class="w-full h-full object-cover">
|
|
||||||
</div>
|
|
||||||
<div class="p-4">
|
|
||||||
<div class="flex justify-between items-start mb-2">
|
|
||||||
<h3 class="font-medium text-gray-800">考勤系统操作指南</h3>
|
|
||||||
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-button">操作手册</span>
|
|
||||||
</div>
|
|
||||||
<p class="text-sm text-gray-600 mb-3 line-clamp-2">详细说明如何使用公司考勤系统，包括打卡、请假申请、加班申请、考勤异常处理等操作步骤。</p>
|
|
||||||
<div class="flex justify-between items-center text-xs text-gray-500">
|
|
||||||
<span>更新于 2023-10-15</span>
|
|
||||||
<span>下载 256 次</span>
|
|
||||||
</div>
|
|
||||||
<div class="mt-3 flex space-x-2">
|
|
||||||
<button class="text-primary hover:text-primary-dark text-sm flex items-center">
|
|
||||||
<i class="fas fa-eye fa-icon mr-1"></i> 预览
|
|
||||||
</button>
|
|
||||||
<button class="text-primary hover:text-primary-dark text-sm flex items-center">
|
|
||||||
<i class="fas fa-download fa-icon mr-1"></i> 下载
|
|
||||||
</button>
|
|
||||||
<button class="text-primary hover:text-primary-dark text-sm flex items-center">
|
|
||||||
<i class="fas fa-share-alt fa-icon mr-1"></i> 分享
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 卡片3 -->
|
|
||||||
<div class="bg-white rounded-md shadow-sm overflow-hidden transition-all duration-300 card-hover">
|
|
||||||
<div class="h-40 overflow-hidden">
|
|
||||||
<img src="https://mastergo.com/ai/api/search-image?query=a20professional20training20presentation20slide20with20bullet20points20and20infographics20on20a20projector20screen20in20a20meeting20room&width=400&height=200&orientation=landscape&flag=91a52e2f3cc2550ca2a643ea105f2d4b" alt="培训资料封面" class="w-full h-full object-cover">
|
|
||||||
</div>
|
|
||||||
<div class="p-4">
|
|
||||||
<div class="flex justify-between items-start mb-2">
|
|
||||||
<h3 class="font-medium text-gray-800">新员工入职培训</h3>
|
|
||||||
<span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded-button">培训资料</span>
|
|
||||||
</div>
|
|
||||||
<p class="text-sm text-gray-600 mb-3 line-clamp-2">新员工入职培训全套资料，包含公司介绍、部门职能、产品知识、安全规范等内容。</p>
|
|
||||||
<div class="flex justify-between items-center text-xs text-gray-500">
|
|
||||||
<span>更新于 2023-09-28</span>
|
|
||||||
<span>下载 189 次</span>
|
|
||||||
</div>
|
|
||||||
<div class="mt-3 flex space-x-2">
|
|
||||||
<button class="text-primary hover:text-primary-dark text-sm flex items-center">
|
|
||||||
<i class="fas fa-eye fa-icon mr-1"></i> 预览
|
|
||||||
</button>
|
|
||||||
<button class="text-primary hover:text-primary-dark text-sm flex items-center">
|
|
||||||
<i class="fas fa-download fa-icon mr-1"></i> 下载
|
|
||||||
</button>
|
|
||||||
<button class="text-primary hover:text-primary-dark text-sm flex items-center">
|
|
||||||
<i class="fas fa-share-alt fa-icon mr-1"></i> 分享
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 卡片4 -->
|
|
||||||
<div class="bg-white rounded-md shadow-sm overflow-hidden transition-all duration-300 card-hover">
|
|
||||||
<div class="h-40 overflow-hidden">
|
|
||||||
<img src="https://mastergo.com/ai/api/search-image?query=a20frequently20asked20questions20list20with20question20marks20and20answers20in20a20modern20digital20interface20design&width=400&height=200&orientation=landscape&flag=923ef06f9362683938111ad04bb8643c" alt="FAQ封面" class="w-full h-full object-cover">
|
|
||||||
</div>
|
|
||||||
<div class="p-4">
|
|
||||||
<div class="flex justify-between items-start mb-2">
|
|
||||||
<h3 class="font-medium text-gray-800">HR 系统常见问题</h3>
|
|
||||||
<span class="bg-orange-100 text-orange-800 text-xs px-2 py-1 rounded-button">常见问题</span>
|
|
||||||
</div>
|
|
||||||
<p class="text-sm text-gray-600 mb-3 line-clamp-2">整理了员工在使用 HR 系统过程中遇到的常见问题及解决方案，持续更新中。</p>
|
|
||||||
<div class="flex justify-between items-center text-xs text-gray-500">
|
|
||||||
<span>更新于 2023-11-05</span>
|
|
||||||
<span>浏览 342 次</span>
|
|
||||||
</div>
|
|
||||||
<div class="mt-3 flex space-x-2">
|
|
||||||
<button class="text-primary hover:text-primary-dark text-sm flex items-center">
|
|
||||||
<i class="fas fa-eye fa-icon mr-1"></i> 查看
|
|
||||||
</button>
|
|
||||||
<button class="text-primary hover:text-primary-dark text-sm flex items-center">
|
|
||||||
<i class="fas fa-bookmark fa-icon mr-1"></i> 收藏
|
|
||||||
</button>
|
|
||||||
<button class="text-primary hover:text-primary-dark text-sm flex items-center">
|
|
||||||
<i class="fas fa-share-alt fa-icon mr-1"></i> 分享
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 卡片5 -->
|
|
||||||
<div class="bg-white rounded-md shadow-sm overflow-hidden transition-all duration-300 card-hover">
|
|
||||||
<div class="h-40 overflow-hidden">
|
|
||||||
<img src="https://mastergo.com/ai/api/search-image?query=a20collection20of20office20document20templates20including20forms20and20contracts20neatly20stacked20on20a20desk20with20a20laptop&width=400&height=200&orientation=landscape&flag=2a11c867bb72b869508c9cbccb7f198c" alt="模板封面" class="w-full h-full object-cover">
|
|
||||||
</div>
|
|
||||||
<div class="p-4">
|
|
||||||
<div class="flex justify-between items-start mb-2">
|
|
||||||
<h3 class="font-medium text-gray-800">人力资源常用模板</h3>
|
|
||||||
<span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded-button">模板下载</span>
|
|
||||||
</div>
|
|
||||||
<p class="text-sm text-gray-600 mb-3 line-clamp-2">包含劳动合同、离职申请表、转正申请表、调岗申请表等常用人力资源表格模板。</p>
|
|
||||||
<div class="flex justify-between items-center text-xs text-gray-500">
|
|
||||||
<span>更新于 2023-08-12</span>
|
|
||||||
<span>下载 421 次</span>
|
|
||||||
</div>
|
|
||||||
<div class="mt-3 flex space-x-2">
|
|
||||||
<button class="text-primary hover:text-primary-dark text-sm flex items-center">
|
|
||||||
<i class="fas fa-eye fa-icon mr-1"></i> 预览
|
|
||||||
</button>
|
|
||||||
<button class="text-primary hover:text-primary-dark text-sm flex items-center">
|
|
||||||
<i class="fas fa-download fa-icon mr-1"></i> 下载
|
|
||||||
</button>
|
|
||||||
<button class="text-primary hover:text-primary-dark text-sm flex items-center">
|
|
||||||
<i class="fas fa-share-alt fa-icon mr-1"></i> 分享
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 卡片6 -->
|
|
||||||
<div class="bg-white rounded-md shadow-sm overflow-hidden transition-all duration-300 card-hover">
|
|
||||||
<div class="h-40 overflow-hidden">
|
|
||||||
<img src="https://mastergo.com/ai/api/search-image?query=a20performance20management20framework20diagram20with20key20metrics20and20evaluation20criteria20presented20in20a20modern20corporate20style&width=400&height=200&orientation=landscape&flag=72c9f106f07f07f22208f2c8edfd99fb" alt="绩效封面" class="w-full h-full object-cover">
|
|
||||||
</div>
|
|
||||||
<div class="p-4">
|
|
||||||
<div class="flex justify-between items-start mb-2">
|
|
||||||
<h3 class="font-medium text-gray-800">绩效考核标准与流程</h3>
|
|
||||||
<span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-button">政策制度</span>
|
|
||||||
</div>
|
|
||||||
<p class="text-sm text-gray-600 mb-3 line-clamp-2">详细说明公司绩效考核的标准、流程、时间节点及评分细则，适用于管理人员参考。</p>
|
|
||||||
<div class="flex justify-between items-center text-xs text-gray-500">
|
|
||||||
<span>更新于 2023-07-30</span>
|
|
||||||
<span>下载 178 次</span>
|
|
||||||
</div>
|
|
||||||
<div class="mt-3 flex space-x-2">
|
|
||||||
<button class="text-primary hover:text-primary-dark text-sm flex items-center">
|
|
||||||
<i class="fas fa-eye fa-icon mr-1"></i> 预览
|
|
||||||
</button>
|
|
||||||
<button class="text-primary hover:text-primary-dark text-sm flex items-center">
|
|
||||||
<i class="fas fa-download fa-icon mr-1"></i> 下载
|
|
||||||
</button>
|
|
||||||
<button class="text-primary hover:text-primary-dark text-sm flex items-center">
|
|
||||||
<i class="fas fa-share-alt fa-icon mr-1"></i> 分享
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 分页 -->
|
|
||||||
<div class="flex justify-center mt-8">
|
|
||||||
<nav class="inline-flex rounded-md shadow-sm">
|
|
||||||
<button class="px-3 py-1 rounded-l-md border border-gray-300 bg-white text-gray-700 hover:bg-gray-50">
|
|
||||||
<i class="fas fa-chevron-left fa-icon"></i>
|
|
||||||
</button>
|
|
||||||
<button class="px-3 py-1 border-t border-b border-gray-300 bg-primary text-white">1</button>
|
|
||||||
<button class="px-3 py-1 border-t border-b border-gray-300 bg-white text-gray-700 hover:bg-gray-50">2</button>
|
|
||||||
<button class="px-3 py-1 border-t border-b border-gray-300 bg-white text-gray-700 hover:bg-gray-50">3</button>
|
|
||||||
<button class="px-3 py-1 border-t border-b border-gray-300 bg-white text-gray-700 hover:bg-gray-50">4</button>
|
|
||||||
<button class="px-3 py-1 border-t border-b border-gray-300 bg-white text-gray-700 hover:bg-gray-50">5</button>
|
|
||||||
<button class="px-3 py-1 rounded-r-md border border-gray-300 bg-white text-gray-700 hover:bg-gray-50">
|
|
||||||
<i class="fas fa-chevron-right fa-icon"></i>
|
|
||||||
</button>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<!-- 页脚 -->
|
|
||||||
<footer class="w-full bg-gray-800 text-white py-8">
|
|
||||||
<div class="container mx-auto px-6">
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-6">
|
|
||||||
<div>
|
|
||||||
<h3 class="text-lg font-medium mb-4">关于我们</h3>
|
|
||||||
<ul class="space-y-2 text-sm text-gray-300">
|
|
||||||
<li><a href="#" class="hover:text-white">公司简介</a></li>
|
|
||||||
<li><a href="#" class="hover:text-white">发展历程</a></li>
|
|
||||||
<li><a href="#" class="hover:text-white">企业文化</a></li>
|
|
||||||
<li><a href="#" class="hover:text-white">团队介绍</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="text-lg font-medium mb-4">帮助中心</h3>
|
|
||||||
<ul class="space-y-2 text-sm text-gray-300">
|
|
||||||
<li><a href="#" class="hover:text-white">使用指南</a></li>
|
|
||||||
<li><a href="#" class="hover:text-white">常见问题</a></li>
|
|
||||||
<li><a href="#" class="hover:text-white">视频教程</a></li>
|
|
||||||
<li><a href="#" class="hover:text-white">在线客服</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="text-lg font-medium mb-4">联系我们</h3>
|
|
||||||
<ul class="space-y-2 text-sm text-gray-300">
|
|
||||||
<li><i class="fas fa-map-marker-alt fa-icon mr-2"></i> 北京市海淀区中关村南大街5号</li>
|
|
||||||
<li><i class="fas fa-phone fa-icon mr-2"></i> 400-888-8888</li>
|
|
||||||
<li><i class="fas fa-envelope fa-icon mr-2"></i> hr@company.com</li>
|
|
||||||
<li><i class="fas fa-clock fa-icon mr-2"></i> 周一至周五 9:00-18:00</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="text-lg font-medium mb-4">关注我们</h3>
|
|
||||||
<div class="flex space-x-4 mb-4">
|
|
||||||
<a href="#" class="w-8 h-8 bg-gray-700 rounded-full flex items-center justify-center hover:bg-primary">
|
|
||||||
<i class="fab fa-weixin fa-icon"></i>
|
|
||||||
</a>
|
|
||||||
<a href="#" class="w-8 h-8 bg-gray-700 rounded-full flex items-center justify-center hover:bg-primary">
|
|
||||||
<i class="fab fa-weibo fa-icon"></i>
|
|
||||||
</a>
|
|
||||||
<a href="#" class="w-8 h-8 bg-gray-700 rounded-full flex items-center justify-center hover:bg-primary">
|
|
||||||
<i class="fab fa-linkedin-in fa-icon"></i>
|
|
||||||
</a>
|
|
||||||
<a href="#" class="w-8 h-8 bg-gray-700 rounded-full flex items-center justify-center hover:bg-primary">
|
|
||||||
<i class="fab fa-github fa-icon"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<p class="text-sm text-gray-300">订阅我们的新闻通讯</p>
|
|
||||||
<div class="mt-2 flex">
|
|
||||||
<input type="email" placeholder="您的邮箱" class="py-2 px-3 text-sm rounded-l-md border-none focus:outline-none focus:ring-1 focus:ring-primary w-full">
|
|
||||||
<button class="bg-primary text-white px-3 py-2 rounded-r-md hover:bg-opacity-90">
|
|
||||||
<i class="fas fa-paper-plane fa-icon"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="pt-6 border-t border-gray-700 text-center text-sm text-gray-400">
|
|
||||||
<p>© 2023 人力管理系统 版权所有 | 京ICP备12345678号-1 | 京公网安备11010802012345号</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,566 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="zh-CN">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>人力资源管理系统</title>
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
|
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
|
||||||
<script>
|
|
||||||
tailwind.config = {
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
colors: {
|
|
||||||
primary: '#2D5CF6',
|
|
||||||
secondary: '#F5F6FA'
|
|
||||||
},
|
|
||||||
borderRadius: {
|
|
||||||
'none': '0px',
|
|
||||||
'sm': '2px',
|
|
||||||
DEFAULT: '4px',
|
|
||||||
'md': '8px',
|
|
||||||
'lg': '12px',
|
|
||||||
'xl': '16px',
|
|
||||||
'2xl': '20px',
|
|
||||||
'3xl': '24px',
|
|
||||||
'full': '9999px',
|
|
||||||
'button': '4px'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.marquee {
|
|
||||||
animation: marquee 15s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes marquee {
|
|
||||||
0% {
|
|
||||||
transform: translateX(100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
transform: translateX(-100%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tree-item {
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tree-item:hover {
|
|
||||||
background-color: #e0e0e0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-row:hover {
|
|
||||||
background-color: #f0f4ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-input:focus {
|
|
||||||
outline: none;
|
|
||||||
box-shadow: 0 0 0 2px rgba(45, 92, 246, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown:hover .dropdown-menu {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
i.fa-icon {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body class="bg-gray-50 min-h-screen flex flex-col">
|
|
||||||
<!-- 顶部导航栏 -->
|
|
||||||
<!-- <header class="w-full bg-primary text-white">
|
|
||||||
<div class="container mx-auto px-4">
|
|
||||||
<div class="flex items-center justify-between h-16">
|
|
||||||
<div class="flex items-center">
|
|
||||||
<span class="font-['Pacifico'] text-xl">人力</span>
|
|
||||||
</div>
|
|
||||||
<nav class="hidden md:flex space-x-6">
|
|
||||||
<a href="#" class="text-sm hover:text-gray-200 transition">多维统计</a>
|
|
||||||
<a href="#" class="text-sm font-medium">人员管理</a>
|
|
||||||
<a href="#" class="text-sm hover:text-gray-200 transition">组织管理</a>
|
|
||||||
<a href="#" class="text-sm hover:text-gray-200 transition">考勤管理</a>
|
|
||||||
<a href="#" class="text-sm hover:text-gray-200 transition">绩效管理</a>
|
|
||||||
<a href="#" class="text-sm hover:text-gray-200 transition">薪酬管理</a>
|
|
||||||
<a href="#" class="text-sm hover:text-gray-200 transition">知识库</a>
|
|
||||||
<a href="#" class="text-sm hover:text-gray-200 transition">后台管理</a>
|
|
||||||
</nav>
|
|
||||||
<div class="flex items-center space-x-4">
|
|
||||||
<div class="relative">
|
|
||||||
<input type="text" placeholder="搜索..."
|
|
||||||
class="search-input bg-white bg-opacity-20 text-sm rounded-button pl-8 pr-4 py-1 w-40 focus:w-56 transition-all duration-300 placeholder-white">
|
|
||||||
<i
|
|
||||||
class="fas fa-search absolute left-2 top-1/2 transform -translate-y-1/2 text-white text-sm"></i>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
class="bg-white bg-opacity-20 hover:bg-opacity-30 text-white text-xs px-3 py-1 rounded-button flex items-center space-x-1 transition">
|
|
||||||
<i class="fas fa-robot text-sm"></i>
|
|
||||||
<span>AI助手</span>
|
|
||||||
</button>
|
|
||||||
<div class="dropdown relative">
|
|
||||||
<button class="flex items-center space-x-1">
|
|
||||||
<div class="w-8 h-8 rounded-full bg-white bg-opacity-20 flex items-center justify-center">
|
|
||||||
<i class="fas fa-user text-sm"></i>
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
<div class="dropdown-menu absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg z-10 hidden">
|
|
||||||
<div class="py-1">
|
|
||||||
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">个人中心</a>
|
|
||||||
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">系统设置</a>
|
|
||||||
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">退出登录</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="bg-yellow-50 h-10 flex items-center overflow-hidden">
|
|
||||||
<div class="container mx-auto px-4">
|
|
||||||
<div class="relative">
|
|
||||||
<div class="marquee whitespace-nowrap text-xs text-gray-900">
|
|
||||||
<span class="inline-block mr-8">【公告】2023年度绩效考核工作将于12月1日正式启动</span>
|
|
||||||
<span class="inline-block mr-8">【通知】关于2024年春节放假安排的通知</span>
|
|
||||||
<span class="inline-block mr-8">【提醒】请各部门及时更新员工信息</span>
|
|
||||||
<span class="inline-block">【培训】新员工入职培训将于下周一举行</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header> -->
|
|
||||||
<!-- 主内容区 -->
|
|
||||||
<main class="flex-1 container mx-auto px-4 py-6">
|
|
||||||
<div class="flex">
|
|
||||||
<!-- 左侧组织架构树 -->
|
|
||||||
<div class="w-1/5 pr-4">
|
|
||||||
<div class="bg-white rounded-md shadow p-4 h-full">
|
|
||||||
<div class="flex items-center justify-between mb-4">
|
|
||||||
<h3 class="text-sm font-medium">组织架构</h3>
|
|
||||||
<button class="text-primary text-xs hover:text-primary-dark">
|
|
||||||
<i class="fas fa-sync-alt fa-icon"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="space-y-1">
|
|
||||||
<div class="tree-item cursor-pointer p-2 rounded-md hover:bg-secondary">
|
|
||||||
<div class="flex items-center">
|
|
||||||
<i class="fas fa-building fa-icon mr-2 text-gray-500"></i>
|
|
||||||
<span class="text-sm">集团公司</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="pl-6">
|
|
||||||
<div class="tree-item cursor-pointer p-2 rounded-md hover:bg-secondary">
|
|
||||||
<div class="flex items-center">
|
|
||||||
<i class="fas fa-sitemap fa-icon mr-2 text-gray-500"></i>
|
|
||||||
<span class="text-sm">人力资源部</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="pl-6">
|
|
||||||
<div class="tree-item cursor-pointer p-2 rounded-md hover:bg-secondary">
|
|
||||||
<div class="flex items-center">
|
|
||||||
<i class="fas fa-users fa-icon mr-2 text-gray-500"></i>
|
|
||||||
<span class="text-sm">招聘组</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="tree-item cursor-pointer p-2 rounded-md hover:bg-secondary">
|
|
||||||
<div class="flex items-center">
|
|
||||||
<i class="fas fa-chart-line fa-icon mr-2 text-gray-500"></i>
|
|
||||||
<span class="text-sm">绩效组</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="tree-item cursor-pointer p-2 rounded-md hover:bg-secondary">
|
|
||||||
<div class="flex items-center">
|
|
||||||
<i class="fas fa-money-bill-wave fa-icon mr-2 text-gray-500"></i>
|
|
||||||
<span class="text-sm">薪酬组</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="tree-item cursor-pointer p-2 rounded-md hover:bg-secondary">
|
|
||||||
<div class="flex items-center">
|
|
||||||
<i class="fas fa-sitemap fa-icon mr-2 text-gray-500"></i>
|
|
||||||
<span class="text-sm">财务部</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="tree-item cursor-pointer p-2 rounded-md hover:bg-secondary">
|
|
||||||
<div class="flex items-center">
|
|
||||||
<i class="fas fa-sitemap fa-icon mr-2 text-gray-500"></i>
|
|
||||||
<span class="text-sm">技术研发中心</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 右侧内容区 -->
|
|
||||||
<div class="w-4/5">
|
|
||||||
<div class="bg-white rounded-md shadow p-6">
|
|
||||||
<!-- 筛选区 -->
|
|
||||||
<div class="mb-6">
|
|
||||||
<h2 class="text-lg font-medium mb-4">人员筛选</h2>
|
|
||||||
<div class="grid grid-cols-4 gap-4">
|
|
||||||
<div>
|
|
||||||
<label class="block text-sm text-gray-600 mb-1">姓名</label>
|
|
||||||
<input type="text"
|
|
||||||
class="w-full border border-gray-300 rounded-button px-3 py-1 text-sm focus:border-primary focus:ring-1 focus:ring-primary">
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label class="block text-sm text-gray-600 mb-1">电话</label>
|
|
||||||
<input type="text"
|
|
||||||
class="w-full border border-gray-300 rounded-button px-3 py-1 text-sm focus:border-primary focus:ring-1 focus:ring-primary">
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label class="block text-sm text-gray-600 mb-1">身份证号</label>
|
|
||||||
<input type="text"
|
|
||||||
class="w-full border border-gray-300 rounded-button px-3 py-1 text-sm focus:border-primary focus:ring-1 focus:ring-primary">
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label class="block text-sm text-gray-600 mb-1">部门</label>
|
|
||||||
<div class="relative">
|
|
||||||
<select
|
|
||||||
class="w-full border border-gray-300 rounded-button px-3 py-1 text-sm appearance-none bg-white">
|
|
||||||
<option>全部部门</option>
|
|
||||||
<option>人力资源部</option>
|
|
||||||
<option>财务部</option>
|
|
||||||
<option>技术研发中心</option>
|
|
||||||
</select>
|
|
||||||
<div class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
|
|
||||||
<i class="fas fa-chevron-down fa-icon text-gray-400"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label class="block text-sm text-gray-600 mb-1">性别</label>
|
|
||||||
<div class="flex space-x-2">
|
|
||||||
<label class="inline-flex items-center">
|
|
||||||
<input type="radio" name="gender" class="text-primary focus:ring-primary">
|
|
||||||
<span class="ml-1 text-sm">男</span>
|
|
||||||
</label>
|
|
||||||
<label class="inline-flex items-center">
|
|
||||||
<input type="radio" name="gender" class="text-primary focus:ring-primary">
|
|
||||||
<span class="ml-1 text-sm">女</span>
|
|
||||||
</label>
|
|
||||||
<label class="inline-flex items-center">
|
|
||||||
<input type="radio" name="gender" class="text-primary focus:ring-primary">
|
|
||||||
<span class="ml-1 text-sm">不限</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label class="block text-sm text-gray-600 mb-1">年龄范围</label>
|
|
||||||
<div class="flex space-x-2">
|
|
||||||
<input type="number" placeholder="最小"
|
|
||||||
class="w-1/2 border border-gray-300 rounded-button px-3 py-1 text-sm">
|
|
||||||
<input type="number" placeholder="最大"
|
|
||||||
class="w-1/2 border border-gray-300 rounded-button px-3 py-1 text-sm">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label class="block text-sm text-gray-600 mb-1">绩效状态</label>
|
|
||||||
<div class="relative">
|
|
||||||
<select
|
|
||||||
class="w-full border border-gray-300 rounded-button px-3 py-1 text-sm appearance-none bg-white">
|
|
||||||
<option>全部状态</option>
|
|
||||||
<option>新建</option>
|
|
||||||
<option>已审批</option>
|
|
||||||
<option>审批中</option>
|
|
||||||
<option>已确认</option>
|
|
||||||
</select>
|
|
||||||
<div class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
|
|
||||||
<i class="fas fa-chevron-down fa-icon text-gray-400"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-end">
|
|
||||||
<button
|
|
||||||
class="bg-primary hover:bg-primary-dark text-white px-4 py-1 rounded-button text-sm flex items-center">
|
|
||||||
<i class="fas fa-search fa-icon mr-1"></i>
|
|
||||||
<span>搜索</span>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="ml-2 border border-gray-300 hover:bg-gray-50 px-4 py-1 rounded-button text-sm">
|
|
||||||
重置
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 操作按钮区 -->
|
|
||||||
<div class="flex justify-between items-center mb-4">
|
|
||||||
<h2 class="text-lg font-medium">人员绩效列表</h2>
|
|
||||||
<div class="flex space-x-2">
|
|
||||||
<button
|
|
||||||
class="bg-primary hover:bg-primary-dark text-white px-3 py-1 rounded-button text-sm flex items-center">
|
|
||||||
<i class="fas fa-plus fa-icon mr-1"></i>
|
|
||||||
<span>新增</span>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="border border-gray-300 hover:bg-gray-50 px-3 py-1 rounded-button text-sm flex items-center">
|
|
||||||
<i class="fas fa-download fa-icon mr-1"></i>
|
|
||||||
<span>导出</span>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="border border-gray-300 hover:bg-gray-50 px-3 py-1 rounded-button text-sm flex items-center">
|
|
||||||
<i class="fas fa-print fa-icon mr-1"></i>
|
|
||||||
<span>打印</span>
|
|
||||||
</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-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
||||||
序号</th>
|
|
||||||
<th scope="col"
|
|
||||||
class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
||||||
姓名</th>
|
|
||||||
<th scope="col"
|
|
||||||
class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
||||||
性别</th>
|
|
||||||
<th scope="col"
|
|
||||||
class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
||||||
年龄</th>
|
|
||||||
<th scope="col"
|
|
||||||
class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
||||||
部门</th>
|
|
||||||
<th scope="col"
|
|
||||||
class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
||||||
职位</th>
|
|
||||||
<th scope="col"
|
|
||||||
class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
||||||
绩效总分</th>
|
|
||||||
<th scope="col"
|
|
||||||
class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
||||||
绩效状态</th>
|
|
||||||
<th scope="col"
|
|
||||||
class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
||||||
操作</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody class="bg-white divide-y divide-gray-200">
|
|
||||||
<tr class="table-row">
|
|
||||||
<td class="px-4 py-2 whitespace-nowrap text-sm">1</td>
|
|
||||||
<td class="px-4 py-2 whitespace-nowrap text-sm font-medium">张明远</td>
|
|
||||||
<td class="px-4 py-2 whitespace-nowrap text-sm">男</td>
|
|
||||||
<td class="px-4 py-2 whitespace-nowrap text-sm">32</td>
|
|
||||||
<td class="px-4 py-2 whitespace-nowrap text-sm">人力资源部</td>
|
|
||||||
<td class="px-4 py-2 whitespace-nowrap text-sm">招聘主管</td>
|
|
||||||
<td class="px-4 py-2 whitespace-nowrap text-sm">92.5</td>
|
|
||||||
<td class="px-4 py-2 whitespace-nowrap text-sm">
|
|
||||||
<span
|
|
||||||
class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">已确认</span>
|
|
||||||
</td>
|
|
||||||
<td class="px-4 py-2 whitespace-nowrap text-sm">
|
|
||||||
<button class="text-primary hover:text-primary-dark mr-2">
|
|
||||||
<i class="fas fa-edit fa-icon"></i>
|
|
||||||
</button>
|
|
||||||
<button class="text-red-500 hover:text-red-700">
|
|
||||||
<i class="fas fa-trash-alt fa-icon"></i>
|
|
||||||
</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="table-row">
|
|
||||||
<td class="px-4 py-2 whitespace-nowrap text-sm">2</td>
|
|
||||||
<td class="px-4 py-2 whitespace-nowrap text-sm font-medium">李思雨</td>
|
|
||||||
<td class="px-4 py-2 whitespace-nowrap text-sm">女</td>
|
|
||||||
<td class="px-4 py-2 whitespace-nowrap text-sm">28</td>
|
|
||||||
<td class="px-4 py-2 whitespace-nowrap text-sm">财务部</td>
|
|
||||||
<td class="px-4 py-2 whitespace-nowrap text-sm">会计</td>
|
|
||||||
<td class="px-4 py-2 whitespace-nowrap text-sm">88.0</td>
|
|
||||||
<td class="px-4 py-2 whitespace-nowrap text-sm">
|
|
||||||
<span
|
|
||||||
class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">审批中</span>
|
|
||||||
</td>
|
|
||||||
<td class="px-4 py-2 whitespace-nowrap text-sm">
|
|
||||||
<button class="text-primary hover:text-primary-dark mr-2">
|
|
||||||
<i class="fas fa-edit fa-icon"></i>
|
|
||||||
</button>
|
|
||||||
<button class="text-red-500 hover:text-red-700">
|
|
||||||
<i class="fas fa-trash-alt fa-icon"></i>
|
|
||||||
</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="table-row">
|
|
||||||
<td class="px-4 py-2 whitespace-nowrap text-sm">3</td>
|
|
||||||
<td class="px-4 py-2 whitespace-nowrap text-sm font-medium">王建国</td>
|
|
||||||
<td class="px-4 py-2 whitespace-nowrap text-sm">男</td>
|
|
||||||
<td class="px-4 py-2 whitespace-nowrap text-sm">45</td>
|
|
||||||
<td class="px-4 py-2 whitespace-nowrap text-sm">技术研发中心</td>
|
|
||||||
<td class="px-4 py-2 whitespace-nowrap text-sm">技术总监</td>
|
|
||||||
<td class="px-4 py-2 whitespace-nowrap text-sm">95.5</td>
|
|
||||||
<td class="px-4 py-2 whitespace-nowrap text-sm">
|
|
||||||
<span
|
|
||||||
class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">已确认</span>
|
|
||||||
</td>
|
|
||||||
<td class="px-4 py-2 whitespace-nowrap text-sm">
|
|
||||||
<button class="text-primary hover:text-primary-dark mr-2">
|
|
||||||
<i class="fas fa-edit fa-icon"></i>
|
|
||||||
</button>
|
|
||||||
<button class="text-red-500 hover:text-red-700">
|
|
||||||
<i class="fas fa-trash-alt fa-icon"></i>
|
|
||||||
</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="table-row">
|
|
||||||
<td class="px-4 py-2 whitespace-nowrap text-sm">4</td>
|
|
||||||
<td class="px-4 py-2 whitespace-nowrap text-sm font-medium">赵雪</td>
|
|
||||||
<td class="px-4 py-2 whitespace-nowrap text-sm">女</td>
|
|
||||||
<td class="px-4 py-2 whitespace-nowrap text-sm">26</td>
|
|
||||||
<td class="px-4 py-2 whitespace-nowrap text-sm">人力资源部</td>
|
|
||||||
<td class="px-4 py-2 whitespace-nowrap text-sm">薪酬专员</td>
|
|
||||||
<td class="px-4 py-2 whitespace-nowrap text-sm">85.0</td>
|
|
||||||
<td class="px-4 py-2 whitespace-nowrap text-sm">
|
|
||||||
<span
|
|
||||||
class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">已审批</span>
|
|
||||||
</td>
|
|
||||||
<td class="px-4 py-2 whitespace-nowrap text-sm">
|
|
||||||
<button class="text-primary hover:text-primary-dark mr-2">
|
|
||||||
<i class="fas fa-edit fa-icon"></i>
|
|
||||||
</button>
|
|
||||||
<button class="text-red-500 hover:text-red-700">
|
|
||||||
<i class="fas fa-trash-alt fa-icon"></i>
|
|
||||||
</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="table-row">
|
|
||||||
<td class="px-4 py-2 whitespace-nowrap text-sm">5</td>
|
|
||||||
<td class="px-4 py-2 whitespace-nowrap text-sm font-medium">陈志强</td>
|
|
||||||
<td class="px-4 py-2 whitespace-nowrap text-sm">男</td>
|
|
||||||
<td class="px-4 py-2 whitespace-nowrap text-sm">35</td>
|
|
||||||
<td class="px-4 py-2 whitespace-nowrap text-sm">技术研发中心</td>
|
|
||||||
<td class="px-4 py-2 whitespace-nowrap text-sm">高级工程师</td>
|
|
||||||
<td class="px-4 py-2 whitespace-nowrap text-sm">90.5</td>
|
|
||||||
<td class="px-4 py-2 whitespace-nowrap text-sm">
|
|
||||||
<span class="px-2 py-1 text-xs rounded-full bg-gray-100 text-gray-800">新建</span>
|
|
||||||
</td>
|
|
||||||
<td class="px-4 py-2 whitespace-nowrap text-sm">
|
|
||||||
<button class="text-primary hover:text-primary-dark mr-2">
|
|
||||||
<i class="fas fa-edit fa-icon"></i>
|
|
||||||
</button>
|
|
||||||
<button class="text-red-500 hover:text-red-700">
|
|
||||||
<i class="fas fa-trash-alt fa-icon"></i>
|
|
||||||
</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
<!-- 分页区 -->
|
|
||||||
<div class="flex items-center justify-between mt-4">
|
|
||||||
<div class="text-sm text-gray-500">
|
|
||||||
每页显示 <span class="font-medium">10</span> 条，当前 <span class="font-medium">1-10</span> 条，共
|
|
||||||
<span class="font-medium">128</span> 条记录
|
|
||||||
</div>
|
|
||||||
<div class="flex space-x-1">
|
|
||||||
<button
|
|
||||||
class="px-3 py-1 border border-gray-300 rounded-button text-sm bg-white hover:bg-gray-50">
|
|
||||||
<i class="fas fa-angle-left fa-icon"></i>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="px-3 py-1 border border-gray-300 rounded-button text-sm bg-primary text-white">1</button>
|
|
||||||
<button
|
|
||||||
class="px-3 py-1 border border-gray-300 rounded-button text-sm bg-white hover:bg-gray-50">2</button>
|
|
||||||
<button
|
|
||||||
class="px-3 py-1 border border-gray-300 rounded-button text-sm bg-white hover:bg-gray-50">3</button>
|
|
||||||
<button
|
|
||||||
class="px-3 py-1 border border-gray-300 rounded-button text-sm bg-white hover:bg-gray-50">4</button>
|
|
||||||
<button
|
|
||||||
class="px-3 py-1 border border-gray-300 rounded-button text-sm bg-white hover:bg-gray-50">5</button>
|
|
||||||
<button
|
|
||||||
class="px-3 py-1 border border-gray-300 rounded-button text-sm bg-white hover:bg-gray-50">
|
|
||||||
<i class="fas fa-angle-right fa-icon"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
<!-- 页脚 -->
|
|
||||||
<footer class="w-full bg-gray-800 text-white py-8">
|
|
||||||
<div class="container mx-auto px-4">
|
|
||||||
<div class="grid grid-cols-4 gap-8">
|
|
||||||
<div>
|
|
||||||
<h3 class="text-sm font-medium mb-4">关于我们</h3>
|
|
||||||
<ul class="space-y-2 text-xs text-gray-300">
|
|
||||||
<li><a href="#" class="hover:text-white">公司简介</a></li>
|
|
||||||
<li><a href="#" class="hover:text-white">发展历程</a></li>
|
|
||||||
<li><a href="#" class="hover:text-white">企业文化</a></li>
|
|
||||||
<li><a href="#" class="hover:text-white">联系我们</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="text-sm font-medium mb-4">产品服务</h3>
|
|
||||||
<ul class="space-y-2 text-xs text-gray-300">
|
|
||||||
<li><a href="#" class="hover:text-white">人力资源管理系统</a></li>
|
|
||||||
<li><a href="#" class="hover:text-white">薪酬管理系统</a></li>
|
|
||||||
<li><a href="#" class="hover:text-white">绩效管理系统</a></li>
|
|
||||||
<li><a href="#" class="hover:text-white">考勤管理系统</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="text-sm font-medium mb-4">帮助中心</h3>
|
|
||||||
<ul class="space-y-2 text-xs text-gray-300">
|
|
||||||
<li><a href="#" class="hover:text-white">使用指南</a></li>
|
|
||||||
<li><a href="#" class="hover:text-white">常见问题</a></li>
|
|
||||||
<li><a href="#" class="hover:text-white">更新日志</a></li>
|
|
||||||
<li><a href="#" class="hover:text-white">API文档</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="text-sm font-medium mb-4">联系我们</h3>
|
|
||||||
<ul class="space-y-2 text-xs text-gray-300">
|
|
||||||
<li class="flex items-start">
|
|
||||||
<i class="fas fa-map-marker-alt fa-icon mr-2 mt-1"></i>
|
|
||||||
<span>北京市海淀区中关村软件园2号楼</span>
|
|
||||||
</li>
|
|
||||||
<li class="flex items-center">
|
|
||||||
<i class="fas fa-phone fa-icon mr-2"></i>
|
|
||||||
<span>400-888-8888</span>
|
|
||||||
</li>
|
|
||||||
<li class="flex items-center">
|
|
||||||
<i class="fas fa-envelope fa-icon mr-2"></i>
|
|
||||||
<span>contact@hrsystem.com</span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="border-t border-gray-700 mt-8 pt-6 flex flex-col md:flex-row justify-between items-center">
|
|
||||||
<div class="text-xs text-gray-400 mb-4 md:mb-0">
|
|
||||||
© 2023 人力资源管理系统 版权所有
|
|
||||||
</div>
|
|
||||||
<div class="flex space-x-4">
|
|
||||||
<a href="#" class="text-gray-400 hover:text-white">
|
|
||||||
<i class="fab fa-weixin fa-icon"></i>
|
|
||||||
</a>
|
|
||||||
<a href="#" class="text-gray-400 hover:text-white">
|
|
||||||
<i class="fab fa-weibo fa-icon"></i>
|
|
||||||
</a>
|
|
||||||
<a href="#" class="text-gray-400 hover:text-white">
|
|
||||||
<i class="fab fa-github fa-icon"></i>
|
|
||||||
</a>
|
|
||||||
<a href="#" class="text-gray-400 hover:text-white">
|
|
||||||
<i class="fab fa-linkedin-in fa-icon"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="text-xs text-gray-400 mt-4 md:mt-0">
|
|
||||||
京ICP备12345678号-1
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
@ -1,738 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="zh-CN">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>人力管理系统 - 数据字典</title>
|
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
|
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
||||||
<script>
|
|
||||||
tailwind.config = {
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
colors: {
|
|
||||||
primary: '#2D5CF6',
|
|
||||||
secondary: '#F5F6FA'
|
|
||||||
},
|
|
||||||
borderRadius: {
|
|
||||||
'none': '0px',
|
|
||||||
'sm': '2px',
|
|
||||||
DEFAULT: '4px',
|
|
||||||
'md': '8px',
|
|
||||||
'lg': '12px',
|
|
||||||
'xl': '16px',
|
|
||||||
'2xl': '20px',
|
|
||||||
'3xl': '24px',
|
|
||||||
'full': '9999px',
|
|
||||||
'button': '4px'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.tree-item {
|
|
||||||
padding-left: 20px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tree-item::before {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
left: 8px;
|
|
||||||
top: 0;
|
|
||||||
height: 100%;
|
|
||||||
border-left: 1px solid #e5e7eb;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tree-item:last-child::before {
|
|
||||||
height: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tree-item::after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
left: 8px;
|
|
||||||
top: 50%;
|
|
||||||
width: 8px;
|
|
||||||
border-bottom: 1px solid #e5e7eb;
|
|
||||||
}
|
|
||||||
|
|
||||||
.scroll-container {
|
|
||||||
scrollbar-width: thin;
|
|
||||||
scrollbar-color: #cbd5e1 #f1f5f9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.scroll-container::-webkit-scrollbar {
|
|
||||||
width: 6px;
|
|
||||||
height: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.scroll-container::-webkit-scrollbar-track {
|
|
||||||
background: #f1f5f9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.scroll-container::-webkit-scrollbar-thumb {
|
|
||||||
background-color: #cbd5e1;
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hover-card:hover {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
i.fa-icon {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body class="min-h-[1024px] bg-gray-50 flex flex-col">
|
|
||||||
<!-- 顶部导航 -->
|
|
||||||
<!-- <header class="bg-primary text-white shadow-md">
|
|
||||||
<div class="container mx-auto px-6 py-3 flex items-center justify-between">
|
|
||||||
<div class="flex items-center space-x-8">
|
|
||||||
<a href="#" class="text-xl font-['Pacifico']">人力</a>
|
|
||||||
<nav class="hidden md:flex space-x-6 text-sm">
|
|
||||||
<a href="#" class="hover:bg-white/20 px-2 py-1 rounded-button transition">多维统计</a>
|
|
||||||
<a href="#" class="hover:bg-white/20 px-2 py-1 rounded-button transition">人员管理</a>
|
|
||||||
<a href="#" class="hover:bg-white/20 px-2 py-1 rounded-button transition">组织管理</a>
|
|
||||||
<a href="#" class="hover:bg-white/20 px-2 py-1 rounded-button transition">考勤管理</a>
|
|
||||||
<a href="#" class="hover:bg-white/20 px-2 py-1 rounded-button transition">绩效管理</a>
|
|
||||||
<a href="#" class="hover:bg-white/20 px-2 py-1 rounded-button transition">薪酬管理</a>
|
|
||||||
<a href="#" class="hover:bg-white/20 px-2 py-1 rounded-button transition">知识库</a>
|
|
||||||
<a href="#" class="hover:bg-white/20 px-2 py-1 rounded-button transition">后台管理</a>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center space-x-4">
|
|
||||||
<div class="relative">
|
|
||||||
<input type="text" placeholder="搜索..."
|
|
||||||
class="bg-white/20 text-white placeholder-white/70 text-sm rounded-button px-3 py-1 pl-8 w-40 focus:w-60 transition-all duration-300 focus:outline-none focus:ring-1 focus:ring-white/50">
|
|
||||||
<i
|
|
||||||
class="fa-icon fa-solid fa-magnifying-glass absolute left-2 top-1/2 transform -translate-y-1/2 text-white/70 text-xs"></i>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
class="bg-white/10 hover:bg-white/20 rounded-button px-3 py-1 text-sm flex items-center space-x-1 transition">
|
|
||||||
<i class="fa-icon fa-solid fa-robot text-xs"></i>
|
|
||||||
<span>AI 助手</span>
|
|
||||||
</button>
|
|
||||||
<div class="relative">
|
|
||||||
<img src="https://mastergo.com/ai/api/search-image?query=professional20business20profile20photo20of20a20young20asian20male20executive20with20white20background&width=32&height=32&orientation=squarish&flag=a6d20992702c7a888c93eb051f248a43"
|
|
||||||
alt="用户头像" class="w-8 h-8 rounded-full object-cover cursor-pointer">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header> -->
|
|
||||||
<!-- 主内容区域 -->
|
|
||||||
<main class="flex-grow container mx-auto px-6 py-8">
|
|
||||||
<div class="flex flex-col space-y-6">
|
|
||||||
<!-- 面包屑导航 -->
|
|
||||||
<!-- <div class="flex items-center text-sm text-gray-600">
|
|
||||||
<a href="#" class="hover:text-primary">首页</a>
|
|
||||||
<i class="fa-icon fa-solid fa-chevron-right mx-2 text-xs"></i>
|
|
||||||
<a href="#" class="hover:text-primary">系统管理</a>
|
|
||||||
<i class="fa-icon fa-solid fa-chevron-right mx-2 text-xs"></i>
|
|
||||||
<span class="text-gray-800">数据字典管理</span>
|
|
||||||
</div> -->
|
|
||||||
<!-- 页面标题和操作按钮 -->
|
|
||||||
<div class="flex justify-between items-center">
|
|
||||||
<h1 class="text-2xl font-bold text-gray-800">数据字典管理</h1>
|
|
||||||
<div class="flex space-x-3">
|
|
||||||
<button
|
|
||||||
class="bg-primary hover:bg-blue-700 text-white rounded-button px-4 py-2 text-sm flex items-center space-x-2 transition">
|
|
||||||
<i class="fa-icon fa-solid fa-plus text-xs"></i>
|
|
||||||
<span>新增元数据域</span>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 rounded-button px-4 py-2 text-sm flex items-center space-x-2 transition">
|
|
||||||
<i class="fa-icon fa-solid fa-download text-xs"></i>
|
|
||||||
<span>导出配置</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 数据字典内容区域 -->
|
|
||||||
<div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
|
|
||||||
<div class="flex h-[1200px]">
|
|
||||||
<!-- 左侧树形结构 -->
|
|
||||||
<div class="w-1/4 border-r border-gray-200 overflow-y-auto scroll-container">
|
|
||||||
<div class="p-4 space-y-2">
|
|
||||||
<div class="flex items-center justify-between">
|
|
||||||
<h3 class="font-medium text-gray-700">员工模型</h3>
|
|
||||||
<button class="text-gray-400 hover:text-gray-600">
|
|
||||||
<i class="fa-icon fa-solid fa-ellipsis-vertical text-xs"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="mt-2 space-y-1">
|
|
||||||
<!-- 树形结构项 -->
|
|
||||||
<div class="tree-item">
|
|
||||||
<div
|
|
||||||
class="flex items-center justify-between py-1 px-2 rounded hover:bg-gray-100 cursor-pointer">
|
|
||||||
<div class="flex items-center space-x-2">
|
|
||||||
<i class="fa-icon fa-solid fa-folder text-yellow-400 text-sm"></i>
|
|
||||||
<span class="text-sm">基础信息</span>
|
|
||||||
</div>
|
|
||||||
<i class="fa-icon fa-solid fa-chevron-down text-gray-400 text-xs"></i>
|
|
||||||
</div>
|
|
||||||
<div class="ml-4 mt-1 space-y-1">
|
|
||||||
<div
|
|
||||||
class="flex items-center py-1 px-2 rounded hover:bg-gray-100 cursor-pointer">
|
|
||||||
<i class="fa-icon fa-solid fa-file text-blue-400 text-sm mr-2"></i>
|
|
||||||
<span class="text-sm">员工编号</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex items-center py-1 px-2 rounded hover:bg-gray-100 cursor-pointer">
|
|
||||||
<i class="fa-icon fa-solid fa-file text-blue-400 text-sm mr-2"></i>
|
|
||||||
<span class="text-sm">姓名</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex items-center py-1 px-2 rounded hover:bg-gray-100 cursor-pointer">
|
|
||||||
<i class="fa-icon fa-solid fa-file text-blue-400 text-sm mr-2"></i>
|
|
||||||
<span class="text-sm">性别</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="tree-item">
|
|
||||||
<div
|
|
||||||
class="flex items-center justify-between py-1 px-2 rounded hover:bg-gray-100 cursor-pointer">
|
|
||||||
<div class="flex items-center space-x-2">
|
|
||||||
<i class="fa-icon fa-solid fa-folder text-yellow-400 text-sm"></i>
|
|
||||||
<span class="text-sm">技术职务</span>
|
|
||||||
</div>
|
|
||||||
<i class="fa-icon fa-solid fa-chevron-right text-gray-400 text-xs"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="tree-item">
|
|
||||||
<div
|
|
||||||
class="flex items-center justify-between py-1 px-2 rounded hover:bg-gray-100 cursor-pointer bg-blue-50">
|
|
||||||
<div class="flex items-center space-x-2">
|
|
||||||
<i class="fa-icon fa-solid fa-folder-open text-yellow-400 text-sm"></i>
|
|
||||||
<span class="text-sm font-medium text-primary">绩效参数</span>
|
|
||||||
</div>
|
|
||||||
<i class="fa-icon fa-solid fa-chevron-down text-gray-400 text-xs"></i>
|
|
||||||
</div>
|
|
||||||
<div class="ml-4 mt-1 space-y-1">
|
|
||||||
<div
|
|
||||||
class="flex items-center py-1 px-2 rounded hover:bg-gray-100 cursor-pointer">
|
|
||||||
<i class="fa-icon fa-solid fa-file text-blue-400 text-sm mr-2"></i>
|
|
||||||
<span class="text-sm">代码量</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex items-center py-1 px-2 rounded hover:bg-gray-100 cursor-pointer">
|
|
||||||
<i class="fa-icon fa-solid fa-file text-blue-400 text-sm mr-2"></i>
|
|
||||||
<span class="text-sm">文档字数</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex items-center py-1 px-2 rounded hover:bg-gray-100 cursor-pointer">
|
|
||||||
<i class="fa-icon fa-solid fa-file text-blue-400 text-sm mr-2"></i>
|
|
||||||
<span class="text-sm">出勤时长</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex items-center py-1 px-2 rounded hover:bg-gray-100 cursor-pointer">
|
|
||||||
<i class="fa-icon fa-solid fa-file text-blue-400 text-sm mr-2"></i>
|
|
||||||
<span class="text-sm">项目金额</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex items-center py-1 px-2 rounded hover:bg-gray-100 cursor-pointer">
|
|
||||||
<i class="fa-icon fa-solid fa-file text-blue-400 text-sm mr-2"></i>
|
|
||||||
<span class="text-sm">培训时长</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex items-center py-1 px-2 rounded hover:bg-gray-100 cursor-pointer">
|
|
||||||
<i class="fa-icon fa-solid fa-file text-blue-400 text-sm mr-2"></i>
|
|
||||||
<span class="text-sm">会议次数</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex items-center py-1 px-2 rounded hover:bg-gray-100 cursor-pointer">
|
|
||||||
<i class="fa-icon fa-solid fa-file text-blue-400 text-sm mr-2"></i>
|
|
||||||
<span class="text-sm">会议时长</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex items-center py-1 px-2 rounded hover:bg-gray-100 cursor-pointer">
|
|
||||||
<i class="fa-icon fa-solid fa-file text-blue-400 text-sm mr-2"></i>
|
|
||||||
<span class="text-sm">千行 bug 数</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex items-center py-1 px-2 rounded hover:bg-gray-100 cursor-pointer">
|
|
||||||
<i class="fa-icon fa-solid fa-file text-blue-400 text-sm mr-2"></i>
|
|
||||||
<span class="text-sm">运维响应时间</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex items-center py-1 px-2 rounded hover:bg-gray-100 cursor-pointer">
|
|
||||||
<i class="fa-icon fa-solid fa-file text-blue-400 text-sm mr-2"></i>
|
|
||||||
<span class="text-sm">员工满意度</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="tree-item">
|
|
||||||
<div
|
|
||||||
class="flex items-center justify-between py-1 px-2 rounded hover:bg-gray-100 cursor-pointer">
|
|
||||||
<div class="flex items-center space-x-2">
|
|
||||||
<i class="fa-icon fa-solid fa-folder text-yellow-400 text-sm"></i>
|
|
||||||
<span class="text-sm">联系方式</span>
|
|
||||||
</div>
|
|
||||||
<i class="fa-icon fa-solid fa-chevron-right text-gray-400 text-xs"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="tree-item">
|
|
||||||
<div
|
|
||||||
class="flex items-center justify-between py-1 px-2 rounded hover:bg-gray-100 cursor-pointer">
|
|
||||||
<div class="flex items-center space-x-2">
|
|
||||||
<i class="fa-icon fa-solid fa-folder text-yellow-400 text-sm"></i>
|
|
||||||
<span class="text-sm">其他信息</span>
|
|
||||||
</div>
|
|
||||||
<i class="fa-icon fa-solid fa-chevron-right text-gray-400 text-xs"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 右侧属性配置面板 -->
|
|
||||||
<div class="w-3/4 overflow-y-auto scroll-container">
|
|
||||||
<div class="p-6">
|
|
||||||
<div class="flex justify-between items-center mb-6">
|
|
||||||
<h2 class="text-lg font-semibold text-gray-800">绩效参数属性配置</h2>
|
|
||||||
<button
|
|
||||||
class="bg-primary hover:bg-blue-700 text-white rounded-button px-3 py-1 text-sm flex items-center space-x-2 transition">
|
|
||||||
<i class="fa-icon fa-solid fa-plus text-xs"></i>
|
|
||||||
<span>新增属性</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="bg-gray-50 rounded-lg p-4 mb-6">
|
|
||||||
<div class="grid grid-cols-2 gap-4">
|
|
||||||
<div>
|
|
||||||
<label class="block text-sm font-medium text-gray-700 mb-1">元数据域名称</label>
|
|
||||||
<input type="text" value="绩效参数"
|
|
||||||
class="w-full border border-gray-300 rounded-button px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label class="block text-sm font-medium text-gray-700 mb-1">元数据域编码</label>
|
|
||||||
<input type="text" value="performance_params"
|
|
||||||
class="w-full border border-gray-300 rounded-button px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
|
|
||||||
</div>
|
|
||||||
<div class="col-span-2">
|
|
||||||
<label class="block text-sm font-medium text-gray-700 mb-1">描述</label>
|
|
||||||
<textarea
|
|
||||||
class="w-full border border-gray-300 rounded-button px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary"
|
|
||||||
rows="2">用于记录员工各项绩效指标的参数集合</textarea>
|
|
||||||
</div>
|
|
||||||
</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-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
||||||
属性名称</th>
|
|
||||||
<th scope="col"
|
|
||||||
class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
||||||
编码</th>
|
|
||||||
<th scope="col"
|
|
||||||
class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
||||||
数据类型</th>
|
|
||||||
<th scope="col"
|
|
||||||
class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
||||||
单位</th>
|
|
||||||
<th scope="col"
|
|
||||||
class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
||||||
必填</th>
|
|
||||||
<th scope="col"
|
|
||||||
class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
||||||
操作</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody class="bg-white divide-y divide-gray-200">
|
|
||||||
<tr class="hover:bg-gray-50">
|
|
||||||
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">
|
|
||||||
代码量</td>
|
|
||||||
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">code_amount
|
|
||||||
</td>
|
|
||||||
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
|
||||||
<select
|
|
||||||
class="border border-gray-300 rounded-button px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
|
|
||||||
<option>数字</option>
|
|
||||||
<option>文本</option>
|
|
||||||
<option>日期</option>
|
|
||||||
<option selected>列表</option>
|
|
||||||
</select>
|
|
||||||
</td>
|
|
||||||
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">行</td>
|
|
||||||
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
|
||||||
<input type="checkbox" checked
|
|
||||||
class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
|
|
||||||
</td>
|
|
||||||
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
|
||||||
<button class="text-blue-600 hover:text-blue-900 mr-2">
|
|
||||||
<i class="fa-icon fa-solid fa-pen text-xs"></i>
|
|
||||||
</button>
|
|
||||||
<button class="text-red-600 hover:text-red-900">
|
|
||||||
<i class="fa-icon fa-solid fa-trash text-xs"></i>
|
|
||||||
</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="hover:bg-gray-50">
|
|
||||||
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">
|
|
||||||
文档字数</td>
|
|
||||||
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">doc_words</td>
|
|
||||||
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
|
||||||
<select
|
|
||||||
class="border border-gray-300 rounded-button px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
|
|
||||||
<option>数字</option>
|
|
||||||
<option>文本</option>
|
|
||||||
<option>日期</option>
|
|
||||||
<option selected>列表</option>
|
|
||||||
</select>
|
|
||||||
</td>
|
|
||||||
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">字</td>
|
|
||||||
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
|
||||||
<input type="checkbox" checked
|
|
||||||
class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
|
|
||||||
</td>
|
|
||||||
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
|
||||||
<button class="text-blue-600 hover:text-blue-900 mr-2">
|
|
||||||
<i class="fa-icon fa-solid fa-pen text-xs"></i>
|
|
||||||
</button>
|
|
||||||
<button class="text-red-600 hover:text-red-900">
|
|
||||||
<i class="fa-icon fa-solid fa-trash text-xs"></i>
|
|
||||||
</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="hover:bg-gray-50">
|
|
||||||
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">
|
|
||||||
出勤时长</td>
|
|
||||||
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
|
||||||
attendance_hours</td>
|
|
||||||
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
|
||||||
<select
|
|
||||||
class="border border-gray-300 rounded-button px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
|
|
||||||
<option>数字</option>
|
|
||||||
<option>文本</option>
|
|
||||||
<option>日期</option>
|
|
||||||
<option selected>列表</option>
|
|
||||||
</select>
|
|
||||||
</td>
|
|
||||||
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">小时</td>
|
|
||||||
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
|
||||||
<input type="checkbox" checked
|
|
||||||
class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
|
|
||||||
</td>
|
|
||||||
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
|
||||||
<button class="text-blue-600 hover:text-blue-900 mr-2">
|
|
||||||
<i class="fa-icon fa-solid fa-pen text-xs"></i>
|
|
||||||
</button>
|
|
||||||
<button class="text-red-600 hover:text-red-900">
|
|
||||||
<i class="fa-icon fa-solid fa-trash text-xs"></i>
|
|
||||||
</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="hover:bg-gray-50">
|
|
||||||
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">
|
|
||||||
项目金额</td>
|
|
||||||
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">project_amount
|
|
||||||
</td>
|
|
||||||
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
|
||||||
<select
|
|
||||||
class="border border-gray-300 rounded-button px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
|
|
||||||
<option>数字</option>
|
|
||||||
<option>文本</option>
|
|
||||||
<option>日期</option>
|
|
||||||
<option selected>列表</option>
|
|
||||||
</select>
|
|
||||||
</td>
|
|
||||||
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">元</td>
|
|
||||||
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
|
||||||
<input type="checkbox"
|
|
||||||
class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
|
|
||||||
</td>
|
|
||||||
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
|
||||||
<button class="text-blue-600 hover:text-blue-900 mr-2">
|
|
||||||
<i class="fa-icon fa-solid fa-pen text-xs"></i>
|
|
||||||
</button>
|
|
||||||
<button class="text-red-600 hover:text-red-900">
|
|
||||||
<i class="fa-icon fa-solid fa-trash text-xs"></i>
|
|
||||||
</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="hover:bg-gray-50">
|
|
||||||
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">
|
|
||||||
培训时长</td>
|
|
||||||
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">training_hours
|
|
||||||
</td>
|
|
||||||
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
|
||||||
<select
|
|
||||||
class="border border-gray-300 rounded-button px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
|
|
||||||
<option>数字</option>
|
|
||||||
<option>文本</option>
|
|
||||||
<option>日期</option>
|
|
||||||
<option selected>列表</option>
|
|
||||||
</select>
|
|
||||||
</td>
|
|
||||||
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">小时</td>
|
|
||||||
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
|
||||||
<input type="checkbox"
|
|
||||||
class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
|
|
||||||
</td>
|
|
||||||
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
|
||||||
<button class="text-blue-600 hover:text-blue-900 mr-2">
|
|
||||||
<i class="fa-icon fa-solid fa-pen text-xs"></i>
|
|
||||||
</button>
|
|
||||||
<button class="text-red-600 hover:text-red-900">
|
|
||||||
<i class="fa-icon fa-solid fa-trash text-xs"></i>
|
|
||||||
</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="hover:bg-gray-50">
|
|
||||||
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">
|
|
||||||
会议次数</td>
|
|
||||||
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">meeting_count
|
|
||||||
</td>
|
|
||||||
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
|
||||||
<select
|
|
||||||
class="border border-gray-300 rounded-button px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
|
|
||||||
<option>数字</option>
|
|
||||||
<option>文本</option>
|
|
||||||
<option>日期</option>
|
|
||||||
<option selected>列表</option>
|
|
||||||
</select>
|
|
||||||
</td>
|
|
||||||
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">次</td>
|
|
||||||
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
|
||||||
<input type="checkbox" checked
|
|
||||||
class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
|
|
||||||
</td>
|
|
||||||
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
|
||||||
<button class="text-blue-600 hover:text-blue-900 mr-2">
|
|
||||||
<i class="fa-icon fa-solid fa-pen text-xs"></i>
|
|
||||||
</button>
|
|
||||||
<button class="text-red-600 hover:text-red-900">
|
|
||||||
<i class="fa-icon fa-solid fa-trash text-xs"></i>
|
|
||||||
</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="hover:bg-gray-50">
|
|
||||||
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">
|
|
||||||
会议时长</td>
|
|
||||||
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">meeting_hours
|
|
||||||
</td>
|
|
||||||
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
|
||||||
<select
|
|
||||||
class="border border-gray-300 rounded-button px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
|
|
||||||
<option>数字</option>
|
|
||||||
<option>文本</option>
|
|
||||||
<option>日期</option>
|
|
||||||
<option selected>列表</option>
|
|
||||||
</select>
|
|
||||||
</td>
|
|
||||||
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">分钟</td>
|
|
||||||
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
|
||||||
<input type="checkbox"
|
|
||||||
class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
|
|
||||||
</td>
|
|
||||||
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
|
||||||
<button class="text-blue-600 hover:text-blue-900 mr-2">
|
|
||||||
<i class="fa-icon fa-solid fa-pen text-xs"></i>
|
|
||||||
</button>
|
|
||||||
<button class="text-red-600 hover:text-red-900">
|
|
||||||
<i class="fa-icon fa-solid fa-trash text-xs"></i>
|
|
||||||
</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="hover:bg-gray-50">
|
|
||||||
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">千行
|
|
||||||
bug 数</td>
|
|
||||||
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">bug_count</td>
|
|
||||||
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
|
||||||
<select
|
|
||||||
class="border border-gray-300 rounded-button px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
|
|
||||||
<option>数字</option>
|
|
||||||
<option>文本</option>
|
|
||||||
<option>日期</option>
|
|
||||||
<option selected>列表</option>
|
|
||||||
</select>
|
|
||||||
</td>
|
|
||||||
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">个/千行</td>
|
|
||||||
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
|
||||||
<input type="checkbox" checked
|
|
||||||
class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
|
|
||||||
</td>
|
|
||||||
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
|
||||||
<button class="text-blue-600 hover:text-blue-900 mr-2">
|
|
||||||
<i class="fa-icon fa-solid fa-pen text-xs"></i>
|
|
||||||
</button>
|
|
||||||
<button class="text-red-600 hover:text-red-900">
|
|
||||||
<i class="fa-icon fa-solid fa-trash text-xs"></i>
|
|
||||||
</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="hover:bg-gray-50">
|
|
||||||
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">
|
|
||||||
运维响应时间</td>
|
|
||||||
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">response_time
|
|
||||||
</td>
|
|
||||||
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
|
||||||
<select
|
|
||||||
class="border border-gray-300 rounded-button px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
|
|
||||||
<option>数字</option>
|
|
||||||
<option>文本</option>
|
|
||||||
<option>日期</option>
|
|
||||||
<option selected>列表</option>
|
|
||||||
</select>
|
|
||||||
</td>
|
|
||||||
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">分钟</td>
|
|
||||||
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
|
||||||
<input type="checkbox" checked
|
|
||||||
class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
|
|
||||||
</td>
|
|
||||||
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
|
||||||
<button class="text-blue-600 hover:text-blue-900 mr-2">
|
|
||||||
<i class="fa-icon fa-solid fa-pen text-xs"></i>
|
|
||||||
</button>
|
|
||||||
<button class="text-red-600 hover:text-red-900">
|
|
||||||
<i class="fa-icon fa-solid fa-trash text-xs"></i>
|
|
||||||
</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="hover:bg-gray-50">
|
|
||||||
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">
|
|
||||||
员工满意度</td>
|
|
||||||
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">satisfaction
|
|
||||||
</td>
|
|
||||||
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
|
||||||
<select
|
|
||||||
class="border border-gray-300 rounded-button px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
|
|
||||||
<option>数字</option>
|
|
||||||
<option>文本</option>
|
|
||||||
<option>日期</option>
|
|
||||||
<option selected>列表</option>
|
|
||||||
</select>
|
|
||||||
</td>
|
|
||||||
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">分</td>
|
|
||||||
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
|
||||||
<input type="checkbox"
|
|
||||||
class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
|
|
||||||
</td>
|
|
||||||
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
|
||||||
<button class="text-blue-600 hover:text-blue-900 mr-2">
|
|
||||||
<i class="fa-icon fa-solid fa-pen text-xs"></i>
|
|
||||||
</button>
|
|
||||||
<button class="text-red-600 hover:text-red-900">
|
|
||||||
<i class="fa-icon fa-solid fa-trash text-xs"></i>
|
|
||||||
</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
<div class="mt-6 flex items-center justify-between">
|
|
||||||
<div class="text-sm text-gray-500">
|
|
||||||
显示 <span class="font-medium">1</span> 到 <span class="font-medium">10</span> 条，共
|
|
||||||
<span class="font-medium">10</span> 条记录
|
|
||||||
</div>
|
|
||||||
<div class="flex space-x-1">
|
|
||||||
<button
|
|
||||||
class="px-3 py-1 border border-gray-300 rounded-button text-sm text-gray-700 bg-white hover:bg-gray-50">
|
|
||||||
上一页
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="px-3 py-1 border border-primary bg-primary text-white rounded-button text-sm">
|
|
||||||
1
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="px-3 py-1 border border-gray-300 rounded-button text-sm text-gray-700 bg-white hover:bg-gray-50">
|
|
||||||
2
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="px-3 py-1 border border-gray-300 rounded-button text-sm text-gray-700 bg-white hover:bg-gray-50">
|
|
||||||
下一页
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
<!-- 页脚 -->
|
|
||||||
<footer class="w-full bg-gray-800 text-white py-8">
|
|
||||||
<div class="container mx-auto px-4">
|
|
||||||
<div class="grid grid-cols-4 gap-8">
|
|
||||||
<div>
|
|
||||||
<h3 class="text-sm font-medium mb-4">关于我们</h3>
|
|
||||||
<ul class="space-y-2 text-xs text-gray-300">
|
|
||||||
<li><a href="#" class="hover:text-white">公司简介</a></li>
|
|
||||||
<li><a href="#" class="hover:text-white">发展历程</a></li>
|
|
||||||
<li><a href="#" class="hover:text-white">企业文化</a></li>
|
|
||||||
<li><a href="#" class="hover:text-white">联系我们</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="text-sm font-medium mb-4">产品服务</h3>
|
|
||||||
<ul class="space-y-2 text-xs text-gray-300">
|
|
||||||
<li><a href="#" class="hover:text-white">人力资源管理系统</a></li>
|
|
||||||
<li><a href="#" class="hover:text-white">薪酬管理系统</a></li>
|
|
||||||
<li><a href="#" class="hover:text-white">绩效管理系统</a></li>
|
|
||||||
<li><a href="#" class="hover:text-white">考勤管理系统</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="text-sm font-medium mb-4">帮助中心</h3>
|
|
||||||
<ul class="space-y-2 text-xs text-gray-300">
|
|
||||||
<li><a href="#" class="hover:text-white">使用指南</a></li>
|
|
||||||
<li><a href="#" class="hover:text-white">常见问题</a></li>
|
|
||||||
<li><a href="#" class="hover:text-white">更新日志</a></li>
|
|
||||||
<li><a href="#" class="hover:text-white">API文档</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="text-sm font-medium mb-4">联系我们</h3>
|
|
||||||
<ul class="space-y-2 text-xs text-gray-300">
|
|
||||||
<li class="flex items-start">
|
|
||||||
<i class="fas fa-map-marker-alt fa-icon mr-2 mt-1"></i>
|
|
||||||
<span>北京市海淀区中关村软件园2号楼</span>
|
|
||||||
</li>
|
|
||||||
<li class="flex items-center">
|
|
||||||
<i class="fas fa-phone fa-icon mr-2"></i>
|
|
||||||
<span>400-888-8888</span>
|
|
||||||
</li>
|
|
||||||
<li class="flex items-center">
|
|
||||||
<i class="fas fa-envelope fa-icon mr-2"></i>
|
|
||||||
<span>contact@hrsystem.com</span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="border-t border-gray-700 mt-8 pt-6 flex flex-col md:flex-row justify-between items-center">
|
|
||||||
<div class="text-xs text-gray-400 mb-4 md:mb-0">
|
|
||||||
© 2023 人力资源管理系统 版权所有
|
|
||||||
</div>
|
|
||||||
<div class="flex space-x-4">
|
|
||||||
<a href="#" class="text-gray-400 hover:text-white">
|
|
||||||
<i class="fab fa-weixin fa-icon"></i>
|
|
||||||
</a>
|
|
||||||
<a href="#" class="text-gray-400 hover:text-white">
|
|
||||||
<i class="fab fa-weibo fa-icon"></i>
|
|
||||||
</a>
|
|
||||||
<a href="#" class="text-gray-400 hover:text-white">
|
|
||||||
<i class="fab fa-github fa-icon"></i>
|
|
||||||
</a>
|
|
||||||
<a href="#" class="text-gray-400 hover:text-white">
|
|
||||||
<i class="fab fa-linkedin-in fa-icon"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="text-xs text-gray-400 mt-4 md:mt-0">
|
|
||||||
京ICP备12345678号-1
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
@ -1,366 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="zh-CN">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>人力资源管理系统</title>
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
|
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
|
||||||
<script>
|
|
||||||
tailwind.config = {
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
colors: {
|
|
||||||
primary: '#2D5CF6',
|
|
||||||
secondary: '#F5F6FA',
|
|
||||||
},
|
|
||||||
borderRadius: {
|
|
||||||
'none': '0px',
|
|
||||||
'sm': '2px',
|
|
||||||
DEFAULT: '4px',
|
|
||||||
'md': '8px',
|
|
||||||
'lg': '12px',
|
|
||||||
'xl': '16px',
|
|
||||||
'2xl': '20px',
|
|
||||||
'3xl': '24px',
|
|
||||||
'full': '9999px',
|
|
||||||
'button': '4px'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.fa-icon {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
}
|
|
||||||
.scroll-container {
|
|
||||||
scrollbar-width: none;
|
|
||||||
}
|
|
||||||
.scroll-container::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="min-h-[1024px] bg-secondary font-sans text-sm text-gray-800">
|
|
||||||
|
|
||||||
<!-- <header class="w-full h-[60px] bg-primary text-white fixed top-0 z-50 shadow-md">
|
|
||||||
<div class="w-[1200px] h-full mx-auto flex items-center justify-between">
|
|
||||||
|
|
||||||
<div class="flex items-center">
|
|
||||||
<span class="font-['Pacifico'] text-2xl mr-10">人力</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<nav class="flex-1 flex items-center">
|
|
||||||
<ul class="flex space-x-6">
|
|
||||||
<li><a href="#" class="hover:text-gray-200 transition">多维统计</a></li>
|
|
||||||
<li><a href="#" class="hover:text-gray-200 transition">人员管理</a></li>
|
|
||||||
<li><a href="#" class="hover:text-gray-200 transition">组织管理</a></li>
|
|
||||||
<li><a href="#" class="hover:text-gray-200 transition font-semibold">考勤管理</a></li>
|
|
||||||
<li><a href="#" class="hover:text-gray-200 transition">绩效管理</a></li>
|
|
||||||
<li><a href="#" class="hover:text-gray-200 transition">薪酬管理</a></li>
|
|
||||||
<li><a href="#" class="hover:text-gray-200 transition">知识库</a></li>
|
|
||||||
<li><a href="#" class="hover:text-gray-200 transition">后台管理</a></li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="flex items-center space-x-4">
|
|
||||||
|
|
||||||
<div class="relative">
|
|
||||||
<input type="text" placeholder="搜索..." class="pl-8 pr-3 py-1 rounded-button bg-white bg-opacity-20 text-white placeholder-white focus:outline-none focus:ring-1 focus:ring-white w-[180px]">
|
|
||||||
<i class="fas fa-search absolute left-2 top-1/2 transform -translate-y-1/2 fa-icon"></i>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<button class="flex items-center space-x-1 bg-white bg-opacity-20 hover:bg-opacity-30 px-3 py-1 rounded-button transition">
|
|
||||||
<i class="fas fa-robot fa-icon"></i>
|
|
||||||
<span>AI助手</span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div class="w-8 h-8 rounded-full bg-white flex items-center justify-center overflow-hidden">
|
|
||||||
<i class="fas fa-user fa-icon text-primary"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header> -->
|
|
||||||
|
|
||||||
<!-- 主内容区 -->
|
|
||||||
<main class="w-[1200px] mx-auto px-4 py-6">
|
|
||||||
<div class="flex space-x-4">
|
|
||||||
<!-- 左侧组织架构树 -->
|
|
||||||
<div class="w-1/5 bg-white rounded-md shadow-sm p-4">
|
|
||||||
<h2 class="font-medium text-gray-700 mb-4">组织架构</h2>
|
|
||||||
<div class="space-y-2">
|
|
||||||
<div class="flex items-center space-x-2 cursor-pointer">
|
|
||||||
<i class="fas fa-building fa-icon text-gray-500"></i>
|
|
||||||
<span class="hover:text-primary">公司总部</span>
|
|
||||||
</div>
|
|
||||||
<div class="ml-6 space-y-2">
|
|
||||||
<div class="flex items-center space-x-2 cursor-pointer">
|
|
||||||
<i class="fas fa-users fa-icon text-gray-500"></i>
|
|
||||||
<span class="hover:text-primary">人力资源部</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center space-x-2 cursor-pointer">
|
|
||||||
<i class="fas fa-users fa-icon text-gray-500"></i>
|
|
||||||
<span class="hover:text-primary">财务部</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center space-x-2 cursor-pointer">
|
|
||||||
<i class="fas fa-users fa-icon text-gray-500"></i>
|
|
||||||
<span class="hover:text-primary">技术研发部</span>
|
|
||||||
</div>
|
|
||||||
<div class="ml-6 space-y-2">
|
|
||||||
<div class="flex items-center space-x-2 cursor-pointer">
|
|
||||||
<i class="fas fa-user fa-icon text-gray-500"></i>
|
|
||||||
<span class="hover:text-primary">前端开发组</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center space-x-2 cursor-pointer">
|
|
||||||
<i class="fas fa-user fa-icon text-gray-500"></i>
|
|
||||||
<span class="hover:text-primary">后端开发组</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center space-x-2 cursor-pointer">
|
|
||||||
<i class="fas fa-user fa-icon text-gray-500"></i>
|
|
||||||
<span class="hover:text-primary">测试组</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center space-x-2 cursor-pointer">
|
|
||||||
<i class="fas fa-users fa-icon text-gray-500"></i>
|
|
||||||
<span class="hover:text-primary">产品部</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center space-x-2 cursor-pointer">
|
|
||||||
<i class="fas fa-users fa-icon text-gray-500"></i>
|
|
||||||
<span class="hover:text-primary">市场部</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 右侧考勤管理区 -->
|
|
||||||
<div class="w-4/5 bg-white rounded-md shadow-sm p-4">
|
|
||||||
<h2 class="font-medium text-gray-700 mb-4">考勤管理</h2>
|
|
||||||
|
|
||||||
<!-- 筛选区 -->
|
|
||||||
<div class="grid grid-cols-4 gap-4 mb-6">
|
|
||||||
<div>
|
|
||||||
<label class="block text-gray-600 mb-1">员工ID</label>
|
|
||||||
<input type="text" class="w-full border rounded-button px-3 py-1 focus:outline-none focus:ring-1 focus:ring-primary">
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label class="block text-gray-600 mb-1">员工姓名</label>
|
|
||||||
<input type="text" class="w-full border rounded-button px-3 py-1 focus:outline-none focus:ring-1 focus:ring-primary">
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label class="block text-gray-600 mb-1">日期范围</label>
|
|
||||||
<div class="relative">
|
|
||||||
<input type="text" class="w-full border rounded-button px-3 py-1 focus:outline-none focus:ring-1 focus:ring-primary" placeholder="选择日期">
|
|
||||||
<i class="fas fa-calendar-alt absolute right-2 top-1/2 transform -translate-y-1/2 fa-icon text-gray-400"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label class="block text-gray-600 mb-1">考勤状态</label>
|
|
||||||
<div class="relative">
|
|
||||||
<select class="w-full border rounded-button px-3 py-1 appearance-none focus:outline-none focus:ring-1 focus:ring-primary">
|
|
||||||
<option>全部</option>
|
|
||||||
<option>正常</option>
|
|
||||||
<option>迟到</option>
|
|
||||||
<option>早退</option>
|
|
||||||
<option>缺勤</option>
|
|
||||||
</select>
|
|
||||||
<i class="fas fa-chevron-down absolute right-2 top-1/2 transform -translate-y-1/2 fa-icon text-gray-400"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 操作按钮 -->
|
|
||||||
<div class="flex justify-between mb-4">
|
|
||||||
<div class="flex space-x-2">
|
|
||||||
<button class="bg-primary text-white px-3 py-1 rounded-button hover:bg-opacity-90 transition">
|
|
||||||
<i class="fas fa-search fa-icon mr-1"></i>
|
|
||||||
<span>查询</span>
|
|
||||||
</button>
|
|
||||||
<button class="border border-gray-300 px-3 py-1 rounded-button hover:bg-gray-50 transition">
|
|
||||||
<i class="fas fa-redo fa-icon mr-1"></i>
|
|
||||||
<span>重置</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<button class="bg-primary text-white px-3 py-1 rounded-button hover:bg-opacity-90 transition">
|
|
||||||
<i class="fas fa-download fa-icon mr-1"></i>
|
|
||||||
<span>导出</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 数据表格 -->
|
|
||||||
<div class="overflow-x-auto">
|
|
||||||
<table class="w-full">
|
|
||||||
<thead class="bg-secondary">
|
|
||||||
<tr>
|
|
||||||
<th class="px-4 py-2 text-left">员工ID</th>
|
|
||||||
<th class="px-4 py-2 text-left">员工姓名</th>
|
|
||||||
<th class="px-4 py-2 text-left">日期</th>
|
|
||||||
<th class="px-4 py-2 text-left">单位</th>
|
|
||||||
<th class="px-4 py-2 text-left">部门</th>
|
|
||||||
<th class="px-4 py-2 text-left">考勤状态</th>
|
|
||||||
<th class="px-4 py-2 text-left">上班时间</th>
|
|
||||||
<th class="px-4 py-2 text-left">下班时间</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody class="divide-y divide-gray-200">
|
|
||||||
<tr class="hover:bg-gray-50">
|
|
||||||
<td class="px-4 py-2">10001</td>
|
|
||||||
<td class="px-4 py-2">张伟</td>
|
|
||||||
<td class="px-4 py-2">2023-06-01</td>
|
|
||||||
<td class="px-4 py-2">总部</td>
|
|
||||||
<td class="px-4 py-2">技术研发部</td>
|
|
||||||
<td class="px-4 py-2 text-green-500">正常</td>
|
|
||||||
<td class="px-4 py-2">09:00:00</td>
|
|
||||||
<td class="px-4 py-2">18:00:00</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="hover:bg-gray-50">
|
|
||||||
<td class="px-4 py-2">10002</td>
|
|
||||||
<td class="px-4 py-2">王芳</td>
|
|
||||||
<td class="px-4 py-2">2023-06-01</td>
|
|
||||||
<td class="px-4 py-2">总部</td>
|
|
||||||
<td class="px-4 py-2">人力资源部</td>
|
|
||||||
<td class="px-4 py-2 text-yellow-500">迟到</td>
|
|
||||||
<td class="px-4 py-2">09:30:00</td>
|
|
||||||
<td class="px-4 py-2">18:00:00</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="hover:bg-gray-50">
|
|
||||||
<td class="px-4 py-2">10003</td>
|
|
||||||
<td class="px-4 py-2">李娜</td>
|
|
||||||
<td class="px-4 py-2">2023-06-01</td>
|
|
||||||
<td class="px-4 py-2">总部</td>
|
|
||||||
<td class="px-4 py-2">财务部</td>
|
|
||||||
<td class="px-4 py-2 text-green-500">正常</td>
|
|
||||||
<td class="px-4 py-2">09:00:00</td>
|
|
||||||
<td class="px-4 py-2">18:00:00</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="hover:bg-gray-50">
|
|
||||||
<td class="px-4 py-2">10004</td>
|
|
||||||
<td class="px-4 py-2">赵明</td>
|
|
||||||
<td class="px-4 py-2">2023-06-01</td>
|
|
||||||
<td class="px-4 py-2">总部</td>
|
|
||||||
<td class="px-4 py-2">产品部</td>
|
|
||||||
<td class="px-4 py-2 text-green-500">正常</td>
|
|
||||||
<td class="px-4 py-2">09:00:00</td>
|
|
||||||
<td class="px-4 py-2">18:00:00</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="hover:bg-gray-50">
|
|
||||||
<td class="px-4 py-2">10005</td>
|
|
||||||
<td class="px-4 py-2">刘强</td>
|
|
||||||
<td class="px-4 py-2">2023-06-01</td>
|
|
||||||
<td class="px-4 py-2">总部</td>
|
|
||||||
<td class="px-4 py-2">市场部</td>
|
|
||||||
<td class="px-4 py-2 text-red-500">早退</td>
|
|
||||||
<td class="px-4 py-2">09:00:00</td>
|
|
||||||
<td class="px-4 py-2">17:30:00</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="hover:bg-gray-50">
|
|
||||||
<td class="px-4 py-2">10006</td>
|
|
||||||
<td class="px-4 py-2">陈静</td>
|
|
||||||
<td class="px-4 py-2">2023-06-01</td>
|
|
||||||
<td class="px-4 py-2">总部</td>
|
|
||||||
<td class="px-4 py-2">技术研发部</td>
|
|
||||||
<td class="px-4 py-2 text-green-500">正常</td>
|
|
||||||
<td class="px-4 py-2">09:00:00</td>
|
|
||||||
<td class="px-4 py-2">18:00:00</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="hover:bg-gray-50">
|
|
||||||
<td class="px-4 py-2">10007</td>
|
|
||||||
<td class="px-4 py-2">杨光</td>
|
|
||||||
<td class="px-4 py-2">2023-06-01</td>
|
|
||||||
<td class="px-4 py-2">总部</td>
|
|
||||||
<td class="px-4 py-2">人力资源部</td>
|
|
||||||
<td class="px-4 py-2 text-green-500">正常</td>
|
|
||||||
<td class="px-4 py-2">09:00:00</td>
|
|
||||||
<td class="px-4 py-2">18:00:00</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="hover:bg-gray-50">
|
|
||||||
<td class="px-4 py-2">10008</td>
|
|
||||||
<td class="px-4 py-2">周涛</td>
|
|
||||||
<td class="px-4 py-2">2023-06-01</td>
|
|
||||||
<td class="px-4 py-2">总部</td>
|
|
||||||
<td class="px-4 py-2">财务部</td>
|
|
||||||
<td class="px-4 py-2 text-green-500">正常</td>
|
|
||||||
<td class="px-4 py-2">09:00:00</td>
|
|
||||||
<td class="px-4 py-2">18:00:00</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 分页 -->
|
|
||||||
<div class="flex justify-between items-center mt-4">
|
|
||||||
<div class="text-gray-500">
|
|
||||||
显示 1 到 8 条，共 120 条记录
|
|
||||||
</div>
|
|
||||||
<div class="flex space-x-1">
|
|
||||||
<button class="w-8 h-8 border rounded-button flex items-center justify-center hover:bg-gray-50">
|
|
||||||
<i class="fas fa-angle-left fa-icon"></i>
|
|
||||||
</button>
|
|
||||||
<button class="w-8 h-8 border rounded-button flex items-center justify-center bg-primary text-white">1</button>
|
|
||||||
<button class="w-8 h-8 border rounded-button flex items-center justify-center hover:bg-gray-50">2</button>
|
|
||||||
<button class="w-8 h-8 border rounded-button flex items-center justify-center hover:bg-gray-50">3</button>
|
|
||||||
<button class="w-8 h-8 border rounded-button flex items-center justify-center hover:bg-gray-50">4</button>
|
|
||||||
<button class="w-8 h-8 border rounded-button flex items-center justify-center hover:bg-gray-50">5</button>
|
|
||||||
<button class="w-8 h-8 border rounded-button flex items-center justify-center hover:bg-gray-50">
|
|
||||||
<i class="fas fa-angle-right fa-icon"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<!-- 页脚 -->
|
|
||||||
<footer class="w-full bg-gray-800 text-gray-400 py-6">
|
|
||||||
<div class="w-[1200px] mx-auto">
|
|
||||||
<div class="grid grid-cols-3 gap-8">
|
|
||||||
<div>
|
|
||||||
<h3 class="text-white text-sm font-medium mb-3">关于我们</h3>
|
|
||||||
<p class="text-xs leading-6">人力资源管理系统致力于为企业提供专业的人力资源管理解决方案，帮助企业提升管理效率，优化人力资源配置。</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="text-white text-sm font-medium mb-3">快速链接</h3>
|
|
||||||
<ul class="space-y-2 text-xs">
|
|
||||||
<li><a href="#" class="hover:text-white transition">帮助中心</a></li>
|
|
||||||
<li><a href="#" class="hover:text-white transition">API文档</a></li>
|
|
||||||
<li><a href="#" class="hover:text-white transition">系统更新</a></li>
|
|
||||||
<li><a href="#" class="hover:text-white transition">联系我们</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="text-white text-sm font-medium mb-3">联系方式</h3>
|
|
||||||
<ul class="space-y-2 text-xs">
|
|
||||||
<li class="flex items-center">
|
|
||||||
<i class="fas fa-phone fa-icon mr-2"></i>
|
|
||||||
<span>400-888-8888</span>
|
|
||||||
</li>
|
|
||||||
<li class="flex items-center">
|
|
||||||
<i class="fas fa-envelope fa-icon mr-2"></i>
|
|
||||||
<span>service@hrms.com</span>
|
|
||||||
</li>
|
|
||||||
<li class="flex items-center">
|
|
||||||
<i class="fas fa-map-marker-alt fa-icon mr-2"></i>
|
|
||||||
<span>北京市海淀区科技园路88号</span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="border-t border-gray-700 mt-6 pt-4 text-xs text-center">
|
|
||||||
<p>© 2023 人力资源管理系统 版权所有 | 京ICP备12345678号</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,451 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="zh-CN">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>人力资源管理系统</title>
|
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
|
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
||||||
<script>
|
|
||||||
tailwind.config = {
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
colors: {
|
|
||||||
primary: '#2D5CF6',
|
|
||||||
secondary: '#F5F6FA'
|
|
||||||
},
|
|
||||||
borderRadius: {
|
|
||||||
'none': '0px',
|
|
||||||
'sm': '2px',
|
|
||||||
DEFAULT: '4px',
|
|
||||||
'md': '8px',
|
|
||||||
'lg': '12px',
|
|
||||||
'xl': '16px',
|
|
||||||
'2xl': '20px',
|
|
||||||
'3xl': '24px',
|
|
||||||
'full': '9999px',
|
|
||||||
'button': '4px'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
min-height: 1024px;
|
|
||||||
}
|
|
||||||
.nav-item:hover {
|
|
||||||
background-color: rgba(255,255,255,0.1);
|
|
||||||
}
|
|
||||||
.tree-item:hover {
|
|
||||||
background-color: rgba(45,92,246,0.1);
|
|
||||||
}
|
|
||||||
.table-row:hover {
|
|
||||||
background-color: #F5F6FA;
|
|
||||||
}
|
|
||||||
.search-icon {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
}
|
|
||||||
.user-avatar {
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
}
|
|
||||||
.ai-icon {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="bg-white font-sans text-gray-800">
|
|
||||||
<!-- 顶部导航栏 -->
|
|
||||||
<!-- <header class="w-full bg-primary text-white fixed top-0 left-0 z-50 shadow-md">
|
|
||||||
<div class="container mx-auto px-4 h-16 flex items-center justify-between">
|
|
||||||
|
|
||||||
<div class="flex items-center">
|
|
||||||
<div class="font-['Pacifico'] text-xl mr-8">人力</div>
|
|
||||||
|
|
||||||
|
|
||||||
<nav class="hidden md:flex space-x-5">
|
|
||||||
<a href="#" class="nav-item px-3 py-2 text-sm rounded-button whitespace-nowrap">多维统计</a>
|
|
||||||
<a href="#" class="nav-item px-3 py-2 text-sm rounded-button whitespace-nowrap">人员管理</a>
|
|
||||||
<a href="#" class="nav-item px-3 py-2 text-sm rounded-button whitespace-nowrap">组织管理</a>
|
|
||||||
<a href="#" class="nav-item px-3 py-2 text-sm rounded-button whitespace-nowrap">考勤管理</a>
|
|
||||||
<a href="#" class="nav-item px-3 py-2 text-sm rounded-button whitespace-nowrap">绩效管理</a>
|
|
||||||
<a href="#" class="nav-item px-3 py-2 text-sm rounded-button whitespace-nowrap">薪酬管理</a>
|
|
||||||
<a href="#" class="nav-item px-3 py-2 text-sm rounded-button whitespace-nowrap">知识库</a>
|
|
||||||
<a href="#" class="nav-item px-3 py-2 text-sm rounded-button whitespace-nowrap">后台管理</a>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="flex items-center space-x-4">
|
|
||||||
|
|
||||||
<div class="relative hidden md:block">
|
|
||||||
<input type="text" placeholder="搜索..." class="bg-white bg-opacity-20 text-white text-sm pl-8 pr-4 py-1 rounded-full border-none focus:ring-2 focus:ring-white focus:ring-opacity-50 placeholder-white placeholder-opacity-70 w-48">
|
|
||||||
<i class="fas fa-search search-icon absolute left-3 top-1/2 transform -translate-y-1/2 text-white text-opacity-70"></i>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<button class="flex items-center space-x-1 bg-white bg-opacity-20 hover:bg-opacity-30 px-3 py-1 rounded-button text-sm whitespace-nowrap">
|
|
||||||
<i class="fas fa-robot ai-icon text-white"></i>
|
|
||||||
<span>AI助手</span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div class="flex items-center space-x-2 cursor-pointer">
|
|
||||||
<div class="user-avatar rounded-full bg-white text-primary flex items-center justify-center font-semibold">张</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header> -->
|
|
||||||
|
|
||||||
<!-- 主体内容 -->
|
|
||||||
<main class="container mx-auto px-4 pb-10">
|
|
||||||
<div class="flex mt-6">
|
|
||||||
<!-- 左侧组织架构树 -->
|
|
||||||
<div class="w-1/5 pr-4">
|
|
||||||
<div class="bg-secondary rounded-md shadow-sm p-4 h-full">
|
|
||||||
<h3 class="text-sm font-semibold mb-4 text-gray-700">组织架构</h3>
|
|
||||||
<div class="space-y-1">
|
|
||||||
<div class="tree-item cursor-pointer p-2 rounded-md text-sm flex items-center">
|
|
||||||
<i class="fas fa-building mr-2 text-gray-500"></i>
|
|
||||||
<span>集团公司</span>
|
|
||||||
</div>
|
|
||||||
<div class="tree-item cursor-pointer p-2 rounded-md text-sm flex items-center ml-4">
|
|
||||||
<i class="fas fa-sitemap mr-2 text-gray-500"></i>
|
|
||||||
<span>技术中心</span>
|
|
||||||
</div>
|
|
||||||
<div class="tree-item cursor-pointer p-2 rounded-md text-sm flex items-center ml-8 bg-primary bg-opacity-10 text-primary">
|
|
||||||
<i class="fas fa-code-branch mr-2"></i>
|
|
||||||
<span>研发部</span>
|
|
||||||
</div>
|
|
||||||
<div class="tree-item cursor-pointer p-2 rounded-md text-sm flex items-center ml-8">
|
|
||||||
<i class="fas fa-code-branch mr-2 text-gray-500"></i>
|
|
||||||
<span>测试部</span>
|
|
||||||
</div>
|
|
||||||
<div class="tree-item cursor-pointer p-2 rounded-md text-sm flex items-center ml-4">
|
|
||||||
<i class="fas fa-sitemap mr-2 text-gray-500"></i>
|
|
||||||
<span>市场中心</span>
|
|
||||||
</div>
|
|
||||||
<div class="tree-item cursor-pointer p-2 rounded-md text-sm flex items-center ml-8">
|
|
||||||
<i class="fas fa-code-branch mr-2 text-gray-500"></i>
|
|
||||||
<span>市场部</span>
|
|
||||||
</div>
|
|
||||||
<div class="tree-item cursor-pointer p-2 rounded-md text-sm flex items-center ml-8">
|
|
||||||
<i class="fas fa-code-branch mr-2 text-gray-500"></i>
|
|
||||||
<span>品牌部</span>
|
|
||||||
</div>
|
|
||||||
<div class="tree-item cursor-pointer p-2 rounded-md text-sm flex items-center ml-4">
|
|
||||||
<i class="fas fa-sitemap mr-2 text-gray-500"></i>
|
|
||||||
<span>运营中心</span>
|
|
||||||
</div>
|
|
||||||
<div class="tree-item cursor-pointer p-2 rounded-md text-sm flex items-center ml-8">
|
|
||||||
<i class="fas fa-code-branch mr-2 text-gray-500"></i>
|
|
||||||
<span>客服部</span>
|
|
||||||
</div>
|
|
||||||
<div class="tree-item cursor-pointer p-2 rounded-md text-sm flex items-center ml-8">
|
|
||||||
<i class="fas fa-code-branch mr-2 text-gray-500"></i>
|
|
||||||
<span>运营部</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 右侧内容区 -->
|
|
||||||
<div class="w-4/5">
|
|
||||||
<!-- 筛选区域 -->
|
|
||||||
<div class="bg-white rounded-md shadow-sm p-4 mb-4">
|
|
||||||
<h3 class="text-sm font-semibold mb-4 text-gray-700">薪酬查询</h3>
|
|
||||||
<div class="grid grid-cols-4 gap-4">
|
|
||||||
<div>
|
|
||||||
<label class="block text-xs text-gray-500 mb-1">姓名</label>
|
|
||||||
<input type="text" class="w-full border border-gray-200 rounded-md px-3 py-1 text-sm focus:ring-primary focus:border-primary">
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label class="block text-xs text-gray-500 mb-1">电话</label>
|
|
||||||
<input type="text" class="w-full border border-gray-200 rounded-md px-3 py-1 text-sm focus:ring-primary focus:border-primary">
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label class="block text-xs text-gray-500 mb-1">月份</label>
|
|
||||||
<div class="relative">
|
|
||||||
<input type="text" class="w-full border border-gray-200 rounded-md px-3 py-1 text-sm focus:ring-primary focus:border-primary" placeholder="选择月份">
|
|
||||||
<i class="fas fa-calendar-alt absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-sm"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-end">
|
|
||||||
<button class="bg-primary text-white px-4 py-1 rounded-button text-sm whitespace-nowrap hover:bg-opacity-90">查询</button>
|
|
||||||
<button class="ml-2 border border-gray-200 px-4 py-1 rounded-button text-sm whitespace-nowrap hover:bg-gray-50">重置</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 薪酬列表 -->
|
|
||||||
<div class="bg-white rounded-md shadow-sm overflow-hidden">
|
|
||||||
<div class="overflow-x-auto">
|
|
||||||
<table class="min-w-full divide-y divide-gray-200 text-sm">
|
|
||||||
<thead class="bg-secondary">
|
|
||||||
<tr>
|
|
||||||
<th class="px-4 py-2 text-left font-medium text-gray-700">序号</th>
|
|
||||||
<th class="px-4 py-2 text-left font-medium text-gray-700">姓名</th>
|
|
||||||
<th class="px-4 py-2 text-left font-medium text-gray-700">性别</th>
|
|
||||||
<th class="px-4 py-2 text-left font-medium text-gray-700">年龄</th>
|
|
||||||
<th class="px-4 py-2 text-left font-medium text-gray-700">部门</th>
|
|
||||||
<th class="px-4 py-2 text-left font-medium text-gray-700">岗位</th>
|
|
||||||
<th class="px-4 py-2 text-left font-medium text-gray-700">月份</th>
|
|
||||||
<th class="px-4 py-2 text-left font-medium text-gray-700">税前工资</th>
|
|
||||||
<th class="px-4 py-2 text-left font-medium text-gray-700">税后工资</th>
|
|
||||||
<th class="px-4 py-2 text-left font-medium text-gray-700">基本工资</th>
|
|
||||||
<th class="px-4 py-2 text-left font-medium text-gray-700">浮动工资</th>
|
|
||||||
<th class="px-4 py-2 text-left font-medium text-gray-700">详情</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody class="divide-y divide-gray-200">
|
|
||||||
<tr class="table-row">
|
|
||||||
<td class="px-4 py-2">1</td>
|
|
||||||
<td class="px-4 py-2">张明远</td>
|
|
||||||
<td class="px-4 py-2">男</td>
|
|
||||||
<td class="px-4 py-2">32</td>
|
|
||||||
<td class="px-4 py-2">研发部</td>
|
|
||||||
<td class="px-4 py-2">高级工程师</td>
|
|
||||||
<td class="px-4 py-2">2023-10</td>
|
|
||||||
<td class="px-4 py-2">¥28,500</td>
|
|
||||||
<td class="px-4 py-2">¥24,225</td>
|
|
||||||
<td class="px-4 py-2">¥18,000</td>
|
|
||||||
<td class="px-4 py-2">¥10,500</td>
|
|
||||||
<td class="px-4 py-2">
|
|
||||||
<button class="text-primary hover:underline">查看</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="table-row">
|
|
||||||
<td class="px-4 py-2">2</td>
|
|
||||||
<td class="px-4 py-2">李思雨</td>
|
|
||||||
<td class="px-4 py-2">女</td>
|
|
||||||
<td class="px-4 py-2">28</td>
|
|
||||||
<td class="px-4 py-2">市场部</td>
|
|
||||||
<td class="px-4 py-2">市场经理</td>
|
|
||||||
<td class="px-4 py-2">2023-10</td>
|
|
||||||
<td class="px-4 py-2">¥25,800</td>
|
|
||||||
<td class="px-4 py-2">¥22,170</td>
|
|
||||||
<td class="px-4 py-2">¥16,000</td>
|
|
||||||
<td class="px-4 py-2">¥9,800</td>
|
|
||||||
<td class="px-4 py-2">
|
|
||||||
<button class="text-primary hover:underline">查看</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="table-row">
|
|
||||||
<td class="px-4 py-2">3</td>
|
|
||||||
<td class="px-4 py-2">王建国</td>
|
|
||||||
<td class="px-4 py-2">男</td>
|
|
||||||
<td class="px-4 py-2">45</td>
|
|
||||||
<td class="px-4 py-2">技术中心</td>
|
|
||||||
<td class="px-4 py-2">技术总监</td>
|
|
||||||
<td class="px-4 py-2">2023-10</td>
|
|
||||||
<td class="px-4 py-2">¥42,000</td>
|
|
||||||
<td class="px-4 py-2">¥34,860</td>
|
|
||||||
<td class="px-4 py-2">¥25,000</td>
|
|
||||||
<td class="px-4 py-2">¥17,000</td>
|
|
||||||
<td class="px-4 py-2">
|
|
||||||
<button class="text-primary hover:underline">查看</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="table-row">
|
|
||||||
<td class="px-4 py-2">4</td>
|
|
||||||
<td class="px-4 py-2">赵雪</td>
|
|
||||||
<td class="px-4 py-2">女</td>
|
|
||||||
<td class="px-4 py-2">26</td>
|
|
||||||
<td class="px-4 py-2">运营部</td>
|
|
||||||
<td class="px-4 py-2">运营专员</td>
|
|
||||||
<td class="px-4 py-2">2023-10</td>
|
|
||||||
<td class="px-4 py-2">¥15,000</td>
|
|
||||||
<td class="px-4 py-2">¥13,350</td>
|
|
||||||
<td class="px-4 py-2">¥10,000</td>
|
|
||||||
<td class="px-4 py-2">¥5,000</td>
|
|
||||||
<td class="px-4 py-2">
|
|
||||||
<button class="text-primary hover:underline">查看</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="table-row">
|
|
||||||
<td class="px-4 py-2">5</td>
|
|
||||||
<td class="px-4 py-2">陈志强</td>
|
|
||||||
<td class="px-4 py-2">男</td>
|
|
||||||
<td class="px-4 py-2">35</td>
|
|
||||||
<td class="px-4 py-2">测试部</td>
|
|
||||||
<td class="px-4 py-2">测试经理</td>
|
|
||||||
<td class="px-4 py-2">2023-10</td>
|
|
||||||
<td class="px-4 py-2">¥22,500</td>
|
|
||||||
<td class="px-4 py-2">¥19,575</td>
|
|
||||||
<td class="px-4 py-2">¥15,000</td>
|
|
||||||
<td class="px-4 py-2">¥7,500</td>
|
|
||||||
<td class="px-4 py-2">
|
|
||||||
<button class="text-primary hover:underline">查看</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="table-row">
|
|
||||||
<td class="px-4 py-2">6</td>
|
|
||||||
<td class="px-4 py-2">刘芳</td>
|
|
||||||
<td class="px-4 py-2">女</td>
|
|
||||||
<td class="px-4 py-2">30</td>
|
|
||||||
<td class="px-4 py-2">品牌部</td>
|
|
||||||
<td class="px-4 py-2">品牌主管</td>
|
|
||||||
<td class="px-4 py-2">2023-10</td>
|
|
||||||
<td class="px-4 py-2">¥19,800</td>
|
|
||||||
<td class="px-4 py-2">¥17,406</td>
|
|
||||||
<td class="px-4 py-2">¥12,000</td>
|
|
||||||
<td class="px-4 py-2">¥7,800</td>
|
|
||||||
<td class="px-4 py-2">
|
|
||||||
<button class="text-primary hover:underline">查看</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="table-row">
|
|
||||||
<td class="px-4 py-2">7</td>
|
|
||||||
<td class="px-4 py-2">周伟</td>
|
|
||||||
<td class="px-4 py-2">男</td>
|
|
||||||
<td class="px-4 py-2">29</td>
|
|
||||||
<td class="px-4 py-2">研发部</td>
|
|
||||||
<td class="px-4 py-2">前端工程师</td>
|
|
||||||
<td class="px-4 py-2">2023-10</td>
|
|
||||||
<td class="px-4 py-2">¥20,000</td>
|
|
||||||
<td class="px-4 py-2">¥17,600</td>
|
|
||||||
<td class="px-4 py-2">¥13,000</td>
|
|
||||||
<td class="px-4 py-2">¥7,000</td>
|
|
||||||
<td class="px-4 py-2">
|
|
||||||
<button class="text-primary hover:underline">查看</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="table-row">
|
|
||||||
<td class="px-4 py-2">8</td>
|
|
||||||
<td class="px-4 py-2">吴晓梅</td>
|
|
||||||
<td class="px-4 py-2">女</td>
|
|
||||||
<td class="px-4 py-2">27</td>
|
|
||||||
<td class="px-4 py-2">客服部</td>
|
|
||||||
<td class="px-4 py-2">客服主管</td>
|
|
||||||
<td class="px-4 py-2">2023-10</td>
|
|
||||||
<td class="px-4 py-2">¥16,500</td>
|
|
||||||
<td class="px-4 py-2">¥14,685</td>
|
|
||||||
<td class="px-4 py-2">¥11,000</td>
|
|
||||||
<td class="px-4 py-2">¥5,500</td>
|
|
||||||
<td class="px-4 py-2">
|
|
||||||
<button class="text-primary hover:underline">查看</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="table-row">
|
|
||||||
<td class="px-4 py-2">9</td>
|
|
||||||
<td class="px-4 py-2">郑阳</td>
|
|
||||||
<td class="px-4 py-2">男</td>
|
|
||||||
<td class="px-4 py-2">33</td>
|
|
||||||
<td class="px-4 py-2">研发部</td>
|
|
||||||
<td class="px-4 py-2">后端工程师</td>
|
|
||||||
<td class="px-4 py-2">2023-10</td>
|
|
||||||
<td class="px-4 py-2">¥23,000</td>
|
|
||||||
<td class="px-4 py-2">¥19,910</td>
|
|
||||||
<td class="px-4 py-2">¥15,000</td>
|
|
||||||
<td class="px-4 py-2">¥8,000</td>
|
|
||||||
<td class="px-4 py-2">
|
|
||||||
<button class="text-primary hover:underline">查看</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="table-row">
|
|
||||||
<td class="px-4 py-2">10</td>
|
|
||||||
<td class="px-4 py-2">林静</td>
|
|
||||||
<td class="px-4 py-2">女</td>
|
|
||||||
<td class="px-4 py-2">31</td>
|
|
||||||
<td class="px-4 py-2">市场部</td>
|
|
||||||
<td class="px-4 py-2">市场策划</td>
|
|
||||||
<td class="px-4 py-2">2023-10</td>
|
|
||||||
<td class="px-4 py-2">¥18,500</td>
|
|
||||||
<td class="px-4 py-2">¥16,315</td>
|
|
||||||
<td class="px-4 py-2">¥12,000</td>
|
|
||||||
<td class="px-4 py-2">¥6,500</td>
|
|
||||||
<td class="px-4 py-2">
|
|
||||||
<button class="text-primary hover:underline">查看</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 分页 -->
|
|
||||||
<div class="px-4 py-3 flex items-center justify-between border-t border-gray-200">
|
|
||||||
<div class="text-xs text-gray-500">
|
|
||||||
显示 1 到 10 条，共 128 条记录
|
|
||||||
</div>
|
|
||||||
<div class="flex space-x-1">
|
|
||||||
<button class="px-3 py-1 border border-gray-200 rounded-md text-sm hover:bg-gray-50">«</button>
|
|
||||||
<button class="px-3 py-1 border border-gray-200 rounded-md text-sm bg-primary text-white">1</button>
|
|
||||||
<button class="px-3 py-1 border border-gray-200 rounded-md text-sm hover:bg-gray-50">2</button>
|
|
||||||
<button class="px-3 py-1 border border-gray-200 rounded-md text-sm hover:bg-gray-50">3</button>
|
|
||||||
<button class="px-3 py-1 border border-gray-200 rounded-md text-sm hover:bg-gray-50">...</button>
|
|
||||||
<button class="px-3 py-1 border border-gray-200 rounded-md text-sm hover:bg-gray-50">13</button>
|
|
||||||
<button class="px-3 py-1 border border-gray-200 rounded-md text-sm hover:bg-gray-50">»</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<!-- 底部页脚 -->
|
|
||||||
<footer class="w-full bg-secondary border-t border-gray-200 mt-10">
|
|
||||||
<div class="container mx-auto px-4 py-8">
|
|
||||||
<div class="grid grid-cols-4 gap-8">
|
|
||||||
<div>
|
|
||||||
<h4 class="text-sm font-semibold mb-4">关于我们</h4>
|
|
||||||
<p class="text-xs text-gray-600 mb-4">人力科技是一家专注于企业人力资源数字化解决方案的高科技企业，致力于为企业提供专业、高效的人力资源管理服务。</p>
|
|
||||||
<div class="flex space-x-4">
|
|
||||||
<a href="#" class="text-gray-500 hover:text-primary"><i class="fab fa-weixin"></i></a>
|
|
||||||
<a href="#" class="text-gray-500 hover:text-primary"><i class="fab fa-weibo"></i></a>
|
|
||||||
<a href="#" class="text-gray-500 hover:text-primary"><i class="fab fa-linkedin"></i></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h4 class="text-sm font-semibold mb-4">产品服务</h4>
|
|
||||||
<ul class="space-y-2 text-xs text-gray-600">
|
|
||||||
<li><a href="#" class="hover:text-primary">人力资源管理系统</a></li>
|
|
||||||
<li><a href="#" class="hover:text-primary">薪酬计算系统</a></li>
|
|
||||||
<li><a href="#" class="hover:text-primary">绩效考核系统</a></li>
|
|
||||||
<li><a href="#" class="hover:text-primary">招聘管理系统</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h4 class="text-sm font-semibold mb-4">帮助中心</h4>
|
|
||||||
<ul class="space-y-2 text-xs text-gray-600">
|
|
||||||
<li><a href="#" class="hover:text-primary">使用文档</a></li>
|
|
||||||
<li><a href="#" class="hover:text-primary">视频教程</a></li>
|
|
||||||
<li><a href="#" class="hover:text-primary">常见问题</a></li>
|
|
||||||
<li><a href="#" class="hover:text-primary">在线客服</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h4 class="text-sm font-semibold mb-4">联系我们</h4>
|
|
||||||
<ul class="space-y-2 text-xs text-gray-600">
|
|
||||||
<li class="flex items-start">
|
|
||||||
<i class="fas fa-map-marker-alt mr-2 mt-0.5"></i>
|
|
||||||
<span>北京市海淀区中关村软件园二期</span>
|
|
||||||
</li>
|
|
||||||
<li class="flex items-center">
|
|
||||||
<i class="fas fa-phone-alt mr-2"></i>
|
|
||||||
<span>400-888-8888</span>
|
|
||||||
</li>
|
|
||||||
<li class="flex items-center">
|
|
||||||
<i class="fas fa-envelope mr-2"></i>
|
|
||||||
<span>service@hrtech.com</span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="border-t border-gray-200 mt-8 pt-6 text-center text-xs text-gray-500">
|
|
||||||
<p>© 2023 人力科技 版权所有 京ICP备12345678号</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 83 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 526 B |
Binary file not shown.
|
After Width: | Height: | Size: 124 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
@ -0,0 +1,83 @@
|
|||||||
|
import React, { PureComponent } from 'react';
|
||||||
|
import { connect } from '@umijs/max';
|
||||||
|
import { Tabs } from 'antd';
|
||||||
|
|
||||||
|
// 导入子组件
|
||||||
|
import BasicInfoManagement from './components/BasicInfoManagement';
|
||||||
|
import QualificationManagement from './components/QualificationManagement';
|
||||||
|
import PersonnelBasicInfo from './components/PersonnelBasicInfo';
|
||||||
|
|
||||||
|
import styles from './BasicInformation.less';
|
||||||
|
|
||||||
|
@connect(({ staffsheet, loading }) => ({
|
||||||
|
staffsheet,
|
||||||
|
loading: loading.models.staffsheet,
|
||||||
|
}))
|
||||||
|
|
||||||
|
class BasicInformation extends PureComponent {
|
||||||
|
state = {
|
||||||
|
activeTab: '1',
|
||||||
|
}
|
||||||
|
|
||||||
|
// 渲染Tab内容
|
||||||
|
renderTabContent = () => {
|
||||||
|
const { activeTab } = this.state;
|
||||||
|
const { staffsheet, loading, dispatch } = this.props;
|
||||||
|
|
||||||
|
const childProps = {
|
||||||
|
staffsheet,
|
||||||
|
loading,
|
||||||
|
dispatch
|
||||||
|
};
|
||||||
|
|
||||||
|
switch (activeTab) {
|
||||||
|
case '1':
|
||||||
|
return <BasicInfoManagement {...childProps} />;
|
||||||
|
case '2':
|
||||||
|
return <QualificationManagement {...childProps} />;
|
||||||
|
case '3':
|
||||||
|
return <PersonnelBasicInfo {...childProps} />;
|
||||||
|
default:
|
||||||
|
return <BasicInfoManagement {...childProps} />;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { activeTab } = this.state;
|
||||||
|
|
||||||
|
const tabItems = [
|
||||||
|
{
|
||||||
|
key: '1',
|
||||||
|
label: '基本信息管理',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '2',
|
||||||
|
label: '资质证照管理',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '3',
|
||||||
|
label: '人员基础信息',
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{/* 顶部标签页 */}
|
||||||
|
<div style={{ marginBottom: 0, background: '#EEEFF7', padding: '0 24px' }}>
|
||||||
|
<Tabs
|
||||||
|
activeKey={activeTab}
|
||||||
|
onChange={(key) => this.setState({ activeTab: key })}
|
||||||
|
items={tabItems}
|
||||||
|
className="custom-tabs"
|
||||||
|
style={{ marginBottom: 0 }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 根据选中的Tab渲染对应的子组件 */}
|
||||||
|
{this.renderTabContent()}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default BasicInformation;
|
||||||
@ -0,0 +1,836 @@
|
|||||||
|
/* Tabs导航条样式 - 简洁风格 */
|
||||||
|
:global(.custom-tabs) {
|
||||||
|
:global(.ant-tabs-nav) {
|
||||||
|
margin-bottom: 0 !important;
|
||||||
|
background-color: #EEEFF7;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 移除默认的下划线动画 */
|
||||||
|
:global(.ant-tabs-ink-bar) {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 未选中状态 - 简洁样式 */
|
||||||
|
:global(.ant-tabs-tab) {
|
||||||
|
background: transparent !important;
|
||||||
|
border: none !important;
|
||||||
|
border-radius: 0 !important;
|
||||||
|
margin-right: 32px !important;
|
||||||
|
padding: 12px 0 !important;
|
||||||
|
transition: all 0.3s ease !important;
|
||||||
|
position: relative !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 未选中状态文字 */
|
||||||
|
:global(.ant-tabs-tab) :global(.ant-tabs-tab-btn) {
|
||||||
|
color: #333 !important;
|
||||||
|
font-size: 14px !important;
|
||||||
|
font-weight: normal !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 选中状态 */
|
||||||
|
:global(.ant-tabs-tab-active) {
|
||||||
|
background: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 选中状态文字 */
|
||||||
|
:global(.ant-tabs-tab-active) :global(.ant-tabs-tab-btn) {
|
||||||
|
color: #2E4CD4 !important;
|
||||||
|
font-weight: 500 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 选中状态底部蓝色边框 */
|
||||||
|
:global(.ant-tabs-tab-active)::after {
|
||||||
|
content: '' !important;
|
||||||
|
position: absolute !important;
|
||||||
|
bottom: 0 !important;
|
||||||
|
left: 0 !important;
|
||||||
|
right: 0 !important;
|
||||||
|
height: 2px !important;
|
||||||
|
background: #2E4CD4 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 底部分隔线 */
|
||||||
|
:global(.ant-tabs-nav)::before {
|
||||||
|
// border-bottom: 1px solid red !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 悬停效果 */
|
||||||
|
:global(.ant-tabs-tab):hover :global(.ant-tabs-tab-btn) {
|
||||||
|
color: #2E4CD4 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-container {
|
||||||
|
margin: 0;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 0;
|
||||||
|
|
||||||
|
:global(.ant-card-body) {
|
||||||
|
padding: 15px 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 主要卡片样式 */
|
||||||
|
.ant-card {
|
||||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-card-head-title {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-card-body {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 功能区域图表样式 */
|
||||||
|
.chart-container {
|
||||||
|
position: relative;
|
||||||
|
height: 240px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-full-size {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.org-chart {
|
||||||
|
position: relative;
|
||||||
|
height: 240px;
|
||||||
|
|
||||||
|
.org-top-button {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
|
||||||
|
.ant-btn {
|
||||||
|
border-radius: 20px;
|
||||||
|
font-size: 12px;
|
||||||
|
height: 36px;
|
||||||
|
padding-left: 20px;
|
||||||
|
padding-right: 20px;
|
||||||
|
background: #5470c6;
|
||||||
|
border: none;
|
||||||
|
box-shadow: 0 2px 8px rgba(84, 112, 198, 0.3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.org-level-1 {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 25px;
|
||||||
|
margin-top: 20px;
|
||||||
|
padding-left: 8%;
|
||||||
|
padding-right: 8%;
|
||||||
|
|
||||||
|
.org-department {
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.dept-icon {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin: 0 auto 8px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 20px;
|
||||||
|
color: white;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||||
|
|
||||||
|
&.safety {
|
||||||
|
background-color: #52c41a;
|
||||||
|
box-shadow: 0 2px 8px rgba(82, 196, 26, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.production {
|
||||||
|
background-color: #1890ff;
|
||||||
|
box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.equipment {
|
||||||
|
background-color: #13c2c2;
|
||||||
|
box-shadow: 0 2px 8px rgba(19, 194, 194, 0.3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dept-name {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #374151;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.org-level-2 {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding-left: 4%;
|
||||||
|
padding-right: 4%;
|
||||||
|
|
||||||
|
.dept-group {
|
||||||
|
display: flex;
|
||||||
|
gap: 16px;
|
||||||
|
|
||||||
|
.sub-department {
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.sub-dept-icon {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin: 0 auto 6px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 16px;
|
||||||
|
color: white;
|
||||||
|
|
||||||
|
&.safety {
|
||||||
|
background-color: #52c41a;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.production {
|
||||||
|
background-color: #1890ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.equipment {
|
||||||
|
background-color: #13c2c2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sub-dept-name {
|
||||||
|
font-size: 10px;
|
||||||
|
color: #6b7280;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 连接线样式
|
||||||
|
.connect-line {
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
&.vertical {
|
||||||
|
width: 1px;
|
||||||
|
border-left: 1px dashed #9ca3af;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.horizontal {
|
||||||
|
height: 1px;
|
||||||
|
border-top: 1px dashed #9ca3af;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 主连接线
|
||||||
|
&.main-vertical {
|
||||||
|
top: 56px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.main-horizontal {
|
||||||
|
top: 76px;
|
||||||
|
left: 20%;
|
||||||
|
width: 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 第一层连接线
|
||||||
|
&.level1-left {
|
||||||
|
top: 70px;
|
||||||
|
left: 20%;
|
||||||
|
height: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.level1-center {
|
||||||
|
top: 70px;
|
||||||
|
left: 50%;
|
||||||
|
height: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.level1-right {
|
||||||
|
top: 70px;
|
||||||
|
left: 80%;
|
||||||
|
height: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 风险警告图标 */
|
||||||
|
.risk-icon {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
|
||||||
|
margin: 0 auto 12px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
|
||||||
|
font-size: 32px;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 提示框样式 */
|
||||||
|
.risk-tips {
|
||||||
|
background-color: #fff2f0;
|
||||||
|
padding: 12px;
|
||||||
|
border-radius: 6px;
|
||||||
|
border: 1px solid #ffccc7;
|
||||||
|
|
||||||
|
.tips-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
|
||||||
|
.tips-icon {
|
||||||
|
color: #ff4d4f;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tips-label {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tips-content {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #666;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 表格工具栏 */
|
||||||
|
.table-toolbar {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
padding: 16px 0;
|
||||||
|
border-bottom: 1px solid #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 响应式设计 */
|
||||||
|
@media (max-width: 1200px) {
|
||||||
|
.function-block {
|
||||||
|
height: auto;
|
||||||
|
min-height: 250px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.custom-tabs .ant-tabs-tab {
|
||||||
|
padding: 6px 12px !important;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.org-button {
|
||||||
|
padding: 2px;
|
||||||
|
|
||||||
|
.org-icon {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.org-label {
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-toolbar {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 12px;
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.function-block {
|
||||||
|
padding: 16px;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 新增样式类 - 实时风险评估 */
|
||||||
|
.risk-assessment-container {
|
||||||
|
border: 1px solid #FFE8E8;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 20px;
|
||||||
|
height: 300px;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
background-image: url('~@/assets/basic_information/risk-area-bg.png');
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
// background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.risk-background-top {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 60%;
|
||||||
|
background: radial-gradient(ellipse at top right, rgba(255, 107, 53, 0.08) 0%, transparent 70%);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.risk-background-bottom {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 50%;
|
||||||
|
background: radial-gradient(ellipse at bottom left, rgba(239, 68, 68, 0.06) 0%, transparent 60%);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.risk-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.risk-title-indicator {
|
||||||
|
display: inline-block;
|
||||||
|
width: 2px;
|
||||||
|
height: 16px;
|
||||||
|
background: #FF2526;
|
||||||
|
border-radius: 2px;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.risk-title-text {
|
||||||
|
color: #333;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.risk-content-area {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
height: calc(100% - 60px);
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.risk-shield-container {
|
||||||
|
// flex: 0 0 120px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.risk-shield {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
background: linear-gradient(135deg, #ff6b35 0%, #f7931e 50%, #ffb347 100%);
|
||||||
|
border-radius: 12px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-shadow: 0 8px 20px rgba(255, 107, 53, 0.3), inset 0 2px 4px rgba(255, 255, 255, 0.3);
|
||||||
|
position: relative;
|
||||||
|
transform: perspective(200px) rotateX(5deg) rotateY(-5deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.risk-shield-icon {
|
||||||
|
color: white;
|
||||||
|
font-size: 40px;
|
||||||
|
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.risk-shield-shadow {
|
||||||
|
position: absolute;
|
||||||
|
bottom: -8px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 80px;
|
||||||
|
height: 16px;
|
||||||
|
background: linear-gradient(90deg, rgba(255, 107, 53, 0.2) 0%, rgba(255, 107, 53, 0.4) 50%, rgba(255, 107, 53, 0.2) 100%);
|
||||||
|
border-radius: 50%;
|
||||||
|
filter: blur(2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.risk-info-container {
|
||||||
|
flex: 1;
|
||||||
|
// padding-left: 16px;
|
||||||
|
margin-top: 50px;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.risk-level-alert {
|
||||||
|
background: #FFD0D0;
|
||||||
|
backdrop-filter: blur(4px);
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 12px 16px;
|
||||||
|
// margin-bottom: 20px;
|
||||||
|
// border: 1px solid rgba(255, 196, 209, 0.6);
|
||||||
|
// box-shadow: 0 2px 8px rgba(255, 107, 53, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.risk-level-text {
|
||||||
|
color: #333;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.risk-level-danger {
|
||||||
|
color: #FF2626;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-left: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.risk-tip-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
padding: 12px 0;
|
||||||
|
background: rgba(255, 255, 255, 0.4);
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.risk-tip-icon {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
// background: linear-gradient(135deg, #ff6b35, #f7931e);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-right: 8px;
|
||||||
|
margin-top: 2px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
// box-shadow: 0 2px 6px rgba(255, 107, 53, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.risk-tip-emoji {
|
||||||
|
color: white;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.risk-tip-content {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.risk-tip-text {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #666;
|
||||||
|
line-height: 1.6;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 组织架构样式 */
|
||||||
|
.org-chart-container {
|
||||||
|
position: relative;
|
||||||
|
height: 240px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.org-top-button-container {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.org-top-button {
|
||||||
|
border-radius: 20px;
|
||||||
|
font-size: 12px;
|
||||||
|
height: 36px;
|
||||||
|
padding-left: 20px;
|
||||||
|
padding-right: 20px;
|
||||||
|
background: #2E4CD4;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.org-connect-line-vertical {
|
||||||
|
position: absolute;
|
||||||
|
top: 56px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 1px;
|
||||||
|
height: 20px;
|
||||||
|
background: #d1d5db;
|
||||||
|
border-left: 1px dashed #9ca3af;
|
||||||
|
}
|
||||||
|
|
||||||
|
.org-connect-line-horizontal {
|
||||||
|
position: absolute;
|
||||||
|
top: 76px;
|
||||||
|
left: 20%;
|
||||||
|
width: 60%;
|
||||||
|
height: 1px;
|
||||||
|
border-top: 1px dashed #9ca3af;
|
||||||
|
}
|
||||||
|
|
||||||
|
.org-connect-line-branch {
|
||||||
|
position: absolute;
|
||||||
|
top: 70px;
|
||||||
|
width: 1px;
|
||||||
|
height: 12px;
|
||||||
|
border-left: 1px dashed #9ca3af;
|
||||||
|
}
|
||||||
|
|
||||||
|
.org-connect-line-branch-left {
|
||||||
|
left: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.org-connect-line-branch-center {
|
||||||
|
left: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.org-connect-line-branch-right {
|
||||||
|
left: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.org-departments-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 25px;
|
||||||
|
margin-top: 20px;
|
||||||
|
padding-left: 8%;
|
||||||
|
padding-right: 8%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.org-department {
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.org-department-icon {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin: 0 auto 8px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.org-department-icon-safety {
|
||||||
|
background-color: #52c41a;
|
||||||
|
box-shadow: 0 2px 8px rgba(82, 196, 26, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.org-department-icon-production {
|
||||||
|
background-color: #1890ff;
|
||||||
|
box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.org-department-icon-equipment {
|
||||||
|
background-color: #13c2c2;
|
||||||
|
box-shadow: 0 2px 8px rgba(19, 194, 194, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.org-department-label {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #374151;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.org-department-connect-v {
|
||||||
|
position: absolute;
|
||||||
|
top: 58px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 1px;
|
||||||
|
height: 20px;
|
||||||
|
border-left: 1px dashed #9ca3af;
|
||||||
|
}
|
||||||
|
|
||||||
|
.org-department-connect-h {
|
||||||
|
position: absolute;
|
||||||
|
top: 78px;
|
||||||
|
left: 10%;
|
||||||
|
width: 80%;
|
||||||
|
height: 1px;
|
||||||
|
border-top: 1px dashed #9ca3af;
|
||||||
|
}
|
||||||
|
|
||||||
|
.org-department-connect-sub {
|
||||||
|
position: absolute;
|
||||||
|
top: 72px;
|
||||||
|
width: 1px;
|
||||||
|
height: 12px;
|
||||||
|
border-left: 1px dashed #9ca3af;
|
||||||
|
}
|
||||||
|
|
||||||
|
.org-department-connect-sub-left {
|
||||||
|
left: 10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.org-department-connect-sub-right {
|
||||||
|
left: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-style {
|
||||||
|
border-color: #DFE4F6;
|
||||||
|
color: #2E4CD4;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 表格工具栏样式 */
|
||||||
|
.table-toolbar-container {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.operateStyle {
|
||||||
|
color: #2E4CD4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-input {
|
||||||
|
width: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-select {
|
||||||
|
width: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.func-area-bg {
|
||||||
|
background-image: url('~@/assets/basic_information/func-area-bg.png');
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
// background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.organ-area-bg {
|
||||||
|
background-image: url('~@/assets/basic_information/organ-area-bg.png');
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
// background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.warn-area-bg {
|
||||||
|
background-image: url('~@/assets/basic_information/warn-area-bg.png');
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card {
|
||||||
|
background: #F6F7FF;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 10px 15px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card-label {
|
||||||
|
color: #666;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card-value {
|
||||||
|
color: #222;
|
||||||
|
font-size: 22px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card-icon {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 50%;
|
||||||
|
// background: rgba(46, 76, 212, 0.08);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-left: 10px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ryzz-area-bg {
|
||||||
|
background-image: url('~@/assets/basic_information/ryzz-area-bg.png');
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
// background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dqtx-area-bg {
|
||||||
|
background-image: url('~@/assets/basic_information/dqtx-area-bg.png');
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
// background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 表单组件公共样式
|
||||||
|
.createForm {
|
||||||
|
:global(.ant-modal-content) {
|
||||||
|
background: linear-gradient(180deg, #EAEEFF 0%, #FFFFFF 20%, #FFFFFF 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.ant-modal-header) {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.ant-modal-title) {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.ant-modal-footer) {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global {
|
||||||
|
.ant-form {
|
||||||
|
margin-right: 24px;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-picker,
|
||||||
|
.ant-input-number {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-cancel-btn {
|
||||||
|
background: #B6BBD9;
|
||||||
|
color: #fff;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
width: 88px;
|
||||||
|
height: 36px;
|
||||||
|
margin-right: 16px;
|
||||||
|
font-size: 14px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-ok-btn {
|
||||||
|
background: #2E4CD4;
|
||||||
|
color: #fff;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
width: 88px;
|
||||||
|
height: 36px;
|
||||||
|
font-size: 14px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view-label {
|
||||||
|
color: #666;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
margin-right: 20px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view-value {
|
||||||
|
color: #333;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
word-break: break-all;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
@ -0,0 +1,167 @@
|
|||||||
|
import { useState, useEffect } from 'react'
|
||||||
|
import { Col, DatePicker, Form, Input, Modal, Row, Select } from 'antd'
|
||||||
|
import SelectDeptTree from '@/components/SelectDeptTree'
|
||||||
|
import SelectOrganTree from '@/components/SelectOrganTree'
|
||||||
|
import datadictionary from '@/utils/dataDictionary'
|
||||||
|
import { formatDictOptions, verifyPhone } from '@/utils/globalCommon'
|
||||||
|
import { NumberInput } from '@/components/NumberInput'
|
||||||
|
import styles from '../BasicInformation.less'
|
||||||
|
import style from '@/global.less'
|
||||||
|
import dayjs from 'dayjs'
|
||||||
|
import { formatDate } from '@/utils/formatUtils'
|
||||||
|
|
||||||
|
const { Item: FormItem } = Form
|
||||||
|
const { TextArea } = Input
|
||||||
|
const dictData = datadictionary
|
||||||
|
|
||||||
|
//新增表单
|
||||||
|
let getDeptTreeBySelectTree
|
||||||
|
let getOrganTreeBySelectTree
|
||||||
|
|
||||||
|
const BasicInfoCreateForm = (props => {
|
||||||
|
const [form] = Form.useForm()
|
||||||
|
|
||||||
|
const {
|
||||||
|
modalVisible,
|
||||||
|
handleAdd,
|
||||||
|
handleModalVisible,
|
||||||
|
loading,
|
||||||
|
dispatch,
|
||||||
|
selectDeptTree,
|
||||||
|
selectOrganTree
|
||||||
|
} = props
|
||||||
|
|
||||||
|
// 清空和初始化逻辑可保留
|
||||||
|
useEffect(() => {
|
||||||
|
form.resetFields();
|
||||||
|
}, [modalVisible])
|
||||||
|
|
||||||
|
const okHandle = () => {
|
||||||
|
form.validateFields()
|
||||||
|
.then(fieldsValue => {
|
||||||
|
form.resetFields()
|
||||||
|
handleAdd(fieldsValue)
|
||||||
|
})
|
||||||
|
.catch(() => { })
|
||||||
|
}
|
||||||
|
|
||||||
|
const afterClose = () => {
|
||||||
|
form.resetFields();
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
width={550}
|
||||||
|
bodyStyle={{ minHeight: '200px' }}
|
||||||
|
className={styles.createForm}
|
||||||
|
centered
|
||||||
|
destroyOnClose
|
||||||
|
title='新建项目'
|
||||||
|
open={modalVisible}
|
||||||
|
onOk={okHandle}
|
||||||
|
onCancel={() => handleModalVisible()}
|
||||||
|
afterClose={afterClose}
|
||||||
|
confirmLoading={loading}
|
||||||
|
footer={[
|
||||||
|
<button
|
||||||
|
key="cancel"
|
||||||
|
onClick={() => handleModalVisible()}
|
||||||
|
className={styles['modal-cancel-btn']}
|
||||||
|
>取消</button>,
|
||||||
|
<button
|
||||||
|
key="submit"
|
||||||
|
onClick={okHandle}
|
||||||
|
className={styles['modal-ok-btn']}
|
||||||
|
>确定</button>
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<Form
|
||||||
|
form={form}
|
||||||
|
// layout='vertical'
|
||||||
|
requiredMark={false}
|
||||||
|
style={{ marginTop: 30 }}
|
||||||
|
>
|
||||||
|
<Row gutter={16}>
|
||||||
|
<Col span={24}>
|
||||||
|
<Form.Item
|
||||||
|
label="项目名称"
|
||||||
|
name="projectName"
|
||||||
|
rules={[{ required: true, message: '请输入项目名称' }]}
|
||||||
|
>
|
||||||
|
<Input placeholder="输入项目名称" />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row gutter={16}>
|
||||||
|
<Col span={24}>
|
||||||
|
<Form.Item
|
||||||
|
label="地理信息"
|
||||||
|
name="location"
|
||||||
|
rules={[{ required: true, message: '请输入位置信息' }]}
|
||||||
|
>
|
||||||
|
<Input placeholder="请输入位置信息" />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row gutter={16}>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
label="占地面积"
|
||||||
|
name="area"
|
||||||
|
rules={[{ required: true, message: '请输入面积信息' }]}
|
||||||
|
>
|
||||||
|
<Input
|
||||||
|
placeholder="面积信息"
|
||||||
|
addonAfter="m²"
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
label="职业人数"
|
||||||
|
name="peopleCount"
|
||||||
|
rules={[{ required: true, message: '请输入人数' }]}
|
||||||
|
>
|
||||||
|
<Input placeholder="输入数量" />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row gutter={16}>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
label="组织机构"
|
||||||
|
name="org"
|
||||||
|
rules={[{ required: true, message: '请选择组织机构' }]}
|
||||||
|
>
|
||||||
|
<Select
|
||||||
|
placeholder="请选择"
|
||||||
|
options={[
|
||||||
|
{ label: '机构A', value: 'A' },
|
||||||
|
{ label: '机构B', value: 'B' }
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
label="安全等级"
|
||||||
|
name="safeLevel"
|
||||||
|
rules={[{ required: true, message: '请选择安全等级' }]}
|
||||||
|
>
|
||||||
|
<Select
|
||||||
|
placeholder="请选择"
|
||||||
|
options={[
|
||||||
|
{ label: '一级', value: '1' },
|
||||||
|
{ label: '二级', value: '2' },
|
||||||
|
{ label: '三级', value: '3' }
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Form>
|
||||||
|
</Modal>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
export default BasicInfoCreateForm
|
||||||
@ -0,0 +1,149 @@
|
|||||||
|
import { useEffect } from 'react'
|
||||||
|
import { Col, Form, Input, Modal, Row, Select } from 'antd'
|
||||||
|
import styles from '../BasicInformation.less'
|
||||||
|
|
||||||
|
const BasicInfoUpdateForm = (props => {
|
||||||
|
const [form] = Form.useForm()
|
||||||
|
|
||||||
|
const {
|
||||||
|
updateModalVisible,
|
||||||
|
handleUpdate,
|
||||||
|
handleUpdateModalVisible,
|
||||||
|
loading,
|
||||||
|
values = {}
|
||||||
|
} = props
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (updateModalVisible) {
|
||||||
|
form.setFieldsValue(values)
|
||||||
|
}
|
||||||
|
}, [updateModalVisible, values, form])
|
||||||
|
|
||||||
|
const okHandle = () => {
|
||||||
|
form.validateFields()
|
||||||
|
.then(fieldsValue => {
|
||||||
|
form.resetFields()
|
||||||
|
handleUpdate(fieldsValue)
|
||||||
|
})
|
||||||
|
.catch(() => { })
|
||||||
|
}
|
||||||
|
|
||||||
|
const afterClose = () => {
|
||||||
|
form.resetFields();
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
width={550}
|
||||||
|
bodyStyle={{ minHeight: '200px' }}
|
||||||
|
className={styles.createForm}
|
||||||
|
centered
|
||||||
|
destroyOnClose
|
||||||
|
title='修改项目'
|
||||||
|
open={updateModalVisible}
|
||||||
|
onOk={okHandle}
|
||||||
|
onCancel={() => handleUpdateModalVisible()}
|
||||||
|
afterClose={afterClose}
|
||||||
|
confirmLoading={loading}
|
||||||
|
footer={[
|
||||||
|
<button
|
||||||
|
key="cancel"
|
||||||
|
onClick={() => handleUpdateModalVisible()}
|
||||||
|
className={styles['modal-cancel-btn']}
|
||||||
|
>取消</button>,
|
||||||
|
<button
|
||||||
|
key="submit"
|
||||||
|
onClick={okHandle}
|
||||||
|
className={styles['modal-ok-btn']}
|
||||||
|
>确定</button>
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<Form
|
||||||
|
form={form}
|
||||||
|
requiredMark={false}
|
||||||
|
style={{ marginTop: 30 }}
|
||||||
|
>
|
||||||
|
<Row gutter={16}>
|
||||||
|
<Col span={24}>
|
||||||
|
<Form.Item
|
||||||
|
label="项目名称"
|
||||||
|
name="projectName"
|
||||||
|
rules={[{ required: true, message: '请输入项目名称' }]}
|
||||||
|
>
|
||||||
|
<Input placeholder="输入项目名称" />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row gutter={16}>
|
||||||
|
<Col span={24}>
|
||||||
|
<Form.Item
|
||||||
|
label="地理信息"
|
||||||
|
name="location"
|
||||||
|
rules={[{ required: true, message: '请输入位置信息' }]}
|
||||||
|
>
|
||||||
|
<Input placeholder="请输入位置信息" />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row gutter={16}>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
label="占地面积"
|
||||||
|
name="area"
|
||||||
|
rules={[{ required: true, message: '请输入面积信息' }]}
|
||||||
|
>
|
||||||
|
<Input
|
||||||
|
placeholder="面积信息"
|
||||||
|
addonAfter="m²"
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
label="职业人数"
|
||||||
|
name="peopleCount"
|
||||||
|
rules={[{ required: true, message: '请输入人数' }]}
|
||||||
|
>
|
||||||
|
<Input placeholder="输入数量" />
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row gutter={16}>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
label="组织机构"
|
||||||
|
name="org"
|
||||||
|
rules={[{ required: true, message: '请选择组织机构' }]}
|
||||||
|
>
|
||||||
|
<Select
|
||||||
|
placeholder="请选择"
|
||||||
|
options={[
|
||||||
|
{ label: '机构A', value: 'A' },
|
||||||
|
{ label: '机构B', value: 'B' }
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
<Col span={12}>
|
||||||
|
<Form.Item
|
||||||
|
label="安全等级"
|
||||||
|
name="safeLevel"
|
||||||
|
rules={[{ required: true, message: '请选择安全等级' }]}
|
||||||
|
>
|
||||||
|
<Select
|
||||||
|
placeholder="请选择"
|
||||||
|
options={[
|
||||||
|
{ label: '一级', value: '1' },
|
||||||
|
{ label: '二级', value: '2' },
|
||||||
|
{ label: '三级', value: '3' }
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Form>
|
||||||
|
</Modal>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
export default BasicInfoUpdateForm
|
||||||
@ -0,0 +1,52 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Modal, Row, Col } from 'antd';
|
||||||
|
import styles from '../BasicInformation.less';
|
||||||
|
|
||||||
|
const BasicInfoViewForm = (props) => {
|
||||||
|
const { viewModalVisible, handleViewModalVisible, values = {} } = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
width={500}
|
||||||
|
bodyStyle={{ minHeight: '180px'}}
|
||||||
|
className={styles.createForm}
|
||||||
|
centered
|
||||||
|
destroyOnClose
|
||||||
|
title="详情"
|
||||||
|
open={viewModalVisible}
|
||||||
|
footer={null}
|
||||||
|
onCancel={() => handleViewModalVisible(false)}
|
||||||
|
>
|
||||||
|
<Row gutter={0} style={{ marginTop: 30 }}>
|
||||||
|
<Col span={12} style={{ marginBottom: 18 }}>
|
||||||
|
<div className={styles['view-label']}>项目名称</div>
|
||||||
|
<div className={styles['view-value']}>{values.projectName || '-'}</div>
|
||||||
|
</Col>
|
||||||
|
<Col span={12} style={{ marginBottom: 18 }}>
|
||||||
|
<div className={styles['view-label']}>地理信息</div>
|
||||||
|
<div className={styles['view-value']}>{values.location || '-'}</div>
|
||||||
|
</Col>
|
||||||
|
<Col span={12} style={{ marginBottom: 18 }}>
|
||||||
|
<div className={styles['view-label']}>占地面积</div>
|
||||||
|
<div className={styles['view-value']}>
|
||||||
|
{values.area ? `${values.area}` : '-'}
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
<Col span={12} style={{ marginBottom: 18 }}>
|
||||||
|
<div className={styles['view-label']}>职业人数</div>
|
||||||
|
<div className={styles['view-value']}>{values.staffCount || '-'}</div>
|
||||||
|
</Col>
|
||||||
|
<Col span={12}>
|
||||||
|
<div className={styles['view-label']}>组织机构</div>
|
||||||
|
<div className={styles['view-value']}>{values.organization || '-'}</div>
|
||||||
|
</Col>
|
||||||
|
<Col span={12}>
|
||||||
|
<div className={styles['view-label']}>安全等级</div>
|
||||||
|
<div className={styles['view-value']}>{values.safetyLevel || '-'}</div>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default BasicInfoViewForm;
|
||||||
@ -0,0 +1,113 @@
|
|||||||
|
import { useEffect } from 'react'
|
||||||
|
import { Button, Col, Form, Input, Row } from 'antd'
|
||||||
|
import { UpOutlined, SearchOutlined, RedoOutlined } from '@ant-design/icons'
|
||||||
|
import SelectDeptTree from '@/components/SelectDeptTree'
|
||||||
|
import SelectOrganTree from '@/components/SelectOrganTree'
|
||||||
|
import style from '@/global.less'
|
||||||
|
|
||||||
|
const { Item: FormItem } = Form
|
||||||
|
let getDeptTreeBySelectTree
|
||||||
|
let getOrganTreeBySelectTree
|
||||||
|
|
||||||
|
const StaffSheetRenderAdvancedForm = (props) => {
|
||||||
|
const [form] = Form.useForm()
|
||||||
|
const { dispatch, handleSearch, handleFormReset, toggleForm, selectDeptTree, selectOrganTree, params } = props
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
form.setFieldsValue({
|
||||||
|
user_name: params?.user_name,
|
||||||
|
user_name_cn: params?.user_name_cn,
|
||||||
|
deptname: params?.deptname,
|
||||||
|
orgname: params?.orgname,
|
||||||
|
})
|
||||||
|
}, [params])
|
||||||
|
|
||||||
|
const onFinish = values => {
|
||||||
|
// if (getDeptTreeBySelectTree) {
|
||||||
|
// values.dept_code = getDeptTreeBySelectTree.dept_code
|
||||||
|
// values.deptname = getDeptTreeBySelectTree.title
|
||||||
|
// }
|
||||||
|
|
||||||
|
if (getOrganTreeBySelectTree) {
|
||||||
|
values.org_code = getOrganTreeBySelectTree.org_code
|
||||||
|
values.orgname = getOrganTreeBySelectTree.title
|
||||||
|
}
|
||||||
|
|
||||||
|
handleSearch(values)
|
||||||
|
}
|
||||||
|
|
||||||
|
const myHandleFormReset = () => {
|
||||||
|
form.resetFields()
|
||||||
|
handleFormReset()
|
||||||
|
}
|
||||||
|
|
||||||
|
const selectedDeptTreeValue = (deptRecord) => {
|
||||||
|
getDeptTreeBySelectTree = deptRecord
|
||||||
|
}
|
||||||
|
|
||||||
|
const selectedOrganTreeValue = (orgRecord) => {
|
||||||
|
getOrganTreeBySelectTree = orgRecord
|
||||||
|
}
|
||||||
|
|
||||||
|
const parentDeptTreeMethod = {
|
||||||
|
dispatch: dispatch,
|
||||||
|
selectDeptTree: selectDeptTree,
|
||||||
|
selectedDeptTreeValue: selectedDeptTreeValue
|
||||||
|
}
|
||||||
|
|
||||||
|
const parentOrganTreeMethod = {
|
||||||
|
dispatch: dispatch,
|
||||||
|
selectOrganTree: selectOrganTree,
|
||||||
|
selectedOrganTreeValue: selectedOrganTreeValue
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Form form={form} onFinish={onFinish} layout='inline'>
|
||||||
|
<Row gutter={{ md: 8, lg: 24, xl: 48 }} className={style.searchInput}>
|
||||||
|
<Col md={8} sm={24}>
|
||||||
|
<FormItem label='用户名' name='user_name'>
|
||||||
|
<Input placeholder='请输入' />
|
||||||
|
</FormItem>
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
<Col md={8} sm={24}>
|
||||||
|
<FormItem label='用户名称' name='user_name_cn'>
|
||||||
|
<Input placeholder='请输入' />
|
||||||
|
</FormItem>
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
<Col md={8} sm={24}>
|
||||||
|
<FormItem label='机构代码' name='orgname'>
|
||||||
|
<SelectOrganTree {...parentOrganTreeMethod} />
|
||||||
|
</FormItem>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
|
||||||
|
<Row gutter={{md: 8, lg: 24, xl: 48}} className={style.searchBox}>
|
||||||
|
{/*<Col md={8} sm={24}>*/}
|
||||||
|
{/* <FormItem label='部门名称' name='deptname'>*/}
|
||||||
|
{/* <SelectDeptTree placeholder={'请选择部门'} {...parentDeptTreeMethod} />*/}
|
||||||
|
{/* </FormItem>*/}
|
||||||
|
{/*</Col>*/}
|
||||||
|
|
||||||
|
<Col md={24} sm={24}>
|
||||||
|
<div className={style.searchBtn}>
|
||||||
|
<Button type='primary' htmlType='submit'>
|
||||||
|
查询
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button onClick={myHandleFormReset}>
|
||||||
|
重置
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<a onClick={() => toggleForm(form)}>
|
||||||
|
收起 <UpOutlined />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Form>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default StaffSheetRenderAdvancedForm
|
||||||
@ -0,0 +1,81 @@
|
|||||||
|
import { useEffect } from 'react'
|
||||||
|
import {Button, Col, Form, Input, Row, DatePicker, Select} from 'antd'
|
||||||
|
import {DownOutlined, RedoOutlined, SearchOutlined} from '@ant-design/icons'
|
||||||
|
import style from '@/global.less'
|
||||||
|
import dayjs from 'dayjs'
|
||||||
|
const { Item: FormItem } = Form
|
||||||
|
|
||||||
|
const StaffSheetRenderSimpleForm = (props) => {
|
||||||
|
const [form] = Form.useForm()
|
||||||
|
const { handleSearch, handleFormReset, toggleForm, params } = props
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
form.setFieldsValue({
|
||||||
|
user_name: params?.user_name,
|
||||||
|
user_name_cn: params?.user_name_cn,
|
||||||
|
})
|
||||||
|
}, [params])
|
||||||
|
|
||||||
|
const onFinish = values => {
|
||||||
|
handleSearch(values)
|
||||||
|
}
|
||||||
|
|
||||||
|
const myHandleFormReset = () => {
|
||||||
|
form.resetFields()
|
||||||
|
handleFormReset()
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Form form={form} onFinish={onFinish} layout='inline'>
|
||||||
|
<Row gutter={{ md: 8, lg: 24, xl: 48 }} className={style.searchInput}>
|
||||||
|
<Col md={4} sm={24}>
|
||||||
|
<FormItem label='我的查询条件' name='wdcxtj'>
|
||||||
|
<Select
|
||||||
|
placeholder='请选择'
|
||||||
|
options={[]}
|
||||||
|
/>
|
||||||
|
</FormItem>
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
<Col md={4} sm={24}>
|
||||||
|
<FormItem label='日期' name='rq' rules={[{ required: true, message: '请选择日期!' }]}>
|
||||||
|
<DatePicker defaultValue={dayjs('2025-04-10', 'YYYY-MM-DD')} format='YYYY-MM-DD' />
|
||||||
|
</FormItem>
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
<Col md={4} sm={24}>
|
||||||
|
<FormItem label='工作地点' name='gzdd'>
|
||||||
|
<Input placeholder='请输入' />
|
||||||
|
</FormItem>
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
|
||||||
|
<Col md={4} sm={24}>
|
||||||
|
<FormItem label='工号' name='gh'>
|
||||||
|
<Input placeholder='请输入' defaultValue="123456"/>
|
||||||
|
</FormItem>
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
<Col md={4} sm={24}>
|
||||||
|
<FormItem label='名称' name='gh'>
|
||||||
|
<Input placeholder='请输入'/>
|
||||||
|
</FormItem>
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
<Col md={4} sm={24}>
|
||||||
|
<div className={style.searchBtn}>
|
||||||
|
<Button type='primary' htmlType='submit'>
|
||||||
|
查询
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button onClick={myHandleFormReset}>
|
||||||
|
重置
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Form>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default StaffSheetRenderSimpleForm
|
||||||
Loading…
Reference in New Issue