|
|
@@ -1,156 +1,169 @@
|
|
|
<template>
|
|
|
- <div class='page-header'>
|
|
|
- <div id='page-header-logo' class='page-logo'>
|
|
|
- <a @click="toIndex">
|
|
|
- <img src='@/assets/logo.png' alt='logo' class='logo-default'>
|
|
|
- </a>
|
|
|
- <div class='menu-toggler sidebar-toggler' @click.stop='toggleSidebar'>
|
|
|
+ <div class='page-header'>
|
|
|
+ <div id='page-header-logo' class='page-logo'>
|
|
|
+ <a @click="toIndex">
|
|
|
+ <img src='@/assets/logo.png' alt='logo' class='logo-default'>
|
|
|
+ </a>
|
|
|
+ <div class='menu-toggler sidebar-toggler' @click.stop='toggleSidebar'>
|
|
|
<span>
|
|
|
<i class='el-icon-fa-bars'></i>
|
|
|
</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div id='page-header-data-menu' class='data-menu'>
|
|
|
- <el-select v-model='selectedProjectId' placeholder='请选择' filterable>
|
|
|
- <el-option-group v-for="group in projectGropList" :key="group.label" :label="group.label">
|
|
|
- <el-option v-for='item in group.options' :key='item.id' :label='item.name' :value='item.id'></el-option>
|
|
|
- </el-option-group>
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
- <div id='page-header-user-menu' class='user-menu'>
|
|
|
- <el-dropdown trigger='hover' class='user-menu-dropdown' @command='userMenuCommand'>
|
|
|
- <span class='el-dropdown-link'>
|
|
|
- {{userInfo.userName}}
|
|
|
- <i class='el-icon-fa-user el-icon--right'></i>
|
|
|
- </span>
|
|
|
- <el-dropdown-menu slot='dropdown'>
|
|
|
- <el-dropdown-item icon='el-icon-plus' command='logout'>退出</el-dropdown-item>
|
|
|
- <el-dropdown-item icon='el-icon-circle-plus'>修改密码</el-dropdown-item>
|
|
|
- </el-dropdown-menu>
|
|
|
- </el-dropdown>
|
|
|
- <ul class="header-nav">
|
|
|
- <li class="header-nav-Splitscreen">
|
|
|
- <a href="/splitScreen" target="_blank"><i class="el-icon-s-platform"></i></a>
|
|
|
- </li>
|
|
|
- <li class="header-nav-notification">
|
|
|
- <message-sever></message-sever>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div id='page-header-data-menu' class='data-menu'>
|
|
|
+ <el-select v-model='selectedProjectId' placeholder='请选择' filterable>
|
|
|
+ <el-option-group v-for="group in projectGropList" :key="group.label" :label="group.label">
|
|
|
+ <el-option v-for='item in group.options' :key='item.id' :label='item.name' :value='item.id'></el-option>
|
|
|
+ </el-option-group>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div id='page-header-user-menu' class='user-menu'>
|
|
|
+ <span class='el-dropdown-link' style="margin-top: 11px;">
|
|
|
+ yanruolan
|
|
|
+ <i class='el-icon-fa-user el-icon--right'></i>
|
|
|
+ </span>
|
|
|
+ <!-- <el-dropdown trigger='hover' class='user-menu-dropdown' @command='userMenuCommand'>-->
|
|
|
+ <!-- <span class='el-dropdown-link'>-->
|
|
|
+ <!-- {{ userInfo.userName }}-->
|
|
|
+ <!-- <i class='el-icon-fa-user el-icon--right'></i>-->
|
|
|
+ <!-- </span>-->
|
|
|
+ <!-- <el-dropdown-menu slot='dropdown'>-->
|
|
|
+ <!-- <el-dropdown-item icon='el-icon-plus' command='logout'>退出</el-dropdown-item>-->
|
|
|
+ <!-- <el-dropdown-item icon='el-icon-circle-plus'>修改密码</el-dropdown-item>-->
|
|
|
+ <!-- </el-dropdown-menu>-->
|
|
|
+ <!-- </el-dropdown>-->
|
|
|
+ <ul class="header-nav">
|
|
|
+ <li class="header-nav-Splitscreen">
|
|
|
+ <a href="/splitScreen" target="_blank"><i class="el-icon-s-platform"></i></a>
|
|
|
+ </li>
|
|
|
+ <li class="header-nav-notification">
|
|
|
+ <message-sever></message-sever>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import frameworkApi from '@/api/framework'
|
|
|
-import { mapGetters, mapMutations } from 'vuex'
|
|
|
+import {mapGetters, mapMutations} from 'vuex'
|
|
|
import getFirstLetter from '@/utils/getFirstLetter'
|
|
|
import MessageSever from '../components/messagesever/index'
|
|
|
import lStorage from '@/utils/localStorage'
|
|
|
+
|
|
|
export default {
|
|
|
- name: 'PageHeader',
|
|
|
- props: [],
|
|
|
- data() {
|
|
|
- return {
|
|
|
- selectedProjectId: null
|
|
|
+ name: 'PageHeader',
|
|
|
+ props: [],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ selectedProjectId: null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters('layout', ['sidebarClosed', 'userInfo', 'projects', 'projectId']),
|
|
|
+ projectGropList() {
|
|
|
+ const cacheInfo = lStorage.get('historyInfo') ? lStorage.get('historyInfo') : {}
|
|
|
+ let options = [{
|
|
|
+ label: '最近使用',
|
|
|
+ options: []
|
|
|
+ }]
|
|
|
+ const projectHistory = cacheInfo[this.userInfo.userName] || [];
|
|
|
+ let copyProjects = JSON.parse(JSON.stringify(this.projects));
|
|
|
+ options[0].options = projectHistory.map(projectId => {
|
|
|
+ let obj = this.projects.find(project => {
|
|
|
+ return project.id === projectId
|
|
|
+ });
|
|
|
+ let index = copyProjects.findIndex(project => {
|
|
|
+ return project.id === projectId
|
|
|
+ })
|
|
|
+ if (index != -1) {
|
|
|
+ copyProjects.splice(index, 1);
|
|
|
}
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapGetters('layout', ['sidebarClosed', 'userInfo', 'projects', 'projectId']),
|
|
|
- projectGropList () {
|
|
|
- const cacheInfo = lStorage.get('historyInfo')?lStorage.get('historyInfo'):{}
|
|
|
- let options = [{
|
|
|
- label: '最近使用',
|
|
|
- options: []
|
|
|
- }]
|
|
|
- const projectHistory = cacheInfo[this.userInfo.userName] || [];
|
|
|
- let copyProjects = JSON.parse(JSON.stringify(this.projects));
|
|
|
- options[0].options = projectHistory.map(projectId => {
|
|
|
- let obj = this.projects.find(project => {
|
|
|
- return project.id === projectId
|
|
|
- });
|
|
|
- let index = copyProjects.findIndex(project => {
|
|
|
- return project.id === projectId
|
|
|
- })
|
|
|
- if (index != -1) {
|
|
|
- copyProjects.splice(index, 1);
|
|
|
- }
|
|
|
- return obj?obj:[]
|
|
|
- })
|
|
|
+ return obj ? obj : []
|
|
|
+ })
|
|
|
|
|
|
- let helpObj = {}
|
|
|
- copyProjects.forEach(p => {
|
|
|
- const label = getFirstLetter((p.name || p.id).slice(0, 1))
|
|
|
- if (helpObj[label]) {
|
|
|
- helpObj[label].push(p)
|
|
|
- } else {
|
|
|
- helpObj[label] = [p]
|
|
|
- }
|
|
|
- })
|
|
|
- const arr = Object.keys(helpObj).sort().map(label => {
|
|
|
- return {
|
|
|
- label: label,
|
|
|
- options: helpObj[label]
|
|
|
- }
|
|
|
- })
|
|
|
- return [...(options[0].options.length > 0 ? options : []), ...arr]
|
|
|
+ let helpObj = {}
|
|
|
+ copyProjects.forEach(p => {
|
|
|
+ const label = getFirstLetter((p.name || p.id).slice(0, 1))
|
|
|
+ if (helpObj[label]) {
|
|
|
+ helpObj[label].push(p)
|
|
|
+ } else {
|
|
|
+ helpObj[label] = [p]
|
|
|
}
|
|
|
- },
|
|
|
- watch: {
|
|
|
- selectedProjectId(n, o) {
|
|
|
- this.setprojectId(n)
|
|
|
+ })
|
|
|
+ const arr = Object.keys(helpObj).sort().map(label => {
|
|
|
+ return {
|
|
|
+ label: label,
|
|
|
+ options: helpObj[label]
|
|
|
}
|
|
|
+ })
|
|
|
+ return [...(options[0].options.length > 0 ? options : []), ...arr]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ selectedProjectId(n, o) {
|
|
|
+ this.setprojectId(n)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ...mapMutations('layout', ['setSidebarClosed', 'setprojectId']),
|
|
|
+ handleSelect() {
|
|
|
},
|
|
|
- methods: {
|
|
|
- ...mapMutations('layout', ['setSidebarClosed', 'setprojectId']),
|
|
|
- handleSelect() {},
|
|
|
- toggleSidebar() {
|
|
|
- this.setSidebarClosed(!this.sidebarClosed)
|
|
|
- },
|
|
|
- userMenuCommand(cmd) {
|
|
|
- // console.log('userMenuCommand ', cmd)
|
|
|
- if (cmd == 'logout') {
|
|
|
- console.log("点击登出l")
|
|
|
- frameworkApi.toLogout()
|
|
|
- }
|
|
|
- },
|
|
|
- toIndex() {
|
|
|
- this.$router.push('/')
|
|
|
- }
|
|
|
+ toggleSidebar() {
|
|
|
+ this.setSidebarClosed(!this.sidebarClosed)
|
|
|
},
|
|
|
- created() {
|
|
|
- let cacheInfo = lStorage.get('historyInfo')?lStorage.get('historyInfo'):{}
|
|
|
- if(cacheInfo[this.userInfo.userName] &&
|
|
|
- cacheInfo[this.userInfo.userName][0] &&
|
|
|
- this.projects.some((item) => {return item.id == cacheInfo[this.userInfo.userName][0]})
|
|
|
- ){
|
|
|
- this.selectedProjectId = cacheInfo[this.userInfo.userName][0]
|
|
|
- } else {
|
|
|
- this.selectedProjectId = this.projectId
|
|
|
- }
|
|
|
+ userMenuCommand(cmd) {
|
|
|
+ // console.log('userMenuCommand ', cmd)
|
|
|
+ if (cmd == 'logout') {
|
|
|
+ console.log("点击登出l")
|
|
|
+ frameworkApi.toLogout()
|
|
|
+ }
|
|
|
},
|
|
|
- mounted() {},
|
|
|
- components: {
|
|
|
- MessageSever
|
|
|
+ toIndex() {
|
|
|
+ this.$router.push('/')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ let cacheInfo = lStorage.get('historyInfo') ? lStorage.get('historyInfo') : {}
|
|
|
+ if (cacheInfo[this.userInfo.userName] &&
|
|
|
+ cacheInfo[this.userInfo.userName][0] &&
|
|
|
+ this.projects.some((item) => {
|
|
|
+ return item.id == cacheInfo[this.userInfo.userName][0]
|
|
|
+ })
|
|
|
+ ) {
|
|
|
+ this.selectedProjectId = cacheInfo[this.userInfo.userName][0]
|
|
|
+ } else {
|
|
|
+ this.selectedProjectId = this.projectId
|
|
|
}
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ MessageSever
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
-.header-nav-Splitscreen>a{
|
|
|
- display: flex;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- position: relative;
|
|
|
- padding: 16px 10px 10px;
|
|
|
- -webkit-box-sizing: border-box;
|
|
|
- box-sizing: border-box;
|
|
|
- color: #79869a;
|
|
|
- font-size: 24px;
|
|
|
- text-decoration: none;
|
|
|
- cursor: pointer;
|
|
|
- i{transition:all 0ms ease 0ms}
|
|
|
+.header-nav-Splitscreen > a {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+ padding: 16px 10px 10px;
|
|
|
+ -webkit-box-sizing: border-box;
|
|
|
+ box-sizing: border-box;
|
|
|
+ color: #79869a;
|
|
|
+ font-size: 24px;
|
|
|
+ text-decoration: none;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ i {
|
|
|
+ transition: all 0ms ease 0ms
|
|
|
+ }
|
|
|
}
|
|
|
-.header-nav-Splitscreen>a:hover{
|
|
|
- text-decoration: none;
|
|
|
- color: #d3d8e2;
|
|
|
- background-color: #3f4f62;
|
|
|
+
|
|
|
+.header-nav-Splitscreen > a:hover {
|
|
|
+ text-decoration: none;
|
|
|
+ color: #d3d8e2;
|
|
|
+ background-color: #3f4f62;
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
