<template>
|
<el-container class="home_container">
|
|
<el-header class="home_header">
|
<div class="header_title">
|
<img src="../../assets/img/login/logo.png" alt="">
|
<span>北京友联华宇科技有限公司CRM</span>
|
</div>
|
<div class='header_right'>
|
<!--<el-badge :value='0' class="alarmList">
|
<i class='el-icon-message-solid wk-bell' @click='alarmDrawer=true'></i>
|
</el-badge> -->
|
|
<!--<el-popover
|
:visible-arrow="false"
|
placement="bottom"
|
popper-class="no-padding-popover"
|
width="200"
|
trigger="click">
|
<div class="handel-items">
|
<div
|
class="handel-item"
|
@click="handleClick('person')"><i class="wukong wukong-personcenter"/>个人中心</div>
|
<div
|
class="handel-item"
|
@click="handleClick('goout')"><i class="wukong wukong-goout"/>退出登录</div>
|
<div
|
:style="{'margin-bottom': manage ? '15px' : '0'}"
|
class="handel-item hr-top"
|
style="pointer-events: none;"><i class="wukong wukong-versions"/>版本 V9.2.3.191220</div>
|
<div
|
v-if="manage"
|
class="handel-box">
|
<el-button
|
type="primary"
|
class="handel-button"
|
@click="enterSystemSet()">进入企业管理后台</el-button>
|
</div>
|
</div> slot="reference"-->
|
<div class="user-container">
|
<div
|
v-photo="userInfo"
|
v-lazy:background-image="$options.filters.filterUserLazyImg(userInfo.Avatar)"
|
:key="userInfo.Avatar"
|
class="user-img div-photo"/>
|
<div class="user-name">{{userInfo.RealName}}</div>
|
<div><img class="goout" src="@/assets/img/goOut.png" @click="handleClick('goout')"/></div>
|
<!--<i class="el-icon-caret-bottom mark"/>-->
|
</div>
|
<!--</el-popover>-->
|
</div>
|
|
</el-header>
|
<el-drawer
|
title="最新消息"
|
:visible.sync="alarmDrawer"
|
>
|
<div style="height:600px;">
|
<el-scrollbar style="height:100%">
|
<div style="width:100%;height:700px;padding:0px 20px;" >
|
<ul>
|
<li v-for="item in 100" :key="item">{{item}}</li>
|
</ul>
|
</div>
|
</el-scrollbar>
|
</div>
|
</el-drawer>
|
<el-container>
|
<el-aside :width="isCollapse ? '80px' : '220px'" class="home_aside">
|
<div
|
style='background-color: #transparent;'
|
class="sidebar-bottom">
|
<div class="sidebar-container">
|
<img
|
v-if='isCollapse'
|
:style="{ 'right': isCollapse ? '13px' : '0' }"
|
class="collapse-button"
|
src="@/assets/img/collapse_right.png"
|
alt=""
|
@click="toggleCollapse">
|
<img
|
v-if='!isCollapse'
|
:style="{ 'right': isCollapse ? '3px' : '0' }"
|
class="collapse-button"
|
src="@/assets/img/collapse_white.png"
|
alt=""
|
@click="toggleCollapse">
|
</div>
|
</div>
|
<el-menu class="aside_menu"
|
background-color="#fff"
|
text-color="#666666"
|
active-text-color="#4D88FF"
|
unique-opened
|
:collapse="isCollapse"
|
:collapse-transition="false"
|
:router="true" :default-active="activePath">
|
<el-submenu :index="item.Id + ''" v-for="item in moduleBlock" :key="item.Id">
|
<template slot="title">
|
<i :class="item.IconPath" style='width:20px;height:25px;margin-top:12px;margin-right:12px;'></i>
|
<span>{{item.Name}}</span>
|
</template>
|
<el-menu-item :index="'/' + subItem.LinkUrl"
|
:disabled="subItem.LinkUrl === ''"
|
v-for="subItem in item.Children"
|
:key="subItem.Id" @click="saveNavState(subItem.LinkUrl)">
|
<template slot="title">
|
<i class="el-icon-menu"></i>
|
<span>{{subItem.Name}}</span>
|
</template>
|
</el-menu-item>
|
</el-submenu>
|
</el-menu>
|
|
</el-aside>
|
|
<el-main class="home_main">
|
<router-view></router-view>
|
</el-main>
|
|
</el-container>
|
|
</el-container>
|
</template>
|
|
<script>
|
import { mapGetters } from 'vuex'
|
import Lockr from 'lockr'
|
import { Loading } from 'element-ui'
|
export default {
|
name: 'Home',
|
data () {
|
return {
|
menuList: [],
|
iconsObj: {
|
125: 'el-icon-s-custom',
|
103: 'el-icon-lock',
|
101: 'el-icon-s-goods',
|
102: 'el-icon-shopping-bag-1',
|
145: 'el-icon-data-analysis'
|
},
|
isCollapse: false,
|
activePath: '',
|
alarmDrawer: false,
|
userInfo: []
|
}
|
},
|
computed: {
|
...mapGetters(['moduleBlock'])
|
},
|
watch: {
|
moduleBlock: function (newFlag, oldFlag) {
|
// 需要执行的代码
|
return newFlag
|
}
|
},
|
created () {
|
this.activePath = window.sessionStorage.getItem('activePath')
|
console.log(this.activePath, this.moduleBlock, Lockr.get('authList'))
|
if (Object.keys(this.moduleBlock).length === 0) {
|
this.$store.commit('SET_MODULE', Lockr.get('authList'))
|
}
|
this.userInfo = Lockr.get('User-Info')
|
},
|
methods: {
|
logout () {
|
window.sessionStorage.clear()
|
localStorage.clear()
|
this.$router.replace('/login')
|
},
|
handleClick (type) {
|
if (type === 'goout') {
|
this.$confirm('退出登录？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
})
|
.then(() => {
|
let loading = Loading.service({
|
target: document.getElementById('#app')
|
})
|
window.sessionStorage.clear()
|
localStorage.clear()
|
this.$router.replace('/login')
|
loading.close()
|
// this.$store
|
// .dispatch('LogOut')
|
// .then(() => {
|
// location.reload()
|
// loading.close()
|
// })
|
// .catch(() => {
|
// location.reload()
|
// loading.close()
|
// })
|
})
|
.catch(() => {})
|
} else if (type === 'person') {
|
this.$router.push({
|
name: ''
|
})
|
}
|
},
|
getMenuList () {
|
// this.menuList = {...this.moduleBlock}
|
// [{Id: 1, ModuleName: '客户管理', children: [{Id: 11, ModuleName: '客户管理', LinkUrl: 'clientsManage'}, {Id: 12, ModuleName: '商机', LinkUrl: 'saleChance'}, {Id: 13, ModuleName: '联系人', LinkUrl: 'ContactsIndex'}, {Id: 14, ModuleName: '商机（审批）', LinkUrl: 'BusinessIndex'}, {Id: 15, ModuleName: '合同管理', LinkUrl: 'ContractIndex'}]}, {Id: 2, ModuleName: '企业管理', children: [{Id: 21, ModuleName: '部门管理', LinkUrl: 'ApartmentManage'}, {Id: 22, ModuleName: '职务权限管理', LinkUrl: 'offcialAuthority'}, {Id: 23, ModuleName: '员工管理', LinkUrl: 'EmployeeManage'}, {Id: 24, ModuleName: '系统设置', LinkUrl: 'systemSetting'}, {Id: 25, ModuleName: '员工日志', LinkUrl: 'staffLog'}]}, {Id: 3, ModuleName: '系统管理', children: [{Id: 31, ModuleName: '模块设置', LinkUrl: 'ModuleManage'}]}]
|
},
|
|
toggleCollapse () {
|
this.isCollapse = !this.isCollapse
|
},
|
|
saveNavState (activePath) {
|
console.log(activePath)
|
window.sessionStorage.setItem('activePath', '/' + activePath)
|
this.activePath = '/' + activePath
|
},
|
getInfoList () {
|
console.log('111')
|
}
|
}
|
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.home_container{
|
height: 100%;
|
background: #F5F6FA;
|
.home_header{
|
height: 64px; /*no*/
|
background: #4D88FF;
|
display: flex;
|
justify-content: space-between;
|
padding-left: 0px;
|
align-items: center;
|
color: #ffffff;
|
font-size: 20px; /*no*/
|
margin-bottom:10px;
|
}
|
.header_title{
|
display: flex;
|
align-items: center;
|
}
|
.header_title img{
|
width: 220px; /*no*/
|
height: 100%;
|
}
|
.header_title span{
|
font-size: 18px; /*no*/
|
font-weight: 400;
|
color: #FFFFFF;
|
margin-left: 40px;
|
}
|
.header_right{
|
display: flex;
|
justify-content: flex-end;
|
align-items: center;
|
}
|
.alarmList{
|
margin-right: 32px;
|
}
|
.home_aside{
|
background-color: #fff;
|
position: relative;
|
box-shadow: 0px 4px 12px 0px #EDEFF2;
|
}
|
.sidebar-bottom {
|
position: absolute;
|
bottom: 50px;
|
left: 0;
|
right: 0;
|
height: 48px;
|
|
.sidebar-container {
|
position: relative;
|
height: 48px;
|
}
|
}
|
|
.collapse-button {
|
position: absolute;
|
top: 0;
|
padding: 18px 20px;
|
// background: #4D88FF;
|
}
|
.home_aside.el-aside /deep/ .el-menu--collapse{
|
width: 80px; /*no*/
|
}
|
.el-aside /deep/ .el-submenu__title:hover{
|
color: #4D88FF !important;
|
background-color: #EBF1FF !important;
|
i{
|
color: #4D88FF !important;
|
}
|
i.icon-customer{
|
background: url('../../assets/aside/customer_active.png') no-repeat;
|
background-size: 20px 20px;
|
background-position: 0px 5px;
|
}
|
i.icon-financial{
|
background: url('../../assets/aside/financial_active.png') no-repeat;
|
background-size: 20px 20px;
|
background-position: 0px 5px;
|
}
|
i.icon-company{
|
background: url('../../assets/aside/company_active.png') no-repeat;
|
background-size: 20px 20px;
|
background-position: 0px 5px;
|
}
|
i.icon-order{
|
background: url('../../assets/aside/order_active.png') no-repeat;
|
background-size: 20px 20px;
|
background-position: 0px 5px;
|
}
|
i.icon-product{
|
background: url('../../assets/aside/product_active.png') no-repeat;
|
background-size: 20px 20px;
|
background-position: 0px 5px;
|
}
|
i.icon-system{
|
background: url('../../assets/aside/system_active.png') no-repeat;
|
background-size: 20px 20px;
|
background-position: 0px 5px;
|
}
|
i.icon-total{
|
background: url('../../assets/aside/total_active.png') no-repeat;
|
background-size: 20px 20px;
|
background-position: 0px 5px;
|
}
|
i.icon-workbench{
|
background: url('../../assets/aside/workbench_active.png') no-repeat;
|
background-size: 20px 20px;
|
background-position: 0px 5px;
|
}
|
i.icon-business{
|
background: url('../../assets/aside/business_active.png') no-repeat;
|
background-size: 20px 20px;
|
background-position: 0px 5px;
|
}
|
i.icon-personnel{
|
background: url('../../assets/aside/personnel_active.png') no-repeat;
|
background-size: 20px 20px;
|
background-position: 0px 5px;
|
}
|
}
|
.el-aside /deep/ .el-menu-item:hover, .el-menu-item:focus{
|
color: #4D88FF !important;
|
background-color: #EBF1FF !important;
|
i{
|
color: #4D88FF !important;
|
}
|
}
|
.el-menu--vertical /deep/ .el-menu-item:focus{
|
background-color: #EBF1FF !important;
|
}
|
.aside_menu{
|
border-right: none;
|
/deep/ .el-menu-item{
|
height: 40px;
|
line-height: 40px;
|
background: #F8F8F8 !important;
|
}
|
/deep/ .el-submenu__title{
|
display: flex;
|
font-size: 16px;
|
span{
|
flex: 1;
|
}
|
}
|
/deep/ .el-submenu.is-active .el-submenu__title{
|
color: #4D88FF !important;
|
font-size: 16px;
|
i{
|
color: #4D88FF !important;
|
}
|
i.icon-customer{
|
background: url('../../assets/aside/customer_active.png') no-repeat;
|
background-size: 20px 20px;
|
background-position: 0px 5px;
|
}
|
i.icon-financial{
|
background: url('../../assets/aside/financial_active.png') no-repeat;
|
background-size: 20px 20px;
|
background-position: 0px 5px;
|
}
|
i.icon-company{
|
background: url('../../assets/aside/company_active.png') no-repeat;
|
background-size: 20px 20px;
|
background-position: 0px 5px;
|
}
|
i.icon-order{
|
background: url('../../assets/aside/order_active.png') no-repeat;
|
background-size: 20px 20px;
|
background-position: 0px 5px;
|
}
|
i.icon-product{
|
background: url('../../assets/aside/product_active.png') no-repeat;
|
background-size: 20px 20px;
|
background-position: 0px 5px;
|
}
|
i.icon-system{
|
background: url('../../assets/aside/system_active.png') no-repeat;
|
background-size: 20px 20px;
|
background-position: 0px 5px;
|
}
|
i.icon-total{
|
background: url('../../assets/aside/total_active.png') no-repeat;
|
background-size: 20px 20px;
|
background-position: 0px 5px;
|
}
|
i.icon-workbench{
|
background: url('../../assets/aside/workbench_active.png') no-repeat;
|
background-size: 20px 20px;
|
background-position: 0px 5px;
|
}
|
i.icon-business{
|
background: url('../../assets/aside/business_active.png') no-repeat;
|
background-size: 20px 20px;
|
background-position: 0px 5px;
|
}
|
i.icon-personnel{
|
background: url('../../assets/aside/personnel_active.png') no-repeat;
|
background-size: 20px 20px;
|
background-position: 0px 5px;
|
}
|
}
|
/deep/ .el-menu-item:hover{
|
background-color: #EBF1FF !important;
|
}
|
/deep/ .el-menu-item.is-active{
|
background-color: #EBF1FF !important;
|
position: relation;
|
&:after{
|
content: '|';
|
width: 2px;
|
height: 40px;
|
background: #4D88FF;
|
position: absolute;
|
left: 0px;
|
}
|
}
|
}
|
|
.home_main{
|
background-color: #F5F6FA;
|
padding: 16px;
|
}
|
.wk-bell{
|
cursor: pointer;
|
font-size: 20px;
|
&:hover{
|
color: #2362fb;
|
}
|
}
|
.user-container {
|
display: flex;
|
align-items: center;
|
flex-shrink: 0;
|
cursor: pointer;
|
.user-img {
|
display: block;
|
width: 32px; /*no*/
|
min-width: 32px;
|
min-height: 32px;
|
height: 32px; /*no*/
|
border-radius: 50%;
|
}
|
.user-name{
|
font-size: 14px; /*no*/
|
font-weight: 400;
|
color: #FFFFFF;
|
margin-left: 12px;
|
margin-right:40px;
|
}
|
.goout{
|
width: 20px; /*no*/
|
height: 20px; /*no*/
|
}
|
.mark {
|
font-size: 15px;
|
color: #aaaaaa;
|
}
|
}
|
|
.user-container:hover {
|
.mark {
|
color: #2486e4;
|
}
|
}
|
}
|
.handel-items {
|
padding: 10px 0 18px 0;
|
.handel-item {
|
padding: 5px 20px;
|
font-size: 14px;
|
color: #aaa;
|
cursor: pointer;
|
i {
|
margin-right: 8px;
|
font-size: 15px;
|
}
|
}
|
.handel-item:hover {
|
background-color: #f7f8fa;
|
color: #4D88FF;
|
}
|
.handel-box {
|
padding: 0 15px;
|
.handel-button {
|
width: 100%;
|
border-radius: 4px;
|
border-color: #009df0;
|
background-color: #009df0;
|
}
|
}
|
}
|
</style>
|
