Skip to content

G
gs1
Commit bfd2ab18 by Tang
Options

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

parent b5dbba72
Showing with 359 additions and 266 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,
link: "/home",
children: [],
},
{
id: "1",
name: "机构概况",
index: 1,
link: "/Org",
children: [
{
id: uuid("gs_nav"),
name: "机构概况",
nameInHeaderNav: "机构概况",
index: 0, index: 0,
link: '/home', link: "/Org",
children: [] breadcrumb: [{ name: "机构概况", path: "/Org" }, { name: "中心简介" }],
}, { children: [
id: '1', {
name: '机构概况', id: uuid("gs_nav"),
index: 1, name: "地方编码分支机构",
link: '/home', index: 0,
children: [] link: "/Org/Branch",
}, { breadcrumb: [
id: '2', { name: "机构概况", path: "/service" },
name: '业务大厅', { name: "地方编码分支机构" },
index: 2, ],
link: '/home', },
children: [] ],
}, { },
id: '3', ],
name: '条码查询', },
index: 3, {
link: '/search', id: "2",
name: "业务大厅",
index: 2,
link: "/buiss",
children: [],
},
{
id: "3",
name: "条码查询",
index: 3,
link: "/search",
breadcrumb: [
{ name: "服务中心", path: "/service" },
{ name: "查询服务", path: "/search/tool" },
{ name: "条码信息查询" },
],
children: [
{
id: uuid("gs_nav"),
name: "条码信息查询",
nameInHeaderNav: "条码查询",
index: 0,
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: "境内条码信息查询",
nameInHeaderNav: '条码查询', index: 0,
index: 0, link: "/search/internal",
link: '/search', breadcrumb: [
breadcrumb: [ { name: "服务中心", path: "/service" },
{name: '服务中心', path: '/service'}, { name: "查询服务", path: "/search/tool" },
{name: '查询服务', path: '/search'}, { name: "境内条码信息查询" },
{name: '条码信息查询'}, ],
], },
children: [ {
{ id: uuid("gs_nav"),
id: uuid('gs_nav'), name: "境外条码信息查询",
name: '境内条码信息查询', index: 1,
index: 0, link: "/search/external",
link: '/search/internal', breadcrumb: [
breadcrumb: [ { name: "服务中心", path: "/service" },
{name: '服务中心', path: '/service'}, { name: "查询服务", path: "/search/tool" },
{name: '查询服务', path: '/search'}, { name: "境外条码信息查询" },
{name: '境内条码信息查询'}, ],
], },
}, {
{ id: uuid("gs_nav"),
id: uuid('gs_nav'), name: "缩短码查询",
name: '境外条码信息查询', index: 2,
index: 1, link: "/search/shortcode",
link: '/search/external', breadcrumb: [
breadcrumb: [ { name: "服务中心", path: "/service" },
{name: '服务中心', path: '/service'}, { name: "查询服务", path: "/search/tool" },
{name: '查询服务', path: '/search'}, { name: "缩短码查询" },
{name: '境外条码信息查询'}, ],
], },
}, {
{ id: uuid("gs_nav"),
id: uuid('gs_nav'), name: "追溯信息查询",
name: '缩短码查询', index: 3,
index: 2, link: "http://www.chinatrace.org/",
link: '/search/shortcode', },
breadcrumb: [ ],
{name: '服务中心', path: '/service'}, },
{name: '查询服务', path: '/search'}, {
{name: '缩短码查询'}, id: uuid("gs_nav"),
], name: "GLN查询",
}, index: 1,
{ link: "/search/gln",
id: uuid('gs_nav'), },
name: '追溯信息查询', {
index: 3, id: uuid("gs_nav"),
link: 'http://www.chinatrace.org/', name: "自行车企业代码公告查询",
} index: 2,
] link: "/search/bike",
}, },
{ {
id: uuid('gs_nav'), id: uuid("gs_nav"),
name: 'GLN查询', name: "条码术语查询",
index: 1, index: 3,
link: '/search/gln', link: "/search/glossary",
}, },
{ {
id: uuid('gs_nav'), id: uuid("gs_nav"),
name: '自行车企业代码公告查询', name: "校验码计算工具",
index: 2,
link: '/search/bike',
},
{
id: uuid('gs_nav'),
name: '条码术语查询',
index: 3,
link: '/search/glossary',
},
{
id: uuid('gs_nav'),
name: '校验码计算工具',
index: 4,
link: '/search/check',
},
{
id: uuid('gs_nav'),
name: '国家及地区前缀码查询',
index: 5,
link: '/search/country',
},
]
}, {
id: '4',
name: '服务中心',
index: 4, index: 4,
link: '/home', link: "/search/check",
children: [] },
}, { {
id: '5', id: uuid("gs_nav"),
name: '资讯中心', name: "国家及地区前缀码查询",
index: 5, index: 5,
link: '/home', link: "/search/country",
children: [] },
}, { ],
id: '6', },
name: '知识中心', {
index: 6, id: "4",
link: '/home', name: "服务中心",
children: [] index: 4,
}, link: "/home",
{ children: [],
id: '7', },
name: '党建文化', {
index: 7, id: "5",
link: '/home', name: "资讯中心",
children: [] index: 5,
}, { link: "/home",
id: '8', children: [],
name: '成员专区', },
index: 8, {
link: '/home', id: "6",
children: [] name: "知识中心",
}, index: 6,
] link: "/home",
children: [],
},
{
id: "7",
name: "党建文化",
index: 7,
link: "/home",
children: [],
},
{
id: "8",
name: "成员专区",
index: 8,
link: "/home",
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",
name: "Home",
component: main,
meta: {
name: "首页",
}, },
{ children: [
path: "/Home", {
name: "Home", path: "/",
component: main, component: () => import("@/views/Home/index"),
},
{
path: "/Org",
name: "Org",
meta: { meta: {
name: "首页" name: "机构概况",
}, },
component: () => import("@/views/Org/index"),
children: [ children: [
{ {
path: "/", path: "/Org/Branch",
component: () => import("@/views/Home/index") name: "Branch",
meta: {
name: "地方编码分支机构",
}, },
{ component: () => import("@/views/Org/Branch.vue"),
path: "/Org", },
name: "Org", ],
meta: { },
name: "机构概况", {
}, path: "/Business",
component: () => import("@/views/Org/index"), name: "Business",
children: [
{
path: "/Org/Branch",
name: "Branch",
meta: {
name: "地方编码分支机构",
},
component: () => import("@/views/Org/Branch.vue")
}
],
},
{
path: "/Business",
name: "Business",
meta: {
name: "业务大厅",
},
component: () => import("@/views/Business/index"),
children: [
{
path: "/Business/Register",
name: "Register",
meta: {
name: "我要申请商品条码",
},
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: {
name: "操作指南",
},
component: () => import("@/views/Business/Guide.vue")
}
],
}
]
},
{
// 查询中心
path: "/search",
name: "search",
component: main,
meta: { meta: {
name: "首页" name: "业务大厅",
}, },
component: () => import("@/views/Business/index"),
children: [ children: [
{ {
path: "/", path: "/Business/Register",
component: () => import("@/views/Search/index") name: "Register",
meta: {
name: "我要申请商品条码",
}, },
] component: () => import("@/views/Business/Register.vue"),
}, },
{ {
path: "/login", path: "/Business/Notice",
name: "login", name: "Notice",
component: () => import("@/views/User/index"), meta: {
}, name: "条码公告",
{ },
path: "/register", component: () => import("@/views/Business/Notice.vue"),
name: "register", },
component: () => import("@/views/User/index"), {
}, path: "/Business/Guide",
{ name: "Guide",
path: "/reset-pass", meta: {
name: "reset-pass", name: "操作指南",
component: () => import("@/views/User/index"), },
}, component: () => import("@/views/Business/Guide.vue"),
{ },
path: "/404", ],
name: "404", },
component: () => import("@/views/User/404") ],
}, },
{ {
path: "*", // 查询中心
redirect: "/404" path: "/search",
name: "search",
component: main,
redirect: "/search/tool",
meta: {
name: "首页",
}, },
] children: [
{
path: "/",
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",
name: "login",
component: () => import("@/views/User/index"),
},
{
path: "/register",
name: "register",
component: () => import("@/views/User/index"),
},
{
path: "/reset-pass",
name: "reset-pass",
component: () => import("@/views/User/index"),
},
{
path: "/404",
name: "404",
component: () => import("@/views/User/404"),
},
{
path: "*",
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