Skip to content

D
dcxy-system
Commit 2b8df781 by 姜雷
Options

完成快速访问菜单功能

parent 02d17ae6
Showing with 270 additions and 87 deletions
.env
VUE_APP_LIB_MANAGER=http://ex-dev-dcxy-static.168cad.top VUE_APP_LIB_MANAGER=http://ex-dev-dcxy-static.168cad.top
VUE_APP_BASE_URL=/systemManageShell/ 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_WHITE_LIST=/login,/404,/401
VUE_APP_SYSTEM_SERVER_URL=http://ex-dev-dcxy-system-manage.168cad.top 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_CUSTOMER_SERVER_URL=http://ex-dev-customer-manage.168cad.top
......
.env.dev
NODE_ENV = production 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_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=http://ex-dev-dcxy-base-manage.168cad.top
VUE_APP_BASE_SERVER_URL_APP=http://ex-dev-dcxy-base-app.168cad.top VUE_APP_BASE_SERVER_URL_APP=http://ex-dev-dcxy-base-app.168cad.top
......
src/App.vue
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
<IconMenus <IconMenus
:routers="allRoutes" :routers="allRoutes"
:dashboardVisiable="dashboardVisiable" :dashboardVisiable="dashboardVisiable"
:toggleFastLink="toggleFastLink"
/> />
</div> </div>
<template v-if="dashboardVisiable"> <template v-if="dashboardVisiable">
...@@ -19,7 +20,7 @@ ...@@ -19,7 +20,7 @@
</template> </template>
<template v-else> <template v-else>
<template slot="nav"> <template slot="nav">
<sidebar-nav <CollectMenu
v-if="showFastLink" v-if="showFastLink"
:routers="route" :routers="route"
/> />
...@@ -42,13 +43,14 @@ ...@@ -42,13 +43,14 @@
<script> <script>
import UserBox from './containers/layout/components/UserBox'; 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(','); // 不重定向白名单 const whiteList = process.env.VUE_APP_WHITE_LIST.split(','); // 不重定向白名单
export default { export default {
name: 'App', name: 'App',
components: { UserBox, IconMenus }, components: { UserBox, IconMenus, CollectMenu },
props: { props: {
route: { route: {
type: Array, type: Array,
...@@ -81,8 +83,6 @@ export default { ...@@ -81,8 +83,6 @@ export default {
watch: { watch: {
$route(newVal) { $route(newVal) {
this.routerDone = false; this.routerDone = false;
console.log(newVal);
if (newVal.meta && newVal.meta.store) { if (newVal.meta && newVal.meta.store) {
this.showComponents(newVal.meta.store); this.showComponents(newVal.meta.store);
} else { } else {
...@@ -91,9 +91,6 @@ export default { ...@@ -91,9 +91,6 @@ export default {
}, },
}, },
methods: { methods: {
toggleDashboard() {
this.dashboardVisiable = !this.dashboardVisiable;
},
showComponents(store) { showComponents(store) {
this.isInnerPage = this.isInnerPage =
whiteList.indexOf(this.$route.path) !== -1 ? false : true; whiteList.indexOf(this.$route.path) !== -1 ? false : true;
...@@ -106,6 +103,9 @@ export default { ...@@ -106,6 +103,9 @@ export default {
this.routerDone = true; this.routerDone = true;
} }
}, },
toggleFastLink(entity) {
this.showFastLink = entity;
},
}, },
}; };
</script> </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 @@ ...@@ -22,12 +22,12 @@
src="@/assets/images/layout/icon_huiyuanguanli@2x.png" src="@/assets/images/layout/icon_huiyuanguanli@2x.png"
/> />
</MenuItem> </MenuItem>
<MenuItem menuName="自助运营"> <!-- <MenuItem menuName="自助运营">
<img <img
slot="icon" slot="icon"
src="@/assets/images/layout/icon_zizhuyunying@2x.png" src="@/assets/images/layout/icon_zizhuyunying@2x.png"
/> />
</MenuItem> </MenuItem> -->
<MenuItem <MenuItem
v-if="baseManage && baseManage.length" v-if="baseManage && baseManage.length"
menuName="基础数据" menuName="基础数据"
...@@ -38,12 +38,12 @@ ...@@ -38,12 +38,12 @@
src="@/assets/images/layout/icon_jichu@2x.png" src="@/assets/images/layout/icon_jichu@2x.png"
/> />
</MenuItem> </MenuItem>
<MenuItem menuName="统计系统"> <!-- <MenuItem menuName="统计系统">
<img <img
slot="icon" slot="icon"
src="@/assets/images/layout/icon_tongji@2x.png" src="@/assets/images/layout/icon_tongji@2x.png"
/> />
</MenuItem> </MenuItem> -->
<MenuItem <MenuItem
v-if="systemManage && systemManage.length" v-if="systemManage && systemManage.length"
menuName="系统管理" menuName="系统管理"
...@@ -54,14 +54,17 @@ ...@@ -54,14 +54,17 @@
src="@/assets/images/layout/icon_xitong@2x.png" src="@/assets/images/layout/icon_xitong@2x.png"
/> />
</MenuItem> </MenuItem>
<div @click="() => toggleFastLink(false)">
<MenuItem menuName="全业态"> <MenuItem menuName="全业态">
<img <img
slot="icon" slot="icon"
src="@/assets/images/layout/icon_quanyetai@2x.png" src="@/assets/images/layout/icon_quanyetai@2x.png"
/> />
</MenuItem> </MenuItem>
</div>
</div> </div>
<div @click="() => toggleFastLink(true)">
<MenuItem <MenuItem
:class="`fastLink ${dashboardVisiable?'marleft':''}`" :class="`fastLink ${dashboardVisiable?'marleft':''}`"
menuName="快速访问" menuName="快速访问"
...@@ -71,6 +74,7 @@ ...@@ -71,6 +74,7 @@
src="@/assets/images/layout/icon_ksfw.png" src="@/assets/images/layout/icon_ksfw.png"
/> />
</MenuItem> </MenuItem>
</div>
<div <div
class="DashboardButton" class="DashboardButton"
@click="clickHandle" @click="clickHandle"
...@@ -88,7 +92,7 @@ ...@@ -88,7 +92,7 @@
</template> </template>
<script> <script>
import MenuItem from './MenuItem'; import MenuItem from './components/MenuItem';
import { mapGetters } from 'vuex'; import { mapGetters } from 'vuex';
import { formatRouteLink } from '@/utils/route'; import { formatRouteLink } from '@/utils/route';
...@@ -103,6 +107,9 @@ export default { ...@@ -103,6 +107,9 @@ export default {
dashboardVisiable: { dashboardVisiable: {
type: Boolean, type: Boolean,
}, },
toggleFastLink: {
type: Function,
},
}, },
data() { data() {
return { 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 @@ ...@@ -16,66 +16,35 @@
<div <div
:class="`SubmenuBox ${showSubMenus?'show':''}`" :class="`SubmenuBox ${showSubMenus?'show':''}`"
:style="style" :style="style"
v-if="menuList && menuList.length"
>
<div
class="Submenu"
v-for="(item, index) in menuList"
:key="index"
> >
<div class="Submenu">
<div class="Submenu-title"> <div class="Submenu-title">
<span>会员管理</span> <span>{{item.meta.title}}</span>
<span class="like-icon"><img src="@/assets/images/layout/icon_nor_weishoucang.png"></span> <LikeIcon
</div> v-if="!item.children"
<div class="Submenu-list"> :name="item.name"
<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> </div>
</div> <div
</div> class="Submenu-list"
<div class="Submenu"> v-if="item.children && item.children.length"
<div class="Submenu-title">会员订单</div> >
<div class="Submenu-list"> <div
<div class="Submenu-link"> class="Submenu-link"
<span class="like-icon"><img src="@/assets/images/layout/icon_nor_weishoucang.png"></span> v-for="(item, index) in item.children"
<span class="Submenu-link-text">充值订单</span> :key="index"
</div> >
<div class="Submenu-link"> <LikeIcon :name="item.name" />
<span class="like-icon"><img src="@/assets/images/layout/icon_nor_weishoucang.png"></span> <router-link
<span class="Submenu-link-text">失败订单</span> class="Submenu-link-text"
</div> :to="item.path"
<div class="Submenu-link"> >{{item.meta.title}}</router-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>
</div> </div>
...@@ -84,8 +53,11 @@ ...@@ -84,8 +53,11 @@
</template> </template>
<script> <script>
import LikeIcon from './LikeIcon';
export default { export default {
name: 'MenuItem', name: 'MenuItem',
components: { LikeIcon },
props: { props: {
menuName: { menuName: {
type: String, type: String,
...@@ -122,7 +94,7 @@ export default { ...@@ -122,7 +94,7 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
@import '../../../assets/styles/variables.scss'; @import '@/assets/styles/variables.scss';
.MenuItem { .MenuItem {
position: relative; position: relative;
width: 80px; width: 80px;
...@@ -161,7 +133,7 @@ export default { ...@@ -161,7 +133,7 @@ export default {
transition: all 0.28s ease-in-out; transition: all 0.28s ease-in-out;
overflow: hidden; overflow: hidden;
&.show { &.show {
max-height: 500px; max-height: 1000px;
height: auto; height: auto;
} }
.Submenu-title { .Submenu-title {
......
src/main.js
...@@ -26,14 +26,16 @@ new Vue({ ...@@ -26,14 +26,16 @@ new Vue({
let routes = [...constantRouterMap]; let routes = [...constantRouterMap];
let allRoute = store.getters.asyncRoutes; let allRoute = store.getters.asyncRoutes;
if (allRoute && allRoute.length) { if (allRoute && allRoute.length) {
for (let index = 0; index < allRoute.length; index++) { let addRoute = formatRouteLink(allRoute);
const element = allRoute[index]; console.log(addRoute);
if (element.childs) {
let addRoute = formatRouteLink(element.childs); for (let index = 0; index < addRoute.length; index++) {
routes = routes.concat(addRoute); 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(','); // 不重定向白 ...@@ -17,14 +17,8 @@ const whiteList = process.env.VUE_APP_WHITE_LIST.split(','); // 不重定向白
const getRouteAdd = () => { const getRouteAdd = () => {
let allRoute = store.getters.asyncRoutes; let allRoute = store.getters.asyncRoutes;
for (let index = 0; index < allRoute.length; index++) { let asyncRouters = getAuthRoute(allAasyncRouterMap, allRoute);
const element = allRoute[index];
if (element && element.childs) {
let addRoute = element.childs;
let asyncRouters = getAuthRoute(allAasyncRouterMap, addRoute);
router.addRoutes(asyncRouters); // 动态添加可访问路由表 router.addRoutes(asyncRouters); // 动态添加可访问路由表
}
}
router.addRoutes(asyncRouterMap); 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 sidebar from './sidebar';
import collect from './collect';
import { FETCH_START, FETCH_DONE } from './mutation-types'; import { FETCH_START, FETCH_DONE } from './mutation-types';
let fetchCount = 0; let fetchCount = 0;
...@@ -33,6 +34,7 @@ const mutations = { ...@@ -33,6 +34,7 @@ const mutations = {
export default { export default {
modules: { modules: {
sidebar, sidebar,
collect,
}, },
state, state,
getters, getters,
......
src/utils/route.js
...@@ -67,3 +67,18 @@ export const getAuthRoute = (asyncRouterMap, addRoute, path = '/') => { ...@@ -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