dengjie commit : 备份三级菜单

src/views/content/index_back.vue

@@ -0,0 +1,614 @@
+<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";
+
+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("我被触发了")
+      this.showIndex = 0
+      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.getNodes()
+        }
+      }
+      this.showSecond = true
+      if (arcId != undefined) {
+        this.getContext(arcId)
+      }
+      try {
+        this.$refs.lab.style.height = this.navList.length * 8 + 10 + 'rem'
+      } catch (e) {
+      }
+      if (this.secondId == id && this.navList) {
+        for (let i = 0; i < this.navList.length; i++) {
+          if (this.navId == this.navList[i].encodeId) {
+            this.showIndex = i
+            this.getContent(this.navList[i])
+          }
+        }
+      } else {
+        this.navList = []
+        this.secondId = id
+        this.getNav()
+      }
+    }
+  },
+  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()
+    }, 200);
+    //this.getNav()
+    this.getCrumbs();
+  },
+  methods: {
+    /**
+     * 获得面包屑导航
+     */
+    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
+      this.getNodes()
+    },
+
+    /**
+     * 获得节点信息
+     */
+    async 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 getNode({id: this.secondId})
+      // todo 延时异步问题
+      setTimeout(() => {
+        this.$refs.lab.style.height = res.data.length * 8 + 10 + 'rem'
+      }, 100);
+      this.navList = res.data
+      // 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])
+        }
+      }
+    },
+    /**
+     * 获取三级菜单
+     * @param menu
+     */
+    getContent(menu) {
+      console.log("getContent内部,menu:", menu)
+      console.log(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
+        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>

src/views/header/index.vue

@@ -85,8 +85,6 @@ export default {
       menuData: [],
       link_color:'#C5DCFE',
       logo:true
-      // logoOne:'block',
-      // logoTwo:'none'
     }
   },
   mounted() {
@@ -103,7 +101,7 @@ export default {
         header_bgc.style= "position: fixed;top: 0;background-color: #fff;box-shadow: 0px 1px 3px 0px rgba(8,57,122,0.18);"
         this.link_color='#0A51AE'
         this.logo=false
-        // // link_text.style="color:#fff;"
+        // link_text.style="color:#fff;"
         // link_text.addClass('active')
       }else if(top === 0){
         Head.style = "position: static;"