dianliang/oil-station
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'master' of http://192.168.31.244:3000/byx/oilSystem

Browse Source
This commit is contained in:
DESKTOP-369JRHT\12997 2024-07-05 15:48:12 +08:00
commit fb1f3d424a
9 changed files with 221 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
fuintAdmin/src/assets/styles/sidebar.scss
View File

@ -1,9 +1,11 @@
#app { #app {
.main-container { .main-container {
min-height: 100%; min-height: 100%;
transition: margin-left .28s; transition: margin-left .28s;
margin-left: $base-sidebar-width; //margin-left: $base-sidebar-width;
margin-left: var(--sidebar-width);
position: relative; position: relative;
} }
@ -82,6 +84,8 @@
// menu hover // menu hover
.submenu-title-noDropdown, .submenu-title-noDropdown,
.el-submenu__title { .el-submenu__title {
//height: if($isCollapse,60px,48px) !important;
height: var(--sidebar-height);
&:hover { &:hover {
background-color: rgba(0, 0, 0, 0.06) !important; background-color: rgba(0, 0, 0, 0.06) !important;
} }
@ -90,8 +94,9 @@
& .theme-dark .is-active > .el-submenu__title { & .theme-dark .is-active > .el-submenu__title {
color: white !important; color: white !important;
background: linear-gradient( 229deg, #FF8646 0%, #FFA360 100%) !important; background: linear-gradient( 229deg, #FF8646 0%, #FFA360 100%) !important;
border-top-left-radius: 8px !important; /* 左上圆角 */ //border-top-left-radius: 8px !important; /* 左上圆角 */
border-top-right-radius: 8px !important; /* 右上圆角 */ //border-top-right-radius: 8px !important; /* 右上圆角 */
border-radius: 8px;
i { i {
color: #fff !important; color: #fff !important;
} }
@ -115,7 +120,7 @@
} }
} }
.el-menu-item.is-active { .el-menu-item .is-active {
color: #FF9655 !important; color: #FF9655 !important;
//菜单点击上的背景颜色 //菜单点击上的背景颜色
background: linear-gradient( 229deg, #FFEFE5 0%, #FFEFE5 100%) !important; background: linear-gradient( 229deg, #FFEFE5 0%, #FFEFE5 100%) !important;
@ -212,11 +217,18 @@
} }
} }
.el-menu-item.is-active {
color: white !important;
//菜单点击上的背景颜色
background: linear-gradient( 229deg, #FF9655 0%, #FF9655 100%) !important;
}
.nest-menu .el-submenu>.el-submenu__title, .nest-menu .el-submenu>.el-submenu__title,
.el-menu-item { .el-menu-item {
background-color: #FFFAF6 !important;
&:hover { &:hover {
// you can use $subMenuHover // you can use $subMenuHover
background-color: rgba(0, 0, 0, 0.06) !important; color: #FFA46B !important;
background-color: #FFEBDD !important;
} }
} }

4
fuintAdmin/src/assets/styles/variables.scss
View File

@ -7,6 +7,7 @@ $green: #30B08F;
$tiffany: #4AB7BD; $tiffany: #4AB7BD;
$yellow:#FEC171; $yellow:#FEC171;
$panGreen: #30B08F; $panGreen: #30B08F;
$isCollapse: true;
// 默认菜单主题风格 // 默认菜单主题风格
$base-menu-color:#727171;// 菜单全部字体颜色 $base-menu-color:#727171;// 菜单全部字体颜色
@ -35,5 +36,6 @@ $base-sidebar-width: 200px;
subMenuHover: $base-sub-menu-hover; subMenuHover: $base-sub-menu-hover;
sideBarWidth: $base-sidebar-width; sideBarWidth: $base-sidebar-width;
logoTitleColor: $base-logo-title-color; logoTitleColor: $base-logo-title-color;
logoLightTitleColor: $base-logo-light-title-color logoLightTitleColor: $base-logo-light-title-color;
isCollapse: $isCollapse;
} }

26
fuintAdmin/src/components/Hamburger/index.vue
View File

@ -1,14 +1,21 @@
<template> <template>
<div style="padding: 0 15px;" @click="toggleClick"> <div style="padding: 0 15px;" @click="toggleClick">
<svg <!-- <svg-->
:class="{'is-active':isActive}" <!-- :class="{'is-active':isActive}"-->
class="hamburger" <!-- class="hamburger"-->
viewBox="0 0 1024 1024" <!-- viewBox="0 0 1024 1024"-->
xmlns="http://www.w3.org/2000/svg" <!-- xmlns="http://www.w3.org/2000/svg"-->
width="64" <!-- width="64"-->
height="64" <!-- height="64"-->
> <!-- >-->
<path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" /> <!-- <path-->
<!-- d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z"/>-->
<!-- </svg>-->
<svg t="1720083378159" :class="{'is-active':isActive}" class="hamburger" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="4378" width="64" height="64">
<path
d="M408 442h480a8 8 0 0 0 8-8v-56a8 8 0 0 0-8-8H408a8 8 0 0 0-8 8v56a8 8 0 0 0 8 8z m-8 204a8 8 0 0 0 8 8h480a8 8 0 0 0 8-8v-56a8 8 0 0 0-8-8H408a8 8 0 0 0-8 8v56z m504-486H120a8 8 0 0 0-8 8v56a8 8 0 0 0 8 8h784a8 8 0 0 0 8-8v-56a8 8 0 0 0-8-8z m0 632H120a8 8 0 0 0-8 8v56a8 8 0 0 0 8 8h784a8 8 0 0 0 8-8v-56a8 8 0 0 0-8-8zM142.4 642.1L298.7 519a8.8 8.8 0 0 0 0-13.9L142.4 381.9a8.9 8.9 0 0 0-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z"
p-id="4379" fill="#FF8747"></path>
</svg> </svg>
</div> </div>
</template> </template>
@ -34,6 +41,7 @@ export default {
.hamburger { .hamburger {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
color: #00aaff;
width: 20px; width: 20px;
height: 20px; height: 20px;
} }

33
fuintAdmin/src/components/TopNav/index.vue
View File

@ -6,9 +6,12 @@
@select="handleSelect" @select="handleSelect"
> >
<template v-for="(item, index) in topMenus"> <template v-for="(item, index) in topMenus">
<el-menu-item :menu-trigger="trigger" :style="{'--theme': theme}" :index="item.path" :key="index" v-if="index < visibleNumber" <el-menu-item :menu-trigger="trigger" :style="{'--theme': theme}" :index="item.path" :key="index"
><svg-icon :icon-class="item.meta.icon" /> v-if="index < visibleNumber"
{{ item.meta.title }}</el-menu-item >
<svg-icon :icon-class="item.meta.icon"/>
{{ item.meta.title }}
</el-menu-item
> >
</template> </template>
<!-- 顶部菜单超出数量折叠 --> <!-- 顶部菜单超出数量折叠 -->
@ -19,8 +22,10 @@
:index="item.path" :index="item.path"
:key="index" :key="index"
v-if="index >= visibleNumber" v-if="index >= visibleNumber"
><svg-icon :icon-class="item.meta.icon" /> >
{{ item.meta.title }}</el-menu-item <svg-icon :icon-class="item.meta.icon"/>
{{ item.meta.title }}
</el-menu-item
> >
</template> </template>
</el-submenu> </el-submenu>
@ -28,7 +33,7 @@
</template> </template>
<script> <script>
import { constantRoutes } from "@/router"; import {constantRoutes} from "@/router";
// 隐藏侧边栏路由 // 隐藏侧边栏路由
const hideList = ['/index', '/index']; const hideList = ['/index', '/index'];
@ -36,7 +41,7 @@ const hideList = ['/index', '/index'];
export default { export default {
data() { data() {
return { return {
trigger:'click', trigger: 'click',
// 顶部栏初始数 // 顶部栏初始数
visibleNumber: 5, visibleNumber: 5,
// 当前激活菜单的 index // 当前激活菜单的 index
@ -54,9 +59,9 @@ export default {
if (menu.hidden !== true) { if (menu.hidden !== true) {
// 兼容顶部栏一级菜单内部跳转 // 兼容顶部栏一级菜单内部跳转
if (menu.path === "/") { if (menu.path === "/") {
topMenus.push(menu.children[0]); topMenus.push(menu.children[0]);
} else { } else {
topMenus.push(menu); topMenus.push(menu);
} }
} }
}); });
@ -72,10 +77,10 @@ export default {
this.routers.map((router) => { this.routers.map((router) => {
for (var item in router.children) { for (var item in router.children) {
if (router.children[item].parentPath === undefined) { if (router.children[item].parentPath === undefined) {
if(router.path === "/") { if (router.path === "/") {
router.children[item].path = "/" + router.children[item].path; router.children[item].path = "/" + router.children[item].path;
} else { } else {
if(!this.ishttp(router.children[item].path)) { if (!this.ishttp(router.children[item].path)) {
router.children[item].path = router.path + "/" + router.children[item].path; router.children[item].path = router.path + "/" + router.children[item].path;
} }
} }
@ -94,7 +99,7 @@ export default {
const tmpPath = path.substring(1, path.length); const tmpPath = path.substring(1, path.length);
activePath = "/" + tmpPath.substring(0, tmpPath.indexOf("/")); activePath = "/" + tmpPath.substring(0, tmpPath.indexOf("/"));
this.$store.dispatch('app/toggleSideBarHide', false); this.$store.dispatch('app/toggleSideBarHide', false);
} else if(!this.$route.children) { } else if (!this.$route.children) {
activePath = path; activePath = path;
this.$store.dispatch('app/toggleSideBarHide', true); this.$store.dispatch('app/toggleSideBarHide', true);
} }
@ -126,7 +131,7 @@ export default {
window.open(key, "_blank"); window.open(key, "_blank");
} else if (!route || !route.children) { } else if (!route || !route.children) {
// 没有子路由路径内部打开 // 没有子路由路径内部打开
this.$router.push({ path: key }); this.$router.push({path: key});
this.$store.dispatch('app/toggleSideBarHide', true); this.$store.dispatch('app/toggleSideBarHide', true);
} else { } else {
// 显示左侧联动菜单 // 显示左侧联动菜单
@ -144,7 +149,7 @@ export default {
} }
}); });
} }
if(routes.length > 0) { if (routes.length > 0) {
this.$store.commit("SET_SIDEBAR_ROUTERS", routes); this.$store.commit("SET_SIDEBAR_ROUTERS", routes);
} }
}, },

10
fuintAdmin/src/layout/components/Navbar.vue
View File

@ -1,10 +1,11 @@
<template> <template>
<div class="navbar"> <div class="navbar">
<!-- <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />--> <div class="title-logo">
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
<!-- <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>--> <!-- <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>-->
<top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/> <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/>
<div class="title-logo">
<div> <div>
{{storeName || "百业兴智慧油站"}}欢迎您 {{storeName || "百业兴智慧油站"}}欢迎您
@ -89,7 +90,6 @@
<!-- </el-dropdown-menu>--> <!-- </el-dropdown-menu>-->
<!-- </el-dropdown>--> <!-- </el-dropdown>-->
<!-- </div>--> <!-- </div>-->
</div> </div>
</template> </template>
@ -155,6 +155,8 @@ export default {
methods: { methods: {
toggleSideBar() { toggleSideBar() {
this.$store.dispatch('app/toggleSideBar') this.$store.dispatch('app/toggleSideBar')
console.log(this.sidebar.opened)
}, },
async logout() { async logout() {
this.$confirm('确定注销并退出系统吗？', '提示', { this.$confirm('确定注销并退出系统吗？', '提示', {
@ -262,7 +264,7 @@ export default {
//top: 50%; /* 将元素垂直向上移动容器高度的50% */ //top: 50%; /* 将元素垂直向上移动容器高度的50% */
//left: 50%; /* 将元素水平向左移动容器宽度的50% */ //left: 50%; /* 将元素水平向左移动容器宽度的50% */
//transform: translate(-50%, -50%); /* 通过移动元素的左上角使其居中 */ //transform: translate(-50%, -50%); /* 通过移动元素的左上角使其居中 */
margin-left: 150px; //margin-left: 150px;
color: #333; color: #333;
font-size: 24px; font-size: 24px;
font-weight: bold; font-weight: bold;

5
fuintAdmin/src/layout/components/Sidebar/Logo.vue
View File

@ -3,7 +3,10 @@
<transition name="sidebarLogoFade"> <transition name="sidebarLogoFade">
<router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/"> <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
<!-- <img :src="logo" class="sidebar-logo" />--> <!-- <img :src="logo" class="sidebar-logo" />-->
<h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1> <h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">
<!-- {{ title }} -->
百
</h1>
<!-- <h1 v-else class="sidebar-title" style="color: #00ff80" >{{ title }} </h1>--> <!-- <h1 v-else class="sidebar-title" style="color: #00ff80" >{{ title }} </h1>-->
</router-link> </router-link>
<router-link v-else key="expand" class="sidebar-logo-link" to="/"> <router-link v-else key="expand" class="sidebar-logo-link" to="/">

139
fuintAdmin/src/layout/components/Sidebar/SidebarItem.vue
View File

@ -2,7 +2,7 @@
<div v-if="!item.hidden"> <div v-if="!item.hidden">
<template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow"> <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
<app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path, onlyOneChild.query)"> <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path, onlyOneChild.query)">
<el-menu-item :index="resolvePath(onlyOneChild.path)" style="padding-left: 20px;" :class="{'submenu-title-noDropdown':!isNest}"> <el-menu-item v-if="!isCollapse" :index="resolvePath(onlyOneChild.path)" style="padding-left: 20px;height: 48px" :class="{'submenu-title-noDropdown':!isNest}">
<!-- <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" />--> <!-- <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" />-->
<span style="margin-left: 30px" v-if="onlyOneChild.meta.title!='系统首页'">{{onlyOneChild.meta.title}}</span> <span style="margin-left: 30px" v-if="onlyOneChild.meta.title!='系统首页'">{{onlyOneChild.meta.title}}</span>
<div v-else style="background-color: white;width: 200px;height: 100%;position: fixed;left: 0px"> <div v-else style="background-color: white;width: 200px;height: 100%;position: fixed;left: 0px">
@ -11,50 +11,102 @@
<span>{{onlyOneChild.meta.title}}</span> <span>{{onlyOneChild.meta.title}}</span>
</div> </div>
</el-menu-item> </el-menu-item>
<el-menu-item v-if="isCollapse" :index="resolvePath(onlyOneChild.path)" style="padding-left: 20px;height: 60px" :class="{'submenu-title-noDropdown':!isNest}">
<!-- <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" />-->
<span style="margin-left: 30px" v-if="onlyOneChild.meta.title!='系统首页'">{{onlyOneChild.meta.title}}</span>
<div v-else style="background-color: white;width: 70px;height: 100%;position: fixed;left: 0px;text-align: center">
<img src="@/assets/menu_icon/home.png" v-if="activeMenu!='/index'" style="width: 25px;height: 25px;"/>
<img src="@/assets/menu_icon/home_c.png" v-else style="width: 25px;height: 25px;"/>
<div style="padding: 0px;line-height: 5px">{{onlyOneChild.meta.title}}</div>
</div>
</el-menu-item>
</app-link> </app-link>
</template> </template>
<el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body> <el-submenu v-else ref="subMenu" :style="{'height':isCollapse ? '60px':''}" :index="resolvePath(item.path)" popper-append-to-body >
<template slot="title"> <template slot="title">
<!-- <item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />--> <div v-if="!isCollapse" >
<span style="margin-right: 10px;" v-if="item.meta.title=='交接班'"> <!-- <item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />-->
<img src="@/assets/menu_icon/ren.png" v-if="!activeMenu.includes('/handover')" style="width: 21px;height: 21px;"/> <span style="margin-right: 10px;" v-if="item.meta.title=='交接班'">
<img src="@/assets/menu_icon/ren_b.png" v-else style="width: 21px;height: 21px;"/> <img src="@/assets/menu_icon/ren.png" v-if="!activeMenu.includes('/handover')" style="width: 21px;height: 21px;"/>
</span> <img src="@/assets/menu_icon/ren_b.png" v-else style="width: 21px;height: 21px;"/>
<span style="margin-right: 10px;" v-if="item.meta.title=='门店管理'"> </span>
<img src="@/assets/menu_icon/shouye.png" v-if="!activeMenu.includes(item.path) && !activeMenu.includes('/staff') && !activeMenu.includes('/feedBack') && !activeMenu.includes('/duty')" style="width: 21px;height: 21px;"/> <span style="margin-right: 10px;" v-if="item.meta.title=='门店管理'">
<img src="@/assets/menu_icon/shouye_b.png" v-else style="width: 21px;height: 21px;"/> <img src="@/assets/menu_icon/shouye.png" v-if="!activeMenu.includes(item.path) && !activeMenu.includes('/staff') && !activeMenu.includes('/feedBack') && !activeMenu.includes('/duty')" style="width: 21px;height: 21px;"/>
</span> <img src="@/assets/menu_icon/shouye_b.png" v-else style="width: 21px;height: 21px;"/>
<span style="margin-right: 10px;" v-if="item.meta.title=='会员管理'"> </span>
<img src="@/assets/menu_icon/user.png" v-if="!activeMenu.includes(item.path) && !activeMenu.includes('/userGrade')" style="width: 21px;height: 21px;"/> <span style="margin-right: 10px;" v-if="item.meta.title=='会员管理'">
<img src="@/assets/menu_icon/user_b.png" v-else style="width: 21px;height: 21px;"/> <img src="@/assets/menu_icon/user.png" v-if="!activeMenu.includes(item.path) && !activeMenu.includes('/userGrade')" style="width: 21px;height: 21px;"/>
</span> <img src="@/assets/menu_icon/user_b.png" v-else style="width: 21px;height: 21px;"/>
<span style="margin-right: 10px;" v-if="item.meta.title=='油站管理'"> </span>
<img src="@/assets/menu_icon/youqiang.png" v-if="!activeMenu.includes(item.path)" style="width: 21px;height: 21px;"/> <span style="margin-right: 10px;" v-if="item.meta.title=='油站管理'">
<img src="@/assets/menu_icon/youqiang_b.png" v-else style="width: 21px;height: 21px;"/> <img src="@/assets/menu_icon/youqiang.png" v-if="!activeMenu.includes(item.path)" style="width: 21px;height: 21px;"/>
</span> <img src="@/assets/menu_icon/youqiang_b.png" v-else style="width: 21px;height: 21px;"/>
<span style="margin-right: 10px;" v-if="item.meta.title=='便利店'"> </span>
<img src="@/assets/menu_icon/car.png" v-if="!activeMenu.includes('/convenience')" style="width: 21px;height: 21px;"/> <span style="margin-right: 10px;" v-if="item.meta.title=='便利店'">
<img src="@/assets/menu_icon/car_b.png" v-else style="width: 21px;height: 21px;"/> <img src="@/assets/menu_icon/car.png" v-if="!activeMenu.includes('/convenience')" style="width: 21px;height: 21px;"/>
</span> <img src="@/assets/menu_icon/car_b.png" v-else style="width: 21px;height: 21px;"/>
<span style="margin-right: 10px;" v-if="item.meta.title=='积分商城'"> </span>
<img src="@/assets/menu_icon/lihe.png" v-if="!activeMenu.includes('/integral')" style="width: 21px;height: 21px;"/> <span style="margin-right: 10px;" v-if="item.meta.title=='积分商城'">
<img src="@/assets/menu_icon/lihe_b.png" v-else style="width: 21px;height: 21px;"/> <img src="@/assets/menu_icon/lihe.png" v-if="!activeMenu.includes('/integral')" style="width: 21px;height: 21px;"/>
</span> <img src="@/assets/menu_icon/lihe_b.png" v-else style="width: 21px;height: 21px;"/>
<span style="margin-right: 10px;" v-if="item.meta.title=='订单管理'"> </span>
<img src="@/assets/menu_icon/wendang.png" v-if="!activeMenu.includes(item.path)" style="width: 21px;height: 21px;"/> <span style="margin-right: 10px;" v-if="item.meta.title=='订单管理'">
<img src="@/assets/menu_icon/wendang_b.png" v-else style="width: 21px;height: 21px;"/> <img src="@/assets/menu_icon/wendang.png" v-if="!activeMenu.includes(item.path)" style="width: 21px;height: 21px;"/>
</span> <img src="@/assets/menu_icon/wendang_b.png" v-else style="width: 21px;height: 21px;"/>
<span style="margin-right: 10px;" v-if="item.meta.title=='活动营销'"> </span>
<img src="@/assets/menu_icon/laba.png" v-if="!activeMenu.includes('/EventMarketing')" style="width: 21px;height: 21px;"/> <span style="margin-right: 10px;" v-if="item.meta.title=='活动营销'">
<img src="@/assets/menu_icon/laba_b.png" v-else style="width: 21px;height: 21px;"/> <img src="@/assets/menu_icon/laba.png" v-if="!activeMenu.includes('/EventMarketing')" style="width: 21px;height: 21px;"/>
</span> <img src="@/assets/menu_icon/laba_b.png" v-else style="width: 21px;height: 21px;"/>
<span style="margin-right: 10px;" v-if="item.meta.title=='配置管理'"> </span>
<img src="@/assets/menu_icon/setting.png" v-if="!activeMenu.includes('/setting') && !activeMenu.includes('/power')" style="width: 21px;height: 21px;"/> <span style="margin-right: 10px;" v-if="item.meta.title=='配置管理'">
<img src="@/assets/menu_icon/setting_b.png" v-else style="width: 21px;height: 21px;"/> <img src="@/assets/menu_icon/setting.png" v-if="!activeMenu.includes('/setting') && !activeMenu.includes('/power')" style="width: 21px;height: 21px;"/>
</span> <img src="@/assets/menu_icon/setting_b.png" v-else style="width: 21px;height: 21px;"/>
</span>
<span>{{item.meta.title}}</span> <span>{{item.meta.title}}</span>
</div>
<div v-if="isCollapse" style="position: fixed;left: 0;text-align: center;width: 70px">
<!-- <item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />-->
<span style="margin-right: 10px;" v-if="item.meta.title=='交接班'">
<img src="@/assets/menu_icon/ren.png" v-if="!activeMenu.includes('/handover')" style="width: 25px;height: 25px;"/>
<img src="@/assets/menu_icon/ren_b.png" v-else style="width: 25px;height: 25px;"/>
</span>
<span style="margin-right: 10px;" v-if="item.meta.title=='门店管理'">
<img src="@/assets/menu_icon/shouye.png" v-if="!activeMenu.includes(item.path) && !activeMenu.includes('/staff') && !activeMenu.includes('/feedBack') && !activeMenu.includes('/duty')" style="width: 25px;height: 25px;"/>
<img src="@/assets/menu_icon/shouye_b.png" v-else style="width: 25px;height: 25px;"/>
</span>
<span style="margin-right: 10px;" v-if="item.meta.title=='会员管理'">
<img src="@/assets/menu_icon/user.png" v-if="!activeMenu.includes(item.path) && !activeMenu.includes('/userGrade')" style="width: 25px;height: 25px;"/>
<img src="@/assets/menu_icon/user_b.png" v-else style="width: 25px;height: 25px;"/>
</span>
<span style="margin-right: 10px;" v-if="item.meta.title=='油站管理'">
<img src="@/assets/menu_icon/youqiang.png" v-if="!activeMenu.includes(item.path)" style="width: 25px;height: 25px;"/>
<img src="@/assets/menu_icon/youqiang_b.png" v-else style="width: 25px;height: 25px;"/>
</span>
<span style="margin-right: 10px;" v-if="item.meta.title=='便利店'">
<img src="@/assets/menu_icon/car.png" v-if="!activeMenu.includes('/convenience')" style="width: 25px;height: 25px;"/>
<img src="@/assets/menu_icon/car_b.png" v-else style="width: 25px;height: 25px;"/>
</span>
<span style="margin-right: 10px;" v-if="item.meta.title=='积分商城'">
<img src="@/assets/menu_icon/lihe.png" v-if="!activeMenu.includes('/integral')" style="width: 25px;height: 25px;"/>
<img src="@/assets/menu_icon/lihe_b.png" v-else style="width: 25px;height: 25px;"/>
</span>
<span style="margin-right: 10px;" v-if="item.meta.title=='订单管理'">
<img src="@/assets/menu_icon/wendang.png" v-if="!activeMenu.includes(item.path)" style="width: 25px;height: 25px;"/>
<img src="@/assets/menu_icon/wendang_b.png" v-else style="width: 25px;height: 25px;"/>
</span>
<span style="margin-right: 10px;" v-if="item.meta.title=='活动营销'">
<img src="@/assets/menu_icon/laba.png" v-if="!activeMenu.includes('/EventMarketing')" style="width: 25px;height: 25px;"/>
<img src="@/assets/menu_icon/laba_b.png" v-else style="width: 25px;height: 25px;"/>
</span>
<span style="margin-right: 10px;" v-if="item.meta.title=='配置管理'">
<img src="@/assets/menu_icon/setting.png" v-if="!activeMenu.includes('/setting') && !activeMenu.includes('/power')" style="width: 25px;height: 25px;"/>
<img src="@/assets/menu_icon/setting_b.png" v-else style="width: 25px;height: 25px;"/>
</span>
<div style="padding: 0px;line-height: 5px">{{item.meta.title}}</div>
</div>
</template> </template>
<sidebar-item <sidebar-item
v-for="child in item.children" v-for="child in item.children"
@ -90,6 +142,10 @@ export default {
type: Boolean, type: Boolean,
default: false default: false
}, },
isCollapse: {
type: Boolean,
default: false
},
basePath: { basePath: {
type: String, type: String,
default: '' default: ''
@ -149,3 +205,6 @@ export default {
} }
} }
</script> </script>
<style lang="scss" scoped>
</style>

73
fuintAdmin/src/layout/components/Sidebar/index.vue
View File

@ -1,29 +1,56 @@
<template> <template>
<div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }"> <div :class="{'has-logo':showLogo}"
:style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground},
{width: isCollapse ? '70px !important' : '200px !important' }">
<logo v-if="showLogo" :collapse="isCollapse" /> <logo v-if="showLogo" :collapse="isCollapse" />
<!-- <div class="store-info" v-if="storeName">--> <!-- <div class="store-info" v-if="storeName">-->
<!-- <div class="name">{{ storeName }}</div>--> <!-- <div class="name">{{ storeName }}</div>-->
<!-- <div class="role" v-if="role">（{{ role }}）</div>--> <!-- <div class="role" v-if="role">（{{ role }}）</div>-->
<!-- </div>--> <!-- </div>-->
<el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper"> <el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
<el-menu <div v-if="isCollapse" style="width: 70px;">
:default-active="activeMenu" <el-menu
:collapse="isCollapse" :default-active="activeMenu"
:background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground" :collapse="isCollapse"
:text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor" :background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
:unique-opened="true" :text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
:active-text-color="settings.theme" :unique-opened="true"
:collapse-transition="false" :active-text-color="settings.theme"
style="margin-bottom: 80px;" :collapse-transition="false"
> style="margin-bottom: 80px;height: 60px"
<sidebar-item mode="vertical"
v-for="(route, index) in sidebarRouters" >
:key="route.path + index" <sidebar-item
:item="route" v-for="(route, index) in sidebarRouters"
:base-path="route.path" :key="route.path + index"
:activeMenu="activeMenu" :item="route"
/> :base-path="route.path"
</el-menu> :activeMenu="activeMenu"
:isCollapse="isCollapse"
/>
</el-menu>
</div>
<div v-else>
<el-menu
:default-active="activeMenu"
:collapse="isCollapse"
:background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
:text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
:unique-opened="true"
:active-text-color="settings.theme"
:collapse-transition="false"
style="margin-bottom: 80px;height: 48px"
mode="vertical"
>
<sidebar-item
v-for="(route, index) in sidebarRouters"
:key="route.path + index"
:item="route"
:base-path="route.path"
:activeMenu="activeMenu"
/>
</el-menu>
</div>
</el-scrollbar> </el-scrollbar>
</div> </div>
</template> </template>
@ -55,6 +82,14 @@ export default {
return variables; return variables;
}, },
isCollapse() { isCollapse() {
if (!this.sidebar.opened){
document.documentElement.style.setProperty('--sidebar-width', '70px');
document.documentElement.style.setProperty('--sidebar-height', '60px');
}else {
document.documentElement.style.setProperty('--sidebar-width', '200px');
document.documentElement.style.setProperty('--sidebar-height', '48px');
}
return !this.sidebar.opened; return !this.sidebar.opened;
}, },
storeName() { storeName() {

2
fuintAdmin/src/main.js
View File

@ -57,6 +57,8 @@ Vue.prototype.handleTree = handleTree
Vue.prototype.imgurl = 'http://192.168.0.138:8008' Vue.prototype.imgurl = 'http://192.168.0.138:8008'
// Vue.prototype.pcUrl = 'http://192.168.0.178:83/' // Vue.prototype.pcUrl = 'http://192.168.0.178:83/'
Vue.prototype.pcUrl = 'https://cashier.youkerr.com/' Vue.prototype.pcUrl = 'https://cashier.youkerr.com/'
const Collapse= false
Vue.prototype.isCollapse = Collapse
// 全局组件挂载 // 全局组件挂载
Vue.component('DictTag', DictTag) Vue.component('DictTag', DictTag)