From 4ad44c9d5ca299909a44a4cdabcba604b655d777 Mon Sep 17 00:00:00 2001
From: yujialong <479214531@qq.com>
Date: Thu, 13 Apr 2023 16:22:36 +0800
Subject: [PATCH] =?UTF-8?q?=E5=87=BA=E7=89=88=E7=89=A9=E6=B7=BB=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/const/column.js                 |  37 +++++++
 src/pages/column/index.vue          |   9 +-
 src/pages/publication/index.vue     |  82 ++++++++++-----
 src/pages/publication/monograph.vue | 157 ++++++++++++++++++++++++++++
 src/pages/publication/patent.vue    |  88 +++++++++++-----
 src/pages/publication/thesis.vue    |  58 +++++++---
 6 files changed, 365 insertions(+), 66 deletions(-)
 create mode 100644 src/pages/publication/monograph.vue

diff --git a/src/const/column.js b/src/const/column.js
index e5bc11e..f38a5b6 100644
--- a/src/const/column.js
+++ b/src/const/column.js
@@ -22,6 +22,32 @@
       name: '子级优先栏目'
     }
   ],
+  long: [
+    {
+      name: 'SFEL',
+      path: 'sfel'
+    },
+    {
+      name: 'SFEL-科普之窗',
+      path: 'science'
+    },
+    {
+      name: 'SFEL-装置介绍-实验站',
+      path: 'exp'
+    },
+    {
+      name: 'SFEL-人才队伍',
+      path: 'talent'
+    },
+    {
+      name: 'SFEL-用户共享',
+      path: 'userSharing'
+    },
+    {
+      name: 'SFEL-概况',
+      path: 'survey'
+    },
+  ],
   // 出版物类型
   publicationTypes: [
     {
@@ -61,4 +87,15 @@
       name: '产品资料和其它'
     }
   ],
+  // 专利类别
+  patentClasses: [
+    {
+      id: 1,
+      name: '发明专利'
+    },
+    {
+      id: 2,
+      name: '实用外观'
+    }
+  ]
 }
\ No newline at end of file
diff --git a/src/pages/column/index.vue b/src/pages/column/index.vue
index 4b91410..964c7ea 100644
--- a/src/pages/column/index.vue
+++ b/src/pages/column/index.vue
@@ -217,11 +217,18 @@ export default {
             if (data.typeId !== 3) this.loaded = true; // 非长页，才展示页面
             this.info = data;
             this.showNav = this.showNavIds.includes(data.listStyleId);
+            this.handlePublication();
             this.getLeftColumn();
             this.getClassification();
           })
           .catch((res) => { });
     },
+    // 判断是否是出版物模板，如果是则跳转
+    handlePublication() {
+      this.$post(`${this.api.getsSublevelColumnsUnderALevel}?id=${this.id}&siteId=${this.site}`).then(({ data }) => {
+        data.length && data.every(e => e.templateId == 11) && this.$router.push(`/publication?siteId=${this.site}&id=${this.id}`) // 如果子级每个栏目都是出版物类型
+      }).catch(err => {})
+    },
     // 获取banner 规则：当前栏目有上传的，用当前的，没有上传的话，读取上级的（上级没有读上上级，以此类推）都没有的读取默认的
     getBanner(data) {
       for (const e of data) {
@@ -298,7 +305,7 @@ export default {
     },
     // 左边栏目
     getLeftColumn() {
-      this.$post(`${this.api.oneLevelChecksThemAll}?id=${this.id}&isSort=1`)
+      this.$post(`${this.api.oneLevelChecksThemAll}?id=${this.id}&isSort=1&siteId=${this.site}`)
         .then(({ data }) => {
           const fromColumn = this.$route.query.column; // 有column标识的，说明是通过点击左侧导航跳转过来的，这种情况只查询该栏目下的文章
           const { typeId } = this.info;
diff --git a/src/pages/publication/index.vue b/src/pages/publication/index.vue
index e5d5bd8..a468429 100644
--- a/src/pages/publication/index.vue
+++ b/src/pages/publication/index.vue
@@ -1,74 +1,108 @@
 <template>
   <div class="wrap">
-    <div class="single-banner single-banner-overview">
-      <img class="banner-img" :src="modules[0].form.pic" alt="">
+    <div class="banner">
+      <img width="100%" height="280" :src="info.columnBanner" alt="" />
       <div class="texts">
-        <h6 class="banner-title">{{ modules[0].form.title }}</h6>
+        <p class="text">{{ info.columnName }}</p>
       </div>
     </div>
 
     <ul class="tabs wow fadeInLeft">
       <template v-for="(item, i) in tabs">
-        <li :class="{active: i == active}" :key="i" @click="tabChange(i)">{{ item }}</li>
+        <li :class="{active: item.listStyleId == active}" :key="i" @click="tabChange(item, i)">{{ item.columnName }}</li>
       </template>
     </ul>
 
     <div class="tab-content">
-      <Thesis v-if="!active" />
-      <Patent v-if="active === 1" />
+      <!-- 根据栏目的listStyleId判断是哪个列表样式，这个出版物页面只显示下面三个列表样式 -->
+      <!-- 论文 -->
+      <Thesis v-if="active === 46" :id.sync="curId" />
+      <!-- 专利 -->
+      <Patent v-if="active === 44" :id.sync="curId" />
+      <!-- 专著 -->
+      <Monograph v-if="active === 45" :id.sync="curId" />
     </div>
   </div>
 </template>
 
 <script>
-import mixins from '@/mixins/page'
-import WOW from 'wow.js'
+import mixins from '@/mixins/article'
 import Thesis from './thesis'
 import Patent from './patent'
+import Monograph from './monograph'
 export default {
   mixins: [mixins],
   data() {
     return {
+      info: {},
       active: 0,
-      tabs: ['论文', '专利', '专著']
+      curId: '',
+      tabs: []
     }
   },
   components: {
     Thesis,
-    Patent
+    Patent,
+    Monograph
   },
   mounted() {
-    new WOW().init()
+    this.getInfo()
+    this.getColumn()
   },
   methods: {
-    // 获取文章详情
+    // 获取栏目详情
     getInfo() {
-      // 预览/详情
-      this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
+      this.id &&
+        this.$post(`${this.api.findColumn}?id=${this.id}`)
+          .then(({ data }) => {
+            this.info = data
+          })
+          .catch((res) => { })
+    },
+    // 获取子级栏目
+    getColumn() {
+      this.$post(`${this.api.getsSublevelColumnsUnderALevel}?id=${this.id}&siteId=${this.site}`).then(({ data }) => {
         if (data.length) {
-          // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
-          const json = JSON.parse(this.preview ?
-            data :
-            data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
-          this.modules = json
-          console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
+          this.tabs = data
+          this.active = data[0].listStyleId
+          this.curId = data[0].id
         }
       }).catch(err => {})
     },
     // tab回调
-    tabChange(i) {
-      this.active = i
+    tabChange(item) {
+      this.active = item.listStyleId
+      this.curId = item.id
     },
   }
 };
 </script>
 
 <style lang="scss" scoped>
-@import url(../../plugins/wow/animate.css);
-@import "../../styles/page/page.scss";
 .wrap {
   background-color: #f9f9f9;
 }
+.banner {
+  position: relative;
+  height: 280px;
+  color: #fff;
+  .texts {
+    position: absolute;
+    top: 123px;
+    left: 243px;
+  }
+
+  .text {
+    font-size: 3.42rem;
+    font-weight: 600;
+    @include ellipsis;
+  }
+
+  .sub {
+    margin-top: 10px;
+    font-size: 2rem;
+  }
+}
 .tabs {
   display: flex;
   justify-content: center;
diff --git a/src/pages/publication/monograph.vue b/src/pages/publication/monograph.vue
new file mode 100644
index 0000000..efb099a
--- /dev/null
+++ b/src/pages/publication/monograph.vue
@@ -0,0 +1,157 @@
+<template>
+  <div class="wrap">
+    <div class="forms">
+      <div class="item">
+        <span class="label">出版时间：</span>
+        <el-date-picker
+          style="width: 300px"
+          v-model="form.publicationYear"
+          type="year"
+          placeholder="请选择出版时间"
+          format="yyyy"
+          value-format="yyyy"
+          @change="initData">
+        </el-date-picker>
+      </div>
+      <div class="search">
+        <input type="text" placeholder="请输入著作名称/出版社名称/编写人员" v-model="form.title">
+        <i class="icon">
+          <img src="@/assets/images/search-white.png" alt="">
+        </i>
+      </div>
+    </div>
+
+    <el-table :data="list" class="patent-table" ref="table" stripe header-align="center">
+      <el-table-column prop="title" label="著作名称" align="center" min-width="150"></el-table-column>
+      <el-table-column prop="publishingHouse" label="出版社" align="center" min-width="150"></el-table-column>
+      <el-table-column prop="writersAndEditors" label="编写人员" align="center" min-width="150"></el-table-column>
+      <el-table-column prop="publicationYear" label="出版时间" align="center" min-width="150"></el-table-column>
+    </el-table>
+    <div class="pagination">
+      <el-pagination background @current-change="currentChange" :current-page="page" layout="total, prev, pager, next" :total="total"></el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+import Util from '@/libs/util';
+import ColumnConst from '@/const/column'
+export default {
+  props: ['id'],
+  data() {
+    return {
+      patentClasses: ColumnConst.patentClasses,
+      searchTimer: null,
+      form: {
+        patentClassId: '',
+        applicationDate: ''
+      },
+      classifications: [],
+      list: [],
+      page: 1,
+      pageSize: 10,
+      total: 0,
+    }
+  },
+  watch: {
+    id() {
+      this.id && this.initData()
+    },
+    'form.title': function (val) {
+      clearTimeout(this.searchTimer);
+      this.searchTimer = setTimeout(() => {
+        this.initData();
+      }, 500);
+    }
+  },
+  mounted() {
+    this.initData()
+  },
+  methods: {
+    // 查询文章列表
+    getArticle() {
+      this.id && this.$post(this.api.newlyPublishedArticles, {
+        siteId: this.$route.query.siteId || this.$store.state.content.site,
+        columnIds: this.id,
+        pageNum: this.page,
+        pageSize: this.pageSize,
+        ...this.form
+      })
+        .then(({ data }) => {
+          this.list = Util.removeTag(data.records);
+          this.total = +data.total;
+        })
+        .catch((res) => { });
+    },
+    initData() {
+      this.page = 1
+      this.getArticle()
+    },
+    currentChange(val) {
+      this.page = val
+      this.getData()
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.forms {
+  display: flex;
+  align-items: center;
+  padding: 30px;
+  margin-bottom: 20px;
+  background-color: #fff;
+  .item {
+    display: inline-flex;
+    align-items: center;
+    margin-right: 30px;
+  }
+  .label {
+    font-size: 16px;
+    color: #333;
+    white-space: nowrap;
+  }
+  /deep/.el-input__inner {
+    width: 100%;
+    height: 48px;
+    line-height: 48px;
+    border: 0;
+    background: #F7F7F7;
+  }
+  .search {
+    display: inline-flex;
+    width: 34%;
+    input {
+      width: 100%;
+      height: 48px;
+      padding: 0 15px;
+      font-size: 14px;
+      color: #333;
+      background: #F7F7F7;
+      border: 0;
+      border-top-left-radius: 6px;
+      border-bottom-left-radius: 6px;
+      &:focus {
+        outline: none;
+      }
+    }
+  }
+  .icon {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    width: 62px;
+    height: 48px;
+    background: #1583FF;
+    border-radius: 0px 6px 6px 0px;
+    cursor: pointer;
+  }
+}
+/deep/.patent-table {
+  thead tr, thead th {
+    color: #fff;
+    background-color: #1583FF;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/publication/patent.vue b/src/pages/publication/patent.vue
index 407beb5..4bd0fdd 100644
--- a/src/pages/publication/patent.vue
+++ b/src/pages/publication/patent.vue
@@ -3,25 +3,26 @@
     <div class="forms">
       <div class="item">
         <span class="label">专利类别：</span>
-        <el-select v-model="form.classificationId">
+        <el-select v-model="form.patentClassId">
           <el-option
-            v-for="item in classifications"
+            v-for="item in patentClasses"
             :key="item.id"
-            :label="item.classificationName"
+            :label="item.name"
             :value="item.id">
           </el-option>
         </el-select>
       </div>
       <div class="item">
         <span class="label">申请日期：</span>
-        <el-select v-model="form.classificationId">
-          <el-option
-            v-for="item in classifications"
-            :key="item.id"
-            :label="item.classificationName"
-            :value="item.id">
-          </el-option>
-        </el-select>
+        <el-date-picker
+          v-model="form.applicationDate"
+          type="date"
+          placeholder="选择日期"
+          format="yyyy-MM-dd"
+          :clearable="false"
+          value-format="yyyy-MM-dd"
+          @change="initData">
+        </el-date-picker>
       </div>
       <div class="search">
         <input type="text" placeholder="请输入专利名称/发明人姓名/申请号员" v-model="form.title">
@@ -32,12 +33,16 @@
     </div>
 
     <el-table :data="list" class="patent-table" ref="table" stripe header-align="center">
-      <el-table-column prop="name" label="专利名称" align="center" min-width="150"></el-table-column>
-      <el-table-column prop="name" label="专利类别" align="center" min-width="150"></el-table-column>
-      <el-table-column prop="name" label="申请号" align="center" min-width="150"></el-table-column>
-      <el-table-column prop="name" label="申请日期" align="center" min-width="150"></el-table-column>
-      <el-table-column prop="name" label="授权日期" align="center" min-width="150"></el-table-column>
-      <el-table-column prop="name" label="发明人" align="center" min-width="150"></el-table-column>
+      <el-table-column prop="title" label="专利名称" align="center" min-width="150"></el-table-column>
+      <el-table-column label="专利类别" align="center" min-width="150">
+        <template slot-scope="scope">
+          {{ scope.row.patentClassId ? patentClasses.find(e => e.id == scope.row.patentClassId).name : '' }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="applicationNumber" label="申请号" align="center" min-width="150"></el-table-column>
+      <el-table-column prop="applicationDate" label="申请日期" align="center" min-width="150"></el-table-column>
+      <el-table-column prop="dateOfAuthorization" label="授权日期" align="center" min-width="150"></el-table-column>
+      <el-table-column prop="inventor" label="发明人" align="center" min-width="150"></el-table-column>
     </el-table>
     <div class="pagination">
       <el-pagination background @current-change="currentChange" :current-page="page" layout="total, prev, pager, next" :total="total"></el-pagination>
@@ -46,30 +51,59 @@
 </template>
 
 <script>
+import Util from '@/libs/util';
+import ColumnConst from '@/const/column'
 export default {
+  props: ['id'],
   data() {
     return {
+      patentClasses: ColumnConst.patentClasses,
+      searchTimer: null,
       form: {
-
+        patentClassId: '',
+        applicationDate: ''
       },
       classifications: [],
-      list: [
-        {
-          name: '副驾驶的路径'
-        },
-        {
-          name: '副驾驶的路径'
-        }
-      ],
+      list: [],
       page: 1,
       pageSize: 10,
       total: 0,
     }
   },
+  watch: {
+    id() {
+      this.id && this.initData()
+    },
+    'form.title': function (val) {
+      clearTimeout(this.searchTimer);
+      this.searchTimer = setTimeout(() => {
+        this.initData();
+      }, 500);
+    }
+  },
   mounted() {
-    
+    this.initData()
   },
   methods: {
+    // 查询文章列表
+    getArticle() {
+      this.id && this.$post(this.api.newlyPublishedArticles, {
+        siteId: this.$route.query.siteId || this.$store.state.content.site,
+        columnIds: this.id,
+        pageNum: this.page,
+        pageSize: this.pageSize,
+        ...this.form
+      })
+        .then(({ data }) => {
+          this.list = Util.removeTag(data.records);
+          this.total = +data.total;
+        })
+        .catch((res) => { });
+    },
+    initData() {
+      this.page = 1
+      this.getArticle()
+    },
     currentChange(val) {
       this.page = val
       this.getData()
diff --git a/src/pages/publication/thesis.vue b/src/pages/publication/thesis.vue
index 41f69c7..d42040b 100644
--- a/src/pages/publication/thesis.vue
+++ b/src/pages/publication/thesis.vue
@@ -21,37 +21,67 @@
     </div>
 
     <ul class="list">
-      <li>
-        <h6>新型靶向药物开发与重大疾病诊疗一代高性能、绿色、安全新能源汽车</h6>
-        <p class="meta">作者: Xia, Ming; Huang, Zunkai; Tian, Li; Wang, Hui; Chang, Victor; Zhu, Yongxin; Feng, Songlin</p>
-        <p class="meta">期刊名称: J. Syst. Architect.</p>
-        <p class="meta">出版年: 2021  卷: 115   文献号: 101991</p>
-      </li>
-      <li>
-        <h6>新型靶向药物开发与重大疾病诊疗一代高性能、绿色、安全新能源汽车</h6>
-        <p class="meta">作者: Xia, Ming; Huang, Zunkai; Tian, Li; Wang, Hui; Chang, Victor; Zhu, Yongxin; Feng, Songlin</p>
-        <p class="meta">期刊名称: J. Syst. Architect.</p>
-        <p class="meta">出版年: 2021  卷: 115   文献号: 101991</p>
+      <li v-for="(item, i) in articles" :key="i">
+        <h6>{{ item.title }}</h6>
+        <p class="meta">作者: {{ item.author }}</p>
+        <p class="meta">期刊名称: {{ item.periodicalName }}</p>
+        <p class="meta">出版年: {{ item.publicationYear }}  卷: {{ item.reel }}   文献号: {{ item.documentNumber }}</p>
       </li>
     </ul>
   </div>
 </template>
 
 <script>
+import Util from '@/libs/util';
 export default {
+  props: ['id'],
   data() {
     return {
+      searchTimer: null,
       form: {
 
       },
-      classifications: []
+      classifications: [],
+      articles: [],
+      page: 1,
+      pageSize: 10,
+      total: 0,
+    }
+  },
+  watch: {
+    id() {
+      this.id && this.initData()
+    },
+    'form.title': function (val) {
+      clearTimeout(this.searchTimer);
+      this.searchTimer = setTimeout(() => {
+        this.initData();
+      }, 500);
     }
   },
   mounted() {
-    
+    this.initData()
   },
   methods: {
-    
+    // 查询文章列表
+    getArticle() {
+      this.id && this.$post(this.api.newlyPublishedArticles, {
+        siteId: this.$route.query.siteId || this.$store.state.content.site,
+        columnIds: this.id,
+        pageNum: this.page,
+        pageSize: this.pageSize,
+        ...this.form
+      })
+        .then(({ data }) => {
+          this.articles = Util.removeTag(data.records);
+          this.total = +data.total;
+        })
+        .catch((res) => { });
+    },
+    initData() {
+      this.page = 1
+      this.getArticle()
+    },
   }
 };
 </script>