up

src/api/resource/index.js

@@ -42,6 +42,14 @@ export default {
       'json'
     )
   },
+  /**
+   * 文件搜索
+   * @param params
+   * @returns {Promise<unknown>}
+   */
+  fileSearch(params) {
+    return fetch('/blade-project-manage-v2/folder/v2/findFileList', params)
+  },
   /**
    * 获取文件夹下面的文件及文件夹
    * @param params

src/views/resource/component/search.vue

@@ -0,0 +1,147 @@
+<template>
+  <div>
+    <el-icon size="26" @click="show = true">
+      <Search />
+    </el-icon>
+    <el-dialog
+      v-model="show"
+      title="文件搜索"
+      width="860"
+      :close-on-click-modal="false"
+      @close="closeDialog"
+    >
+      <div class="flex flex-center flex-col padding" style="margin-top: -20px">
+        <div class="full-width flex flex-center">
+          <el-input
+            v-model="searchForm.keyword"
+            style="width: 100%"
+            clearable
+            placeholder="输入关键字进行文件搜索"
+            @clear="clearList"
+            @keyup.enter="searchList"
+          />
+          <base-button class="ml-20" @click="searchList" />
+        </div>
+        <div v-if="resultList && resultList.length === 0">
+          <el-empty v-if="loading === false"></el-empty>
+          <el-skeleton v-else :rows="5" animated />
+        </div>
+        <div
+          v-else
+          class="full-width mt-20 flex flex-align-start flex-col hide-scrollbar"
+          style="height: 30vh; overflow-y: auto"
+        >
+          <div
+            class="flex flex-align-center border-bottom full-width"
+            v-for="item in resultList"
+            :key="item.id"
+            @click="goFoleDetail(item)"
+          >
+            <img
+              v-if="['doc', 'docx'].includes(item.suffix)"
+              src="../../../assets/svg/folder/doc.svg"
+              class="icon1"
+            />
+            <img
+              v-else-if="['png', 'jpg', 'jpeg'].includes(item.suffix)"
+              src="../../../assets/svg/folder/other.svg"
+              class="icon1"
+            />
+            <img
+              v-else-if="item.suffix === 'pdf'"
+              src="../../../assets/svg/folder/pdf.svg"
+              class="icon1"
+            />
+            <img
+              v-else-if="item.suffix === 'xlsx'"
+              src="../../../assets/svg/folder/xls.svg"
+              class="icon1"
+            />
+            <span class="bold ml-10">{{ item.title }}</span>
+          </div>
+        </div>
+        <div class="flex flex-align-start mt-15 border-top full-width">
+          <span class="grey-9 mt-15"
+            >共计查询到<span class="ml-5 mr-5 font-16 bold main-color">{{
+              total ? total : 0
+            }}</span
+            >个相关文件</span
+          >
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import baseButton from '@/components/base-button.vue'
+
+export default {
+  components: { baseButton },
+  props: {
+    search: {
+      type: Object
+    }
+  },
+  watch: {
+    search: {
+      handler(val) {
+        console.log(val.stageId)
+        if (val.id) {
+          this.searchForm.fileFolderId = val.id
+        } else {
+          this.searchForm.fileFolderId = ''
+        }
+        this.searchForm.stageId = val.stageId
+      },
+      immediate: true
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      show: false,
+      searchForm: {
+        fileFolderId: '',
+        keyword: '',
+        stageId: ''
+      },
+      resultList: [],
+      total: ''
+    }
+  },
+  methods: {
+    searchList() {
+      this.loading = true
+      setTimeout(() => {
+        this.$api.resource.fileSearch(this.searchForm).then(res => {
+          if (res.code === 200) {
+            this.loading = false
+            this.resultList = res.data
+            this.total = res.data.length
+          } else {
+            this.$message.error(res.msg)
+          }
+        })
+      }, 800)
+    },
+    clearList() {
+      this.resultList = []
+      this.total = 0
+    },
+    goFoleDetail(item) {
+      this.$router.push('/home/file_detail?fileId=' + item.id)
+    },
+    closeDialog() {
+      this.searchForm.keyword = ''
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.icon1 {
+  width: 50px;
+  height: 50px;
+}
+</style>

src/views/resource/index.vue

@@ -52,13 +52,8 @@
               :stage-id="folderInfo.stageId"
             />
           </div>
-          <div class="flex flex-center">
-            <span class="nowrap mr-10">文件搜索</span>
-            <el-input
-              v-model="folderInfo.keyword"
-              placeholder="输入文件关键字"
-              style="width: 100%"
-            />
+          <div class="flex flex-center main-color mr-10">
+            <search :search="folderInfo" />
           </div>
         </div>
         <file-way
@@ -120,6 +115,7 @@ import uploadFile from '@/components/upload-file/index.vue'
 import filepicker from '@/components/filepicker/index.vue'
 import fileWay from '@/components/file-way/index.vue'
 import authorize from '@/views/resource/component/authorize.vue'
+import search from '@/views/resource/component/search.vue'
 
 export default {
   components: {
@@ -129,7 +125,8 @@ export default {
     uploadFile,
     filepicker,
     fileWay,
-    authorize
+    authorize,
+    search
   },
 
   data() {
@@ -268,7 +265,6 @@ export default {
         .then(res => {
           if (res.code === 200) {
             this.stage = res.data
-
             const tmp = this.stage.find(ele => ele.isLastSelect === 1)
             if (tmp) {
               this.folderInfo.stageId = tmp.id