From fa0c718c8ba41851c4bfa53463d791ccbffea4d1 Mon Sep 17 00:00:00 2001 From: GiveMePast <1248298477@qq.com> Date: Thu, 14 May 2026 15:41:00 +0800 Subject: [PATCH] =?UTF-8?q?=E5=87=8F=E5=B0=91=E5=86=97=E4=BD=99=E4=BB=A3?= =?UTF-8?q?=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- jsconfig.json | 1 - src/api/ticket.js | 66 +++--- src/components/ticket/TicketFilter.vue | 72 +++++- src/components/ticket/TicketForm.vue | 92 ++++---- src/components/ticket/TicketList.vue | 170 ++++++++++----- src/layouts/MainLayout.vue | 49 ++++- src/router/index.js | 291 +++++++++++++++++-------- src/utils/format.js | 49 +++++ src/utils/request.js | 92 +++----- src/views/404View.vue | 37 ++++ src/views/ClientView.vue | 27 +-- src/views/LoginView.vue | 68 ++---- src/views/TicketManagement.vue | 178 +++++++++------ src/views/UserView.vue | 46 ++-- vite.config.js | 3 +- 15 files changed, 802 insertions(+), 439 deletions(-) create mode 100644 src/utils/format.js create mode 100644 src/views/404View.vue diff --git a/jsconfig.json b/jsconfig.json index 8e8440b..877fd65 100644 --- a/jsconfig.json +++ b/jsconfig.json @@ -1,6 +1,5 @@ { "compilerOptions": { - "baseUrl": ".", "paths": { "@/*": [ "./src/*" diff --git a/src/api/ticket.js b/src/api/ticket.js index 15cfa56..00538a2 100644 --- a/src/api/ticket.js +++ b/src/api/ticket.js @@ -1,78 +1,80 @@ -import request from '@/utils/request' +import { adminRequest, indexRequest } from '@/utils/request' +// ==================== 前台接口（/api/index） ==================== export const userApi = { - // 登录接口 login(username, password) { - // 这里的 data 会被 axios 放在请求体 (Body) 中发送 - return request.post('/login', { - username, - password - }) + return indexRequest.post('/login', { username, password }) }, - // 退出登录 logout() { - return request.post('/logout') + return indexRequest.post('/logout') } } +// ==================== 后台接口（/api/admin） ==================== export const ticketApi = { - //获取工单各个完成状态的统计数量 - getticketsstatuscount(){ - return request.get('/getticketstatuscount') + // 获取工单各完成状态的统计数量 + getticketdashboardstats() { + return adminRequest.get('/getticketdashboardstats') }, // 获取工单列表 getTickets(params) { - return request.get('/ticketsfind', { params }) + return adminRequest.get('/ticketsfind', { params }) }, // 新增工单 addTicket(data) { - return request.post('/addticket', data) + return adminRequest.post('/addticket', data) }, // 更新工单 updateTicket(id, data) { - return request.put(`/ticket/${id}`, data) + return adminRequest.put(`/ticket/${id}`, data) }, // 删除工单 deleteTicket(id) { - return request.delete(`/ticket/${id}`) + return adminRequest.delete(`/ticket/${id}`) }, - // 获取运营人员列表 - getOperators() { - return request.get('/operators') + // 获取运营人员列表（按公司分组） + getOperatorsNew() { + return adminRequest.get('/getOperatorList') }, + // 获取员工列表 - getStaffs(params) { - return request.get('/getStaffList', { params }) - } + getUserStaffs() { + return adminRequest.get('/getUserStaffList') + }, + + // 批量更新工单 + batchUpdateTicket(data) { + return adminRequest.put('/tickets/batch-update', data) + }, } export const customerApi = { getCustomers() { - return request.get('/customers') + return adminRequest.get('/customers') }, - // 添加客户，data 结构应为 { company_name: 'xxx' } addCustomerName(data) { - return request.post('/addcustomername', data) + return adminRequest.post('/addcustomername', data) }, addEmployee(data) { - return request.post('/addemployee', data) // 对应后端新增员工 + return adminRequest.post('/addemployee', data) }, - deleteEmployee(empId) { - return request.delete(`/deleteemployee/${empId}`) // 对应后端删除员工 - }, - deleteCustomer(customerId) { - return request.delete(`/deletecustomer/${customerId}`) // 删除客户单位 - } + deleteEmployee(empId) { + return adminRequest.delete(`/deleteemployee/${empId}`) + }, + + deleteCustomer(customerId) { + return adminRequest.delete(`/deletecustomer/${customerId}`) + } } \ No newline at end of file diff --git a/src/components/ticket/TicketFilter.vue b/src/components/ticket/TicketFilter.vue index 4db594e..d8eb496 100644 --- a/src/components/ticket/TicketFilter.vue +++ b/src/components/ticket/TicketFilter.vue @@ -15,24 +15,26 @@
- - + + +
/
- - + - + - \ No newline at end of file + +.update-label { + color: #909399; +} + +:deep(.table-header) { + background-color: #fafafa !important; + font-weight: 600; +} + diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue index 28511b1..4ee874b 100644 --- a/src/layouts/MainLayout.vue +++ b/src/layouts/MainLayout.vue @@ -3,25 +3,36 @@
-
- 方舟网络 -
-

方舟网络

-

工单管理系统

+ + +
+ 方舟网络 +
+

方舟网络

+

工单管理系统

+
-
+
+ 工单管理 + 数据统计 + @@ -66,6 +77,8 @@ import { reactive, onMounted } from "vue"; import { Menu as IconMenu, Document, User } from "@element-plus/icons-vue"; import { useRouter } from "vue-router"; +import { resetRouter } from "@/router"; +import { userApi } from "@/api/ticket"; const router = useRouter(); const user = reactive({ @@ -82,10 +95,19 @@ onMounted(() => { } }); -const handleLogout = () => { - localStorage.clear(); - sessionStorage.clear(); - router.push("/login"); +const handleLogout = async () => { + // 1. 调用后端接口销毁 session + try { + await userApi.logout(); + } catch (e) { + // 即使后端接口异常，也要完成前端的清理 + } + + localStorage.removeItem("user_info"); + sessionStorage.removeItem("user_info"); + + resetRouter(); + router.push({ name: "login" }); }; @@ -119,6 +141,13 @@ const handleLogout = () => { align-items: center; } +/* 修复：为新添加的链接添加样式 */ +.logo-link { + text-decoration: none; + color: inherit; + display: block; +} + .logo-container { display: flex; align-items: center; diff --git a/src/router/index.js b/src/router/index.js index a122ee5..2aa1354 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -1,105 +1,220 @@ import { createRouter, createWebHistory } from 'vue-router' import { ElMessage } from 'element-plus' // 引入提示组件 + +// 公开路由，所有用户都可以访问 +export const publicRoutes = [ + { + path: '/login', + name: 'login', + component: () => import('@/views/LoginView.vue'), + meta: { isPublic: true } + } +] + +// 动态路由，根据角色进行添加 +export const dynamicRoutes = [ + { + path: '/', + name: 'admin_layout', + component: () => import('@/layouts/MainLayout.vue'), + meta: { role: 'admin' }, + redirect: { name: 'home' }, // 添加默认重定向 + children: [ + { + path: '', + name: 'home', + component: () => import('@/views/TicketManagement.vue'), + meta: { title: '工单管理' } + }, + { + path: 'stats', + name: 'stats', + component: () => import('@/views/StatsView.vue'), + meta: { title: '数据统计' } + }, + { + path: 'customers', + name: 'customers', + component: () => import('@/views/CustomersManagement.vue'), + meta: { title: '客户管理' } + } + ] + }, + { + path: '/user', + name: 'user_workdesk', + component: () => import('@/views/UserView.vue'), + meta: { role: 'user', title: '工作台' } + }, + { + path: '/client', + name: 'client_monitor', + component: () => import('@/views/ClientView.vue'), + meta: { role: 'client', title: '客户监控' } + } +] + +// 创建路由实例 const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), - routes: [ - { - path: '/', - component: () => import('../layouts/MainLayout.vue'), - children: [ - { - path: '', - name: 'home', - component: () => import('../views/TicketManagement.vue'), - // 标记需要 admin 权限 - meta: { requiresAuth: true, role: 'admin' } - }, - { - path: 'stats', - name: 'stats', - component: () => import('../views/StatsView.vue'), - meta: { requiresAuth: true, role: 'admin' } - }, - { - path: 'customers', - name: 'customers', - component: () => import('../views/CustomersManagement.vue'), - meta: { requiresAuth: true, role: 'admin' } - }, - ] - }, - { - path: '/user', - name: 'user_workdesk', - component: () => import('../views/UserView.vue'), - // 标记只需要普通用户权限 - meta: { requiresAuth: true, role: 'user' } - }, - { - path: '/client', - name: 'client_monitor', - component: () => import('../views/ClientView.vue'), - // 标记只需要普通用户权限 - meta: { requiresAuth: true, role: 'client' } - }, - { - path: '/login', - name: 'login', - component: () => import('../views/LoginView.vue') - }, - ] + routes: publicRoutes }) -// 全局前置守卫 -router.beforeEach((to, from, next) => { - const token = localStorage.getItem('token') || sessionStorage.getItem('token'); - - // 获取用户信息以判断角色 - const userInfoStr = localStorage.getItem('user_info') || sessionStorage.getItem('user_info'); - const userInfo = userInfoStr ? JSON.parse(userInfoStr) : null; - - // 简单的角色判定逻辑：如果用户名为 admin 则视为管理员，否则为普通用户 - // 你也可以根据后端返回的具体的 role 字段来判断 - const userRole = userInfo?.username === 'admin' ? 'admin' : 'user'; - const isRequiresAuth = to.matched.some(record => record.meta.requiresAuth); +// ======工具函数====== - // 1. 未登录拦截 - if (isRequiresAuth && !token) { - next({ name: 'login', query: { redirect: to.fullPath } }); - return; +/* 获取用户信息 */ +function getUserInfo() { + try { + const userInfoStr = localStorage.getItem('user_info') || sessionStorage.getItem('user_info') + return userInfoStr ? JSON.parse(userInfoStr) : null + } catch (error) { + console.error('解析用户信息失败:', error) + return null + } +} + +/* 角色首页映射 */ +const roleHomeMap = { + admin: { name: 'home' }, + user: { name: 'user_workdesk' }, + client: { name: 'client_monitor' } +}; + + +/* 获取角色的默认路由 */ +function getRoleHomeRoute(role) { + return roleHomeMap[role?.toLowerCase()] || { path: '/login' } +} + + +// ======动态路由管理====== + +let hasAddedRoutes = false; // 标记是否已添加动态路由 + +/* 添加动态路由 */ +function addDynamicRoutes(role) { + try { + // 过滤当前角色可以访问的路由 + const accessibleRoutes = dynamicRoutes.filter(route => { + return !route.meta?.role || route.meta.role === role; + }); + + // 添加路由 + accessibleRoutes.forEach(route => { + router.addRoute(route); + }); + + // 添加404路由 + router.addRoute({ + path: '/:pathMatch(.*)*', + name: 'NotFound', + component: () => import('@/views/404View.vue'), + meta: { title: 404 } + }); + + hasAddedRoutes = true; + return true; + + } catch (error) { + console.error('动态添加路由失败:', error); + return false; + } +} + +/* 重置路由 */ + +export function resetRouter() { + // 移除动态添加的路由 + dynamicRoutes.forEach(route => { + if (route.name && router.hasRoute(route.name)) { + router.removeRoute(route.name); + } + }); + + // 移除404路由 + if (router.hasRoute('NotFound')) { + router.removeRoute('NotFound'); } - // 2. 已登录状态下的逻辑 - if (token) { - // 如果想去登录页，根据角色重定向到对应首页 - if (to.name === 'login') { - userRole === 'admin' ? next({ name: 'home' }) : next({ name: 'user_workdesk' }); - return; + hasAddedRoutes = false; + + // 清除用户信息 + localStorage.removeItem('user_info'); + sessionStorage.removeItem('user_info'); +} + + + +// ======路由守卫====== +router.beforeEach(async (to, from, next) => { + const userInfo = getUserInfo(); + const isLoggedIn = !!(userInfo && userInfo.role); // 判断是否登录（双重逻辑非） + + // 1.访问登录页 + if (to.name === 'login') { + if (isLoggedIn) { + // 已登录用户，重定向到角色首页 + const homeRoute = getRoleHomeRoute(userInfo.role); + return next({ name: homeRoute.name }); } - // --- 核心修复：权限校验 --- - // 检查目标路由是否定义了需要的角色 - const requiredRole = to.meta.role; - - if (requiredRole && requiredRole !== userRole) { - // 如果是员工想进管理员页面 - if (userRole === 'user' && requiredRole === 'admin') { - ElMessage.error('权限不足，无法访问管理后台'); - next({ name: 'user_workdesk' }); // 踢回员工工作台 - return; - } - // 如果是管理员想进员工页面 (通常允许，如果不允许也可以踢回 /) - if (userRole === 'admin' && requiredRole === 'user') { - next({ name: 'home' }); - return; - } - } + // 未登录 + return next(); } - // 3. 正常放行 - next(); + // 2.未登录访问受保护的页面 + if (!isLoggedIn) { + hasAddedRoutes = false; // 确保未添加动态路由 + + // 不是首页才进行提示 + if (to.path !== '/') { + ElMessage.info('请先登录'); + } + + // 保存当前路径，登录后跳回 + return next({ + name: 'login', + query: { redirect: to.fullPath } + }) + } + + + + // 3.已登录，动态添加路由 + if (!hasAddedRoutes) { + const success = addDynamicRoutes(userInfo.role); + if (!success) { + // 添加失败，清空状态，重新登录 + resetRouter(); + ElMessage.error('加载用户权限失败，请重新登录'); + return next({ name: 'login' }); + } + + // 用新注册的路由重新匹配原始导航路径（排除404通配） + const resolved = router.resolve(to); + if (resolved.matched.length > 0 && resolved.name !== 'NotFound') { + return next({ ...to, replace: true }); + } + + // 路径无匹配（如非Admin用户访问 /），回退到角色首页 + const homeRoute = getRoleHomeRoute(userInfo.role); + return next({ name: homeRoute.name }); + } + + // 4. 已登录且路由已添加，放行 + next() +}) + + + +// ======全局后置守卫====== +router.afterEach((to) => { + // 设置页面标题 + if (to.meta?.title) { + document.title = `方舟工单系统 - ${to.meta.title}`; + } }); -export default router \ No newline at end of file +export default router; diff --git a/src/utils/format.js b/src/utils/format.js new file mode 100644 index 0000000..f2acd40 --- /dev/null +++ b/src/utils/format.js @@ -0,0 +1,49 @@ +/** + * 补全 URL 协议头，防止无效跳转 + */ +export function formatUrl(url) { + if (!url || typeof url !== 'string') return '#' + if (url.startsWith('http://') || url.startsWith('https://')) return url + return `http://${url}` +} + +/** + * 将日期字符串或时间戳转换为 YYYY-MM-DD 格式 + */ +export function formatDate(time) { + if (!time || time === '0') return '-' + + if (typeof time === 'string' && time.includes('-')) { + return time.slice(0, 10) + } + + const timestamp = Number(time) + if (!isNaN(timestamp) && timestamp > 0) { + const date = new Date(timestamp * 1000) + if (!isNaN(date.getTime())) { + const y = date.getFullYear() + const m = (date.getMonth() + 1).toString().padStart(2, '0') + const d = date.getDate().toString().padStart(2, '0') + return `${y}-${m}-${d}` + } + } + + return '-' +} + +/** + * 将时间转换为 MM-DD HH:mm 格式 + */ +export function formatDateTime(time) { + if (!time) return '-' + if (typeof time === 'string' && time.includes('-')) return time + + const date = new Date(time) + if (isNaN(date.getTime())) return '-' + + const m = (date.getMonth() + 1).toString().padStart(2, '0') + const d = date.getDate().toString().padStart(2, '0') + const h = date.getHours().toString().padStart(2, '0') + const i = date.getMinutes().toString().padStart(2, '0') + return `${m}-${d} ${h}:${i}` +} diff --git a/src/utils/request.js b/src/utils/request.js index a326f4e..e94ab43 100644 --- a/src/utils/request.js +++ b/src/utils/request.js @@ -1,72 +1,52 @@ import axios from 'axios' import { ElMessage } from 'element-plus' -import router from '@/router' +import router, { resetRouter } from '@/router' -const service = axios.create({ - baseURL: '/api', - timeout: 10000 -}) - -// 标记位，防止重复弹窗 let isRelogging = false -// 请求拦截器 -service.interceptors.request.use( - config => { - // 自动获取 Token（兼顾两种存储方式） - const token = localStorage.getItem('token') || sessionStorage.getItem('token') - if (token) { - config.headers['Authorization'] = `Bearer ${token}` - } - return config - }, - error => Promise.reject(error) -) +function createService(basePath) { + const service = axios.create({ + baseURL: `/api/${basePath}`, + timeout: 10000, + withCredentials: true, + }) -// 响应拦截器 -service.interceptors.response.use( - - // 接口请求返回状态码是200，进入第一个 - response => { - const token = response.headers['Authorization']; - if (token) { - localStorage.setItem('token', token); - } - return response.data; - }, - error => { - const resData = error.response?.data; - const status = error.response?.status; - console.log("返回状态码", status); + service.interceptors.response.use( + response => response.data, - // 1. 判定是否为 Token 相关的认证错误 - // 包含 500 状态码且消息含有 token 字样（如 decode 失败、过期等） - if (status === 401) { + error => { + const resData = error.response?.data + const status = error.response?.status - if (!isRelogging) { - isRelogging = true; // 锁定 + // session过期处理 + if (status === 401) { + if (!isRelogging) { + isRelogging = true - localStorage.removeItem('token'); - // 清除用户信息，防止 UserView.vue 的 computed 报错 - localStorage.removeItem('user_info'); + resetRouter() - ElMessage.error('登录已失效，请重新登录'); + ElMessage.error('登录已过期，请重新登录') - router.push('/login').then(() => { - // 2. 延迟解锁，确保页面跳转期间的所有并发请求都已返回并被此拦截器捕获 - setTimeout(() => { - isRelogging = false; - }, 3000); - }); + router.push({ + name: 'login', + query: { redirect: router.currentRoute.value.fullPath } + }).finally(() => { + isRelogging = false + }) + } + return new Promise(() => { }) } - return new Promise(() => { }); + const msg = resData?.message || '服务器响应异常' + ElMessage.error(msg) + return Promise.reject(error) } + ) - const msg = resData?.message || '服务器响应异常'; - ElMessage.error(msg); - return Promise.reject(error); - } -); -export default service \ No newline at end of file + return service +} + +export const adminRequest = createService('admin') +export const indexRequest = createService('index') +export default adminRequest \ No newline at end of file diff --git a/src/views/404View.vue b/src/views/404View.vue new file mode 100644 index 0000000..b80a709 --- /dev/null +++ b/src/views/404View.vue @@ -0,0 +1,37 @@ + + + + + diff --git a/src/views/ClientView.vue b/src/views/ClientView.vue index 894f14f..ca663a9 100644 --- a/src/views/ClientView.vue +++ b/src/views/ClientView.vue @@ -114,7 +114,7 @@ @@ -445,6 +483,22 @@ onMounted(() => { margin-bottom: 20px; } +.batch-bar { + display: flex; + align-items: center; + gap: 12px; + padding: 10px 16px; + margin-bottom: 12px; + background: #fdf6ec; + border: 1px solid #faecd8; + border-radius: 8px; +} + +.batch-info { + font-size: 13px; + color: #606266; +} + .pagination-container { margin-top: 20px; display: flex; diff --git a/src/views/UserView.vue b/src/views/UserView.vue index ca3921f..702c54f 100644 --- a/src/views/UserView.vue +++ b/src/views/UserView.vue @@ -85,12 +85,18 @@ - + + +