From e19b6b68c37ae9ac2609dbd2c794aa3cb285b223 Mon Sep 17 00:00:00 2001
From: yujialong <479214531@qq.com>
Date: Thu, 1 Dec 2022 10:07:22 +0800
Subject: [PATCH] fix

---
 src/api/index.js                  |   4 +
 src/components/menuTree/index.vue |   8 +-
 src/layouts/header/index.vue      |  44 ++++++--
 src/layouts/navbar/index.vue      |  35 +++++--
 src/pages/about/index.vue         |   4 +-
 src/pages/application/index.vue   |   2 +-
 src/pages/article/index.vue       |   2 +-
 src/pages/column/index.vue        | 164 +++++++++++++++++++++---------
 src/pages/news/index.vue          |   6 +-
 src/styles/common.scss            |  16 ++-
 10 files changed, 209 insertions(+), 76 deletions(-)

diff --git a/src/api/index.js b/src/api/index.js
index c98cad7..cbb01af 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -13,4 +13,8 @@ export default {
   queryLabel: `iasf/content/label/queryAllArticleSubjectTags`,
   getsTheSubColumn: `iasf/sysColumn/getsTheSubColumn`,
   articlePreview: `iasf/sysContent/articlePreview`,
+  getsSublevelColumnsUnderALevel: `iasf/sysColumn/getsSublevelColumnsUnderALevel`,
+  hotContent: `iasf/sysContent/hotContent`,
+  siteSearchArticles: `iasf/sysContent/siteSearchArticles`,
+  oneLevelChecksThemAll: `iasf/sysColumn/oneLevelChecksThemAll`,
 }
\ No newline at end of file
diff --git a/src/components/menuTree/index.vue b/src/components/menuTree/index.vue
index b1c5dee..37178c2 100644
--- a/src/components/menuTree/index.vue
+++ b/src/components/menuTree/index.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="menu-child">
     <template v-for="item in this.menuList">
-      <el-submenu :key="item.id" :index="String(item.id)" v-if="item.children && item.children.length">
+      <el-submenu :popper-class="$route.path === '/home' ? 'home-menu-popup' : ''" :class="{active: $route.query.id == item.id}" :key="item.id" :index="String(item.id)" :id="item.id" v-if="item.children && item.children.length">
         <template slot="title">
-          <span slot="title">{{item.columnName}}</span>
+          <span slot="title" :id="item.id">{{item.columnName}}</span>
         </template>
         <menuTree :menuList="item.children"></menuTree>
       </el-submenu>
-      <el-menu-item :key="item.id" :index="String(item.id)" v-else>
-        <span slot="title">{{item.columnName}}</span>
+      <el-menu-item :key="item.id" :id="item.id" :index="String(item.id)" v-else>
+        <span slot="title" :id="item.id">{{item.columnName}}</span>
       </el-menu-item>
     </template>
   </div>
diff --git a/src/layouts/header/index.vue b/src/layouts/header/index.vue
index 4395d2b..fe77c18 100644
--- a/src/layouts/header/index.vue
+++ b/src/layouts/header/index.vue
@@ -1,7 +1,7 @@
 <template>
-  <div :class="['header', { channel: isChannel }]">
+  <div :class="['header', { channel: isHome }]">
     <a class="logo" @click="toIndex">
-      <img v-if="isChannel" src="@/assets/images/logo.png" alt="">
+      <img v-if="isHome" src="@/assets/images/logo.png" alt="">
       <template v-else>
         <img src="@/assets/images/logo-black.png" alt="">
         <!-- <img src="@/assets/images/logo1.png" alt="">
@@ -10,8 +10,12 @@
     </a>
     <navbar ref="nav"></navbar>
     <div class="tools">
-      <img class="search" :src="require('@/assets/images/search' + (isChannel ? '-white' : '') + '.png')" alt="">
-      <img :src="require('@/assets/images/cn' + (isChannel ? '-white' : '') + '.png')" alt="">
+      <img class="search" :src="require('@/assets/images/search' + (isHome ? '-white' : '') + '.png')" alt="" @click="showSearch = !showSearch">
+      <img :src="require('@/assets/images/cn' + (isHome ? '-white' : '') + '.png')" alt="" @click="showSearch = !showSearch">
+      <div v-if="showSearch" class="search-wrap">
+        <i class="el-icon-search icon"></i>
+        <input type="text" placeholder="请输入文章标题" v-model="title">
+      </div>
     </div>
   </div>
 </template>
@@ -23,7 +27,9 @@ import navbar from '../navbar'
 export default {
   data() {
     return {
-      isChannel: this.$route.path === '/home'
+      isHome: this.$route.path === '/home',
+      showSearch: false,
+      title: ''
     };
   },
   components: {
@@ -31,7 +37,7 @@ export default {
   },
   watch: {
     '$route'() {
-      this.isChannel = this.$route.path === '/home'
+      this.isHome = this.$route.path === '/home'
     }
   },
   mounted() {
@@ -83,6 +89,32 @@ $height: 90px;
     margin-right: 43px;
   }
 }
+.search-wrap {
+  position: absolute;
+  top: 67px;
+  right: 89px;
+  padding: 10px;
+  background-color: #fff;
+  .icon {
+    position: absolute;
+    top: 20px;
+    left: 22px;
+    font-size: 16px;
+    color: #959595;
+  }
+  input {
+    width: 300px;
+    height: 36px;
+    padding: 0 15px 0 40px;
+    font-size: 16px;
+    color: #333;
+    line-height: 36px;
+    background-color: #f5f5f5;
+    border: 0;
+    border-radius: 4px;
+    outline: none;
+  }
+}
 @media (max-width: 1500px) {
   .header {
     .logo {
diff --git a/src/layouts/navbar/index.vue b/src/layouts/navbar/index.vue
index b86c748..0ad7207 100644
--- a/src/layouts/navbar/index.vue
+++ b/src/layouts/navbar/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <el-menu :class="['nav', {home: isHome}]" ref="type" :key="menuRefresh" mode="horizontal" menu-trigger="click" :background-color="bgColor" :text-color="textColor" :active-text-color="activeTextColor" @open="jump" @select="jump" :default-active="String(active)">
+    <el-menu :class="['nav', {home: isHome}]" ref="elMenu" :key="menuRefresh" mode="horizontal" :background-color="bgColor" :text-color="textColor" :active-text-color="activeTextColor" @open="jump" @select="jump" :default-active="String(active)">
       <menuTree :menuList="menus"/>
     </el-menu>
   </div>
@@ -20,7 +20,8 @@ export default {
       textColor: '#333',
       activeTextColor: '#1583FF',
       menuRefresh: 1,
-      toItem: {}
+      toItem: {},
+      parentId: 0
     };
   },
   components: {
@@ -47,7 +48,25 @@ export default {
         isSort: 1
       }).then(({ data }) => {
         this.menus = data
-        if (!this.active && data.length) this.active = data[0].id
+        if (data.length) {
+          if (!this.$route.query.id) this.$router.replace(`/column?id=${data[0].id}&siteId=${data[0].siteId}`)
+          if (!this.active) this.active = data[0].id
+          this.$nextTick(() => {
+            const menu = document.querySelectorAll('.el-submenu')
+            for (let i = 0; i < menu.length; i++) {
+              menu[i].onclick = e => {
+                console.log(33, e.target)
+                // 获取栏目id
+                let id = e.target.getAttribute('id')
+                if (!id) {
+                  const span = e.target.querySelector('span')
+                  if (span) id = span.getAttribute('id')
+                }
+                id && this.jump(id)
+              }
+            }
+          })
+        }
       }).catch(err => {})
     },
     // 改变菜单颜色
@@ -60,6 +79,7 @@ export default {
     // 获取点击菜单的路径
     getPath(data, id) {
       for (const e of data) {
+        if (e.level === 1) this.parentId = e.id
         if (e.id == id) {
           this.toItem = e
           break
@@ -70,9 +90,9 @@ export default {
     },
     // 跳转
     jump(id) {
-      console.log("🚀 ~ file: index.vue ~ line 73 ~ jump ~ id", id)
       this.getPath(this.menus ,id)
       const to = this.toItem
+      console.log("🚀 ~ file: index.vue ~ line 73 ~ jump ~ id", to, this.parentId)
       const { typeId } = to
       // 跳转链接
       if (typeId === 2) {
@@ -98,9 +118,12 @@ export default {
         } else {
           location.href = href
         }
+      } else if (typeId === 3) {
+        // 长页栏目直接获取path
+        this.$router.push(`/${to.path}?id=${id}`).catch(err => {})
       } else if (typeId !== 4 || (typeId === 4 && !to.children.length)) {
-        // 常规栏目跳转到column页，长页栏目直接获取path
-        this.$router.push(`/${typeId === 3 ? to.path : 'column'}?id=${id}`).catch(err => {})
+        // 常规/子级优先栏目跳转到column页
+        this.$router.push(`/column?id=${id}`).catch(err => {})
       }
     }
   }
diff --git a/src/pages/about/index.vue b/src/pages/about/index.vue
index 8eb9dd6..1a5245a 100644
--- a/src/pages/about/index.vue
+++ b/src/pages/about/index.vue
@@ -103,8 +103,8 @@
             <li v-if="item.isEnable" :key="i">
               <img class="pic" :src="item.pic" alt="">
               <div class="texts">
-                <p class="sub">{{ item.title }}</p>
-                <h6>{{ item.subTitle }}</h6>
+                <p class="sub">{{ item.subTitle }}</p>
+                <h6>{{ item.title }}</h6>
                 <p class="des">{{ item.des }}</p>
                 <img :class="{'arrow': item.link.linkName !== '无'}" src="@/assets/images/arrow.png" alt="" @click="openLink(item)">
               </div>
diff --git a/src/pages/application/index.vue b/src/pages/application/index.vue
index 91851ff..42d276f 100644
--- a/src/pages/application/index.vue
+++ b/src/pages/application/index.vue
@@ -102,7 +102,7 @@ export default {
           // 获取文章列表
           const { column, site, articleNum } = json[7].form
           if (column.length) {
-            this.$post(this.api.queryArticle, {
+            this.$post(this.api.newlyPublishedArticles, {
               siteId: site,
               columnIds: [column[column.length - 1]],
               pageNum: 1,
diff --git a/src/pages/article/index.vue b/src/pages/article/index.vue
index f1c1ad7..b8a5a40 100644
--- a/src/pages/article/index.vue
+++ b/src/pages/article/index.vue
@@ -186,7 +186,7 @@ export default {
     padding-bottom: 30px;
     margin-bottom: 30px;
     font-size: 24px;
-    line-height: 20px;
+    line-height: 40px;
     color: #606060;
     border-bottom: 1px solid #D8D8D8;
   }
diff --git a/src/pages/column/index.vue b/src/pages/column/index.vue
index 3f4c6ca..69a00ee 100644
--- a/src/pages/column/index.vue
+++ b/src/pages/column/index.vue
@@ -58,7 +58,7 @@
             </div>
           </div>
           <div class="contents">
-            <el-tree v-if="!isFilter && showNav" class="columns" ref="leftColumn" :data="columns" highlight-current :expand-on-click-node="false" default-expand-all :props="defaultProps" node-key="id" @node-click="columnClick"></el-tree>
+            <el-tree v-if="!isFilter && showNav" class="columns" ref="leftColumn" :data="columns" highlight-current :expand-on-click-node="false" default-expand-all :props="defaultProps" node-key="id" icon-class="el-icon-arrow-down" @node-click="columnClick"></el-tree>
 
             <div style="width: 1113px">
               <ul class="articles">
@@ -92,23 +92,15 @@
 
           <p class="l-title">热点内容</p>
           <ul class="list">
-            <li>
-              <p class="text">喜报 | 深圳粒子研究院荣获全国科研…</p>
-              <span class="date">2022-08-09</span>
-            </li>
-            <li>
-              <p class="text">喜报 | 深圳粒子研究院荣获全国科研…</p>
-              <span class="date">2022-08-09</span>
-            </li>
-            <li>
-              <p class="text">喜报 | 深圳粒子研究院荣获全国科研…</p>
-              <span class="date">2022-08-09</span>
+            <li v-for="(item, i) in hots" :key="i" :title="item.title" @click="toArtice(item)">
+              <p class="text">{{ item.title }}</p>
+              <span class="date">{{ item.createTime }}</span>
             </li>
           </ul>
 
           <p class="l-title">最新资讯</p>
           <ul class="list">
-            <li v-for="(item, i) in news" :key="i">
+            <li v-for="(item, i) in news" :key="i" :title="item.title" @click="toArtice(item)">
               <p class="text">{{ item.title }}</p>
               <span class="date">{{ item.createTime }}</span>
             </li>
@@ -125,7 +117,7 @@ import Util from '@/libs/util'
 export default {
   data() {
     return {
-      id: this.$route.query.id,
+      id: +this.$route.query.id,
       site: this.$store.state.content.site,
       columnId: '',
       info: {},
@@ -167,7 +159,8 @@ export default {
         value: 'id',
         label: 'columnName'
       },
-      news: []
+      news: [],
+      hots: []
     }
   },
   watch: {
@@ -222,18 +215,13 @@ export default {
     },
     // 左边栏目
     getLeftColumn() {
-      this.$post(`${this.api.getsTheSubColumn}?id=${this.id}`).then(({ data }) => {
-        // if (data.length > 1 && !data.find(e => e.listStyleId !== data[0].listStyleId)) {
-        //   this.all = data[0]
-        //   this.getArticle(data.map(e => e.id))
-        // } else {
-        //   this.all = null
-        //   this.getArticle([data[data.length > 1 ? 1 : 0].id])
-        //   // data = data.slice(1)
-        // }
-        data.length && this.getArticle([data[0].id])
+      this.$post(`${this.api.oneLevelChecksThemAll}?id=${this.id}`).then(({ data }) => {
+        this.getArticle([+this.$route.query.id])
         this.curColumn = 0
         this.columns = data
+        this.$nextTick(() => {
+          this.$refs.leftColumn.setCurrentKey(this.id)
+        })
       }).catch(err => {})
     },
     // 右边资讯
@@ -247,6 +235,10 @@ export default {
       }).then(({ data }) => {
         this.infoColumns = data
       }).catch(err => {})
+      
+      this.$post(`${this.api.hotContent}?siteId=${this.$route.query.siteId || this.$store.state.content.site}`).then(({ data }) => {
+        this.hots = data
+      }).catch(err => {})
     },
     // 最新资讯
     getNews() {
@@ -264,9 +256,40 @@ export default {
       this.filter()
     },
     // 点击栏目回调
-    columnClick(data) {
-      this.page = 1
-      this.getArticle([data.id])
+    columnClick(to) {
+      console.log("🚀 ~ file: index.vue ~ line 268 ~ columnClick ~ data", to)
+      const { typeId } = to
+      // 跳转链接
+      if (typeId === 2) {
+        let href = to.linkAddress
+        const cType = to.connectionType
+        if (cType !== 2) { // 非站外链接
+          const ids = href.split('-') // 栏目文章是用-分割的，栏目是必选，文章不是必选。选择了文章则跳转到文章页，否则跳转到栏目页
+          // 站点id：站内链接取当前站点，其他站点链接取siteSelection
+          const site = cType === 1 ?
+            (this.$route.query.siteId || this.site) :
+            to.siteSelection
+          if (ids[1]) { // 文章
+            href = '/article?id=' + ids[1]
+          } else { // 栏目
+            const columnIds = ids[0].split(',')
+            href = '/column?id=' + columnIds[columnIds.length - 1]
+          }
+          href = this.$router.resolve(href + '&siteId=' + site).href
+        }
+        // 是否新窗口打开
+        if (to.isOpen) {
+          window.open(href)
+        } else {
+          location.href = href
+        }
+      } else if (typeId === 3) {
+        // 长页栏目直接获取path
+        this.$router.push(`/${to.path}?id=${to.id}`).catch(err => {})
+      } else {
+        this.page = 1
+        this.getArticle([to.id])
+      }
     },
     // 查询文章列表
     getArticle(columnIds) {
@@ -276,7 +299,7 @@ export default {
       })
       this.$post(this.api.newlyPublishedArticles, {
         siteId: this.$route.query.siteId || this.site,
-        columnIds,
+        columnIds: columnIds.length ? columnIds : [this.id],
         pageNum: this.page,
         pageSize: this.pageSize,
         labelName,
@@ -294,7 +317,7 @@ export default {
     getIds(data, ids) {
       data.map(e => {
         ids.push(e.id)
-        this.getIds(e.children, ids)
+        e.children && this.getIds(e.children, ids)
       })
     },
     // 筛选
@@ -312,7 +335,14 @@ export default {
     },
     currentChange(val) {
       this.page = val
-      // this.getData()
+      this.isFilter = !!(this.form.classificationId || this.form.title || this.form.convokeType || this.lableId.length)
+      let id = []
+      if (this.isFilter || this.all) {
+        this.getIds(this.columns, id)
+      } else if (this.columns.length) {
+        id = [this.$refs.leftColumn.getCurrentKey()]
+      }
+      this.getArticle(id)
     },
     // 跳转文章页面
     toArtice(item) {
@@ -332,6 +362,7 @@ export default {
     position: absolute;
     top: 123px;
     left: 243px;
+    @include ellipsis;
   }
 }
 .column-wrap {
@@ -417,37 +448,69 @@ export default {
   .contents {
     display: flex;
   }
-  .columns {
+  /deep/.columns {
     width: 174px;
     margin-right: 12px;
     overflow: auto;
-    li {
-      display: flex;
-      align-items: center;
+    &:after {
+      content: '';
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 2px;
+      height: 100%;
+      background-color: #E1E6F2;
+    }
+    .el-tree-node__content {
+      // z-index: 1;
+      position: relative;
       height: 48px;
       padding-left: 40px;
       margin-bottom: 1px;
       font-size: 16px;
       color: #666;
       background-color: #fff;
-      border-right: 2px solid transparent;
+      border-bottom: 1px solid #F8F9F9;
       cursor: pointer;
       &:before {
         content: '';
         width: 2px;
         height: 2px;
-        margin-right: 5px;
+        margin: 0 10px 0 20px;
         background-color: #666;
         border-radius: 50%;
       }
       &:hover {
         color: #0c84eb;
       }
-      &.active {
-        border-right-color: #083A93;
+    }
+    .el-tree-node__label {
+      font-size: 16px;
+      color: #666;
+      line-height: 22px;
+    }
+    .el-tree-node__expand-icon.expanded {
+      transform: rotate(180deg);
+    }
+    .el-tree-node__expand-icon {
+      position: absolute;
+      right: 10px;
+    }
+    .is-current > .el-tree-node__content {
+      &:after {
+        content: '';
+        z-index: 2;
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 2px;
+        height: 100%;
+        background-color: #083A93;
       }
-      &.all {
-        padding-left: 24px;
+      // border-right: 2px solid #083A93;
+      .el-tree-node__label {
+        font-weight: 600;
+        color: #1150AC;
       }
     }
   }
@@ -495,15 +558,15 @@ export default {
   .column {
     width: 100%;
     margin-bottom: 25px;
-  }
-  /deep/.el-tree-node__content {
-    height: 60px;
-    background-color: #E5EDF8;
-    border-bottom: 2px solid #fff;
-  }
-  /deep/.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
-    color: #fff;
-    background-color: #0f5698;
+    /deep/.el-tree-node__content {
+      height: 60px;
+      background-color: #E5EDF8;
+      border-bottom: 2px solid #fff;
+    }
+    /deep/.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
+      color: #fff;
+      background-color: #0f5698;
+    }
   }
   .list {
     margin-bottom: 20px;
@@ -515,6 +578,7 @@ export default {
       margin-bottom: 5px;
       font-size: 14px;
       cursor: pointer;
+      @include ellipsis;
       &:hover {
         color: $main-color;
       }
diff --git a/src/pages/news/index.vue b/src/pages/news/index.vue
index 39bb5fd..f827569 100644
--- a/src/pages/news/index.vue
+++ b/src/pages/news/index.vue
@@ -172,7 +172,7 @@ export default {
                 const id = e.column[e.column.length - 1]
                 e.id = id
                 if (e.columnTitle === 2) e.columnName = e.columnTitleCustom
-                this.$post(this.api.queryArticle, {
+                this.$post(this.api.newlyPublishedArticles, {
                   siteId: e.site,
                   columnIds: [id],
                   pageNum: 1,
@@ -188,7 +188,7 @@ export default {
           
           if (json[3].form.column.length) {
             const { column, site, articleNum } = json[3].form
-            this.$post(this.api.queryArticle, {
+            this.$post(this.api.newlyPublishedArticles, {
               siteId: site,
               columnIds: [column[column.length - 1]],
               pageNum: 1,
@@ -199,7 +199,7 @@ export default {
           }
           if (json[5].form.column.length) {
             const { column, site, articleNum } = json[5].form
-            this.$post(this.api.queryArticle, {
+            this.$post(this.api.newlyPublishedArticles, {
               siteId: site,
               columnIds: [column[column.length - 1]],
               pageNum: 1,
diff --git a/src/styles/common.scss b/src/styles/common.scss
index 428d235..a958f49 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -85,12 +85,22 @@
   min-width: 128px;
   margin-top: 0;
   text-align: center;
-  .el-menu-item {
-    height: 50px !important;
-    line-height: 50px !important;
+  .el-submenu__title, .el-menu-item, .menu-child {
+    width: 128px !important;
+    min-width: 0;
   }
   span {
     font-size: 18px;
     color: #333;
   }
+  .active > .el-submenu__title {
+    span {
+      color: #1583FF;
+    }
+  }
+}
+.home-menu-popup {
+  .el-menu {
+    background-color: #fff !important;
+  }
 }
\ No newline at end of file