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=""></el-tab-pane>
          <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-show="isList" style="height: calc(98vh - 220px);overflow-y: hidden;">
          <!-- 表格 -->
          <el-table :data="tableData" style="width: 100%;height:calc(98vh - 230px);" ref="container"
            @scroll="handleScroll" @row-click="clickRow">
            <el-table-column type="index"  width="70" />
            <el-table-column label="名称" width="400">
              <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="300" />
            <el-table-column prop="createTime" label="时间" width="200"  />
            <el-table-column prop="fileType" label="类型" width="200" />
            <el-table-column prop="fileSize" label="大小" width="200">
              <template #default="scope">
                <div>{{ formatFileSize(scope.row.fileSize) }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="dir.dirPath" label="文件夹" width="200">
              <template #default="scope">
                <el-tooltip class="box-item" effect="dark" placement="top"
                    :show-after="1000" :content="scope.row.dir?.dirPath">
                <div class="folder">   
                  {{ scope.row.dir ? scope.row.dir.dirPath : "" }}
                </div>
                </el-tooltip>

              </template>
            </el-table-column>
          </el-table>
          <!-- <div class="pageBox">
            <Pagination :total="total" :page="page" :limit="limit" @pagination="pagination"></Pagination>
          </div> -->
        </div>
        <div v-show="!isList">
          <!-- 平铺 -->
          <div class="tile_box" @scroll="handleScrollG">
            <div class="file_box" v-for="item in tableData" :key="item" @click="clickRow(item)">
              <img class="big_file_img" :src="setIcon(item.fileType)" alt="" />
                    <el-tooltip
                      class="box-item"
                      effect="dark"
                      :content="item.fileName "
                      :show-after='1000'
                      placement="bottom"
                    >
                        <span class="missing">{{ item.fileName }}</span>
                    </el-tooltip>
              <!-- <span class="missing">{{ item.fileName }}</span> -->
              <!-- <span class="missingPass">{{ item.fileName }}</span> -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <ImgPreview :previewData="previewData" :copyFileType="copyFileType" :showPreview="showPreview"
    @closeImgPreview="closeImgPreview"></ImgPreview>
      <div v-loading.fullscreen="loadingPreview" v-if="loadingPreview" class="lodingBox"></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 ImgPreview from '@/components/ImgPreview/ImgPreview.vue'
import { canPreviewFile, rightMenuRole } from "@/utils/index.js"
import { preview } from "@/api/common/common.js";
import { ElMessageBox, ElMessage } 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(""); //搜索范围
const searchType = ref("all"); //搜索对象
const fileTypes = ref()
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
const loadingPreview = ref(false)
const showPreview = ref(false)//控制图片预览组件显示
const previewData = ref()
const copyFileType = ref()
const reload = inject("reload");
const addFileTab = inject("addFileTab");
const clickPath = inject("clickPath");
const canSceoll = ref(true)
const tableData = ref([]);
// 切换搜索范围
const changeSearchFor = async(name) => {
  numnum = 1
  numG = 1
  const typeArr = setType(searchType.value);
  let baseDataObj = toRaw(baseData.value);
   fileTypes.value = ''
  if (name == 'all') {
    fileTypes.value = ''
  } else if(name == '1') {
    fileTypes.value = 1
    // tableData.value = toRaw(baseDataObj).filter(
    //   (item) => item.space.spaceType == name && typeArr.includes(item.fileType)
    // );
  }else if(name == '2'){
    fileTypes.value = 2
  }else if(name == '3'){
    fileTypes.value = 3
  }
  
  if(isList.value){
    let res = await flieSearch({
      keyword:searchText.value,
      type:fileTypes.value,
      isAsc: isAsc.value,
      pageSize: 20,
      pageNum: 1,
    })
    total.value = res.total;
  tableData.value = res.rows
  baseData.value = res.rows
  }else{
    let res = await flieSearch({
      keyword:searchText.value,
      type:fileTypes.value,
      isAsc: isAsc.value,
      pageSize: 80,
      pageNum: numG,
    })
    total.value = res.total;
  tableData.value = res.rows
  baseData.value = res.rows
  }
  changeSearchType(searchType.value)
};
// 切换搜索分类
const changeSearchType = (name) => {
  numnum = 1
  numG = 1
  let baseDataObj = toRaw(baseData.value);
  if (name == 'all') {
    tableData.value = baseDataObj
  } else {
    // 获取分类具体数据
    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 || searchFor.value =='');
    });
    // console.log(tableData.value, '数组');
  }
};
const changeShow = () => {
  isList.value = !isList.value;
};
const changeSort = async () => {
  numnum = 1
  numG = 1
  isAsc.value == "asc" ? (isAsc.value = "desc") : (isAsc.value = "asc");
  let query ={}
   if(isList.value){
      query = {
        keyword: searchText.value,
        isAsc: isAsc.value,
        type:fileTypes.value,
        orderByColumn: "createTime",
        pageSize: 20,
        pageNum: 1,
      };
   }else{
    query = {
        keyword: searchText.value,
        isAsc: isAsc.value,
        type:fileTypes.value,
        orderByColumn: "createTime",
        pageSize: 80,
        pageNum: 1,
      };
   }
  const res = await flieSearch(query);
  baseData.value = res.rows;
  tableData.value = res.rows;
  // changeSearchFor('');
  // console.log("res", res);
};
// 根据选项对数据处理，返回处理后的数据
const fliterListData = (dataList) => {
  return dataList;
};
// 回退
const goBack = () => {
  // router.back();
  // 跳到主页
clickPath(null,{label: "首页",path: "/home"})
};

//分页
const handleSizeChange = (val) => {
  limit.value = val;
};
const handleCurrentChange = (val) => {
  page.value = val;
};
const pagination = async (obj) => {
  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 clickRow =async (row)=>{
  const typeArr = ['.png', '.jpg', '.jpeg', '.JPG','.PNG', '.mp3', '.mp4']
  // loadingPreview.value = true
  const filePreview = canPreviewFile(row.fileType)
   if (filePreview) {
        loadingPreview.value = false
        addFileTab(row, 0,0); 
    } else if(typeArr.some(item=>item == row.fileType)) {
        const res = await preview(row.docId)
        copyFileType.value = row.fileType
        showPreview.value = true
        previewData.value = URL.createObjectURL(res)
    }else{
      ElMessage.error("该文件格式不支持预览！");
    }
    loadingPreview.value = false
}
//关闭图片预览事件
const closeImgPreview = () => {
    // console.log('close');
    showPreview.value = false
}
// 设置图标
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;
  }
};
// 设置分类
const setType = (fileType) => {
  switch (fileType) {
    case "doc":
      return [".txt", ".ppt", ".pdf", ".docx", ".csv", ".wps", ".xls", '.pptxs', '.dll', '.pptx', '.doc'];
      break;
    case "img":
      return [".png",".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
let numG = 1
async function handleScroll(e) {
  // console.log(e, '出发了');
  const tableContainer = e.target;
  if(!canSceoll.value) return
  const scrollPosition = tableContainer.scrollTop + tableContainer.clientHeight;
  const contentHeight = tableContainer.scrollHeight;
  if (scrollPosition + 150.0005 >= contentHeight) {
    canSceoll.value = false
    numnum++
    const query = {
      keyword: searchText.value,
      type:fileTypes.value,
      isAsc: isAsc.value,
      orderByColumn: "createTime",
      pageSize: 20,
      pageNum: numnum,
    };
    const res = await flieSearch(query);
    tableData.value = [...tableData.value, ...res.rows]
    if(tableData.value.length<total.value){
      setTimeout(() => {
        canSceoll.value = true
      }, 1000);
    }
  }
}
async function handleScrollG(e) {
    if(tableData.value.length >= total.value) return
  const tableContainer = e.target;
  const scrollPosition = tableContainer.scrollTop + tableContainer.clientHeight;
  const contentHeight = tableContainer.scrollHeight;
  // console.log(scrollPosition, contentHeight, '对比');
  if (scrollPosition + 0.40005 >= contentHeight) {
    numG++
    const query = {
      keyword: searchText.value,
      type:fileTypes.value,
      isAsc: isAsc.value,
      orderByColumn: "createTime",
      pageSize: 90,
      pageNum: numG,
    };
    const res = await flieSearch(query);
    tableData.value = [...tableData.value, ...res.rows]
  }
}
watch(() => isList.value, (newValue, oldValue) => {
  // console.log('editableTabs 发生改变了', newValue, oldValue);
  numG = 1
  if(!newValue){
    const query = {
      keyword: searchText.value,
      isAsc: isAsc.value,
      orderByColumn: "createTime",
      pageSize: 90,
      pageNum: numG,
    };
     flieSearch(query).then(res=>{

      baseData.value = [ ...res.rows]
      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('');
});
// 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;
}
.lodingBox {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vh;
    height: 100vh;
    z-index: 10000000;
}
.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;
      }

      .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间距
:deep(.el-tabs__item) {
  padding: 0 16px !important;
  color: #505870 !important;
  font-weight: 400 !important;
}

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

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

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

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

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

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

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

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

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

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

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


//平铺
.tile_box {
  width: 100%;
  height: calc(98vh - 220px);
  display: flex;
  flex-wrap: wrap;
  overflow-y:auto ;
  align-items: flex-start;
  align-content: flex-start;

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

// :deep(.cell) {
//   text-align: center;
// }

// :deep(.el-table td.el-table__cell div) {
//   text-align: center;
// }
</style>