638 lines
18 KiB
Vue
638 lines
18 KiB
Vue
<template>
|
|
<div class="content">
|
|
<el-row>
|
|
<el-col :span="24">
|
|
<!--首页图片-->
|
|
<div class="top">
|
|
<span v-if="bgImage != null">
|
|
<img :src="bgImage" alt="">
|
|
</span>
|
|
<span v-if="bgImage == null">
|
|
<img src="@/assets/school_profile/bj123.png" alt="">
|
|
</span>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<div style="background-color:#F8F8F8 ; padding-bottom: 19rem">
|
|
<!--有三级菜单-->
|
|
<el-row v-show="showSecond">
|
|
<el-col v-if="$i18n.locale === 'cn'" :xs="2" :sm="2" :md="1.5" :lg="2" :xl="4">
|
|
<div class="grid-content"></div>
|
|
</el-col>
|
|
<el-col v-if="$i18n.locale === 'cn'" v-show="width" :md="6" :lg="6" :xl="4">
|
|
<div class="left_lab" ref="lab">
|
|
<div class="lab" v-if="navList">
|
|
<div v-for="(nav,index) in navList" class="lab_div">
|
|
<div v-if="index === showIndex&& nav" class="lab_list lab_select" @click="navClick(nav,index)">
|
|
<div class="lab_img">
|
|
<img src="@/assets/school_profile/eji_icon_xz.png" alt="">
|
|
</div>
|
|
<div class="lab_title">
|
|
{{ nav.title }}
|
|
</div>
|
|
</div>
|
|
<div v-if="index !== showIndex&& nav" class="lab_list" @click="navClick(nav,index)">
|
|
<div class="lab_img">
|
|
<img src="@/assets/school_profile/eji_icon_xz.png" alt="">
|
|
</div>
|
|
<div class="lab_title">
|
|
{{ nav.title }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
|
|
|
|
<el-col v-if="$i18n.locale === 'en'" :xs="2" :sm="2" :md="2" :lg="2" :xl="3">
|
|
<div class="grid-content"></div>
|
|
</el-col>
|
|
|
|
<el-col v-if="$i18n.locale === 'en'" v-show="width" :md="6" :lg="6" :xl="5">
|
|
<div class="left_lab english" ref="lab">
|
|
<div class="lab">
|
|
<div v-for="(nav,index) in navList" class="lab_div">
|
|
<div v-if="index === showIndex" class="lab_list lab_select" @click="navClick(nav,index)">
|
|
<div class="lab_img">
|
|
<img src="@/assets/school_profile/eji_icon_xz.png" alt="">
|
|
</div>
|
|
<div class="lab_title">
|
|
{{ nav.englishTitle }}
|
|
</div>
|
|
</div>
|
|
<div v-if="index !== showIndex" class="lab_list" @click="navClick(nav,index)">
|
|
<div class="lab_img">
|
|
<img src="@/assets/school_profile/eji_icon_xz.png" alt="">
|
|
</div>
|
|
<div class="lab_title">
|
|
{{ nav.englishTitle }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
|
|
|
|
<!--<el-col v-if="$i18n.locale === 'cn'" :xs="20" :sm="20" :md="15" :lg="14" :xl="12">-->
|
|
<el-col :xs="20" :sm="20" :md="15" :lg="14" :xl="12">
|
|
<el-row>
|
|
<el-col>
|
|
<div class="tab">
|
|
<router-link style="color: #1956BC; font-size: 16px;" to="/home">{{ $t('message.home') }}</router-link>
|
|
<span> > </span>
|
|
<span>
|
|
<!--<router-link to="">-->
|
|
<span v-if="$i18n.locale === 'cn'">{{ crumbs.one.title }}</span>
|
|
<span v-if="$i18n.locale === 'en'">{{ crumbs.one.englishTitle }}</span>
|
|
<!--</router-link>-->
|
|
</span>
|
|
<span> > </span>
|
|
<span>
|
|
<span v-if="$i18n.locale === 'cn'">{{ crumbs.two.title }}</span>
|
|
<span v-if="$i18n.locale === 'en'">{{ crumbs.two.englishTitle }}</span>
|
|
</span>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col>
|
|
<Introduction :introduction="contextData" v-if="type === 1"/>
|
|
<List :list="contextData" v-if="type === 2 && listDataType == 0"/>
|
|
<SimpleList :list="contextData" v-if="type === 2 && listDataType == 1"/>
|
|
<FileList :value="contextData" v-if="type === 4"/>
|
|
<DireData :value="contextData" v-if="type === 3 && dreDataType == '1'"/>
|
|
<DireDataTow :value="contextData" v-if="type === 3 && dreDataType == '2'"/>
|
|
<Details :value="detailsData" v-if="type == null"/>
|
|
</el-col>
|
|
</el-row>
|
|
</el-col>
|
|
</el-row>
|
|
<!--无三级菜单-->
|
|
<el-row v-show="!showSecond">
|
|
<el-col :xs="2" :sm="2" :md="2" :lg="4" :xl="5">
|
|
<div class="grid-content"></div>
|
|
</el-col>
|
|
<el-col :xs="20" :sm="20" :md="20" :lg="16" :xl="14">
|
|
<el-row>
|
|
<el-col>
|
|
<div class="tab">
|
|
<router-link style="color: #1956BC; font-size: 16px;" to="/">{{ $t('message.home') }}</router-link>
|
|
<span> > </span>
|
|
<span>
|
|
<!--<router-link to="">-->
|
|
<span v-if="$i18n.locale === 'cn'">{{ crumbs.one.title }}</span>
|
|
<span v-if="$i18n.locale === 'en'">{{ crumbs.one.englishTitle }}</span>
|
|
<!--</router-link>-->
|
|
</span>
|
|
<span> > </span>
|
|
<span>
|
|
<!--<router-link to="">-->
|
|
<span v-if="$i18n.locale === 'cn'">{{ crumbs.two.title }}</span>
|
|
<span v-if="$i18n.locale === 'en'">{{ crumbs.two.englishTitle }}</span>
|
|
<!--</router-link>-->
|
|
</span>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col>
|
|
<Introduction :introduction="contextData" v-if="type === 1"/>
|
|
<List :list="contextData" v-if="type === 2 && listDataType == 0"/>
|
|
<SimpleList :list="contextData" v-if="type === 2 && listDataType == 1"/>
|
|
<FileList :value="contextData" v-if="type === 4"/>
|
|
<DireData :value="contextData" v-if="type === 3 && dreDataType == '1'"/>
|
|
<DireDataTow :value="contextData" v-if="type === 3 && dreDataType == '2'"/>
|
|
<Details :value="detailsData" v-if="type == null"/>
|
|
</el-col>
|
|
</el-row>
|
|
</el-col>
|
|
<el-col :xs="2" :sm="2" :md="2" :lg="4" :xl="5">
|
|
<div class="grid-content"></div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {getNode, crumbs, article} from "@/api";
|
|
import Introduction from './components/Introduction.vue'
|
|
import List from './components/list.vue'
|
|
import DireData from './components/dire_data.vue'
|
|
import DireDataTow from './components/dire_data_tow.vue'
|
|
import Details from './components/details.vue'
|
|
import FileList from './components/file_list.vue'
|
|
import SimpleList from './components/simple_list.vue'
|
|
import {handleTree} from "@/utils/ebts";
|
|
import {getParentNode, setLanguage} from "@/utils/sist";
|
|
import {getNodeNav} from "../../api";
|
|
|
|
export default {
|
|
name: "index",
|
|
components: {
|
|
Introduction,
|
|
List,
|
|
DireData,
|
|
Details,
|
|
FileList,
|
|
DireDataTow,
|
|
SimpleList
|
|
},
|
|
data() {
|
|
return {
|
|
width: document.documentElement.clientWidth > 992,
|
|
secondId: null,
|
|
navId: null,
|
|
dreDataType: "",
|
|
listDataType: 0,
|
|
navList: [],
|
|
showIndex: 0,
|
|
showSecond: true,
|
|
contextData: {},
|
|
type: 2,
|
|
bgImage: null,
|
|
crumbs: {
|
|
"two": {
|
|
"title": "学院领导",
|
|
},
|
|
"one": {
|
|
"title": "学院概况",
|
|
}
|
|
},
|
|
detailsData: {}
|
|
}
|
|
},
|
|
watch: {
|
|
$route(to, from) {
|
|
console.log("$route触发了")
|
|
this.showIndex = 0
|
|
this.rest()
|
|
let arcId = this.$route.params && this.$route.query.id
|
|
this.navId = this.$route.params && this.$route.params.navId;
|
|
let id = this.$route.params && this.$route.params.secondId
|
|
this.type = this.$route.query && this.$route.query.type
|
|
if (this.type == 3 || this.type == 1 || this.type == 2) {
|
|
this.secondId = id
|
|
this.getCrumbs();
|
|
this.showSecond = false
|
|
let info = getParentNode(this.secondId);
|
|
console.log("获取到info", info)
|
|
if (arcId != undefined) {
|
|
console.log("getContext")
|
|
this.getContext(arcId)
|
|
} else {
|
|
console.log("getContent")
|
|
this.getContent(info.second)
|
|
}
|
|
return
|
|
} else {
|
|
console.log(this.navId, "this.navId")
|
|
if (undefined == this.navId) {
|
|
this.secondId = id
|
|
this.getNodes()
|
|
}
|
|
}
|
|
this.showSecond = true
|
|
if (arcId != undefined) {
|
|
this.getContext(arcId)
|
|
}
|
|
try {
|
|
this.$refs.lab.style.height = this.navList.length * 8 + 10 + 'rem'
|
|
} catch (e) {
|
|
}
|
|
this.showIndex = 0
|
|
console.log("开始循环查找id信息")
|
|
if (this.secondId == id && this.navList) {
|
|
for (let i = 0; i < this.navList.length; i++) {
|
|
if (this.navId == this.navList[i].encodeId) {
|
|
console.log("找到了")
|
|
this.showIndex = i
|
|
this.getContent(this.navList[i])
|
|
}
|
|
}
|
|
} else {
|
|
console.log("跳转的路由和以前不一样")
|
|
this.navList = []
|
|
this.secondId = id
|
|
this.getNav()
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
console.log("created触发了")
|
|
setLanguage(this)
|
|
this.showIndex = 0
|
|
this.secondId = this.$route.params && this.$route.params.secondId;
|
|
this.navId = this.$route.params && this.$route.params.navId;
|
|
this.type = this.$route.query && this.$route.query.type
|
|
console.log(this.type, "this.type")
|
|
setTimeout(() => {
|
|
this.getNav()
|
|
this.getNodes()
|
|
}, 200);
|
|
//this.getNav()
|
|
this.getCrumbs();
|
|
},
|
|
methods: {
|
|
rest() {
|
|
this.showIndex = 0
|
|
this.navId = null
|
|
this.type = null
|
|
},
|
|
/**
|
|
* 获得面包屑导航
|
|
*/
|
|
getCrumbs() {
|
|
crumbs(this.secondId).then(res => {
|
|
this.crumbs = res.data
|
|
})
|
|
},
|
|
/**
|
|
* 获得内容
|
|
* @param arcId
|
|
*/
|
|
getContext(arcId) {
|
|
article(arcId).then(res => {
|
|
this.detailsData = res.data.data
|
|
this.type = null
|
|
})
|
|
},
|
|
/**
|
|
* 获得菜单下的信息
|
|
*/
|
|
getNav() {
|
|
this.getCrumbs();
|
|
if (this.type == 3 || this.type == 1 || this.type == 2) {
|
|
console.log("进入二级")
|
|
this.showSecond = false
|
|
let info = null
|
|
info = getParentNode(this.secondId);
|
|
if (info == null) {
|
|
location.reload();
|
|
}
|
|
let arcId = null
|
|
|
|
arcId = this.$route.query && this.$route.query.id
|
|
console.log(arcId)
|
|
if (arcId != undefined) {
|
|
this.getContext(arcId)
|
|
} else {
|
|
console.log("获取二级列表")
|
|
this.getContent(info.second)
|
|
}
|
|
return
|
|
}
|
|
this.showSecond = true
|
|
},
|
|
|
|
/**
|
|
* 获得节点信息
|
|
*/
|
|
async getNodes() {
|
|
console.log("getNodes被触发了")
|
|
this.navList = []
|
|
// await getNode({id: this.secondId}).then(res => {
|
|
// this.navList = res.data
|
|
// try {
|
|
// setTimeout(() => {
|
|
// this.$refs.lab.style.height = this.navList.length * 8 + 10 + 'rem'
|
|
// }, 100);
|
|
// } catch (e) {
|
|
// console.log(e)
|
|
// }
|
|
// // if (!this.navList){
|
|
// // return
|
|
// // }
|
|
// for (let i = 0; i < this.navList.length; i++) {
|
|
// if (this.navId == this.navList[i].encodeId) {
|
|
// this.showIndex = i
|
|
// }
|
|
// }
|
|
// let arcId = this.$route.query && this.$route.query.id
|
|
// if (arcId != undefined) {
|
|
// this.getContext(arcId)
|
|
// } else {
|
|
// console.log("测试,我被触发了!")
|
|
// if (this.navId == undefined) {
|
|
// this.getContent(this.navList[0])
|
|
// } else {
|
|
// this.getContent(this.navList[this.showIndex])
|
|
// }
|
|
// }
|
|
// })
|
|
let res = await getNodeNav({id: this.secondId})
|
|
// todo 延时异步问题
|
|
console.log(res, "2222")
|
|
if (res.data.length == 0) {
|
|
this.navList = []
|
|
this.showSecond = false
|
|
return
|
|
}
|
|
this.navList = res.data
|
|
// setTimeout(() => {
|
|
this.$refs.lab.style.height = res.data.length * 8 + 10 + 'rem'
|
|
console.log("qqq")
|
|
// }, 100);
|
|
|
|
// if (!this.navList){
|
|
// return
|
|
// }
|
|
for (let i = 0; i < this.navList.length; i++) {
|
|
if (this.navId == this.navList[i].encodeId) {
|
|
this.showIndex = i
|
|
}
|
|
}
|
|
let arcId = this.$route.query && this.$route.query.id
|
|
console.log("进入到arcId 的判断", arcId)
|
|
if (arcId != undefined) {
|
|
this.getContext(arcId)
|
|
} else {
|
|
console.log("进入到this.navId 的判断", this.navId)
|
|
if (this.navId == undefined) {
|
|
this.getContent(this.navList[0])
|
|
} else {
|
|
this.getContent(this.navList[this.showIndex])
|
|
}
|
|
}
|
|
},
|
|
/**
|
|
* 获取三级菜单
|
|
* @param menu
|
|
*/
|
|
getContent(menu) {
|
|
console.log("getContent被触发了", menu)
|
|
if (menu == undefined) {
|
|
return
|
|
}
|
|
this.type = menu.type
|
|
this.contextData = null
|
|
this.bgImage = menu.link
|
|
let data = null
|
|
if (this.type === 2 || this.type === 4) {
|
|
data = {
|
|
id: menu.encodeId,
|
|
pageNum: 1,
|
|
pageSize: 5
|
|
}
|
|
this.listDataType = 0
|
|
console.log(menu.isSimple,"menu.isSimple")
|
|
if (this.type === 4 || menu.isSimple == 1) {
|
|
data.pageSize = 10
|
|
this.listDataType = 1
|
|
}
|
|
} else {
|
|
data = {
|
|
id: menu.encodeId,
|
|
}
|
|
}
|
|
getNode(data).then(res => {
|
|
console.log(res, "res值")
|
|
console.log(this.type);
|
|
if (null == res.data && null == res.rows) {
|
|
this.contextData = null
|
|
console.log("将值设为null", this.contextData)
|
|
this.type = 0
|
|
return
|
|
}
|
|
if (this.type === 2 || this.type === 4) {
|
|
this.contextData = {
|
|
data: res.rows,
|
|
total: res.total,
|
|
pageNum: data.pageNum,
|
|
pageSize: data.pageSize,
|
|
navId: menu.encodeId,
|
|
secondId: this.secondId,
|
|
}
|
|
} else if (this.type == 1) {
|
|
this.contextData = res.data
|
|
} else if (this.type == 3) {
|
|
if (res.additional == "") {
|
|
this.dreDataType = "1"
|
|
} else {
|
|
console.log(this.dreDataType, "this.organizationType")
|
|
this.dreDataType = res.additional
|
|
}
|
|
this.contextData = handleTree(res.data, "id", "pid", null, null)
|
|
console.log(this.contextData, "this.contextData")
|
|
}
|
|
})
|
|
},
|
|
|
|
|
|
/**
|
|
* 菜单点击,路由切换
|
|
* @param nav
|
|
* @param index
|
|
*/
|
|
navClick(nav, index) {
|
|
//if (index != this.showIndex) {
|
|
this.showIndex = index
|
|
this.type = nav.type
|
|
this.$router.push("/pc/" + this.secondId + "/" + nav.encodeId + "?lang=" + sessionStorage.getItem("lang"));
|
|
//this.getContent(nav)
|
|
//}
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.content {
|
|
background-color: #F8F8F8 !important;
|
|
}
|
|
|
|
.english {
|
|
margin: 0 !important;
|
|
width: 80% !important;
|
|
|
|
.lab {
|
|
width: 100% !important;
|
|
}
|
|
|
|
.lab_list {
|
|
width: 100% !important;
|
|
}
|
|
}
|
|
|
|
.context {
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.top {
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.left_lab {
|
|
margin-left: 4rem;
|
|
width: 22rem;
|
|
height: 48rem;
|
|
background: #1956BC;
|
|
border-radius: 0rem 0rem 2rem 0rem;
|
|
position: relative;
|
|
|
|
.lab {
|
|
font-size: 1.6rem;
|
|
position: absolute;
|
|
left: 4.8rem;
|
|
top: 5rem;
|
|
width: 20rem;
|
|
margin-bottom: 3rem;
|
|
background: #FFFFFF;
|
|
box-shadow: 0rem 0.2rem 0.4rem 0rem rgba(6, 42, 102, 0.67);
|
|
border-radius: 0rem 0rem 2.5rem 2rem;
|
|
|
|
.lab_list:last-child {
|
|
border: none;
|
|
}
|
|
|
|
.lab_div {
|
|
border-bottom: 0.1rem solid #94BCFF !important;
|
|
//margin-left: 1rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.lab_div:last-child {
|
|
border-bottom: none !important;
|
|
padding-bottom: 1.5rem;
|
|
}
|
|
|
|
.lab_list {
|
|
cursor: pointer;
|
|
text-align: center;
|
|
//width: 19rem;
|
|
height: 8rem;
|
|
clear: left;
|
|
line-height: 8rem;
|
|
|
|
.lab_img {
|
|
margin-top: .2rem;
|
|
float: left;
|
|
width: 1.4rem;
|
|
height: 1.4rem;
|
|
display: none;
|
|
margin-left: 1rem;
|
|
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.lab_title {
|
|
color: #1956BC;
|
|
float: left;
|
|
margin-left: 3rem;
|
|
}
|
|
}
|
|
|
|
.lab_select {
|
|
background: #94BCFF;
|
|
|
|
.lab_img {
|
|
display: block;
|
|
}
|
|
|
|
.lab_title {
|
|
color: #FFFFFF;
|
|
margin-left: .4rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.tab {
|
|
margin-left: 1.9rem;
|
|
margin-top: 1.5rem;
|
|
font-weight: 400;
|
|
font-size: 1.6rem;
|
|
|
|
a {
|
|
text-decoration: none;
|
|
font-size: 1.4rem !important;
|
|
color: #3C3C3C;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 980px) {
|
|
.left_lab {
|
|
margin-left: 3rem;
|
|
width: 16.5rem;
|
|
height: 36rem;
|
|
|
|
border-radius: 0rem 0rem 1rem 0rem;
|
|
|
|
.lab {
|
|
left: 3.6rem;
|
|
top: 3.75rem;
|
|
width: 14.25rem;
|
|
margin-bottom: 2.25rem;
|
|
border-radius: 0rem 0rem 1.2rem 1rem;
|
|
|
|
.lab_list {
|
|
margin-left: .75rem;
|
|
width: 13.5rem;
|
|
height: 6rem;
|
|
line-height: 6rem;
|
|
|
|
.lab_img {
|
|
margin-top: .1rem;
|
|
width: 1.05rem;
|
|
height: 1.05rem;
|
|
display: none;
|
|
margin-left: 3rem;
|
|
}
|
|
|
|
.lab_title {
|
|
margin-left: 1.5rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|