Merge remote-tracking branch 'origin/master'

jydocs-pc/src/App.vue

@@ -1,8 +1,7 @@
 <template>
-    <div class="home">
-        <router-link class="link-item" v-for="item in links" :key="item.to" :to="item.to">{{item.text}}</router-link>
-        <router-view></router-view>
-    </div>
+  <div class="docs-app">
+    <router-view></router-view>
+  </div>
 </template>
 
 <script>
@@ -10,6 +9,7 @@ export default {
   components: {},
   data () {
     return {
+      cashViews: [],
       links: [
         {
           to: '/',
@@ -37,7 +37,11 @@ export default {
 }
 </script>
 <style lang="scss">
-    .link-item {
-        margin: 0 10px;
-    }
+@import '~@/assets/style/reset-ele.scss';
+
+.page--docs--index.bg-white {
+  .page-container {
+    background-color: #fff;
+  }
+}
 </style>

jydocs-pc/src/api/modules/search.js

@@ -1,5 +1,6 @@
 import httpRequest from '@/api'
 import mockRequest from '@/api/mock'
+import qs from 'qs'
 
 let request = httpRequest
 if (process.env.NODE_ENV === 'development' && process.env.VUE_APP_MOCK === 'true') {
@@ -7,7 +8,8 @@ if (process.env.NODE_ENV === 'development' && process.env.VUE_APP_MOCK === 'true
   request = mockRequest
 }
 
-export function ajaxGetSearch (data) {
+export function getSearch (data) {
+  data = qs.stringify(data)
   return request({
     url: '/search',
     method: 'post',

jydocs-pc/src/assets/style/reset-ele.scss

@@ -0,0 +1,15 @@
+@import './_mixin';
+@import './_variables';
+
+.docs-app .el-pagination.is-background .el-pager {
+  li {
+    background-color: #fff;
+    border: 1px solid rgba($color: #000, $alpha: 0.05);
+  }
+
+  li:not(.disabled).active,
+  li:not(.disabled):hover {
+    color: #fff;
+    background-color: $color-text--highlight;
+  }
+}

jydocs-pc/src/components/NoData.vue

@@ -20,6 +20,7 @@ export default {
 <style lang="scss" scoped>
 .no-data {
   margin: 0 auto;
+  margin-top: 150px;
   text-align: center;
   .el-image {
     width: 220px;

jydocs-pc/src/components/Search.vue

@@ -29,22 +29,22 @@ export default {
   data () {
     return {
       input: '',
-      type: 'all1',
+      type: 'all',
       tabs: [
         {
-          type: 'all1',
+          type: 'all',
           label: '全部'
         },
         {
-          type: 'all2',
+          type: '招标',
           label: '招标'
         },
         {
-          type: 'all3',
+          type: '法律法规',
           label: '法律法规'
         },
         {
-          type: 'all4',
+          type: '行业报告',
           label: '行业报告'
         }
       ]

jydocs-pc/src/components/doc-item-card/Card.vue

@@ -35,7 +35,7 @@
             >{{ item }}</span>
           </div>
           <div class="card-info-item price">
-            <Price :price="price" />
+            <slot name="price"><Price :price="price" /></slot>
           </div>
         </div>
       </div>
@@ -58,7 +58,7 @@
           >{{ item }}</span>
         </div>
         <div class="c-f-right flex-r-c">
-          <Price :price="price" />
+          <slot name="price"><Price :price="price" /></slot>
         </div>
       </div>
     </div>
@@ -68,7 +68,7 @@
 <script>
 import { Image } from 'element-ui'
 import Price from '@/components/doc-item-card/Price'
-import { replaceKeyword } from '@/utils/'
+import { replaceKeyword, docTypeConvert } from '@/utils/'
 
 export default {
   name: 'docs-card',
@@ -121,7 +121,8 @@ export default {
   },
   computed: {
     docTypeIcon () {
-      return `el-icon-jy-${this.docType}`
+      const t = docTypeConvert(this.docType)
+      return `el-icon-jy-${t}`
     },
     hightLightTitle () {
       return replaceKeyword(this.title, this.highlightKey, [

jydocs-pc/src/utils/globalFunctions.js

@@ -236,6 +236,21 @@ export function formatSize (size, pointLength, units) {
   }
   return (unit === 'B' ? size : size.toFixed(pointLength === undefined ? 2 : pointLength)) + (unit || '')
 }
+
+// 文件类型转换
+export function docTypeConvert (docType = 'pdf') {
+  const typeMap = {
+    doc: 'word',
+    docx: 'word',
+    xls: 'excel',
+    xlsx: 'excel',
+    ppt: 'ppt',
+    pdf: 'pdf'
+  }
+  const type = typeMap[docType]
+  return type ? type : docType  // map中不存在的，则返回原始类型
+}
+
 /**
  * 通用关键字高亮替换
  * @param {String} value 要高亮的字符串

jydocs-pc/src/utils/mixins.js

@@ -0,0 +1,8 @@
+export const mixinBackground = {
+  beforeCreate () {
+    $('body').addClass('bg-white')
+  },
+  beforeDestroy () {
+    $('body').removeClass('bg-white')
+  }
+}

jydocs-pc/src/views/Search.vue

@@ -1,159 +1,202 @@
 <template>
   <div class="search-container">
-    <search-input @submit="goSubmit" @recovery="getTest"></search-input>
+    <search-input ref="search" @submit="doSearch" @recovery="doSearch"></search-input>
     <div class="search-result-container">
       <div class="sort-list">
         <span
           class="sort-item"
-          v-for="(item, index) in sortList"
+          v-for="(item, index) in sortTypeList"
           :key="index"
           @click="sortAndSearch(item, index)"
-          :class="index === listState.sortActive ? 'active': ''"
+          :class="{ active: item.active }"
         >
-          <span class="sort-text">{{ item.name }}</span>
-          <span class="sort-icon" :class="item.sortBy ? 'el-icon-top' : 'el-icon-bottom'"></span>
+          <span class="sort-text">{{ item.label }}</span>
+          <span class="sort-icon" :class="item.sort ? 'el-icon-top' : 'el-icon-bottom'"></span>
         </span>
       </div>
       <div class="search-result-list" v-loading="listState.loading">
         <doc-card
-          :title="title"
-          desc="关于设计图。。。"
-          :highlightKey="['设计图','更新']"
-          :subInfo="['设计图','更新']"
-          @onClick="clickFn"
+          v-for="(item, index) in listState.list"
+          :key="index"
+          :title="item.docName"
+          :desc="item.docSummary"
+          :docType="item.docFileType"
+          :price="item.price"
+          :highlightKey="highlightKey"
+          :subInfo="calcSubInfo(item)"
+          @onClick="toDocDetail(item)"
         />
-        <no-data v-if="listState.list.length === 0 && listState.loaded">暂无我的文库</no-data>
+        <no-data v-if="listState.list.length === 0 && listState.loaded"></no-data>
       </div>
       <div class="search-pagination">
         <el-pagination
           background
           layout="prev, pager, next, ->, total"
           :hide-on-single-page="true"
-          :current-page="listState.currentPage"
+          :current-page="listState.pageNum"
           :page-size="listState.pageSize"
-          :page-count="listState.pageCount"
           :total="listState.total"
           @current-change="onPageChange"
         >
         </el-pagination>
       </div>
     </div>
-    {{ajaxData}}
-    <button @click="getTest" type="primary">模拟Ajax</button>
-    <button  @click="getLoginStatus" type="info">获取登录状态</button>
   </div>
 </template>
 
 <script>
-import { Icon, Pagination, Image } from 'element-ui'
+import { Icon, Pagination } from 'element-ui'
 import SearchInput from '@/components/Search'
 import DocCard from '@/components/doc-item-card/Card'
 import NoData from '@/components/NoData'
-import { ajaxGetSearch } from '../api/modules/search'
+import { getSearch } from '../api/modules/search'
+import { formatSize } from '@/utils/'
+import { mixinBackground } from '@/utils/mixins'
 
 export default {
   name: 'seach',
+  mixins: [mixinBackground],
   components: {
     [Icon.name]: Icon,
     [Pagination.name]: Pagination,
-    [Image.name]: Image,
     SearchInput,
     DocCard,
     NoData
   },
   data () {
     return {
-      sortList: [
+      sortTypeList: [
         {
-          name: '上传时间',
-          sortBy: 1
+          type: 'tSort',
+          label: '上传时间',
+          sort: 0,
+          active: true
         },
         {
-          name: '下载次数',
-          sortBy: 0
+          type: 'dSort',
+          label: '下载次数',
+          sort: 0,
+          active: false
         },
         {
-          name: '浏览人数',
-          sortBy: 0
+          type: 'vSort',
+          label: '浏览人数',
+          sort: 0,
+          active: false
         }
       ],
+      searchQuery: {
+        type: '',
+        text: ''
+      },
       listState: {
         loaded: false, // 是否已经搜索过
-        sortActive: 0,
         loading: false,
-        currentPage: 2, // 当前页
+        pageNum: 1, // 当前页
         pageSize: 10, // 每页多少条数据
-        pageCount: 10, // 一共多少页
-        total: 100, // 一共多少条数据
+        total: 0, // 一共多少条数据
         list: [] // 查询请求返回的数据
-      },
-      searchQuery: {},
-      ajaxData: {},
-      title: '设计图变动更新设计图变动更新设计图变动更新设计图变动更新'
+      }
     }
   },
-  methods: {
-    goSubmit (search) {
-      this.$router.replace({
-        name: 'search',
-        query: search
-      })
-      this.searchQuery = search
-      this.getTest(search)
-    },
-    getTest (search) {
-      ajaxGetSearch({
-        keyWord: search.text,
-        tag: search.type,
-        // tSort时间倒叙 dSort下载倒叙 vSort浏览量倒叙
-        sort: 'tSort',
-        num: 1,
-        size: 10
-      }).then(res => {
-        console.log(res.data)
-        this.ajaxData = res.data
+  computed: {
+    activeSortList () {
+      return this.sortTypeList.find(item => {
+        return item.active
       })
     },
+    highlightKey () {
+      return [this.searchQuery.text]
+    }
+  },
+  methods: {
     getLoginStatus: function () {
-      alert(loginflag)
+      console.log(loginflag)
+    },
+    // 恢复数据至第一次请求的状态(页码等)
+    resetListState () {
+      const state = {
+        loaded: false,
+        loading: false,
+        pageNum: 1,
+        list: [] 
+      }
+      Object.assign(this.listState, state)
+    },
+    doSearch (search) {
+      if (search) {
+        Object.assign(this.searchQuery, search)
+      } else {
+        this.searchQuery.type = this.$refs.search.type
+        this.searchQuery.text = this.$refs.search.input
+      }
+      this.getList()
+    },
+    async getList () {
+      if (!this.searchQuery.text) return
+      const query = {
+        keyWord: this.searchQuery.text,
+        tag: this.searchQuery.type === 'all' ? '' : this.searchQuery.type,
+        sort: this.activeSortList.type,
+        num: this.listState.pageNum,
+        size: this.listState.pageSize
+      }
+      console.log(query)
+
+      this.listState.loading = true
+      this.listState.loaded = false
+      const r = await getSearch(query)
+      this.listState.loading = false
+      this.listState.loaded = true
+  
+      const res = r.data
+      if (res.error_code === 0) {
+        this.listState.total = res.data.total
+        this.listState.list = res.data.list || []
+      }
     },
     sortAndSearch (item, index) {
-      console.log(...arguments)
+      if (item.active) {
+        // 改变sort
+        // item.sort = item.sort ? 0 : 1
+      } else {
+        this.sortTypeList.forEach(s => {
+          s.active = false
+        })
+        item.active = true
+      }
+      this.resetListState()
+      this.doSearch()
     },
-    clickFn () {
-      console.log('clickItem')
+    toDocDetail (item) {
+      const { docId: id } = item
+      this.$router.push({
+        name: 'content',
+        params: { id }
+      })
     },
     onPageChange (p) {
-      this.listState.currentPage = p
+      this.listState.pageNum = p
       this.listState.loading = true
-      setTimeout(() => {
-        this.listState.loading = false
-      }, 2000)
-      console.log(JSON.stringify(this.listState, null, 4))
+      this.doSearch()
+    },
+    calcSubInfo (item) {
+      const { docFileSize: size, downTimes, uploadDate, docPageSize } = item
+      return [uploadDate, `${downTimes}次下载`, `共${docPageSize}页`, formatSize(size)]
     }
   }
 }
 </script>
-<style lang="scss">
-.el-pagination.is-background .el-pager {
-  li {
-    background-color: #fff;
-    border: 1px solid rgba($color: #000, $alpha: 0.05);
-  }
-
-  li:not(.disabled):hover {
-    color: #fff;
-    background-color: $color-text--highlight;
-  }
-}
-</style>
 <style lang="scss" scoped>
+.search-container {
+  padding-top: 48px;
+}
 .search-result-container {
   margin: 0 auto;
   .sort-list {
     display: flex;
     align-items: center;
-    margin: 0 18px;
+    margin: 18px;
     height: 48px;
     border-radius: 4px;
     background: #F5F6F7;
@@ -189,6 +232,7 @@ export default {
     min-height: 500px;
   }
   .search-pagination {
+    margin: 28px 0 60px;
     text-align: right;
   }
 }

jydocs-pc/vue.config.js

@@ -8,11 +8,12 @@ module.exports = {
     port: '8080',
     disableHostCheck: true,
     proxy: {
-      '^/api-docs': {
-        target: 'http://xxx.com/api-docs',
+      '^/jydocs': {
+        target: 'http://192.168.20.180:821',
         changeOrigin: true,
+        logLevel: 'debug',
         pathRewrite: {
-          '^/api-docs': ''
+          '^/jydocs': '/jydocs'
         }
       }
     }