|
|
@@ -0,0 +1,217 @@
|
|
|
+<template>
|
|
|
+ <div class="min-h-screen bg-gray-50">
|
|
|
+ <!-- Sidebar -->
|
|
|
+ <aside class="w-64 min-h-screen bg-[#08002E] text-white border-r">
|
|
|
+ <nav class="p-4">
|
|
|
+ <div class="mb-4">菜单类别标题</div>
|
|
|
+ <ul class="space-y-2">
|
|
|
+ <li>
|
|
|
+ <a href="#/dashboard" class="flex items-center px-4 py-2 hover:bg-gray-700 rounded-lg">
|
|
|
+ <Home class="w-5 h-5 mr-3" />
|
|
|
+ 首页
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#/organization" class="flex items-center px-4 py-2 hover:bg-gray-700 rounded-lg">
|
|
|
+ <Users class="w-5 h-5 mr-3" />
|
|
|
+ 组织架构
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#/userList" class="flex items-center px-4 py-2 hover:bg-gray-700 rounded-lg">
|
|
|
+ <List class="w-5 h-5 mr-3" />
|
|
|
+ 用户列表信息
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#/systemModule1" class="flex items-center px-4 py-2 hover:bg-gray-700 rounded-lg">
|
|
|
+ <Box class="w-5 h-5 mr-3" />
|
|
|
+ 系统模块1
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#/systemModule2" class="flex items-center px-4 py-2 hover:bg-gray-700 rounded-lg">
|
|
|
+ <Box class="w-5 h-5 mr-3" />
|
|
|
+ 系统模块2
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </nav>
|
|
|
+ </aside>
|
|
|
+
|
|
|
+ <!-- Main Content -->
|
|
|
+ <main class="flex-1 p-6">
|
|
|
+ <div class="grid grid-cols-4 gap-6 mb-6">
|
|
|
+ <div class="bg-white rounded-lg p-6 flex items-center space-x-4 shadow-sm">
|
|
|
+ <div class="w-12 h-12 rounded-lg flex items-center justify-center bg-blue-50">
|
|
|
+ <FileText class="text-blue-500" size={24} />
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="text-3xl font-semibold">
|
|
|
+ 21<span class="text-gray-400 text-lg">/35</span>
|
|
|
+ </div>
|
|
|
+ <div class="text-gray-500">合同审核</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="bg-white rounded-lg p-6 flex items-center space-x-4 shadow-sm">
|
|
|
+ <div class="w-12 h-12 rounded-lg flex items-center justify-center bg-yellow-50">
|
|
|
+ <FileText class="text-yellow-500" size={24} />
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="text-3xl font-semibold">
|
|
|
+ 28<span class="text-gray-400 text-lg">/40</span>
|
|
|
+ </div>
|
|
|
+ <div class="text-gray-500">合同签署</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="bg-white rounded-lg p-6 flex items-center space-x-4 shadow-sm">
|
|
|
+ <div class="w-12 h-12 rounded-lg flex items-center justify-center bg-green-50">
|
|
|
+ <FileText class="text-green-500" size={24} />
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="text-3xl font-semibold">
|
|
|
+ 40<span class="text-gray-400 text-lg">/65</span>
|
|
|
+ </div>
|
|
|
+ <div class="text-gray-500">合同登记</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="bg-white rounded-lg p-6 flex items-center space-x-4 shadow-sm">
|
|
|
+ <div class="w-12 h-12 rounded-lg flex items-center justify-center bg-red-50">
|
|
|
+ <FileText class="text-red-500" size={24} />
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="text-3xl font-semibold">
|
|
|
+ 12<span class="text-gray-400 text-lg">/15</span>
|
|
|
+ </div>
|
|
|
+ <div class="text-gray-500">合同履约</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="grid grid-cols-2 gap-6">
|
|
|
+ <div class="bg-white rounded-lg p-6 shadow-sm">
|
|
|
+ <div class="flex items-center justify-between mb-4">
|
|
|
+ <h2 class="text-lg font-medium">特办事项</h2>
|
|
|
+ <div class="flex space-x-4">
|
|
|
+ <button class="px-3 py-1 text-blue-600 bg-blue-50 rounded-md">全部</button>
|
|
|
+ <button class="px-3 py-1 text-blue-600">今天</button>
|
|
|
+ <button class="px-3 py-1 text-gray-500">本周</button>
|
|
|
+ <button class="px-3 py-1 text-gray-500">本月</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="space-y-4">
|
|
|
+ <div v-for="(task, index) in tasks" :key="index" class="flex items-start">
|
|
|
+ <input type="checkbox" :checked="task.completed" class="mt-1 mr-3" />
|
|
|
+ <div>
|
|
|
+ <div class="text-gray-900">{{ task.title }}</div>
|
|
|
+ <div class="text-gray-500 text-sm">{{ task.project }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="bg-white rounded-lg p-6 shadow-sm">
|
|
|
+ <div class="flex items-center justify-between mb-4">
|
|
|
+ <h2 class="text-lg font-medium">项目进程</h2>
|
|
|
+ </div>
|
|
|
+ <table class="w-full">
|
|
|
+ <thead>
|
|
|
+ <tr class="text-gray-500">
|
|
|
+ <th class="pb-4 text-left font-normal">项目名称</th>
|
|
|
+ <th class="pb-4 text-left font-normal">负责人</th>
|
|
|
+ <th class="pb-4 text-left font-normal">截止日期</th>
|
|
|
+ <th class="pb-4 text-left font-normal">当前状态</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody class="text-sm">
|
|
|
+ <tr v-for="(project, index) in projects" :key="index" class="border-t">
|
|
|
+ <td class="py-4">{{ project.name }}</td>
|
|
|
+ <td class="py-4">{{ project.owner }}</td>
|
|
|
+ <td class="py-4">{{ project.deadline }}</td>
|
|
|
+ <td class="py-4">
|
|
|
+ <span :class="[
|
|
|
+ 'px-2 py-1 rounded text-sm',
|
|
|
+ project.statusColor
|
|
|
+ ]">
|
|
|
+ {{ project.status }}
|
|
|
+ </span>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="bg-white rounded-lg p-6 shadow-sm">
|
|
|
+ <div class="flex items-center justify-between mb-4">
|
|
|
+ <h2 class="text-lg font-medium">快捷功能</h2>
|
|
|
+ <MoreHorizontal class="text-gray-400" />
|
|
|
+ </div>
|
|
|
+ <div class="space-y-3">
|
|
|
+ <div v-for="(func, index) in quickFunctions" :key="index"
|
|
|
+ class="text-gray-700 hover:text-blue-600 cursor-pointer">
|
|
|
+ {{ func }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="bg-white rounded-lg p-6 shadow-sm">
|
|
|
+ <div class="flex items-center justify-between mb-4">
|
|
|
+ <h2 class="text-lg font-medium">合同类型统计</h2>
|
|
|
+ <div class="flex items-center space-x-4">
|
|
|
+ <div class="flex items-center">
|
|
|
+ <div class="w-3 h-3 bg-blue-500 rounded-sm mr-2"></div>
|
|
|
+ <span class="text-sm text-gray-500">A合同</span>
|
|
|
+ </div>
|
|
|
+ <div class="flex items-center">
|
|
|
+ <div class="w-3 h-3 bg-green-500 rounded-sm mr-2"></div>
|
|
|
+ <span class="text-sm text-gray-500">B合同</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="h-64">
|
|
|
+ <!-- Chart would go here - using a placeholder -->
|
|
|
+ <div class="w-full h-full bg-gray-50 rounded flex items-center justify-center">
|
|
|
+ Bar Chart Placeholder
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </main>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import {
|
|
|
+ Home, Users, List, Box, FileText, MoreHorizontal
|
|
|
+} from 'lucide-vue-next'
|
|
|
+
|
|
|
+const metrics = [
|
|
|
+ { label: '合同审核', value: 21, total: 35 },
|
|
|
+ { label: '合同签署', value: 28, total: 40 },
|
|
|
+ { label: '合同登记', value: 40, total: 65 },
|
|
|
+ { label: '合同履约', value: 12, total: 15 }
|
|
|
+]
|
|
|
+
|
|
|
+const tasks = [
|
|
|
+ { title: '联系xxxx客户，商讨具体合同事宜', project: 'xxxx公司公积金管理', completed: true },
|
|
|
+ { title: '完成合同模版创建并上传系统', project: 'xxxxx公司人员xxxx合同管理', completed: true },
|
|
|
+ { title: '审核xxxxxxx合同', project: 'xxxx公司人员xxx合同签订', completed: false },
|
|
|
+ { title: '签署xxxx合同，邮件发送xxxxx客户', project: 'xxxxxxxxx公司人员资源管理', completed: true }
|
|
|
+]
|
|
|
+
|
|
|
+const projects = [
|
|
|
+ { name: 'xxxx公司公积金管理', owner: '任小东', deadline: '2023/07/25', status: '已延期', statusColor: 'bg-red-50 text-red-600' },
|
|
|
+ { name: 'xxxxx公司人员xxxx合同管理', owner: '胡晓东', deadline: '2024/01/09', status: '进行中', statusColor: 'bg-blue-50 text-blue-600' },
|
|
|
+ { name: 'xxxx公司人员xxx合同签订', owner: '李兵', deadline: '2025/01/08', status: '进行中', statusColor: 'bg-blue-50 text-blue-600' },
|
|
|
+ { name: 'xxxxxxxxx公司人员资源管理', owner: '王天一', deadline: '2023/09/03', status: '已完成', statusColor: 'bg-green-50 text-green-600' }
|
|
|
+]
|
|
|
+
|
|
|
+const quickFunctions = [
|
|
|
+ '人力资源主合同（标准版）',
|
|
|
+ '人事代理服务协议（标准版）',
|
|
|
+ '人事代理服务协议',
|
|
|
+ '人事代理服务协议',
|
|
|
+ '人事代理服务协议（企业版）',
|
|
|
+ '人事代理服务协议（定制版）'
|
|
|
+]
|
|
|
+</script>
|
genlitex