improve: 后台菜单

This commit is contained in:
From-wh 2023-02-22 19:47:39 +08:00
parent edaf7526d7
commit 6daab83907
8 changed files with 106 additions and 59 deletions

View File

@ -30,7 +30,7 @@
:key="`drop-${child.path}`"
></collapsed-menu>
<DropdownItem v-else :key="`drop-${child.path}`" :name="child.path"
><common-icon :type="child.icon" /><span class="menu-title">{{ child.title }}1</span></DropdownItem
><common-icon :type="child.icon" /><span class="menu-title">{{ child.title }}</span></DropdownItem
>
</template>
</div>

View File

@ -36,7 +36,7 @@
}
}
.ivu-select-dropdown{
left: 95px !important;
// left: 95px !important;
}
.menu-title {
// padding-left: 6px;

View File

@ -146,29 +146,108 @@ export default {
catName: '',
};
},
computed: {
...mapState('menus', ['openMenus']),
textColor() {
return this.theme === 'dark' ? '#fff' : '#495060';
},
},
watch: {
activeName(name) {
if (this.accordion) this.openedNames = this.getOpenedNamesByActiveName();
else this.openedNames = getUnion(this.openedNames, this.getOpenedNamesByActiveName());
// this.handleSelect(this.activeName);
},
openNames(newNames) {
this.openedNames = newNames;
},
openedNames() {
this.$nextTick(() => {
this.$refs.menu.updateOpened();
});
},
$route(newRoute) {},
$route: {
handler(newRoute) {
console.log(newRoute, 'newRoutenewRoute');
this.activePath = newRoute.path;
// this.activeMenuPath = newRoute.matched[0].path;
this.handleUpdateMenuState();
},
immediate: true,
},
},
mounted() {
console.log(this.menuList);
this.openedNames = getUnion(this.openedNames, this.getOpenedNamesByActiveName());
if (sessionStorage.getItem('menuActive')) {
this.activeMenuPath = sessionStorage.getItem('menuActive');
this.catName = sessionStorage.getItem('menuActiveTitle');
this.getChildrenList(sessionStorage.getItem('menuActive'));
} else {
console.log(this.openedNames);
this.handleSelect(this.openedNames[0]);
}
},
methods: {
getChildrenList(path) {
this.menuList.map((e) => {
if (e.path === path) {
console.log(e, 'eeee');
this.childList = e.children || [];
}
});
},
handleSelect(name, type) {
if (!type) {
this.$emit('on-select', name);
}
this.childOptions = [];
this.menuList.map((e) => {
if (e.path === name) {
console.log(e, 'eeee');
if (e.children) {
if (e.children && e.children.length) {
console.log(e.children, 'e.children');
this.jump(e.children);
this.catName = e.title;
this.activeMenuPath = e.path;
console.log('1');
// this.activeMenuPath = e.path;
this.childList = e.children || [];
this.activeChildName = e.children[0].path;
this.childOptions = [e.children[0].path];
sessionStorage.setItem('menuActive', e.path);
sessionStorage.setItem('menuActiveTitle', e.title);
this.activeMenuPath = e.path;
// this.activeChildName = e.children[0].path;
// this.childOptions = [e.children[0].path];
this.$store.commit('menus/childMenuList', this.childList);
// if (!type) {
// this.$emit('on-select', e.children[0].path);
// }
} else {
console.log('2');
if (!type) {
this.$emit('on-select', name);
}
this.activeMenuPath = e.path;
this.childList = [];
this.$store.commit('menus/childMenuList', []);
}
}
});
},
jump(data) {
if (data[0].children && data[0].children.length) {
console.log('3');
this.jump(data[0].children);
} else {
console.log('4');
this.catName = data[0].title;
// this.activeMenuPath = data[0].path;
this.activeChildName = data[0].path;
this.childOptions = [data[0].path];
this.$store.commit('menus/childMenuList', this.childList);
this.$emit('on-select', data[0].path);
}
},
handleChildSelect(name) {
this.turnToPage(name);
},
@ -212,43 +291,6 @@ export default {
});
},
},
computed: {
...mapState('menus', ['openMenus']),
textColor() {
return this.theme === 'dark' ? '#fff' : '#495060';
},
},
watch: {
activeName(name) {
if (this.accordion) this.openedNames = this.getOpenedNamesByActiveName();
else this.openedNames = getUnion(this.openedNames, this.getOpenedNamesByActiveName());
// this.handleSelect(this.activeName);
},
openNames(newNames) {
this.openedNames = newNames;
},
openedNames() {
this.$nextTick(() => {
this.$refs.menu.updateOpened();
});
},
$route(newRoute) {},
$route: {
handler(newRoute) {
console.log(newRoute, 'newRoutenewRoute');
this.activePath = newRoute.path;
this.activeMenuPath = newRoute.matched[0].path;
this.handleUpdateMenuState();
console.log(activeMenuPath, 'activeMenuPath');
},
immediate: true,
},
},
mounted() {
this.openedNames = getUnion(this.openedNames, this.getOpenedNamesByActiveName());
this.handleSelect(this.openedNames[0], 'one');
this.activeMenuPath = this.openedNames[0];
},
};
</script>
<style lang="less">
@ -345,6 +387,7 @@ export default {
display: flex;
align-items: center;
.title {
font-size: 14px;
line-height: 14px;
}
}
@ -355,11 +398,12 @@ export default {
.child-menu {
z-index: 88;
.ivu-menu-vertical .ivu-menu-item {
padding: 12px 10px;
padding: 13px 10px;
display: flex;
align-items: center;
.title {
line-height: 14px;
font-size: 13px;
line-height: 13px;
}
}
.ivu-menu-submenu {
@ -373,11 +417,12 @@ export default {
}
}
.ivu-menu-vertical .ivu-menu-submenu-title {
font-size: 13px;
padding: 12px 10px;
line-height: 16px;
}
.cat-name {
font-size: 16px;
font-size: 14px;
line-height: 16px;
font-weight: 600;
color: #303133;

View File

@ -62,11 +62,12 @@ export default {
AccountLogout()
.then((res) => {
that.$Message.success('您已成功退出');
that.$router.replace({name:'login'});
that.$router.replace({ name: 'login' });
localStorage.clear();
removeCookies('token');
removeCookies('expires_time');
removeCookies('uuid');
sessionStorage.clear();
// window.location.reload()
})
.catch((res) => {});
@ -74,10 +75,10 @@ export default {
});
},
userCenter() {
this.$router.push({name:'systemUser'});
this.$router.push({ name: 'systemUser' });
},
fileEdit() {
this.$router.push({name:'systemFiles'});
this.$router.push({ name: 'systemFiles' });
},
message() {
this.$router.push({

View File

@ -31,7 +31,7 @@
background: #f0f0f0;
}
.content-wrapper {
padding: 16px;
margin: 0 16px;
height: ~'calc(100% - 80px)';
overflow: auto;
}

View File

@ -42,10 +42,10 @@
</Sider>
<Content class="main-content-con">
<Layout class="main-layout-con">
<div class="tag-nav-wrapper" v-if="!headMenuNoShow">
<tags-nav :value="$route" @input="handleClick" :list="tagNavList" @on-close="handleCloseTag" />
</div>
<Content class="content-wrapper">
<div class="tag-nav-wrapper" v-if="!headMenuNoShow">
<tags-nav :value="$route" @input="handleClick" :list="tagNavList" @on-close="handleCloseTag" />
</div>
<!-- <keep-alive :include="cacheList">
<router-view v-if="reload" style="min-height: 600px" />
</keep-alive> -->
@ -104,7 +104,7 @@ export default {
},
data() {
return {
collapsed: JSON.parse(getCookies('collapsed') || 'false'),
collapsed: JSON.parse(getCookies('collapsed') || 'true'),
minLogo,
maxLogo,
isFullscreen: false,

View File

@ -19,7 +19,7 @@ export default {
name: 'marketing',
header: 'marketing',
redirect: {
name: `${pre}storeCoupon`,
name: `${pre}storeCouponIssue`,
},
component: BasicLayout,
children: [

View File

@ -186,6 +186,7 @@ body {
.ivu-layout-content {
overflow-x: hidden !important;
height: 100%;
}
.page {
@ -682,7 +683,7 @@ body {
/* form-create tips 样式 */
.tips-info {
line-height: 18px;
margin-top: 8px;
margin-top: 3px;
color: rgb(153, 153, 153);
}
.pt10{