Skip to content

G
gs1
Commit 307434ab by Tang
Options

feat: 境内境外查询页面【90%】，样式问题未解决，添加其他查询基础页面

parent 29c4b97d
Showing with 518 additions and 310 deletions
src/assets/css/_base.scss
// 查询表单
.content-query{
.el-form{
@include el-form
.el-row{
.el-col{
.el-form-item{
width:100%;
.el-form-item__content{
width:calc(100% - 150px)
}
}
}
}
}
.content-query {
.el-form {
@include el-form .el-row {
.el-col {
.el-form-item {
width: 100%;
.el-form-item__content {
width: calc(100% - 150px);
}
}
}
}
}
}
.content-list{
.el-form{
@include el-form
}
.content-list {
.el-form {
@include el-form;
}
}
.content-msg{
padding:20px 20px;
background:$bg-color;
border-radius: 14px;
.content-msg {
padding: 20px 20px;
background: $bg-color;
border-radius: 14px;
}
.editor-preview-context {
......@@ -77,7 +76,8 @@
}
/* ul ol 样式 */
ul, ol {
ul,
ol {
margin: 10px 0 10px 20px;
}
}
......@@ -153,54 +153,54 @@
&:hover,
&:focus {
background: transparent
background: transparent;
}
}
// 分页
.el-pagination.is-background {
margin-top: 20px;
text-align: center;
.el-pager li:not(.disabled).active {
background: #FFB73F;
background: #ffb73f;
}
.el-pager li {
border-radius: 5px;
}
.btn-prev, .btn-next {
.btn-prev,
.btn-next {
border-radius: 5px;
}
.el-input__inner {
border-radius: 5px !important;
&:hover, &:focus {
border-color: #FFB73F !important;
&:hover,
&:focus {
border-color: #ffb73f !important;
}
}
.el-input__inner.is-focus {
border-color: #FFB73F !important;
border-color: #ffb73f !important;
}
}
.el-select-dropdown.el-popper {
.el-scrollbar {
li.el-select-dropdown__item.selected {
color: #FFB73F !important;
color: #ffb73f !important;
}
}
}
// 表格
.content-list {
.el-table {
@include el-table
@include el-table;
}
}
......@@ -245,7 +245,6 @@
color: #b94339;
}
}
}
.el-form-item.full-item {
......@@ -262,7 +261,6 @@
}
}
// 弹窗
.el-dialog {
width: 600px;
......@@ -278,7 +276,7 @@
}
.el-form {
@include el-form
@include el-form;
}
}
......@@ -292,7 +290,7 @@
color: #969696;
&.is-active {
color: $system-color5
color: $system-color5;
}
}
}
......@@ -303,7 +301,7 @@
color: $system-color5;
a {
color: $system-color5
color: $system-color5;
}
}
}
......@@ -339,7 +337,7 @@
.el-form-item__label {
// vertical-align:-52%;
&::before {
content: '*';
content: "*";
font-size: 20px;
color: $side-menu-active-color;
vertical-align: -16%;
......@@ -385,7 +383,7 @@
}
tr td {
color: #7B7F83;
color: #7b7f83;
font-size: 11px;
text-align: center;
}
......@@ -474,7 +472,6 @@
color: #ffb73f;
}
}
}
}
}
......@@ -493,6 +490,11 @@
color: $theme-color1;
}
.y-center {
display: flex;
align-items: center;
}
@media screen and (max-width: 992px) {
.marginTopLg20 {
margin-top: 20px;
......
src/assets/css/_reset.scss deleted 100644 → 0
@charset "utf-8";
/* CSS Document */
html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,img {
margin: 0;
padding: 0;
}
html,body,#app{
height: 100%;
background: #F0F5FA;
}
body{
font-size: 12px;
font-family: PingFangSC-Regular, sans-serif;
}
h1,h2,h3,h4,h5,h6{
font-weight: normal;
}
a{
text-decoration: none;
}
ul,ol {
list-style: none
}
input {
border: none;
padding-top: 0;
padding-bottom: 0;
}
input::-moz-focus-inner {
border: 0;
padding: 0
}
select,input {
vertical-align: middle
}
select,input,textarea {
margin: 0
}
input[type="text"],input[type="password"],textarea {
outline-style: none;
-webkit-appearance: none
}
button{
cursor: pointer;
border: none;
outline: none;
}
textarea {
resize: none
}
table {
border-collapse: collapse
}
em ,i{
font-style: normal;
}
a,button,input{
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
outline: none;
}
a,input[type='button'],input[type='submit']{
cursor:pointer;
}
::-webkit-scrollbar-track-piece {
background: #fff1d9;
border-radius: 2px;
}
::-webkit-scrollbar {
width: 4px;
height: 4px;
}
::-webkit-scrollbar-thumb {
min-height: 30px;
background: #ffb73f;
border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
background-color: #e59f29;
}
select {
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
}
select::-ms-expand { display: none; }
textarea{
overflow: hidden;
}
src/assets/css/main.scss
@import "./_reset.scss";
// @import "./_reset.scss";
@import "./_style.scss";
@import "./_icon.scss";
@import "./_mixin.scss";
......@@ -7,4 +6,4 @@
@import "../../../node_modules/bootstrap/scss/bootstrap";
// @import "../../../node_modules/bootstrap/scss/functions";
// @import "../../../node_modules/bootstrap/scss/variables";
// @import "../../../node_modules/bootstrap/scss/mixins";
\ No newline at end of file
// @import "../../../node_modules/bootstrap/scss/mixins";
src/components/layout/header/mock.js
......@@ -112,30 +112,55 @@ export const nav = [
name: "GLN查询",
index: 1,
link: "/search/gln",
breadcrumb: [
{ name: "服务中心", path: "/service" },
{ name: "查询服务", path: "/search/tool" },
{ name: "GLN查询" },
],
},
{
id: uuid("gs_nav"),
name: "自行车企业代码公告查询",
index: 2,
link: "/search/bike",
breadcrumb: [
{ name: "服务中心", path: "/service" },
{ name: "查询服务", path: "/search/tool" },
{ name: "自行车企业代码公告查询" },
],
},
{
id: uuid("gs_nav"),
name: "条码术语查询",
index: 3,
link: "/search/glossary",
breadcrumb: [
{ name: "服务中心", path: "/service" },
{ name: "查询服务", path: "/search/tool" },
{ name: "条码术语查询" },
],
},
{
id: uuid("gs_nav"),
name: "校验码计算工具",
index: 4,
link: "/search/check",
breadcrumb: [
{ name: "服务中心", path: "/service" },
{ name: "查询服务", path: "/search/tool" },
{ name: "校验码计算工具" },
],
},
{
id: uuid("gs_nav"),
name: "国家及地区前缀码查询",
index: 5,
link: "/search/country",
breadcrumb: [
{ name: "服务中心", path: "/service" },
{ name: "查询服务", path: "/search/tool" },
{ name: "国家及地区前缀码查询" },
],
},
],
},
......
src/main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router/index'
import store from './vuex/store'
import $ from 'jquery'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
import './plugins/element.js'
import './plugins/qrcode.js'
import "./assets/css/main.scss"
import "./assets/css/layout.scss"
import "./assets/css/element-variables.scss"
import Vue from "vue";
import App from "./App.vue";
import router from "./router/index";
import store from "./vuex/store";
import $ from "jquery";
import "./assets/css/_reset.css";
import "bootstrap/dist/css/bootstrap.min.css";
import "./assets/css/main.scss";
import "./assets/css/layout.scss";
import "bootstrap/dist/js/bootstrap.min.js";
import "./plugins/element.js";
import "./plugins/qrcode.js";
import "./assets/css/element-variables.scss";
// 公共样式、布局样式
// 主题色调修改在assets/_style.scss 修改里面的变量即可
......@@ -20,87 +21,92 @@ import "./assets/css/element-variables.scss"
// 不属于这两块内容的另起类名
// 封装axios
import api from "./axios/index"
Vue.use(api)
import api from "./axios/index";
Vue.use(api);
// 过滤器封装
import filters from "./filters/index"
Object.keys(filters).forEach(key => {
Vue.filter(key,filters[key])
})
import filters from "./filters/index";
Object.keys(filters).forEach((key) => {
Vue.filter(key, filters[key]);
});
// 全局注册 二次封装loading等待框、以及确认框函数
import ElPack from "./utils/interaction.js"
Vue.prototype.$ElPack = ElPack
import ElPack from "./utils/interaction.js";
Vue.prototype.$ElPack = ElPack;
// 自定义指令
import "./directives"
import "./directives";
// Clipboard
import Clipboard from "v-clipboard"
Vue.use(Clipboard)
import Clipboard from "v-clipboard";
Vue.use(Clipboard);
// Vuex
import storage from "./utils/storage.js"
Vue.prototype.$storage = storage
import storage from "./utils/storage.js";
Vue.prototype.$storage = storage;
// ngprogress
import NProgress from "nprogress";
import 'nprogress/nprogress.css'
import "nprogress/nprogress.css";
NProgress.inc(0.3);
NProgress.configure({ easing: "ease", speed: 500, showSpinner: false });
Vue.config.productionTip = false
Vue.config.productionTip = false;
router.beforeEach((to,from,next) => {
NProgress.start()
const whiteList = ["/404"]
if (whiteList.some(path => { return path === to.path })) {
next()
} else {
const {user} = store.state
// 检测是否已登录
if (user.token) {
const authList = user.userMenus
const redirectPathList = ["/login"]
const shouldRedirectToDefault = redirectPathList.some(path => { return path === to.path })
router.beforeEach((to, from, next) => {
NProgress.start();
const whiteList = ["/404"];
if (
whiteList.some((path) => {
return path === to.path;
})
) {
next();
} else {
const { user } = store.state;
// 检测是否已登录
if (user.token) {
const authList = user.userMenus;
const redirectPathList = ["/login"];
const shouldRedirectToDefault = redirectPathList.some((path) => {
return path === to.path;
});
if (!to.path || shouldRedirectToDefault) {
const defaultAuth = authList[0]
// 加载第一个菜单栏项
if (defaultAuth && defaultAuth.path) {
next({ path: defaultAuth.path, replace: true })
} else {
next({ path: "/404", replace: true })
}
} else {
const isAuthed = authList.some(authItem => {
const result = to.path === authItem.path
|| to.path.startsWith(authItem.path)
return result
})
isAuthed ? next() : next({ path: "/404", replace: true })
}
if (!to.path || shouldRedirectToDefault) {
const defaultAuth = authList[0];
// 加载第一个菜单栏项
if (defaultAuth && defaultAuth.path) {
next({ path: defaultAuth.path, replace: true });
} else {
next()
// 进入登录页面
// if (to.path === "/login") {
// next()
// } else {
// next({ path: "/login", replace: true })
// }
next({ path: "/404", replace: true });
}
} else {
const isAuthed = authList.some((authItem) => {
const result =
to.path === authItem.path || to.path.startsWith(authItem.path);
return result;
});
isAuthed ? next() : next({ path: "/404", replace: true });
}
} else {
next();
// 进入登录页面
// if (to.path === "/login") {
// next()
// } else {
// next({ path: "/login", replace: true })
// }
}
})
}
});
router.afterEach(() => {
NProgress.done()
})
NProgress.done();
});
window.vm = new Vue({
router,
store,
$,
render: h => h(App)
}).$mount('#app')
router,
store,
$,
render: (h) => h(App),
}).$mount("#app");
src/router/index.js
......@@ -114,6 +114,26 @@ const routes = [
path: "shortcode",
component: () => import("@/views/Search/shortcode"),
},
{
path: "gln",
component: () => import("@/views/Search/gln"),
},
{
path: "bike",
component: () => import("@/views/Search/bike"),
},
{
path: "glossary",
component: () => import("@/views/Search/glossary"),
},
{
path: "check",
component: () => import("@/views/Search/check"),
},
{
path: "country",
component: () => import("@/views/Search/country"),
},
],
},
],
......
src/views/Search/external.vue
<template>
<div class="search-content">
<div class="title">境内条码信息公告查询</div>
<div class="title">境外条码信息查询</div>
<div class="body">
<el-tabs v-model="activeName" class="tab-no-bottom">
<el-tab-pane label="查询厂商信息" name="first">
<div style="padding-top:20px">
<el-radio-group v-model="company">
<el-radio :label="CODE">根据厂商识别代码查询</el-radio>
<el-radio :label="NAME">根据厂商名称查询</el-radio>
<el-radio :label="ADDRESS">根据厂商名称查询</el-radio>
</el-radio-group>
<el-form> </el-form>
</div>
</el-tab-pane>
<div style="padding-top:20px">
<el-form label-position="left" label-width="180px" :model="search">
<el-form-item label="境外商品条码信息查询：">
<el-input
v-model="search.code"
placeholder="请输入正确的境外商品条码！"
class="w240"
></el-input>
</el-form-item>
<el-form-item label="验证码：">
<div class="y-center">
<el-input
v-model="search.validate"
placeholder="请输入验证码"
class="w160"
></el-input>
<div class="validate-code">
<img src="../../assets/image/validate.jpg" alt="" />
</div>
<el-tab-pane label="查询产品信息" name="second"> </el-tab-pane>
</el-tabs>
<el-button
style="margin-left:40px"
type="primary"
@click="handleSearch"
>查询</el-button
>
</div>
</el-form-item>
</el-form>
<div class="result-box" v-if="showResult">
<div class="result-box-title">查询 {{ searchCodeShow }} 结果</div>
<div class="result-box-body">
<template v-if="result">
<div class="title">商品信息</div>
<div class="product-info"></div>
<div class="title">企业信息</div>
<div class="company-info"></div>
</template>
<span v-else>您输入的商品条码格式不正确，请确认后重试。</span>
</div>
</div>
</div>
</div>
<div class="notice">
<div class="title">友情提示</div>
<div class="content-wrapper">
<img src="./img/pic_ex_jl.png" align="right" alt="" />
<img src="./img/query-external-barcode.png" align="right" alt="" />
<p>
1、商品条码
（又称全球贸易项目代码GTIN）是指包含厂商识别代码在内的对零售商品、非零售商品、物流单元、位置、资产及服务进行全球惟一标识的一种代码（或称数据结构）。对贸易项目进行编码和符号表示（前缀码为690-699是境内条码），能够实现商品零售（POS）、进货、存货管理、自动补货、销售分析及其它业务运作的自动化。
了解更多 >>
1、目前，国际物品编码组织（GS1）已将690至697之间的前缀码分配给中国物品编码中心使用，通常以这些前缀码开始的厂商识别代码都是由中国物品编码中心负责分配和管理的；以其他前缀码开始的则由境外GS1成员组织负责，一般称为"境外条码"，以下为您提供了境外商品条码信息的查询工具，请根据提示进行相关查询。欲了解GS1分配的前缀码，请点击：了解更多
>>
</p>
<p>
2、厂商信息查询结果说明：自中国物品编码中心为企业颁发《系统成员证书》当日起计，7天后，在线公布该企业的名称、厂商识别代码及证书颁发日期等信息；15天后，将公布该企业的具体注册信息。
</p>
<p>
3、本查询仅适用于中华人民共和国境内注册的商品条码信息。
2、本查询仅适用于中华人民共和国境外注册的商品条码信息。
</p>
</div>
</div>
......@@ -39,20 +65,46 @@
</template>
<script>
const CODE = 0;
const NAME = 1;
const ADDRESS = 2;
export default {
data() {
return {
CODE,
NAME,
ADDRESS,
activeName: "first",
company: CODE,
search: { code: "", validate: "" },
searchCodeShow: "",
showResult: false,
result: null,
};
},
methods: {
handleSearch() {
this.searchCodeShow = this.search.code;
this.showResult = true;
if (this.search.code === "1") {
this.result = {};
}
},
},
};
</script>
<style lang="scss" scoped></style>
<style lang="scss">
.search-content {
.validate-code {
display: inline-block;
width: 70px;
height: 40px;
margin-left: 11px;
> img {
width: 100%;
height: 100%;
}
}
.w160 {
width: 160px;
}
.w240 {
width: 240px;
}
}
</style>
src/views/Search/internal.vue
......@@ -11,11 +11,76 @@
<el-radio :label="ADDRESS">根据厂商名称查询</el-radio>
</el-radio-group>
<el-form> </el-form>
<el-form
label-position="left"
label-width="180px"
style="margin-top:50px"
:model="companySearch"
>
<el-form-item label="境内商品条码信息查询：">
<el-input
v-show="company === CODE"
v-model="companySearch.code"
placeholder="请输入正确的厂商识别代码！"
class="w240"
></el-input>
<el-input
v-show="company === NAME"
v-model="companySearch.name"
placeholder="请输入正确的商品条码！"
class="w240"
></el-input>
<el-input
v-show="company === ADDRESS"
v-model="companySearch.address"
placeholder="请输入正确的商品条码！"
class="w240"
></el-input>
</el-form-item>
<el-form-item label="验证码：">
<el-button type="primary" class="w240">
<div style="diplay:flex;align-item:center">
<img style="height:14px" src="./img/guard.png" alt="" />
点击此处进行验证
</div>
</el-button>
<el-button style="margin-left:40px" type="primary"
>查询</el-button
>
</el-form-item>
</el-form>
</div>
</el-tab-pane>
<el-tab-pane label="查询产品信息" name="second"> </el-tab-pane>
<el-tab-pane label="查询产品信息" name="second">
<el-form
label-position="left"
label-width="180px"
style="margin-top:50px"
:model="productSearch"
>
<el-form-item label="境内商品条码信息查询：">
<el-input
v-model="productSearch.code"
placeholder="请输入13位或14位的商品条码"
class="w240"
></el-input>
</el-form-item>
<el-form-item label="验证码：">
<el-button type="primary" class="w240">
<div style="diplay:flex;align-item:center">
<img style="height:14px" src="./img/guard.png" alt="" />
点击此处进行验证
</div>
</el-button>
<el-button style="margin-left:40px" type="primary"
>查询</el-button
>
</el-form-item>
</el-form>
</el-tab-pane>
</el-tabs>
</div>
<div class="notice">
......@@ -50,9 +115,21 @@ export default {
ADDRESS,
activeName: "first",
company: CODE,
companySearch: {
name: "",
code: "",
address: "",
},
productSearch: {
code: "",
},
};
},
};
</script>
<style lang="scss" scoped></style>
<style lang="scss">
.w240 {
width: 240px;
}
</style>
src/views/Search/shortcode.vue
<template>
<div class="search-content">
<div class="title">境内条码信息公告查询</div>
<div class="title">缩短码查询</div>
<div class="body">
<el-tabs v-model="activeName" class="tab-no-bottom">
<el-tab-pane label="查询厂商信息" name="first">
<div style="padding-top:20px">
<el-radio-group v-model="company">
<el-radio :label="CODE">根据厂商识别代码查询</el-radio>
<el-radio :label="NAME">根据厂商名称查询</el-radio>
<el-radio :label="ADDRESS">根据厂商名称查询</el-radio>
</el-radio-group>
<el-form> </el-form>
</div>
</el-tab-pane>
<div style="padding-top:20px">
<el-form label-position="left" label-width="180px" :model="search">
<el-form-item label="境外商品条码信息查询：">
<el-input
v-model="search.code"
placeholder="请输入正确的境外商品条码！"
class="w240"
></el-input>
</el-form-item>
<el-form-item label="验证码：">
<div class="y-center">
<el-input
v-model="search.validate"
placeholder="请输入验证码"
class="w160"
></el-input>
<div class="validate-code">
<img src="../../assets/image/validate.jpg" alt="" />
</div>
<el-tab-pane label="查询产品信息" name="second"> </el-tab-pane>
</el-tabs>
<el-button
style="margin-left:40px"
type="primary"
@click="handleSearch"
>查询</el-button
>
</div>
</el-form-item>
</el-form>
<div class="result-box" v-if="showResult">
<div class="result-box-title">查询 {{ searchCodeShow }} 结果</div>
<div class="result-box-body">
<template v-if="result">
<div class="title">商品信息</div>
<div class="product-info"></div>
<div class="title">企业信息</div>
<div class="company-info"></div>
</template>
<span v-else>您输入的商品条码格式不正确，请确认后重试。</span>
</div>
</div>
</div>
</div>
<div class="notice">
<div class="title">友情提示</div>
<div class="content-wrapper">
<img src="./img/pic_ex_jl.png" align="right" alt="" />
<img src="./img/query-external-barcode.png" align="right" alt="" />
<p>
1、商品条码
（又称全球贸易项目代码GTIN）是指包含厂商识别代码在内的对零售商品、非零售商品、物流单元、位置、资产及服务进行全球惟一标识的一种代码（或称数据结构）。对贸易项目进行编码和符号表示（前缀码为690-699是境内条码），能够实现商品零售（POS）、进货、存货管理、自动补货、销售分析及其它业务运作的自动化。
了解更多 >>
1、目前，国际物品编码组织（GS1）已将690至697之间的前缀码分配给中国物品编码中心使用，通常以这些前缀码开始的厂商识别代码都是由中国物品编码中心负责分配和管理的；以其他前缀码开始的则由境外GS1成员组织负责，一般称为"境外条码"，以下为您提供了境外商品条码信息的查询工具，请根据提示进行相关查询。欲了解GS1分配的前缀码，请点击：了解更多
>>
</p>
<p>
2、厂商信息查询结果说明：自中国物品编码中心为企业颁发《系统成员证书》当日起计，7天后，在线公布该企业的名称、厂商识别代码及证书颁发日期等信息；15天后，将公布该企业的具体注册信息。
</p>
<p>
3、本查询仅适用于中华人民共和国境内注册的商品条码信息。
2、本查询仅适用于中华人民共和国境外注册的商品条码信息。
</p>
</div>
</div>
......@@ -39,20 +65,46 @@
</template>
<script>
const CODE = 0;
const NAME = 1;
const ADDRESS = 2;
export default {
data() {
return {
CODE,
NAME,
ADDRESS,
activeName: "first",
company: CODE,
search: { code: "", validate: "" },
searchCodeShow: "",
showResult: false,
result: null,
};
},
methods: {
handleSearch() {
this.searchCodeShow = this.search.code;
this.showResult = true;
if (this.search.code === "1") {
this.result = {};
}
},
},
};
</script>
<style lang="scss" scoped></style>
<style lang="scss">
.search-content {
.validate-code {
display: inline-block;
width: 70px;
height: 40px;
margin-left: 11px;
> img {
width: 100%;
height: 100%;
}
}
.w160 {
width: 160px;
}
.w240 {
width: 240px;
}
}
</style>
src/views/Search/style/common.scss
.search-content {
color: #414345;
background: #ffffff;
border-radius: 4px;
border: 1px solid #c5d8ee;
......@@ -10,6 +11,13 @@
line-height: 25px;
border-bottom: 1px solid #f3f3f3;
}
.el-tabs__item {
color: #454545;
}
.el-form-item__label {
color: #414345;
}
.body {
padding: 20px 30px;
}
......@@ -25,7 +33,6 @@
}
.content-wrapper {
margin-top: 29px;
color: #414345;
font-size: 14px;
font-weight: 400;
p + p {
......@@ -37,4 +44,47 @@
}
}
}
// 查询结果
.result-box {
font-size: 14px;
font-weight: 400;
color: #414345;
line-height: 28px;
}
.result-box-title {
height: 40px;
padding: 0 20px;
line-height: 40px;
font-size: 14px;
font-weight: 600;
color: #f26335;
background: #fef1ec;
}
.result-box-body {
border: 1px solid #ebebeb;
border-top: none;
background-color: white;
padding: 20px;
> .title {
position: relative;
height: 28px;
font-size: 16px;
font-weight: 500;
color: #f26335;
line-height: 28px;
padding-left: 14px;
&::before {
content: "";
position: absolute;
left: 0;
top: 7px;
width: 4px;
height: 16px;
background: #04408d;
}
}
}
}
src/views/comps/SubNav.vue
<template>
<el-menu
:default-active="activeMenu"
class="el-menu-vertical gs-subnav"
:collapse="false"
@select="handleSelect"
:default-active="activeMenu"
class="el-menu-vertical gs-subnav"
:collapse="false"
@select="handleSelect"
>
<template v-for="submenu in subNav">
<el-submenu
v-if="submenu.children && submenu.children.length > 0"
:key="submenu.id"
:index="submenu.name"
v-if="submenu.children && submenu.children.length > 0"
:key="submenu.id"
:index="submenu.name"
>
<template slot="title">
<span>{{ submenu.name }}</span>
</template>
<template v-for="item in submenu.children">
<template v-if="item.children && item.children.length > 0">
<el-submenu
:index="item.name"
:key="item.id"
>
<el-submenu :index="item.name" :key="item.id">
<template slot="title">
<span style="margin-left: 6px">{{ item.name }}</span>
</template>
<template v-for="third in item.children">
<el-menu-item
:key="third.id"
:index="third.name"
:class="{ 'is-active': activeMenu === third.id }"
:key="third.id"
:index="third.name"
:class="{ 'is-active': activeMenu === third.id }"
>
{{ third.name }}
</el-menu-item>
......@@ -36,9 +33,9 @@
</template>
<template v-else>
<el-menu-item
:key="item.id"
:index="item.name"
:class="{ 'is-active': activeMenu === item.id }"
:key="item.id"
:index="item.name"
:class="{ 'is-active': activeMenu === item.id }"
>
{{ item.name }}
</el-menu-item>
......@@ -47,9 +44,9 @@
</el-submenu>
<template v-else>
<el-menu-item
:key="submenu.id"
:index="submenu.name"
:class="{ 'is-active': activeMenu === submenu.id }"
:key="submenu.id"
:index="submenu.name"
:class="{ 'is-active': activeMenu === submenu.id }"
>
<span>{{ submenu.name }}</span>
</el-menu-item>
......@@ -58,21 +55,47 @@
</el-menu>
</template>
<script>
import {mapState} from "vuex";
import { mapState } from "vuex";
export default {
data() {
return {
activeMenu: '',
activeMenu: "",
};
},
computed: {
...mapState("system", ["subNav"]),
},
created() {
console.log(this.subNav);
// console.log(this.subNav);
},
watch: {
subNav: {
handler(val) {
console.log("watch------ subNav", val);
const result = this.treeFind(
val,
(item) => item.link === this.$route.path
);
if (result) {
console.log(result);
this.activeMenu = result.id;
}
},
immediate: true,
},
},
methods: {
treeFind(tree, func) {
for (const data of tree) {
if (func(data)) return data;
if (data.children) {
const res = this.treeFind(data.children, func);
if (res) return res;
}
}
return null;
},
handleSelect(index, indexP) {
console.log(index, indexP);
const temp = JSON.parse(JSON.stringify(indexP));
......@@ -82,12 +105,10 @@ export default {
if (temp.length > 1) {
this.checkChildren(index, temp, item.children);
} else if (temp.length === 0) {
this.activeMenu = item.name;
this.showApp(item);
} else {
item.children.forEach((_item) => {
if (_item.name === index) {
this.activeMenu = _item.name;
this.showApp(_item);
}
});
......@@ -116,14 +137,14 @@ export default {
},
showApp(item) {
console.log(item)
if(item.link.startsWith('http')){
window.open(item.link)
}else{
this.activeMenu = item.id;
if (item.link.startsWith("http")) {
window.open(item.link);
} else {
if (item.breadcrumb) {
this.$store.commit('system/SET_BREADCRUMB', item.breadcrumb)
this.$store.commit("system/SET_BREADCRUMB", item.breadcrumb);
}
this.$router.push({path: item.link})
this.$router.push({ path: item.link });
}
},
......
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