wt_project_web_bak/src/views/resource/component/search.vue

<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-loading="loading"
          class="full-width mt-20 flex flex-align-start flex-col hide-scrollbar"
          style="min-height: 30vh; overflow-y: auto"
        >
          <div class="full-width" v-if="resultList && resultList.length === 0">
            <el-empty></el-empty>
          </div>
          <div
            v-else
            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: {
    stageId: {
      type: String,
      required: true,
      default: ''
    },
    folderId: {
      type: String,
      required: true,
      default: ''
    }
  },
  watch: {
    stageId: {
      handler(val) {
        this.searchForm.stageId = val
      },
      immediate: true
    },
    folderId: {
      handler(val) {
        this.searchForm.fileFolderId = val
      },
      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) {
      const routeData = this.$router.resolve(
        '/home/file_detail?id=' + item.fileId
      )
      window.open(routeData.href, '_blank')
      this.show = false
    },
    closeDialog() {
      this.searchForm.keyword = ''
      this.resultList = []
      this.total = 0
    }
  }
}
</script>

<style lang="scss" scoped>
.icon1 {
  width: 50px;
  height: 50px;
}
</style>