云盘：添加回收站

src/api/doc/index.ts

@@ -99,6 +99,23 @@ export function getMatterList( uid:string,data?: matterPage): AxiosPromise<matte
       data: data
     });
 }
+
+/**
+ * 获取回收站文件
+ */
+//export function getMatterList( uid:string,data?: matterPage): AxiosPromise<matterResutList> {
+export function getRecyclingList( uid:string,data?: matterPage): AxiosPromise<matterTreeList> {  
+    return request({
+      url: '/hxpan/api/matter/recycling',
+      method: 'post',
+      headers: {
+        'Identifier':uid,
+        'Content-Type': 'application/x-www-form-urlencoded'
+      },
+      data: data
+    });
+}
+
 /**
  * 新建目录
  */

src/views/doc/manage.vue

@@ -7,7 +7,8 @@
 import { getExpirTime, getFileIcon, readableSize,fileType} from "./tools"
 import sharePermission from './sharePermission.vue';
 import { useUserStore } from "@/store/modules/user";
-import { getMatterList,postCreateDir,postDelMatter,postCreateShare,postMatterRename,postDelMatBatch,getMySpaces,doCreateSpace} from "@/api/doc/index"
+import { getMatterList,postCreateDir,postDelMatter,postCreateShare,postMatterRename,
+  postDelMatBatch,getMySpaces,doCreateSpace,getRecyclingList} from "@/api/doc/index"
 import { matterPage,matterInfo,respCreateShare,matterTree, doFileUpload,matterPermit} from "@/api/doc/type"
 import { h } from 'vue'
 import router from "@/router";
@@ -69,6 +70,7 @@ const spaceTreeRef = ref(); //space的树树组件的引用
 let spaceNodeUid="" //用来判断树组件的展开和关闭，如何只是展开和关闭的点击事件不在刷新，通currentNode的作用
 
 const modListOrGrild=ref(true)
+const modRecycling=ref(false)
 
 const Departs = computed(() => {
     return `${'p0'+userStore.userInfoCont.userId},${userStore.userInfoCont.company},${userStore.userInfoCont.department},${userStore.userInfoCont.organization}`
@@ -282,6 +284,41 @@ function onSearchFile(name?:string){
   })
 }
 
+//获取回收站文件
+function showRecycling(){
+  modRecycling.value=true
+  currentNode.value={} //清空当前节点
+  if(!PRIVATESPACE.value) { //共享空间模式要切换到个人空间
+  PRIVATESPACE.value=true
+  }
+
+  getRecyclingList(uid,{}).then((resp)=>{
+    paginInfo.value={total:1,page:0}
+    matterList.value=resp.data
+  })
+}
+//恢复删除文件
+function restoreMatter (row:matterInfo){
+  if (row.uuid){
+    ElMessageBox.confirm(`确认要恢复( ${row.name}) ?`, "警告", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning",
+    }).then(()=>{
+      postDelMatter(uid,{
+        "uuid":row.uuid,
+        "restore":"true",
+      }).then(()=>{
+        ElMessage({
+          message: '已成功恢复文件，请在个人空间查看。',
+          type: 'success',
+          plain: true,
+        })
+      })
+    })
+  }
+}
+
 //加载目录文件列表
 function onLoadMatterList(){
   let _page: matterPage = {
@@ -349,6 +386,7 @@ function onDBclickMatter(row:matterInfo){
 
 //树节点展开
 function onNodeExpand(node: TreeNode, resolve: (data: matterTree[]) => void, reject: () => void) {
+    modRecycling.value=false
     let cuuid ="root"
     if ((node.data as matterTree).uuid) {
         cuuid= (node.data as matterTree).uuid
@@ -384,12 +422,18 @@ function onNodeExpand(node: TreeNode, resolve: (data: matterTree[]) => void, rej
 }
 //树节点单击
 function onNodeClick(data:matterTree,node:TreeNode,self:any,env:any){
+  modRecycling.value=false
   if(!PRIVATESPACE.value) {
     PRIVATESPACE.value=true
   }
-  if (currentNode.value.uuid === data.uuid) return;
-  const cuuid = data.uuid
-  currentNode.value = data
+  if (data){
+    if (currentNode.value.uuid === data.uuid) return;
+    //const cuuid = data.uuid
+    currentNode.value = data
+  }else{
+    currentNode.value={uuid:"root"}
+  }
+
   onLoadMatterList()
   return
   let _page: matterPage = {
@@ -590,7 +634,7 @@ async function doCreateMultyDir(path:string,uuid:string){
 }
 
 function handleMouseEnter(row:any){
-  currentHoverRow.value=row.name
+  currentHoverRow.value=row.uuid
 }
 //上传成功
 function handleSingleUpload(response:any){
@@ -636,6 +680,7 @@ function onNewSpace(){
 function onSpaceNodeClick(data:matterTree,node:TreeNode,self:any,env:any){
   if(PRIVATESPACE.value) { //如果打开了个人空间，突然点击共享空间，要及时切换状态
     PRIVATESPACE.value=false
+    modRecycling.value=false
   }
   //如果在单个组件上重复点击，不在刷新请求
   if(spaceNodeUid==data.uuid) return;
@@ -816,13 +861,14 @@ const handleSelectionChange = (val:matterInfo[]) => {
      
     </template>
     </el-tree>
-    <div class="area_header">
+    <div class="area_header" @click="showRecycling">
       <el-icon :size="20"><Delete /></el-icon><span class="area_name" > 回收站</span> 
     </div>
   </div>
 
   <div v-if="PRIVATESPACE" class="app_container">
-    <el-row :gutter="24" style="margin: 12px 0px;">
+    <el-row v-if="modRecycling"><span style="margin: 12px 0px;font-weight: bold;font-size: 20px;"> 回收站 </span>  </el-row>
+    <el-row v-else :gutter="24" style="margin: 12px 0px;">
       <el-link v-if="currentNode.name!=='root'"  @click="onNodeClick(treeData[0], null as unknown as TreeNode, null, null)">
          <span style="font-weight: bold;margin-right: 5px;align-content: center;">根目录</span>/
       </el-link> 
@@ -834,7 +880,7 @@ const handleSelectionChange = (val:matterInfo[]) => {
       </el-col>
     </el-row>
 
-    <el-row :gutter="24">
+    <el-row v-if="!modRecycling" :gutter="24">
       <el-col :span="14">
         <div class="el-button el-button--default" style="position: relative;">
           <input type="file"  style="position: absolute;opacity: 0;width: 50px;"
@@ -873,7 +919,7 @@ const handleSelectionChange = (val:matterInfo[]) => {
         :row-style ="() => ({ lineHeight: '36px' })"
         @selection-change="handleSelectionChange"
         @cell-mouse-enter="handleMouseEnter">
-        <el-table-column type="selection" width="50" />
+        <!-- <el-table-column type="selection" width="50" /> -->
         <el-table-column width="450" property="name" label="文件名">
           <template #default="scope">
             <input v-if="scope.row.name===''"  v-model="newdirName" type="text" autofocus placeholder="文件夹名" style="border:groove;height:30px;"  @change="onCreateDir" />
@@ -888,14 +934,18 @@ const handleSelectionChange = (val:matterInfo[]) => {
         </el-table-column>
         <el-table-column width="360" align="center">
           <template #default="scope">
-            <div v-show="currentHoverRow === scope.row.name">
-              <!-- <el-button size="small" :icon="Promotion" circle ></el-button> -->
-              <el-button size="small" :icon="View" circle @click="onPrivateView(scope.row)"></el-button>
-              <el-button size="small" :icon="Share" circle @click="onShareMatter(scope.row)"></el-button>
-              <el-button size="small" :icon="Download" circle @click="onDownload(scope.row)"></el-button>
-              <el-button size="small" :icon="Edit" circle @click="onlyOfficeEdit(scope.row)"></el-button>
-              <el-button size="small" :icon="Delete" circle @click="onDelMatter(scope.row)"></el-button>
-              <el-button size="small" circle @click="onMatterRename(scope.row)">改</el-button>
+            <div v-show="currentHoverRow === scope.row.uuid">
+              <span v-if="scope.row.deleted">
+                 <el-button size="small" :icon="View" circle @click="restoreMatter(scope.row)"></el-button>
+              </span>
+              <span v-else>
+                <el-button size="small" :icon="View" circle @click="onPrivateView(scope.row)"></el-button>
+                <el-button size="small" :icon="Share" circle @click="onShareMatter(scope.row)"></el-button>
+                <el-button size="small" :icon="Download" circle @click="onDownload(scope.row)"></el-button>
+                <el-button size="small" :icon="Edit" circle @click="onlyOfficeEdit(scope.row)"></el-button>
+                <el-button size="small" :icon="Delete" circle @click="onDelMatter(scope.row)"></el-button>
+                <el-button size="small" circle @click="onMatterRename(scope.row)">改</el-button>
+              </span>
             </div>
           </template>
         </el-table-column>
@@ -922,13 +972,18 @@ const handleSelectionChange = (val:matterInfo[]) => {
               <span style="margin: 5px 0;text-wrap-mode:nowrap;">{{ row.name }}</span>
             </div>
           </div>
-          <ul v-if="row.name!=''"  class="grid-menus" v-show="currentHoverRow === row.name" @mouseleave="currentHoverRow=''">
-            <li v-if="getFileIcon(row.name)!='img'" @click="onPrivateView(row)">预览</li>
-            <li @click="onShareMatter(row)">分享</li>
-            <li @click="onDownload(row)">下载</li>
-            <li @click="onlyOfficeEdit(row)">编辑</li>
-            <li @click="onDelMatter(row)">删除</li>
-            <li @click="onMatterRename(row)">重命名</li>
+          <ul v-if="row.name!=''"  class="grid-menus" v-show="currentHoverRow === row.uuid" @mouseleave="currentHoverRow=''">
+            <span v-if="row.deleted">
+              <li @click="restoreMatter(row)">恢复</li>
+            </span>
+            <span v-else>
+              <li v-if="getFileIcon(row.name)!='img'" @click="onPrivateView(row)">预览</li>
+              <li @click="onShareMatter(row)">分享</li>
+              <li @click="onDownload(row)">下载</li>
+              <li @click="onlyOfficeEdit(row)">编辑</li>
+              <li @click="onDelMatter(row)">删除</li>
+              <li @click="onMatterRename(row)">重命名</li>
+            </span>
           </ul>
         </div>
       </div>
@@ -970,7 +1025,7 @@ const handleSelectionChange = (val:matterInfo[]) => {
   display: flex;
   margin-top: 9px;
   padding: 12px 7px;
-  background-color: #e1e1e1;
+  background-color: white;
   align-items: center;
   .area_name{
     align-content: center;