306 lines
6.4 KiB
Vue
306 lines
6.4 KiB
Vue
<template>
|
|
<div class="user-bar">
|
|
<div class="panel-item hidden-sm-and-down" @click="searchVisible = true">
|
|
<el-badge :hidden="true">
|
|
<el-icon>
|
|
<el-icon-search/>
|
|
</el-icon>
|
|
</el-badge>
|
|
</div>
|
|
<div class="screen panel-item hidden-sm-and-down" @click="screen">
|
|
<el-badge :hidden="true">
|
|
<el-icon>
|
|
<el-icon-full-screen/>
|
|
</el-icon>
|
|
</el-badge>
|
|
</div>
|
|
<div class="tasks panel-item" @click="tasksVisible=true">
|
|
<el-badge :hidden="taskNum==0" :value="taskNum" class="badge" type="danger">
|
|
<el-icon>
|
|
<pi-icon-task/>
|
|
</el-icon>
|
|
</el-badge>
|
|
</div>
|
|
<div class="msg panel-item" @click="showMsg">
|
|
<el-badge :hidden="msgNum==0" :value="msgNum" class="badge" type="danger">
|
|
<el-icon>
|
|
<el-icon-chat-dot-round/>
|
|
</el-icon>
|
|
</el-badge>
|
|
<el-drawer title="站内信息" v-model="msg" :size="400" append-to-body destroy-on-close>
|
|
<message @closed="closeMsg"></message>
|
|
</el-drawer>
|
|
</div>
|
|
<el-dropdown class="user panel-item" trigger="click" @command="handleUser">
|
|
<div class="user-avatar">
|
|
<el-avatar :size="30" :src="avatar">{{ realnameF }}</el-avatar>
|
|
<label>{{ realname }}</label>
|
|
<el-icon class="el-icon--right">
|
|
<el-icon-arrow-down/>
|
|
</el-icon>
|
|
</div>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item command="uc">帐号信息</el-dropdown-item>
|
|
<el-dropdown-item command="clearCache">清除缓存</el-dropdown-item>
|
|
<el-dropdown-item divided command="outLogin">退出登录</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
<div class="setting panel-item hidden-sm-and-down" @click="settingDialog=true">
|
|
<el-icon>
|
|
<pi-icon-brush/>
|
|
</el-icon>
|
|
<el-drawer :title="t('system.pageLayout')" v-model="settingDialog" :size="400" append-to-body destroy-on-close>
|
|
<setting></setting>
|
|
</el-drawer>
|
|
</div>
|
|
</div>
|
|
<el-dialog v-model="searchVisible" :width="700" title="菜单搜索" class="drawerBG" center destroy-on-close>
|
|
<search @success="searchVisible=false"></search>
|
|
</el-dialog>
|
|
<el-drawer v-model="tasksVisible" :size="450" title="任务中心" destroy-on-close>
|
|
<tasks></tasks>
|
|
</el-drawer>
|
|
</template>
|
|
|
|
<script setup name="userbar">
|
|
import {ref, onMounted, getCurrentInstance} from "vue";
|
|
import search from './search.vue'
|
|
import message from './message.vue'
|
|
import setting from './setting.vue'
|
|
import tasks from './tasks.vue'
|
|
import websocket from "@/utils/websocket";
|
|
import {ElNotification} from 'element-plus';
|
|
import tools from "@/utils/tools.js";
|
|
import api from "@/api/index.js";
|
|
import {useRouter} from "vue-router";
|
|
import {useI18n} from "vue-i18n";
|
|
|
|
const {proxy} = getCurrentInstance()
|
|
const router = useRouter()
|
|
const {t} = useI18n()
|
|
|
|
let searchVisible = ref(false)
|
|
let msg = ref(false)
|
|
let msgNum = ref(0)
|
|
const tasksVisible = ref(false)
|
|
let taskNum = ref(0)
|
|
const settingDialog = ref(false)
|
|
const userInfo = tools.data.get("USER_INFO");
|
|
|
|
let realname = userInfo.realname;
|
|
let realnameF = realname.substring(0, 1);
|
|
let avatar = userInfo.avatar
|
|
|
|
// mounted
|
|
onMounted(() => {
|
|
initWebSocket()
|
|
loadData()
|
|
})
|
|
|
|
function initWebSocket() {
|
|
const ws = websocket.init();
|
|
ws.websocket.onmessage = messageHandle
|
|
ws.websocket.onclose = closeHandle
|
|
}
|
|
|
|
function messageHandle(message) {
|
|
if (message.data == "connection successful" || message.data == "pong") {
|
|
return;
|
|
}
|
|
const data = JSON.parse(message.data)
|
|
if (!data) {
|
|
return;
|
|
}
|
|
if (data.code == 200) {
|
|
ElNotification.success({
|
|
title: 'Success',
|
|
message: data['msg']
|
|
})
|
|
} else {
|
|
ElNotification.warning({
|
|
title: 'Warning',
|
|
message: data['msg']
|
|
})
|
|
}
|
|
if (data.type == "message") {
|
|
msgNum.value++
|
|
} else if (data.type == "task") {
|
|
taskNum.value++
|
|
}
|
|
return;
|
|
}
|
|
|
|
function closeHandle() {
|
|
setTimeout(function () {
|
|
initWebSocket()
|
|
}, 5000);
|
|
}
|
|
|
|
//个人信息
|
|
function handleUser(command) {
|
|
if (command === "uc") {
|
|
router.push({path: '/usercenter'});
|
|
}
|
|
if (command === "cmd") {
|
|
router.push({path: '/cmd'});
|
|
}
|
|
if (command === "clearCache") {
|
|
proxy.$confirm('清除缓存会将系统初始化，包括登录状态、主题、语言设置等，是否继续？', '提示', {
|
|
type: 'info',
|
|
}).then(async () => {
|
|
const loading = proxy.$loading()
|
|
tools.data.clear()
|
|
const [res, err] = await tools.go(api.auth.logout())
|
|
if (!err) {
|
|
loading.close()
|
|
location.reload()
|
|
proxy.$message.success(res.msg)
|
|
router.replace({path: '/login'});
|
|
}
|
|
}).catch(() => {
|
|
});
|
|
}
|
|
if (command === "outLogin") {
|
|
proxy.$confirm('确认是否退出当前用户？', '提示', {
|
|
type: 'warning',
|
|
confirmButtonText: t("system.logout"),
|
|
confirmButtonClass: 'el-button--danger'
|
|
}).then(async () => {
|
|
const [res, err] = await tools.go(api.auth.logout())
|
|
if (!err) {
|
|
proxy.$message.success(res.msg)
|
|
router.replace({path: '/login'});
|
|
}
|
|
}).catch(() => {
|
|
});
|
|
}
|
|
}
|
|
|
|
//全屏
|
|
function screen() {
|
|
tools.screen(document.documentElement)
|
|
}
|
|
|
|
//显示短消息
|
|
function showMsg() {
|
|
msg.value = true
|
|
}
|
|
|
|
function closeMsg(num) {
|
|
if (num > -1) {
|
|
msgNum.value = num
|
|
}
|
|
msg.value = false
|
|
}
|
|
|
|
async function loadData() {
|
|
// let res = await this.$API.home.message.newCount()
|
|
// this.msgNum = res.data.count
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.user-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 100%;
|
|
}
|
|
|
|
.user-bar .panel-item {
|
|
padding: 0 10px;
|
|
cursor: pointer;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.user-bar .panel-item i {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.user-bar .panel-item:hover {
|
|
background: rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.user-bar .user-avatar {
|
|
height: 49px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.user-bar .user-avatar label {
|
|
display: inline-block;
|
|
margin-left: 5px;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.user-bar .store-name {
|
|
height: 49px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.user-bar .store-name label {
|
|
display: inline-block;
|
|
margin-left: 5px;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.msg-list li {
|
|
border-top: 1px solid #eee;
|
|
}
|
|
|
|
.msg-list li a {
|
|
display: flex;
|
|
padding: 20px;
|
|
}
|
|
|
|
.msg-list li a:hover {
|
|
background: #ecf5ff;
|
|
}
|
|
|
|
.msg-list__icon {
|
|
width: 40px;
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.msg-list__main {
|
|
flex: 1;
|
|
}
|
|
|
|
.msg-list__main h2 {
|
|
font-size: 15px;
|
|
font-weight: normal;
|
|
color: #333;
|
|
}
|
|
|
|
.msg-list__main p {
|
|
font-size: 12px;
|
|
color: #999;
|
|
line-height: 1.8;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.msg-list__time {
|
|
width: 100px;
|
|
text-align: right;
|
|
color: #999;
|
|
}
|
|
|
|
.dark .msg-list__main h2 {
|
|
color: #d0d0d0;
|
|
}
|
|
|
|
.dark .msg-list li {
|
|
border-top: 1px solid #363636;
|
|
}
|
|
|
|
.dark .msg-list li a:hover {
|
|
background: #383838;
|
|
}
|
|
</style>
|