Skip to content

G
gs1
Commit bfd2ab18 by Tang
Options

feat: 头部状态优化，处理刷新页面的情况，添加机构概况dropdown

parent b5dbba72
Showing with 226 additions and 133 deletions
src/components/layout/header/index.vue
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
:id="`gs-nav-item-${nav.id}`" :id="`gs-nav-item-${nav.id}`"
class="nav-link" class="nav-link"
aria-current="page" aria-current="page"
href="#" href="javascript:void(0)"
role="button" role="button"
data-bs-toggle="dropdown" data-bs-toggle="dropdown"
aria-expanded="false" aria-expanded="false"
...@@ -47,7 +47,9 @@ ...@@ -47,7 +47,9 @@
class="gs-nav-item nav-item" class="gs-nav-item nav-item"
:class="{ active: currentNav === nav.id }" :class="{ active: currentNav === nav.id }"
> >
<a class="nav-link" href="#">{{ nav.name }}</a> <a class="nav-link" href="javascript:void(0)">{{
nav.name
}}</a>
</li> </li>
</template> </template>
...@@ -79,6 +81,28 @@ export default { ...@@ -79,6 +81,28 @@ export default {
preActive: "", preActive: "",
}; };
}, },
created() {
// 监听路由 处理nav高亮 和面包屑 和subnav
nav.forEach((nav_) => {
if (this.$route.path.startsWith(nav_.link)) {
this.currentNav = nav_.id;
nav_.children &&
nav_.children.legnth > 0 &&
this.$store.commit("system/SET_SUB_NAV", nav_.children);
if (nav_.link === this.$route.path) {
nav_.breadcrumb &&
this.$store.commit("system/SET_BREADCRUMB", nav_.breadcrumb);
} else {
// TODO 去dropdown里面精确查找当前的路径
const result = this.comparePath(nav_.children, this.$route.path);
console.log(result);
result &&
result.breadcrumb &&
this.$store.commit("system/SET_BREADCRUMB", result.breadcrumb);
}
}
});
},
mounted() { mounted() {
window.addEventListener("click", this.handleWindowClick); window.addEventListener("click", this.handleWindowClick);
}, },
...@@ -86,6 +110,22 @@ export default { ...@@ -86,6 +110,22 @@ export default {
window.removeEventListener("click", this.handleWindowClick); window.removeEventListener("click", this.handleWindowClick);
}, },
methods: { methods: {
comparePath(nav, path) {
let result = null;
nav.forEach((item) => {
if (item.link === path) {
result = item;
}
if (item.children && item.children.length > 0) {
item.children.forEach((item_) => {
if (item_.link === path) {
result = item_;
}
});
}
});
return result;
},
handleWindowClick() { handleWindowClick() {
console.log(this.preActive); console.log(this.preActive);
if (this.preActive) { if (this.preActive) {
...@@ -96,6 +136,7 @@ export default { ...@@ -96,6 +136,7 @@ export default {
handleNavClick(nav) { handleNavClick(nav) {
if (!nav.children || nav.children.length === 0) { if (!nav.children || nav.children.length === 0) {
this.currentNav = nav.id; this.currentNav = nav.id;
this.$router.push({ path: nav.link });
} else { } else {
// 点击的是有dropdown的nav 需要保存当前激活状态 // 点击的是有dropdown的nav 需要保存当前激活状态
this.preActive = this.currentNav; this.preActive = this.currentNav;
...@@ -112,6 +153,8 @@ export default { ...@@ -112,6 +153,8 @@ export default {
this.currentNav = item.root.id; this.currentNav = item.root.id;
item.breadcrumb && item.breadcrumb &&
this.$store.commit("system/SET_BREADCRUMB", item.breadcrumb); this.$store.commit("system/SET_BREADCRUMB", item.breadcrumb);
this.$store.commit("system/SET_SUB_NAV", item.root.children);
this.$router.push({ path: item.link }); this.$router.push({ path: item.link });
} }
}, },
......
src/components/layout/header/mock.js
import {uuid} from "../../../utils/utils"; import { uuid } from "../../../utils/utils";
export const nav = [ export const nav = [
{ {
id: '0', id: "0",
name: '首页', name: "首页",
index: 0, index: 0,
link: '/home', link: "/home",
children: [] children: [],
}, { },
id: '1', {
name: '机构概况', id: "1",
name: "机构概况",
index: 1, index: 1,
link: '/home', link: "/Org",
children: [] children: [
}, { {
id: '2', id: uuid("gs_nav"),
name: '业务大厅', name: "机构概况",
nameInHeaderNav: "机构概况",
index: 0,
link: "/Org",
breadcrumb: [{ name: "机构概况", path: "/Org" }, { name: "中心简介" }],
children: [
{
id: uuid("gs_nav"),
name: "地方编码分支机构",
index: 0,
link: "/Org/Branch",
breadcrumb: [
{ name: "机构概况", path: "/service" },
{ name: "地方编码分支机构" },
],
},
],
},
],
},
{
id: "2",
name: "业务大厅",
index: 2, index: 2,
link: '/home', link: "/buiss",
children: [] children: [],
}, { },
id: '3', {
name: '条码查询', id: "3",
name: "条码查询",
index: 3, index: 3,
link: '/search', link: "/search",
breadcrumb: [ breadcrumb: [
{name: '服务中心', path: '/service'}, { name: "服务中心", path: "/service" },
{name: '查询服务', path: '/search'}, { name: "查询服务", path: "/search/tool" },
{name: '条码信息查询'}, { name: "条码信息查询" },
], ],
children: [ children: [
{ {
id: uuid('gs_nav'), id: uuid("gs_nav"),
name: '条码信息查询', name: "条码信息查询",
nameInHeaderNav: '条码查询', nameInHeaderNav: "条码查询",
index: 0, index: 0,
link: '/search', link: "/search/tool",
breadcrumb: [ breadcrumb: [
{name: '服务中心', path: '/service'}, { name: "服务中心", path: "/service" },
{name: '查询服务', path: '/search'}, { name: "查询服务", path: "/search/tool" },
{name: '条码信息查询'}, { name: "条码信息查询" },
], ],
children: [ children: [
{ {
id: uuid('gs_nav'), id: uuid("gs_nav"),
name: '境内条码信息查询', name: "境内条码信息查询",
index: 0, index: 0,
link: '/search/internal', link: "/search/internal",
breadcrumb: [ breadcrumb: [
{name: '服务中心', path: '/service'}, { name: "服务中心", path: "/service" },
{name: '查询服务', path: '/search'}, { name: "查询服务", path: "/search/tool" },
{name: '境内条码信息查询'}, { name: "境内条码信息查询" },
], ],
}, },
{ {
id: uuid('gs_nav'), id: uuid("gs_nav"),
name: '境外条码信息查询', name: "境外条码信息查询",
index: 1, index: 1,
link: '/search/external', link: "/search/external",
breadcrumb: [ breadcrumb: [
{name: '服务中心', path: '/service'}, { name: "服务中心", path: "/service" },
{name: '查询服务', path: '/search'}, { name: "查询服务", path: "/search/tool" },
{name: '境外条码信息查询'}, { name: "境外条码信息查询" },
], ],
}, },
{ {
id: uuid('gs_nav'), id: uuid("gs_nav"),
name: '缩短码查询', name: "缩短码查询",
index: 2, index: 2,
link: '/search/shortcode', link: "/search/shortcode",
breadcrumb: [ breadcrumb: [
{name: '服务中心', path: '/service'}, { name: "服务中心", path: "/service" },
{name: '查询服务', path: '/search'}, { name: "查询服务", path: "/search/tool" },
{name: '缩短码查询'}, { name: "缩短码查询" },
], ],
}, },
{ {
id: uuid('gs_nav'), id: uuid("gs_nav"),
name: '追溯信息查询', name: "追溯信息查询",
index: 3, index: 3,
link: 'http://www.chinatrace.org/', link: "http://www.chinatrace.org/",
} },
] ],
}, },
{ {
id: uuid('gs_nav'), id: uuid("gs_nav"),
name: 'GLN查询', name: "GLN查询",
index: 1, index: 1,
link: '/search/gln', link: "/search/gln",
}, },
{ {
id: uuid('gs_nav'), id: uuid("gs_nav"),
name: '自行车企业代码公告查询', name: "自行车企业代码公告查询",
index: 2, index: 2,
link: '/search/bike', link: "/search/bike",
}, },
{ {
id: uuid('gs_nav'), id: uuid("gs_nav"),
name: '条码术语查询', name: "条码术语查询",
index: 3, index: 3,
link: '/search/glossary', link: "/search/glossary",
}, },
{ {
id: uuid('gs_nav'), id: uuid("gs_nav"),
name: '校验码计算工具', name: "校验码计算工具",
index: 4, index: 4,
link: '/search/check', link: "/search/check",
}, },
{ {
id: uuid('gs_nav'), id: uuid("gs_nav"),
name: '国家及地区前缀码查询', name: "国家及地区前缀码查询",
index: 5, index: 5,
link: '/search/country', link: "/search/country",
},
],
}, },
] {
}, { id: "4",
id: '4', name: "服务中心",
name: '服务中心',
index: 4, index: 4,
link: '/home', link: "/home",
children: [] children: [],
}, { },
id: '5', {
name: '资讯中心', id: "5",
name: "资讯中心",
index: 5, index: 5,
link: '/home', link: "/home",
children: [] children: [],
}, { },
id: '6', {
name: '知识中心', id: "6",
name: "知识中心",
index: 6, index: 6,
link: '/home', link: "/home",
children: [] children: [],
}, },
{ {
id: '7', id: "7",
name: '党建文化', name: "党建文化",
index: 7, index: 7,
link: '/home', link: "/home",
children: [] children: [],
}, { },
id: '8', {
name: '成员专区', id: "8",
name: "成员专区",
index: 8, index: 8,
link: '/home', link: "/home",
children: [] children: [],
}, },
] ];
src/router/index.js
import Vue from "vue" import Vue from "vue";
import VueRouter from "vue-router" import VueRouter from "vue-router";
import main from "@/components/main.vue" import main from "@/components/main.vue";
Vue.use(VueRouter) Vue.use(VueRouter);
// 解决首页路由跳转的时候同一个路由多次添加，未跳转完成就重复跳转 // 解决首页路由跳转的时候同一个路由多次添加，未跳转完成就重复跳转
const routerPush = VueRouter.prototype.push const routerPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(to) { VueRouter.prototype.push = function push(to) {
return routerPush.call(this, to).catch(err => err) return routerPush.call(this, to).catch((err) => err);
} };
const routes = [ const routes = [
{ {
path: "/", path: "/",
redirect: "/login" redirect: "/login",
}, },
{ {
path: "/Home", path: "/Home",
name: "Home", name: "Home",
component: main, component: main,
meta: { meta: {
name: "首页" name: "首页",
}, },
children: [ children: [
{ {
path: "/", path: "/",
component: () => import("@/views/Home/index") component: () => import("@/views/Home/index"),
}, },
{ {
path: "/Org", path: "/Org",
...@@ -41,8 +41,8 @@ const routes = [ ...@@ -41,8 +41,8 @@ const routes = [
meta: { meta: {
name: "地方编码分支机构", name: "地方编码分支机构",
}, },
component: () => import("@/views/Org/Branch.vue") component: () => import("@/views/Org/Branch.vue"),
} },
], ],
}, },
{ {
...@@ -59,7 +59,7 @@ const routes = [ ...@@ -59,7 +59,7 @@ const routes = [
meta: { meta: {
name: "我要申请商品条码", name: "我要申请商品条码",
}, },
component: () => import("@/views/Business/Register.vue") component: () => import("@/views/Business/Register.vue"),
}, },
{ {
path: "/Business/Notice", path: "/Business/Notice",
...@@ -67,7 +67,7 @@ const routes = [ ...@@ -67,7 +67,7 @@ const routes = [
meta: { meta: {
name: "条码公告", name: "条码公告",
}, },
component: () => import("@/views/Business/Notice.vue") component: () => import("@/views/Business/Notice.vue"),
}, },
{ {
path: "/Business/Guide", path: "/Business/Guide",
...@@ -75,26 +75,48 @@ const routes = [ ...@@ -75,26 +75,48 @@ const routes = [
meta: { meta: {
name: "操作指南", name: "操作指南",
}, },
component: () => import("@/views/Business/Guide.vue") component: () => import("@/views/Business/Guide.vue"),
} },
],
},
], ],
}
]
}, },
{ {
// 查询中心 // 查询中心
path: "/search", path: "/search",
name: "search", name: "search",
component: main, component: main,
redirect: "/search/tool",
meta: { meta: {
name: "首页" name: "首页",
}, },
children: [ children: [
{ {
path: "/", path: "/",
component: () => import("@/views/Search/index") component: () => import("@/views/Search/index"),
children: [
{
path: "tool",
component: () => import("@/views/Search/tools"),
},
// 境内条码查询
{
path: "internal",
component: () => import("@/views/Search/internal"),
}, },
] // 境外条码信息查询
{
path: "external",
component: () => import("@/views/Search/external"),
},
// 缩短码查询
{
path: "shortcode",
component: () => import("@/views/Search/shortcode"),
},
],
},
],
}, },
{ {
path: "/login", path: "/login",
...@@ -114,18 +136,18 @@ const routes = [ ...@@ -114,18 +136,18 @@ const routes = [
{ {
path: "/404", path: "/404",
name: "404", name: "404",
component: () => import("@/views/User/404") component: () => import("@/views/User/404"),
}, },
{ {
path: "*", path: "*",
redirect: "/404" redirect: "/404",
}, },
] ];
const router = new VueRouter({ const router = new VueRouter({
mode: "history", mode: "history",
base: process.env.BASE_URL, base: process.env.BASE_URL,
routes routes,
}) });
export default router export default router;
src/views/Search/index.vue
<template> <template>
<div class="container"> <div class="container">
<breadcrumb/> <breadcrumb />
<div class="row"> <div class="row">
<div class="col-lg-3"> <div class="col-lg-3">
<left2/> <SubNav />
</div> </div>
<div class="col-lg-9"> <div class="col-lg-9">
<router-view class="marginTopLg20"></router-view> <router-view class="marginTopLg20"></router-view>
...@@ -13,19 +13,19 @@ ...@@ -13,19 +13,19 @@
</template> </template>
<script> <script>
import left2 from '../comps/left2.vue' import SubNav from "../comps/SubNav.vue";
import breadcrumb from '../comps/breadcrumb.vue' import breadcrumb from "../comps/breadcrumb.vue";
import "./style/common.scss";
export default { export default {
components:{ components: {
left2, SubNav,
breadcrumb, breadcrumb,
}, },
data() { data() {
return { return {};
}
}, },
} };
</script> </script>
<style lang="scss"> <style lang="scss"></style>
</style>
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