Skip to content

D
dcxy-system
Commit 2b8df781 by 姜雷
Options

完成快速访问菜单功能

parent 02d17ae6
Showing with 283 additions and 100 deletions
.env
VUE_APP_LIB_MANAGER=http://ex-dev-dcxy-static.168cad.top
VUE_APP_BASE_URL=/systemManageShell/
VUE_APP_MENU_CODE=0003
VUE_APP_CUSTOMER_MENU_CODE=0001
VUE_APP_BASE_MENU_CODE=0002
VUE_APP_SYSTEM_MENU_CODE=0003
VUE_APP_WHITE_LIST=/login,/404,/401
VUE_APP_SYSTEM_SERVER_URL=http://ex-dev-dcxy-system-manage.168cad.top
VUE_APP_CUSTOMER_SERVER_URL=http://ex-dev-customer-manage.168cad.top
......
.env.dev
NODE_ENV = production
VUE_APP_SYSTEM_SERVER_URL=http://192.168.1.33:8886
VUE_APP_SYSTEM_SERVER_URL=http://ex-dev-dcxy-system-manage.168cad.top
VUE_APP_CUSTOMER_SERVER_URL=http://ex-dev-customer-manage.168cad.top
VUE_APP_BASE_SERVER_URL=http://ex-dev-dcxy-base-manage.168cad.top
VUE_APP_BASE_SERVER_URL_APP=http://ex-dev-dcxy-base-app.168cad.top
......
src/App.vue
......@@ -9,6 +9,7 @@
<IconMenus
:routers="allRoutes"
:dashboardVisiable="dashboardVisiable"
:toggleFastLink="toggleFastLink"
/>
</div>
<template v-if="dashboardVisiable">
......@@ -19,7 +20,7 @@
</template>
<template v-else>
<template slot="nav">
<sidebar-nav
<CollectMenu
v-if="showFastLink"
:routers="route"
/>
......@@ -42,13 +43,14 @@
<script>
import UserBox from './containers/layout/components/UserBox';
import IconMenus from './containers/layout/components/IconMenu';
import IconMenus from './containers/layout/IconMenu/IconMenu';
import CollectMenu from './containers/layout/Collect/Collect';
const whiteList = process.env.VUE_APP_WHITE_LIST.split(','); // 不重定向白名单
export default {
name: 'App',
components: { UserBox, IconMenus },
components: { UserBox, IconMenus, CollectMenu },
props: {
route: {
type: Array,
......@@ -81,8 +83,6 @@ export default {
watch: {
$route(newVal) {
this.routerDone = false;
console.log(newVal);
if (newVal.meta && newVal.meta.store) {
this.showComponents(newVal.meta.store);
} else {
......@@ -91,9 +91,6 @@ export default {
},
},
methods: {
toggleDashboard() {
this.dashboardVisiable = !this.dashboardVisiable;
},
showComponents(store) {
this.isInnerPage =
whiteList.indexOf(this.$route.path) !== -1 ? false : true;
......@@ -106,6 +103,9 @@ export default {
this.routerDone = true;
}
},
toggleFastLink(entity) {
this.showFastLink = entity;
},
},
};
</script>
......
src/api/menu/menu.js 0 → 100644
import fetch from '@/api/fetch';
const path = process.env.VUE_APP_SYSTEM_SERVER_URL;
export const fetchCollectList = req =>
fetch({
url: path + '/adminChange/queryCollect',
timeout: 30000,
...req,
});
export const addCollect = req =>
fetch({
url: path + '/adminChange/saveCollect',
method: 'post',
...req,
});
export const delCollect = req =>
fetch({
url: path + '/adminChange/delteCollect',
...req,
});
src/containers/layout/Collect/Collect.vue 0 → 100644
<template>
<div
class="Collect"
v-if="collectList && collectList.length"
>
<sidebar-nav :routers="routeList" />
</div>
</template>
<script>
import CollectMixin from '@/mixins/collect/collect.js';
import { getCollectMenu } from '@/utils/route';
export default {
name: 'Collect',
mixins: [CollectMixin],
props: {
routers: {
type: Array,
default: () => [],
},
},
computed: {
routeList() {
return this.collectList.map(item => {
let name = item.menuId.toString();
return getCollectMenu(this.routers, name);
});
},
},
};
</script>
src/containers/layout/components/IconMenu.vue → src/containers/layout/IconMenu/IconMenu.vue
......@@ -22,12 +22,12 @@
src="@/assets/images/layout/icon_huiyuanguanli@2x.png"
/>
</MenuItem>
<MenuItem menuName="自助运营">
<!-- <MenuItem menuName="自助运营">
<img
slot="icon"
src="@/assets/images/layout/icon_zizhuyunying@2x.png"
/>
</MenuItem>
</MenuItem> -->
<MenuItem
v-if="baseManage && baseManage.length"
menuName="基础数据"
......@@ -38,12 +38,12 @@
src="@/assets/images/layout/icon_jichu@2x.png"
/>
</MenuItem>
<MenuItem menuName="统计系统">
<!-- <MenuItem menuName="统计系统">
<img
slot="icon"
src="@/assets/images/layout/icon_tongji@2x.png"
/>
</MenuItem>
</MenuItem> -->
<MenuItem
v-if="systemManage && systemManage.length"
menuName="系统管理"
......@@ -54,23 +54,27 @@
src="@/assets/images/layout/icon_xitong@2x.png"
/>
</MenuItem>
<MenuItem menuName="全业态">
<div @click="() => toggleFastLink(false)">
<MenuItem menuName="全业态">
<img
slot="icon"
src="@/assets/images/layout/icon_quanyetai@2x.png"
/>
</MenuItem>
</div>
</div>
<div @click="() => toggleFastLink(true)">
<MenuItem
:class="`fastLink ${dashboardVisiable?'marleft':''}`"
menuName="快速访问"
>
<img
slot="icon"
src="@/assets/images/layout/icon_quanyetai@2x.png"
src="@/assets/images/layout/icon_ksfw.png"
/>
</MenuItem>
</div>
<MenuItem
:class="`fastLink ${dashboardVisiable?'marleft':''}`"
menuName="快速访问"
>
<img
slot="icon"
src="@/assets/images/layout/icon_ksfw.png"
/>
</MenuItem>
<div
class="DashboardButton"
@click="clickHandle"
......@@ -88,7 +92,7 @@
</template>
<script>
import MenuItem from './MenuItem';
import MenuItem from './components/MenuItem';
import { mapGetters } from 'vuex';
import { formatRouteLink } from '@/utils/route';
......@@ -103,6 +107,9 @@ export default {
dashboardVisiable: {
type: Boolean,
},
toggleFastLink: {
type: Function,
},
},
data() {
return {
......
src/containers/layout/IconMenu/components/LikeIcon.vue 0 → 100644
<template>
<div
class="like-icon"
@click="collectHandle"
>
<img
v-if="isLike"
src="@/assets/images/layout/icon_pre_shoucang .png"
>
<img
v-else
src="@/assets/images/layout/icon_nor_weishoucang.png"
>
</div>
</template>
<script>
import CollectMixin from '@/mixins/collect/collect';
export default {
name: 'LikeIcon',
mixins: [CollectMixin],
props: {
name: {
type: String,
},
},
computed: {
isLike() {
return this.collectList.find(item => item.menuId == this.name)
? true
: false;
},
},
methods: {
collectHandle() {
if (this.isLike) {
this.delCollect({
id: this.name,
});
} else {
this.addCollect({
menuId: this.name,
});
}
},
},
};
</script>
src/containers/layout/components/MenuItem.vue → src/containers/layout/IconMenu/components/MenuItem.vue
......@@ -16,66 +16,35 @@
<div
:class="`SubmenuBox ${showSubMenus?'show':''}`"
:style="style"
v-if="menuList && menuList.length"
>
<div class="Submenu">
<div
class="Submenu"
v-for="(item, index) in menuList"
:key="index"
>
<div class="Submenu-title">
<span>会员管理</span>
<span class="like-icon"><img src="@/assets/images/layout/icon_nor_weishoucang.png"></span>
</div>
<div class="Submenu-list">
<div class="Submenu-link">
<span class="like-icon"><img src="@/assets/images/layout/icon_nor_weishoucang.png"></span>
<span class="Submenu-link-text">会员信息</span>
</div>
<div class="Submenu-link">
<span class="like-icon"><img src="@/assets/images/layout/icon_nor_weishoucang.png"></span>
<span class="Submenu-link-text">会员反馈</span>
</div>
<div class="Submenu-link">
<span class="like-icon"><img src="@/assets/images/layout/icon_nor_weishoucang.png"></span>
<span class="Submenu-link-text">密码管理</span>
</div>
</div>
</div>
<div class="Submenu">
<div class="Submenu-title">会员账务</div>
<div class="Submenu-list">
<div class="Submenu-link">
<span class="like-icon"><img src="@/assets/images/layout/icon_nor_weishoucang.png"></span>
<span class="Submenu-link-text">会员充值</span>
</div>
<div class="Submenu-link">
<span class="like-icon"><img src="@/assets/images/layout/icon_nor_weishoucang.png"></span>
<span class="Submenu-link-text">会员退款</span>
</div>
<div class="Submenu-link">
<span class="like-icon"><img src="@/assets/images/layout/icon_nor_weishoucang.png"></span>
<span class="Submenu-link-text">豆赠送处理</span>
</div>
<span>{{item.meta.title}}</span>
<LikeIcon
v-if="!item.children"
:name="item.name"
/>
</div>
</div>
<div class="Submenu">
<div class="Submenu-title">会员订单</div>
<div class="Submenu-list">
<div class="Submenu-link">
<span class="like-icon"><img src="@/assets/images/layout/icon_nor_weishoucang.png"></span>
<span class="Submenu-link-text">充值订单</span>
</div>
<div class="Submenu-link">
<span class="like-icon"><img src="@/assets/images/layout/icon_nor_weishoucang.png"></span>
<span class="Submenu-link-text">失败订单</span>
</div>
<div class="Submenu-link">
<span class="like-icon"><img src="@/assets/images/layout/icon_nor_weishoucang.png"></span>
<span class="Submenu-link-text">自助消费流水</span>
</div>
<div class="Submenu-link">
<span class="like-icon"><img src="@/assets/images/layout/icon_nor_weishoucang.png"></span>
<span class="Submenu-link-text">支付消费流水</span>
</div>
<div class="Submenu-link">
<span class="like-icon"><img src="@/assets/images/layout/icon_nor_weishoucang.png"></span>
<span class="Submenu-link-text">豆赠送流水</span>
<div
class="Submenu-list"
v-if="item.children && item.children.length"
>
<div
class="Submenu-link"
v-for="(item, index) in item.children"
:key="index"
>
<LikeIcon :name="item.name" />
<router-link
class="Submenu-link-text"
:to="item.path"
>{{item.meta.title}}</router-link>
</div>
</div>
</div>
......@@ -84,8 +53,11 @@
</template>
<script>
import LikeIcon from './LikeIcon';
export default {
name: 'MenuItem',
components: { LikeIcon },
props: {
menuName: {
type: String,
......@@ -122,7 +94,7 @@ export default {
</script>
<style lang="scss">
@import '../../../assets/styles/variables.scss';
@import '@/assets/styles/variables.scss';
.MenuItem {
position: relative;
width: 80px;
......@@ -161,7 +133,7 @@ export default {
transition: all 0.28s ease-in-out;
overflow: hidden;
&.show {
max-height: 500px;
max-height: 1000px;
height: auto;
}
.Submenu-title {
......
src/main.js
......@@ -26,14 +26,16 @@ new Vue({
let routes = [...constantRouterMap];
let allRoute = store.getters.asyncRoutes;
if (allRoute && allRoute.length) {
for (let index = 0; index < allRoute.length; index++) {
const element = allRoute[index];
if (element.childs) {
let addRoute = formatRouteLink(element.childs);
routes = routes.concat(addRoute);
let addRoute = formatRouteLink(allRoute);
console.log(addRoute);
for (let index = 0; index < addRoute.length; index++) {
const element = addRoute[index];
if (element.children) {
routes = routes.concat(element.children);
}
}
}
return <App route={routes} />;
return <App route={routes} allRoutes={allRoute} />;
},
});
src/mixins/collect/collect.js 0 → 100644
import { mapGetters, mapActions } from 'vuex';
export default {
mounted() {
if (!this.collectList.length) {
this.fetchCollectList();
}
},
computed: {
...mapGetters(['collectList']),
},
methods: {
...mapActions(['fetchCollectList', 'addCollect', 'delCollect']),
},
};
src/permission.js
......@@ -17,14 +17,8 @@ const whiteList = process.env.VUE_APP_WHITE_LIST.split(','); // 不重定向白
const getRouteAdd = () => {
let allRoute = store.getters.asyncRoutes;
for (let index = 0; index < allRoute.length; index++) {
const element = allRoute[index];
if (element && element.childs) {
let addRoute = element.childs;
let asyncRouters = getAuthRoute(allAasyncRouterMap, addRoute);
router.addRoutes(asyncRouters); // 动态添加可访问路由表
}
}
let asyncRouters = getAuthRoute(allAasyncRouterMap, allRoute);
router.addRoutes(asyncRouters); // 动态添加可访问路由表
router.addRoutes(asyncRouterMap);
};
......
src/store/modules/app/collect.js 0 → 100644
import { fetchCollectList, addCollect, delCollect } from '@/api/menu/menu';
const GET_COLLECT_LIST = 'GET_COLLECT_LIST';
const ADD_COLLECT_LIST = 'ADD_COLLECT_LIST';
const DEL_COLLECT_LIST = 'DEL_COLLECT_LIST';
let fetch = 0;
const state = () => ({
collectList: [],
});
const getters = {
collectList: state => state.collectList,
};
const actions = {
fetchCollectList({ commit }) {
if (fetch) return;
fetch++;
return fetchCollectList()
.then(res => {
fetch--;
const data = res.data;
commit(GET_COLLECT_LIST, data);
return res;
})
.catch(err => {
console.log(err);
fetch--;
});
},
addCollect({ commit, getters }, entity) {
return addCollect({
data: { ...entity, sortId: getters.collectList.length + 1 },
}).then(res => {
commit(ADD_COLLECT_LIST, entity.menuId);
});
},
delCollect({ commit }, entity) {
return delCollect({
params: entity,
}).then(res => {
commit(DEL_COLLECT_LIST, entity.id);
});
},
};
const mutations = {
[GET_COLLECT_LIST](state, list) {
state.collectList = list;
},
[ADD_COLLECT_LIST](state, id) {
state.collectList.push({
menuId: id,
});
},
[DEL_COLLECT_LIST](state, id) {
state.collectList = state.collectList.filter(
item => item.menuId.toString() !== id
);
},
};
export default {
state,
getters,
actions,
mutations,
};
src/store/modules/app/index.js
import sidebar from './sidebar';
import collect from './collect';
import { FETCH_START, FETCH_DONE } from './mutation-types';
let fetchCount = 0;
......@@ -33,6 +34,7 @@ const mutations = {
export default {
modules: {
sidebar,
collect,
},
state,
getters,
......
src/utils/route.js
......@@ -67,3 +67,18 @@ export const getAuthRoute = (asyncRouterMap, addRoute, path = '/') => {
}
});
};
export const getCollectMenu = (routeList, name) => {
let menuData = null;
for (let index = 0; index < routeList.length; index++) {
const element = routeList[index];
if (element.children && element.children.length) {
menuData = getCollectMenu(element.children, name);
if (menuData) break;
} else if (element.name === name) {
menuData = element;
break;
}
}
return menuData;
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment