admin-2025-03-10 07:09:44

src/router/index.js

@@ -1,6 +1,10 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
 import ChatView from '../views/ChatView.vue'
+import LoginView from '../views/login.vue'
+import DashboardView from '../views/dashboard.vue'
+import OrganizationView from '../views/organization.vue'
+import UserListView from '../views/userList.vue'
 
 const routes = [
   {
@@ -12,6 +16,26 @@ const routes = [
     path: '/chat',
     name: 'chat',
     component: ChatView
+  },
+  {
+    path: '/login',
+    name: 'login',
+    component: LoginView
+  },
+  {
+    path: '/dashboard',
+    name: 'dashboard',
+    component: DashboardView
+  },
+  {
+    path: '/organization',
+    name: 'organization',
+    component: OrganizationView
+  },
+  {
+    path: '/userList',
+    name: 'userList',
+    component: UserListView
   }
 ]
 

src/views/dashboard.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="flex h-screen">
+    <aside class="bg-[#08002E] text-white w-64">
+      <div class="p-4">
+        <h2 class="text-xl font-bold mb-6">Navigation</h2>
+        <ul>
+          <li class="mb-2">
+            <a href="#/" class="block px-4 py-2 rounded hover:bg-blue-500">首页</a>
+          </li>
+          <li class="mb-2">
+            <a href="/organization" class="block px-4 py-2 rounded hover:bg-blue-500">组织架构</a>
+          </li>
+          <li class="mb-2">
+            <a href="/userList" class="block px-4 py-2 rounded hover:bg-blue-500">用户列表信息</a>
+          </li>
+          <li class="mb-2">
+            <a href="#/module1" class="block px-4 py-2 rounded hover:bg-blue-500">系统模块1</a>
+          </li>
+          <li class="mb-2">
+            <a href="#/module2" class="block px-4 py-2 rounded hover:bg-blue-500">系统模块2</a>
+          </li>
+        </ul>
+      </div>
+    </aside>
+    <main class="p-4 flex-1">
+      <div class="grid grid-cols-4 gap-4 mb-8">
+        <div class="bg-white p-4 rounded-lg shadow-md">
+          <h3 class="text-lg font-bold mb-2">合同审核</h3>
+          <p>Click to view details.</p>
+        </div>
+        <div class="bg-white p-4 rounded-lg shadow-md">
+          <h3 class="text-lg font-bold mb-2">合同签署</h3>
+          <p>Click to view details.</p>
+        </div>
+        <div class="bg-white p-4 rounded-lg shadow-md">
+          <h3 class="text-lg font-bold mb-2">合同登记</h3>
+          <p>Click to view details.</p>
+        </div>
+        <div class="bg-white p-4 rounded-lg shadow-md">
+          <h3 class="text-lg font-bold mb-2">合同履约</h3>
+          <p>Click to view details.</p>
+        </div>
+      </div>
+      <div class="grid grid-cols-4 gap-4">
+        <div class="bg-white p-4 rounded-lg shadow-md">
+          <h3 class="text-lg font-bold mb-2">特办事项</h3>
+          <p>Click to view details.</p>
+        </div>
+        <div class="bg-white p-4 rounded-lg shadow-md">
+          <h3 class="text-lg font-bold mb-2">项目进程</h3>
+          <p>Click to view details.</p>
+        </div>
+        <div class="bg-white p-4 rounded-lg shadow-md">
+          <h3 class="text-lg font-bold mb-2">快捷功能</h3>
+          <p>Click to view details.</p>
+        </div>
+        <div class="bg-white p-4 rounded-lg shadow-md">
+          <h3 class="text-lg font-bold mb-2">合同类型统计</h3>
+          <p>Click to view details.</p>
+        </div>
+      </div>
+    </main>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DashboardView'
+};
+</script>
+
+<style scoped>
+/* Additional styles can be added here */
+</style>

src/views/login.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="bg-gradient-to-r from-blue-500 to-lightblue h-screen flex items-center justify-center">
+    <div class="bg-white p-8 rounded-lg shadow-md w-full max-w-md">
+      <div class="flex justify-between items-center mb-6">
+        <h2 class="text-2xl font-bold">Company Logo</h2>
+        <select class="border p-2 rounded">
+          <option value="en">English</option>
+          <option value="zh">中文</option>
+          <!-- Add more languages as needed -->
+        </select>
+      </div>
+      <form @submit.prevent="handleLogin">
+        <div class="mb-4">
+          <label for="tenant" class="block text-sm font-medium text-gray-700">Tenant Name</label>
+          <input type="text" id="tenant" v-model="tenant" class="mt-1 p-2 w-full border rounded focus:ring focus:ring-blue-300 focus:outline-none" required>
+        </div>
+        <div class="mb-4">
+          <label for="username" class="block text-sm font-medium text-gray-700">Username</label>
+          <input type="text" id="username" v-model="username" class="mt-1 p-2 w-full border rounded focus:ring focus:ring-blue-300 focus:outline-none" required>
+        </div>
+        <div class="mb-4">
+          <label for="password" class="block text-sm font-medium text-gray-700">Password</label>
+          <input type="password" id="password" v-model="password" class="mt-1 p-2 w-full border rounded focus:ring focus:ring-blue-300 focus:outline-none" required>
+        </div>
+        <div class="flex items-center mb-4">
+          <input type="checkbox" id="rememberMe" v-model="rememberMe" class="mr-2">
+          <label for="rememberMe" class="text-sm">Remember Me</label>
+        </div>
+        <button type="submit" class="w-full bg-blue-500 text-white p-2 rounded hover:bg-blue-600">Login</button>
+      </form>
+      <a href="#" class="text-blue-500 text-sm mt-4 block">Forgot Password?</a>
+      <div class="mt-6 text-center">
+        <p class="text-gray-500">© 2025 Company Name. All rights reserved.</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+export default {
+  setup() {
+    const tenant = ref('');
+    const username = ref('');
+    const password = ref('');
+    const rememberMe = ref(false);
+    const router = useRouter();
+
+    const handleLogin = () => {
+if (username.value === 'admin' && password.value === 'admin') {
+  if (rememberMe.value) {
+    localStorage.setItem('username', username.value);
+    localStorage.setItem('password', password.value);
+  }
+  router.push('/dashboard');
+} else {
+  alert('Invalid username or password');
+}
+    };
+
+    return {
+      tenant,
+      username,
+      password,
+      rememberMe,
+      handleLogin
+    };
+  }
+};
+</script>
+
+<style scoped>
+/* Additional styles can be added here */
+</style>

src/views/organization.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="flex h-screen">
+    <aside class="bg-gray-800 text-white w-64">
+      <div class="p-4">
+        <h2 class="text-xl font-bold mb-6">Product Name</h2>
+        <ul>
+          <li class="mb-2">
+            <a href="#/module1" class="block px-4 py-2 rounded hover:bg-gray-700">系统模块1</a>
+          </li>
+          <li class="mb-2">
+            <a href="#/department1" class="block px-4 py-2 rounded hover:bg-gray-700">部门1组织架构</a>
+          </li>
+          <li class="mb-2">
+            <a href="#/department2" class="block px-4 py-2 rounded hover:bg-gray-700">部门2组织架构</a>
+          </li>
+          <!-- Add more departments as needed -->
+        </ul>
+      </div>
+    </aside>
+    <main class="p-4 flex-1">
+      <div class="mb-6">
+        <h2 class="text-2xl font-bold">组织架构</h2>
+      </div>
+      <div class="space-y-4">
+        <div class="bg-white p-4 rounded-lg shadow-md">
+          <div class="flex items-center">
+            <img src="" alt="Department Avatar" class="w-12 h-12 rounded-full mr-4">
+            <div>
+              <h3 class="text-lg font-bold">部门1</h3>
+              <p>部门主任: 张三</p>
+            </div>
+          </div>
+          <ul class="mt-4">
+            <li class="py-2">成员1</li>
+            <li class="py-2">成员2</li>
+            <li class="py-2">成员3</li>
+            <!-- Add more members as needed -->
+          </ul>
+        </div>
+        <div class="bg-white p-4 rounded-lg shadow-md">
+          <div class="flex items-center">
+            <img src="" alt="Department Avatar" class="w-12 h-12 rounded-full mr-4">
+            <div>
+              <h3 class="text-lg font-bold">部门2</h3>
+              <p>部门主任: 李四</p>
+            </div>
+          </div>
+          <ul class="mt-4">
+            <li class="py-2">成员1</li>
+            <li class="py-2">成员2</li>
+            <li class="py-2">成员3</li>
+            <!-- Add more members as needed -->
+          </ul>
+        </div>
+        <!-- Add more departments as needed -->
+      </div>
+    </main>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'OrganizationView'
+};
+</script>
+
+<style scoped>
+/* Additional styles can be added here */
+</style>

src/views/userList.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="flex h-screen">
+    <aside class="bg-gray-800 text-white w-64">
+      <div class="p-4">
+        <h2 class="text-xl font-bold mb-6">Product Name</h2>
+        <ul>
+          <li class="mb-2">
+            <a href="#/module1" class="block px-4 py-2 rounded hover:bg-gray-700">系统模块1</a>
+          </li>
+          <li class="mb-2">
+            <a href="#/module2" class="block px-4 py-2 rounded hover:bg-gray-700">系统模块2</a>
+          </li>
+          <!-- Add more modules as needed -->
+        </ul>
+      </div>
+    </aside>
+    <main class="p-4 flex-1">
+      <div class="mb-6">
+        <div class="flex items-center justify-between">
+          <h2 class="text-2xl font-bold">用户列表信息</h2>
+          <div class="relative">
+            <input type="text" placeholder="搜索..." class="p-2 border rounded w-full">
+            <svg xmlns="http://www.w3.org/2000/svg" class="absolute right-2 top-2 w-5 h-5 text-gray-400" viewBox="0 0 24 24" stroke="currentColor" fill="none">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
+            </svg>
+          </div>
+        </div>
+      </div>
+      <form class="mb-6">
+        <div class="grid grid-cols-2 gap-4">
+          <div>
+            <label for="name" class="block text-sm font-medium text-gray-700">雇员姓名</label>
+            <input type="text" id="name" class="mt-1 p-2 w-full border rounded focus:ring focus:ring-blue-300 focus:outline-none">
+          </div>
+          <div>
+            <label for="documentType" class="block text-sm font-medium text-gray-700">证件类型</label>
+            <select id="documentType" class="mt-1 p-2 w-full border rounded focus:ring focus:ring-blue-300 focus:outline-none">
+              <option value="idCard">身份证</option>
+              <option value="passport">护照</option>
+              <!-- Add more document types as needed -->
+            </select>
+          </div>
+          <div>
+            <label for="documentNumber" class="block text-sm font-medium text-gray-700">证件号</label>
+            <input type="text" id="documentNumber" class="mt-1 p-2 w-full border rounded focus:ring focus:ring-blue-300 focus:outline-none">
+          </div>
+          <div>
+            <label for="phoneNumber" class="block text-sm font-medium text-gray-700">手机号</label>
+            <input type="text" id="phoneNumber" class="mt-1 p-2 w-full border rounded focus:ring focus:ring-blue-300 focus:outline-none">
+          </div>
+          <div>
+            <label for="birthDate" class="block text-sm font-medium text-gray-700">出生日期</label>
+            <input type="date" id="birthDate" class="mt-1 p-2 w-full border rounded focus:ring focus:ring-blue-300 focus:outline-none">
+          </div>
+          <div>
+            <label for="creationDate" class="block text-sm font-medium text-gray-700">创建日期</label>
+            <input type="date" id="creationDate" class="mt-1 p-2 w-full border rounded focus:ring focus:ring-blue-300 focus:outline-none">
+          </div>
+        </div>
+        <button type="submit" class="mt-4 w-full bg-blue-500 text-white p-2 rounded hover:bg-blue-600">查询</button>
+      </form>
+      <table class="w-full border-collapse">
+        <thead>
+          <tr>
+            <th class="p-2 border"><input type="checkbox"></th>
+            <th class="p-2 border">雇员姓名</th>
+            <th class="p-2 border">证件类型</th>
+            <th class="p-2 border">证件号</th>
+            <th class="p-2 border">手机号</th>
+            <th class="p-2 border">出生日期</th>
+            <th class="p-2 border">创建日期</th>
+            <th class="p-2 border">操作</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td class="p-2 border"><input type="checkbox"></td>
+            <td class="p-2 border">张三</td>
+            <td class="p-2 border">身份证</td>
+            <td class="p-2 border">123456789012345678</td>
+            <td class="p-2 border">13800138000</td>
+            <td class="p-2 border">1990-01-01</td>
+            <td class="p-2 border">2020-01-01</td>
+            <td class="p-2 border">
+              <button class="bg-green-500 text-white p-1 rounded">编辑</button>
+              <button class="bg-red-500 text-white p-1 rounded ml-2">删除</button>
+            </td>
+          </tr>
+          <!-- Add more rows as needed -->
+        </tbody>
+      </table>
+      <div class="mt-6 flex justify-center">
+        <button class="bg-blue-500 text-white p-2 rounded">上一页</button>
+        <span class="mx-4">第 1 页，共 10 页</span>
+        <button class="bg-blue-500 text-white p-2 rounded">下一页</button>
+      </div>
+    </main>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UserListView'
+};
+</script>
+
+<style scoped>
+/* Additional styles can be added here */
+</style>