cloudfile-ui/src/views/search/index.vue

<template>
  <div class="container">
    <!-- 搜索标题 -->
    <div class="searchTitle">
      <el-icon @click="goBack">
        <ArrowLeftBold />
      </el-icon>
      <div class="colLine"></div>
      <div class="searchTitle_text">“{{ searchText }}”的搜索结果</div>
    </div>
    <!-- 搜索选项 -->
    <div class="searchType">
      <div class="searchFor">
        <div class="search_title">搜索范围：</div>
        <el-tabs v-model="searchFor" class="demo-tabs" @tab-change="changeSearchFor">
          <el-tab-pane label="公共" name="1"></el-tab-pane>
          <el-tab-pane label="部门" name="2"></el-tab-pane>
          <el-tab-pane label="个人" name="3"></el-tab-pane>
        </el-tabs>
      </div>
      <div class="line"></div>
      <div class="searchFor">
        <div class="search_title">分类：</div>
        <el-tabs v-model="searchType" class="demo-tabs" @tab-change="changeSearchType">
          <el-tab-pane label="全部" name="all"></el-tab-pane>
          <el-tab-pane label="文档" name="doc"></el-tab-pane>
          <el-tab-pane label="图片" name="img"></el-tab-pane>
          <el-tab-pane label="音频" name="audio"></el-tab-pane>
          <el-tab-pane label="视频" name="video"></el-tab-pane>
          <el-tab-pane label="压缩包" name="zip"></el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <!-- 排序显示 -->
    <div class="statistics">
      <div class="left_box">
        <div class="dataNum">共查询到{{ total }}个相关结果</div>
      </div>
      <div class="right_box">
        <img src="@/assets/images/sort.png" @click="changeSort" v-if="isAsc == 'asc'" alt="" />
        <img src="@/assets/images/Frame_188.png" @click="changeSort" v-else alt="" />
        <img v-if="isList" src="@/assets/images/squre.png" alt="" @click="changeShow" />
        <img v-else src="@/assets/images/Frame_187.png" alt="" @click="changeShow" />
      </div>
    </div>
    <!-- 文件列表 -->
    <div class="fileList">
      <div>
        <div v-if="isList" style="height: calc(98vh - 420px);overflow-y: auto;">
          <!-- 表格 -->
          <el-table :data="tableData" style="width: 100%;height:calc(98vh - 620px) ;" ref="container"
            @scroll="handleScroll">
            <el-table-column fixed label="名称" width="500">
              <template #default="scope">
                <div class="flie_name">
                  <img class="table_icon" :src="setIcon(scope.row.fileType)" alt="" style="" />
                  {{ scope.row.fileName }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="space.spaceName" label="所属空间" width="180" />
            <el-table-column prop="createTime" label="时间" width="auto" header-align="left" />
            <el-table-column prop="fileType" label="类型" width="auto" />
            <el-table-column prop="fileSize" label="大小" width="100">
              <template #default="scope">
                <div>{{ formatFileSize(scope.row.fileSize) }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="dir.dirPath" label="文件夹" width="auto">
              <template #default="scope">
                <div class="folder">
                  {{ scope.row.dir ? scope.row.dir.dirPath : "" }}
                </div>
              </template>
            </el-table-column>
          </el-table>
          <!-- <div class="pageBox">
            <Pagination :total="total" :page="page" :limit="limit" @pagination="pagination"></Pagination>
          </div> -->
        </div>
        <div v-else>
          <!-- 平铺 -->
          <div class="tile_box">
            <div class="file_box" v-for="item in tableData" :key="item">
              <img class="big_file_img" :src="setIcon(item.fileType)" alt="" />
              <span class="missing">{{ item.fileName }}</span>
              <span class="missingPass">{{ item.fileName }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, toRaw, inject, watch } from "vue";
import { search } from "@/api/search/search.js";
import { flieSearch } from "@/api/search/search.js";
import { useRoute, useRouter, onBeforeRouteUpdate } from "vue-router";
import Pagination from "@/components/Pagination/index.vue";
import { ElTable, ElTableColumn, ElInfiniteScroll } from 'element-plus';
//---------------导入图片--------------------------
import file_DOC from "@/assets/images/fileType/file_DOC.png";
import file_pdf from "@/assets/images/fileType/file_pdf.png";
import file_PPT from "@/assets/images/fileType/file_PPT.png";
import file_TXT from "@/assets/images/fileType/file_TXT.png";
import file_XLSX from "@/assets/images/fileType/file_XLSX.png";
import file_pic from "@/assets/images/fileType/file_pic.png";
import file_audio from "@/assets/images/fileType/file_audio.png";
import file_video from "@/assets/images/fileType/file_video.png";
import file_zip from "@/assets/images/fileType/file_zip.png";
//----------------------------------------
const searchFor = ref("1"); //搜索范围
const searchType = ref("doc"); //搜索对象
const checkState = ref(false); //勾选框状态
const activeNames = ref(["folder", "file"]);
const isList = ref(true); //控制显示方式
const isContent = ref(false); //内容搜索
// const total = ref(0); //数据总条数
const searchText = ref(""); //搜索ipt的值
const baseData = ref(); //搜索出的原始数据
const isAsc = ref("asc");
const router = useRouter(); //注册路由
const route = useRoute(); //注册路由

//---------分页--------------
const total = ref(0);
const page = ref(1);
const limit = ref(2); //pagesize
//---------------------------
const container = ref(null)
const historyParams = history.state.params
console.log('historyParams', historyParams);

const reload = inject("reload");

const tableData = ref([]);
// 切换搜索范围
const changeSearchFor = (name) => {
  // console.log('searchFor',searchFor.value);
  const typeArr = setType(searchType.value);
  let baseDataObj = toRaw(baseData.value);
  // console.log("tableData", tableData.tableData);
  tableData.value = toRaw(baseDataObj).filter(
    (item) => item.space.spaceType == name && typeArr.includes(item.fileType)
  );
  //  console.log('tableData',tableData.value);
};
// 切换搜索分类
const changeSearchType = (name) => {
  let baseDataObj = toRaw(baseData.value);
  if (name == 'all') {
    tableData.value = baseDataObj
  } else {
    // 获取分类具体数据
    console.log(name, 'name');
    const typeArr = setType(name);
    console.log(typeArr, '类型');
    tableData.value = toRaw(baseDataObj).filter((item) => {
      console.log(item,'遍历');
      return typeArr.includes(item.fileType) && item.space.spaceType === searchFor.value;
    });
    console.log(tableData.value,'数组');
  }
};
const changeShow = () => {
  isList.value = !isList.value;
};
const changeSort = async () => {
  isAsc.value == "asc" ? (isAsc.value = "desc") : (isAsc.value = "asc");
  const query = {
    keyword: searchText.value,
    isAsc: isAsc.value,
    orderByColumn: "createTime",
  };
  const res = await flieSearch(query);
  baseData.value = res.rows;
  tableData.value = res.rows;
  changeSearchFor(searchFor.value);
  // console.log("res", res);
};
// 根据选项对数据处理，返回处理后的数据
const fliterListData = (dataList) => {
  return dataList;
};
// 回退
const goBack = () => {
  router.back();
};

//分页
const handleSizeChange = (val) => {
  limit.value = val;
};
const handleCurrentChange = (val) => {
  page.value = val;
};
const pagination = async (obj) => {
  console.log(obj, 'page');
  isAsc.value == "asc" ? (isAsc.value = "desc") : (isAsc.value = "asc");
  const query = {
    keyword: searchText.value,
    isAsc: isAsc.value,
    page: obj.page,
    size: obj.limit,
    orderByColumn: "createTime",
  };
  const res = await flieSearch(query);
  baseData.value = res.rows;
  tableData.value = res.rows;
  changeSearchFor(searchFor.value);
};
// 设置图标
const setIcon = (fileType) => {
  switch (fileType) {
    case ".docx":
      return file_DOC;
      break;
    case ".pdf":
      return file_pdf;
      break;
    case ".ppt":
      return file_PPT;
      break;
    case ".txt":
      return file_TXT;
      break;
    case ".xlsx":
      return file_XLSX;
      break;
    case ".csv":
      return file_XLSX;
      break;
    case ".png":
      return file_pic;
      break;
    case ".mp3":
      return file_audio;
      break;
    case ".mp4":
      return file_video;
      break;
    case ".zip":
      return file_zip;
      break;
    default:
      return file_DOC;
      break;
  }
};
// TODO mp3筛选不出来 离大谱，一样的写法 mp4就可以
// 设置分类
const setType = (fileType) => {
  switch (fileType) {
    case "doc":
      return [".txt", ".ppt", ".pdf", ".docx", ".csv", ".wps", ".xls", '.pptxs', '.dll', '.pptx', '.doc'];
      break;
    case "img":
      return [".png", ".jpg", ".jpeg"];
      break;
    case "audio":
      return [".mp3"];
      break;
    case "video":
      return [".mp4", '.qlv'];
      break;
    case "zip":
      return [".zip", ".rar", ".7z"];
      break;
    default:
      return [""];
      break;
  }
};
function formatFileSize(fileSize) {
  if (fileSize >= 1024 * 1024 * 1024) {
    // 大于等于1GB，显示GB
    return (fileSize / (1024 * 1024 * 1024)).toFixed(2) + "GB";
  } else if (fileSize >= 1024 * 1024) {
    // 大于等于1MB，显示MB
    return (fileSize / (1024 * 1024)).toFixed(2) + "MB";
  } else if (fileSize >= 1024) {
    // 大于等于1KB，显示KB
    return (fileSize / 1024).toFixed(2) + "KB";
  } else {
    // 小于1KB，显示字节
    return fileSize + "B";
  }
}
let numnum = 1
async function handleScroll(e) {
  // console.log(e, '出发了');
  const tableContainer = e.target;
  const scrollPosition = tableContainer.scrollTop + tableContainer.clientHeight;
  const contentHeight = tableContainer.scrollHeight;
  console.log(scrollPosition,contentHeight,'对比');
  if (scrollPosition + 0.40005 >= contentHeight) {
    numnum++
    const query = {
      keyword: searchText.value,
      isAsc: "asc",
      orderByColumn: "createTime",
      pageSize: 10,
      pageNum: numnum,
    };
    const res = await flieSearch(query);
    tableData.value = [...tableData.value,...res.rows]
  }
}
onMounted(() => {
  let antherContainer = container.value.$el.querySelector('.el-scrollbar__wrap')
  antherContainer.addEventListener('scroll', handleScroll);
  const JparData = history.state.clickRowId
  const parData = JSON.parse(JparData)
  searchText.value = parData.searchText;
  let searchData = parData.searchData;
  baseData.value = searchData.rows;
  tableData.value = searchData.rows;
  total.value = searchData.total;
  changeSearchFor(searchFor.value);
});
onBeforeRouteUpdate((to, from) => {
  console.log('to', to);
  console.log('from', from);
})
watch(() => history, (newValue, oldValue) => {
  console.log('history 发生改变了', newValue, oldValue);
}, {
  immediate: true,
  deep: true
});
</script>

<style lang="scss" scoped>
.container {
  height: calc(98vh - 48px - 8px - 32px - 8px);
  background-color: #fff;
  border-radius: 4px;
  overflow: hidden;
}

.searchTitle {
  width: 100%;
  height: 40px;
  padding-left: 8px;
  display: flex;
  align-items: center;

  .colLine {
    margin-left: 5px;
    height: 100%;
    border-right: 1px solid #c1cce3;
  }

  .searchTitle_text {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    margin-left: 16px;
  }
}

.searchType {
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  background-color: #f5f7f9;
  border-top: 1px solid #c1cce3;
  border-bottom: 1px solid #c1cce3;
  padding-left: 16px;
  display: flex;
  align-items: center;

  .searchFor {
    height: 100%;
    display: flex;

    // align-items: center;
    .search_title {
      height: 100%;
      line-height: 40px;
      font-size: 14px;
      font-weight: 500;
      font-family: Inter-Medium;
    }
  }

  .line {
    width: 1px;
    height: 24px;
    border-left: 1px solid #c1cce3;
    margin: 0 16px;
  }
}

.statistics {
  width: 100%;
  height: 40px;
  // background-color: #ccc;
  padding-left: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .left_box {
    display: flex;
    align-items: center;

    .dataNum {
      margin-left: 4px;
      font-size: 14px;
      font-weight: 400;
    }
  }

  .right_box {
    width: 50px;
    display: flex;
    justify-content: space-between;
    margin-right: 30px;

    img {
      cursor: pointer;
    }
  }
}

.fileList {
  height: 100%;

  .content_box {
    width: 100%;
    height: 100%;
    padding: 16px;

    .oneBox {
      width: 100%;
      height: 120px;
      border-bottom: 1px dashed #c1cce3;

      .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;
      }

      .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;

        em {
          color: #dd2025;
        }
      }
    }
  }
}

//表格文本超出隐藏
::v-deep .flie_name,
.folder {
  /*第一步： 溢出隐藏 */
  overflow: hidden;
  /* 第二步：让文本不会换行， 在同一行继续 */
  white-space: nowrap;
  /* 第三步：用省略号来代表未显示完的文本 */
  text-overflow: ellipsis;
}

// tag间距
::v-deep .el-tabs__item {
  padding: 0 16px !important;
  color: #505870 !important;
  font-weight: 400 !important;
}

::v-deep .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
  padding-left: 0 !important;
}

::v-deep .el-tabs--top .el-tabs__item.is-top:last-child {
  padding-right: 0 !important;
}

// tag选中颜色
::v-deep .el-tabs__item.is-active {
  color: #2e6bc8 !important;
  font-weight: normal;
  font-family: Inter-SemiBold;
}

::v-deep .el-tabs__active-bar {
  background-color: #2e6bc8;
}

::v-deep .el-table__inner-wrapper::before {
  background-color: #fff !important;
}

::v-deep .el-collapse,
.el-collapse-item__wrap {
  border: none;
}

.table_icon {
  height: 27px;
  width: 27px;
  vertical-align: middle;
}

::v-deep .el-collapse-item__content {
  padding-bottom: 0;
}

::v-deep .el-collapse-item__header {
  background-color: #ebeff6 !important;
  width: 100% !important;
  height: 24px !important;
}

::v-deep .el-collapse-item__arrow {
  position: relative;
  color: #2e6bc8;
  right: 97%;
}

::v-deep .el-table td.el-table__cell {
  border: none;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #000 !important;
}

::v-deep .el-table__row {
  height: 35px !important;
}

::v-deep .el-table .el-table__header-wrapper th {
  border-bottom: none;
  border-right: 1px solid #c1cce3;
  background-color: #fff !important;
  color: #505870;
  font-size: 14px;
}

.collapseItem_title {
  position: relative;
  left: 40px;
  color: #2e6bc8;
  font-family: Inter-Medium;
  font-size: 12px;
}

// 表格右边3个靠右对齐
::v-deep .el-table__header thead tr th {
  font-family: Inter-Medium;
  font-size: 14px;
  color: #505870;
  text-align: right;

  &:nth-child(1) {
    text-align: left;
  }
}

// ::v-deep .el-table__body tbody [class*="column_2"] {
//   text-align: right;
// }
// ::v-deep .el-table__body tbody [class*="column_3"] {
//   text-align: right;
// }
// ::v-deep .el-table__body tbody [class*="column_4"] {
//   text-align: right;
// }
// ::v-deep .el-table__body tbody [class*="column_6"] {
//   text-align: right;
// }
// ::v-deep .el-table__body tbody [class*="column_7"] {
//   text-align: right;
// }
::v-deep .el-table__body tbody [class*="column_"] {
  text-align: right;

  &:nth-child(4n + 1) {
    text-align: left;
  }
}

//平铺
.tile_box {
  width: 100%;
  height: 300px;
  display: flex;
  flex-wrap: wrap;

  .file_box {
    width: 116px;
    min-height: 138px;
    // border: 1px solid #000;
    display: flex;
    flex-direction: column;
    align-items: center;

    .big_file_img {
      width: 100px;
      height: 100px;
    }

    span {
      font-size: 14px;
      font-weight: 400;
      line-height: 22px;
    }
  }
}

.missing {
  width: 90px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.missing:hover~.missingPass {
  display: block;
}

.missingPass {
  display: none;
  width: 140px;
  background-color: black;
  border-radius: 5px;
  color: white;
  text-align: center;
  z-index: 30 important;
  margin-left: 25px;
  font-size: 14px;
}
</style>