Skip to content

G
gs1
Commit 8a06acd2 by 林家欣
Options

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

parent 0fe56507
Showing with 531 additions and 136 deletions
src/components/layout/header/mock.js
import {uuid} from "../../../utils/utils";
import { uuid } from "../../../utils/utils";
import search from "./search.js";
import service from './service.js';
export const nav = [
......@@ -21,7 +21,7 @@ export const nav = [
nameInHeaderNav: "机构概况",
index: 0,
link: "/Org",
breadcrumb: [{name: "机构概况", path: "/Org"}, {name: "中心简介"}],
breadcrumb: [{ name: "机构概况", path: "/Org" }, { name: "中心简介" }],
children: [
{
id: uuid("gs_nav"),
......@@ -29,8 +29,8 @@ export const nav = [
index: 0,
link: "/Org/Intro",
breadcrumb: [
{name: "机构概况", path: "/Org"},
{name: "中心简介"},
{ name: "机构概况", path: "/Org" },
{ name: "中心简介" },
],
},
{
......@@ -39,8 +39,8 @@ export const nav = [
index: 0,
link: "/Org/Leadership",
breadcrumb: [
{name: "机构概况", path: "/Org"},
{name: "中心领导"},
{ name: "机构概况", path: "/Org" },
{ name: "中心领导" },
],
},
{
......@@ -49,8 +49,8 @@ export const nav = [
index: 0,
link: "/Org/Departments",
breadcrumb: [
{name: "机构概况", path: "/Org"},
{name: "内设机构"},
{ name: "机构概况", path: "/Org" },
{ name: "内设机构" },
],
},
{
......@@ -59,8 +59,8 @@ export const nav = [
index: 0,
link: "/Org/Sites",
breadcrumb: [
{name: "机构概况", path: "/Org"},
{name: "质检中心/协会/杂志社/标委会/其他"},
{ name: "机构概况", path: "/Org" },
{ name: "质检中心/协会/杂志社/标委会/其他" },
],
},
{
......@@ -69,8 +69,8 @@ export const nav = [
index: 0,
link: "/Org/Branch",
breadcrumb: [
{name: "机构概况", path: "/Org"},
{name: "地方编码分支机构"},
{ name: "机构概况", path: "/Org" },
{ name: "地方编码分支机构" },
],
},
{
......@@ -79,8 +79,8 @@ export const nav = [
index: 0,
link: "/Org/BranchMsg",
breadcrumb: [
{name: "机构概况", path: "/Org"},
{name: "地方编码分支机构"},
{ name: "机构概况", path: "/Org" },
{ name: "地方编码分支机构" },
],
},
{
......@@ -89,24 +89,19 @@ export const nav = [
index: 0,
link: "/Org/GS1Members",
breadcrumb: [
{name: "机构概况", path: "/Org"},
{name: "国际物品编码组织（GS1）成员网站"},
],
},
],
},
{ name: "机构概况", path: "/Org" },
{ name: "国际物品编码组织（GS1）成员网站" },
],
},
{
id: uuid("gs_nav"),
name: "质量管理体系",
index: 2,
index: 0,
link: "/Org/ISO",
breadcrumb: [
{name: "机构概况", path: "/Org/Intro"},
{name: "质量管理体系",path:"/Org/ISO"},
{name: "指导思想"},
{ name: "机构概况", path: "/Org/Intro" },
{ name: "质量管理体系", path: "/Org/ISO" },
{ name: "指导思想" },
],
children: [
{
......@@ -115,9 +110,9 @@ export const nav = [
index: 0,
link: "/Org/ISO/Ideology",
breadcrumb: [
{name: "机构概况", path: "/Org/Intro"},
{name: "质量管理体系", path: "/Org/ISO"},
{name: "指导思想"},
{ name: "机构概况", path: "/Org/Intro" },
{ name: "质量管理体系", path: "/Org/ISO" },
{ name: "指导思想" },
],
},
{
......@@ -126,9 +121,9 @@ export const nav = [
index: 0,
link: "/Org/ISO/Policy",
breadcrumb: [
{name: "机构概况", path: "/Org/Intro"},
{name: "质量管理体系", path: "/Org/ISO"},
{name: "质量方针"},
{ name: "机构概况", path: "/Org/Intro" },
{ name: "质量管理体系", path: "/Org/ISO" },
{ name: "质量方针" },
],
},
{
......@@ -137,9 +132,9 @@ export const nav = [
index: 0,
link: "/Org/ISO/Goal",
breadcrumb: [
{name: "机构概况", path: "/Org/Intro"},
{name: "质量管理体系", path: "/Org/ISO"},
{name: "质量目标"},
{ name: "机构概况", path: "/Org/Intro" },
{ name: "质量管理体系", path: "/Org/ISO" },
{ name: "质量目标" },
],
},
{
......@@ -148,9 +143,9 @@ export const nav = [
index: 0,
link: "/Org/ISO/Manual",
breadcrumb: [
{name: "机构概况", path: "/Org/Intro"},
{name: "质量管理体系", path: "/Org/ISO"},
{name: "质量管理手册"},
{ name: "机构概况", path: "/Org/Intro" },
{ name: "质量管理体系", path: "/Org/ISO" },
{ name: "质量管理手册" },
],
},
{
......@@ -159,19 +154,57 @@ export const nav = [
index: 0,
link: "/Org/ISO/Files",
breadcrumb: [
{name: "机构概况", path: "/Org/Intro"},
{name: "质量管理体系", path: "/Org/ISO"},
{name: "程序文件"},
{ name: "机构概况", path: "/Org/Intro" },
{ name: "质量管理体系", path: "/Org/ISO" },
{ name: "程序文件" },
],
},
],
},
],
},
],
},
{
id: "2",
name: "业务大厅",
index: 2,
link: "/Business",
children: [],
children: [
{
id: uuid("gs_nav"),
name: "我还不是系统成员",
nameInHeaderNav: "我还不是系统成员",
index: 2,
link: "/Org",
breadcrumb: [{ name: "业务大厅", path: "/Business" }, { name: "我还不是系统成员" }],
children: [
{
id: uuid("gs_nav"),
name: "我要申请商品条码",
index: 2,
link: "/Business/Register",
breadcrumb: [
{ name: "业务大厅", path: "/Business" },
{ name: "我还不是系统成员", path: "/Business/Register" },
{ name: "我要申请商品条码" },
],
},
{
id: uuid("gs_nav"),
name: "操作指南",
index: 2,
link: "/Business/Guide",
breadcrumb: [
{ name: "业务大厅", path: "/Business" },
{ name: "我还不是系统成员", path: "/Business/Register" },
{ name: "操作指南" },
],
}
],
}
],
},
search,
service,
......
src/router/index.js
......@@ -114,16 +114,6 @@ const routes = [
},
redirect: '/Org/ISO/Ideology',
},
],
},
{
path: "/Org/ISO",
name: "ISO",
meta: {
name: "质量管理体系",
},
component: () => import("@/views/Org/index"),
children: [
{
path: "/Org/ISO/Ideology",
name: "Ideology",
......@@ -173,6 +163,7 @@ const routes = [
name: "业务大厅",
},
component: () => import("@/views/Business/index"),
redirect: '/Business/Register',
children: [
{
path: "/Business/Register",
......@@ -183,14 +174,6 @@ const routes = [
component: () => import("@/views/Business/Register.vue"),
},
{
path: "/Business/Notice",
name: "Notice",
meta: {
name: "条码公告",
},
component: () => import("@/views/Business/Notice.vue"),
},
{
path: "/Business/Guide",
name: "Guide",
meta: {
......@@ -199,6 +182,15 @@ const routes = [
component: () => import("@/views/Business/Guide.vue"),
},
{
path: "/Business/Notice",
name: "Notice",
meta: {
name: "条码公告",
},
component: () => import("@/views/Business/Notice.vue"),
},
{
path: "/Business/Code",
name: "Code",
meta: {
......
src/views/Business/index.vue
<template>
<div class="org container">
<breadcrumb/>
<div class="business container">
<breadcrumb />
<div class="row">
<div class="col-lg-3">
<left2/>
<left2 :list="routeList" />
</div>
<div class="col-lg-9">
<router-view class="marginTopLg20"></router-view>
</div>
</div>
<div class="marginTop20">
<zxcxgj/>
<zxcxgj />
</div>
</div>
</template>
<script>
import left2 from '../comps/left2.vue'
import breadcrumb from '../comps/breadcrumb.vue'
import zxcxgj from './copms/zxcxgj.vue'
import left2 from "../comps/left2.vue";
import breadcrumb from "../comps/breadcrumb.vue";
import zxcxgj from "./copms/zxcxgj.vue";
export default {
components: {
......@@ -27,18 +27,168 @@ export default {
},
data() {
return {
bread: [
{name: '首页', path: '/home'},
{name: '机构概况', path: '#'},
{name: '地方编码分支机构', path: '/Business'},
]
routeList: [
{
name: "我还不是系统成员",
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: "",
},
],
},
],
};
},
computed: {
routes() {
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;
},
created() {
console.log(this.$route, "this.$route");
this.$store.commit('system/SET_BREADCRUMB',this.bread)
},
};
</script>
<style lang="scss" scoped>
.business {
padding-bottom: 20px;
}
</style>
src/views/Home/index.vue
......@@ -272,14 +272,14 @@
</div>
<button class="wbsxtcy-btn">我要申请商品条码</button>
<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">
<img
src="../../assets/image/home/wbsxtcy-ico1.png"
:src="tmp.ico"
alt=""
/>
</div>
<div class="ywdt-bt">收费公示</div>
<div class="ywdt-bt">{{tmp.name}}</div>
</div>
</div>
</div>
......@@ -289,14 +289,14 @@
<span>（成员专区）</span>
</div>
<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">
<img
src="../../assets/image/home/wbsxtcy-ico1.png"
:src="tmp.ico"
alt=""
/>
</div>
<div class="ywdt-bt">收费公示</div>
<div class="ywdt-bt">{{tmp.name}}</div>
</div>
</div>
</div>
......@@ -307,14 +307,14 @@
<span>我是医疗企业</span>
</div>
<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">
<img
src="../../assets/image/home/wbsxtcy-ico1.png"
:src="tmp.ico"
alt=""
/>
</div>
<div class="ywdt-bt">收费公示</div>
<div class="ywdt-bt">{{tmp.name}}</div>
</div>
</div>
</div>
......@@ -323,14 +323,14 @@
<span>跨境业务办理专区</span>
</div>
<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">
<img
src="../../assets/image/home/wbsxtcy-ico1.png"
:src="tmp.ico"
alt=""
/>
</div>
<div class="ywdt-bt">收费公示</div>
<div class="ywdt-bt">{{tmp.name}}</div>
</div>
</div>
</div>
......@@ -674,6 +674,70 @@ export default {
],
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: [
{
ico: require("../../assets/image/home/dzfw-ico1.png"),
......@@ -1052,15 +1116,18 @@ export default {
margin: 10px 0;
text-align: center;
}
.ywdt-tp {
margin-bottom: 20px;
}
.ywdt-bt {
color: #0e2c6b;
font-size: 14px;
margin-top: 20px;
}
}
.wsxtcy {
.ywdt-bt {
margin-top: 10px;
.ywdt-tp {
margin-bottom: 8px;
}
}
.wsylqy,
......@@ -1068,6 +1135,10 @@ export default {
.ywdt-cate {
height: 52px;
}
.ywdt-bt {
width: 55%;
margin: 0 auto;
}
}
}
.dzfw {
......@@ -1090,7 +1161,7 @@ export default {
.dzfw-border {
text-align: center;
// padding: 25px 0;
height: 122px;
height: 133px;
display: flex;
flex-direction: column;
justify-content: center;
......
src/views/Org/index.vue
......@@ -3,7 +3,7 @@
<breadcrumb />
<div class="row">
<div class="col-lg-3">
<left :routeList="routes" :currentRoute="$route" />
<left :list="routes"/>
</div>
<div class="col-lg-9">
<router-view></router-view>
......@@ -22,24 +22,117 @@ export default {
},
data() {
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: {
routes() {
var routes = {
children: this.$router.options.routes,
};
var route = this.$route.matched;
for (var i = 0; i < route.length -1; i++) {
routes = routes.children.find(el => el.name === route[i].name);
}
return routes.children;
let newRouteList = []
const currentPath = this.$route.path;
newRouteList = this.deepFindRoutes(this.routeList, currentPath);
return newRouteList;
},
},
created() {
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>
<style lang="scss" scoped>
......
src/views/comps/left.vue
<template>
<div class="left">
<div class="list-group">
<template v-for="(tmp, i) in routeList">
<template v-for="(tmp, i) in list">
<a
:class="[
'list-group-item',
'list-group-item-action',
{ active: tmp.name === currentRoute.name },
{ active: tmp.active === currentName },
]"
:key="i"
@click="jump(i)"
v-if="!tmp.meta.hidden"
>{{ tmp.meta.name }}</a
v-if="!tmp.hidden"
@click="jump(tmp)"
>{{ tmp.name }}</a
>
</template>
</div>
......@@ -21,28 +21,33 @@
import { nav } from "@/components/layout/header/mock";
export default {
props: ["routeList", "currentRoute"],
props: ["list", "currentRoute"],
created() {
console.log(nav, "nav");
},
computed: {
currentName() {
return this.$route.name;
},
},
methods: {
jump(i) {
// console.log(i, this.routeList[i], "i");
const type = this.routeList[i].meta.type || "router";
jump(el) {
console.log(el.path, 'el.path');
const type = el.type || "router";
if (type === "link") {
window.open(this.routeList[i].path, "_blank");
window.open(el.path, "_blank");
} else {
const result = this.deepFind(nav, this.routeList[i].path);
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: this.routeList[i].path,
path: el.path,
});
}
},
deepFind(menuList, activePath) {
deepFindBreadcrumb(menuList, activePath) {
let current = [];
const deep = (arr, activePath) => {
for (let i = 0; i < arr.length; i += 1) {
......
src/views/comps/left2.vue
<template>
<div class="el-menu-vertical">
<el-menu
default-active="2"
class="el-menu-vertical"
:collapse="false"
mode="vertical"
:default-openeds="defaultOpeneds"
@open="handleOpen"
@close="handleClose"
>
<el-submenu index="1">
<el-submenu :index="String(i + 1)" v-for="(tmpA, i) in list" :key="i">
<template slot="title">
<span>我还不是系统成员</span>
<span>{{ tmpA.name }}</span>
</template>
<el-menu-item-group>
<el-menu-item index="1-1">我要申请商品条码</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="2">
<template slot="title">
<span>我是系统成员</span>
</template>
<el-menu-item-group>
<el-menu-item index="2-1">我要培训——现场培训/线上培训</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item
:index="i + 1 + '-' + (ii + 1)"
:class="{ 'is-active': tmpB.path === currentPath }"
v-for="(tmpB, ii) in tmpA.children"
:key="ii"
@click="jump(tmpB)"
>{{ tmpB.name }}</el-menu-item
>
</el-menu-item-group>
</el-submenu>
</el-menu>
</div>
</template>
<script>
import { nav } from "@/components/layout/header/mock";
export default {
props: ["list"],
data() {
return {
defaultOpeneds: ["1", "2"],
defaultOpeneds: ["1"],
};
},
computed: {
currentPath() {
return this.$route.path;
},
},
created() {
console.log(this.$route, "获取当前路由地址");
},
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) {
console.log(key, keyPath);
},
......@@ -46,7 +93,12 @@ export default {
};
</script>
<style lang="scss">
.el-menu{
.el-menu-vertical {
ul {
margin: 0;
padding: 0;
}
.el-menu {
border-right: none;
background: $side-bg-color;
.el-submenu__title {
......@@ -57,12 +109,12 @@ export default {
margin-bottom: 10px;
padding-left: 28px;
font-size: 12px;
color:#B7B6B6;
color: #b7b6b6;
}
.el-menu-item {
height: 50px;
line-height: 50px;
color: #6B6A6A;
color: #6b6a6a;
background: transparent;
font-size: 16px;
i {
......@@ -75,11 +127,11 @@ export default {
&:hover,
&:focus,
&.is-active {
color: #F26335;
color: #f26335;
background: $side-menu-active-color;
border-right: 3px solid #F26335;
border-right: 3px solid #f26335;
}
}
}
}
</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