From f47880ce6cda45c2ec746b67f1ad23149543f8e9 Mon Sep 17 00:00:00 2001
From: revive <1664535558@qq.com>
Date: Tue, 26 Jan 2021 15:46:44 +0800
Subject: [PATCH] commit

---
 public/static/css/main.css                    |   8 ++
 src/components/app-header/app-header.vue      |  10 +-
 src/components/search-bar/search-bar.vue      |   1 +
 src/views/main_web/index/index.vue            |  12 +-
 src/views/main_web/workspace/recyclebin.vue   | 104 +++++++++++++++---
 .../main_web/workspace/workspace.new.vue      |   2 +
 src/views/main_web/workspace/workspace.vue    |   2 +
 7 files changed, 110 insertions(+), 29 deletions(-)

diff --git a/public/static/css/main.css b/public/static/css/main.css
index 65159e6a..1292e19f 100644
--- a/public/static/css/main.css
+++ b/public/static/css/main.css
@@ -6526,6 +6526,14 @@ h4.biaoqianweizhi2{
 	-webkit-line-clamp: 1;
 	overflow: hidden;
 }
+.main-title {
+	text-align: center;
+	color: rgba(50, 50, 60, 100);
+	font-size: 18px;
+	text-shadow: 0 0 1px #32323c;
+	text-align: center;
+	font-family: PingFangSC-Semibold;
+  }
 .deletIocn{
 	font-size: 30px;
 }
diff --git a/src/components/app-header/app-header.vue b/src/components/app-header/app-header.vue
index 92badc98..49f4133b 100644
--- a/src/components/app-header/app-header.vue
+++ b/src/components/app-header/app-header.vue
@@ -46,12 +46,12 @@
       </div>
       <div class="app-header-content-right no-drag">
         <slot name="right"></slot>
-          <!-- <span @click="toRecycle" v-if="showUserCenter">
+          <span @click="toRecycle" v-if="showRecycleBin">
             <i
               class="Cicon icon font_family icon-icon_huishouzhan"
               :class="{inRecycle:isInRecycle}"
             />
-          </span> -->
+          </span>
         <user-center v-if="showUserCenter" />
       </div>
     </div>
@@ -78,6 +78,7 @@ export default {
     title: String,
     // 右侧
     showUserCenter: Boolean,
+    showRecycleBin:Boolean,
     isInRecycle: Boolean,
     // 是否显示左边的状态
     isShowLeftState: {
@@ -267,9 +268,10 @@ export default {
     &-right {
       display: flex;
       align-items: center;
-      > span, > div {
-        margin-left: 8px;
+      > span, >div {
+        margin-left: 12px;
       }
+
     }
     &-left {
       line-height: 40px;
diff --git a/src/components/search-bar/search-bar.vue b/src/components/search-bar/search-bar.vue
index bbb9bfee..80395286 100644
--- a/src/components/search-bar/search-bar.vue
+++ b/src/components/search-bar/search-bar.vue
@@ -138,4 +138,5 @@
     width: 235px;
   }
 
+
 </style>
\ No newline at end of file
diff --git a/src/views/main_web/index/index.vue b/src/views/main_web/index/index.vue
index 0cc31036..73ec05a2 100644
--- a/src/views/main_web/index/index.vue
+++ b/src/views/main_web/index/index.vue
@@ -19,6 +19,7 @@
   <div id="app" v-cloak>
     <app-header 
                 :showUserCenter="true" id="proj-list-page"
+                showRecycleBin
     >
       <template #left>
         {{currentPlatform.orgName}}
@@ -290,6 +291,7 @@ export default {
   },
   mounted: function () {
     this.cnName = JSON.parse(sessionStorage.user).userName;
+    sessionStorage.setItem('pageTitle','我的项目')
     //this.setDateTime();
     //setInterval(this.setDateTime, 1000);
     this.listProjects(true);
@@ -394,6 +396,7 @@ export default {
       sessionStorage.removeItem('projId');
       sessionStorage.setItem('projName', projItem.ProjName);
       sessionStorage.setItem('projId', projItem.Id);
+      
     },
     /**
      * 进入回收站
@@ -755,14 +758,7 @@ export default {
   line-height: inherit;
 }
 
-.main-title {
-  text-align: center;
-  color: rgba(50, 50, 60, 100);
-  font-size: 18px;
-  text-shadow: 0 0 1px #32323c;
-  text-align: center;
-  font-family: PingFangSC-Semibold;
-}
+
 </style>
 
 <style lang="scss">
diff --git a/src/views/main_web/workspace/recyclebin.vue b/src/views/main_web/workspace/recyclebin.vue
index 9185d1d0..b29dd69b 100644
--- a/src/views/main_web/workspace/recyclebin.vue
+++ b/src/views/main_web/workspace/recyclebin.vue
@@ -3,35 +3,52 @@
         <app-header
         theme="basis"
         showBackBtn
-        backBtnTitle="返回上一界面"
-        title="回收站"
+        :backBtnTitle="title"
         showUserCenter
         isInRecycle
+        showRecycleBin
         >
+        <template #center>
+            <div class="main-title">{{showTitle}}</div>
+        </template>
+        <template #right>
+            <search-bar class="proj-search-bar"
+                placeholder="请输入要搜索的文件"
+                @changeSearchContent="changeSearchContent"
+                @hideSearchBar="hideSearchBar"
+                @goToSearch="searchForFile"
+                @showSearchBar="showSearchBar"
+                @maxTextLengthArrived="maxTextLengthArrived"/>
+        </template>
         </app-header>
-        <div class="clearfile_box">
+        <!-- <div class="clearfile_box">
             <div class="clearfile_content">
                 清空
             </div>
-        </div>
-        <div class="recycle_content">
-            <recycle-file
-            v-for="file in fileList"
-            :key="file.id"
-            :file="file"
-            @recycleFile="isRecycle"
-            >
-            </recycle-file>
-        </div>
+        </div> -->
+
+                <div class="recycle_content">
+                    <transition-group name="file-fade" tag="p">
+                        <recycle-file
+                        v-for="file in fileList"
+                        :key="file.id"
+                        :file="file"
+                        @recycleFile="isRecycle"
+                        >
+                        </recycle-file>
+                    </transition-group>
+                </div>
+
 
     </div> 
 </template>
 <script>
 import AppHeader from '../../../components/app-header/app-header.vue';
-import recycleFile from './components/recycle-file.vue'
-import {queryFilesFromRecycleBin, removeFromRecycleBin} from './service'
+import recycleFile from './components/recycle-file.vue';
+import {queryFilesFromRecycleBin, removeFromRecycleBin} from './service';
+import SearchBar from "@/components/search-bar/search-bar";
 export default {
-  components: { recycleFile, AppHeader },
+  components: { recycleFile, AppHeader, SearchBar },
     created(){
         this.getRecycleFiles();
     },
@@ -41,18 +58,56 @@ export default {
     data(){
         return{
             fileList:[],
+            searchFileList:[],
+            title:'返回'+sessionStorage.pageTitle,
+            isShowSearchBar: false,//控制搜索框显示隐藏
+            searchContent: '',//搜索的文件名称
         }
     },
     methods:{
         async getRecycleFiles(){
             const res = await queryFilesFromRecycleBin();
             this.fileList = res;
+            this.searchFileList = res;
         },
         isRecycle(flag){
             if(flag){
                 this.getRecycleFiles();
             }
-        }
+        },
+        changeSearchContent(content) {
+            this.searchContent = content;
+            this.searchForFile();
+        },
+        hideSearchBar() {
+            this.isShowSearchBar = false;
+            this.searchContent = '';
+        },
+        showSearchBar() {
+            this.isShowSearchBar = true;
+        },
+        // 搜索框字数超出35个字
+        maxTextLengthArrived() {
+        this.$notify({
+            message: '请输入35个字之内的搜索内容',
+            type: ["warning"],
+        })
+        },
+        searchForFile() {
+            let _fileList = this.searchFileList;
+
+            _fileList = _fileList.filter(f =>{
+                const matchArray = f.archName.match(new RegExp(this.searchContent, 'gi'));
+                return !!matchArray;
+            });
+            this.fileList = _fileList;
+        },
+        // 搜索文件时 中间导航栏的标题
+    },
+    computed: {
+        showTitle() {
+         return this.isShowSearchBar && this.searchContent ? `“${this.searchContent}”搜索结果` : '回收站';
+        },
     }
 
 }
@@ -73,5 +128,20 @@ export default {
     margin-bottom: 13px;
     cursor: pointer;
 }
+.file-fade-enter {
+  opacity: 0.1;
+}
+.file-fade-enter-active {
+  opacity: 1;
+  transition: all 0.3s ease-in;
+}
+
+.file-fade-leave {
+  opacity: 1;
+}
+.file-fade-leave-active {
+  opacity: 0.1;
+  transition: all 0.3s ease-in;
+}
 
 </style>
\ No newline at end of file
diff --git a/src/views/main_web/workspace/workspace.new.vue b/src/views/main_web/workspace/workspace.new.vue
index 4c210b54..3e8af46e 100644
--- a/src/views/main_web/workspace/workspace.new.vue
+++ b/src/views/main_web/workspace/workspace.new.vue
@@ -7,6 +7,7 @@
       :showUserCenter="true"
       class="app-header-style workspace-header"
       v-if="!showWorkline"
+      showRecycleBin
     >
       <template #center>
         <!-- 工作链 -->
@@ -641,6 +642,7 @@ export default {
     };
   },
   mounted: function () {
+    sessionStorage.pageTitle = '工作空间';
     this.hackWorkLine = this.$refs.hackworkline;
     window.addEventListener("scroll", this.onscroll, true);
 
diff --git a/src/views/main_web/workspace/workspace.vue b/src/views/main_web/workspace/workspace.vue
index b28d1d49..575cdf35 100644
--- a/src/views/main_web/workspace/workspace.vue
+++ b/src/views/main_web/workspace/workspace.vue
@@ -14,6 +14,7 @@
       :showUserCenter="true"
       class="app-header-style"
       v-if="!isShowworklink"
+      showRecycleBin
     >
     </app-header>
     <app-header
@@ -2919,6 +2920,7 @@ export default {
     this.myComFileBreadNodeData = [initialTempFile('myComFile', '公共文件')];
   },
   mounted: function () {
+    sessionStorage.pageTitle = '工作空间';
     window["refreshFiles"] = () => {
       this.refreshPages();
     };