|
|
@@ -0,0 +1,251 @@
|
|
|
+<template>
|
|
|
+ <div class="min-h-screen bg-gray-50">
|
|
|
+ <!-- Top Navigation -->
|
|
|
+ <header class="bg-white border-b">
|
|
|
+ <div class="flex items-center justify-between px-4 py-2">
|
|
|
+ <div class="flex items-center space-x-2">
|
|
|
+ <span class="text-xl font-medium">门户系统</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="flex-1 max-w-xl mx-4">
|
|
|
+ <div class="relative">
|
|
|
+ <Search class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size="20" />
|
|
|
+ <input
|
|
|
+ type="text"
|
|
|
+ placeholder="输入内容查询"
|
|
|
+ class="w-full pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="flex items-center space-x-4">
|
|
|
+ <MessageCircle class="w-6 h-6 text-blue-500" />
|
|
|
+ <Bell class="w-6 h-6 text-blue-500" />
|
|
|
+ <Settings class="w-6 h-6 text-gray-400" />
|
|
|
+ <div class="w-8 h-8 rounded-full bg-gray-200"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </header>
|
|
|
+
|
|
|
+ <div class="flex">
|
|
|
+ <!-- Sidebar -->
|
|
|
+ <aside class="w-64 min-h-screen bg-[#08002E] text-white border-r">
|
|
|
+ <nav class="p-4">
|
|
|
+ <ul class="space-y-2">
|
|
|
+ <li>
|
|
|
+ <a href="#/portal" class="flex items-center px-4 py-2 text-white bg-blue-500 rounded-lg">
|
|
|
+ <Home class="w-5 h-5 mr-3" />
|
|
|
+ 首页
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#/organization" class="flex items-center px-4 py-2 text-gray-400 hover:bg-blue-50 rounded-lg">
|
|
|
+ <Users class="w-5 h-5 mr-3" />
|
|
|
+ 组织架构
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#/userlist" class="flex items-center px-4 py-2 text-gray-400 hover:bg-blue-50 rounded-lg">
|
|
|
+ <List class="w-5 h-5 mr-3" />
|
|
|
+ 用户列表信息
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#" class="flex items-center px-4 py-2 text-gray-400 hover:bg-blue-50 rounded-lg">
|
|
|
+ <LayoutGrid class="w-5 h-5 mr-3" />
|
|
|
+ 系统模块1
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <a href="#" class="flex items-center px-4 py-2 text-gray-400 hover:bg-blue-50 rounded-lg">
|
|
|
+ <LayoutGrid class="w-5 h-5 mr-3" />
|
|
|
+ 系统模块2
|
|
|
+ </a>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </nav>
|
|
|
+ </aside>
|
|
|
+
|
|
|
+ <!-- Main Content -->
|
|
|
+ <main class="flex-1 p-6">
|
|
|
+ <!-- Top Section -->
|
|
|
+ <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">
|
|
|
+ 合同审核
|
|
|
+ </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">
|
|
|
+ <FileSignature class="text-yellow-500" size="24" />
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="text-3xl font-semibold">
|
|
|
+ 合同签署
|
|
|
+ </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">
|
|
|
+ <FilePlus class="text-green-500" size="24" />
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="text-3xl font-semibold">
|
|
|
+ 合同登记
|
|
|
+ </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">
|
|
|
+ <CheckSquare class="text-red-500" size="24" />
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="text-3xl font-semibold">
|
|
|
+ 合同履约
|
|
|
+ </div>
|
|
|
+ <div class="text-gray-500">待履约合同</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Bottom Section -->
|
|
|
+ <div class="grid grid-cols-2 gap-6">
|
|
|
+ <!-- Special Tasks -->
|
|
|
+ <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>
|
|
|
+
|
|
|
+ <!-- Project Progress -->
|
|
|
+ <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>
|
|
|
+
|
|
|
+ <!-- Quick Functions -->
|
|
|
+ <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>
|
|
|
+
|
|
|
+ <!-- Contract Statistics -->
|
|
|
+ <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>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import {
|
|
|
+ Search, MessageCircle, Bell, Settings,
|
|
|
+ Home, Users, List, LayoutGrid,
|
|
|
+ FileText, FileSignature, FilePlus, CheckSquare,
|
|
|
+ MoreHorizontal
|
|
|
+} from 'lucide-vue-next'
|
|
|
+
|
|
|
+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>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+/* Add any additional custom styles here if needed */
|
|
|
+</style>
|
genlitex