<template>
<div
class="navbar"
:style="{
backgroundColor:
sideTheme === &
#39;theme-dark&
#39;
? variables.menuBackground
: variables.headerBackgroundColor,
width: settingsStore.topNav
? &
#39;&
#39; : &
#39;600px&
#39;,
}"
>
<!-- width:showSearchs
? &
#39;745px&
#39; : &
#39;300px&
#39; -->
<!-- <hamburge
id="hamburger-container"
:
is-active="appStore.sidebar.opened"
class="hamburger-container"
@toggleClick="toggleSideBar"
/> -->
<!-- <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!settingsStore.topNav" /> -->
<top-nav
id="topmenu-container"
class="topmenu-container"
v-if="settingsStore.topNav"
/>
<div class="right-menu">
<template v-if="appStore.device !== &
#39;mobile&
#39;">
<div class="inputDemo notice-box">
<el-dropdown
trigger="click"
@command="updateBubgPerm
issions"
:max-height="300"
>
<span class="el-dropdown-link">
<span class="dept_text">
{{ bubg }}
</span>
<el-icon class="el-icon--right">
<arrow-down />
</el-icon>
</span>
<template
#dropdown>
<el-dropdown-menu>
<el-dropdown-item
v-for="(item, index) in bubgL
ist"
:key="index"
:command="item"
:d
isabled="item.d
isabled"
>{{ item.label }}</el-dropdown-item
>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
<!-- <el-switch
v-if="
isAdmin"
v-model="
isShould"
@change="switchChange"
class="ml-2"
inline-prompt
style="--el-switch-on-color:
#13ce66; --el-switch-off-color:
#ff4949"
active-text="V1"
inactive-text="V2"
/> -->
<el-badge
is-dot class="item" :hidden="reddotsIndicateMessage">
<el-icon class="icon_message" @click="openMessage"><Bell /></el-icon>
</el-badge>
<header-search
id="header-search"
class="right-menu-item"
@showSearch="showSearch"
/>
<!-- <screenfull id="screenfull" class="right-menu-item hover-effect" /> -->
<!-- <el-button @click="openAiBtn">Ai</el-button> -->
<!-- <span
><img
@click="openAiBtn"
style="width: 32px; cursor: pointer"
src="../../assets/images/AItubiao.png"
alt=""
/></span> -->
<LangSelect @selectCallback="langSelectCallback" />
<!-- <el-tooltip content="布局大小" effect="dark" placement="bottom">
<size-select id="size-select" class="right-menu-item hover-effect" />
</el-tooltip> -->
</template>
<div class="avatar-container">
<el-dropdown
@command="handleCommand"
class="right-menu-item hover-effect"
trigger="click"
>
<div class="avatar-wrapper">
<img
v-if="userStore.avatar"
:src="userStore.avatar"
class="user-avatar"
/>
<img v-else src="@/assets/images/profile.jpg" class="user-avatar" />
<!-- <el-icon><caret-bottom /></el-icon> -->
<div class="userName">{{ userStore.nickName }}</div>
</div>
<template
#dropdown>
<el-dropdown-menu>
<router-link to="/user/profile">
<el-dropdown-item>个人中心</el-dropdown-item>
</router-link>
<el-dropdown-item command="changeSys">
<span>切换后台</span>
</el-dropdown-item>
<el-dropdown-item command="setLayout">
<span>布局设置</span>
</el-dropdown-item>
<a data-v-bd143a29=""
href="https://hiway.fe
ishu.cn/wiki/WgiDw97BmiNYHKkEBZvclRE5nce" class="">
<li data-el-collection-item="" aria-d
isabled="false" class="el-dropdown-menu__item" tabindex="-1"
role="menuitem"> 更新日志
</li>
</a>
<el-dropdown-item v-if="!
isFe
ishu()" divided command="logout">
<span>退出登录</span>
</el-dropdown-item>
<el-dropdown-item v-else divided command="logoutFe
ishu">
<span>重新进入</span>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
<!-- <p class="user_name">{{ userStore.nickName }}</p> -->
</div>
<el-drawer v-model="messageV
isi" title="消息列表" size="60%">
<MessageDrawer
v-if="messageV
isi"
ref="messageDrawer"
@messageCount="getMessageCount"
/>
</el-drawer>
<el-dialog
ref="aiContainer"
class="ai-contaoner"
v-model="aiDialogV
isible"
title="向 Ai 请教"
width="45%"
:before-close="handleClose"
>
<!-- <template
#header="{ close, titleId, titleClass }">
<div class="
my-header">
<div>向 Ai 请教</div>
</div>
</template> -->
<AiMessage @scrollToBottom="scrollToBottomCak"></AiMessage>
<!-- <template
#footer>
<div class="dialog-footer">
<el-button type="primary" @click="aiDialogV
isible = false">
取消
</el-button>
</div>
</template> -->
</el-dialog>
</div>
</template>
<script setup>
import { ref, watch, onMounted, onUnmounted, computed } from &
#39;vue&
#39;
import { messages, connect, d
isconnect } from &
#39;./websocket-client&
#39; // 引入WebSocket客户端代码
import AiMessage from &
#39;./aiMessage.vue&
#39;
import {
ElNotification,
ElMessageBox,
ElMessage,
ElLoading,
} from &
#39;element-plus&
#39;
import MessageDrawer from &
#39;@/components/messageDrawer&
#39;
import { getUserNotifyCount } from &
#39;@/api/bpm/notify&
#39;
import Breadcrumb from &
#39;@/components/Breadcrumb&
#39;
import TopNav from &
#39;@/components/TopNav&
#39;
// import Hamburger from "@/components/Hamburger";
import Screenfull from &
#39;@/components/Screenfull&
#39;
import SizeSelect from &
#39;@/components/SizeSelect&
#39;
import HeaderSearch from &
#39;@/components/HeaderSearch&
#39;
import useAppStore from &
#39;@/store/modules/app&
#39;
import useUserStore from &
#39;@/store/modules/user&
#39;
import useSettingsStore from &
#39;@/store/modules/settings&
#39;
import variables from &
#39;@/assets/styles/variables.module.scss&
#39;
import LangSelect from &
#39;@/components/LangSelect&
#39;
import { getDeptByBuDeptTreeselect } from &
#39;@/api/login&
#39;
import useTagsViewStore from &
#39;@/store/modules/tagsView&
#39;
const { proxy } = getCurrentInstance()
const router = useRouter()
const appStore = useAppStore()
const userStore = useUserStore()
const settingsStore = useSettingsStore()
const showSearchs = ref(false)
const bubg = ref(null)
const bubgL
ist = ref([])
const route = useRoute()
const sideTheme = computed(() => settingsStore.sideTheme)
let messageV
isi = ref(false)
const aiDialogV
isible = ref(false)
let reddotsIndicateMessage = ref(true)
const v
isitedViews = computed(() => useTagsViewStore().v
isitedViews)
const
isShould = ref(false)
const aiContainer = ref()
const
isShoulds = computed(() => {
const flag = localStorage.getItem(&
#39;
isShould&
#39;)
return flag
})
watch(
() =>
isShoulds,
(nval, oval) => {
if (nval.value === &
#39;2&
#39;) {
isShould.value = false
} else {
isShould.value = true
}
},
{ immediate: true }
)
const
isAdmin = computed(() => {
if (userStore.userName === &
#39;admin&
#39;) {
return true
} else {
return false
}
})
function toggleSideBar() {
appStore.toggleSideBar()
}
function handleCommand(command) {
switch (command) {
case &
#39;changeSys&
#39;:
window.open(`${window.location.origin}/qms-base-web/index`, &
#39;_self&
#39;)
break
case &
#39;setLayout&
#39;:
setLayout()
break
case &
#39;logout&
#39;:
logout()
break
case &
#39;logoutFe
ishu&
#39;:
logoutFe
ishu()
break
default:
break
}
}
// 国际化回调
function langSelectCallback() {
// 头部信息
// 强制刷新子组件
this.$emit(&
#39;selectCallback&
#39;)
}
function scrollToBottomCak() {
var elDialogBody = document.querySelector(&
#39;.el-dialog__body&
#39;)
elDialogBody.scrollTop = elDialogBody.scrollHeight
}
function logout() {
ElMessageBox.confirm(&
#39;确定注销并退出系统吗？&
#39;, &
#39;提示&
#39;, {
confirmButtonText: &
#39;确定&
#39;,
cancelButtonText: &
#39;取消&
#39;,
type: &
#39;warning&
#39;,
})
.then(() => {
userStore.LogOut().then(() => {
location.
href = &
#39;/qmsMain/loginDefault
?v=&
#39; + new Date().getTime()
})
})
.catch(() => {})
}
function logoutFe
ishu() {
ElMessageBox.confirm(&
#39;确定重新登入系统么？&
#39;, &
#39;提示&
#39;, {
confirmButtonText: &
#39;确定&
#39;,
cancelButtonText: &
#39;取消&
#39;,
type: &
#39;warning&
#39;,
})
.then(() => {
userStore.LogOut().then(() => {
location.
href = &
#39;/qmsMain/login&
#39;
})
})
.catch(() => {})
}
function openMessage() {
messageV
isi.value = true
}
function handleLookClick() {}
const emits = defineEmits([&
#39;setLayout&
#39;])
function setLayout() {
emits(&
#39;setLayout&
#39;)
}
// watch(showSearchs, (value) => {
// showSearchs.value = value
// })
function
isFe
ishu() {
return /Lark|Fe
ishu/i.test(navigator.userAgent)
}
function updateBubgPerm
issions(e) {
bubg.value = e.label
localStorage.setItem(&
#39;groupName&
#39;, e.label)
localStorage.setItem(&
#39;groupId&
#39;, e.code)
//
this.$store.commit("SET_GROUP_ID", selectedItem.code);
//
this.$store.commit("SET_GROUP_NAME", selectedItem.label);
//
this.refreshView();
refreshSelectedTag() // 刷新当前页面
// closeAllTags() //关闭所有页面
}
function showSearch(flag) {
showSearchs.value = flag
}
function getBubgData() {
getDeptByBuDeptTreeselect().then((response) => {
let checkL
ist = []
let
isAdmin = userStore.userName === &
#39;admin&
#39;
? true : false
if (userStore.perm
issionsDataBubgDtos.length == 0) {
checkL
ist.push(userStore.groupId)
} else {
checkL
ist = userStore.perm
issionsDataBubgDtos
}
bubgL
ist.value = response.data
bubg.value = userStore.groupName || &
#39;&
#39;
if (!
isAdmin) {
bubgL
ist.value.forEach((bubg) => {
if (checkL
ist == null) {
bubg.d
isabled = true
} else {
if (checkL
ist.indexOf(bubg.code) == -1) {
bubg.d
isabled = true
} else {
bubg.d
isabled = false
}
}
})
} else {
bubgL
ist.value.forEach((bubg) => {
bubg.d
isabled = false
})
}
bubgL
ist.value = bubgL
ist.value.filter(item => !item.d
isabled)
})
}
// 获取消息数量
function getMessageCount(count) {
showReddotsIndicateMessage(count)
}
// 控制消息红点是否显示
function showReddotsIndicateMessage(count) {
reddotsIndicateMessage.value = count <= 0
}
function refreshSelectedTag(view) {
if (route.meta.link) {
// useTagsViewStore().delIframeView(route);
proxy.$bus.$emit(&
#39;refreshIframe&
#39;, route.path) // 触发刷新当前页面（iframe）
return
}
let pathStr = route.path
// 必须要配置
if (pathStr.includes(&
#39;bpm&
#39;)) {
proxy.$bus.$emit(&
#39;refresh
Page-bpm&
#39;, route.path) // 触发刷新当前页面
} else {
proxy.$tab.refresh
Page(route)
}
}
function openAiBtn() {
aiDialogV
isible.value = true
}
function switchChange(e) {
if (e) {
localStorage.setItem(&
#39;
isShould&
#39;, &
#39;1&
#39;)
} else {
localStorage.setItem(&
#39;
isShould&
#39;, &
#39;2&
#39;)
}
closeAllTags()
}
function toLastView(v
isitedViews, view) {
const latestView = v
isitedViews.slice(-1)[0]
if (latestView) {
router.push(latestView.fullPath)
} else {
// now the default
is to redirect to the home
page if there
is no tags-view,
// you can adjust it according to your needs.
if (view.name === &
#39;Dashboard&
#39;) {
// to reload home
page
router.replace({ path: &
#39;/redirect&
#39; + view.fullPath })
} else {
router.push(&
#39;/&
#39;)
}
}
}
function closeAllTags(view) {
const originObj = {
fullPath: &
#39;/index&
#39;,
path: &
#39;/index&
#39;,
name: &
#39;Index&
#39;,
meta: {
title: &
#39;首页&
#39;,
icon: &
#39;dashboard&
#39;,
affix: true,
},
title: &
#39;首页&
#39;,
}
proxy.$tab.closeAll
Page().then(({ v
isitedViews }) => {
toLastView(v
isitedViews, originObj)
})
}
watch(
() => messages.value,
(newMessages) => {
if (newMessages.length > 0) {
const latestMessage = newMessages[newMessages.length - 1]
const message = JSON.parse(latestMessage.text)
// 播放提示音
const audio = new Audio(&
#39;/sounds/sound.mp3&
#39;) // 这里放置提示音文件的路径
audio.play()
const notificationInstance = ElNotification({
title: message.title,
message: message.content,
type: message.type.toLowerCase() || &
#39;info&
#39;,
position: &
#39;top-right&
#39;, // 设置弹出位置为右上角
duration: 30000, // 30秒
showClose: true, // 显示关闭按钮
onClick: () => {
messageV
isi.value = true // 打开消息抽屉
// 延时 2 秒后关闭通知
setTimeout(() => {
notificationInstance.close() // 手动关闭特定的通知实例
}, 2000) // 2000 毫秒 = 2 秒
},
})
}
},
{ deep: true } // 设置深度监听
)
// 在组件挂载时连接 WebSocket
onMounted(() => {
connect()
getUserNotifyCount()
.then((res) => {
showReddotsIndicateMessage(res.data)
})
.catch((err) => {
console.error(&
#39;Error fetching notifications:&
#39;, err)
})
})
// 在组件卸载时断开 WebSocket 连接
onUnmounted(() => {
d
isconnect()
})
getBubgData()
</script>
<style lang="scss" scoped>
.navbar {
height: 34px;
overflow: hidden;
position: relative;
background:
#eff2fb !important;
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
.hamburger-container {
line-height: 46px;
height: 100%;
float: left;
cursor: pointer;
transition: background 0.3s;
-webkit-tap-highlight-color: transparent;
&:hover {
background: rgba(0, 0, 0, 0.025);
}
}
.breadcrumb-container {
float: left;
}
.topmenu-container {
position: absolute;
background-color:
#eff2fb;
}
.errLog-container {
d
isplay: inline-block;
vertical-align: top;
}
.right-menu {
float: right;
height: 100%;
line-height: 34px;
d
isplay: flex;
&:focus {
outline: none;
}
.right-menu-item {
d
isplay: inline-block;
padding-right: 8px;
height: 100%;
font-size: 18px;
color:
#5a5e66;
vertical-align: text-bottom;
// color:
#fff;
&.hover-effect {
cursor: pointer;
transition: background 0.3s;
&:hover {
background: rgba(0, 0, 0, 0.025);
}
}
}
.avatar-container {
// margin-right: 40px;
.avatar-wrapper {
// margin-top: 5px;
position: relative;
d
isplay: flex;
align-items: center;
height: 100%;
.user-avatar {
cursor: pointer;
width: 25px;
height: 25px;
border-radius: 20px;
}
i {
cursor: pointer;
position: absolute;
right: -20px;
top: 25px;
font-size: 12px;
}
}
}
}
}
::v-deep .el-badge__content.
is-fixed {
top: 10px;
}
::v-deep .el-badge__content.
is-fixed.
is-dot {
right: 13px;
}
.icon_message {
height: 100%;
margin: 0px 10px;
cursor: pointer;
}
.header_title {
d
isplay: inline-block;
height: 100%;
width: 300px;
line-height: 50px;
padding-left: 10px;
font-family: &
#39;Microsoft YaHei&
#39;;
// line-height: 1em;
color:
#f0f0f0;
font-weight: bold;
font-size: 30px;
text-shadow: 0px 0px 0 rgb(216, 216, 216), 1px 1px 0 rgb(192, 192, 192),
2px 2px 0 rgb(168, 168, 168), 3px 3px 0 rgb(144, 144, 144),
4px 4px 0 rgb(120, 120, 120), 5px 5px 0 rgb(96, 96, 96),
6px 6px 5px rgba(0, 0, 0, 0.35), 6px 6px 1px rgba(0, 0, 0, 0.5),
0px 0px 5px rgba(0, 0, 0, 0.2);
}
.user_name {
d
isplay: inline-block;
height: 100%;
line-height: 34px;
margin: 0px;
}
.inputDemo {
d
isplay: flex;
align-items: center;
white-space: nowrap;
input {
width: 150px;
font-size: 12px;
border: none;
background: none;
text-align: center;
font-weight: bold;
}
.el-input__suffix {
i {
margin-left: 0.06rem;
font-weight: bold;
}
}
/* WebKit browsers */
::-webkit-input-placeholder {
font-weight: bold;
}
}
::v-deep .ai-contaoner .el-dialog__body {
height: calc(100vh - 180px);
overflow-y: auto;
padding: 0px;
background-color:
#292a2d;
// position: relative;
}
::v-deep .el-select .el-input__wrapper {
background-color:
#eff2fb !important;
}
::v-deep .ai-contaoner .el-dialog__header {
color:
#fff;
margin-right: 0px;
background-image: linear-gradient(
to right,
rgb(96, 62, 132),
rgb(91, 96, 195)
);
}
::v-deep .ai-contaoner .el-dialog__title {
color:
#fff;
}
::v-deep .ai-contaoner .el-dialog__close {
color:
#fff;
}
.userName {
height: 100%;
width: 80px;
line-height: 35px;
// d
isplay: flex;
// align-items: center;
padding-left: 5px;
font-size: 14px;
white-space: nowrap; /* 确保文本在一行内显示 */
overflow: hidden; /* 隐藏溢出的内容 */
text-overflow: ellips
is; /* 使用打点表示文字溢出 */
}
.el-dropdown-link {
.dept_text {
d
isplay: inline-block;
white-space: nowrap;
width: 200px;
text-align: right;
//overflow: hidden; /* 隐藏溢出的内容 */
//text-overflow: ellips
is; /* 使用打点表示文字溢出 */
}
}
@keyframes gradient-blink-animation {
0% {
color:
#ff0000; /* 红色 */
}
20% {
color:
#ffaa00; /* 橙色 */
}
40% {
color:
#ffff00; /* 黄色 */
}
60% {
color:
#00ff00; /* 绿色 */
}
80% {
color:
#0000ff; /* 蓝色 */
}
100% {
color:
#aa00ff; /* 紫色 */
}
}
</style>
dept_text下拉选择自适应宽度
本文探讨了一个JSP页面中onload事件触发的问题。当点击带有onload事件的超链接时，即使链接为空，该事件依然会被触发，并导致页面跳转到自身URL加#的情况。文章寻求解决在特定条件下阻止onload事件触发的方法。
扫一扫
1025
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
