lzga-ui/src/views1/Retrieval/RetrievalView.vue

<template>
  <div class="containe">
    <div class="picture">
      <img src="../../assets/img/Group 467.png" alt="" />
    </div>
    <div class="search">
      <!-- <el-select v-model="type">
        <el-option value="1" label="公共文档">公共文档</el-option>
        <el-option value="2" label="部门文档">部门文档</el-option>
        <el-option value="3" label="个人文档">个人文档</el-option>
      </el-select> -->
      <el-input
        auto-complete="on"
        type="text"
        name="content"
        placeholder="请输入查询关键字"
        v-model="input"
        @keyup.enter.native="searchPre"
      ></el-input>
      <span class="cen—top-span" @click="searchPre">快速搜索</span>
      <img
        src="../../assets/img/ri：search-2-line@2x.png"
        class="cen—top-img"
      />
    </div>

    <div class="main1">
      <div class="range">
        <p class="range-p">文档范围：</p>
        <el-radio-group v-model="type" size="small" class="range-ul" fill="#2E8AECFF" text-color="#fff">
      <el-radio-button label="1">公共文档</el-radio-button>
      <el-radio-button label="2">部门文档</el-radio-button>
      <el-radio-button label="3">个人文档</el-radio-button>
    </el-radio-group>
      </div>
      <!-- <div class="category">
        <p class="range-p">文档分类：</p>
        <ul class="range-ul">
          <li>公共文档</li>
          <li>部门文档</li>
          <li>个人文档</li>
        </ul>
      </div> -->
      <!-- <div class="time">
        <span>时间选择：</span>
        <el-checkbox-group v-model="checkList">
          <el-checkbox label="不限"></el-checkbox>
          <el-checkbox label="30天"></el-checkbox>
          <el-checkbox label="7天"></el-checkbox>
          <el-checkbox label="1天"></el-checkbox>
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-checkbox-group>
      </div> -->
    </div>

    <div class="mains" @scroll="handleScroll" v-if="mains_data2">
      <div v-for="item in count" :key="item.id" class="main-main">
        <div class="one" @click="docName(item.id, item.content.info)">
          {{ item.content.info.docName }}
        </div>
        <div class="two">
          <div class="two1">
            <img src="../../assets/img/UserCircle.png" />
            {{ item.content.info.createBy }}
          </div>
          <div>
            <img src="../../assets/img/Clock.png" />
            {{ item.content.info.createTime }}
          </div>
        </div>
        <div
          class="three"
          v-for="highlightFieldsContentItem in item.highlightFields.content"
          :key="highlightFieldsContentItem.id"
          v-html="highlightFieldsContentItem"
          style="white-space: normal"
        ></div>
        <ul class="four">
          <li v-for="tagName in item.content.info.tagList" :key="tagName.id">
            {{ tagName.tagName }}
          </li>
        </ul>
      </div>
    </div>
    <div class="mains_prompt" v-if="mains_data2">
      <span>滚动显示更多内容</span>
      <img src="../../assets/img/chevrons-down.png" alt="" />
    </div>
    <div class="empty" v-if="mains_data">
      <img src="../../assets/img/Empty.png" alt="" />
      <p>您搜索的内容暂无数据，建议更换关键词</p>
    </div>
  </div>
</template>

<script>
import { ret } from "@/api/doc/share1.js";

export default {
  data() {
    return {
      //搜索框绑定
      input: "",
      type: "",
      //搜索出来的数据
      count: [],
      page: 0,
      size: 3,
      mains_data: false,
      mains_data2: false,
      checkList: [],
      value1: "",
    };
  },
  created() {
    this.input = this.$route.query.datas;

    if (this.input) {
      this.type = this.$route.query.data2;
      this.searchs();
    }else{
      this.type="1"
    }
  },
  watch: {
    $route: {
      handler(val, oldval) {
        this.input = this.$route.query.datas;
        this.count = [];
        if (this.input != "") {
          this.searchs();
        } else {
          this.mains_data = true;
          this.mains_data2 = false;
        }
      },
      // 深度观察监听
      deep: true,
    },
  },
  mounted() {
    //添加滚动条事件
    window.addEventListener("scroll", this.handleScroll, true);
  },
  methods: {
    // 点击搜索调用的方法
    searchPre() {
      this.$router.push({
        path: "/home/retrieval",
        query: { datas: this.input, data2: this.type },
      });
    },
    handleScroll() {
      const container = document.querySelector(".mains");
      const { scrollTop, scrollHeight, clientHeight } = container;
      // console.log('scrollHeight',scrollHeight);
      // console.log('clientHeight',clientHeight);
      // console.log(scrollTop);
      // 是否达到页面底部
      if (scrollTop + clientHeight >= scrollHeight) {
        // console.log('滚动到底部了！')
        this.page += 1;
        // 执行加载
        this.searchs();
      }
    },

    //查找返回的数据
    searchs() {
      ret({
        content: this.input,
        type: this.type,
        page: this.page,
        size: this.size,
      }).then((item) => {
        // console.log('item=',item)
        if (item.length > 0) {
          this.count.push(...item);
          this.mains_data = false;
          this.mains_data2 = true;
        } else {
          this.input = "";
          this.mains_data = true;
          this.mains_data2 = false;
        }
      });
    },
    //预览界面
    docName(curentDocId, value) {
      // this.$tab.openPage(
      //   window.open('/individual/Pre/user/' + row.docId + "?row=" + JSON.stringify(row),
      //     '_blank'),
      //   // window.open("/individual/Pre/user/" + row.docId +"/title/"+ row.docName, '_blank'),
      // );
      this.$tab.openPage(
        // window.open("/individual/Pre/user/" + curentDocId, "_blank"),
        window.open(
          "/individual/Pre/user/" +
            curentDocId +
            "?row=" +
            JSON.stringify(value),
          "_blank"
        )
      );
    },
  },
};
</script>
<style lang='scss'>
.three {
  margin-bottom: calc(100vw * (10 / 1920));

  em {
    color: #f00 !important;
  }
}
</style>
<style scoped lang='scss'>
.containe {
  color: #7ea4c8;
  font-size: 0.14rem;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
}

.picture {
  width: calc(100vw * (220 / 1920));
  height: calc(100vh * (57 / 1080));
  margin-left: calc(100vw * (860 / 1920));
  margin-top: calc(100vh * (100 / 1080));
  margin-bottom: calc(100vh * (40 / 1080));

  img {
    width: 100%;
    height: 100%;
    display: block;
  }
}

.search {
  width: calc(100vw * (864 / 1920));
  height: calc(100vh * (50 / 1080));
  margin-left: calc(100vw * (528 / 1920));
  margin-bottom: calc(100vh * (50 / 1080));
  position: relative;
  // background: salmon;
}

.main1 {
  width: calc(100vw * (1100 / 1920));
  height: calc(100vh * (100 / 1080));
  // background: seagreen;
  margin-left: calc(100vw * (528 / 1920));
  margin-bottom: calc(100vh * (20 / 1080));
  .range,
  .category {
    width: calc(100vw * (480 / 1920));
    height: calc(100vh * (36 / 1080));
    // margin-left: calc(100vw * (528 / 1920));
    margin-bottom: calc(100vh * (30 / 1080));
    line-height: calc(100vh * (36 / 1080));
    display: flex;
    .range-ul {
      display: flex;
      list-style: none;
      padding: 0;
     ::v-deep .el-radio-button__inner {

      background: transparent;
      color: #7EA4C8FF;
      border: none;
      }
    }
  }
  .time {
    width: calc(100vw * (1333 / 1920));
    height: calc(100vh * (36 / 1080));
    // margin-left: calc(100vw * (528 / 1920));
    display: flex;
    align-items: center;
    .el-checkbox-group {
      .el-checkbox {
        margin-right: calc(100vw * (40 / 1920));
      }
      .el-date-picker {
        height: calc(100vh * (36 / 1080));
      }
    }
  }
}

.cen—top-img {
  width: calc(100vw * (24 / 1920));
  height: calc(100vh * (24 / 1080));
  position: absolute;
  left: calc(100vw * (15 / 1920));
  top: calc(100vh * (15 / 1080));
}

.el-input {
  width: calc(100vw * (750 / 1920));
  height: calc(100vh * (50 / 1080));
  margin-right: calc(100vw * (14 / 1920));
}

.cen—top-span {
  display: inline-block;
  width: calc(100vw * (100 / 1920));
  height: calc(100vh * (50 / 1080));
  background: #2e8aecff;
  color: #ffffffcc;
  text-align: center;
  line-height: calc(100vh * (50 / 1080));

  &:hover {
    cursor: pointer;
  }
}

.mains {
  width: calc(100vw * (1450 / 1920));
  height: calc(100vh * (500 / 1080));
  // background: seagreen;
  margin-left: calc(100vw * (300 / 1920));
  overflow: auto;
}

.mains_prompt {
  display: flex;
  align-items: center;
  margin-left: calc(100vw * (900 / 1920));
  margin-top: calc(100vh * (20 / 1080));
}

.empty {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  img {
    width: calc(100vw * (160 / 1920));
    height: calc(100vh * (160 / 1080));
    margin-top: calc(100vh * (150 / 1080));
  }
}

.main-main {
  width: calc(100vw * (1430 / 1920));
  // height: calc(100vh * (220 / 1080));
  padding: calc(100vh * (20 / 1080));
  border-bottom: 1px dashed #083b61ff;
}

.one {
  margin-bottom: calc(100vw * (10 / 1920));
  color: #2e8aecff;
  font-size: 14px;
  text-decoration: underline;
}

.two {
  margin-bottom: calc(100vh * (10 / 1080));
  display: flex;

  .two1 {
    margin-right: calc(100vw * (30 / 1920));
  }

  img {
    vertical-align: middle;
  }
}

.four {
  display: flex;
  list-style: none;
  padding: 0;

  li {
    //  width: calc(100vw * (62 / 1920));
    //  height: calc(100vh * (24 / 1080));
    border: 1px solid #ff9839ff;
    background: #bba99240;
    padding: 0 5px;
    margin-right: calc(100vw * (5 / 1920));
  }
}

//滚动条样式
::-webkit-scrollbar {
  width: 3.5px;
}

::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0);
}

::-webkit-scrollbar-thumb {
  background: #2e8aec;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #2e8aec;
}

::v-deep .el-input--medium .el-input__inner {
  padding-left: calc(100vw * (50 / 1920));
  background: #14265e80;
  border: 1px solid #01d1ffff;
  color: #7ea4c8ff;
}
</style>