|
|
<template>
|
|
|
<div class>
|
|
|
<div>
|
|
|
<div class="topmenu" style="display: flex;justify-content: space-between;background-color: #fff; box-shadow: 1px 1px 2px #e8e8e8; position: fixed; top: 0; z-index: 100">
|
|
|
<div style>
|
|
|
<div class="logo" style="box-shadow: none; min-width: 160px; max-width: 160px; margin-left: -8px">
|
|
|
<div @click.stop="clearOpenkey" style="cursor: pointer; border-right: 1px solid #eee;">
|
|
|
<router-link to="/main">
|
|
|
<img src="https://matripe-cms.oss-cn-beijing.aliyuncs.com/1shoudan/daotianLogo.svg" alt />
|
|
|
<!-- <router-link :to="{name:'home'}"><img src="http://matripeweb.oss-cn-hangzhou.aliyuncs.com/antd/adminLogo.svg" alt=""> -->
|
|
|
<h1>商家管理后台</h1>
|
|
|
<!-- style="position: relative;top: -1px;" -->
|
|
|
</router-link>
|
|
|
</div>
|
|
|
</div>
|
|
|
<a-menu :selectedKeys="[$route.name]" :openKeys.sync="openKeys" @click="handleClick" class mode="inline" style="overflow-y:scroll;height:calc(100vh - 49px);overflow-x:hidden">
|
|
|
<template v-for="(item, index) in roles">
|
|
|
<a-menu-item :key="item.name" v-if="item.path != '' && item.level < 3">
|
|
|
<router-link :to="{ name: item.name }">
|
|
|
<i class="iconfont f12 mr8" :class="item.icon" />
|
|
|
<a-badge dot v-if="myStatisticRedDot && item.name == 'myStatistic'">
|
|
|
<span class="nav-text" v-text="item.title"></span>
|
|
|
</a-badge>
|
|
|
<span v-else class="nav-text" v-text="item.title"></span>
|
|
|
</router-link>
|
|
|
</a-menu-item>
|
|
|
<a-sub-menu :key="item.name" v-if="item.path == ''">
|
|
|
<span slot="title">
|
|
|
<i class="iconfont f12 mr8" :class="item.icon" />
|
|
|
<span v-text="item.title"></span>
|
|
|
</span>
|
|
|
<a-menu-item-group>
|
|
|
<a-menu-item class="f14" :key="child.name" v-for="(child, idx) in item.children">
|
|
|
<!-- <router-link :to="{name:child.name}" :target="child.title == '监控页' ? '_blank' : '_self'"> -->
|
|
|
<router-link :to="{ name: child.name }">{{ child.title }}</router-link>
|
|
|
</a-menu-item>
|
|
|
</a-menu-item-group>
|
|
|
</a-sub-menu>
|
|
|
</template>
|
|
|
</a-menu>
|
|
|
</div>
|
|
|
<div class="flex1" style="z-index: 999">
|
|
|
<div class="logined mr24 fsa" style="height:48px;line-height:48px;">
|
|
|
<div class="fl">
|
|
|
<span class="f16 ml16 fw500 c085">{{ currentPage }}</span>
|
|
|
</div>
|
|
|
<a-dropdown overlayClassName="logindropdown" placement="bottomRight">
|
|
|
<!-- <img :src="userbaseInfo.imgSrc" alt="" v-if="userbaseInfo.imgSrc !== ''" style="border-radius: 50%" />
|
|
|
<span v-else><i class="iconfont icon-morentouxiang" style="color:#ff4400"></i></span>-->
|
|
|
<span class="fsa f14">
|
|
|
<span class="iconfont icon-morentouxiang mr4 f32" v-if="!userbaseInfo.imgSrc"></span>
|
|
|
<img :src="userbaseInfo.imgSrc" class="mr4" style="border-radius:50%;width:32px;height:32px;" alt v-else />
|
|
|
<div class="ml4">{{ userbaseInfo.userName }}</div>
|
|
|
</span>
|
|
|
<div class="loginbox backTable" slot="overlay">
|
|
|
<router-link to="/accountsetting">
|
|
|
<div>
|
|
|
<span>
|
|
|
<i class="iconfont icon-gerenzhongxin"></i>个人中心
|
|
|
</span>
|
|
|
<i class="iconfont icon-youjiantou"></i>
|
|
|
</div>
|
|
|
</router-link>
|
|
|
<router-link to="/main">
|
|
|
<div>
|
|
|
<span>
|
|
|
<i class="iconfont icon-shangjiahoutai"></i>返回首页
|
|
|
</span>
|
|
|
<i class="iconfont icon-youjiantou"></i>
|
|
|
</div>
|
|
|
</router-link>
|
|
|
<button @click="logout">退出登录</button>
|
|
|
</div>
|
|
|
</a-dropdown>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<a-layout-content class="trans" style="padding-top: 64px;">
|
|
|
<!-- <div id="littleUse" style="margin-top: 48px"> -->
|
|
|
<router-view @setTitle="setTitle"></router-view>
|
|
|
<!-- </div> -->
|
|
|
</a-layout-content>
|
|
|
|
|
|
<div class="backFooter" style="height: 64px;background-color: #f5f5f5;line-height: 64px;color: #999;font-size: 14px;text-align: center;padding-left: 152px;">Copyright © 2015 - 2021 Matripe. All Rights Reserved.</div>
|
|
|
</div>
|
|
|
<!-- <notice @parentPageCallBack="showMessageFromChild" ref="child"></notice> -->
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { logoutApi } from '../api/login'
|
|
|
|
|
|
export default {
|
|
|
inject: ['reload'],
|
|
|
|
|
|
// 组件名称
|
|
|
name: '',
|
|
|
// 局部注册的组件
|
|
|
components: {},
|
|
|
// 组件参数 接收来自父组件的数据
|
|
|
props: {},
|
|
|
// 组件状态值
|
|
|
data() {
|
|
|
return {
|
|
|
roles: [
|
|
|
{
|
|
|
id: 294,
|
|
|
parentId: '',
|
|
|
name: 'dashboard',
|
|
|
url: ' ',
|
|
|
icon: 'icon-yibiaopan',
|
|
|
component: '',
|
|
|
path: '',
|
|
|
title: '仪表盘',
|
|
|
menuName: 'dashboard',
|
|
|
level: 1,
|
|
|
menuType: 1,
|
|
|
children: [
|
|
|
// {
|
|
|
// id: 295,
|
|
|
// parentId: 294,
|
|
|
// name: 'MemberInfo',
|
|
|
// url: '/memberInfo',
|
|
|
// icon: '',
|
|
|
// component: 'home',
|
|
|
// path: '/home',
|
|
|
// title: '我的团队',
|
|
|
// menuName: 'dashboard',
|
|
|
// level: 2,
|
|
|
// menuType: 1,
|
|
|
// children: '',
|
|
|
// },
|
|
|
{
|
|
|
id: -110,
|
|
|
parentId: 294,
|
|
|
name: 'WorkBench',
|
|
|
url: 'http://www.idaotian.com/box/btv/#/',
|
|
|
icon: 'home',
|
|
|
component: '',
|
|
|
path: 'http://www.idaotian.com/box/btv/#/',
|
|
|
title: '工作台',
|
|
|
menuName: '工作台',
|
|
|
},
|
|
|
{
|
|
|
id: -110,
|
|
|
parentId: 294,
|
|
|
name: 'BocaiTV',
|
|
|
url: 'http://www.idaotian.com/box/btv/#/',
|
|
|
icon: 'home',
|
|
|
component: '',
|
|
|
path: 'http://www.idaotian.com/box/btv/#/',
|
|
|
title: '伯才TV',
|
|
|
menuName: '伯才TV',
|
|
|
},
|
|
|
{
|
|
|
id: 402,
|
|
|
parentId: 294,
|
|
|
name: 'DataScreen',
|
|
|
url: '/statistics/dataScreen',
|
|
|
icon: '',
|
|
|
component: 'statistics/dataScreen',
|
|
|
path: '/statistics/dataScreen',
|
|
|
title: '数据大屏',
|
|
|
menuName: 'dashboard',
|
|
|
level: 2,
|
|
|
menuType: 1,
|
|
|
children: '',
|
|
|
},
|
|
|
],
|
|
|
},
|
|
|
{
|
|
|
id: 294,
|
|
|
parentId: '',
|
|
|
name: 'teammanagement',
|
|
|
url: ' ',
|
|
|
icon: 'icon-tuanduiguanli',
|
|
|
|
|
|
component: '',
|
|
|
path: '',
|
|
|
title: '团队管理',
|
|
|
menuName: 'teammanagement',
|
|
|
level: 1,
|
|
|
menuType: 1,
|
|
|
children: [
|
|
|
{
|
|
|
id: 295,
|
|
|
parentId: 294,
|
|
|
name: 'MemberInfo',
|
|
|
url: '/memberInfo',
|
|
|
icon: '',
|
|
|
component: 'home',
|
|
|
path: '/home',
|
|
|
title: '团队成员',
|
|
|
menuName: 'teammanagement',
|
|
|
level: 2,
|
|
|
menuType: 1,
|
|
|
children: '',
|
|
|
},
|
|
|
{
|
|
|
id: 296,
|
|
|
parentId: 294,
|
|
|
name: 'RoleManagement',
|
|
|
url: '/memberInfo',
|
|
|
icon: '',
|
|
|
component: 'home',
|
|
|
path: '/home',
|
|
|
title: '角色管理',
|
|
|
menuName: 'teammanagement',
|
|
|
level: 2,
|
|
|
menuType: 1,
|
|
|
children: '',
|
|
|
},
|
|
|
],
|
|
|
},
|
|
|
{
|
|
|
id: 294,
|
|
|
parentId: '',
|
|
|
name: 'group',
|
|
|
url: ' ',
|
|
|
icon: 'icon-shujutongji',
|
|
|
component: '',
|
|
|
path: '',
|
|
|
title: '数据统计',
|
|
|
menuName: 'group',
|
|
|
level: 1,
|
|
|
menuType: 1,
|
|
|
children: [
|
|
|
{
|
|
|
id: 295,
|
|
|
parentId: 294,
|
|
|
name: 'DataStatistics',
|
|
|
url: '/memberInfo',
|
|
|
icon: '',
|
|
|
component: 'home',
|
|
|
path: '/home',
|
|
|
title: '团队数据',
|
|
|
menuName: 'group',
|
|
|
level: 2,
|
|
|
menuType: 1,
|
|
|
children: '',
|
|
|
},
|
|
|
],
|
|
|
},
|
|
|
{
|
|
|
id: 294,
|
|
|
parentId: '',
|
|
|
name: 'container',
|
|
|
url: ' ',
|
|
|
icon: 'icon-neirongguanli',
|
|
|
component: '',
|
|
|
path: '',
|
|
|
title: '内容管理',
|
|
|
menuName: 'container',
|
|
|
level: 1,
|
|
|
menuType: 1,
|
|
|
children: [
|
|
|
{
|
|
|
id: 295,
|
|
|
parentId: 294,
|
|
|
name: 'NotificationCenter',
|
|
|
url: '/memberInfo',
|
|
|
icon: '',
|
|
|
component: 'home',
|
|
|
path: '/home',
|
|
|
title: '通知中心',
|
|
|
menuName: 'container',
|
|
|
level: 2,
|
|
|
menuType: 1,
|
|
|
children: '',
|
|
|
},
|
|
|
],
|
|
|
},
|
|
|
],
|
|
|
openKeys: ['dashboard'],
|
|
|
userbaseInfo: JSON.parse(localStorage.getItem('LOGIN_DATA')),
|
|
|
currentPage: '',
|
|
|
}
|
|
|
},
|
|
|
// 计算属性
|
|
|
computed: {},
|
|
|
// 侦听器
|
|
|
watch: {},
|
|
|
// 生命周期钩子 注：没用到的钩子请自行删除
|
|
|
/**
|
|
|
* 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
|
|
|
*/
|
|
|
created() {},
|
|
|
/**
|
|
|
* el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
|
|
|
* 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
|
|
|
*/
|
|
|
mounted() {},
|
|
|
// 组件方法
|
|
|
methods: {
|
|
|
handleClick(e) {
|
|
|
console.log(e)
|
|
|
this.openKeys = e.keyPath
|
|
|
// console.log('click', e.key + "===" + this.sk)
|
|
|
|
|
|
if (e.key == 13) {
|
|
|
this.secondmenu = true
|
|
|
} else {
|
|
|
this.secondmenu = false
|
|
|
}
|
|
|
},
|
|
|
async logout() {
|
|
|
try {
|
|
|
const data = await logoutApi()
|
|
|
console.log(data)
|
|
|
if (data.status === 200) {
|
|
|
localStorage.removeItem('LOGIN_DATA')
|
|
|
this.reload()
|
|
|
this.$router.push('/main')
|
|
|
} else {
|
|
|
console.log(1)
|
|
|
}
|
|
|
} catch (error) {
|
|
|
console.log(error)
|
|
|
this.$message.warning(error.message)
|
|
|
}
|
|
|
},
|
|
|
setTitle(e) {
|
|
|
console.log(e)
|
|
|
this.currentPage = e
|
|
|
},
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="less">
|
|
|
@import 'http://matripeweb.oss-cn-hangzhou.aliyuncs.com/antd/ant.css';
|
|
|
@import '//at.alicdn.com/t/c/font_3280016_tiqe2sb1q2.css';
|
|
|
|
|
|
body {
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
background: #f0f2f5;
|
|
|
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
|
|
|
}
|
|
|
|
|
|
.ant-menu {
|
|
|
border-right: 1px solid #eee !important;
|
|
|
&::-webkit-scrollbar {
|
|
|
width: 0 !important;
|
|
|
}
|
|
|
}
|
|
|
header.header,
|
|
|
.left-sider {
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
|
|
|
#littleUse {
|
|
|
min-height: calc(100vh - 118px);
|
|
|
min-width: 1080px;
|
|
|
}
|
|
|
|
|
|
.trans {
|
|
|
-webkit-transition: all 0.2s;
|
|
|
// height: calc(100vh - 64px);
|
|
|
min-height: calc(100vh - 64px);
|
|
|
overflow: auto;
|
|
|
background-color: #f5f5f5;
|
|
|
transition: all 0.2s;
|
|
|
padding: 18px;
|
|
|
padding-right: 36px;
|
|
|
padding-bottom: 0;
|
|
|
// padding-right: 32px;
|
|
|
margin-left: 152px !important;
|
|
|
}
|
|
|
|
|
|
.header {
|
|
|
background-color: #fff;
|
|
|
padding: 0;
|
|
|
width: 100%;
|
|
|
z-index: 90;
|
|
|
/*box-shadow: 1px 1px 2px #ddd;*/
|
|
|
border-bottom: 1px solid #e8e8e8;
|
|
|
}
|
|
|
.logo {
|
|
|
background: #fff;
|
|
|
/*border-right: 1px solid #e8e8e8;*/
|
|
|
border-bottom: 1px solid #e8e8e8;
|
|
|
position: relative;
|
|
|
height: 49px;
|
|
|
overflow: hidden;
|
|
|
line-height: 48px;
|
|
|
background: #fff;
|
|
|
margin-left: -8px;
|
|
|
-webkit-transition: all 0.3s;
|
|
|
transition: all 0.3s;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
.logo img,
|
|
|
.topLogo {
|
|
|
height: 18px;
|
|
|
width: 18px;
|
|
|
display: inline-block;
|
|
|
vertical-align: middle;
|
|
|
overflow: hidden;
|
|
|
margin-bottom: 3px;
|
|
|
}
|
|
|
|
|
|
.logo h1 {
|
|
|
font-size: 16px;
|
|
|
margin: 0 0 0 4px;
|
|
|
font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
|
|
|
font-weight: 500;
|
|
|
vertical-align: middle;
|
|
|
display: inline-block;
|
|
|
}
|
|
|
|
|
|
#components-layout-demo-top-side-2 .logo {
|
|
|
width: 130px !important;
|
|
|
background: url(http://matripe.oss-cn-beijing.aliyuncs.com/adminlogo.png) !important;
|
|
|
}
|
|
|
|
|
|
.breadcrumb {
|
|
|
.breadcrumb-menu {
|
|
|
margin-top: 16px;
|
|
|
}
|
|
|
|
|
|
h2 {
|
|
|
margin-bottom: 0;
|
|
|
font-size: 20px;
|
|
|
float: left;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.breadcrumb {
|
|
|
background-color: #fff;
|
|
|
padding: 16px 24px;
|
|
|
}
|
|
|
|
|
|
.sm-breadcrumb {
|
|
|
padding: 0 16px;
|
|
|
|
|
|
.ant-tabs .ant-tabs-small-bar .ant-tabs-nav-container {
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
|
|
|
.breadcrumb-menu.pb0 {
|
|
|
padding-bottom: 0;
|
|
|
}
|
|
|
|
|
|
.ant-tabs-bar {
|
|
|
border-bottom: 0;
|
|
|
}
|
|
|
|
|
|
.breadcrumb h2 {
|
|
|
margin-bottom: 0;
|
|
|
font-size: 20px;
|
|
|
float: left;
|
|
|
}
|
|
|
|
|
|
.ant-tabs-bar.ant-tabs-top-bar {
|
|
|
margin-bottom: 0;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.sm-breadcrumb .breadcrumb-menu {
|
|
|
margin-top: 0px;
|
|
|
padding: 16px 0;
|
|
|
}
|
|
|
|
|
|
.p30.sm-p30 {
|
|
|
padding: 16px;
|
|
|
}
|
|
|
|
|
|
/*.ant-modal-body .ant-table-tbody > tr > td,.ant-modal-body .ant-table-thead > tr > th {
|
|
|
white-space: initial;
|
|
|
}
|
|
|
*/
|
|
|
|
|
|
.ant-table-tbody > tr > td:first-child {
|
|
|
overflow: initial;
|
|
|
white-space: initial;
|
|
|
text-overflow: initial;
|
|
|
}
|
|
|
|
|
|
.specialNullA:empty:before {
|
|
|
content: '-';
|
|
|
color: #333;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
|
|
|
.header,
|
|
|
.left-sider {
|
|
|
position: fixed;
|
|
|
font-size: 12px;
|
|
|
/*-webkit-box-shadow: 1px 1px 2px #ddd;
|
|
|
box-shadow: 1px 1px 2px #ddd;*/
|
|
|
}
|
|
|
|
|
|
/deep/.ant-menu-item-group-title {
|
|
|
padding: 0 !important;
|
|
|
}
|
|
|
|
|
|
.topmenu {
|
|
|
width: 100%;
|
|
|
height: 48px;
|
|
|
}
|
|
|
|
|
|
.ant-layout-header {
|
|
|
height: 49px;
|
|
|
line-height: 49px;
|
|
|
}
|
|
|
.logined {
|
|
|
overflow: hidden;
|
|
|
// border: 1px solid #eee;
|
|
|
line-height: 38px;
|
|
|
font-size: 14px;
|
|
|
cursor: default;
|
|
|
&:hover {
|
|
|
// color: #ff4400;
|
|
|
}
|
|
|
img {
|
|
|
width: 24px;
|
|
|
height: 24px;
|
|
|
}
|
|
|
}
|
|
|
.loginbox {
|
|
|
> div:first-child {
|
|
|
text-align: left;
|
|
|
padding-left: 0;
|
|
|
}
|
|
|
}
|
|
|
/deep/.ant-tag {
|
|
|
&.ant-tag-checkable:hover {
|
|
|
// color: #ff4400;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
&.ant-tag-checkable:active {
|
|
|
// color: #ff4400;
|
|
|
background-color: transparent;
|
|
|
}
|
|
|
&.ant-tag-checkable-checked {
|
|
|
background-color: transparent;
|
|
|
color: #1890ff;
|
|
|
}
|
|
|
}
|
|
|
/deep/.spinstyle {
|
|
|
.ant-spin-dot-item {
|
|
|
background-color: #1890ff !important;
|
|
|
}
|
|
|
.ant-spin-text {
|
|
|
color: #1890ff !important;
|
|
|
}
|
|
|
}
|
|
|
.backFooter {
|
|
|
position: unset;
|
|
|
// bottom: 0;
|
|
|
}
|
|
|
</style>
|