fengdong777
2 years ago
8 changed files with 647 additions and 391 deletions
@ -1,369 +1,371 @@ |
|||
<template> |
|||
<div :class="{'has-logo':showLogo}"> |
|||
<div :class="{ 'has-logo': showLogo }"> |
|||
<logo v-if="showLogo" :collapse="isCollapse" /> |
|||
<el-scrollbar wrap-class="scrollbar-wrapper"> |
|||
<el-menu :default-active="activeMenu" :background-color="variables.menuBg" :text-color="variables.menuText" |
|||
:unique-opened="false" :active-text-color="variables.menuActiveText" :collapse-transition="false" |
|||
mode="vertical"> |
|||
<sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" /> |
|||
<el-menu |
|||
:default-active="$route.path" |
|||
:background-color="variables.menuBg" |
|||
:text-color="variables.menuText" |
|||
:unique-opened="false" |
|||
:active-text-color="variables.menuActiveText" |
|||
:collapse-transition="false" |
|||
mode="vertical" |
|||
> |
|||
<sidebar-item |
|||
v-for="route in routes" |
|||
:key="route.path" |
|||
:item="route" |
|||
:base-path="route.path" |
|||
/> |
|||
</el-menu> |
|||
</el-scrollbar> |
|||
</div> |
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
import { |
|||
mapGetters |
|||
} from 'vuex' |
|||
import Logo from './Logo' |
|||
import SidebarItem from './SidebarItem' |
|||
import variables from '@/styles/variables.scss' |
|||
import { |
|||
getrolemenus, |
|||
loginDetails |
|||
} from '@/api/system/Role/role.js' |
|||
import { |
|||
getStorage |
|||
} from '@/utils/auth' |
|||
export default { |
|||
components: { |
|||
SidebarItem, |
|||
Logo |
|||
}, |
|||
data() { |
|||
return { |
|||
YongHuid: [], |
|||
// routes: [], |
|||
params: { |
|||
sourceSid: '9d048c07-7677-4774-9177-aa02b049ff06', |
|||
userSid: '', |
|||
}, |
|||
routes: [ |
|||
{ |
|||
alwaysShow: true, |
|||
component: 'supervise', |
|||
meta: { |
|||
icon: "el-icon-menu", |
|||
title: "库房登记" |
|||
}, |
|||
name: "", |
|||
path: "/supervise", |
|||
children: [{ |
|||
alwaysShow: true, |
|||
component: 'index', |
|||
meta: { |
|||
icon: "el-icon-help", |
|||
title: "油罐库存登记" |
|||
}, |
|||
name: "/supervise/recordOilTank", |
|||
path: "/supervise/recordOilTank", |
|||
import { mapGetters } from "vuex"; |
|||
import Logo from "./Logo"; |
|||
import SidebarItem from "./SidebarItem"; |
|||
import variables from "@/styles/variables.scss"; |
|||
import { getrolemenus, loginDetails } from "@/api/system/Role/role.js"; |
|||
import { getStorage } from "@/utils/auth"; |
|||
export default { |
|||
components: { |
|||
SidebarItem, |
|||
Logo, |
|||
}, |
|||
data() { |
|||
return { |
|||
YongHuid: [], |
|||
// routes: [], |
|||
params: { |
|||
sourceSid: "9d048c07-7677-4774-9177-aa02b049ff06", |
|||
userSid: "", |
|||
}, |
|||
routes: [ |
|||
{ |
|||
alwaysShow: true, |
|||
component: "supervise", |
|||
meta: { |
|||
icon: "el-icon-menu", |
|||
title: "库房登记", |
|||
}, |
|||
name: "", |
|||
path: "/supervise", |
|||
children: [ |
|||
{ |
|||
alwaysShow: true, |
|||
component: "index", |
|||
meta: { |
|||
icon: "el-icon-help", |
|||
title: "油罐库存登记", |
|||
}, |
|||
{ |
|||
alwaysShow: true, |
|||
component: 'index', |
|||
meta: { |
|||
icon: "el-icon-help", |
|||
title: "原油入库登记" |
|||
}, |
|||
name: "/supervise/oilTypeInBound", |
|||
path: "/supervise/oilTypeInBound", |
|||
name: "/supervise/recordOilTank", |
|||
path: "/supervise/recordOilTank", |
|||
}, |
|||
{ |
|||
alwaysShow: true, |
|||
component: "index", |
|||
meta: { |
|||
icon: "el-icon-help", |
|||
title: "原油入库登记", |
|||
}, |
|||
{ |
|||
alwaysShow: true, |
|||
component: 'index', |
|||
meta: { |
|||
icon: "el-icon-help", |
|||
title: "原油出库登记" |
|||
}, |
|||
name: "/supervise/oilTypeOutBound", |
|||
path: "/supervise/oilTypeOutBound", |
|||
name: "/supervise/oilTypeInBound", |
|||
path: "/supervise/oilTypeInBound", |
|||
}, |
|||
{ |
|||
alwaysShow: true, |
|||
component: "index", |
|||
meta: { |
|||
icon: "el-icon-help", |
|||
title: "原油出库登记", |
|||
}, |
|||
] |
|||
name: "/supervise/oilTypeOutBound", |
|||
path: "/supervise/oilTypeOutBound", |
|||
}, |
|||
], |
|||
}, |
|||
{ |
|||
alwaysShow: true, |
|||
component: "inventory", |
|||
meta: { |
|||
icon: "el-icon-menu", |
|||
title: "库存管理", |
|||
}, |
|||
{ |
|||
alwaysShow: true, |
|||
component: 'inventory', |
|||
meta: { |
|||
icon: "el-icon-menu", |
|||
title: "库存管理" |
|||
name: "", |
|||
path: "/inventory", |
|||
children: [ |
|||
{ |
|||
alwaysShow: true, |
|||
component: "index", |
|||
meta: { |
|||
icon: "el-icon-help", |
|||
title: "油罐库存记录", |
|||
}, |
|||
name: "/inventory/oilTankList", |
|||
path: "/inventory/oilTankList", |
|||
}, |
|||
name: "", |
|||
path: "/inventory", |
|||
children: [ |
|||
{ |
|||
alwaysShow: true, |
|||
component: 'index', |
|||
meta: { |
|||
icon: "el-icon-help", |
|||
title: "油罐库存记录" |
|||
}, |
|||
name: "/inventory/oilTankList", |
|||
path: "/inventory/oilTankList", |
|||
},{ |
|||
alwaysShow: true, |
|||
component: 'index', |
|||
meta: { |
|||
icon: "el-icon-help", |
|||
title: "原油入库记录" |
|||
}, |
|||
name: "/inventory/oilTypeInBoundList", |
|||
path: "/inventory/oilTypeInBoundList", |
|||
{ |
|||
alwaysShow: true, |
|||
component: "index", |
|||
meta: { |
|||
icon: "el-icon-help", |
|||
title: "原油入库记录", |
|||
}, |
|||
{ |
|||
alwaysShow: true, |
|||
component: 'index', |
|||
meta: { |
|||
icon: "el-icon-help", |
|||
title: "原油出库记录" |
|||
}, |
|||
name: "/inventory/oilTypeOutBoundList", |
|||
path: "/inventory/oilTypeOutBoundList", |
|||
name: "/inventory/oilTypeInBoundList", |
|||
path: "/inventory/oilTypeInBoundList", |
|||
}, |
|||
{ |
|||
alwaysShow: true, |
|||
component: "index", |
|||
meta: { |
|||
icon: "el-icon-help", |
|||
title: "原油出库记录", |
|||
}, |
|||
] |
|||
|
|||
name: "/inventory/oilTypeOutBoundList", |
|||
path: "/inventory/oilTypeOutBoundList", |
|||
}, |
|||
], |
|||
}, |
|||
{ |
|||
alwaysShow: true, |
|||
component: "baseInfo", |
|||
meta: { |
|||
icon: "el-icon-menu", |
|||
title: "基础信息", |
|||
}, |
|||
{ |
|||
name: "", |
|||
path: "/baseInfo", |
|||
children: [ |
|||
{ |
|||
alwaysShow: true, |
|||
component: 'baseInfo', |
|||
component: "index", |
|||
meta: { |
|||
icon: "el-icon-menu", |
|||
title: "基础信息" |
|||
icon: "el-icon-help", |
|||
title: "物料类型", |
|||
}, |
|||
name: "", |
|||
path: "/baseInfo", |
|||
children: [{ |
|||
alwaysShow: true, |
|||
component: 'index', |
|||
meta: { |
|||
icon: "el-icon-help", |
|||
title: "物料类型" |
|||
}, |
|||
name: "/baseInfo/materialType", |
|||
path: "/baseInfo/materialType", |
|||
}, |
|||
{ |
|||
alwaysShow: true, |
|||
component: 'index', |
|||
meta: { |
|||
icon: "el-icon-help", |
|||
title: "物料信息" |
|||
}, |
|||
name: "/baseInfo/materialInfo", |
|||
path: "/baseInfo/materialInfo", |
|||
}, |
|||
{ |
|||
alwaysShow: true, |
|||
component: 'index', |
|||
meta: { |
|||
icon: "el-icon-help", |
|||
title: "原油类型" |
|||
}, |
|||
name: "/baseInfo/oilType", |
|||
path: "/baseInfo/oilType", |
|||
}, |
|||
{ |
|||
alwaysShow: true, |
|||
component: 'index', |
|||
meta: { |
|||
icon: "el-icon-help", |
|||
title: "油罐信息" |
|||
}, |
|||
name: "/baseInfo/oilTank", |
|||
path: "/baseInfo/oilTank", |
|||
}, |
|||
{ |
|||
alwaysShow: true, |
|||
component: 'index', |
|||
meta: { |
|||
icon: "el-icon-help", |
|||
title: "流量仪器" |
|||
}, |
|||
name: "/baseInfo/flowInstrument", |
|||
path: "/baseInfo/flowInstrument", |
|||
}, |
|||
{ |
|||
alwaysShow: true, |
|||
component: 'index', |
|||
meta: { |
|||
icon: "el-icon-help", |
|||
title: "供应商信息" |
|||
}, |
|||
name: "/baseInfo/supplier", |
|||
path: "/baseInfo/supplier", |
|||
} |
|||
] |
|||
name: "/baseInfo/materialType", |
|||
path: "/baseInfo/materialType", |
|||
}, |
|||
// { |
|||
// alwaysShow: true, |
|||
// component: 'index', |
|||
// meta: { |
|||
// icon: "el-icon-menu", |
|||
// title: "原料类型" |
|||
// }, |
|||
// name: "/rawMaterialType/index", |
|||
// path: "/rawMaterialType/index" |
|||
// }, { |
|||
// alwaysShow: true, |
|||
// component: 'index', |
|||
// meta: { |
|||
// icon: "el-icon-menu", |
|||
// title: "原料信息" |
|||
// }, |
|||
// name: "/rawMaterialInfo/index", |
|||
// path: "/rawMaterialInfo/index" |
|||
// }, { |
|||
// alwaysShow: true, |
|||
// component: 'index', |
|||
// meta: { |
|||
// icon: "el-icon-menu", |
|||
// title: "原油类型" |
|||
// }, |
|||
// name: "/oilType/index", |
|||
// path: "/oilType/index" |
|||
// }, |
|||
// { |
|||
// alwaysShow: true, |
|||
// component: 'index', |
|||
// meta: { |
|||
// icon: "el-icon-menu", |
|||
// title: "油罐信息" |
|||
// }, |
|||
// name: "/oilTank/index", |
|||
// path: "/oilTank/index" |
|||
// }, |
|||
// { |
|||
// alwaysShow: true, |
|||
// component: 'index', |
|||
// meta: { |
|||
// icon: "el-icon-menu", |
|||
// title: "流量仪器" |
|||
// }, |
|||
// name: "/flowInstrument/index", |
|||
// path: "/flowInstrument/index" |
|||
// }, |
|||
// { |
|||
// alwaysShow: true, |
|||
// component: 'index', |
|||
// meta: { |
|||
// icon: "el-icon-menu", |
|||
// title: "原油出入库记录" |
|||
// }, |
|||
// name: "/oilTypeInAndOutBound/index", |
|||
// path: "/oilTypeInAndOutBound/index" |
|||
// }, |
|||
// { |
|||
// alwaysShow: true, |
|||
// component: 'index', |
|||
// meta: { |
|||
// icon: "el-icon-menu", |
|||
// title: "原料出入库记录" |
|||
// }, |
|||
// name: "/rawMaterialInAndOutBound/index", |
|||
// path: "/rawMaterialInAndOutBound/index" |
|||
// }, |
|||
|
|||
{ |
|||
alwaysShow: true, |
|||
component: "index", |
|||
meta: { |
|||
icon: "el-icon-help", |
|||
title: "物料信息", |
|||
}, |
|||
name: "/baseInfo/materialInfo", |
|||
path: "/baseInfo/materialInfo", |
|||
}, |
|||
{ |
|||
alwaysShow: true, |
|||
component: "index", |
|||
meta: { |
|||
icon: "el-icon-help", |
|||
title: "原油类型", |
|||
}, |
|||
name: "/baseInfo/oilType", |
|||
path: "/baseInfo/oilType", |
|||
}, |
|||
{ |
|||
alwaysShow: true, |
|||
component: "index", |
|||
meta: { |
|||
icon: "el-icon-help", |
|||
title: "油罐信息", |
|||
}, |
|||
name: "/baseInfo/oilTank", |
|||
path: "/baseInfo/oilTank", |
|||
}, |
|||
{ |
|||
alwaysShow: true, |
|||
component: "index", |
|||
meta: { |
|||
icon: "el-icon-help", |
|||
title: "流量仪器", |
|||
}, |
|||
name: "/baseInfo/flowInstrument", |
|||
path: "/baseInfo/flowInstrument", |
|||
}, |
|||
{ |
|||
alwaysShow: true, |
|||
component: "index", |
|||
meta: { |
|||
icon: "el-icon-help", |
|||
title: "供应商信息", |
|||
}, |
|||
name: "/baseInfo/supplier", |
|||
path: "/baseInfo/supplier", |
|||
}, |
|||
], |
|||
}, |
|||
// { |
|||
// alwaysShow: true, |
|||
// component: 'index', |
|||
// meta: { |
|||
// icon: "el-icon-menu", |
|||
// title: "原料类型" |
|||
// }, |
|||
// name: "/rawMaterialType/index", |
|||
// path: "/rawMaterialType/index" |
|||
// }, { |
|||
// alwaysShow: true, |
|||
// component: 'index', |
|||
// meta: { |
|||
// icon: "el-icon-menu", |
|||
// title: "原料信息" |
|||
// }, |
|||
// name: "/rawMaterialInfo/index", |
|||
// path: "/rawMaterialInfo/index" |
|||
// }, { |
|||
// alwaysShow: true, |
|||
// component: 'index', |
|||
// meta: { |
|||
// icon: "el-icon-menu", |
|||
// title: "原油类型" |
|||
// }, |
|||
// name: "/oilType/index", |
|||
// path: "/oilType/index" |
|||
// }, |
|||
// { |
|||
// alwaysShow: true, |
|||
// component: 'index', |
|||
// meta: { |
|||
// icon: "el-icon-menu", |
|||
// title: "油罐信息" |
|||
// }, |
|||
// name: "/oilTank/index", |
|||
// path: "/oilTank/index" |
|||
// }, |
|||
// { |
|||
// alwaysShow: true, |
|||
// component: 'index', |
|||
// meta: { |
|||
// icon: "el-icon-menu", |
|||
// title: "流量仪器" |
|||
// }, |
|||
// name: "/flowInstrument/index", |
|||
// path: "/flowInstrument/index" |
|||
// }, |
|||
// { |
|||
// alwaysShow: true, |
|||
// component: 'index', |
|||
// meta: { |
|||
// icon: "el-icon-menu", |
|||
// title: "原油出入库记录" |
|||
// }, |
|||
// name: "/oilTypeInAndOutBound/index", |
|||
// path: "/oilTypeInAndOutBound/index" |
|||
// }, |
|||
// { |
|||
// alwaysShow: true, |
|||
// component: 'index', |
|||
// meta: { |
|||
// icon: "el-icon-menu", |
|||
// title: "原料出入库记录" |
|||
// }, |
|||
// name: "/rawMaterialInAndOutBound/index", |
|||
// path: "/rawMaterialInAndOutBound/index" |
|||
// }, |
|||
|
|||
// { |
|||
// alwaysShow: true, |
|||
// component: 'index', |
|||
// meta: { |
|||
// icon: "el-icon-menu", |
|||
// title: "项目列表" |
|||
// }, |
|||
// name: "/project/index", |
|||
// path: "/project/index" |
|||
// }, |
|||
] |
|||
} |
|||
// { |
|||
// alwaysShow: true, |
|||
// component: 'index', |
|||
// meta: { |
|||
// icon: "el-icon-menu", |
|||
// title: "项目列表" |
|||
// }, |
|||
// name: "/project/index", |
|||
// path: "/project/index" |
|||
// }, |
|||
], |
|||
}; |
|||
}, |
|||
computed: { |
|||
...mapGetters(["sidebar"]), |
|||
// routes() { |
|||
// f4d2e507-c4ed-451c-b364-04c08f962045 |
|||
// console.log('78979789', this.$router.options.routes) |
|||
// return this.$router.options.routes |
|||
// }, |
|||
activeMenu() { |
|||
// const route = this.$route |
|||
// const { |
|||
// meta, |
|||
// path |
|||
// } = route |
|||
// // if set path, the sidebar will highlight the path you set |
|||
// if (meta.activeMenu) { |
|||
// return meta.activeMenu |
|||
// } |
|||
return "/index"; |
|||
}, |
|||
computed: { |
|||
...mapGetters([ |
|||
'sidebar' |
|||
]), |
|||
// routes() { |
|||
// f4d2e507-c4ed-451c-b364-04c08f962045 |
|||
// console.log('78979789', this.$router.options.routes) |
|||
// return this.$router.options.routes |
|||
// }, |
|||
activeMenu() { |
|||
// const route = this.$route |
|||
// const { |
|||
// meta, |
|||
// path |
|||
// } = route |
|||
// // if set path, the sidebar will highlight the path you set |
|||
// if (meta.activeMenu) { |
|||
// return meta.activeMenu |
|||
// } |
|||
return "/index" |
|||
}, |
|||
showLogo() { |
|||
return this.$store.state.settings.sidebarLogo |
|||
}, |
|||
variables() { |
|||
return variables |
|||
}, |
|||
isCollapse() { |
|||
return !this.sidebar.opened |
|||
} |
|||
showLogo() { |
|||
return this.$store.state.settings.sidebarLogo; |
|||
}, |
|||
created() { |
|||
this.postHuoquyonghu() |
|||
variables() { |
|||
return variables; |
|||
}, |
|||
methods: { |
|||
// 获取用户信息 |
|||
postHuoquyonghu() { |
|||
// var token = getStorage() |
|||
// loginDetails(token).then((response) => { |
|||
// console.log('resss', response) |
|||
// if (response.code === '200') { |
|||
// this.YongHuid = response.data |
|||
// this.params.userSid = this.YongHuid.sid |
|||
// getrolemenus(this.params).then((res) => { |
|||
// const userRoles = this.resRouter(res.data) |
|||
this.routes.push({ |
|||
path: '*', |
|||
redirect: '/404', |
|||
hidden: true |
|||
}) |
|||
console.log('左侧菜单', this.routes) |
|||
return this.routes |
|||
// }) |
|||
// } |
|||
// }) |
|||
}, |
|||
resRouter(menus) { |
|||
// 递归，将后台传来数组 |
|||
for (var i = 0; i < menus.length; i++) { |
|||
if (menus[i].children && menus[i].children.length != 0) { |
|||
this.resRouter(menus[i].children) |
|||
} |
|||
if (menus[i].children.length == 0) { |
|||
delete menus[i].children |
|||
delete menus[i].redirect |
|||
} |
|||
if (menus[i].component == '') { |
|||
console.log('55555', menus[i]) |
|||
menus[i] = { |
|||
path: menus[i].path, |
|||
component: '', |
|||
redirect: menus[i].path, |
|||
children: [menus[i]], |
|||
} |
|||
} else { |
|||
// menus[i] = { |
|||
// path: menus[i].path, |
|||
// component: '', |
|||
// redirect: menus[i].path, |
|||
// children: [menus[i]], |
|||
// } |
|||
} |
|||
isCollapse() { |
|||
return !this.sidebar.opened; |
|||
}, |
|||
}, |
|||
created() { |
|||
this.postHuoquyonghu(); |
|||
}, |
|||
methods: { |
|||
// 获取用户信息 |
|||
postHuoquyonghu() { |
|||
// var token = getStorage() |
|||
// loginDetails(token).then((response) => { |
|||
// console.log('resss', response) |
|||
// if (response.code === '200') { |
|||
// this.YongHuid = response.data |
|||
// this.params.userSid = this.YongHuid.sid |
|||
// getrolemenus(this.params).then((res) => { |
|||
// const userRoles = this.resRouter(res.data) |
|||
this.routes.push({ |
|||
path: "*", |
|||
redirect: "/404", |
|||
hidden: true, |
|||
}); |
|||
console.log("左侧菜单", this.routes); |
|||
return this.routes; |
|||
// }) |
|||
// } |
|||
// }) |
|||
}, |
|||
resRouter(menus) { |
|||
// 递归，将后台传来数组 |
|||
for (var i = 0; i < menus.length; i++) { |
|||
if (menus[i].children && menus[i].children.length != 0) { |
|||
this.resRouter(menus[i].children); |
|||
} |
|||
this.routes = menus |
|||
console.log('左侧菜单', this.routes) |
|||
return menus |
|||
}, |
|||
if (menus[i].children.length == 0) { |
|||
delete menus[i].children; |
|||
delete menus[i].redirect; |
|||
} |
|||
if (menus[i].component == "") { |
|||
console.log("55555", menus[i]); |
|||
menus[i] = { |
|||
path: menus[i].path, |
|||
component: "", |
|||
redirect: menus[i].path, |
|||
children: [menus[i]], |
|||
}; |
|||
} else { |
|||
// menus[i] = { |
|||
// path: menus[i].path, |
|||
// component: '', |
|||
// redirect: menus[i].path, |
|||
// children: [menus[i]], |
|||
// } |
|||
} |
|||
} |
|||
this.routes = menus; |
|||
console.log("左侧菜单", this.routes); |
|||
return menus; |
|||
}, |
|||
} |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
Loading…
Reference in new issue