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