cloudfile-ui/src/views/highSearch/HighSearch.vue

<template>
  <div class="container">
    <div class="logo">
      <img src="@/assets/images/Frame_427319127.png" alt="" />
      <div class="font">Domino’s File</div>
    </div>
    <div class="search_box">
      <el-select
        v-model="selectValue"
        class="m-2"
        popper-class="typeSelect"
        placeholder="Select"
        size="large"
      >
        <el-option
          v-for="item in selectOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
          <span style="float: left">{{ item.label }}</span>
          <div
            v-if="item.value === selectValue"
            style="
              position: relative;
              right: -13px;
              color: #000;
              font-weight: 700;
              font-size: 13px;
              text-align: right;
              box-sizing: border-box;
            "
          >
            ✓
          </div>
        </el-option>
      </el-select>
      <div class="line">|</div>
      <el-input
        class="search_ipt"
        v-model="searchText"
        maxlength="32"
        placeholder="请输入要查询的内容"
      />
      <div class="search_btn" @click="doSearch">搜索</div>
    </div>
    <div class="result_box">
      <div class="left_box" v-if="listData.length">
        <div class="dataNum">共查询到{{ total }}个相关结果</div>
      </div>
      <div
        class="content_box"
        v-infinite-scroll="setScroll"
        infinite-scroll-distance="30"
        v-if="listData.length"
      >
        <!-- <el-scrollbar height="200px"  ref="scrollRef" id="scrollRef"> -->
        <div class="oneBox" v-for="item in listData" :key="item.id">
          <span class="fileName">{{ item.content.docInfo.fileName }}</span>
          <div class="flieTime">
            <img src="@/assets/images/bx：bx-time-five.png" alt="" />
            <span>{{ item.content.docInfo.createTime }}</span>
          </div>
          <div
            class="flieContent"
            v-for="par in item.highlightFields.content"
            :key="par"
            v-html="par"
          ></div>
        </div>
        <div class="showAll" v-if="beEnd">已经到达底部~</div>
        <!-- </el-scrollbar> -->
      </div>
      <div class="error" v-if="noData">
        <img src="@/assets/images/blankPage.png" alt="" />
        <span>没有关于“{{ noFound }}”的结果 </span>
      </div>
    </div>
    <IdentifyFont :showIdentify="showIdentify"></IdentifyFont>
  </div>

</template>

<script setup>
import { onMounted, ref } from "vue";
import { search } from "@/api/search/search.js";
import IdentifyFont from '@/components/IdentifyFont/IdentifyFont.vue'
const searchText = ref(""); //搜索ipt的值
const selectValue = ref(1); //文档空间类型
const page = ref(1); //页数
const size = ref(10); //每页大小
const total = ref(0); //数据总条数
const noData = ref(false); //没有搜索出数据
const beEnd = ref(false); //拉到最底部了
const listData = ref([]);
const noFound = ref(); //没有结果的text
const selectOptions = [
  { label: "公共文档", value: 1 },
  { label: "部门文档", value: 2 },
  { label: "个人文档", value: 3 },
];

// ----------------------------
const showIdentify = ref(true)
// ----------------------------

onMounted(async () => {});

const doSearch = async () => {
  if (!searchText.value) {
    return;
  }
  // console.log("searchText", searchText.value);
  // console.log("selectValue", selectValue.value);
  const query = {
    keyword: searchText.value,
    page: page.value,
    size: size.value,
    type: selectValue.value,
  };
  const res = await search(query);
  // console.log('res',res);
  if (res.data) {
    if (res.data.length < 1) {
      // 没找到数据
      listData.value = [];
      noData.value = true;
      noFound.value = searchText.value;
      return;
    }
    listData.value = res.data;
    total.value = res.data.length;
    noData.value = false;
    if (res.data.length < size.value) {
      beEnd.value = true;
    }
  } else {
    // console.log(1);
    listData.value = [];
    noData.value = true;
    noFound.value = searchText.value;
  }
};
const setScroll = async () => {
  // console.log("到底啦");
  if (beEnd.value) return;
  page.value += 1;
  const query = {
    keyword: searchText.value,
    page: page.value,
    size: size.value,
    type: selectValue.value,
  };
  const res = await search(query);
  // console.log(res);
  if (res.data.length > 0) {
    // 如果返回的有数据
    total.value += res.data.length;
    noData.value = false;
    res.data.forEach((item) => listData.value.push(item));
    if (res.data.length < size.value) {
      //如果返回的数组长度小于size说明查完了
      beEnd.value = true;
    }
  } else {
    beEnd.value = true;
  }
};
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  background-color: #fff;
  overflow: hidden;
}
.logo {
  margin: 8px auto;
  width: 290px;
  height: 80px;
  //   border: 1px solid #000;
  display: flex;
  align-items: center;
  img {
    width: 80px;
    height: 80px;
  }
  .font {
    font-size: 32px;
    font-weight: normal;
    color: #06286c;
    line-height: 30px;
    font-family: Inter-ExtraBold;
    -webkit-transform: skew(-10deg);
  }
}
.search_box {
  box-sizing: border-box;
  margin: 8px auto;
  width: 560px;
  height: 40px;
  border-radius: 4px 4px 4px 4px;
  border: 2px solid #2e6bc8;
  display: flex;
  align-items: center;
  .line {
    color: #2e6bc8;
  }
  .search_btn {
    width: 88px;
    height: 100%;
    background: #2e6bc8;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 400;
    color: #ffffff;
    line-height: 22px;
  }
}
.result_box {
  margin-top: 8px;
  padding-left: 16px;
  .left_box {
    display: flex;
    align-items: center;
    .dataNum {
      margin-left: 4px;
      font-size: 14px;
      font-weight: 400;
    }
  }
  .content_box {
    width: 100%;
    height: 100%;
    overflow: auto;
    .oneBox {
      width: 100%;
      // height: 120px;
      border-bottom: 1px dashed #c1cce3;
      padding-bottom: 16px;
      padding-top: 16px;
      .fileName {
        font-size: 16px;
        color: #2e6bc8;
        text-decoration: underline;
        font-family: Inter-SemiBold;
      }
      .flieTime {
        font-size: 12px;
        font-weight: 400;
        color: #06286c;
        // line-height: 20px;
        vertical-align: middle;
        display: flex;
        align-items: center;
        margin: 4px 0;
        span {
          margin-left: 4px;
        }
      }
      .flieContent {
        width: 100%;
        font-size: 14px;
        color: #000000;
        font-weight: 400;
        line-height: 22px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        -webkit-line-clamp: 3; //超过3行显示省略号
        overflow: hidden;
      }
    }
    .showAll {
      margin-top: 8px;
      font-size: 14px;
      font-weight: 400;
      color: #6f85b5;
      line-height: 22px;
      display: flex;
      justify-content: center;
    }
  }
  .error {
    margin-top: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
    font-weight: 400;
    color: #06286c;
    img {
      width: 320px;
      height: 320px;
    }
  }
}
::v-deep em {
  color: #dd2025;
}

//选择框样式
::v-deep .el-select .el-input {
  width: 112px;
  height: 38px;
  color: #06286c !important;
  font-size: 14px !important;
}
::v-deep .el-select .el-input__wrapper {
  background-color: rgba(0, 0, 0, 0) !important;
  box-shadow: none !important;
}
::v-deep .el-select .el-input.is-focus .el-input__wrapper {
  box-shadow: none !important;
}
::v-deep .el-select .el-input__wrapper .el-input__inner {
  color: #06286c !important;
}
// 搜索框样式
::v-deep .search_ipt .el-input__wrapper {
  box-shadow: none !important;
}
::v-deep .search_ipt .el-input__inner {
  color: #06286c !important;
}
::v-deep .search_ipt .el-input__inner::placeholder {
  color: #a4b0d8;
}
</style>
<style lang="scss">
//鼠标移动上去的选中色
.typeSelect {
  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    background: #f5f7f9 !important;
  }
  //下拉框的文本颜色
  .el-select-dropdown__item {
    color: #06286c !important;
  }
  //选中之后的颜色
  .el-select-dropdown__item.selected {
    background: #f5f7f9 !important;
    color: #000 !important;
  }
}
</style>