<template>
|
<el-container id="admin-layout">
|
<el-header style="height: 45px; padding: 0;" class="admin-layout-header">
|
<div style="display: flex; height: 45px; justify-content: space-between; align-items: center;">
|
<div>
|
<el-space wrap>
|
<el-popover width="300" style="max-height: 100%; overflow-y: scroll; " v-model:visible="menuPopVisible">
|
<template #reference>
|
<div>
|
<el-button type="primary" :icon="icon.Menu" size="default" style="height: 45px; width: 45px;"/>
|
</div>
|
</template>
|
<template #default>
|
<div>
|
<div style="display: flex;justify-content: space-between">
|
<div>
|
<el-switch v-model="collapsedmenudisplay" @change="showLeftMenu"
|
:active-text="$t('button.Open')"
|
:inactive-text="$t('button.Close')"/>
|
</div>
|
<div></div>
|
</div>
|
<el-divider :style="{ 'margin': '10px 0px' }"></el-divider>
|
<div>
|
<el-scrollbar height="600px">
|
<el-menu :collapse="false" background-color="transparent" default-active="0"
|
:style="{ 'border': '0px', 'min-height': '200px', 'width': '100%' }"
|
:unique-opened="false">
|
<el-menu-item @click="showHome()" :index="'0'">
|
<template #title>
|
<svg-icon width="18" height="18" name="workbench" color=""></svg-icon>
|
<b style="font-family: FangSong bold; margin-left: 5px; overflow: hidden">
|
{{ $t('menu.Workbench') }}
|
</b>
|
</template>
|
</el-menu-item>
|
<el-sub-menu :index="i + 1 + ''" v-for="(item, i) in routes">
|
<template #title>
|
<svg-icon width="18" height="18" :name="item.meta.icon" color=""></svg-icon>
|
<b style="font-family: FangSong bold; margin-left: 5px; overflow: hidden">
|
{{ $t('menu.' + item.meta.languagekey) }}
|
</b>
|
</template>
|
<el-menu-item :index="i + 1 + (j * 100) + ''" v-for="(child, j) in item.children"
|
@click="handleMenuOpen(child.name)">
|
<template #title>
|
<svg-icon width="18" height="18" :name="child.meta.icon" color=""></svg-icon>
|
<span style="font-family: FangSong bold; margin-left: 5px; overflow: hidden">{{
|
$t('menu.' + child.meta.languagekey)
|
}}</span>
|
</template>
|
</el-menu-item>
|
</el-sub-menu>
|
</el-menu>
|
</el-scrollbar>
|
</div>
|
<el-divider :style="{ 'margin': '30px 0px' }">
|
<el-button link size="default" type="primary" :icon="icon.ArrowUpBold"
|
@click="menuPopVisible = !menuPopVisible">
|
{{ $t('button.Close') }}
|
</el-button>
|
</el-divider>
|
</div>
|
</template>
|
</el-popover>
|
<el-popover width="*" style="max-height: 600px; overflow-y: scroll; "
|
v-model:visible="applicationPopVisible">
|
<template #reference>
|
<div>
|
<p class="text-overflow">
|
<el-link type="primary" style="overflow: hidden">
|
<b style="color: white; margin-right: 5px;">{{ $t('title') }}</b>
|
<el-button :icon="icon.ArrowDown" type="primary" size="small" circle/>
|
</el-link>
|
</p>
|
</div>
|
</template>
|
<template #default>
|
<div>
|
<div style="display: flex;justify-content: space-between">
|
<div>
|
<b style="margin-right: 20px">{{ $t('label.Applications') }}</b>
|
</div>
|
<div>
|
</div>
|
</div>
|
<el-divider :style="{ 'margin': '10px 0px' }"></el-divider>
|
<div>
|
<el-row v-if="applicationLinks.length > 0">
|
<el-col :span="24" style="padding: 20px;">
|
<AppMenuButton v-for="(item, i) in applicationLinks" :index="i + 1 + ''" :item="item"
|
style="margin: 5px;" height="80px" color="" width="100px"/>
|
</el-col>
|
</el-row>
|
<el-empty v-else :image-size="50" :description="$t('message.NoData')"/>
|
</div>
|
<el-divider :style="{ 'margin': '30px 0px' }">
|
<el-button link size="default" type="primary" :icon="icon.ArrowUpBold"
|
@click="applicationPopVisible = !applicationPopVisible">
|
{{ $t('button.Close') }}
|
</el-button>
|
</el-divider>
|
</div>
|
</template>
|
</el-popover>
|
</el-space>
|
</div>
|
<div>
|
<el-space wrap>
|
<el-popover :width="500" style="max-height: 600px; overflow-y: scroll; ">
|
<template #reference>
|
<div>
|
<el-badge v-if="tasks.length > 0" type="danger" :value="tasks.length" :max="99">
|
<el-button type="primary" circle :icon="icon.List"/>
|
</el-badge>
|
<el-button v-else type="primary" circle :icon="icon.List"/>
|
</div>
|
</template>
|
<template #default>
|
<div style="background-color: white;">
|
<div style="display: flex;justify-content: space-between">
|
<div>
|
<b style="margin-right: 20px">{{ $t('label.MyTask') }}</b>
|
</div>
|
<div>
|
</div>
|
</div>
|
<el-divider :style="{ 'margin': '10px 0px' }"></el-divider>
|
<div>
|
<el-row v-if="tasks.length > 0" v-for="item in tasks" :key="item.id">
|
<el-col :span="24">
|
<div style="margin: 10px;">
|
<el-alert title="Info alert" type="info" description="More text description" show-icon>
|
<template #title>
|
<div>
|
{{ item.title }}
|
</div>
|
</template>
|
<template #default>
|
<div>
|
{{ item.startdatetime }}-{{ item.enddatetime }}
|
</div>
|
</template>
|
</el-alert>
|
</div>
|
</el-col>
|
</el-row>
|
<el-empty v-else :image-size="50" :description="$t('message.NoData')"/>
|
<MenuButton style="margin: 5px;" height="80px" color="" width="100%"
|
:item="taskCenterLink"/>
|
</div>
|
</div>
|
</template>
|
</el-popover>
|
<el-popover :width="500">
|
<template #reference>
|
<div>
|
<el-badge v-if="notifications.length > 0" type="danger" :value="notifications.length" :max="99">
|
<el-button type="primary" circle :icon="icon.BellFilled"/>
|
</el-badge>
|
<el-button v-else type="primary" circle :icon="icon.BellFilled"/>
|
</div>
|
</template>
|
<template #default>
|
<div style="background-color: white; ">
|
<div style="display: flex;justify-content: space-between">
|
<div>
|
<b style="margin-right: 20px">{{ $t('label.MyNotification') }}</b>
|
</div>
|
<div>
|
<el-button link size="default" type="primary" :icon="icon.Close">
|
{{ $t('button.Clear') }}
|
</el-button>
|
</div>
|
</div>
|
<el-divider :style="{ 'margin': '10px 0px' }"></el-divider>
|
<div style="max-height: 1000px; overflow-y: auto; overflow-x: hidden; ">
|
<div class="notification-list-item" v-if="notifications.length > 0" v-for="item in notifications"
|
:key="item.id">
|
<el-card style="margin: 0px">
|
<template #header>
|
<b>{{ item.title }}</b>
|
</template>
|
<template #default>
|
<p v-html="item.context" style="height: 100px; overflow: hidden;"/>
|
</template>
|
<template #footer>
|
<el-link type="primary" @click="dismissNotification(item)">
|
{{ $t('button.Dismiss') }}
|
<el-icon>
|
<Right/>
|
</el-icon>
|
</el-link>
|
</template>
|
</el-card>
|
</div>
|
<el-empty v-else :image-size="50" :description="$t('message.NoData')"/>
|
<MenuButton style="margin: 5px;" height="80px" color="" width="100%"
|
:item="notificationCenterLink"/>
|
</div>
|
</div>
|
</template>
|
</el-popover>
|
<el-dropdown @command="commandHandler">
|
<div v-if="user">
|
<el-link style=";color: white; margin-right: 5px" :underline="false">
|
<b>{{ user.name }}</b>
|
</el-link>
|
<el-link type="primary" :underline="false">
|
<svg-icon v-if="!user.userface" width="18" height="18" name="profile" color="#fff"></svg-icon>
|
<el-avatar v-else style="width: 25px; height: 25px" :src="user.userface"></el-avatar>
|
</el-link>
|
</div>
|
<el-skeleton v-else style="--el-skeleton-circle-size: 20px">
|
<template #template>
|
<el-skeleton-item variant="circle"/>
|
</template>
|
</el-skeleton>
|
<template #dropdown>
|
<el-dropdown-menu>
|
<el-dropdown-item command="profile" :icon="icon.User">
|
{{ $t('label.Profile') }}
|
</el-dropdown-item>
|
<el-dropdown-item command="logout" divided :icon="icon.SwitchButton">
|
{{ $t('button.SignOut') }}
|
</el-dropdown-item>
|
</el-dropdown-menu>
|
</template>
|
</el-dropdown>
|
</el-space>
|
</div>
|
</div>
|
</el-header>
|
<el-container class="admin-layout-container" v-if="routes&&routes.length>0">
|
<el-aside width="240px" v-if="collapsedmenudisplay">
|
<el-container>
|
<el-menu :collapse="false" background-color="transparent" default-active="0"
|
:style="{ 'border': '0px', 'min-height': '200px', 'width': '100%' }" :unique-opened="false">
|
<el-menu-item @click="showHome()" :index="'0'">
|
<template #title>
|
<svg-icon width="18" height="18" name="workbench" color=""></svg-icon>
|
<b style="font-family: FangSong bold; margin-left: 5px; overflow: hidden">
|
{{ $t('menu.Workbench') }}
|
</b>
|
</template>
|
</el-menu-item>
|
<el-sub-menu :index="i + 1 + ''" v-for="(item, i) in routes">
|
<template #title>
|
<svg-icon width="18" height="18" :name="item.meta.icon" color=""></svg-icon>
|
<b style="font-family: FangSong bold; margin-left: 5px; overflow: hidden">
|
{{ $t('menu.' + item.meta.languagekey) }}
|
</b>
|
</template>
|
<el-menu-item :index="i + 1 + (j * 100) + ''" v-for="(child, j) in item.children"
|
@click="handleMenuOpen(child.name)">
|
<template #title>
|
<svg-icon width="18" height="18" :name="child.meta.icon" color=""></svg-icon>
|
<span style="font-family: FangSong bold; margin-left: 5px; overflow: hidden">
|
{{ $t('menu.' + child.meta.languagekey) }}
|
</span>
|
</template>
|
</el-menu-item>
|
</el-sub-menu>
|
</el-menu>
|
</el-container>
|
</el-aside>
|
<el-container>
|
<el-header style="height: auto; padding: 0px 0px 0px 10px">
|
<el-tabs v-model="selectedTagValue" style="background-color: white; width: 100%;"
|
@tab-click="clickTab" @tab-remove="removeTab">
|
<el-tab-pane v-for="(item, index) in selectedTags" :closable="item.closable" :key="index"
|
:name="item.name" :lazy="true">
|
<template #label>
|
<div style="min-width: 100px;">
|
<p class="text-overflow">
|
<svg-icon width="18" height="18" :name="item.icon" color="" style="margin-top: -3px;"/>
|
<b style="margin-left: 5px; opacity:0.6; min-width: 80px;">
|
{{
|
item.languagekey && $t('menu.' + item.languagekey) ? $t('menu.' + item.languagekey) : item.languagekey
|
}}
|
</b>
|
</p>
|
</div>
|
</template>
|
</el-tab-pane>
|
</el-tabs>
|
</el-header>
|
<el-main class="admin-layout-container-context" style="padding: 0;overflow-y: auto;">
|
<router-view v-if="$route.meta.keepAlive === false"></router-view>
|
<router-view v-else :slot="selectedRouteComponent" class="admin-layout-container-context-routerview">
|
<keep-alive :max="10">
|
<component :is="selectedRouteComponent"></component>
|
</keep-alive>
|
</router-view>
|
</el-main>
|
</el-container>
|
</el-container>
|
<el-container class="admin-layout-container" v-else style="background-color: white;">
|
<div class="admin-layout-container-welcom">
|
<el-card v-loading="true" shadow="always" class="admin-layout-welcome">
|
<h3 class="admin-layout-title">{{ $t('message.WelcomeBack') }}</h3>
|
</el-card>
|
</div>
|
</el-container>
|
<el-footer class="admin-layout-footer" style="height: auto; bottom: 0px">
|
<div class="admin-layout-footer-context">
|
<p>{{ $t('copyright', {name: currentyear}) }}</p>
|
</div>
|
</el-footer>
|
<div v-dialogdrag>
|
<el-dialog id="detailDialog" v-model="iframe_dialogVisible" :close-on-click-modal="false"
|
class="el-dialog-customer" :width="iframe_dialogWidth" top="10" :before-close="closeIframeDialog">
|
<template #header>
|
<div>
|
<div style="display: flex;justify-content: space-between">
|
<div>
|
<el-icon style="font:normal bold 20px arial,sans-serif;vertical-align: -10%">
|
<Connection/>
|
</el-icon>
|
<span style="margin-left: 10px; font:normal bold 20px arial,serif;">{{ iframe_title }}</span>
|
</div>
|
<div>
|
<el-button @click="refreshIframeClick" :icon="icon.Refresh" size="small"
|
style="margin-right: 10px; background-color: white; color: var(--el-color-primary);margin-top: 2px;"
|
type="primary" circle/>
|
<el-button @click="fullScreenIframeClick" :icon="icon.FullScreen" size="small"
|
style="margin-right: 50px; background-color: white; color: var(--el-color-primary);margin-top: 2px;"
|
type="primary" circle/>
|
</div>
|
</div>
|
</div>
|
</template>
|
<el-card style="overflow: hidden;" v-loading="iframe_loading">
|
<iframe ref="iframeRef" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"
|
@load="iframeLoaded" :src="iframe_url" :style="iframe_style" scrolling="auto" frameborder="0"
|
id="iframe">
|
</iframe>
|
</el-card>
|
</el-dialog>
|
</div>
|
</el-container>
|
</template>
|
|
<script>
|
import Workbench from './Workbench.vue'
|
import UserProfile from './UserProfile.vue'
|
import * as icon from '@element-plus/icons-vue'
|
import {
|
onBeforeMount,
|
onMounted,
|
onBeforeUnmount,
|
getCurrentInstance,
|
reactive,
|
toRefs,
|
watch,
|
nextTick,
|
shallowRef, onActivated
|
} from "vue";
|
import {GetNotificationList, GetTaskList} from "@/api/admin/ifc";
|
import {doLoginOut, GetUserApplications} from "@/api/admin/security";
|
import Cookies from "js-cookie";
|
import * as elementplus from "element-plus";
|
import {routerIndex, getRouter} from "@/router/routeList"
|
import {useBasicInfoStore} from "@/store/basicInfo";
|
import AppMenuButton from "@/components/common/AppMenuButton.vue";
|
import MenuButton from "@/components/common/MenuButton.vue";
|
|
export default {
|
name: '_LayoutAdmin',
|
components: {AppMenuButton, MenuButton},
|
setup() {
|
let {proxy} = getCurrentInstance();
|
const selectedRoute = reactive({
|
target: null,
|
});
|
const store = useBasicInfoStore();
|
const state = reactive({
|
currentyear: '',
|
ifcDomain: WGURL.ifcDomain,
|
staticDomain: WGURL.staticDomain,
|
windowWidth: document.documentElement.clientWidth,
|
windowHeight: document.documentElement.clientHeight,
|
routes: JSON.parse(localStorage.getItem(`${WGURL.routeKey}-routes`)),
|
user: null,
|
collapsedmenudisplay: false,
|
selectedRouteComponent: shallowRef(Workbench),
|
filter: '',
|
selectedTagValue: 'Workbench',
|
selectedTags: [],
|
applicationLinks: [],
|
notifications: [],
|
tasks: [],
|
defaultActive: "0",
|
menuList: [],
|
menuVisible: true,
|
menuPopVisible: false,
|
applicationPopVisible: false,
|
taskCenterLink: {
|
icon: 'dispatch_task',
|
name: '任务中心',
|
type: 'link',
|
text: proxy.$t('label.ViewAllTasks'),
|
link: `${WGURL.ifcDomain}/client/center/task`,
|
},
|
notificationCenterLink: {
|
icon: 'dispatch_notification',
|
name: '消息通知中心',
|
type: 'link',
|
text: proxy.$t('label.ViewAllNotifications'),
|
link: `${WGURL.ifcDomain}/client/center/notification`,
|
},
|
});
|
let timer = null;
|
|
onBeforeMount(() => {
|
//解决退出后菜单缓存问题
|
let router = localStorage.getItem(`${WGURL.routeKey}-routes`);
|
if (!router)
|
window.history.go(0);
|
});
|
onMounted(() => {
|
Init();
|
LoadData();
|
timer = setInterval(() => {
|
if (!state.routes || state.routes.length <= 0) {
|
state.routes = JSON.parse(localStorage.getItem(`${WGURL.routeKey}-routes`));
|
} else {
|
if (timer)
|
clearTimeout(timer);
|
}
|
}, 3000);
|
});
|
onBeforeUnmount(() => {
|
|
});
|
onActivated(() => {
|
Init();
|
LoadData();
|
});
|
|
state.defaultActive = routerIndex(proxy.$route.path) + state.routes.length;
|
|
const Init = () => {
|
let date = new Date();
|
state.currentyear = date.getFullYear();
|
|
if (store.$state.user && store.$state.user.employee) {
|
state.user = store.$state.user.employee;
|
} else {
|
state.user = store.$state.user;
|
}
|
|
if (localStorage.getItem("left-menu-collapse") != null) {
|
let lmc = localStorage.getItem("left-menu-collapse");
|
if (lmc === 'false')
|
state.collapsedmenudisplay = false;
|
else
|
state.collapsedmenudisplay = true;
|
}
|
|
let routeArr = []
|
for (let i = 0; i < state.routes.length; i++) {
|
for (let j = 0; j < state.routes[i].children.length; j++) {
|
routeArr.push(state.routes[i].children[j].path)
|
}
|
}
|
state.menuList = routeArr;
|
}
|
|
const LoadData = () => {
|
let stags = store.$state.tags;
|
state.selectedTags = stags;
|
let p = getRouter(proxy.$route.path) ? getRouter(proxy.$route.path) : proxy.$route.path
|
let tagSel = proxy.$router.getRoutes().filter(e => e.path == p)
|
let tag = stags.filter(e => e.name == tagSel[0].name)
|
if (tag && tag.length > 0) {
|
state.selectedTagValue = tagSel[0].name
|
proxy.$router.replace(p);//tagSel[0].path
|
}
|
|
LoadApplicationLinks();
|
LoadNotifications();
|
LoadTasks();
|
}
|
const LoadApplicationLinks = () => {
|
state.loading = true
|
|
let userid = localStorage.getItem('userid');
|
GetUserApplications(userid).then(resp => {
|
state.loading = false
|
if (resp.data && resp.data.data) {
|
resp.data.data.map(e => {
|
state.applicationLinks.push({
|
id: e.id,
|
icon: e.icon ? e.icon : "application",
|
name: e.name,
|
type: "link",
|
text: e.name,
|
languagekey: e.name,
|
code: e.code,
|
link: e.url,
|
});
|
});
|
}
|
}).catch(err => {
|
console.error(err)
|
})
|
}
|
const LoadNotifications = () => {
|
state.loading = true
|
|
let userid = localStorage.getItem('userid');
|
GetNotificationList(userid).then(resp => {
|
state.loading = false
|
if (resp.data && resp.data.data) {
|
state.notifications = resp.data.data;
|
state.total = resp.data.total;
|
}
|
}).catch(err => {
|
console.error(err)
|
})
|
}
|
|
const LoadTasks = () => {
|
state.loading = true
|
|
let userid = localStorage.getItem('userid');
|
GetTaskList(userid).then(resp => {
|
state.loading = false
|
if (resp.data && resp.data.data) {
|
state.tasks = resp.data.data;
|
state.total = resp.data.total;
|
}
|
}).catch(err => {
|
console.error(err)
|
})
|
}
|
|
const handleMenuOpen = (key) => {
|
if (store.$state.tags.length > store.$state.tagUpperLimit) {
|
elementplus.ElMessageBox.alert(
|
`${proxy.$t('message.TagQuantityReachedUpperLimit')}`,
|
'',
|
{
|
confirmButtonText: 'OK',
|
type: 'warning',
|
}
|
);
|
|
return;
|
}
|
|
let routes = proxy.$router.getRoutes();
|
|
selectedRoute.target = routes.filter(r => r.name === key)[0];
|
proxy.$router.replace(selectedRoute.target.path);
|
addTag(key, selectedRoute.target);
|
}
|
const clickTab = (tag) => {
|
let routes = proxy.$router.getRoutes();
|
selectedRoute.target = routes.filter(r => r.name === tag.props.name)[0];
|
state.defaultActive = (routerIndex(selectedRoute.target.path) + state.routes.length) + ""//切换menu显示
|
state.menuVisible = false
|
nextTick(function () {
|
state.menuVisible = true
|
})
|
proxy.$router.replace(selectedRoute.target.path);
|
}
|
const addTag = (key, target) => {
|
let stags = state.selectedTags.filter(tab => tab.name === key);
|
|
if (stags === [] || stags.length <= 0) {
|
state.selectedTags.push({
|
name: key,
|
languagekey: target.meta.languagekey,
|
closable: true,
|
icon: target.meta.icon,
|
path: target.path
|
});
|
}
|
state.selectedTagValue = key;
|
store.$state.tags = state.selectedTags
|
}
|
const removeTab = (targetName) => {
|
let activeName = state.selectedTagValue;
|
if (activeName === targetName) {
|
state.selectedTags.forEach((tab, index) => {
|
if (tab.name === targetName) {
|
let nextTab = state.selectedTags[index + 1] || state.selectedTags[index - 1];
|
if (nextTab) {
|
activeName = nextTab.name;
|
}
|
}
|
});
|
}
|
|
state.selectedTagsValue = activeName;
|
state.selectedTags = state.selectedTags.filter(tab => tab.name !== targetName);
|
store.$state.tags = state.selectedTags;
|
|
handleMenuOpen(activeName);
|
}
|
const showLeftMenu = (data) => {
|
localStorage.setItem('left-menu-collapse', data);
|
}
|
const dismissNotification = (data) => {
|
state.notifications = state.notifications.filter(e => e.id != data.id);
|
}
|
const refreshPage = () => {
|
proxy.$router.go(0);
|
}
|
const showHome = () => {
|
proxy.$router.push('/admin/workbench')
|
}
|
const commandHandler = (cmd) => {
|
if (cmd === 'logout') {
|
proxy.$confirm(`${proxy.$t('message.AreYouSureToSignOut')}`, `${proxy.$t('label.SystemConfirm')}`, {
|
confirmButtonText: `${proxy.$t('button.Yes')}`,
|
cancelButtonText: `${proxy.$t('button.No')}`,
|
confirmButtonClass: 'confirmButtonClass',
|
cancelButtonClass: 'cancelButtonClass',
|
type: 'warning',
|
center: true,
|
}).then(() => {
|
let userid = Cookies.get('userid', {domain: WGURL.cookieDomain});
|
doLoginOut(userid).then((resp) => {
|
store.removeSessionData();
|
|
if (WGURL.UseSSO) {
|
window.history.go(0);
|
}
|
});
|
|
setTimeout(2000);
|
|
if (!WGURL.UseSSO) {
|
proxy.$router.replace('/admin/login');
|
}
|
}).catch((error) => {
|
console.error(error)
|
})
|
} else if (cmd === 'profile') {
|
let key = 'AdminProfile';
|
state.selectedRouteComponent = UserProfile;
|
handleMenuOpen(key);
|
}
|
}
|
|
const iframeLoaded = () => {
|
store.$state.iframe_loading = false;
|
}
|
const closeIframeDialog = () => {
|
store.$state.iframe_url = null;
|
store.$state.iframe_dialogVisible = false;
|
}
|
const fullScreenIframeClick = () => {
|
store.$state.iframe_fullscreen = !store.$state.iframe_fullscreen;
|
if (store.$state.iframe_fullscreen) {
|
store.$state.iframe_style = "width: 100%; height: calc(100vh - 120px);";
|
store.$state.iframe_dialogWidth = "100%";
|
} else {
|
store.$state.iframe_style = "width: 100%; height: 60vh;";
|
store.$state.iframe_dialogWidth = "80%";
|
}
|
}
|
const refreshIframeClick = () => {
|
proxy.$refs.iframeRef.src = store.$state.iframe_url;
|
}
|
|
watch(() => proxy.$router.currentRoute, (newValue, oldValue) => {
|
let matched = proxy.$router.currentRoute.value.matched;
|
let current = proxy.$router.currentRoute;
|
let matchedRoutes = matched.filter(r => r.path === current.value.path);
|
let defaultComponent = matchedRoutes[0].components.default;
|
|
let cu = store.$state.tags.filter(e => e.path === current.value.path).shift();
|
if (cu) {
|
state.selectedTagValue = cu.name;
|
}
|
|
state.selectedRouteComponent = shallowRef(defaultComponent);
|
}, {immediate: true, deep: true});
|
|
return {
|
...toRefs(state),
|
handleMenuOpen,
|
addTag,
|
clickTab,
|
removeTab,
|
showLeftMenu,
|
refreshPage,
|
dismissNotification,
|
showHome,
|
commandHandler,
|
iframeLoaded,
|
closeIframeDialog,
|
fullScreenIframeClick,
|
refreshIframeClick,
|
icon,
|
}
|
},
|
computed: {
|
iframe_url() {
|
const store = useBasicInfoStore();
|
|
return store.$state.iframe_url;
|
},
|
iframe_style() {
|
const store = useBasicInfoStore();
|
|
return store.$state.iframe_style;
|
},
|
iframe_title() {
|
const store = useBasicInfoStore();
|
|
return store.$state.iframe_title;
|
},
|
iframe_loading() {
|
const store = useBasicInfoStore();
|
|
return store.$state.iframe_loading;
|
},
|
iframe_dialogVisible() {
|
const store = useBasicInfoStore();
|
|
return store.$state.iframe_dialogVisible;
|
},
|
iframe_dialogWidth() {
|
const store = useBasicInfoStore();
|
|
return store.$state.iframe_dialogWidth;
|
},
|
},
|
}
|
</script>
|
|
<style lang="scss">
|
.notification-list-item {
|
border: 1px solid;
|
border-image: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, var(--el-color-primary-light-6) 0%, rgba(255, 255, 255, 0) 100%) 2 2 2 2;
|
float: left;
|
text-align: left;
|
margin: 5px 0px;
|
width: 98%;
|
}
|
|
.demo-tabs {
|
margin: 0px 0px 0px 1px;
|
padding: 0px;
|
background-color: #f4f5f7;
|
color: #6b778c;
|
}
|
|
.demo-tabs .el-tabs__header {
|
margin-bottom: 0px;
|
}
|
|
#admin-layout {
|
background-color: #f5f4f4;
|
margin: 0;
|
padding: 0;
|
width: 100%;
|
color: #5e7cac;
|
top: 0px;
|
bottom: 0px;
|
height: 100%;
|
}
|
|
.admin-layout-header {
|
border-bottom: 1px solid #f5f4f4;
|
background-image: linear-gradient(45deg, var(--el-color-primary-light-5) 40%, var(--el-color-primary) 30%, var(--el-color-primary-light-1) 65%);;
|
background-color: var(--el-color-white);
|
}
|
|
.admin-layout-container {
|
width: 100%;
|
height: calc(100% - 45px);
|
}
|
|
.el-aside {
|
background-color: #ffffff;
|
margin-right: 1px;
|
}
|
|
.el-aside::-webkit-scrollbar {
|
/*滚动条整体样式*/
|
width: 0px;
|
/*高宽分别对应横竖滚动条的尺寸*/
|
height: 1px;
|
}
|
|
.el-aside::-webkit-scrollbar-thumb {
|
/*滚动条里面小方块*/
|
border-radius: 10px;
|
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
background: #C0C0C0;
|
}
|
|
.el-aside::-webkit-scrollbar-track {
|
/*滚动条里面轨道*/
|
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
border-radius: 10px;
|
background: transparent;
|
}
|
|
.admin-layout-container-left-menu {
|
width: 240px;
|
height: 100%;
|
overflow-x: hidden;
|
font-family: bolder;
|
background-color: transparent;
|
}
|
|
.admin-layout-container-context {
|
background: #f5f4f4;
|
width: 100%;
|
height: calc(100% - 45px);
|
border: 0px solid #eee;
|
//position: absolute;
|
//top: 0;
|
bottom: 0;
|
left: 0;
|
right: 0;
|
margin: auto;
|
overflow: auto;
|
}
|
|
.admin-layout-container-context::-webkit-scrollbar {
|
/*滚动条整体样式*/
|
width: 5px;
|
/*高宽分别对应横竖滚动条的尺寸*/
|
height: 1px;
|
}
|
|
.admin-layout-container-context::-webkit-scrollbar-thumb {
|
/*滚动条里面小方块*/
|
border-radius: 10px;
|
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
background: #C0C0C0;
|
}
|
|
.admin-layout-container-context::-webkit-scrollbar-track {
|
/*滚动条里面轨道*/
|
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
border-radius: 10px;
|
background: transparent;
|
}
|
|
.admin-layout-container-context-breadcrumb {
|
width: 100%;
|
}
|
|
.admin-layout-container-context-routerview {
|
width: 100%;
|
background: #f5f4f4;
|
margin: 0px;
|
}
|
|
.admin-layout-container-left-user img {
|
width: 130px;
|
height: 80px;
|
border-radius: 100%;
|
margin-top: 20px;
|
}
|
|
.admin-layout-container-left-user {
|
/*display: flex;*/
|
align-items: center;
|
color: white;
|
font-size: 16px;
|
height: 80px;
|
width: 80px;
|
}
|
|
.admin-layout-footer {
|
/*background-image: linear-gradient(110deg, #04A8FB 1%, #871faf 100%);*/
|
background-color: white;
|
color: black;
|
display: flex;
|
align-items: center;
|
horiz-align: left;
|
justify-content: space-between;
|
padding: 0px 0px;
|
box-sizing: border-box;
|
}
|
|
.admin-layout-footer-context {
|
width: 100%;
|
height: 100%;
|
text-align: center;
|
align-items: center;
|
vertical-align: bottom;
|
color: black;
|
font-size: 12px;
|
}
|
|
.el-button {
|
border-color: transparent;
|
}
|
|
.el-menu .el-menu-item {
|
color: #888
|
}
|
|
.el-menu .el-sub-menu__title {
|
color: #888
|
}
|
|
.el-drawer .el-drawer__title {
|
font-family: bolder;
|
font-size: 16px;
|
}
|
|
.admin-layout-container-welcom {
|
font-family: 'Avenir', Helvetica, Arial, sans-serif;
|
-webkit-font-smoothing: antialiased;
|
-moz-osx-font-smoothing: grayscale;
|
color: #2c3e50;
|
margin: 0px 0px;
|
padding: 10px;
|
height: 100%;
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
background-attachment: fixed;
|
background-position: center;
|
}
|
|
.admin-layout-container-layoutform {
|
height: auto;
|
width: 300px;
|
position: fixed;
|
top: 30%;
|
right: 0;
|
left: 0;
|
margin: auto;
|
border-radius: 15px;
|
background-clip: padding-box;
|
padding: 15px 35px 15px 35px;
|
background: rgba(255, 255, 255, 0.8);;
|
border: 1px solid #eaeaea;
|
text-align: left;
|
}
|
|
.admin-layout-welcome {
|
height: 50%;
|
width: 50%;
|
position: fixed;
|
top: 0;
|
right: 0;
|
bottom: 0;
|
left: 0;
|
margin: auto;
|
border-radius: 15px;
|
background-clip: padding-box;
|
padding: 15px 35px 15px 35px;
|
background: rgba(255, 255, 255, 0.8);;
|
border: 1px solid #eaeaea;
|
text-align: center;
|
}
|
|
</style>
|
