【我的素材】各页面自动相应搜索框输入来刷新素材列表

src/views/material/audio/index.vue

@@ -41,14 +41,10 @@
       </div>
       <div class="filter">
         <div>
-          <i
-            @click="refreshList"
-            class="iconfont icon-works_search search"
-          ></i>
+          <i class="iconfont icon-works_search search" ></i>
           <input
             type="text"
             v-model="searchKey"
-            @keyup.enter="refreshList"
             placeholder="搜索文件夹或素材"
           />
           <i v-if="searchKey" @click="searchKey=''" class="iconfont icontoast_red del"></i>
@@ -107,11 +103,11 @@
         </div>
       </tableList>
       <div class="total-number" v-if="list.length !== 0 || hasMoreData">已加载{{list.length}}条</div>
-      <div class="nodata" v-if="list.length == 0 && !hasMoreData && searchKey">
+      <div class="nodata" v-if="list.length == 0 && !hasMoreData && lastestUsedSearchKey">
         <img :src="$noresult" alt="" />
         <span>未搜索到结果</span>
       </div>
-      <div class="nodata" v-if="list.length == 0 && !hasMoreData && !searchKey">
+      <div class="nodata" v-if="list.length == 0 && !hasMoreData && !lastestUsedSearchKey">
         <img :src="config.empty" alt="" />
         <span>暂无素材~</span>
         <button @click="$refs.uploadFile.click()" class="upload-btn-in-table">上传素材</button>
@@ -135,10 +131,10 @@ import crumbs from "@/components/crumbs";
 import { data } from "./audio";
 import rename from "../popup/rename";
 import vAudio from "@/components/audio";
-
 import Upload from "@/components/shared/uploads/UploadMultiple";
 import { changeByteUnit } from "@/utils/file";
 import UploadList from "../components/uploadList";
+import { debounce } from "@/utils/other.js"
 
 import {
   getMaterialList,
@@ -166,7 +162,11 @@ export default {
       popupItem: null,
       tabHeader: data,
       selectedArr: [],
+      
       searchKey: "",
+      // 因为searchKey的变化经过debounce、异步请求的延时，才会反映到数据列表的变化上，所以是否显示、显示哪种无数据提示，也要等到数据列表变化后，根据数据列表是否为空，以及引发本次变化的那个searchKey瞬时值来决定。本变量就是用来保存那个瞬时值。
+      lastestUsedSearchKey: '',
+      
       tablist: [
         {
           name: "音频",
@@ -182,8 +182,20 @@ export default {
   mounted() {
   },
   watch: {
+    searchKey: {
+      handler: function () {
+        this.refreshListDebounced()
+      },
+      immediate: false,
+    },
   },
   methods: {
+    refreshListDebounced: debounce(function() {
+      this.list = []
+      this.isRequestingMoreData = false
+      this.hasMoreData = true
+      this.$refs['table-list'].requestMoreData()
+    }, 700, false),
     stopAllAudio() {
       Array.from($("audio")).forEach((item) => {
         if (!item.paused) {
@@ -222,6 +234,7 @@ export default {
           delMaterial(item.id, () => {
             this.$msg.success("删除成功");
             this.isRequestingMoreData = true
+            const lastestUsedSearchKey = this.searchKey
             getMaterialList(
               {
                 pageNum: this.list.length + 1,
@@ -249,9 +262,11 @@ export default {
                 }
 
                 this.isRequestingMoreData = false
+                this.lastestUsedSearchKey = lastestUsedSearchKey
               },
               () => {
                 this.isRequestingMoreData = false
+                this.lastestUsedSearchKey = lastestUsedSearchKey
               }
             )
           });
@@ -351,16 +366,9 @@ export default {
           });
       });
     },
-    refreshList() {
-      console.log('refresh');
-      this.list = []
-      this.isRequestingMoreData = false
-      this.hasMoreData = true
-      console.log(this.$refs);
-      this.$refs['test'].requestMoreData()
-    },
     getMoreMaterialItem() {
       this.isRequestingMoreData = true
+      const lastestUsedSearchKey = this.searchKey
       getMaterialList(
         {
           pageNum: Math.floor(this.list.length / config.PAGE_SIZE) + 1,
@@ -378,9 +386,11 @@ export default {
             this.hasMoreData = false
           }
           this.isRequestingMoreData = false
+          this.lastestUsedSearchKey = lastestUsedSearchKey
         },
         () => {
           this.isRequestingMoreData = false
+          this.lastestUsedSearchKey = lastestUsedSearchKey
         }
       );
     },

src/views/material/image/index.vue

@@ -40,14 +40,10 @@
       </div>
       <div class="filter">
         <div>
-          <i
-            @click="refreshList"
-            class="iconfont icon-works_search search"
-          ></i>
+          <i class="iconfont icon-works_search search" ></i>
           <input
             type="text"
             v-model="searchKey"
-            @keyup.enter="refreshList"
             placeholder="搜索文件夹或素材"
           />
           <i v-if="searchKey" @click="searchKey=''" class="iconfont icontoast_red del"></i>
@@ -106,11 +102,11 @@
         </div>
       </tableList>
       <div class="total-number" v-if="list.length !== 0 || hasMoreData">已加载{{list.length}}条</div>
-      <div class="nodata" v-if="list.length == 0 && !hasMoreData && searchKey">
+      <div class="nodata" v-if="list.length == 0 && !hasMoreData && lastestUsedSearchKey">
         <img :src="$noresult" alt="" />
         <span>未搜索到结果</span>
       </div>
-      <div class="nodata" v-if="list.length == 0 && !hasMoreData && !searchKey">
+      <div class="nodata" v-if="list.length == 0 && !hasMoreData && !lastestUsedSearchKey">
         <img :src="config.empty" alt="" />
         <span>暂无素材~</span>
         <button @click="$refs.uploadFile.click()" class="upload-btn-in-table">上传素材</button>
@@ -138,10 +134,10 @@ import crumbs from "@/components/crumbs";
 import { data } from "./image";
 import rename from "../popup/rename";
 import UploadList from "../components/uploadList";
-
 import Upload from "@/components/shared/uploads/UploadMultiple";
 import { changeByteUnit } from "@/utils/file";
 import preview from "../popup/preview";
+import { debounce } from "@/utils/other.js"
 
 import {
   getMaterialList,
@@ -170,6 +166,9 @@ export default {
       popupItem: null,
       tabHeader: data,
       selectedArr: [],
+      // 因为searchKey的变化经过debounce、异步请求的延时，才会反映到数据列表的变化上，所以是否显示、显示哪种无数据提示，也要等到数据列表变化后，根据数据列表是否为空，以及引发本次变化的那个searchKey瞬时值来决定。本变量就是用来保存那个瞬时值。
+      lastestUsedSearchKey: '',
+
       searchKey: "",
       tablist: [
         {
@@ -186,8 +185,20 @@ export default {
   mounted() {
   },
   watch: {
+    searchKey: {
+      handler: function () {
+        this.refreshListDebounced()
+      },
+      immediate: false,
+    },
   },
   methods: {
+    refreshListDebounced: debounce(function() {
+      this.list = []
+      this.isRequestingMoreData = false
+      this.hasMoreData = true
+      this.$refs['table-list'].requestMoreData()
+    }, 700, false),
     viewImg(id) {
       const viewer = this.$el.querySelector("#" + id).$viewer;
       viewer.show();
@@ -223,6 +234,7 @@ export default {
           delMaterial(item.id, () => {
             this.$msg.success("删除成功");
             this.isRequestingMoreData = true
+            const lastestUsedSearchKey = this.searchKey
             getMaterialList(
               {
                 pageNum: this.list.length + 1,
@@ -250,9 +262,11 @@ export default {
                 }
 
                 this.isRequestingMoreData = false
+                this.lastestUsedSearchKey = lastestUsedSearchKey
               },
               () => {
                 this.isRequestingMoreData = false
+                this.lastestUsedSearchKey = lastestUsedSearchKey
               }
             )
           });
@@ -347,15 +361,9 @@ export default {
           });
       });
     },
-    refreshList() {
-      console.log('refresh');
-      this.list = []
-      this.isRequestingMoreData = false
-      this.hasMoreData = true
-      this.$refs['table-list'].requestMoreData()
-    },
     getMoreMaterialItem() {
       this.isRequestingMoreData = true
+      const lastestUsedSearchKey = this.searchKey
       getMaterialList(
         {
           pageNum: Math.floor(this.list.length / config.PAGE_SIZE) + 1,
@@ -373,9 +381,11 @@ export default {
             this.hasMoreData = false
           }
           this.isRequestingMoreData = false
+          this.lastestUsedSearchKey = lastestUsedSearchKey
         },
         () => {
           this.isRequestingMoreData = false
+          this.lastestUsedSearchKey = lastestUsedSearchKey
         }
       );
     },

src/views/material/pano/index.vue

@@ -40,14 +40,10 @@
       </div>
       <div class="filter">
         <div>
-          <i
-            @click="refreshList"
-            class="iconfont icon-works_search search"
-          ></i>
+          <i class="iconfont icon-works_search search"></i>
           <input
             type="text"
             v-model="searchKey"
-            @keyup.enter="refreshList"
             placeholder="搜索文件夹或素材"
           />
           <i v-if="searchKey" @click="searchKey=''" class="iconfont icontoast_red del"></i>
@@ -122,11 +118,11 @@
         </div>
       </tableList>
       <div class="total-number" v-if="list.length !== 0 || hasMoreData">已加载{{list.length}}条</div>
-      <div class="nodata" v-if="list.length == 0 && !hasMoreData && searchKey">
+      <div class="nodata" v-if="list.length == 0 && !hasMoreData && lastestUsedSearchKey">
         <img :src="$noresult" alt="" />
         <span>未搜索到结果</span>
       </div>
-      <div class="nodata" v-if="list.length == 0 && !hasMoreData && !searchKey">
+      <div class="nodata" v-if="list.length == 0 && !hasMoreData && !lastestUsedSearchKey">
         <img :src="config.empty" alt="" />
         <span>暂无素材~</span>
         <button @click="$refs.uploadFile.click()" class="upload-btn-in-table">上传素材</button>
@@ -167,8 +163,8 @@ import cover from "../popup/cover";
 import Upload from "@/components/shared/uploads/UploadMultiple";
 import { getImgWH, changeByteUnit } from "@/utils/file";
 import UploadList from "../components/uploadList";
-
 import uploadui from "../components/uploadui";
+import { debounce } from "@/utils/other.js"
 
 import {
   getMaterialList,
@@ -207,7 +203,11 @@ export default {
       popupItem: null,
       tabHeader: data,
       selectedArr: [],
+      
       searchKey: "",
+      // 因为searchKey的变化经过debounce、异步请求的延时，才会反映到数据列表的变化上，所以是否显示、显示哪种无数据提示，也要等到数据列表变化后，根据数据列表是否为空，以及引发本次变化的那个searchKey瞬时值来决定。本变量就是用来保存那个瞬时值。
+      lastestUsedSearchKey: '',
+
       tablist: [
         {
           name: "全景图片",
@@ -233,8 +233,20 @@ export default {
         }
       },
     },
+    searchKey: {
+      handler: function () {
+        this.refreshListDebounced()
+      },
+      immediate: false,
+    },
   },
   methods: {
+    refreshListDebounced: debounce(function() {
+      this.list = []
+      this.isRequestingMoreData = false
+      this.hasMoreData = true
+      this.$refs['table-list'].requestMoreData()
+    }, 700, false),
     clearinter() {
       this.interval && clearInterval(this.interval);
       this.interval = null;
@@ -287,6 +299,7 @@ export default {
               })
               if (index >= 0) {
                 this.isRequestingMoreData = true
+                const lastestUsedSearchKey = this.searchKey
                 getMaterialList(
                   {
                     pageNum: index + 1,
@@ -302,9 +315,11 @@ export default {
                     this.showCover = false;
                     this.popupItem = "";
                     this.isRequestingMoreData = false
+                    this.lastestUsedSearchKey = lastestUsedSearchKey
                   },
                   () => {
                     this.isRequestingMoreData = false
+                    this.lastestUsedSearchKey = lastestUsedSearchKey
                     this.showCover = false;
                     this.popupItem = "";
                   }
@@ -359,6 +374,7 @@ export default {
           delMaterial(item.id, () => {
             this.$msg.success("删除成功");
             this.isRequestingMoreData = true
+            const lastestUsedSearchKey = this.searchKey
             getMaterialList(
               {
                 pageNum: this.list.length + 1,
@@ -386,9 +402,11 @@ export default {
                 }
 
                 this.isRequestingMoreData = false
+                this.lastestUsedSearchKey = lastestUsedSearchKey
               },
               () => {
                 this.isRequestingMoreData = false
+                this.lastestUsedSearchKey = lastestUsedSearchKey
               }
             )
           });
@@ -494,15 +512,9 @@ export default {
           });
       });
     },
-    refreshList() {
-      console.log('refresh');
-      this.list = []
-      this.isRequestingMoreData = false
-      this.hasMoreData = true
-      this.$refs['table-list'].requestMoreData()
-    },
     getMoreMaterialItem(islongpolling = null) {
       this.isRequestingMoreData = true
+      const lastestUsedSearchKey = this.searchKey
       getMaterialList(
         {
           pageNum: Math.floor(this.list.length / config.PAGE_SIZE) + 1,
@@ -521,9 +533,11 @@ export default {
             this.hasMoreData = false
           }
           this.isRequestingMoreData = false
+          this.lastestUsedSearchKey = lastestUsedSearchKey
         },
         () => {
           this.isRequestingMoreData = false
+          this.lastestUsedSearchKey = lastestUsedSearchKey
         }
       );
     },

src/views/material/video/index.vue

@@ -40,14 +40,10 @@
       </div>
       <div class="filter">
           <div>
-            <i
-              @click="refreshList"
-              class="iconfont icon-works_search search"
-            ></i>
+            <i class="iconfont icon-works_search search"></i>
             <input
               type="text"
               v-model="searchKey"
-              @keyup.enter="refreshList"
               placeholder="搜索文件或素材"
             />
             <i v-if="searchKey" @click="searchKey=''" class="iconfont icontoast_red del"></i>
@@ -68,6 +64,7 @@
         :selection="false"
         :data="list"
         class="table-list"
+        ref="table-list"
       >
         <div slot-scope="{ data }" slot="header">
           {{ data.name }}
@@ -106,11 +103,11 @@
         </div>
       </tableList>
       <div class="total-number" v-if="list.length !== 0 || hasMoreData">已加载{{list.length}}条</div>
-      <div class="nodata" v-if="list.length == 0 && !hasMoreData && searchKey">
+      <div class="nodata" v-if="list.length == 0 && !hasMoreData && lastestUsedSearchKey">
         <img :src="$noresult" alt="" />
         <span>未搜索到结果</span>
       </div>
-      <div class="nodata" v-if="list.length == 0 && !hasMoreData && !searchKey">
+      <div class="nodata" v-if="list.length == 0 && !hasMoreData && !lastestUsedSearchKey">
         <img :src="config.empty" alt="" />
         <span>暂无素材~</span>
         <button @click="$refs.uploadFile.click()" class="upload-btn-in-table">上传素材</button>
@@ -141,6 +138,7 @@ import Upload from "@/components/shared/uploads/UploadMultiple";
 import { changeByteUnit } from "@/utils/file";
 import preview from "../popup/preview";
 import UploadList from "../components/uploadList";
+import { debounce } from "@/utils/other.js"
 
 import {
   getMaterialList,
@@ -169,7 +167,11 @@ export default {
       popupItem: null,
       tabHeader: data,
       selectedArr: [],
+
       searchKey: "",
+      // 因为searchKey的变化经过debounce、异步请求的延时，才会反映到数据列表的变化上，所以是否显示、显示哪种无数据提示，也要等到数据列表变化后，根据数据列表是否为空，以及引发本次变化的那个searchKey瞬时值来决定。本变量就是用来保存那个瞬时值。
+      lastestUsedSearchKey: '',
+
       tablist: [
         {
           name: "视频",
@@ -185,8 +187,20 @@ export default {
   mounted() {
   },
   watch: {
+    searchKey: {
+      handler: function () {
+        this.refreshListDebounced()
+      },
+      immediate: false,
+    },
   },
   methods: {
+    refreshListDebounced: debounce(function() {
+      this.list = []
+      this.isRequestingMoreData = false
+      this.hasMoreData = true
+      this.$refs['table-list'].requestMoreData()
+    }, 700, false),
     handleRename(newName) {
       editMaterial(
         {
@@ -218,6 +232,7 @@ export default {
           delMaterial(item.id, () => {
             this.$msg.success("删除成功");
             this.isRequestingMoreData = true
+            const lastestUsedSearchKey = this.searchKey
             getMaterialList(
               {
                 pageNum: this.list.length + 1,
@@ -245,8 +260,10 @@ export default {
                 }
 
                 this.isRequestingMoreData = false
+                this.lastestUsedSearchKey = lastestUsedSearchKey
               },
               () => {
+                this.lastestUsedSearchKey = lastestUsedSearchKey
                 this.isRequestingMoreData = false
               }
             )
@@ -341,14 +358,9 @@ export default {
           });
       });
     },
-    refreshList() {
-      this.list = []
-      this.isRequestingMoreData = false
-      this.hasMoreData = true
-      this.$refs['table-list'].requestMoreData()
-    },
     getMoreMaterialItem() {
       this.isRequestingMoreData = true
+      const lastestUsedSearchKey = this.searchKey
       getMaterialList(
         {
           pageNum: Math.floor(this.list.length / config.PAGE_SIZE) + 1,
@@ -366,9 +378,11 @@ export default {
             this.hasMoreData = false
           }
           this.isRequestingMoreData = false
+          this.lastestUsedSearchKey = lastestUsedSearchKey
         },
         () => {
           this.isRequestingMoreData = false
+          this.lastestUsedSearchKey = lastestUsedSearchKey
         }
       );
     },

src/views/material/works/index.vue

@@ -100,13 +100,16 @@ export default {
   data(){
     return {
       config,
+      
       list:[],
       workTotalNum: undefined,
       hasMoreData: true,
       isRequestingMoreData: false,
+      
       searchKey:'',
       // 因为searchKey的变化经过debounce、异步请求的延时，才会反映到数据列表的变化上，所以是否显示、显示哪种无数据提示，也要等到数据列表变化后，根据数据列表是否为空，以及引发本次变化的那个searchKey瞬时值来决定。本变量就是用来保存那个瞬时值。
       lastestUsedSearchKey: '',
+      
       showShare:false,
       showPreview:false,
       showItem:'',
@@ -128,7 +131,6 @@ export default {
   },
   methods:{
     refreshListDebounced: debounce(function() {
-      console.log('refresh');
       this.list = []
       this.isRequestingMoreData = false
       this.hasMoreData = true
@@ -228,8 +230,8 @@ export default {
           })
         },
         () => {
-          this.lastestUsedSearchKey = lastestUsedSearchKey
           this.isRequestingMoreData = false
+          this.lastestUsedSearchKey = lastestUsedSearchKey
         }
       );
     },