|
|
<!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>
|
|
|
.tree-item {
|
|
|
transition: all 0.3s ease;
|
|
|
}
|
|
|
.tree-item:hover {
|
|
|
background-color: rgba(45, 92, 246, 0.1);
|
|
|
}
|
|
|
.scroll-container {
|
|
|
scrollbar-width: thin;
|
|
|
scrollbar-color: #2D5CF6 #F5F6FA;
|
|
|
}
|
|
|
.scroll-container::-webkit-scrollbar {
|
|
|
width: 6px;
|
|
|
height: 6px;
|
|
|
}
|
|
|
.scroll-container::-webkit-scrollbar-track {
|
|
|
background: #F5F6FA;
|
|
|
}
|
|
|
.scroll-container::-webkit-scrollbar-thumb {
|
|
|
background-color: #2D5CF6;
|
|
|
border-radius: 20px;
|
|
|
}
|
|
|
.marquee {
|
|
|
animation: marquee 20s linear infinite;
|
|
|
}
|
|
|
@keyframes marquee {
|
|
|
0% { transform: translateX(100%); }
|
|
|
100% { transform: translateX(-100%); }
|
|
|
}
|
|
|
.dropdown:hover .dropdown-menu {
|
|
|
display: block;
|
|
|
}
|
|
|
i.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 text-gray-800">
|
|
|
<!-- 顶部导航栏 -->
|
|
|
<!-- <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-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">多维统计</a>
|
|
|
<a href="#" class="hover:bg-white/20 px-2 py-1 rounded-button">人员管理</a>
|
|
|
<a href="#" class="hover:bg-white/20 px-2 py-1 rounded-button">组织管理</a>
|
|
|
<a href="#" class="hover:bg-white/20 px-2 py-1 rounded-button">考勤管理</a>
|
|
|
<a href="#" class="hover:bg-white/20 px-2 py-1 rounded-button">绩效管理</a>
|
|
|
<a href="#" class="hover:bg-white/20 px-2 py-1 rounded-button">薪酬管理</a>
|
|
|
<a href="#" class="hover:bg-white/20 px-2 py-1 rounded-button">知识库</a>
|
|
|
<a href="#" class="hover:bg-white/20 px-2 py-1 rounded-button">后台管理</a>
|
|
|
</nav>
|
|
|
</div>
|
|
|
<div class="flex items-center space-x-4">
|
|
|
<div class="relative">
|
|
|
<input type="text" placeholder="搜索..." class="bg-white/20 border-none text-white placeholder-white/70 rounded-button pl-8 pr-4 py-1 text-sm w-40 focus:w-60 transition-all duration-300 focus:outline-none">
|
|
|
<i class="fas fa-search fa-icon absolute left-2 top-1/2 transform -translate-y-1/2 text-white/70"></i>
|
|
|
</div>
|
|
|
<div class="relative group">
|
|
|
<div class="flex items-center space-x-2 cursor-pointer">
|
|
|
<div class="w-8 h-8 rounded-full bg-white/20 flex items-center justify-center">
|
|
|
<i class="fas fa-user fa-icon text-white"></i>
|
|
|
</div>
|
|
|
<span class="text-sm">张明远</span>
|
|
|
</div>
|
|
|
<div class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg z-10 hidden group-hover:block">
|
|
|
<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>
|
|
|
<button class="bg-white text-primary rounded-button px-3 py-1 text-sm flex items-center space-x-1 hover:bg-white/90">
|
|
|
<i class="fas fa-robot fa-icon"></i>
|
|
|
<span>AI助手</span>
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</header> -->
|
|
|
|
|
|
<!-- 公告栏 -->
|
|
|
<div class="bg-white border-b border-gray-200">
|
|
|
<div class="container mx-auto px-6 py-2 overflow-hidden">
|
|
|
<div class="flex items-center">
|
|
|
<span class="bg-red-500 text-white text-xs px-2 py-1 rounded-button mr-3 whitespace-nowrap">最新公告</span>
|
|
|
<div class="overflow-hidden">
|
|
|
<div class="marquee whitespace-nowrap">
|
|
|
<span class="text-sm mr-8">系统将于2023年12月15日00:00-06:00进行升级维护</span>
|
|
|
<span class="text-sm mr-8">2023年度绩效考核工作已启动，请各部门按时完成</span>
|
|
|
<span class="text-sm mr-8">新员工入职培训将于本周五下午2点在3楼会议室举行</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 主内容区 -->
|
|
|
<main class="container mx-auto px-6 py-8">
|
|
|
<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">
|
|
|
<button class="bg-primary text-white rounded-button px-4 py-2 text-sm flex items-center space-x-1 hover:bg-primary/90">
|
|
|
<i class="fas fa-plus fa-icon"></i>
|
|
|
<span>新增元数据域</span>
|
|
|
</button>
|
|
|
<button class="bg-white border border-gray-300 rounded-button px-4 py-2 text-sm flex items-center space-x-1 hover:bg-gray-50">
|
|
|
<i class="fas fa-download fa-icon"></i>
|
|
|
<span>导出配置</span>
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow-md overflow-hidden">
|
|
|
<div class="flex border-b border-gray-200">
|
|
|
<div class="w-1/4 border-r border-gray-200">
|
|
|
<div class="p-4 border-b border-gray-200">
|
|
|
<div class="relative">
|
|
|
<input type="text" placeholder="搜索元数据域..." class="w-full border border-gray-300 rounded-button pl-8 pr-4 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
|
|
|
<i class="fas fa-search fa-icon absolute left-2 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="h-[600px] overflow-y-auto scroll-container">
|
|
|
<div class="p-2">
|
|
|
<div class="tree-item cursor-pointer p-2 rounded-button flex items-center justify-between">
|
|
|
<div class="flex items-center space-x-2">
|
|
|
<i class="fas fa-folder fa-icon text-yellow-500"></i>
|
|
|
<span>基础信息</span>
|
|
|
</div>
|
|
|
<i class="fas fa-chevron-down fa-icon text-gray-500"></i>
|
|
|
</div>
|
|
|
<div class="ml-6 mt-1">
|
|
|
<div class="tree-item cursor-pointer p-2 rounded-button flex items-center space-x-2">
|
|
|
<i class="fas fa-id-card fa-icon text-blue-500"></i>
|
|
|
<span>员工编号</span>
|
|
|
</div>
|
|
|
<div class="tree-item cursor-pointer p-2 rounded-button flex items-center space-x-2">
|
|
|
<i class="fas fa-user fa-icon text-blue-500"></i>
|
|
|
<span>姓名</span>
|
|
|
</div>
|
|
|
<div class="tree-item cursor-pointer p-2 rounded-button flex items-center space-x-2">
|
|
|
<i class="fas fa-venus-mars fa-icon text-blue-500"></i>
|
|
|
<span>性别</span>
|
|
|
</div>
|
|
|
<div class="tree-item cursor-pointer p-2 rounded-button flex items-center space-x-2">
|
|
|
<i class="fas fa-birthday-cake fa-icon text-blue-500"></i>
|
|
|
<span>出生日期</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="tree-item cursor-pointer p-2 rounded-button flex items-center justify-between mt-2">
|
|
|
<div class="flex items-center space-x-2">
|
|
|
<i class="fas fa-folder fa-icon text-yellow-500"></i>
|
|
|
<span>技术职务</span>
|
|
|
</div>
|
|
|
<i class="fas fa-chevron-right fa-icon text-gray-500"></i>
|
|
|
</div>
|
|
|
|
|
|
<div class="tree-item cursor-pointer p-2 rounded-button flex items-center justify-between mt-2">
|
|
|
<div class="flex items-center space-x-2">
|
|
|
<i class="fas fa-folder fa-icon text-yellow-500"></i>
|
|
|
<span>行政职务</span>
|
|
|
</div>
|
|
|
<i class="fas fa-chevron-down fa-icon text-gray-500"></i>
|
|
|
</div>
|
|
|
<div class="ml-6 mt-1">
|
|
|
<div class="tree-item cursor-pointer p-2 rounded-button flex items-center space-x-2">
|
|
|
<i class="fas fa-sitemap fa-icon text-blue-500"></i>
|
|
|
<span>行政级别</span>
|
|
|
</div>
|
|
|
<div class="tree-item cursor-pointer p-2 rounded-button flex items-center space-x-2">
|
|
|
<i class="fas fa-money-bill-wave fa-icon text-blue-500"></i>
|
|
|
<span>级别待遇</span>
|
|
|
</div>
|
|
|
<div class="tree-item cursor-pointer p-2 rounded-button flex items-center space-x-2">
|
|
|
<i class="fas fa-calendar-alt fa-icon text-blue-500"></i>
|
|
|
<span>任职时间</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="tree-item cursor-pointer p-2 rounded-button flex items-center justify-between mt-2">
|
|
|
<div class="flex items-center space-x-2">
|
|
|
<i class="fas fa-folder fa-icon text-yellow-500"></i>
|
|
|
<span>联系方式</span>
|
|
|
</div>
|
|
|
<i class="fas fa-chevron-right fa-icon text-gray-500"></i>
|
|
|
</div>
|
|
|
|
|
|
<div class="tree-item cursor-pointer p-2 rounded-button flex items-center justify-between mt-2">
|
|
|
<div class="flex items-center space-x-2">
|
|
|
<i class="fas fa-folder fa-icon text-yellow-500"></i>
|
|
|
<span>其他信息</span>
|
|
|
</div>
|
|
|
<i class="fas fa-chevron-right fa-icon text-gray-500"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="w-3/4">
|
|
|
<div class="p-4 border-b border-gray-200 flex justify-between items-center">
|
|
|
<h2 class="text-lg font-semibold">行政职务 - 属性配置</h2>
|
|
|
<button class="bg-primary text-white rounded-button px-3 py-1 text-sm flex items-center space-x-1 hover:bg-primary/90">
|
|
|
<i class="fas fa-plus fa-icon"></i>
|
|
|
<span>新增属性</span>
|
|
|
</button>
|
|
|
</div>
|
|
|
<div class="h-[600px] overflow-y-auto scroll-container">
|
|
|
<table class="min-w-full divide-y divide-gray-200">
|
|
|
<thead class="bg-gray-50">
|
|
|
<tr>
|
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">属性名称</th>
|
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">显示名称</th>
|
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">数据类型</th>
|
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">是否必填</th>
|
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">默认值</th>
|
|
|
<th scope="col" class="px-6 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>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">admin_level</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">行政级别</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
|
<span class="px-2 py-1 bg-blue-100 text-blue-800 rounded-button text-xs">列表</span>
|
|
|
</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
|
<span class="px-2 py-1 bg-green-100 text-green-800 rounded-button text-xs">是</span>
|
|
|
</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
|
<button class="text-primary hover:text-primary/80 mr-2">
|
|
|
<i class="fas fa-edit fa-icon"></i>
|
|
|
</button>
|
|
|
<button class="text-red-500 hover:text-red-800">
|
|
|
<i class="fas fa-trash-alt fa-icon"></i>
|
|
|
</button>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">level_benefit</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">级别待遇</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
|
<span class="px-2 py-1 bg-blue-100 text-blue-800 rounded-button text-xs">列表</span>
|
|
|
</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
|
<span class="px-2 py-1 bg-green-100 text-green-800 rounded-button text-xs">是</span>
|
|
|
</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
|
<button class="text-primary hover:text-primary/80 mr-2">
|
|
|
<i class="fas fa-edit fa-icon"></i>
|
|
|
</button>
|
|
|
<button class="text-red-500 hover:text-red-800">
|
|
|
<i class="fas fa-trash-alt fa-icon"></i>
|
|
|
</button>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">appointment_date</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">任职时间</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
|
<span class="px-2 py-1 bg-purple-100 text-purple-800 rounded-button text-xs">日期</span>
|
|
|
</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
|
<span class="px-2 py-1 bg-green-100 text-green-800 rounded-button text-xs">是</span>
|
|
|
</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">系统当前日期</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
|
<button class="text-primary hover:text-primary/80 mr-2">
|
|
|
<i class="fas fa-edit fa-icon"></i>
|
|
|
</button>
|
|
|
<button class="text-red-500 hover:text-red-800">
|
|
|
<i class="fas fa-trash-alt fa-icon"></i>
|
|
|
</button>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">department</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">所属部门</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
|
<span class="px-2 py-1 bg-blue-100 text-blue-800 rounded-button text-xs">列表</span>
|
|
|
</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
|
<span class="px-2 py-1 bg-green-100 text-green-800 rounded-button text-xs">是</span>
|
|
|
</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
|
<button class="text-primary hover:text-primary/80 mr-2">
|
|
|
<i class="fas fa-edit fa-icon"></i>
|
|
|
</button>
|
|
|
<button class="text-red-500 hover:text-red-800">
|
|
|
<i class="fas fa-trash-alt fa-icon"></i>
|
|
|
</button>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">job_title</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">职务名称</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
|
<span class="px-2 py-1 bg-indigo-100 text-indigo-800 rounded-button text-xs">文本</span>
|
|
|
</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
|
<span class="px-2 py-1 bg-green-100 text-green-800 rounded-button text-xs">是</span>
|
|
|
</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
|
<button class="text-primary hover:text-primary/80 mr-2">
|
|
|
<i class="fas fa-edit fa-icon"></i>
|
|
|
</button>
|
|
|
<button class="text-red-500 hover:text-red-800">
|
|
|
<i class="fas fa-trash-alt fa-icon"></i>
|
|
|
</button>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">is_leader</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">是否领导职务</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
|
<span class="px-2 py-1 bg-pink-100 text-pink-800 rounded-button text-xs">布尔</span>
|
|
|
</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
|
<span class="px-2 py-1 bg-gray-100 text-gray-800 rounded-button text-xs">否</span>
|
|
|
</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">否</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
|
<button class="text-primary hover:text-primary/80 mr-2">
|
|
|
<i class="fas fa-edit fa-icon"></i>
|
|
|
</button>
|
|
|
<button class="text-red-500 hover:text-red-800">
|
|
|
<i class="fas fa-trash-alt fa-icon"></i>
|
|
|
</button>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 列表数据配置弹窗 -->
|
|
|
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden" id="listConfigModal">
|
|
|
<div class="bg-white rounded-lg shadow-xl w-1/2 max-h-[80vh] overflow-hidden">
|
|
|
<div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
|
|
|
<h3 class="text-lg font-semibold">列表数据配置 - 行政级别</h3>
|
|
|
<button onclick="document.getElementById('listConfigModal').classList.add('hidden')" class="text-gray-400 hover:text-gray-500">
|
|
|
<i class="fas fa-times fa-icon"></i>
|
|
|
</button>
|
|
|
</div>
|
|
|
<div class="p-6 overflow-y-auto h-[60vh]">
|
|
|
<div class="mb-6">
|
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">数据来源</label>
|
|
|
<div class="flex space-x-4">
|
|
|
<div class="flex items-center">
|
|
|
<input id="staticData" name="dataSource" type="radio" class="h-4 w-4 text-primary focus:ring-primary border-gray-300" checked>
|
|
|
<label for="staticData" class="ml-2 block text-sm text-gray-700">静态数据</label>
|
|
|
</div>
|
|
|
<div class="flex items-center">
|
|
|
<input id="apiData" name="dataSource" type="radio" class="h-4 w-4 text-primary focus:ring-primary border-gray-300">
|
|
|
<label for="apiData" class="ml-2 block text-sm text-gray-700">API接口</label>
|
|
|
</div>
|
|
|
<div class="flex items-center">
|
|
|
<input id="functionData" name="dataSource" type="radio" class="h-4 w-4 text-primary focus:ring-primary border-gray-300">
|
|
|
<label for="functionData" class="ml-2 block text-sm text-gray-700">回调函数</label>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div id="staticDataConfig">
|
|
|
<div class="mb-4">
|
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">数据项</label>
|
|
|
<div class="bg-gray-50 rounded-lg p-4">
|
|
|
<div class="flex items-center justify-between mb-2">
|
|
|
<span class="text-sm font-medium">数据项列表</span>
|
|
|
<button class="text-primary text-sm flex items-center">
|
|
|
<i class="fas fa-plus fa-icon mr-1"></i>
|
|
|
<span>添加项</span>
|
|
|
</button>
|
|
|
</div>
|
|
|
<div class="space-y-2">
|
|
|
<div class="flex items-center space-x-2">
|
|
|
<input type="text" class="flex-1 border border-gray-300 rounded-button px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary" value="1级">
|
|
|
<input type="text" class="flex-1 border border-gray-300 rounded-button px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary" value="1">
|
|
|
<button class="text-red-500">
|
|
|
<i class="fas fa-trash-alt fa-icon"></i>
|
|
|
</button>
|
|
|
</div>
|
|
|
<div class="flex items-center space-x-2">
|
|
|
<input type="text" class="flex-1 border border-gray-300 rounded-button px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary" value="2级">
|
|
|
<input type="text" class="flex-1 border border-gray-300 rounded-button px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary" value="2">
|
|
|
<button class="text-red-500">
|
|
|
<i class="fas fa-trash-alt fa-icon"></i>
|
|
|
</button>
|
|
|
</div>
|
|
|
<div class="flex items-center space-x-2">
|
|
|
<input type="text" class="flex-1 border border-gray-300 rounded-button px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary" value="3级">
|
|
|
<input type="text" class="flex-1 border border-gray-300 rounded-button px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary" value="3">
|
|
|
<button class="text-red-500">
|
|
|
<i class="fas fa-trash-alt fa-icon"></i>
|
|
|
</button>
|
|
|
</div>
|
|
|
<div class="flex items-center space-x-2">
|
|
|
<input type="text" class="flex-1 border border-gray-300 rounded-button px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary" value="4级">
|
|
|
<input type="text" class="flex-1 border border-gray-300 rounded-button px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary" value="4">
|
|
|
<button class="text-red-500">
|
|
|
<i class="fas fa-trash-alt fa-icon"></i>
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div id="apiDataConfig" class="hidden">
|
|
|
<div class="mb-4">
|
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">API地址</label>
|
|
|
<input type="text" 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" placeholder="请输入API地址">
|
|
|
</div>
|
|
|
<div class="mb-4">
|
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">请求方法</label>
|
|
|
<select 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">
|
|
|
<option>GET</option>
|
|
|
<option>POST</option>
|
|
|
<option>PUT</option>
|
|
|
<option>DELETE</option>
|
|
|
</select>
|
|
|
</div>
|
|
|
<div class="mb-4">
|
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">请求参数</label>
|
|
|
<div class="bg-gray-50 rounded-lg p-4">
|
|
|
<div class="flex items-center justify-between mb-2">
|
|
|
<span class="text-sm font-medium">参数列表</span>
|
|
|
<button class="text-primary text-sm flex items-center">
|
|
|
<i class="fas fa-plus fa-icon mr-1"></i>
|
|
|
<span>添加参数</span>
|
|
|
</button>
|
|
|
</div>
|
|
|
<div class="space-y-2">
|
|
|
<div class="flex items-center space-x-2">
|
|
|
<input type="text" class="flex-1 border border-gray-300 rounded-button px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary" placeholder="参数名">
|
|
|
<input type="text" class="flex-1 border border-gray-300 rounded-button px-3 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary" placeholder="参数值">
|
|
|
<button class="text-red-500">
|
|
|
<i class="fas fa-trash-alt fa-icon"></i>
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div id="functionDataConfig" class="hidden">
|
|
|
<div class="mb-4">
|
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">函数名称</label>
|
|
|
<input type="text" 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" placeholder="请输入函数名称">
|
|
|
</div>
|
|
|
<div class="mb-4">
|
|
|
<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 font-mono h-40 focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary" placeholder="// 请在此处编写回调函数代码"></textarea>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="px-6 py-4 border-t border-gray-200 flex justify-end space-x-3">
|
|
|
<button onclick="document.getElementById('listConfigModal').classList.add('hidden')" class="bg-white border border-gray-300 rounded-button px-4 py-2 text-sm hover:bg-gray-50">取消</button>
|
|
|
<button class="bg-primary text-white rounded-button px-4 py-2 text-sm hover:bg-primary/90">保存配置</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</main>
|
|
|
|
|
|
<!-- 底部区域 -->
|
|
|
<footer class="w-full bg-gray-800 text-white mt-auto">
|
|
|
<div class="container mx-auto px-6 py-8">
|
|
|
<div class="grid grid-cols-4 gap-8">
|
|
|
<div>
|
|
|
<h3 class="text-sm font-semibold uppercase tracking-wider mb-4">关于我们</h3>
|
|
|
<ul class="space-y-2 text-sm">
|
|
|
<li><a href="#" class="hover:text-gray-300">公司简介</a></li>
|
|
|
<li><a href="#" class="hover:text-gray-300">发展历程</a></li>
|
|
|
<li><a href="#" class="hover:text-gray-300">企业文化</a></li>
|
|
|
<li><a href="#" class="hover:text-gray-300">荣誉资质</a></li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
<div>
|
|
|
<h3 class="text-sm font-semibold uppercase tracking-wider mb-4">产品服务</h3>
|
|
|
<ul class="space-y-2 text-sm">
|
|
|
<li><a href="#" class="hover:text-gray-300">人力资源系统</a></li>
|
|
|
<li><a href="#" class="hover:text-gray-300">薪酬管理系统</a></li>
|
|
|
<li><a href="#" class="hover:text-gray-300">绩效考核系统</a></li>
|
|
|
<li><a href="#" class="hover:text-gray-300">培训发展平台</a></li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
<div>
|
|
|
<h3 class="text-sm font-semibold uppercase tracking-wider mb-4">帮助中心</h3>
|
|
|
<ul class="space-y-2 text-sm">
|
|
|
<li><a href="#" class="hover:text-gray-300">使用文档</a></li>
|
|
|
<li><a href="#" class="hover:text-gray-300">视频教程</a></li>
|
|
|
<li><a href="#" class="hover:text-gray-300">常见问题</a></li>
|
|
|
<li><a href="#" class="hover:text-gray-300">在线客服</a></li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
<div>
|
|
|
<h3 class="text-sm font-semibold uppercase tracking-wider mb-4">联系我们</h3>
|
|
|
<ul class="space-y-2 text-sm">
|
|
|
<li class="flex items-start">
|
|
|
<i class="fas fa-map-marker-alt fa-icon mt-1 mr-2"></i>
|
|
|
<span>北京市海淀区中关村软件园2号楼A座3层</span>
|
|
|
</li>
|
|
|
<li class="flex items-center">
|
|
|
<i class="fas fa-phone-alt 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@hrsystem.com</span>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="mt-8 pt-8 border-t border-gray-700 flex justify-between items-center">
|
|
|
<div class="text-sm">
|
|
|
© 2023 人力资源管理系统. 保留所有权利.
|
|
|
</div>
|
|
|
<div class="flex space-x-6">
|
|
|
<a href="#" class="hover:text-gray-300">
|
|
|
<i class="fab fa-weixin fa-icon"></i>
|
|
|
</a>
|
|
|
<a href="#" class="hover:text-gray-300">
|
|
|
<i class="fab fa-weibo fa-icon"></i>
|
|
|
</a>
|
|
|
<a href="#" class="hover:text-gray-300">
|
|
|
<i class="fab fa-linkedin fa-icon"></i>
|
|
|
</a>
|
|
|
<a href="#" class="hover:text-gray-300">
|
|
|
<i class="fab fa-github fa-icon"></i>
|
|
|
</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</footer>
|
|
|
</body>
|
|
|
</html> |
