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 @@
:id="`gs-nav-item-${nav.id}`"
class="nav-link"
aria-current="page"
href="#"
href="javascript:void(0)"
role="button"
data-bs-toggle="dropdown"
aria-expanded="false"
......@@ -47,7 +47,9 @@
class="gs-nav-item nav-item"
: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>
</template>
......@@ -79,6 +81,28 @@ export default {
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() {
window.addEventListener("click", this.handleWindowClick);
},
......@@ -86,6 +110,22 @@ export default {
window.removeEventListener("click", this.handleWindowClick);
},
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() {
console.log(this.preActive);
if (this.preActive) {
......@@ -96,6 +136,7 @@ export default {
handleNavClick(nav) {
if (!nav.children || nav.children.length === 0) {
this.currentNav = nav.id;
this.$router.push({ path: nav.link });
} else {
// 点击的是有dropdown的nav 需要保存当前激活状态
this.preActive = this.currentNav;
......@@ -112,6 +153,8 @@ export default {
this.currentNav = item.root.id;
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 });
}
},
......
src/components/layout/header/mock.js
import {uuid} from "../../../utils/utils";
import { uuid } from "../../../utils/utils";
export const nav = [
{
id: '0',
name: '首页',
id: "0",
name: "首页",
index: 0,
link: '/home',
children: []
}, {
id: '1',
name: '机构概况',
link: "/home",
children: [],
},
{
id: "1",
name: "机构概况",
index: 1,
link: '/home',
children: []
}, {
id: '2',
name: '业务大厅',
link: "/Org",
children: [
{
id: uuid("gs_nav"),
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,
link: '/home',
children: []
}, {
id: '3',
name: '条码查询',
link: "/buiss",
children: [],
},
{
id: "3",
name: "条码查询",
index: 3,
link: '/search',
link: "/search",
breadcrumb: [
{name: '服务中心', path: '/service'},
{name: '查询服务', path: '/search'},
{name: '条码信息查询'},
{ name: "服务中心", path: "/service" },
{ name: "查询服务", path: "/search/tool" },
{ name: "条码信息查询" },
],
children: [
{
id: uuid('gs_nav'),
name: '条码信息查询',
nameInHeaderNav: '条码查询',
id: uuid("gs_nav"),
name: "条码信息查询",
nameInHeaderNav: "条码查询",
index: 0,
link: '/search',
link: "/search/tool",
breadcrumb: [
{name: '服务中心', path: '/service'},
{name: '查询服务', path: '/search'},
{name: '条码信息查询'},
{ name: "服务中心", path: "/service" },
{ name: "查询服务", path: "/search/tool" },
{ name: "条码信息查询" },
],
children: [
{
id: uuid('gs_nav'),
name: '境内条码信息查询',
id: uuid("gs_nav"),
name: "境内条码信息查询",
index: 0,
link: '/search/internal',
link: "/search/internal",
breadcrumb: [
{name: '服务中心', path: '/service'},
{name: '查询服务', path: '/search'},
{name: '境内条码信息查询'},
{ name: "服务中心", path: "/service" },
{ name: "查询服务", path: "/search/tool" },
{ name: "境内条码信息查询" },
],
},
{
id: uuid('gs_nav'),
name: '境外条码信息查询',
id: uuid("gs_nav"),
name: "境外条码信息查询",
index: 1,
link: '/search/external',
link: "/search/external",
breadcrumb: [
{name: '服务中心', path: '/service'},
{name: '查询服务', path: '/search'},
{name: '境外条码信息查询'},
{ name: "服务中心", path: "/service" },
{ name: "查询服务", path: "/search/tool" },
{ name: "境外条码信息查询" },
],
},
{
id: uuid('gs_nav'),
name: '缩短码查询',
id: uuid("gs_nav"),
name: "缩短码查询",
index: 2,
link: '/search/shortcode',
link: "/search/shortcode",
breadcrumb: [
{name: '服务中心', path: '/service'},
{name: '查询服务', path: '/search'},
{name: '缩短码查询'},
{ name: "服务中心", path: "/service" },
{ name: "查询服务", path: "/search/tool" },
{ name: "缩短码查询" },
],
},
{
id: uuid('gs_nav'),
name: '追溯信息查询',
id: uuid("gs_nav"),
name: "追溯信息查询",
index: 3,
link: 'http://www.chinatrace.org/',
}
]
link: "http://www.chinatrace.org/",
},
],
},
{
id: uuid('gs_nav'),
name: 'GLN查询',
id: uuid("gs_nav"),
name: "GLN查询",
index: 1,
link: '/search/gln',
link: "/search/gln",
},
{
id: uuid('gs_nav'),
name: '自行车企业代码公告查询',
id: uuid("gs_nav"),
name: "自行车企业代码公告查询",
index: 2,
link: '/search/bike',
link: "/search/bike",
},
{
id: uuid('gs_nav'),
name: '条码术语查询',
id: uuid("gs_nav"),
name: "条码术语查询",
index: 3,
link: '/search/glossary',
link: "/search/glossary",
},
{
id: uuid('gs_nav'),
name: '校验码计算工具',
id: uuid("gs_nav"),
name: "校验码计算工具",
index: 4,
link: '/search/check',
link: "/search/check",
},
{
id: uuid('gs_nav'),
name: '国家及地区前缀码查询',
id: uuid("gs_nav"),
name: "国家及地区前缀码查询",
index: 5,
link: '/search/country',
link: "/search/country",
},
],
},
]
}, {
id: '4',
name: '服务中心',
{
id: "4",
name: "服务中心",
index: 4,
link: '/home',
children: []
}, {
id: '5',
name: '资讯中心',
link: "/home",
children: [],
},
{
id: "5",
name: "资讯中心",
index: 5,
link: '/home',
children: []
}, {
id: '6',
name: '知识中心',
link: "/home",
children: [],
},
{
id: "6",
name: "知识中心",
index: 6,
link: '/home',
children: []
link: "/home",
children: [],
},
{
id: '7',
name: '党建文化',
id: "7",
name: "党建文化",
index: 7,
link: '/home',
children: []
}, {
id: '8',
name: '成员专区',
link: "/home",
children: [],
},
{
id: "8",
name: "成员专区",
index: 8,
link: '/home',
children: []
link: "/home",
children: [],
},
]
];
src/router/index.js
import Vue from "vue"
import VueRouter from "vue-router"
import main from "@/components/main.vue"
import Vue from "vue";
import VueRouter from "vue-router";
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) {
return routerPush.call(this, to).catch(err => err)
}
return routerPush.call(this, to).catch((err) => err);
};
const routes = [
{
path: "/",
redirect: "/login"
redirect: "/login",
},
{
path: "/Home",
name: "Home",
component: main,
meta: {
name: "首页"
name: "首页",
},
children: [
{
path: "/",
component: () => import("@/views/Home/index")
component: () => import("@/views/Home/index"),
},
{
path: "/Org",
......@@ -41,8 +41,8 @@ const routes = [
meta: {
name: "地方编码分支机构",
},
component: () => import("@/views/Org/Branch.vue")
}
component: () => import("@/views/Org/Branch.vue"),
},
],
},
{
......@@ -59,7 +59,7 @@ const routes = [
meta: {
name: "我要申请商品条码",
},
component: () => import("@/views/Business/Register.vue")
component: () => import("@/views/Business/Register.vue"),
},
{
path: "/Business/Notice",
......@@ -67,7 +67,7 @@ const routes = [
meta: {
name: "条码公告",
},
component: () => import("@/views/Business/Notice.vue")
component: () => import("@/views/Business/Notice.vue"),
},
{
path: "/Business/Guide",
......@@ -75,26 +75,48 @@ const routes = [
meta: {
name: "操作指南",
},
component: () => import("@/views/Business/Guide.vue")
}
component: () => import("@/views/Business/Guide.vue"),
},
],
},
],
}
]
},
{
// 查询中心
path: "/search",
name: "search",
component: main,
redirect: "/search/tool",
meta: {
name: "首页"
name: "首页",
},
children: [
{
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",
......@@ -114,18 +136,18 @@ const routes = [
{
path: "/404",
name: "404",
component: () => import("@/views/User/404")
component: () => import("@/views/User/404"),
},
{
path: "*",
redirect: "/404"
redirect: "/404",
},
]
];
const router = new VueRouter({
mode: "history",
base: process.env.BASE_URL,
routes
})
routes,
});
export default router
export default router;
src/views/Search/index.vue
<template>
<div class="container">
<breadcrumb/>
<breadcrumb />
<div class="row">
<div class="col-lg-3">
<left2/>
<SubNav />
</div>
<div class="col-lg-9">
<router-view class="marginTopLg20"></router-view>
......@@ -13,19 +13,19 @@
</template>
<script>
import left2 from '../comps/left2.vue'
import breadcrumb from '../comps/breadcrumb.vue'
import SubNav from "../comps/SubNav.vue";
import breadcrumb from "../comps/breadcrumb.vue";
import "./style/common.scss";
export default {
components:{
left2,
components: {
SubNav,
breadcrumb,
},
data() {
return {
}
return {};
},
}
};
</script>
<style lang="scss">
</style>
<style lang="scss"></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