<template>
<div class="header_layout">
<div class="logo">
<img src="../../../static/images/logo.png" />
</div>
<div class="title">
<span>{{systemTitle}}</span>
</div>
<div class="header_btn">
<div class="toolbar-items">
<a-dropdown style="margin-right: 2px;" :trigger="['click','hover']">
<a class="ant-dropdown-link">
<a-avatar class="ava-img" src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png" />
<span class="title_f" v-if="userInfo.unitName"> {{userInfo.unitName}}</span>
<span class="title_f">({{userInfo.loginName }})</span>
</a>
<a-menu slot="overlay" style="margin-top: 20px!important;">
<a-menu-item>
<a href="javascript:;" @click="personInfo">
<div style="padding: 2px 30px 2px 10px">
<span>
<a-icon type="user" style="margin-right: 10px" />
</span><span>个人设置</span>
</div>
</a>
</a-menu-item>
<a-menu-item>
<a href="javascript:;" @click="toUpdatePwd">
<div style="padding: 2px 30px 2px 10px">
<span>
<a-icon type="edit" style="margin-right: 10px" />
</span><span>密码修改</span>
</div>
</a>
</a-menu-item>
<a-menu-item>
<a href="javascript:;" @click="logout">
<div style="padding: 2px 30px 2px 10px">
<span>
<a-icon type="poweroff" style="margin-right: 10px" />
</span><span>退出</span>
</div>
</a>
</a-menu-item>
</a-menu>
</a-dropdown>
</div>
<div class="toolbar-items">
<a href="javascript:;" @click="logout">
<div style="padding: 2px 30px 2px 6px;color: rgb(89 89 89);">
<span>
<a-icon type="poweroff" style="margin-right: 4px" />
</span>
<span>退出</span>
</div>
</a>
</div>
<div class="toolbar-items" v-if="false">
<a-dropdown style="margin-right: 5px;" :trigger="['click','hover']">
<a class="ant-dropdown-link">
<a-icon type="message" class="toolbar-icon icon_f" />
</a>
<div slot="overlay" style="margin-top: 20px!important;">
<!-- 禁止事件下传，这样点击自定义的下拉菜单就不会收起了，注意宽高完全覆盖好 -->
<div @click.stop>
<!-- 菜单内容 -->
<div class="msg-layout">
<div class="msg-item">
<div class="logo-ft">
<div class="logo">
<a-icon type="message" class="toolbar-icon icon_f" />
</div>
</div>
<div class="msg-nav">
<div class="nav-ct">2023-07-28系统更新通知</div>
<div class="nav-date">2023-07-28 22:34:11</div>
</div>
</div>
</div>
</div>
</div>
</a-dropdown>
</div>
<div class="toolbar-items" v-if="userInfo.type === '3'">
<a-dropdown style="margin-right: 5px;" :trigger="['click','hover']">
<a class="ant-dropdown-link">
<a-icon type="unordered-list" class="toolbar-icon icon_f" />
</a>
<a-menu slot="overlay" style="margin-top: 20px!important;">
<a-menu-item>
<a href="javascript:;" @click="switchType(1)">
<div style="padding: 2px 30px 2px 10px" :class="{'key-active':!isKeyPoint}">
<a-icon type="right-circle" style="margin-right: 4px" />
<span>卫生健康领域科技计划项目</span>
<a-icon type="check" style="margin-left: 8px" v-if="!isKeyPoint" />
</div>
</a>
</a-menu-item>
<a-menu-item>
<a href="javascript:;" @click="switchType(2)" :class="{'key-active':isKeyPoint}">
<div style="padding: 2px 30px 2px 10px">
<a-icon type="right-circle" style="margin-right: 4px" />
<span>首府地区公立医院高水平临床专科建设科技项目</span>
<a-icon type="check" style="margin-left: 8px" v-if="isKeyPoint" />
</div>
</a>
</a-menu-item>
</a-menu>
</a-dropdown>
</div>
</div>
<a-modal v-model="visibleEdit" title="密码修改" width="600px" :footer="null" destroyOnClose>
<update-pwd v-model="id" @close="() => visibleEdit = false"> </update-pwd>
</a-modal>
</div>
</template>
<script>
import { removeToken } from '@/views/utils/auth'
import updatePwd from '@/views/system/updatePwd/Index.vue'
export default {
name: "LayoutHeader",
components: { updatePwd },
data () {
return {
userInfo: {},
visibleEdit: false,
id: null,
systemTitle: '',
isKeyPoint: false,
}
},
mounted () {
},
created () {
this.userInfo = JSON.parse(window.sessionStorage.getItem('user'))
if (this.userInfo.projType && this.userInfo.type === '3') {
this.isKeyPoint = (this.userInfo.projType == '2' ? true : false)
this.systemTitle = process.env.VUE_APP_SYSTEM_TITLE
} else
this.systemTitle = process.env.VUE_APP_SYSTEM_TITLE
},
computed: {
projType: {
get () {
return this.$store.state.app.projType
},
set () {
}
},
},
methods: {
logout () {
this.$confirm({
title: '确定要退出登录吗?',
onOk: () => {
this.$api.base.logout().then(({ data }) => { }).catch(() => { })
removeToken()
window.sessionStorage.clear();
this.$store.commit('app/clearStore')
this.$router.push(`/login`)
},
});
},
personInfo () {
this.$store.commit('app/addCard', { title: '个人设置', key: '1005', code: 'personInfo', keepAlive: 1, router: '/person/info', closable: true })
},
//修改密码
toUpdatePwd () {
this.visibleEdit = true
},
switchType (projType) {
if (this.$store.state.app.projType != projType) {
this.$changeProjType(projType)
}
}
},
watch: {
projType: {
handler (value) {
if (value) {
this.isKeyPoint = (value == '2' ? true : false)
// this.systemTitle = process.env.VUE_APP_SYSTEM_TITLE + (value == 2 ? '--重点学科申报' : '--科研项目申报')
}
}
}
}
}
</script>
<style scoped lang="less">
.key-active {
font-weight: 600;
color: #1890ff;
}
.msg-layout {
width: 350px;
min-height: 180px;
border: 1px solid #e6ebf5;
background: #fff !important;
z-index: 99;
.msg-item {
height: 60px;
border-bottom: 1px dashed #e8e8e8;
cursor: pointer;
.logo-ft {
display: inline-block;
width: 60px;
height: 60px;
position: relative;
.logo {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 30px;
height: 30px;
background: #1890ff;
border-radius: 50%;
padding: 5px 8px 8px 7px;
.anticon {
font-size: 16px;
color: #fff !important;
}
}
}
.msg-nav {
display: inline-block;
width: calc(100% - 60px);
.nav-ct {
width: 100%;
line-height: 35px;
overflow-wrap: break-word;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.nav-date {
width: 100%;
font-size: 12px;
height: 25px;
overflow-wrap: break-word;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
}
.msg-item:hover {
background: #e6f7ff;
}
}
</style>