You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
396 lines
9.1 KiB
Vue
396 lines
9.1 KiB
Vue
<template>
|
|
<div>
|
|
<el-container class="content">
|
|
<el-header>
|
|
<el-row>
|
|
<el-col :span="3" class="logo" style="min-width: 250px;">
|
|
<div><img :src="configInfo.站点图片" /></div>
|
|
<div>
|
|
<div style="font-size: 16px;">秦皇岛市中医医院</div>
|
|
<div>{{configInfo.站点名称}}</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="3">
|
|
<el-icon size="30" color="#5f5f5f" class="offOn" v-if="isCollapse==true"
|
|
@click="isCollapse=false">
|
|
<Expand />
|
|
</el-icon>
|
|
<el-icon size="30" color="#5f5f5f" class="offOn" v-if="isCollapse==false"
|
|
@click="isCollapse=true">
|
|
<Fold />
|
|
</el-icon>
|
|
</el-col>
|
|
<el-col :offset="7" :span="10" class="top_right">
|
|
<div>
|
|
<el-switch v-model="isDark" inline-prompt active-color="var(--el-fill-color-dark)"
|
|
inactive-color="var(--el-color-primary)" active-action-icon="Moon"
|
|
inactive-action-icon="Sunny" @change="toggleDark" />
|
|
</div>
|
|
<div>
|
|
|
|
<div class="top_user">
|
|
<div style="margin-top: 7px;">
|
|
<el-avatar :size="40" :src="BaseUserInfo.img" />
|
|
</div>
|
|
<div v-if="BaseUserInfo.cn_name">
|
|
<el-dropdown v-if="BaseUserInfo.department_id && BaseUserInfo.department_info?.length > 1" @command="DepartmentHandleCommand">
|
|
<span class="el-dropdown-link">
|
|
{{BaseUserInfo.department_name}}
|
|
<el-icon class="el-icon--right">
|
|
<arrow-down />
|
|
</el-icon>
|
|
</span>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item
|
|
v-for="(d_item,d_index) in BaseUserInfo.department_info"
|
|
:key="d_index" :command="d_item.id">
|
|
{{d_item.department_name}}
|
|
</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
<div v-else-if="BaseUserInfo.department_id && BaseUserInfo.department_info?.length === 1"
|
|
style="font-size: 14px; margin-bottom: 4px; text-align: center;">
|
|
{{BaseUserInfo.department_info[0].department_name}}
|
|
</div>
|
|
<el-popover placement="bottom" :width="150" trigger="hover">
|
|
<template #reference>
|
|
<div style="font-size: 14px;">{{BaseUserInfo.cn_name}}</div>
|
|
</template>
|
|
<div style="display: flex; cursor: pointer;" @click="to('login')">
|
|
<div style="margin-top: 2px;margin-right: 5px;"><el-icon>
|
|
<SwitchButton />
|
|
</el-icon> </div>
|
|
<div> 退出</div>
|
|
</div>
|
|
</el-popover>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</el-col>
|
|
|
|
</el-row>
|
|
</el-header>
|
|
<el-container>
|
|
<el-aside>
|
|
<el-menu class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
|
|
:default-active="activeMenu" :collapse="isCollapse">
|
|
<el-menu-item index="2-222" @click="to('dashboard')" style="display: none;">
|
|
<el-icon>
|
|
<Menu />
|
|
</el-icon>
|
|
<span>面板</span>
|
|
</el-menu-item>
|
|
<el-sub-menu v-for="(item,i) in menuFuList" :key="i" :index="item.url+i+''">
|
|
<template #title>
|
|
<el-icon>
|
|
<component :is="item.icon"></component>
|
|
</el-icon>
|
|
<span>{{item.name}}</span>
|
|
</template>
|
|
<el-menu-item v-for="(item2,i2) in item.zi" :key="i2" :index="'/'+item2.url"
|
|
@click="to(item2.url)">
|
|
<el-icon>
|
|
<component :is="item2.icon"></component>
|
|
</el-icon>
|
|
<span>{{item2.name}}</span>
|
|
</el-menu-item>
|
|
|
|
</el-sub-menu>
|
|
<el-menu-item index="2-222" @click="to('adminChangPwd')">
|
|
<el-icon>
|
|
<UserFilled />
|
|
</el-icon>
|
|
<span>个人中心</span>
|
|
</el-menu-item>
|
|
<!-- <el-menu-item index="3" disabled>
|
|
<el-icon>
|
|
<document />
|
|
</el-icon>
|
|
<span>Navigator Three</span>
|
|
</el-menu-item>
|
|
<el-menu-item index="4">
|
|
<el-icon>
|
|
<setting />
|
|
</el-icon>
|
|
<span>Navigator Four</span>
|
|
</el-menu-item> -->
|
|
</el-menu>
|
|
</el-aside>
|
|
<el-main>
|
|
<div class="out_k">
|
|
<div class="cout_k_title">{{$route.meta['title']}}</div>
|
|
<RouterView />
|
|
</div>
|
|
|
|
</el-main>
|
|
</el-container>
|
|
</el-container>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref,
|
|
onMounted,
|
|
watch
|
|
} from 'vue';
|
|
import {
|
|
usePinia
|
|
} from '@/stores/index.js'
|
|
import {
|
|
GetAdminBaseMenuList,
|
|
GetBaseAdminUserInfo,
|
|
GetConfigInfo,ChangeDefaultDept
|
|
} from '@/api/api.js'
|
|
import {
|
|
useToggle
|
|
} from '@vueuse/shared'
|
|
import {
|
|
useDark
|
|
} from "@vueuse/core";
|
|
import userjpg from '@/assets/user.jpg'
|
|
|
|
import {
|
|
useRoute,
|
|
useRouter
|
|
} from "vue-router"
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
|
|
const pinia = usePinia()
|
|
|
|
watch(() => router.currentRoute.value, (newVal, oldVal) => {
|
|
|
|
activeMenu.value = newVal.path
|
|
console.log(activeMenu.value)
|
|
})
|
|
|
|
|
|
const isDark = useDark()
|
|
const toggleDark = () => useToggle(isDark)
|
|
|
|
|
|
let menuFuList = ref([])
|
|
let isCollapse = ref(false)
|
|
const handleOpen = (key, keyPath) => {
|
|
console.log(key, keyPath)
|
|
}
|
|
const handleClose = (key, keyPath) => {
|
|
console.log(key, keyPath)
|
|
}
|
|
|
|
const to = (url) => {
|
|
if (url == 'login') {
|
|
sessionStorage.clear()
|
|
}
|
|
console.log(url)
|
|
activeMenu.value = url
|
|
window.location.href = "./#/" + url
|
|
}
|
|
const menuList = () => { //获取菜单列表
|
|
GetAdminBaseMenuList().then(res => {
|
|
var fulist = []
|
|
var zilist = []
|
|
var i = 0
|
|
var menulist = res.list
|
|
|
|
menulist.forEach((item, index) => {
|
|
if (item.pid == '' || item.pid == null) {
|
|
fulist.push(item)
|
|
menulist.forEach((item2, index2) => {
|
|
if (item2.pid == item.id) {
|
|
zilist.push(item2)
|
|
}
|
|
})
|
|
fulist[i].zi = zilist
|
|
zilist = []
|
|
i++
|
|
}
|
|
})
|
|
menuFuList.value = fulist
|
|
console.log(menuFuList.value)
|
|
|
|
})
|
|
}
|
|
let BaseUserInfo = ref({
|
|
|
|
})
|
|
const getBaseAdminUserInfo = () => {
|
|
GetBaseAdminUserInfo().then(res => {
|
|
pinia.baseInfoStatusChange(true)
|
|
BaseUserInfo.value = res.info[0]
|
|
sessionStorage.setItem('LoginUserInfo', JSON.stringify(res.info[0]))
|
|
BaseUserInfo.value.img = import.meta.env.VITE_APP_FILE + BaseUserInfo.value.img
|
|
let BingQu = [2]; //跳转住院主工作列表
|
|
let QiTa = [3,6,7]; //跳转普通主工作列表
|
|
let Guanli = [1, 5]; //管理员
|
|
if (QiTa.includes(res.info[0].group) && route.path == '/dashboard') {
|
|
window.location.href = "./#/yewu/mainList"
|
|
}
|
|
if (BingQu.includes(res.info[0].group) && route.path == '/dashboard') {
|
|
window.location.href = "./#/yewu/MainList_ZhuYuan"
|
|
}
|
|
if (Guanli.includes(res.info[0].group) && route.path == '/dashboard') {
|
|
window.location.href = "./#/yewu/departmentResources"
|
|
}
|
|
})
|
|
}
|
|
let configInfo = ref('');
|
|
const GetConfig = () => {
|
|
GetConfigInfo().then(res => {
|
|
if (res.status) {
|
|
configInfo.value = res.data
|
|
configInfo.value.站点图片 = import.meta.env.VITE_APP_FILE + configInfo.value.站点图片
|
|
}
|
|
})
|
|
}
|
|
|
|
const DepartmentHandleCommand = (e) => {
|
|
ChangeDefaultDept({deptid:e}).then(res => {
|
|
if (res.status) {
|
|
sessionStorage.setItem('token', res.data.token);
|
|
sessionStorage.setItem('refreshToken', res.data.refresh_token);
|
|
setTimeout(()=>{
|
|
window.location.hash = "#/dashboard";
|
|
window.location.reload();
|
|
},300)
|
|
|
|
}else{
|
|
ElMessage.error(res.msg)
|
|
}
|
|
})
|
|
}
|
|
|
|
let activeMenu = ref('');
|
|
onMounted(() => {
|
|
getBaseAdminUserInfo()
|
|
menuList()
|
|
GetConfig()
|
|
|
|
activeMenu.value = router.currentRoute.value.path
|
|
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.content {
|
|
/* border: 1px solid red; */
|
|
height: 100vh;
|
|
}
|
|
|
|
.el-header {
|
|
/* line-height: 60px; */
|
|
border-bottom: 1px solid var(--color-border1);
|
|
overflow: hidden;
|
|
background-color: var(--color-background2);
|
|
|
|
|
|
}
|
|
|
|
.el-header .el-row {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 100%;
|
|
}
|
|
|
|
.el-header .el-col {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.el-aside {
|
|
height: 100%;
|
|
border-right: 1px solid var(--color-border1);
|
|
width: auto;
|
|
background-color: var(--color-background2);
|
|
}
|
|
|
|
.el-main {
|
|
padding: 30px 20px 2px 20px;
|
|
background-color: var(--color-background);
|
|
}
|
|
|
|
.out_k {
|
|
border: 1px solid var(--color-border1);
|
|
/* height: 100%; */
|
|
position: relative;
|
|
padding: 20px;
|
|
background-color: var(--color-background2);
|
|
}
|
|
|
|
.cout_k_title {
|
|
margin-left: 20px;
|
|
padding: 0 10px;
|
|
font-size: 20px;
|
|
font-weight: 300;
|
|
position: absolute;
|
|
top: -17px;
|
|
left: 8px;
|
|
color: var(--color-text);
|
|
background-color: var(--color-background2);
|
|
|
|
}
|
|
|
|
.el-menu-vertical-demo:not(.el-menu--collapse) {
|
|
width: 250px;
|
|
|
|
}
|
|
|
|
.el-menu {
|
|
border-right: 0px;
|
|
}
|
|
|
|
.top_user {
|
|
display: flex;
|
|
cursor: pointer;
|
|
align-items: center;
|
|
}
|
|
|
|
.top_user div {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.top_right {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
padding-right: 20px;
|
|
}
|
|
|
|
.top_right div {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.offOn {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.offOn:hover {
|
|
color: #409eff;
|
|
}
|
|
|
|
.logo {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.logo img {
|
|
margin-top: 10px;
|
|
margin-right: 10px;
|
|
width: 40px;
|
|
}
|
|
</style>
|
|
<style>
|
|
.el-table th.el-table__cell {
|
|
|
|
background-color: var(--color-table-th-background);
|
|
|
|
}
|
|
</style> |