feat 支持筛选框直接筛选，回车筛选

frontend/package-lock.json

@@ -1938,6 +1938,49 @@
         "webpack-merge": "^5.7.3",
         "webpack-virtual-modules": "^0.4.2",
         "whatwg-fetch": "^3.6.2"
+      },
+      "dependencies": {
+        "@vue/vue-loader-v15": {
+          "version": "npm:vue-loader@15.10.0",
+          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.10.0.tgz",
+          "integrity": "sha512-VU6tuO8eKajrFeBzMssFUP9SvakEeeSi1BxdTH5o3+1yUyrldp8IERkSdXlMI2t4kxF2sqYUDsQY+WJBxzBmZg==",
+          "dev": true,
+          "requires": {
+            "@vue/component-compiler-utils": "^3.1.0",
+            "hash-sum": "^1.0.2",
+            "loader-utils": "^1.1.0",
+            "vue-hot-reload-api": "^2.3.0",
+            "vue-style-loader": "^4.1.0"
+          },
+          "dependencies": {
+            "hash-sum": {
+              "version": "1.0.2",
+              "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz",
+              "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
+              "dev": true
+            }
+          }
+        },
+        "json5": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
+          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        },
+        "loader-utils": {
+          "version": "1.4.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
+          "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^1.0.1"
+          }
+        }
       }
     },
     "@vue/cli-shared-utils": {
@@ -2176,47 +2219,6 @@
       "resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.2.37.tgz",
       "integrity": "sha512-4rSJemR2NQIo9Klm1vabqWjD8rs/ZaJSzMxkMNeJS6lHiUjjUeYFbooN19NgFjztubEKh3WlZUeOLVdbbUWHsw=="
     },
-    "@vue/vue-loader-v15": {
-      "version": "npm:vue-loader@15.10.0",
-      "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-15.10.0.tgz",
-      "integrity": "sha512-VU6tuO8eKajrFeBzMssFUP9SvakEeeSi1BxdTH5o3+1yUyrldp8IERkSdXlMI2t4kxF2sqYUDsQY+WJBxzBmZg==",
-      "dev": true,
-      "requires": {
-        "@vue/component-compiler-utils": "^3.1.0",
-        "hash-sum": "^1.0.2",
-        "loader-utils": "^1.1.0",
-        "vue-hot-reload-api": "^2.3.0",
-        "vue-style-loader": "^4.1.0"
-      },
-      "dependencies": {
-        "hash-sum": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmmirror.com/hash-sum/-/hash-sum-1.0.2.tgz",
-          "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
-          "dev": true
-        },
-        "json5": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmmirror.com/json5/-/json5-1.0.1.tgz",
-          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
-          "dev": true,
-          "requires": {
-            "minimist": "^1.2.0"
-          }
-        },
-        "loader-utils": {
-          "version": "1.4.0",
-          "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-1.4.0.tgz",
-          "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
-          "dev": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^1.0.1"
-          }
-        }
-      }
-    },
     "@vue/web-component-wrapper": {
       "version": "1.3.0",
       "resolved": "https://registry.npmmirror.com/@vue/web-component-wrapper/-/web-component-wrapper-1.3.0.tgz",

frontend/src/App.vue

@@ -13,13 +13,13 @@
       </Row>
       <Row style="margin-top: 5px;margin-bottom: 5px;padding-left: 20px;padding-right: 20px;height: 40px;">
         <Col span="10" style="padding-right: 10px;">
-        <Input v-model="filterName" placeholder="输入文件名包含的字符"><template #prepend>
+        <Input v-model="filterName" placeholder="输入文件名包含的字符" search @on-search="doFilter" @on-change="onFilter"><template #prepend>
           <span>文件名包含:</span>
         </template>
         </Input>
         </Col>
         <Col span="10" style="padding-right: 10px;">
-        <Input v-model="filterSize" placeholder="">
+        <Input v-model="filterSize" placeholder="" search @on-search="doFilter" @on-change="onFilter">
         <template #prepend>
           <span>文件大于:</span>
         </template>
@@ -92,6 +92,7 @@ export default {
       limit: 100,
       offset: 0,
       scrollHeight: 800,
+      cachedDocs:[],
     }
   },
   methods: {
@@ -106,6 +107,13 @@ export default {
               this.docs.push(doc)
             });
           }
+           if (this.cachedDocs.length == 0) {
+            this.cachedDocs = res.data
+          } else {
+            res.data.forEach(doc => {
+              this.cachedDocs.push(doc)
+            });
+          }
         }
       })
     },
@@ -146,8 +154,24 @@ export default {
     },
     doFilter: function () {
       this.docs = []
+      this.cachedDocs = []
       this.getDocs()
     },
+    onFilter: function(){
+      // if(this.filterName=="" && this.filterSize == 0){
+      //   return
+      // }
+      let docs = [];
+      console.info("===================", this.cachedDocs)
+      for(let i in this.cachedDocs){
+        let doc = this.cachedDocs[i]
+        console.info(doc, doc.name.search(this.filterName))
+        if ((this.filterName==""|| doc.name.search(this.filterName) > -1) && doc.size >= this.filterSize * 1024 *1024){
+          docs.push(doc)
+        }
+      }
+      this.docs = docs
+    },
     handleReachTop: function () {
       console.info("123")
       this.offset = this.offset + this.limit;