| | |
| | | <!-- 左侧菜单 --> |
| | | <div class="header-left"> |
| | | <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> |
| | | <span :class="item.checked ? 'my-active' : ''">{{ item.label }}</span> |
| | | <span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span> |
| | | </div> |
| | | </div> |
| | | <!-- 右侧菜单 --> |
| | | <div class="header-right"> |
| | | <!-- 搜索框 --> |
| | | <div class="menu-right__item search"> |
| | | <el-input suffix-icon="el-icon-search" v-model="keyword" placeholder="请输入搜索内容"></el-input> |
| | | </div> |
| | | <div class="menu-right__item search"></div> |
| | | <!-- 登录用户 --> |
| | | <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> |
| | | <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> |
| | | <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> |
| | | </el-avatar> |
| | | <span style="padding: 0 5px;">{{ user.user.username}}</span> |
| | | <span style="padding: 0 5px;">{{ user.user.username }}</span> |
| | | <i class="el-icon-arrow-down"></i> |
| | | <!-- 用户操作 --> |
| | | <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> |
| | |
| | | <el-form-item prop="nickName" label="用户名称" min-width="10"> |
| | | <el-input v-model="info.nickName"></el-input> |
| | | </el-form-item> |
| | | <el-form-item prop="nickName" label="所属姓名" min-width="8"> |
| | | <el-form-item prop="nickName" label="所属姓名" min-width="8"> |
| | | <el-input v-model="info.username"></el-input> |
| | | </el-form-item> |
| | | <el-form-item prop="mobile" label="联系方式" min-width="7"> |
| | | <el-form-item prop="mobile" label="联系方式" min-width="7"> |
| | | <el-input v-model="info.mobile"></el-input> |
| | | </el-form-item> |
| | | <el-form-item prop="jobTitle" label="所属职务" min-width="8"> |
| | |
| | | // 设置用户基本信息 |
| | | async setLoginInfo() { |
| | | const info = JSON.parse(sessionStorage.getItem('user')); |
| | | this.getMessage(); |
| | | if (info) { |
| | | this.user = info; |
| | | } else { |
| | | this.user = await this.getLoginInfo(); |
| | | } |
| | | this.getMessage(); |
| | | this.show = true |
| | | }, |
| | | // 获取登录用户信息 |
| | | async getLoginInfo(){ |
| | | const name = sessionStorage.getItem('name'); |
| | | let res = await this.$axios({ |
| | | method: 'get', |
| | | url: 'sccg/admin/info?name=' + name, |
| | | }) |
| | | sessionStorage.setItem('user', JSON.stringify(res.data)); |
| | | return res.data; |
| | | async getLoginInfo() { |
| | | const name = sessionStorage.getItem('name'); |
| | | let res = await this.$axios({ |
| | | method: 'get', |
| | | url: 'sccg/admin/info?name=' + name, |
| | | }) |
| | | sessionStorage.setItem('user', JSON.stringify(res.data)); |
| | | return res.data; |
| | | }, |
| | | getMessage() { |
| | | const userInfo = JSON.parse(sessionStorage.getItem('user')); |
| | | users.getMessageAuditList({ userId: userInfo.user.id }) |
| | | .then(res => { |
| | | this.menuMessageList = res; |
| | | this.menuMessageList.forEach(item => { |
| | | this.messageCounts += item.messageNumber; |
| | | }) |
| | | .then(res => { |
| | | this.menuMessageList = res; |
| | | this.menuMessageList.forEach(item => { |
| | | this.messageCounts += item.messageNumber; |
| | | }) |
| | | .catch(err => this.$message.error(`${err}`)) |
| | | }) |
| | | .catch(err => this.$message.error(`${err}`)) |
| | | }, |
| | | menuChange(data) { |
| | | if (data.id === '1f') { |
| | | window.open('http://cockpit.patstech.net:28081/cockpit/dist/board.html#/share-board/zfu0LsJ9', '_blank'); |
| | | } |
| | | } |
| | | } |
| | | }; |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | ::v-deep .el-form{ |
| | | ::v-deep .el-form { |
| | | padding: 3vh 5vw; |
| | | .el-form-item__label{ |
| | | |
| | | .el-form-item__label { |
| | | color: #4b9bb7; |
| | | } |
| | | } |
| | | |
| | | .el-header { |
| | | background-color: #071a38; |
| | | color: #333; |
| | | text-align: center; |
| | | line-height: 60px; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | padding: 0 20px; |
| | | // width: 100%; |
| | | color: #4b9bb7; |
| | | |
| | | .header-left { |
| | | display: flex; |
| | | flex: 1; |
| | | |
| | | .menu-left__item { |
| | | width: 120px; |
| | | |
| | |
| | | display: flex; |
| | | padding-left: 10vw; |
| | | flex: 1; |
| | | |
| | | .item { |
| | | width: 100%; |
| | | position: relative; |