From 5e79d534828e58e2097532df89a283ff3e7a1d95 Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Tue, 18 Feb 2020 14:30:25 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=88=86=E9=A1=B5:=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6=E8=BF=87=E5=A4=9A=E6=97=B6=E5=88=86=E9=A1=B5,=20?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E8=B7=AF=E5=BE=84=E6=98=BE=E7=A4=BA=EF=BC=8C?=
 =?UTF-8?q?=E8=BF=87=E9=95=BF=E5=88=99=E7=BC=A9=E7=9F=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/home/index.vue | 90 ++++++++++++++++++++++++++++++----------
 1 file changed, 68 insertions(+), 22 deletions(-)

diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index f4739d3..62ed1c4 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -4,16 +4,29 @@
       <transition-group name="breadcrumb">
         <el-breadcrumb-item v-for="(item,index) in pathList" :key="item.index">
           <a v-if="index===0" @click.prevent="handleLink(item,index)"><svg-icon icon-class="home" style="font-size: 24px;"/></a>
+          <a v-if="pathList.length >= 7">
+            <span v-if="index === pathList.length-6" class="redirect" >&nbsp;</span>
+            <a v-if="index === pathList.length-6" class="redirect" @click.prevent="handleLink(item,index)">...<svg-icon style="font-size: 1rem;" icon-class="breadcrumb-right" /></a>
+            <a v-if="index >= pathList.length-6 && index < pathList.length-2 && strLength(item.folder) <= 10" class="redirect" @click.prevent="handleLink(item,index)">{{ item.folder }}<svg-icon style="font-size: 1rem;" icon-class="breadcrumb-right" /></a>
+            <el-tooltip class="item" effect="dark" :content="item.folder" placement="top">
+              <a v-if="index >= pathList.length-6 && index < pathList.length-2 && strLength(item.folder) > 10" class="redirect" @click.prevent="handleLink(item,index)">{{ substring10(item.folder) }}...<svg-icon style="font-size: 1rem;" icon-class="breadcrumb-right" /></a>
+            </el-tooltip>
+          </a>
+          <a v-if="pathList.length < 7">
+            <a v-if="index < pathList.length-2 && strLength(item.folder) <= 10" class="redirect" @click.prevent="handleLink(item,index)">{{ item.folder }}<svg-icon style="font-size: 1rem;" icon-class="breadcrumb-right" /></a>
+              <el-tooltip class="item" effect="dark" :content="item.folder" placement="top">
+                <a v-if="index < pathList.length-2 && strLength(item.folder) > 10" class="redirect" @click.prevent="handleLink(item,index)">{{ substring10(item.folder) }}...<svg-icon style="font-size: 1rem;" icon-class="breadcrumb-right" /></a>
+              </el-tooltip>
+          </a>
+          <a v-if="index===pathList.length-2">
+            <span v-if="strLength(item.folder) <= 10" class="no-redirect">{{ item.folder }}</span>
+            <el-tooltip class="item" effect="dark" :content="item.folder" placement="top">
+              <span :title="item.folder" v-if="strLength(item.folder) > 10 && strLength(item.folder) <= 50 && item.searchKey" class="no-redirect">{{ item.folder }}</span>
+              <span :title="item.folder" v-if="strLength(item.folder) > 50 && item.searchKey" class="no-redirect">{{ substring10(item.folder) }}...</span>
+              <span :title="item.folder" v-if="strLength(item.folder) > 10 && !item.searchKey" class="no-redirect">{{ substring10(item.folder) }}...</span>
+            </el-tooltip>
+          </a>
 
-          <span v-if="pathList.length >= 7 && index === pathList.length-6" class="redirect" >&nbsp;</span>
-          <a v-if="pathList.length >= 7 && index === pathList.length-6" class="redirect" @click.prevent="handleLink(item,index)">...<svg-icon style="font-size: 1rem;" icon-class="breadcrumb-right" /></a>
-          <a v-if="pathList.length >= 7 && index >= pathList.length-6 && index < pathList.length-2 && strLength(item.folder) <= 10" class="redirect" @click.prevent="handleLink(item,index)">{{ item.folder }}<svg-icon style="font-size: 1rem;" icon-class="breadcrumb-right" /></a>
-          <a v-if="pathList.length >= 7 && index >= pathList.length-6 && index < pathList.length-2 && strLength(item.folder) > 10" class="redirect" @click.prevent="handleLink(item,index)">{{ substring10(item.folder) }}...<svg-icon style="font-size: 1rem;" icon-class="breadcrumb-right" /></a>
-          <a v-if="pathList.length < 7 && index < pathList.length-2 && strLength(item.folder) <= 10" class="redirect" @click.prevent="handleLink(item,index)">{{ item.folder }}<svg-icon style="font-size: 1rem;" icon-class="breadcrumb-right" /></a>
-          <a v-if="pathList.length < 7 && index < pathList.length-2 && strLength(item.folder) > 10" class="redirect" @click.prevent="handleLink(item,index)">{{ substring10(item.folder) }}...<svg-icon style="font-size: 1rem;" icon-class="breadcrumb-right" /></a>
-
-          <span v-if="index===pathList.length-2 && strLength(item.folder) <= 10" class="no-redirect">{{ item.folder }}</span>
-          <span v-if="index===pathList.length-2 && strLength(item.folder) > 10" class="no-redirect">{{ substring10(item.folder) }}...</span>
           <el-popover
             v-if="index===pathList.length-1"
             v-model="isShowNewFolder"
@@ -224,9 +237,18 @@
             <span v-if="scope.row.agoTime >= 1000*60*60*24*30*12">&nbsp;&nbsp;&nbsp;{{ (scope.row.agoTime/(1000*60*60*24*30*12)).toFixed(0) }} 年前</span>
           </template>
         </el-table-column>
-
       </template>
     </el-table>
+    <el-pagination
+      background
+      layout="prev, pager, next"
+      :hide-on-single-page="true"
+      :current-page.sync="pagination.pageIndex"
+      :page-sizes="pagination.pageSizes"
+      :page-size="pagination.pageSize"
+      :total="pagination.total"
+      @current-change="currentChange">
+    </el-pagination>
   </div>
 </template>
 
@@ -260,6 +282,12 @@ export default {
         { 'folder': '+', index: 1 }
       ],
       fileList: [],
+      pagination: {
+        pageIndex: 1,
+        pageSize: 25,
+        total: 0,
+        pageSizes: [10,20,30,40,50]
+      },
       indexList: [],
       clientHeight: 500,
       // 表头数据
@@ -352,7 +380,7 @@ export default {
     }
     const that = this
     window.onresize = function temp() {
-      that.clientHeight = document.documentElement.clientHeight - 150
+      that.clientHeight = document.documentElement.clientHeight - 165
     }
   },
   destroyed() {
@@ -427,6 +455,7 @@ export default {
         setPath(this.path, this.pathList)
         this.getFileList()
       }
+      console.log("this.pathList:", this.pathList)
     },
     newFolder() {
       this.newFolderName = '新建文件夹'
@@ -515,14 +544,15 @@ export default {
           userId: this.$store.state.user.userId,
           keyword: key,
           currentDirectory: getPath(),
-          pageIndex: 1,
-          pageSize: 30
+          pageIndex: this.pagination.pageIndex,
+          pageSize: this.pagination.pageSize
         }).then(res => {
           this.fileList = res.data
           this.tableLoading = false
-          this.clientHeight = document.documentElement.clientHeight - 150
+          this.clientHeight = document.documentElement.clientHeight - 165
           this.listModeSearch = true
           this.path = ''
+          this.pagination['total'] = res.count
         }).catch(e => {})
       }else{
         this.handleLink('',0)
@@ -534,13 +564,14 @@ export default {
         userId: this.$store.state.user.userId,
         id: row.id,
         currentDirectory: getPath(),
-        pageIndex: 1,
-        pageSize: 30
+        pageIndex: this.pagination.pageIndex,
+        pageSize: this.pagination.pageSize
       }).then(res => {
         this.fileList = res.data
         this.tableLoading = false
-        this.clientHeight = document.documentElement.clientHeight - 150
+        this.clientHeight = document.documentElement.clientHeight - 165
         this.listModeSearch = true
+        this.pagination['total'] = res.count
       }).catch(e => {})
       this.path = row.path + row.name
     },
@@ -549,13 +580,14 @@ export default {
       api.fileList({
         userId: this.$store.state.user.userId,
         currentDirectory: getPath(),
-        pageIndex: 1,
-        pageSize: 30
+        pageIndex: this.pagination.pageIndex,
+        pageSize: this.pagination.pageSize
       }).then(res => {
         this.fileList = res.data
         this.tableLoading = false
-        this.clientHeight = document.documentElement.clientHeight - 150
+        this.clientHeight = document.documentElement.clientHeight - 165
         this.listModeSearch = false
+        this.pagination['total'] = res.count
       }).catch(e => {})
     },
     getFileListBySearchMode() {
@@ -563,15 +595,24 @@ export default {
       api.fileList({
         userId: this.$store.state.user.userId,
         currentDirectory: this.path,
-        pageIndex: 1,
+        pageIndex: this.pagination.pageIndex,
         pageSize: 30
       }).then(res => {
         this.fileList = res.data
         this.tableLoading = false
-        this.clientHeight = document.documentElement.clientHeight - 150
+        this.clientHeight = document.documentElement.clientHeight - 165
         this.listModeSearch = true
+        this.pagination['total'] = res.count
       }).catch(e => {})
     },
+    currentChange(pageIndex) {
+      this.pagination.pageIndex = pageIndex
+      if (this.listModeSearch) {
+        this.searchFile(this.searchFileName)
+      } else {
+        this.getFileList()
+      }
+    },
     getSummaries(param) {
       // 合计
       const { columns, data } = param
@@ -1226,5 +1267,10 @@ export default {
     width: 30%;
   }
 
+  .el-pagination {
+    float: right;
+    margin-top: 50px;
+  }
+
 </style>