修改grid布局

src/components/ShowFile/ShowFile.vue

@@ -296,18 +296,18 @@
          element-loading-background="#f6f7fa88">
       <div class="checkbox-group-header">
         <div class="select-operation">
-          <van-checkbox class="grid-all-checkbox" @click="clickGridAllCheckBox" v-model="allChecked">{{indexList.length>0 ? '已选择 '+this.tableHead[2].label : "选择"}}</van-checkbox>
+          <van-checkbox class="grid-all-checkbox" @click="clickGridAllCheckBox" v-model="allChecked">{{selectRowData.length>0 ? '已选择 '+this.tableHead[2].label : "选择"}}</van-checkbox>
           <div>
-            <el-button class="select-operation-button" icon="el-icon-download" v-if="indexList.length > 0" @click="downloadFile">
+            <el-button class="select-operation-button" icon="el-icon-download" v-if="selectRowData.length > 0" @click="downloadFile">
               下载
             </el-button>
-            <el-button class="select-operation-button" icon="el-icon-share" v-if="indexList.length === 1" @click="share">
+            <el-button class="select-operation-button" icon="el-icon-share" v-if="selectRowData.length === 1" @click="share">
               分享
             </el-button>
-            <el-button class="select-operation-button" icon="el-icon-document-copy" v-if="indexList.length > 0" @click="moveOrCopy">
+            <el-button class="select-operation-button" icon="el-icon-document-copy" v-if="selectRowData.length > 0" @click="moveOrCopy">
               移动或复制
             </el-button>
-            <el-button class="select-operation-button" icon="el-icon-delete" v-if="indexList.length > 0" type="danger" @click="deleteFile">
+            <el-button class="select-operation-button" icon="el-icon-delete" v-if="selectRowData.length > 0" type="danger" @click="deleteFile">
             </el-button>
 
           </div>
@@ -316,17 +316,17 @@
       </div>
 
       <van-checkbox-group v-model="selectRowData" @change="handleSelectionChange" ref="checkboxGroup">
-        <van-grid square :center="true" :column-num="gridColumnNum" :gutter="20" :border="false">
+        <van-grid square :center="true" :column-num="gridColumnNum" :gutter="20" :border="false" :style="{'width':'100%','max-height': clientHeight-45+'px','overflow':'auto'}">
           <van-grid-item v-for="(item,index) in fileList" ref="gridItem"  :key="item.id"
           >
             <div class="grid-time van-grid-item__content van-grid-item__content--center van-grid-item__content--square"
-                 :style="{'background': indexList.includes(index)?'#baebff91':'','cursor': indexList.length > 0 ?'default':'pointer'}"
+                 :style="{'background': selectRowData.includes(item)?'#baebff91':'','cursor': 'pointer'}"
                  @mouseover="gridItemHover(item,index)"
                  @mouseout="gridItemOut(item,index)"
                  @click="gridItemClick(item)"
                  @contextmenu.prevent="rowContextmenu(item)"
             >
-              <van-checkbox v-if="gridHoverItemIndex === index || indexList.includes(index)" class="grid-item-checkbox" :name="item" @click.stop="clickGridItemCheckBox(item,index)"/>
+              <van-checkbox v-if="gridHoverItemIndex === index || selectRowData.includes(item)" class="grid-item-checkbox" :name="item" @click.stop="clickGridItemCheckBox(item,index)"/>
               <div class="grid-item-icon"><icon-file :item="item" :image-url="imageUrl" :grid="true"></icon-file></div>
               <span class="grid-item-text">{{item.name}}</span>
             </div>
@@ -341,16 +341,6 @@
       :emptyStatus="emptyStatus"
     >
     </empty-file>
-    <!--<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>-->
     <sim-text-preview :file="textPreviewRow" :status.sync="textPreviewVisible"></sim-text-preview>
     <image-viewer :fileList="fileList" :file="imagePreviewRow" :status.sync="imagePreviewVisible"></image-viewer>
     <video-preview :file="videoPreviewRow" :status.sync="videoPreviewVisible"></video-preview>
@@ -373,7 +363,7 @@
         <el-form-item label="大小:">
           <span> {{rowContextData.size}}字节 {{rowContextData.size >0 ? '('+formatSize(rowContextData.size)+')': ''}}</span>
         </el-form-item>
-        <el-form-item label="位置:">
+        <el-form-item label="位置:" class="details-position">
           <a :href="'?path='+rowContextData.path">{{rowContextData.path}}</a>
         </el-form-item>
         <el-form-item label="创建时间:">
@@ -536,13 +526,12 @@
         fileList: [],
         pagination: {
           pageIndex: 1,
-          pageSize: 1000,
+          pageSize: 50,
           total: 0,
           pageSizes: [10,20,30,40,50]
         },
         isIndeterminate: false,
         isSelectAll: false,
-        indexList: [],
         clientHeight: 500,
         // 表头数据
         tableHead: [
@@ -746,39 +735,24 @@
           }
         },10)
       },
-      clickGridItemCheckBox(item,index) {
+      clickGridItemCheckBox(row,index) {
-        if(this.indexList.length === 0){
+        this.pinSelect(null,row)
-          this.$refs.fileListTable.tableSelectData = []
-        }
         // 同步列表的checkbox
-        if(this.indexList.includes(index)){
+        if(this.selectRowData.includes(row)){
-          this.$refs.fileListTable.toggleRowSelection(item,false)
+          this.$refs.fileListTable.toggleRowSelection([{row:row,selected:false}])
+        }else{
+          this.$refs.fileListTable.toggleRowSelection([{row:row,selected:true}])
         }
       },
       clickGridAllCheckBox() {
-        console.log(this.indexList.length,this.fileList.length)
+        if(this.selectRowData.length !== this.fileList.length){
-        if(this.indexList.length !== this.fileList.length){
-          console.log('toggleAll')
-          // this.$refs.checkboxGroup.toggleAll(true);
           this.$refs.fileListTable.toggleAllSelection()
         }else{
-          // this.$refs.checkboxGroup.toggleAll();
           this.$refs.fileListTable.clearSelection();
         }
       },
       gridItemClick(row) {
-        if (this.indexList.length < 1) {
+        this.fileClick(row)
-          if (row.index !== this.editingIndex) {
-            this.fileClick(row)
-            this.editingIndex = -1
-          }
-        } else {
-          if(this.indexList.includes(row.index)){
-            this.$refs.fileListTable.toggleRowSelection(row,false)
-          }else{
-            this.$refs.fileListTable.toggleRowSelection(row,true)
-          }
-        }
       },
       containerResize() {
         let clientWidth = document.querySelector(".dashboard-container").clientWidth
@@ -940,7 +914,6 @@
                 leaveIndex = throughRow.rowIndex
                 loop = setTimeout(function () {
                   if(leaveIndex > -1){
-                    console.log("离开了",leaveIndex)
                     const leave = target.children[leaveIndex];
                     clearClass(leave)
                     dragIndex = -1
@@ -997,7 +970,6 @@
         return formatSize(size)
       },
       upload() {
-        console.log('user', this.$store.state.user);
         // 打开文件选择框
         Bus.$emit('openUploader', {
           // 传入的参数
@@ -1009,7 +981,6 @@
       uploadFolder() {
         if(window.uploader.supportDirectory){
           // 打开文件夹选择框
-          console.log('selectFolder')
           Bus.$emit('uploadFolder', {
             // 传入的参数
             currentDirectory: this.path,
@@ -1096,7 +1067,6 @@
       },
       // 新建文件夹
       newFolderNameClick() {
-        console.log('user', this.$store.state.user);
         if(this.newFolderName){
           if(/[\/\\"<>\?\*]/gi.test(this.newFolderName)){
             this.$message({
@@ -1227,8 +1197,6 @@
             this.listModeSearch = true
             this.listModeSearchOpenDir = false
           })
-        }else{
-          this.handleLink('',0)
         }
       },
       searchFileAndOpenDir(row,onLoad) {
@@ -1305,7 +1273,6 @@
         }
       },
       pinSelect(rows,row){
-        console.log('this.selectPin',this.selectPin,'this.selectOrgin',this.selectOrgin)
         if(this.selectPin && this.selectOrgin > -1){
           const orgin = this.selectOrgin
           this.selectEnd = row.index
@@ -1401,21 +1368,8 @@
         this.isSelectAll = checked
         if(checked){
           this.fileList.forEach(row => {
-            this.indexList.push(row.index)
+            this.selectRowData.push(row)
           })
-        }else{
-          this.indexList.splice(0,this.indexList.length)
-          this.isIndeterminate = false
-        }
-      },
-      checkChange(checked,index) {
-        if(checked){
-          this.indexList.push(index)
-        }else{
-          this.indexList.splice(this.indexList.findIndex(i => index === i), 1)
-        }
-        if(this.indexList.length > 0){
-          this.isIndeterminate = true
         }else{
           this.isIndeterminate = false
         }
@@ -1423,30 +1377,22 @@
       // 收集选中的index值作为数组 传递给rowRed判断变换样式
       handleSelectionChange(rows) {
         // 起点
-        console.log('handleSelectionChange1')
         if(rows.length > 0){
           if(!this.selectPin){
             this.selectOrgin = rows[0].index
           }
-          //rows.findIndex(item => item.index === this.selectEnd) === -1 && rows[rows.length - 1].index === this.selectEnd
           if(this.selectPin){
-            console.log('handleSelectionChange2')
-            // rows = this.$refs.fileListTable.tableSelectData
             return
           }
-        }else{
-          // this.selectOrgin = -1
         }
         this.$refs.fileListTable.tableSelectData = rows
-        // this.selectRowData = rows
+        this.selectRowData = rows
         this.changeSelectedStyle(rows)
       },
       changeSelectedStyle(rows){
         let selectTotalSize = 0
-        this.indexList = []
         rows.forEach(item => {
           selectTotalSize += item.size
-          // this.indexList.push(item.index)
         })
         const item_name = this.tableHead[2]
         const item_more = this.tableHead[4]
@@ -1471,7 +1417,7 @@
           item_date.label = '修改日期'
           item_date.sortable = true
         }
-        if(this.indexList.length === this.fileList.length){
+        if(this.selectRowData.length === this.fileList.length){
           this.allChecked = true
         }else{
           this.allChecked = false
@@ -1479,9 +1425,6 @@
       },
       // cell-style 通过返回值可以实现样式变换利用传递过来的数组index循环改变样式
       rowStyle({ row, rowIndex}) {
-        // if(this.$refs.fileListTable.tableSelectData.length > 0){
-        //   console.log('rowStyle',this.$refs.fileListTable.tableSelectData[0].index)
-        // }
         if(this.$refs.fileListTable.tableSelectData.findIndex(item => item.index === row.index) > -1){
           return { backgroundColor: '#F5F7FA' }
         }
@@ -1505,7 +1448,7 @@
           this.$refs.contextShow.hideMenu()
         }
         if(this.editingIndex === -1 && !this.$refs.contextShow.ctxVisible) {
-          if (this.indexList.length <= 1) {
+          if (this.selectRowData.length <= 1) {
             this.cellMouseIndex = row.index
           }
         }
@@ -1532,7 +1475,7 @@
         if(this.editingIndex === -1) {
           const columnIndex = column.index
           if (columnIndex === 2) {
-            if (this.indexList.length < 1) {
+            if (this.selectRowData.length < 1) {
               if (row.index !== this.editingIndex) {
                 // this.fileClick(row)
                 this.editingIndex = -1
@@ -1560,7 +1503,6 @@
       // 重命名
       rowRename(newFileName, row) {
         if (newFileName) {
-          console.log('newFileName', newFileName)
           if(/[\/\\"<>\?\*]/gi.test(newFileName)){
             this.$message({
               message: '文件名不能包含以下字字符:<,>,|,*,?,,/',
@@ -1580,7 +1522,6 @@
               return item;
             }
           })
-          console.log(findIndex)
           if(findIndex > -1){
             let msg = '该文件已存在'
             if(row.isFolder){
@@ -1645,12 +1586,9 @@
           }
           this.preliminaryRowData(row)
         }
-        console.log('menusIsMultiple', this.menusIsMultiple)
         event.preventDefault()
         this.menuTriangle = ''
         const e = {}
-        console.log('pageX:' + event.pageX, 'clientX:' + event.clientX)
-        console.log('pageY:' + event.pageY, 'clientY:' + event.clientY)
         e.pageX = event.pageX + 5
         e.pageY = event.pageY + 2
         e.clientX = event.clientX + 5
@@ -1709,7 +1647,6 @@
         }
       },
       show() {
-        console.log('菜单显示了')
       },
       hide() {
         const that = this
@@ -1718,7 +1655,6 @@
           that.isJustHideMenus = false
         }, 100)
         this.cellMouseIndex = -1
-        console.log('菜单隐藏了')
       },
       // 菜单操作
       menusOperations(operation) {
@@ -1752,7 +1688,6 @@
             //   title: this.rowContextData.name,
             //   duration: 2000
             // })
-            console.log('详情', this.rowContextData)
             this.drawer = true
             break
           case 'rename':
@@ -1777,7 +1712,6 @@
       },
       // 加载下一级文件树
       directoryTreeLoadNode(node, resolve) {
-        console.log(node)
         let fileId = null
         if (node.level === 0) {
           const that = this
@@ -1834,7 +1768,7 @@
         }
 
         let fileIds = [];
-        if (this.menusIsMultiple || this.indexList.length > 1) {
+        if (this.menusIsMultiple || this.selectRowData.length > 1) {
           const exits = this.$refs.fileListTable.tableSelectData.some(value => {
             fileIds.push(value.id)
             const thisParentPath = value.path
@@ -1939,7 +1873,6 @@
           if (res.data) {
             this.shareLink = 'http://'+window.location.host+'/s?s='+res.data
             this.generateShareLinkLoading = false
-            console.log(window.location.host, this.$route)
           }
         })
       },
@@ -1974,17 +1907,6 @@
         })
         if (totalSize > 0) {
           var fileIds = [];
-          // if (this.indexList.length > 1) {
-          //   this.$refs.fileListTable.tableSelectData.forEach(value => {
-          //     fileIds.push(value.id)
-          //   })
-          // } else {
-          //   if (this.rowContextData.id) {
-          //     fileIds.push(this.rowContextData.id)
-          //   } else {
-          //     fileIds.push(this.$refs.fileListTable.tableSelectData[0].id)
-          //   }
-          // }
           if (this.$refs.fileListTable.tableSelectData.length > 0) {
             this.$refs.fileListTable.tableSelectData.forEach(value => {
               fileIds.push(value.id)
@@ -2013,7 +1935,7 @@
       deleteFile() {
         let fileList = []
         const fileIds = []
-        if (this.menusIsMultiple || this.indexList.length > 1) {
+        if (this.menusIsMultiple || this.selectRowData.length > 1) {
           fileList = this.$refs.fileListTable.tableSelectData
           this.$refs.fileListTable.tableSelectData.forEach(value => {
             fileIds.push(value.id)
@@ -2022,9 +1944,6 @@
           fileIds.push(this.$refs.fileListTable.tableSelectData[0].id)
         }
         const str = this.getShowSumFileAndFolder(fileList)
-
-        console.log(this.$refs.fileListTable.tableSelectData)
-
         this.$confirm('此操作将永久删除' + str + ', 是否继续?', '提示', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
@@ -2081,7 +2000,6 @@
             const path = encodeURIComponent(this.path);
             this.$router.push(`?vmode=${this.vmode}&path=${path}`)
             this.openDir(row)
-            console.log(this.pathList)
           }
         } else {
           if(row.contentType.indexOf('image') > -1){
@@ -2116,14 +2034,16 @@
             return
           }
           // 打开文件
-          const fileIds = [row.id]
+          let fileIds = [row.id]
-          let url = process.env.VUE_APP_BASE_FILE_API + 'preview/' + row.name + '?jmal-token=' + this.$store.state.user.token + '&fileIds=' + fileIds
+
-          window.open(url, '_blank')
+          this.$confirm('此文件不支持预览, 是否下载该文件?', '提示', {
-          // const fileIds = [row.id]
+            confirmButtonText: '确定',
-          // let url = 'http://localhost:10010/preview/' + row.name + '?jmal-token=' + this.$store.state.user.token + '&fileIds=' + fileIds
+            cancelButtonText: '取消',
-          // url = process.env.VUE_APP_BASE_PRIVIEW_API+'/onlinePreview?url='+encodeURIComponent(url);
+            type: 'warning'
-          // console.log("url",url)
+          }).then(() => {
-          // window.open(url);
+            let url = process.env.VUE_APP_BASE_FILE_API + 'preview/' + row.name + '?jmal-token=' + this.$store.state.user.token + '&fileIds=' + fileIds
+            window.open(url, '_self')
+          })
         }
       }
     }
@@ -2160,6 +2080,15 @@
     /deep/.el-form-item {
       margin-bottom: 0;
     }
+    /deep/.details-position{
+      margin: 10px 0;
+      .el-form-item__content {
+        line-height: 20px;
+      }
+      .el-form-item__label {
+        line-height: 20px;
+      }
+    }
     a:hover {
       color: #409EFF;
     }

src/components/button/ButtonUpload.vue

@@ -108,7 +108,6 @@
       },
     },
     destroyed() {
-      console.log('destroyed')
       clearInterval(this.interval)
     }
   }

src/icons/svg/share.svg

@@ -1 +1 @@
-<svg t="1580453295915" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="52816" width="32" height="32"><path d="M928 480c-17.664 0-32 14.336-32 32l0 320c0 17.664-14.336 32-32 32L160 864c-17.664 0-32-14.336-32-32L128 288c0-17.664 14.336-32 32-32l224 0 0 0c0 0 0 0 0 0 17.664 0 32-14.336 32-32s-14.336-32-32-32c-1.024 0-1.888 0.48-2.88 0.576L160.384 192.576c-52.96 0-95.904 43.008-95.904 96.064l0 543.872c0 53.056 42.944 96.064 95.904 96.064l704.224 0c52.96 0 95.904-43.008 95.904-96.064L960.512 512 960 512C960 494.336 945.664 480 928 480zM402.688 620.768c-1.92 4.128-3.168 8.608-3.168 13.44 0 17.664 14.336 32 32 32 15.456 0 27.744-11.168 30.752-25.76l0.64 0c37.12-189.696 193.984-336.256 388.672-358.272l-67.776 67.776c-12.512 12.512-12.512 32.768 0 45.248 12.512 12.512 32.768 12.512 45.248 0l122.528-122.528c12.512-12.512 12.512-32.768 0-45.248l-122.528-122.528c-12.512-12.512-32.768-12.512-45.248 0-12.512 12.512-12.512 32.768 0 45.248l67.52 67.52C628.256 239.872 448.224 405.408 402.688 620.768z" p-id="52817"></path></svg>
+<svg t="1586944065585" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3243" width="32" height="32"><path d="M733.798549 494.470765" p-id="3244"></path><path d="M766.1954 702.719716c-35.55989 0-67.744917 14.682397-90.916663 38.210253L366.860389 569.629535c9.035794-17.527189 14.652721-37.093826 14.652721-58.131979 0-12.548804-2.361791-24.424272-5.742794-35.851533l303.877939-188.700733c22.63758 20.36584 52.262294 33.104979 85.017302 33.104979 70.422909 0 127.694287-57.270355 127.694287-127.697357 0-70.422909-57.270355-127.693264-127.694287-127.693264-70.427002 0-127.697357 57.270355-127.697357 127.693264 0 14.524808 2.971681 28.28623 7.438413 41.312918L343.30388 420.61057c-23.084765-22.734794-54.655807-36.84107-89.518826-36.84107-70.421886 0-127.692241 57.270355-127.692241 127.692241 0 70.422909 57.270355 127.69838 127.692241 127.69838 25.604144 0 49.389874-7.726985 69.405743-20.751626l320.449359 177.973414c-3.034103 10.916631-5.172813 22.153556-5.172813 34.000372 0 70.422909 57.270355 127.694287 127.697357 127.694287 70.422909 0 127.694287-57.270355 127.694287-127.694287C893.858988 759.956302 836.652078 702.719716 766.1954 702.719716L766.1954 702.719716zM764.695233 128.505769c35.21299 0 63.84612 28.636201 63.84612 63.84612 0 35.21299-28.633131 63.851237-63.84612 63.851237-35.20992 0-63.847144-28.638247-63.847144-63.851237C700.847066 157.14197 729.485313 128.505769 764.695233 128.505769L764.695233 128.505769zM190.002378 511.497557c0-35.215036 28.638247-63.847144 63.851237-63.847144 35.20992 0 63.84612 28.633131 63.84612 63.847144 0 35.208896-28.636201 63.84612-63.84612 63.84612C218.640626 575.343677 190.002378 546.70543 190.002378 511.497557L190.002378 511.497557zM766.1954 894.2591c-35.20992 0-63.847144-28.633131-63.847144-63.84612 0-35.20992 28.638247-63.84612 63.847144-63.84612 35.21299 0 63.84612 28.636201 63.84612 63.84612C830.04152 865.62597 801.408389 894.2591 766.1954 894.2591L766.1954 894.2591zM766.1954 894.2591" p-id="3245"></path></svg>