From 23f1bf22c42a904c05cee63e10c9fd8b60dfe8f5 Mon Sep 17 00:00:00 2001 From: Admin <978517621@qq.com> Date: 星期二, 20 九月 2022 14:54:56 +0800 Subject: [PATCH] Default Changelist --- src/layout/navBars/breadcrumb/user.vue | 335 ++++++++++++++++++++++++++++++++++++++----------------- 1 files changed, 231 insertions(+), 104 deletions(-) diff --git a/src/layout/navBars/breadcrumb/user.vue b/src/layout/navBars/breadcrumb/user.vue index 415e04e..b838098 100644 --- a/src/layout/navBars/breadcrumb/user.vue +++ b/src/layout/navBars/breadcrumb/user.vue @@ -1,74 +1,81 @@ <template> <div class="layout-navbars-breadcrumb-user pr15" :style="{ flex: layoutUserFlexNum }"> - <el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onComponentSizeChange"> - <div class="layout-navbars-breadcrumb-user-icon"> - <i class="iconfont icon-ziti" :title="$t('message.user.title0')"></i> - </div> - <template #dropdown> - <el-dropdown-menu> - <el-dropdown-item command="large" :disabled="disabledSize === 'large'">{{ $t('message.user.dropdownLarge') }}</el-dropdown-item> - <el-dropdown-item command="default" :disabled="disabledSize === 'default'">{{ $t('message.user.dropdownDefault') }}</el-dropdown-item> - <el-dropdown-item command="small" :disabled="disabledSize === 'small'">{{ $t('message.user.dropdownSmall') }}</el-dropdown-item> - </el-dropdown-menu> - </template> - </el-dropdown> - <el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onLanguageChange"> - <div class="layout-navbars-breadcrumb-user-icon"> - <i class="iconfont" :class="disabledI18n === 'en' ? 'icon-fuhao-yingwen' : 'icon-fuhao-zhongwen'" :title="$t('message.user.title1')"></i> - </div> - <template #dropdown> - <el-dropdown-menu> - <el-dropdown-item command="zh-cn" :disabled="disabledI18n === 'zh-cn'">简体中文</el-dropdown-item> - <el-dropdown-item command="en" :disabled="disabledI18n === 'en'">English</el-dropdown-item> - <el-dropdown-item command="zh-tw" :disabled="disabledI18n === 'zh-tw'">繁體中文</el-dropdown-item> - </el-dropdown-menu> - </template> - </el-dropdown> - <div class="layout-navbars-breadcrumb-user-icon" @click="onSearchClick"> - <el-icon :title="$t('message.user.title2')"> - <ele-Search /> - </el-icon> + <div class="logo"> + <img @click="toHome" src="../../../assets/menu/companyLogo.png" /> + <span>{{ systemName }}</span> </div> - <!-- <div class="layout-navbars-breadcrumb-user-icon" @click="onLayoutSetingClick">--> - <!-- <i class="icon-skin iconfont" :title="$t('message.user.title3')"></i>--> - <!-- </div>--> - <!-- <div class="layout-navbars-breadcrumb-user-icon">--> - <!-- <el-popover placement="bottom" trigger="click" transition="el-zoom-in-top" :width="300" :persistent="false">--> - <!-- <template #reference>--> - <!-- <el-badge :is-dot="true">--> - <!-- <el-icon :title="$t('message.user.title4')">--> - <!-- <ele-Bell />--> - <!-- </el-icon>--> - <!-- </el-badge>--> - <!-- </template>--> - <!-- <template #default>--> - <!-- <UserNews />--> - <!-- </template>--> - <!-- </el-popover>--> - <!-- </div>--> - <div class="layout-navbars-breadcrumb-user-icon mr10" @click="onScreenfullClick"> - <i class="iconfont" :title="isScreenfull ? $t('message.user.title6') : $t('message.user.title5')" :class="!isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"></i> + <div style="display: flex; align-items: center; padding-right: 5px"> + <div @click="backToMenu()" class="backBtn">返回首页</div> + <el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onComponentSizeChange"> + <div class="layout-navbars-breadcrumb-user-icon"> + <i class="iconfont icon-ziti" :title="$t('message.user.title0')"></i> + </div> + <template #dropdown> + <el-dropdown-menu> + <el-dropdown-item command="large" :disabled="disabledSize === 'large'">{{ $t('message.user.dropdownLarge') }}</el-dropdown-item> + <el-dropdown-item command="default" :disabled="disabledSize === 'default'">{{ $t('message.user.dropdownDefault') }}</el-dropdown-item> + <el-dropdown-item command="small" :disabled="disabledSize === 'small'">{{ $t('message.user.dropdownSmall') }}</el-dropdown-item> + </el-dropdown-menu> + </template> + </el-dropdown> + <!-- <el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onLanguageChange">--> + <!-- <div class="layout-navbars-breadcrumb-user-icon">--> + <!-- <i class="iconfont" :class="disabledI18n === 'en' ? 'icon-fuhao-yingwen' : 'icon-fuhao-zhongwen'" :title="$t('message.user.title1')"></i>--> + <!-- </div>--> + <!-- <template #dropdown>--> + <!-- <el-dropdown-menu>--> + <!-- <el-dropdown-item command="zh-cn" :disabled="disabledI18n === 'zh-cn'">简体中文</el-dropdown-item>--> + <!-- <el-dropdown-item command="en" :disabled="disabledI18n === 'en'">English</el-dropdown-item>--> + <!-- <el-dropdown-item command="zh-tw" :disabled="disabledI18n === 'zh-tw'">繁體中文</el-dropdown-item>--> + <!-- </el-dropdown-menu>--> + <!-- </template>--> + <!-- </el-dropdown>--> + <!-- <div class="layout-navbars-breadcrumb-user-icon" @click="onSearchClick">--> + <!-- <el-icon :title="$t('message.user.title2')">--> + <!-- <ele-Search />--> + <!-- </el-icon>--> + <!-- </div>--> + <!-- <div class="layout-navbars-breadcrumb-user-icon" @click="onLayoutSetingClick">--> + <!-- <i class="icon-skin iconfont" :title="$t('message.user.title3')"></i>--> + <!-- </div>--> + <!-- <div class="layout-navbars-breadcrumb-user-icon">--> + <!-- <el-popover placement="bottom" trigger="click" transition="el-zoom-in-top" :width="300" :persistent="false">--> + <!-- <template #reference>--> + <!-- <el-badge :is-dot="true">--> + <!-- <el-icon :title="$t('message.user.title4')">--> + <!-- <ele-Bell />--> + <!-- </el-icon>--> + <!-- </el-badge>--> + <!-- </template>--> + <!-- <template #default>--> + <!-- <UserNews />--> + <!-- </template>--> + <!-- </el-popover>--> + <!-- </div>--> + <div class="layout-navbars-breadcrumb-user-icon mr10" @click="onScreenfullClick"> + <i class="iconfont" :title="isScreenfull ? $t('message.user.title6') : $t('message.user.title5')" :class="!isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"></i> + </div> + <el-dropdown :show-timeout="70" :hide-timeout="50" @command="onHandleCommandClick"> + <span class="layout-navbars-breadcrumb-user-link"> + <img src="../../../assets/avator.png" class="layout-navbars-breadcrumb-user-link-photo mr5" style="width: 24px;height: 24px"/> + {{ userInfos.userName }} + <el-icon class="el-icon--right"> + <ele-ArrowDown /> + </el-icon> + </span> + <template #dropdown> + <el-dropdown-menu> + <el-dropdown-item command="/newMenu">{{ $t('message.user.dropdown1') }}</el-dropdown-item> + <!-- <el-dropdown-item command="wareHouse">{{ $t('message.user.dropdown6') }}</el-dropdown-item>--> + <!-- <el-dropdown-item command="/personal">{{ $t('message.user.dropdown2') }}</el-dropdown-item>--> + <!-- <el-dropdown-item command="/404">{{ $t('message.user.dropdown3') }}</el-dropdown-item>--> + <!-- <el-dropdown-item command="/401">{{ $t('message.user.dropdown4') }}</el-dropdown-item>--> + <el-dropdown-item divided command="logOut">{{ $t('message.user.dropdown5') }}</el-dropdown-item> + </el-dropdown-menu> + </template> + </el-dropdown> + <Search ref="searchRef" /> </div> - <el-dropdown :show-timeout="70" :hide-timeout="50" @command="onHandleCommandClick"> - <span class="layout-navbars-breadcrumb-user-link"> - <img :src="userInfos.photo" class="layout-navbars-breadcrumb-user-link-photo mr5" /> - {{ userInfos.userName }} - <el-icon class="el-icon--right"> - <ele-ArrowDown /> - </el-icon> - </span> - <template #dropdown> - <el-dropdown-menu> - <el-dropdown-item command="/homeMenu">{{ $t('message.user.dropdown1') }}</el-dropdown-item> - <!-- <el-dropdown-item command="wareHouse">{{ $t('message.user.dropdown6') }}</el-dropdown-item>--> - <el-dropdown-item command="/personal">{{ $t('message.user.dropdown2') }}</el-dropdown-item> - <!-- <el-dropdown-item command="/404">{{ $t('message.user.dropdown3') }}</el-dropdown-item>--> - <!-- <el-dropdown-item command="/401">{{ $t('message.user.dropdown4') }}</el-dropdown-item>--> - <el-dropdown-item divided command="logOut">{{ $t('message.user.dropdown5') }}</el-dropdown-item> - </el-dropdown-menu> - </template> - </el-dropdown> - <Search ref="searchRef" /> </div> </template> @@ -86,6 +93,15 @@ import UserNews from '/@/layout/navBars/breadcrumb/userNews.vue'; import Search from '/@/layout/navBars/breadcrumb/search.vue'; import { useLoginApi } from '/@/api/login'; +import { useMenuApi } from '/@/api/systemManage/menu/index'; + +const menuApi = useMenuApi(); +import { backEndComponent, getBackEndControlRoutes, initBackEndControlRoutes, setAddRoute, setFilterMenuAndCacheTagsViewRoutes } from '../../../router/backEnd'; +import { NextLoading } from '/@/utils/loading'; +import { useRequestOldRoutes } from '/@/stores/requestOldRoutes'; +import { dynamicRoutes } from '/@/router/route'; +import Cookies from 'js-cookie'; +import {useRoutesList} from "/@/stores/routesList"; export default defineComponent({ name: 'layoutBreadcrumbUser', @@ -95,6 +111,7 @@ const { proxy } = <any>getCurrentInstance(); const router = useRouter(); const stores = useUserInfo(); + const routeList = storeToRefs(useRoutesList()) const storesThemeConfig = useThemeConfig(); const { userInfos } = storeToRefs(stores); const { themeConfig } = storeToRefs(storesThemeConfig); @@ -102,7 +119,8 @@ const state = reactive({ isScreenfull: false, disabledI18n: 'zh-cn', - disabledSize: 'large' + disabledSize: 'large', + systemName: '' }); // 设置分割样式 const layoutUserFlexNum = computed(() => { @@ -232,15 +250,39 @@ break; } }; + + const getSysName = async () => { + if (window.nextLoading === undefined) NextLoading.start(); + if (!Cookies.get('token')) return false; + const res = await menuApi.getMenuAdmin(Cookies.get('projectId') === null ? '' : Cookies.get('projectId')); + if (res.data.code === '200') { + state.systemName = res.data.data[1].project.projectName; + console.log(state.systemName); + } else { + console.log('有问题'); + } + }; + const backToMenu = () => { + router.push({ path: 'newMenu' }).then(()=>{ + routeList.routesList.value = [] + console.log(routeList); + }); + }; + const toHome = () => { + router.push({ path: 'newMenu' }); + }; // 页面加载时 onMounted(() => { if (Local.get('themeConfig')) { initI18n(); initComponentSize(); } + getSysName(); }); return { userInfos, + backToMenu, + toHome, onLayoutSetingClick, onHandleCommandClick, onScreenfullClick, @@ -256,48 +298,133 @@ </script> <style scoped lang="scss"> -.layout-navbars-breadcrumb-user { - display: flex; - align-items: center; - justify-content: flex-end; - &-link { - height: 100%; - display: flex; - align-items: center; - white-space: nowrap; - &-photo { - width: 25px; - height: 25px; - border-radius: 100%; + @media screen and (min-width: 1400px) { + .logo{ + img { + height: 100%; + cursor: pointer; + } + span{ + font-size: 32px; + color: #409eff; + font-weight: bolder; + border-left: 2px solid #409eff; + padding-left: 10px + } } - } - &-icon { - padding: 0 10px; - cursor: pointer; - color: var(--next-bg-topBarColor); - height: 50px; - line-height: 50px; - display: flex; - align-items: center; - &:hover { - background: var(--next-color-user-hover); - i { - display: inline-block; - animation: logoAnimation 0.3s ease-in-out; + .backBtn { + font-size: 16px; + cursor: pointer; + margin-right: 20px; + + &:hover { + color: #409eff; + font-weight: bolder; } } } - ::v-deep(.el-dropdown) { - color: var(--next-bg-topBarColor); + @media screen and (min-width: 1200px) and (max-width: 1400px) { + .logo{ + img { + height: 90%; + cursor: pointer; + } + span{ + font-size: 28px; + color: #409eff; + font-weight: bolder; + border-left: 2px solid #409eff; + padding-left: 10px + } + } + .backBtn { + font-size: 14px; + cursor: pointer; + margin-right: 20px; + + &:hover { + color: #409eff; + font-weight: bolder; + } + } } - ::v-deep(.el-badge) { - height: 40px; - line-height: 40px; + @media screen and (max-width: 1024px) { + .logo{ + img { + width: 60%; + height: auto; + cursor: pointer; + } + span{ + font-size: 22px; + color: #409eff; + font-weight: bolder; + border-left: 2px solid #409eff; + padding-left: 10px + } + } + .backBtn { + font-size: 12px; + cursor: pointer; + margin-right: 20px; + + &:hover { + color: #409eff; + font-weight: bolder; + } + } + } + .layout-navbars-breadcrumb-user { display: flex; align-items: center; + justify-content: space-between; + + .logo { + height: 75%; + padding: 5px 10px; + display: flex; + align-items: center; + overflow: hidden; + box-sizing: border-box; + } + &-link { + height: 100%; + display: flex; + align-items: center; + white-space: nowrap; + &-photo { + width: 25px; + height: 25px; + border-radius: 100%; + } + } + &-icon { + padding: 0 10px; + cursor: pointer; + color: var(--next-bg-topBarColor); + height: 80px; + line-height: 80px; + display: flex; + align-items: center; + &:hover { + background: var(--next-color-user-hover); + i { + display: inline-block; + animation: logoAnimation 0.3s ease-in-out; + } + } + } + ::v-deep(.el-dropdown) { + color: var(--next-bg-topBarColor); + } + ::v-deep(.el-badge) { + height: 40px; + line-height: 40px; + display: flex; + align-items: center; + } + ::v-deep(.el-badge__content.is-fixed) { + top: 12px; + } } - ::v-deep(.el-badge__content.is-fixed) { - top: 12px; - } -} </style> -- Gitblit v1.9.2