Merge pull request #213 from jamebal/recycle

feat: 新增功能-回收站

src/api/file-api.js

@@ -100,6 +100,35 @@ export default {
       }
     })
   },
+  // 返回原处
+  restore: function(params) {
+    return request({
+      url: 'restore',
+      method: 'post',
+      params,
+      paramsSerializer: function(params) {
+        return qs.stringify(params, { arrayFormat: 'repeat' })
+      }
+    })
+  },
+  // 彻底删除
+  sweep: function(params) {
+    return request({
+      url: 'sweep',
+      method: 'delete',
+      params,
+      paramsSerializer: function(params) {
+        return qs.stringify(params, { arrayFormat: 'repeat' })
+      }
+    })
+  },
+  // 清空回收站
+  clearTrash: function() {
+    return request({
+      url: 'clear-trash',
+      method: 'delete'
+    })
+  },
   // 重名名
   rename: function(params) {
     return request({

src/components/Icon/Icon.vue

@@ -5,7 +5,7 @@
 
 import { Icon } from 'ant-design-vue'
 const IconFont = Icon.createFromIconfontCN({
-  scriptUrl: document.location.protocol + '/resource/font_2024484_fwthqwcsomd.js'
+  scriptUrl: document.location.protocol + '/resource/font_2024484_jfax4gppvg.js'
 })
 
 // 把此段代码贴到iconfont项目页面的控制台中, 以获取图标列表
@@ -15,7 +15,7 @@ const IconFont = Icon.createFromIconfontCN({
 // console.log(iconNames.slice(80,160))
 
 export const iconFonts = {
-  list: ['gengxinjindu', 'duigou', 'bars-solid', 'sort-amount-down-solid', 'sort-amount-up-alt-solid', 'tag2', 'guazai', 'duplicate', 'play1', "qrcode", "arrow1_left", "wulianwang-","zuji","disk-drive", "menu-fuzhi", "iso", "zuijinhuoyue","key", "shouquan", "sort", "grid", "list", "emoji-a", "emoji-bizui", "emoji-baiyan", "emoji-aixin", "emoji-dajing", "emoji-ziya", "emoji-daxiao", "emoji-esi", "emoji-fadai", "emoji-fankun", "emoji-ganga", "emoji-fennu", "emoji-hanyan", "emoji-jingkong", "emoji-haochi", "emoji-emo", "emoji-jingsong", "emoji-jingya", "emoji-kaixin", "emoji-lengku", "emoji-danao", "emoji-liukoushui", "emoji-liulei", "emoji-mengbi", "mianwubiaoqing", "nanguo", "shuizhuo", "taoyan", "tanchi", "siliao", "tiaopi", "xiaochulei", "wuliao", "xingxingyan", "xieyan", "xiasi", "xiaolian", "ku", "shengqi", "yousiliao", "en", "bushufu", "bianbian", "fankun1", "feiwen", "ganmao", "huaixiao", "liuhan", "outu", "keshui", "renzhe", "santiaoxian", "guaiwu", "shoushang", "tianshi", "shuai", "xianwen", "xiaodiaodaya", "xiong", "yiwen", "yun", "liubixie", "shimo", "dianzan", "biti", "fendou", "huqi", "heng", "kulou", "leng", "taoyan1", "shuixing", "aini", "aixin1", "zhadan", "xinsui",
+  list: ['huanyuan', 'huishouzhan', 'glb', 'gengxinjindu', 'duigou', 'bars-solid', 'sort-amount-down-solid', 'sort-amount-up-alt-solid', 'tag2', 'guazai', 'duplicate', 'play1', "qrcode", "arrow1_left", "wulianwang-","zuji","disk-drive", "menu-fuzhi", "iso", "zuijinhuoyue","key", "shouquan", "sort", "grid", "list", "emoji-a", "emoji-bizui", "emoji-baiyan", "emoji-aixin", "emoji-dajing", "emoji-ziya", "emoji-daxiao", "emoji-esi", "emoji-fadai", "emoji-fankun", "emoji-ganga", "emoji-fennu", "emoji-hanyan", "emoji-jingkong", "emoji-haochi", "emoji-emo", "emoji-jingsong", "emoji-jingya", "emoji-kaixin", "emoji-lengku", "emoji-danao", "emoji-liukoushui", "emoji-liulei", "emoji-mengbi", "mianwubiaoqing", "nanguo", "shuizhuo", "taoyan", "tanchi", "siliao", "tiaopi", "xiaochulei", "wuliao", "xingxingyan", "xieyan", "xiasi", "xiaolian", "ku", "shengqi", "yousiliao", "en", "bushufu", "bianbian", "fankun1", "feiwen", "ganmao", "huaixiao", "liuhan", "outu", "keshui", "renzhe", "santiaoxian", "guaiwu", "shoushang", "tianshi", "shuai", "xianwen", "xiaodiaodaya", "xiong", "yiwen", "yun", "liubixie", "shimo", "dianzan", "biti", "fendou", "huqi", "heng", "kulou", "leng", "taoyan1", "shuixing", "aini", "aixin1", "zhadan", "xinsui",
     "maren", "zhutou", "qie", "youling", "apple-fill", "attachment", "android-fill", "apple", "download", "arrow-up-circle", "arrow-right-circle", "arrow-down", "ashbin", "add", "file_music", "menu", "role", "jiaoseguanli", "yemianshezhi", "drop_down", "yuandian", "tag", "service-directory", "fabu", "wailian", "bianji-", "WEBSITE", "wangzhanguanli", "Up", "up", "fenlei", "guanlizhuanjiawenzhang", "pifu", "tuichudenglu", "shezhi", "wangzhan", "huaban", "yunshezhi", "UserSettings", "blogger", "biaoqian", "myself", "guidang", "quxiaoyulan1-copy", "yulan-copy", "quxiaoyulan1", "yulan"]
 }
 

src/components/ShowFile/ShowFile.vue

@@ -329,8 +329,6 @@
           @row-contextmenu="rowContextmenu"
           @cell-click="cellClick"
           @row-dblclick="dblclick"
-          @cell-mouse-enter="cellMouseEnter"
-          @cell-mouse-leave="cellMouseLeave"
           @sort-change="sortChange"
           @table-body-scroll="tableBodyScroll"
           @select="pinSelect"
@@ -392,69 +390,9 @@
                 </div>
               </template>
             </pl-table-column>
-            <!--分享-->
-            <pl-table-column
-              v-if="index === 3 && showShareItem"
-              :key="index"
-              width="50"
-              :index="index"
-              align="center"
-              header-align="center"
-              tooltip-effect="dark"
-            >
-              <template slot-scope="scope">
-                <el-tooltip
-                  v-if="
-                    scope.row.index === cellMouseIndex &&
-                      (!scope.row.isShare || scope.row.shareBase)
-                  "
-                  class="item"
-                  effect="light"
-                  content="分享"
-                  placement="top"
-                >
-                  <svg-icon
-                    title="分享"
-                    class="button-class"
-                    icon-class="share"
-                    @click.stop="share(scope.row)"
-                  />
-                </el-tooltip>
-              </template>
-            </pl-table-column>
-            <!--更多-->
-            <pl-table-column
-              v-if="index === 4 && showMoreItem"
-              :key="index"
-              width="50"
-              :prop="item.name"
-              :label="item.label"
-              :index="index"
-              class="el-icon-more"
-              align="center"
-              header-align="center"
-            >
-              <!-- 使用组件, 并传值到组件中 -->
-              <template slot="header">
-                <svg-icon
-                  v-if="item.name !== ''"
-                  class="button-class"
-                  icon-class="more"
-                  @click.stop="moreOperation($event)"
-                />
-              </template>
-              <template slot-scope="scope">
-                <svg-icon
-                  v-if="scope.row.index === cellMouseIndex"
-                  class="button-class"
-                  icon-class="more"
-                  @click.stop="moreClick(scope.row, $event)"
-                />
-              </template>
-            </pl-table-column>
             <!--文件大小-->
             <pl-table-column
-              v-if="index === 5 && showSizeItem"
+              v-if="index === 3 && showSizeItem"
               :key="index"
               width="200"
               :prop="item.name"
@@ -474,7 +412,7 @@
             </pl-table-column>
             <!--修改时间-->
             <pl-table-column
-              v-if="index === 6 && showUpdateDateItem"
+              v-if="index === 4 && showUpdateDateItem"
               :key="index"
               width="250"
               :prop="item.name"
@@ -883,14 +821,6 @@ export default {
       type: Boolean,
       default: true,
     },
-    showShareItem: {
-      type: Boolean,
-      default: true,
-    },
-    showMoreItem: {
-      type: Boolean,
-      default: true,
-    },
     isCollectView: {
       type: Boolean,
       default: false,
@@ -951,16 +881,6 @@ export default {
         ]
       },
     },
-    multipleMenus: {
-      type: Array,
-      default: function() {
-        return [
-          { iconClass: 'menu-copy', label: '移动或复制', operation: 'copy' },
-          { iconClass: 'menu-download', label: '下载', operation: 'download' },
-          { iconClass: 'menu-remove', label: '删除', operation: 'remove' },
-        ]
-      },
-    },
     multipleRightMenus: {
       type: Array,
       default: function() {
@@ -1030,28 +950,17 @@ export default {
           sortable: true,
           index: 2,
         },
-        {
-          name: '',
-          label: '',
-          index: 3,
-        },
-        {
-          name: '',
-          label: '',
-          more: true,
-          index: 4,
-        },
         {
           name: 'size',
           label: '大小',
           sortable: true,
-          index: 5,
+          index: 3,
         },
         {
           name: 'updateDate',
           label: '修改日期',
           sortable: true,
-          index: 6,
+          index: 4,
         },
       ],
       isJustHideMenus: false,
@@ -1830,10 +1739,6 @@ export default {
               const last = target.children[dragIndex]
               clearClass(last)
             }
-            // console.log("离开了",leaveIndex,"dragIndex:",dragIndex)
-            // leaveIndex = node.rowIndex
-            // const leave = target.children[leaveIndex];
-            // clearClass(leave)
             dragIndex = -1
           }
         }
@@ -1913,7 +1818,6 @@ export default {
           data: false,
         })
         e.dataTransfer.effectAllowed = 'none'
-        // console.log('child'+dragIndex+'拖拽结束');
         // 清除上次进入的容器的状态
         const last = target.children[dragIndex]
         clearClass(last)
@@ -1922,6 +1826,11 @@ export default {
       }
       // 开始拖拽
       container.ondragstart = e => {
+        if (this.queryFileType === 'trash') {
+          e.preventDefault()
+          e.stopPropagation()
+          return false
+        }
         // 正在选区获取按住关键键时禁止拖拽
         if (_this.drawFlag || _this.isCmd || _this.selectPin) {
           e.preventDefault()
@@ -1961,8 +1870,9 @@ export default {
           if (!_this.grid) {
             dragingDiv.firstChild.style.textAlign = 'center'
             let tds = Array.prototype.slice.call(dragingDiv.childNodes)
+            console.log(tds)
             tds.forEach((node, index) => {
-              if (index === 4) {
+              if (index === 2) {
                 node.style.borderRadius = '0 3px 3px 0'
                 node.style.borderRight = '1px solid #409eff'
                 node.firstChild.style.height = '44px'
@@ -1976,8 +1886,7 @@ export default {
             })
             dragingDivStyleTop = pos.y - _this.fileListScrollTop - 51.5
           } else {
-            dragingDivStyleTop =
+            dragingDivStyleTop = pos.y - _this.fileListScrollTop - pos.h / 2 + 10
-              pos.y - _this.fileListScrollTop - pos.h / 2 + 10
           }
           dragingDiv.style.top = dragingDivStyleTop + 'px'
           if (index === 0) {
@@ -2602,10 +2511,12 @@ export default {
           child[0].iconClass = 'menu-point'
           child[1].iconClass = 'menu-empty'
         }
-        if (localStorage.getItem('showFolderSize') === 'true') {
+        if (child[2]) {
-          child[2].iconClass = 'duigou'
+          if (localStorage.getItem('showFolderSize') === 'true') {
-        } else {
+            child[2].iconClass = 'duigou'
-          child[2].iconClass = 'menu-empty'
+          } else {
+            child[2].iconClass = 'menu-empty'
+          }
         }
       }
       if (arrangementModeIndex > -1) {
@@ -2859,6 +2770,7 @@ export default {
             order: this.sortable.order,
             isFolder: this.queryCondition.isFolder,
             isFavorite: this.queryCondition.isFavorite,
+            isTrash: this.queryCondition.isTrash,
             tagId: this.queryCondition.tagId,
             queryCondition: this.queryCondition,
             pageIndex: this.pagination.pageIndex,
@@ -2996,7 +2908,8 @@ export default {
       if (fileSize > 0) {
         fileSum = fileSize + '个文件'
       }
-      return folderSum + ' ' + fileSum
+      const stand = folderSize > 0 && fileSize > 0 ? '、' : ''
+      return folderSum + stand + fileSum
     },
     // 计算总大小
     getShowSumSize(totalSize) {
@@ -3047,15 +2960,13 @@ export default {
         selectTotalSize += item.size
       })
       const item_name = this.tableHead[2]
-      const item_more = this.tableHead[4]
+      const item_size = this.tableHead[3]
-      const item_size = this.tableHead[5]
+      const item_date = this.tableHead[4]
-      const item_date = this.tableHead[6]
       if (rows.length > 0) {
         const sumFileAndFolder = this.getShowSumFileAndFolder(rows)
         const sizeSum = this.getShowSumSize(selectTotalSize)
         item_name.label = sumFileAndFolder
         item_name.sortable = false
-        item_more.name = 'more'
         item_size.label = sizeSum
         item_size.sortable = false
         item_date.label = ''
@@ -3063,17 +2974,12 @@ export default {
       } else {
         item_name.label = '名称'
         item_name.sortable = true
-        item_more.name = ''
         item_size.label = '大小'
         item_size.sortable = true
         item_date.label = '修改日期'
         item_date.sortable = true
       }
-      if (this.selectRowData.length === this.fileList.length) {
+      this.allChecked = this.selectRowData.length === this.fileList.length;
-        this.allChecked = true
-      } else {
-        this.allChecked = false
-      }
     },
     // cell-style 通过返回值可以实现样式变换利用传递过来的数组index循环改变样式
     rowStyle({ row, column, rowIndex, columnIndex }) {
@@ -3091,7 +2997,7 @@ export default {
             borderBottom: '1px solid #409eff',
           }
         }
-        if (columnIndex === 5) {
+        if (columnIndex === 3) {
           return {
             backgroundColor: '#e0f3fc !important',
             borderRadius: '0 3px 3px 0',
@@ -3120,45 +3026,6 @@ export default {
       const isFavorite = this.rowContextData.isFavorite
       this.highlightFavorite(isFavorite, false)
     },
-    // 单元格hover进入时事件
-    cellMouseEnter(row) {
-      if (this.draging === 1) {
-        return
-      }
-      if (
-        this.$refs.contextShow.locals.menuType === 'moreClick' &&
-        this.$refs.contextShow.locals.rowIndex !== row.index
-      ) {
-        this.$refs.contextShow.hideMenu()
-      }
-      if (this.editingIndex === -1 && !this.$refs.contextShow.ctxVisible) {
-        if (this.selectRowData.length <= 1) {
-          this.cellMouseIndex = row.index
-        }
-      }
-    },
-    // 单元格hover退出时事件
-    cellMouseLeave(row) {
-      if (this.draging === 1) {
-        return
-      }
-      if (
-        this.$refs.contextShow.locals.menuType === 'moreClick' &&
-        this.$refs.contextShow.locals.rowIndex !== row.index
-      ) {
-        this.$refs.contextShow.hideMenu()
-        this.$refs.contextShow.locals = {}
-        return
-      }
-      if (
-        this.$refs.contextShow.ctxVisible &&
-        this.$refs.contextShow.locals.menuType === 'moreClick' &&
-        this.$refs.contextShow.locals.rowIndex === row.index
-      ) {
-        return
-      }
-      this.cellMouseIndex = -1
-    },
     //双击
     dblclick(row) {
       this.fileClick(row)
@@ -3294,12 +3161,6 @@ export default {
         this.clearOnCreateFilename()
       }
     },
-    // 更多操作(多选)
-    moreOperation(event) {
-      this.menusIsMultiple = true
-      this.menus = this.multipleMenus
-      this.showOperationMenus(event)
-    },
     setMenus(row) {
       this.menus = JSON.parse(JSON.stringify(this.singleMenus))
       // 挂载的文件
@@ -3322,12 +3183,8 @@ export default {
             reservations.includes(item.operation)
           )
         }
-        if (!row.isFolder) {
+        if (!row.isFolder && this.queryFileType !== 'trash') {
-          this.menus.splice(-2, 0, {
+          this.menus.splice(-2, 0, { iconClass: 'duplicate', label: '创建副本', operation: 'duplicate'})
-            iconClass: 'duplicate',
-            label: '创建副本',
-            operation: 'duplicate',
-          })
         }
         if ((row.isShare && !row.shareBase) || row.ossFolder) {
           // 删除分享选项
@@ -3390,15 +3247,6 @@ export default {
       }
       this.setMenusCopyDownLoadLinks(file)
     },
-    // 更多操作(单选)
-    moreClick(row, event) {
-      this.menusIsMultiple = false
-      this.setMenus(row)
-      this.showOperationMenus(event, {
-        menuType: 'moreClick',
-        rowIndex: row.index,
-      })
-    },
     // 鼠标右击
     rowContextmenu(row) {
       if (this.selectFile) {
@@ -3429,26 +3277,6 @@ export default {
       this.$refs.contextShow.showMenu(e)
       this.cellMouseIndex = -1
     },
-    // 显示操作菜单
-    showOperationMenus(event, menuData) {
-      let offsetY = event.pageY
-      if (event.target.clientHeight > 0) {
-        offsetY += event.target.clientHeight / 2 - event.offsetY
-      }
-      const e = {}
-      if (document.body.scrollHeight - offsetY > 400) {
-        this.menuTriangle = 'menu-triangle-top'
-        e.pageX = event.pageX - 78
-        e.pageY = offsetY + 25
-      } else {
-        this.menuTriangle = 'menu-triangle-bottom'
-        e.pageX = event.pageX - 78
-        e.pageY = offsetY - this.menus.length * 38 - 36
-      }
-      if (!this.isJustHideMenus) {
-        this.$refs.contextShow.showMenu(e, menuData)
-      }
-    },
     menuFavoriteOver(index, isFavorite) {
       this.highlightFavorite(isFavorite, false)
     },
@@ -3553,6 +3381,9 @@ export default {
         case 'createMarkdownFile':
           this.newDocument()
           break
+        case 'clearTrash':
+          this.clearTrash()
+          break
       }
     },
     // 新建文件
@@ -3638,6 +3469,14 @@ export default {
           // 删除
           this.deleteFile()
           break
+        case 'sweep':
+          // 清空回收站
+          this.sweepFile()
+          break
+        case 'restore':
+          // 返回原处
+          this.restoreFile()
+          break
       }
       this.$refs.contextShow.hideMenu()
     },
@@ -4023,32 +3862,55 @@ export default {
         })
       } else {
         fileIds.push(this.rowContextData.id)
+        fileList.push(this.rowContextData)
       }
       const str = this.getShowSumFileAndFolder(fileList)
-      this.$confirm('此操作将永久删除' + str + ', 是否继续?', '提示', {
+      this.$confirm('将 ' + str + ' 移至回收站, 是否继续?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning',
       }).then(() => {
-        api
+        api.delete({
-          .delete({
             currentDirectory: this.getQueryPath(),
             username: this.$store.state.user.name,
             fileIds: fileIds,
-          })
+          }).then(() => {
-          .then(() => {
             // 刷新列表
             if (this.$route.query.folder) {
               this.getFileList()
             }
           })
-          .then(() => {
+      })
-            this.$notify({
+    },
-              title: '删除成功',
+    restoreFile() {
-              type: 'success',
+      const fileIds = this.getSelectIdList()
-              duration: 1000,
+      api.restore({fileIds: fileIds}).then(() => {
-            })
+        this.getFileList()
-          })
+      })
+    },
+    sweepFile() {
+      const fileIds = this.getSelectIdList()
+      this.$confirm(`此操作将永久删除 ${fileIds.length}个文件, 是否继续?`, '提示', {
+        confirmButtonText: '彻底删除',
+        confirmButtonClass: 'el-button--danger',
+        cancelButtonText: '取消',
+        type: 'warning',
+      }).then(() => {
+        api.sweep({fileIds: fileIds}).then(() => {
+          this.getFileList()
+        })
+      })
+    },
+    clearTrash() {
+      this.$confirm(`是否清空回收站? 此操作将无法还原!!!`, '提示', {
+        confirmButtonText: '清空',
+        confirmButtonClass: 'el-button--danger',
+        cancelButtonText: '取消',
+        type: 'warning',
+      }).then(() => {
+        api.clearTrash().then(() => {
+          this.getFileList()
+        })
       })
     },
     // 获取选中项id列表
@@ -4154,6 +4016,9 @@ export default {
     },
     // 点击文件或文件夹
     fileClick(row) {
+      if (this.queryFileType === 'trash') {
+        return
+      }
       if (this.editingIndex === row.index) {
         return
       }

src/views/login/index.vue

@@ -209,9 +209,11 @@ export default {
             let data = new FormData()
             data.append('username',this.loginForm.username)
             data.append('password',this.loginForm.password)
+            this.loading = true
             initialization(data).then(()=>{
                 this.initialize = false
                 this.$message.success('创建成功')
+                this.loading = false
             })
           }else{
             // 登录

src/views/setting/sys/logList.vue

@@ -123,7 +123,7 @@ export default {
       isLoginType: this.type === 'LOGIN',
       // 查询条件
       queryCondition: {
-        excludeUsername: 'other',
+        excludeUsername: undefined,
         username: undefined,
         ip: undefined,
         type: this.type,
@@ -191,12 +191,7 @@ export default {
       }
       this.queryLogList()
     },
-    queryLogList() {
+    queryLogList(val) {
-      if (this.queryCondition.username) {
-        this.queryCondition.excludeUsername = null;
-      } else {
-        this.queryCondition.excludeUsername = 'other';
-      }
       this.$refs.tableList.initPageIndex()
       this.getLogList()
     },

src/views/trash/index.vue

@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <show-file
+      queryFileType="trash"
+      :defaultGrid="true"
+      :orderCustom="true"
+      :sortable="sortable"
+      :queryCondition="queryCondition"
+      :showNavigation="true"
+      :show-search-button="false"
+      :context-menus="contextMenus"
+      :single-menus="singleMenus"
+      :multiple-right-menus="multipleRightMenus"
+      :show-upload-button="false"
+    ></show-file>
+  </div>
+</template>
+
+<script>
+import ShowFile from "@/components/ShowFile/ShowFile";
+
+export default {
+  components: {ShowFile},
+  data() {
+    return {
+      sortable: {
+        prop: 'updateDate', order: 'descending'
+      },
+      queryCondition: {
+        isFolder: false,
+        isTrash: true
+      },
+      contextMenus: [
+        {
+          label: '查看', operation: 'viewMode', child: [
+            { iconClass: this.grid ? '' : 'menu-point', label: '列表', operation: 'vmode-list' },
+            { iconClass: this.grid ? 'menu-point' : '', label: '缩略图', operation: 'vmode-grid' }
+          ]
+        },
+        {
+          label: '排列方式', operation: 'arrangement', child: [
+            { label: '名称', operation: 'orderName', orderProp: 'name' },
+            { label: '大小', operation: 'orderSize', orderProp: 'size' },
+            { label: '日期', operation: 'orderUpdateDate', orderProp: 'updateDate' },
+          ]
+        },
+        { label: '刷新', operation: 'refresh' },
+        { divider: true, operation: 'divider' },
+        { label: '清空回收站', operation: 'clearTrash' },
+      ],
+      singleMenus: [
+        {iconClass: 'huanyuan', label: '放回原处', operation: 'restore'},
+        {iconClass: 'menu-remove', label: '彻底删除', operation: 'sweep'}
+      ],
+      multipleRightMenus: [
+        {
+          iconClass: 'menu-deselect',
+          label: '取消选定',
+          operation: 'deselect',
+        },
+        {iconClass: 'huanyuan', label: '放回原处', operation: 'restore'},
+        { iconClass: 'menu-remove', label: '彻底删除', operation: 'sweep' },
+      ],
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
+