wt_project_web_bak/src/layout/search/index.vue

<template>
  <div>
    <el-dialog
      v-model="show"
      append-to-body
      width="1200px"
      :close-on-click-modal="false"
      @close="close"
      @closed="closed"
    >
      <div class="content">
        <div class="search flex flex-center">
          <div class="icon flex flex-center main-bg-color">
            <el-icon size="30px">
              <Search />
            </el-icon>
          </div>
          <el-input
            v-model="keyword"
            placeholder="搜索"
            @keyup.enter="search"
          ></el-input>
          <el-button type="primary" class="ml-20" @click="search"
            >搜 索</el-button
          >
        </div>
        <div class="mt-20 padding">
          <span class="bold font-16">文档（{{ count }}）</span>
          <div class="flex mt-20">
            <div
              v-if="list.length > 0"
              class="flex flex-align-start flex-justify-between full-width"
            >
              <div class="full-width mt-10 list">
                <div v-for="(i, index) in list" :key="i">
                  <div
                    class="padding border-bottom pointer"
                    @click="changeDoc(i, index)"
                  >
                    <div :class="fileIndex === index ? 'bold' : ''">
                      {{ i.fileName }}
                    </div>
                  </div>
                </div>
              </div>
              <div>
                <div
                  class="full-height full-width preview flex flex-center pointer"
                  v-if="current"
                  @click="showImage = true"
                >
                  <el-tooltip placement="right">
                    <template #content>
                      <div
                        style="width: 200px"
                        v-html="current.contents[pageIndex].content"
                      ></div>
                    </template>
                    <img
                      class="img"
                      :src="current.contents[pageIndex].imagePath"
                      alt="img"
                    />
                  </el-tooltip>
                </div>
                <div class="flex flex-center flex-justify-between padding">
                  <div>
                    <el-button
                      type="primary"
                      icon="ArrowLeftBold"
                      circle
                      @click="pageChange(1)"
                    />
                    <el-button
                      type="primary"
                      icon="ArrowRightBold"
                      circle
                      @click="pageChange(2)"
                    />
                  </div>
                  <el-button type="primary" @click="goDoc">查看</el-button>
                </div>
                <div
                  class="full-width flex flex-justify-start flex-col"
                  style="width: 360px"
                >
                  <span class="lines-1"
                    >名称：{{ current.contents[pageIndex].fileName }}</span
                  >
                  <span class="lines-1"
                    >所属项目：{{ current.projectName }}</span
                  >
                  <span class="lines-1"
                    >所属文件夹：{{ current.stageName }}</span
                  >
                </div>
              </div>
            </div>
            <div v-else class="full-width full-height">
              <el-empty
                :description="
                  loading ? '请稍后，加载中' : '请输入关键词进行搜索'
                "
              >
              </el-empty>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
    <el-image-viewer
      v-if="showImage"
      :url-list="imgList"
      @close="showImage = false"
      :initial-index="pageIndex"
    />
  </div>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      keyword: '',
      showImage: false,
      imgList: [],
      page: { current: 1, size: 10 },
      list: [],
      current: null,
      count: '',
      loading: '333',
      fileIndex: 0,
      pageIndex: 0,
      pageList: []
    }
  },
  methods: {
    search() {
      if (this.keyword.length === 0) {
        return
      }
      this.loading = true
      const data = Object.assign(this.page, { keyword: this.keyword })
      this.$api.search.searchList(data).then(res => {
        this.loading = false
        if (res.code === 200) {
          this.list = res.data.records
          this.count = res.data.total
          if (this.list.length > 0) {
            this.current = this.list[0]
            this.fetchData()
          } else {
            this.$message.error('暂无数据')
          }
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    /**
     * 对数据进行初始化
     */
    fetchData() {
      this.current.contents.map(sub => {
        sub.content = sub.content.replace(
          this.keyword,
          `<span
                          style="color: red"
                          >` +
            this.keyword +
            `</span
                        >`
        )
        return sub
      })
      this.pageList = this.current.contents.map(sub => sub.currentPage)
      this.imgList = this.current.contents.map(sub => sub.imagePath)
    },
    closed() {
      this.keyword = ''
      this.$emit('close', false)
    },
    /**
     * type 1 前一页 后一页
     */
    pageChange(type) {
      console.log(type)
      if (type === 1) {
        if (this.pageIndex === 0) {
          return
        }
        this.pageIndex = this.pageIndex - 1
      } else {
        if (this.pageIndex < this.pageList.length) {
          this.pageIndex = this.pageIndex + 1
        }
      }
    },
    /**
     * 查看文档
     * */
    goDoc() {
      const routeData = this.$router.resolve({
        path: '/home/file_detail',
        query: { id: this.current.fileId }
      })
      window.open(routeData.href, '_blank')
    },
    changeDoc(item, index) {
      this.current = item
      this.pageIndex = 0
      this.fileIndex = index
      this.fetchData()
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  .search {
    .icon {
      width: 80px;
      height: 50px;
      border-radius: 4px;
      color: #343434;
    }
  }
}

.list {
  height: 560px;
  overflow-y: scroll;
  overflow: hidden;
}

.preview-content {
  width: 360px;
  background-color: aqua;
}

.preview {
  width: 260px;
  height: 460px;
  border: #eeeeee solid 1px;
  padding: 10px;
  margin: 10px;
  border-radius: 8px;

  .img {
    width: auto;
    height: 420px;
  }
}

.tips {
  width: 260px;
}
</style>