You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
146 lines
3.5 KiB
146 lines
3.5 KiB
<template>
|
|
<div>
|
|
<div class="left-title d-flex align-center justify-center">
|
|
{{ list.title }}
|
|
</div>
|
|
<template v-for="item in list.children">
|
|
<div
|
|
:key="item.code"
|
|
class="left-nav left-child d-flex align-center justify-center"
|
|
:class="code === item.code ? 'active' : ''"
|
|
@click="changeQuery(item.code, item.url, item)"
|
|
>
|
|
{{ item.title }}
|
|
</div>
|
|
<template v-if="item.children && item.children.length && getShow(item.code)">
|
|
<div
|
|
class="left-nav-child d-flex align-center justify-center"
|
|
v-for="child in item.children"
|
|
:class="childCode === child.code ? 'active' : ''"
|
|
:key="child.code"
|
|
@click="changeQuery(child.code, item.url)"
|
|
>
|
|
{{ child.title }}
|
|
</div>
|
|
</template>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: 'LeftNav',
|
|
props: {
|
|
list: {
|
|
default: () => {},
|
|
type: Object,
|
|
},
|
|
code: {
|
|
default: '',
|
|
type: String,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
childCode: '',
|
|
str: '',
|
|
};
|
|
},
|
|
|
|
watch: {
|
|
'$route.query.code'(val) {
|
|
this.childCode = val;
|
|
},
|
|
},
|
|
|
|
mounted() {
|
|
this.childCode = this.$route.query.code;
|
|
},
|
|
|
|
methods: {
|
|
changeQuery(code, url, item) {
|
|
let childCode = code;
|
|
if (item && item.children && item.children.length) {
|
|
childCode = item.children[0].code;
|
|
}
|
|
if (!url) {
|
|
if (this.code && code !== this.code) {
|
|
this.$router.push({ query: { code: childCode } });
|
|
this.$emit('chanegCode', code);
|
|
this.childCode = code;
|
|
} else if (code === this.code) {
|
|
const path = window.location.href.split('?')
|
|
window.location.href= path[0]+`?code=${code}`
|
|
}
|
|
} else {
|
|
if (url === '/') {
|
|
window.open(`${window.location.href}`);
|
|
} else {
|
|
window.open(`${process.env.VUE_APP_BASE_URL + process.env.VUE_APP_PUBLIC_PATH}${url}?code=${childCode}`);
|
|
}
|
|
}
|
|
},
|
|
getShow(code) {
|
|
if (code === this.code) {
|
|
return true;
|
|
} else {
|
|
for (let i = 0; i < this.list.children.length; i++) {
|
|
const item = this.list.children[i];
|
|
if (item.children && item.children.length) {
|
|
for (let k = 0; k < item.children.length; k++) {
|
|
if (this.code === item.children[k].code && code === item.code) {
|
|
return true;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style scoped>
|
|
.left-title {
|
|
background-color: rgb(174, 0, 2);
|
|
color: #fff;
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
width: 240px;
|
|
height: 56px;
|
|
border-bottom: 1px solid rgba(112, 112, 112, 0.1);
|
|
background-image: url('./title-bg.png');
|
|
background-size: 100% 100%;
|
|
}
|
|
.left-nav {
|
|
width: 240px;
|
|
height: 56px;
|
|
/* border-bottom: 1px solid rgba(112, 112, 112, 0.1); */
|
|
/* margin-bottom: 1px; */
|
|
}
|
|
.left-nav-child {
|
|
width: 240px;
|
|
height: 56px;
|
|
padding-left: 20px;
|
|
/* border-bottom: 1px solid rgba(112, 112, 112, 0.1); */
|
|
/* margin-bottom: 1px; */
|
|
background-color: #ededed;
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
.left-child {
|
|
background-color: #fff;
|
|
font-size: 20px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
.left-nav:hover {
|
|
background-color: #b54343;
|
|
border-left: 4px solid rgb(174, 0, 2);
|
|
color: #fff;
|
|
}
|
|
.active {
|
|
background-color: #b54343;
|
|
border-left: 4px solid rgb(174, 0, 2);
|
|
color: #fff;
|
|
}
|
|
</style>
|
|
|