newPeter7
2 years ago
15 changed files with 760 additions and 309 deletions
@ -0,0 +1,318 @@ |
|||||
|
import Vue from 'vue' |
||||
|
import Router from 'vue-router' |
||||
|
import http from '../utils/request' |
||||
|
import { isURL } from '@/utils/validate' |
||||
|
import Cookies from 'js-cookie' |
||||
|
|
||||
|
Vue.use(Router) |
||||
|
|
||||
|
// 解决Vue-Router升级导致的Uncaught(in promise) navigation guard问题----------
|
||||
|
const originalPush = Router.prototype.push |
||||
|
Router.prototype.push = function push(location, onResolve, onReject) { |
||||
|
if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject) |
||||
|
return originalPush.call(this, location).catch(err => err) |
||||
|
} |
||||
|
// 解决Vue-Router升级导致的Uncaught(in promise) navigation guard问题----------
|
||||
|
|
||||
|
// 页面路由(独立页面)
|
||||
|
export const pageRoutes = [ |
||||
|
{ |
||||
|
path: '/404', |
||||
|
component: () => import('@/page-subspecialty/views/pages/404'), |
||||
|
name: '404', |
||||
|
meta: { title: '404未找到' }, |
||||
|
beforeEnter(to, from, next) { |
||||
|
// 拦截处理特殊业务场景
|
||||
|
// 如果, 重定向路由包含__双下划线, 为临时添加路由
|
||||
|
if (/__.*/.test(to.redirectedFrom)) { |
||||
|
return next(to.redirectedFrom.replace(/__.*/, '')) |
||||
|
} |
||||
|
next() |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
path: '/login', |
||||
|
component: () => import('@/page-subspecialty/views/pages/login'), |
||||
|
name: 'login', |
||||
|
meta: { title: '登录' } |
||||
|
}, |
||||
|
{ |
||||
|
path: '/pacsManage', |
||||
|
component: () => import('@/page-subspecialty/views/pages/pacsManage/index'), |
||||
|
name: 'pacsManage', |
||||
|
meta: { title: 'pacs浏览器', isTab: true } |
||||
|
}, |
||||
|
{ |
||||
|
path: '/pacs', |
||||
|
component: () => import('@/page-subspecialty/views/pages/pacs/index'), |
||||
|
name: 'pacs', |
||||
|
meta: { title: 'pacs浏览器', isTab: true } |
||||
|
} |
||||
|
|
||||
|
] |
||||
|
|
||||
|
// 模块路由(基于主入口布局页面)*8
|
||||
|
export const moduleRoutes = { |
||||
|
path: '/', |
||||
|
component: () => import('@/page-subspecialty/views/main'), |
||||
|
name: 'main', |
||||
|
redirect: { name: 'outpatientManagement' }, |
||||
|
meta: { title: '首页' }, |
||||
|
children: [ |
||||
|
{ |
||||
|
path: '/outpatientManagement', |
||||
|
component: () => import('@/page-subspecialty/views/modules/outpatientManagement/call'), |
||||
|
name: 'outpatientManagement', |
||||
|
meta: { title: '日常出诊', isTab: true } |
||||
|
}, |
||||
|
// ok镜
|
||||
|
{ |
||||
|
path: '/patientInfo', |
||||
|
name: 'patientInfo', |
||||
|
meta: { title: '详情', isTab: true }, |
||||
|
component: () => import('@/page-subspecialty/views/modules/optometryManagement/seeDoctor/index') |
||||
|
}, |
||||
|
{ |
||||
|
path: '/iframe', |
||||
|
component: null, |
||||
|
name: 'iframe', |
||||
|
meta: { title: 'iframe', isTab: true } |
||||
|
}, |
||||
|
{ |
||||
|
path: '/redirect', |
||||
|
name: 'redirect', |
||||
|
component: () => import('@/page-subspecialty/views/redirect') |
||||
|
}, |
||||
|
{ |
||||
|
path: '/360view', |
||||
|
name: '360view', |
||||
|
component: () => import('@/components/360View/index1.vue') |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
|
||||
|
export function addDynamicRoute(routeParams, router) { |
||||
|
// 组装路由名称, 并判断是否已添加, 如是: 则直接跳转
|
||||
|
var routeName = routeParams.routeName |
||||
|
var dynamicRoute = window.SITE_CONFIG['dynamicRoutes'].filter(item => item.name === routeName)[0] |
||||
|
if (dynamicRoute) { |
||||
|
return router.push({ name: routeName, params: routeParams.params }) |
||||
|
} |
||||
|
// 否则: 添加并全局变量保存, 再跳转
|
||||
|
dynamicRoute = { |
||||
|
path: routeName, |
||||
|
component: () => Promise.resolve(require(`@/page-subspecialty/views/modules/${routeParams.path}`).default), |
||||
|
// component: () => import(`@/views/modules/${routeParams.path}`),
|
||||
|
name: routeName, |
||||
|
meta: { |
||||
|
...window.SITE_CONFIG['contentTabDefault'], |
||||
|
menuId: routeParams.menuId, |
||||
|
title: `${routeParams.title}` |
||||
|
} |
||||
|
} |
||||
|
router.addRoutes([ |
||||
|
{ |
||||
|
...moduleRoutes, |
||||
|
name: `main-dynamic__${dynamicRoute.name}`, |
||||
|
children: [dynamicRoute] |
||||
|
} |
||||
|
]) |
||||
|
window.SITE_CONFIG['dynamicRoutes'].push(dynamicRoute) |
||||
|
router.push({ name: dynamicRoute.name, params: routeParams.params }) |
||||
|
} |
||||
|
|
||||
|
const createRouter = () => new Router({ |
||||
|
mode: 'history', |
||||
|
scrollBehavior: () => ({ y: 0 }), |
||||
|
routes: pageRoutes.concat(moduleRoutes) |
||||
|
}) |
||||
|
const router = createRouter() |
||||
|
|
||||
|
// [vue-router] Duplicate named routes definition 重复的命名路由定义
|
||||
|
// 动态路由退出再登录会出现警告重复路由
|
||||
|
// 解决方案：在退出时调用resetRouter()方法
|
||||
|
export function resetRouter() { |
||||
|
const newRouter = createRouter() |
||||
|
router.matcher = newRouter.matcher // reset router
|
||||
|
} |
||||
|
|
||||
|
router.beforeEach((to, from, next) => { |
||||
|
// 添加动态(菜单)路由
|
||||
|
// 已添加或者当前路由为页面路由, 可直接访问
|
||||
|
if (window.SITE_CONFIG['dynamicMenuRoutesHasAdded'] || fnCurrentRouteIsPageRoute(to, pageRoutes)) { |
||||
|
return next() |
||||
|
} |
||||
|
if (to.path === from.path) { |
||||
|
return |
||||
|
} |
||||
|
if (to.name === 'login' || to.path === '/login' || to.path === 'satusScreen' || to.name === 'satusScreen') { |
||||
|
next() |
||||
|
} else if (to.name === '360view' && to.query.doctorId) { |
||||
|
loginByDocId(to.query.doctorId, next, to.fullPath) |
||||
|
} else { |
||||
|
// 获取字典列表, 添加并全局变量保存
|
||||
|
// http.get('/sys/dict/type/all').then(({ data: res }) => {
|
||||
|
// if (res.code !== 0) {
|
||||
|
// return
|
||||
|
// }
|
||||
|
// window.SITE_CONFIG['dictList'] = res.data
|
||||
|
// }).catch(() => {})
|
||||
|
// 获取左侧菜单列表，添加并全局变量保存
|
||||
|
http.get('/sys/menu/nav').then(({ data: res }) => { |
||||
|
if (res.code !== 0) { |
||||
|
Vue.prototype.$message.error(res.msg) |
||||
|
return next({ name: 'login' }) |
||||
|
} |
||||
|
window.SITE_CONFIG['menuList'] = res.data |
||||
|
}).catch(() => { |
||||
|
return next({ name: 'login' }) |
||||
|
}) |
||||
|
|
||||
|
// 获取菜单管理菜单列表，并添加动态路由
|
||||
|
http.get('/sys/menu/list', { |
||||
|
params: { |
||||
|
type: 0 |
||||
|
} |
||||
|
}).then(({ data: res }) => { |
||||
|
if (res.code !== 0) { |
||||
|
Vue.prototype.$message.error(res.msg) |
||||
|
return next({ name: 'login' }) |
||||
|
} |
||||
|
// window.SITE_CONFIG['menuList'] = res.data
|
||||
|
const menuListChild = res.data.filter(item => item.children.length > 0) |
||||
|
fnAddDynamicMenuRoutes(JSON.parse(JSON.stringify(res.data)), menuListChild.length) |
||||
|
|
||||
|
next({ ...to, replace: true }) |
||||
|
}).catch(() => { |
||||
|
// console.log(123)
|
||||
|
return next({ name: 'login' }) |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
function getNavList(next) { |
||||
|
http.get('/sys/menu/nav').then(({ data: res }) => { |
||||
|
if (res.code !== 0) { |
||||
|
Vue.prototype.$message.error(res.msg) |
||||
|
return next() |
||||
|
} |
||||
|
window.SITE_CONFIG['menuList'] = res.data |
||||
|
}).catch(() => { |
||||
|
return next({ name: 'login' }) |
||||
|
}) |
||||
|
} |
||||
|
function muneList(next) { |
||||
|
http.get('/sys/menu/list', { |
||||
|
params: { |
||||
|
type: 0 |
||||
|
} |
||||
|
}).then(({ data: res }) => { |
||||
|
if (res.code !== 0) { |
||||
|
Vue.prototype.$message.error(res.msg) |
||||
|
return next({ name: 'login' }) |
||||
|
} |
||||
|
// window.SITE_CONFIG['menuList'] = res.data
|
||||
|
const menuListChild = res.data.filter(item => item.children.length > 0) |
||||
|
fnAddDynamicMenuRoutes(JSON.parse(JSON.stringify(res.data)), menuListChild.length) |
||||
|
}).catch(() => { |
||||
|
return next({ name: 'login' }) |
||||
|
}) |
||||
|
} |
||||
|
function loginByDocId(doctorId, next) { |
||||
|
const params = { |
||||
|
doctorId: doctorId |
||||
|
} |
||||
|
http.post('/loginByDid', params).then(({ data: res }) => { |
||||
|
if (res.code !== 0) { |
||||
|
return this.$message.error(res.msg) |
||||
|
} |
||||
|
console.log(res) |
||||
|
// Cookies.set('xa-token', res.data.token)
|
||||
|
window.sessionStorage.setItem('xa-token', res.data.token) |
||||
|
window.sessionStorage.setItem('qg-userData', JSON.stringify(res.data.currentUser)) |
||||
|
getNavList(next) |
||||
|
muneList(next) |
||||
|
|
||||
|
return next() |
||||
|
}).catch(() => { }) |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 判断当前路由是否为页面路由 |
||||
|
* @param {*} route 当前路由 |
||||
|
* @param {*} pageRoutes 页面路由 |
||||
|
*/ |
||||
|
function fnCurrentRouteIsPageRoute(route, pageRoutes = []) { |
||||
|
let temp = [] |
||||
|
for (let i = 0; i < pageRoutes.length; i++) { |
||||
|
if (route.path === pageRoutes[i].path) { |
||||
|
return true |
||||
|
} |
||||
|
if (pageRoutes[i].children && pageRoutes[i].children.length >= 1) { |
||||
|
temp = temp.concat(pageRoutes[i].children) |
||||
|
} |
||||
|
} |
||||
|
return temp.length >= 1 ? fnCurrentRouteIsPageRoute(route, temp) : false |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 添加动态(菜单)路由 |
||||
|
* PH：自上而下遍历，累积平铺 |
||||
|
* @param {*} menuList 菜单列表 |
||||
|
* @param {*} routes 递归创建的动态(菜单)路由 |
||||
|
*/ |
||||
|
function fnAddDynamicMenuRoutes(menuList = [], menuListChildLength, routes = []) { |
||||
|
let index = 0 |
||||
|
menuList.forEach((item, i) => { |
||||
|
// eslint-disable-next-line
|
||||
|
let URL = (item.url || '').replace(/{{([^}}]+)?}}/g, (s1, s2) => eval(s2)) // URL支持{{ window.xxx }}占位符变量
|
||||
|
item['meta'] = { |
||||
|
...window.SITE_CONFIG['contentTabDefault'], |
||||
|
menuId: item.id, |
||||
|
title: item.name |
||||
|
} |
||||
|
if (isURL(URL)) { |
||||
|
item['path'] = item['name'] = `i-${item.id}` |
||||
|
item['meta'].push({ |
||||
|
iframeURL: URL |
||||
|
}) |
||||
|
} else { |
||||
|
// console.log(URL)
|
||||
|
URL = URL.replace(/^\//, '').replace(/_/g, '-') |
||||
|
item['path'] = '/' + URL.replace(/\//g, '-') |
||||
|
item['name'] = URL.replace(/\//g, '-') |
||||
|
// 坑！！！父级也必须要有component,父级要有自己的vue组件,父级路由必须有<router-view />占位符
|
||||
|
// 其孩子children才能展示出来，孩子展示在父级占位符的地方
|
||||
|
URL.includes('seeDoctor') ? URL = 'seeDoctor' : '' // 不同父级有相同子级seeDoctor，防止面包屑冲突，动态路由名字区分设置为seeDoctor、seeDoctorOne,在寻找组件时替换回seeDoctor，可以找到对应组件路径
|
||||
|
item['component'] = () => Promise.resolve(require(`@/page-subspecialty/views/modules/${URL}`).default) |
||||
|
// 如果是父级给父级添加重定向到子菜单第一项
|
||||
|
if (item.children.length > 0 && item.children[0].url) { |
||||
|
// console.log(item)
|
||||
|
// isShow:0显示不菜单 1显示菜单
|
||||
|
item.children[0].isShow === 0 ? '' : item['redirect'] = '/' + item.children[0].url.replace(/\//g, '-') |
||||
|
} |
||||
|
} |
||||
|
if (item.children.length > 0) { |
||||
|
index++ |
||||
|
fnAddDynamicMenuRoutes(item.children) |
||||
|
} |
||||
|
}) |
||||
|
// 此处一定要加判断，因为此方法在递归，要等到递归完成后再执行下面的内容
|
||||
|
// 坑！！！如果不加此判断，this.$route.matched面包屑的父级就不会展示
|
||||
|
if (menuListChildLength === index) { |
||||
|
routes = menuList |
||||
|
// PH：底层调用一次
|
||||
|
// 添加路由
|
||||
|
router.addRoutes([ |
||||
|
{ |
||||
|
...moduleRoutes, |
||||
|
name: 'main-dynamic-menu', |
||||
|
children: [...routes] |
||||
|
}, |
||||
|
{ path: '*', redirect: { name: '404' }} |
||||
|
]) |
||||
|
// console.log('----------------------')
|
||||
|
window.SITE_CONFIG['dynamicMenuRoutes'] = routes |
||||
|
window.SITE_CONFIG['dynamicMenuRoutesHasAdded'] = true |
||||
|
} |
||||
|
} |
||||
|
export default router |
||||
@ -0,0 +1,56 @@ |
|||||
|
<template> |
||||
|
<div class="subjectManagement"> |
||||
|
<el-container style=""> |
||||
|
<el-aside width="200px" style="background-color: rgb(238, 241, 246)"> |
||||
|
<el-menu :default-openeds="['1', '3']"> |
||||
|
|
||||
|
</el-menu> |
||||
|
</el-aside> |
||||
|
<el-container> |
||||
|
<el-header style="text-align: right; font-size: 12px"> |
||||
|
<el-dropdown> |
||||
|
<i class="el-icon-setting" style="margin-right: 15px" /> |
||||
|
<el-dropdown-menu slot="dropdown"> |
||||
|
<el-dropdown-item>查看</el-dropdown-item> |
||||
|
<el-dropdown-item>新增</el-dropdown-item> |
||||
|
<el-dropdown-item>删除</el-dropdown-item> |
||||
|
</el-dropdown-menu> |
||||
|
</el-dropdown> |
||||
|
<span>王小虎</span> |
||||
|
</el-header> |
||||
|
|
||||
|
<el-main> |
||||
|
<el-table :data="tableData"> |
||||
|
<el-table-column prop="date" label="日期" width="140" /> |
||||
|
<el-table-column prop="name" label="姓名" width="120" /> |
||||
|
<el-table-column prop="address" label="地址" /> |
||||
|
</el-table> |
||||
|
</el-main> |
||||
|
</el-container> |
||||
|
</el-container> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
|
||||
|
export default { |
||||
|
components: { |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
}, |
||||
|
methods: { |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
.subjectManagement{ |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue