Skip to content

G
gs1
Commit 8a06acd2 by 林家欣
Options

修改左侧菜单动态获取路由1、2级

parent 0fe56507
Showing with 500 additions and 136 deletions
src/router/index.js
...@@ -114,16 +114,6 @@ const routes = [ ...@@ -114,16 +114,6 @@ const routes = [
}, },
redirect: '/Org/ISO/Ideology', redirect: '/Org/ISO/Ideology',
}, },
],
},
{
path: "/Org/ISO",
name: "ISO",
meta: {
name: "质量管理体系",
},
component: () => import("@/views/Org/index"),
children: [
{ {
path: "/Org/ISO/Ideology", path: "/Org/ISO/Ideology",
name: "Ideology", name: "Ideology",
...@@ -173,6 +163,7 @@ const routes = [ ...@@ -173,6 +163,7 @@ const routes = [
name: "业务大厅", name: "业务大厅",
}, },
component: () => import("@/views/Business/index"), component: () => import("@/views/Business/index"),
redirect: '/Business/Register',
children: [ children: [
{ {
path: "/Business/Register", path: "/Business/Register",
...@@ -183,14 +174,6 @@ const routes = [ ...@@ -183,14 +174,6 @@ const routes = [
component: () => import("@/views/Business/Register.vue"), component: () => import("@/views/Business/Register.vue"),
}, },
{ {
path: "/Business/Notice",
name: "Notice",
meta: {
name: "条码公告",
},
component: () => import("@/views/Business/Notice.vue"),
},
{
path: "/Business/Guide", path: "/Business/Guide",
name: "Guide", name: "Guide",
meta: { meta: {
...@@ -199,6 +182,15 @@ const routes = [ ...@@ -199,6 +182,15 @@ const routes = [
component: () => import("@/views/Business/Guide.vue"), component: () => import("@/views/Business/Guide.vue"),
}, },
{ {
path: "/Business/Notice",
name: "Notice",
meta: {
name: "条码公告",
},
component: () => import("@/views/Business/Notice.vue"),
},
{
path: "/Business/Code", path: "/Business/Code",
name: "Code", name: "Code",
meta: { meta: {
......
src/views/Business/index.vue
<template> <template>
<div class="org container"> <div class="business container">
<breadcrumb/> <breadcrumb />
<div class="row"> <div class="row">
<div class="col-lg-3"> <div class="col-lg-3">
<left2/> <left2 :list="routeList" />
</div> </div>
<div class="col-lg-9"> <div class="col-lg-9">
<router-view class="marginTopLg20"></router-view> <router-view class="marginTopLg20"></router-view>
</div> </div>
</div> </div>
<div class="marginTop20"> <div class="marginTop20">
<zxcxgj/> <zxcxgj />
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import left2 from '../comps/left2.vue' import left2 from "../comps/left2.vue";
import breadcrumb from '../comps/breadcrumb.vue' import breadcrumb from "../comps/breadcrumb.vue";
import zxcxgj from './copms/zxcxgj.vue' import zxcxgj from "./copms/zxcxgj.vue";
export default { export default {
components: { components: {
...@@ -27,18 +27,168 @@ export default { ...@@ -27,18 +27,168 @@ export default {
}, },
data() { data() {
return { return {
bread: [ routeList: [
{name: '首页', path: '/home'}, {
{name: '机构概况', path: '#'}, name: "我还不是系统成员",
{name: '地方编码分支机构', path: '/Business'}, path: "",
] active: "",
children: [
{
name: "我要申请商品条码",
path: "/Business/Register",
active: "Register",
},
{
name: "操作指南",
path: "/Business/Guide",
active: "Guide",
},
{
name: "收费公示",
path: "",
active: "",
},
{
name: "条码注册公告",
path: "",
active: "",
},
{
name: "条码注销公告",
path: "",
active: "",
},
],
},
{
name: "我是系统成员",
path: "",
active: "",
children: [
{
name: "我要培训——现场培训/线上培训",
path: "",
active: "",
},
{
name: "我要续展",
path: "",
active: "",
},
{
name: "我要编码",
path: "",
active: "",
},
{
name: "我要通报编码信息",
path: "",
active: "",
},
{
name: "我要生成商品二维码",
path: "",
active: "",
},
{
name: "我要追溯",
path: "",
active: "",
},
{
name: "条码微站",
path: "",
active: "",
},
{
name: "条码商桥",
path: "",
active: "",
},
],
},
{
name: "办理其他业务",
path: "",
active: "",
children: [
{
name: "办理全球位置码（GLN）",
path: "",
active: "",
},
{
name: "办理产品电子代码（EPC）",
path: "",
active: "",
},
{
name: "办理资产标识代码",
path: "",
active: "",
},
{
name: "办理全球服务关系代码",
path: "",
active: "",
},
{
name: "办理自行车企业代码",
path: "",
active: "",
},
{
name: "办理动物管理者代码",
path: "",
active: "",
},
{
name: "政策法规",
path: "",
active: "",
},
],
},
],
}; };
}, },
created() { computed: {
console.log(this.$route, "this.$route"); routes() {
this.$store.commit('system/SET_BREADCRUMB',this.bread) let newRouteList = [];
const currentPath = this.$route.path;
newRouteList = this.deepFindRoutes(this.routeList, currentPath);
return newRouteList;
},
},
created() {},
methods: {
deepFindRoutes(menuList, activePath) {
let current = [];
const deep = (arr, activePath) => {
for (let i = 0; i < arr.length; i += 1) {
if (
arr[i].link !== activePath &&
arr[i].children &&
arr[i].children.length > 0
) {
deep(arr[i].children, activePath);
} else if (arr[i].path === activePath) {
current = arr;
break;
}
if (current.length > 0) {
break;
}
}
};
deep(menuList, activePath);
return current;
},
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.business {
padding-bottom: 20px;
}
</style> </style>
src/views/Home/index.vue
...@@ -272,14 +272,14 @@ ...@@ -272,14 +272,14 @@
</div> </div>
<button class="wbsxtcy-btn">我要申请商品条码</button> <button class="wbsxtcy-btn">我要申请商品条码</button>
<div class="row ywdt-kj"> <div class="row ywdt-kj">
<div class="col-lg-6" v-for="(tmp, i) in 4" :key="i"> <div class="col-lg-6" v-for="(tmp, i) in whbsxtcy" :key="i">
<div class="ywdt-tp"> <div class="ywdt-tp">
<img <img
src="../../assets/image/home/wbsxtcy-ico1.png" :src="tmp.ico"
alt="" alt=""
/> />
</div> </div>
<div class="ywdt-bt">收费公示</div> <div class="ywdt-bt">{{tmp.name}}</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -289,14 +289,14 @@ ...@@ -289,14 +289,14 @@
<span>（成员专区）</span> <span>（成员专区）</span>
</div> </div>
<div class="row ywdt-kj"> <div class="row ywdt-kj">
<div class="col-lg-6" v-for="(tmp, i) in 6" :key="i"> <div class="col-lg-6" v-for="(tmp, i) in wsxtcy" :key="i">
<div class="ywdt-tp"> <div class="ywdt-tp">
<img <img
src="../../assets/image/home/wbsxtcy-ico1.png" :src="tmp.ico"
alt="" alt=""
/> />
</div> </div>
<div class="ywdt-bt">收费公示</div> <div class="ywdt-bt">{{tmp.name}}</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -307,14 +307,14 @@ ...@@ -307,14 +307,14 @@
<span>我是医疗企业</span> <span>我是医疗企业</span>
</div> </div>
<div class="row ywdt-kj"> <div class="row ywdt-kj">
<div class="col-lg-6" v-for="(tmp, i) in 2" :key="i"> <div class="col-lg-6" v-for="(tmp, i) in wsylqy" :key="i">
<div class="ywdt-tp"> <div class="ywdt-tp">
<img <img
src="../../assets/image/home/wbsxtcy-ico1.png" :src="tmp.ico"
alt="" alt=""
/> />
</div> </div>
<div class="ywdt-bt">收费公示</div> <div class="ywdt-bt">{{tmp.name}}</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -323,14 +323,14 @@ ...@@ -323,14 +323,14 @@
<span>跨境业务办理专区</span> <span>跨境业务办理专区</span>
</div> </div>
<div class="row ywdt-kj"> <div class="row ywdt-kj">
<div class="col-lg-6" v-for="(tmp, i) in 2" :key="i"> <div class="col-lg-6" v-for="(tmp, i) in kjywblzq" :key="i">
<div class="ywdt-tp"> <div class="ywdt-tp">
<img <img
src="../../assets/image/home/wbsxtcy-ico1.png" :src="tmp.ico"
alt="" alt=""
/> />
</div> </div>
<div class="ywdt-bt">收费公示</div> <div class="ywdt-bt">{{tmp.name}}</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -674,6 +674,70 @@ export default { ...@@ -674,6 +674,70 @@ export default {
], ],
keywords: "", keywords: "",
}, },
whbsxtcy: [
{
ico: require("../../assets/image/home/wbsxtcy-ico1.png"),
name: '收费公示',
},
{
ico: require("../../assets/image/home/wbsxtcy-ico2.png"),
name: '操作指南',
},
{
ico: require("../../assets/image/home/wbsxtcy-ico3.png"),
name: '条码注册公告',
},
{
ico: require("../../assets/image/home/wbsxtcy-ico4.png"),
name: '条码注销公告',
}
],
wsxtcy: [
{
ico: require("../../assets/image/home/wsxtcy-ico1.png"),
name: '培训',
},
{
ico: require("../../assets/image/home/wsxtcy-ico2.png"),
name: '续展',
},
{
ico: require("../../assets/image/home/wsxtcy-ico3.png"),
name: '编码',
},
{
ico: require("../../assets/image/home/wsxtcy-ico4.png"),
name: '通报编码信息',
},
{
ico: require("../../assets/image/home/wsxtcy-ico5.png"),
name: '追溯',
},
{
ico: require("../../assets/image/home/wsxtcy-ico6.png"),
name: '查找服务商',
}
],
wsylqy: [
{
ico: require("../../assets/image/home/wsylqy-ico1.png"),
name: '申请医疗器械唯一标识（UDI）',
},
{
ico: require("../../assets/image/home/wsylqy-ico2.png"),
name: '申请药品追溯码',
}
],
kjywblzq: [
{
ico: require("../../assets/image/home/kjywblzq-ico1.png"),
name: 'GLN业务办理',
},
{
ico: require("../../assets/image/home/kjywblzq-ico2.png"),
name: 'LEI业务办理',
}
],
dzfw: [ dzfw: [
{ {
ico: require("../../assets/image/home/dzfw-ico1.png"), ico: require("../../assets/image/home/dzfw-ico1.png"),
...@@ -1052,15 +1116,18 @@ export default { ...@@ -1052,15 +1116,18 @@ export default {
margin: 10px 0; margin: 10px 0;
text-align: center; text-align: center;
} }
.ywdt-tp {
margin-bottom: 20px;
}
.ywdt-bt { .ywdt-bt {
color: #0e2c6b; color: #0e2c6b;
font-size: 14px; font-size: 14px;
margin-top: 20px;
} }
} }
.wsxtcy { .wsxtcy {
.ywdt-bt { .ywdt-tp {
margin-top: 10px; margin-bottom: 8px;
} }
} }
.wsylqy, .wsylqy,
...@@ -1068,6 +1135,10 @@ export default { ...@@ -1068,6 +1135,10 @@ export default {
.ywdt-cate { .ywdt-cate {
height: 52px; height: 52px;
} }
.ywdt-bt {
width: 55%;
margin: 0 auto;
}
} }
} }
.dzfw { .dzfw {
...@@ -1090,7 +1161,7 @@ export default { ...@@ -1090,7 +1161,7 @@ export default {
.dzfw-border { .dzfw-border {
text-align: center; text-align: center;
// padding: 25px 0; // padding: 25px 0;
height: 122px; height: 133px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
......
src/views/Org/index.vue
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<breadcrumb /> <breadcrumb />
<div class="row"> <div class="row">
<div class="col-lg-3"> <div class="col-lg-3">
<left :routeList="routes" :currentRoute="$route" /> <left :list="routes"/>
</div> </div>
<div class="col-lg-9"> <div class="col-lg-9">
<router-view></router-view> <router-view></router-view>
...@@ -22,24 +22,117 @@ export default { ...@@ -22,24 +22,117 @@ export default {
}, },
data() { data() {
return { return {
routeList: [
{
name: "中心简介",
path: "/Org/Intro",
active: "Intro",
},
{
name: "中心领导",
path: "/Org/Leadership",
active: "Leadership",
},
{
name: "内设机构",
path: "/Org/Departments",
active: "Departments",
},
{
name: "质检中心/协会/杂志社/标委会/其他",
path: "/Org/Sites",
active: "Sites",
},
{
name: "地方编码分支机构",
path: "/Org/Branch",
active: "Branch",
},
{
name: "地方编码分支机构详情",
path: "/Org/BranchMsg",
active: "Branch",
hidden: true,
},
{
name: "国际物品编码组织(GS1)",
path: "https://www.gs1.org/",
type: "link",
},
{
name: "国际物品编码组织（GS1）成员网站",
path: "/Org/GS1Members",
active: "GS1Members",
},
{
name: "质量管理体系",
path: "/Org/ISO",
children: [
{
name: "指导思想",
path: "/Org/ISO/Ideology",
active: "Ideology",
},
{
name: "质量方针",
path: "/Org/ISO/Policy",
active: "Policy",
},
{
name: "质量目标",
path: "/Org/ISO/Goal",
active: "Goal",
},
{
name: "质量管理手册",
path: "/Org/ISO/Manual",
active: "Manual",
},
{
name: "程序文件",
path: "/Org/ISO/Files",
active: "Files",
},
],
},
],
}; };
}, },
computed: { computed: {
routes() { routes() {
var routes = { let newRouteList = []
children: this.$router.options.routes, const currentPath = this.$route.path;
}; newRouteList = this.deepFindRoutes(this.routeList, currentPath);
var route = this.$route.matched; return newRouteList;
for (var i = 0; i < route.length -1; i++) {
routes = routes.children.find(el => el.name === route[i].name);
}
return routes.children;
}, },
}, },
created() { created() {
console.log(this.routes, "this.$route"); console.log(this.routes, "this.$route");
}, },
methods: {
deepFindRoutes(menuList, activePath) {
let current = [];
const deep = (arr, activePath) => {
for (let i = 0; i < arr.length; i += 1) {
if (
arr[i].link !== activePath &&
arr[i].children &&
arr[i].children.length > 0
) {
deep(arr[i].children, activePath);
} else if (arr[i].path === activePath) {
current = arr;
break;
}
if (current.length > 0) {
break;
}
}
};
deep(menuList, activePath);
return current;
},
},
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
......
src/views/comps/left.vue
<template> <template>
<div class="left"> <div class="left">
<div class="list-group"> <div class="list-group">
<template v-for="(tmp, i) in routeList"> <template v-for="(tmp, i) in list">
<a <a
:class="[ :class="[
'list-group-item', 'list-group-item',
'list-group-item-action', 'list-group-item-action',
{ active: tmp.name === currentRoute.name }, { active: tmp.active === currentName },
]" ]"
:key="i" :key="i"
@click="jump(i)" v-if="!tmp.hidden"
v-if="!tmp.meta.hidden" @click="jump(tmp)"
>{{ tmp.meta.name }}</a >{{ tmp.name }}</a
> >
</template> </template>
</div> </div>
...@@ -21,28 +21,33 @@ ...@@ -21,28 +21,33 @@
import { nav } from "@/components/layout/header/mock"; import { nav } from "@/components/layout/header/mock";
export default { export default {
props: ["routeList", "currentRoute"], props: ["list", "currentRoute"],
created() { created() {
console.log(nav, "nav"); console.log(nav, "nav");
}, },
computed: {
currentName() {
return this.$route.name;
},
},
methods: { methods: {
jump(i) { jump(el) {
// console.log(i, this.routeList[i], "i"); console.log(el.path, 'el.path');
const type = this.routeList[i].meta.type || "router"; const type = el.type || "router";
if (type === "link") { if (type === "link") {
window.open(this.routeList[i].path, "_blank"); window.open(el.path, "_blank");
} else { } else {
const result = this.deepFind(nav, this.routeList[i].path); const result = this.deepFindBreadcrumb(nav, el.path);
console.log(result, "result"); console.log(result, "result");
if (result && result.breadcrumb) { if (result && result.breadcrumb) {
this.$store.commit("system/SET_BREADCRUMB", result.breadcrumb); this.$store.commit("system/SET_BREADCRUMB", result.breadcrumb);
} }
this.$router.push({ this.$router.push({
path: this.routeList[i].path, path: el.path,
}); });
} }
}, },
deepFind(menuList, activePath) { deepFindBreadcrumb(menuList, activePath) {
let current = []; let current = [];
const deep = (arr, activePath) => { const deep = (arr, activePath) => {
for (let i = 0; i < arr.length; i += 1) { for (let i = 0; i < arr.length; i += 1) {
......
src/views/comps/left2.vue
<template> <template>
<el-menu <div class="el-menu-vertical">
default-active="2" <el-menu
class="el-menu-vertical" :collapse="false"
:collapse="false" mode="vertical"
mode="vertical" :default-openeds="defaultOpeneds"
:default-openeds="defaultOpeneds" @open="handleOpen"
@open="handleOpen" @close="handleClose"
@close="handleClose" >
> <el-submenu :index="String(i + 1)" v-for="(tmpA, i) in list" :key="i">
<el-submenu index="1"> <template slot="title">
<template slot="title"> <span>{{ tmpA.name }}</span>
<span>我还不是系统成员</span> </template>
</template> <el-menu-item-group>
<el-menu-item-group> <el-menu-item
<el-menu-item index="1-1">我要申请商品条码</el-menu-item> :index="i + 1 + '-' + (ii + 1)"
<el-menu-item index="1-2">选项2</el-menu-item> :class="{ 'is-active': tmpB.path === currentPath }"
</el-menu-item-group> v-for="(tmpB, ii) in tmpA.children"
</el-submenu> :key="ii"
<el-submenu index="2"> @click="jump(tmpB)"
<template slot="title"> >{{ tmpB.name }}</el-menu-item
<span>我是系统成员</span> >
</template> </el-menu-item-group>
<el-menu-item-group> </el-submenu>
<el-menu-item index="2-1">我要培训——现场培训/线上培训</el-menu-item> </el-menu>
<el-menu-item index="2-2">选项2</el-menu-item> </div>
</el-menu-item-group>
</el-submenu>
</el-menu>
</template> </template>
<script> <script>
import { nav } from "@/components/layout/header/mock";
export default { export default {
props: ["list"],
data() { data() {
return { return {
defaultOpeneds: ["1", "2"], defaultOpeneds: ["1"],
}; };
}, },
computed: {
currentPath() {
return this.$route.path;
},
},
created() {
console.log(this.$route, "获取当前路由地址");
},
methods: { methods: {
// 路由跳转
jump(el) {
console.log(el, 'el');
const type = el.type || "router";
if (type === "link") {
window.open(el.path, "_blank");
} else {
const result = this.deepFindBreadcrumb(nav, el.path);
console.log(result, "result");
if (result && result.breadcrumb) {
this.$store.commit("system/SET_BREADCRUMB", result.breadcrumb);
}
this.$router.push({
path: el.path,
});
}
},
deepFindBreadcrumb(menuList, activePath) {
let current = [];
const deep = (arr, activePath) => {
for (let i = 0; i < arr.length; i += 1) {
if (
arr[i].link !== activePath &&
arr[i].children &&
arr[i].children.length > 0
) {
deep(arr[i].children, activePath);
} else if (arr[i].link === activePath) {
current = arr[i];
break;
}
if (current.length > 0) {
break;
}
}
};
deep(menuList, activePath);
return current;
},
handleOpen(key, keyPath) { handleOpen(key, keyPath) {
console.log(key, keyPath); console.log(key, keyPath);
}, },
...@@ -46,40 +93,45 @@ export default { ...@@ -46,40 +93,45 @@ export default {
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
.el-menu{ .el-menu-vertical {
border-right: none; ul {
background: $side-bg-color; margin: 0;
.el-submenu__title { padding: 0;
background: $side-bg-color; }
} .el-menu {
.menu-title { border-right: none;
margin-top: 25px; background: $side-bg-color;
margin-bottom: 10px; .el-submenu__title {
padding-left: 28px; background: $side-bg-color;
font-size: 12px; }
color:#B7B6B6; .menu-title {
} margin-top: 25px;
.el-menu-item { margin-bottom: 10px;
height: 50px; padding-left: 28px;
line-height: 50px; font-size: 12px;
color: #6B6A6A; color: #b7b6b6;
background: transparent; }
font-size: 16px; .el-menu-item {
i { height: 50px;
color: $side-bg-color; line-height: 50px;
font-size: 25px; color: #6b6a6a;
position: absolute; background: transparent;
top: 15px; font-size: 16px;
right: 15px; i {
} color: $side-bg-color;
&:hover, font-size: 25px;
&:focus, position: absolute;
&.is-active { top: 15px;
color: #F26335; right: 15px;
background: $side-menu-active-color; }
border-right: 3px solid #F26335; &:hover,
} &:focus,
&.is-active {
} color: #f26335;
background: $side-menu-active-color;
border-right: 3px solid #f26335;
}
}
}
} }
</style> </style>
\ No newline at end of file
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