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

<template>
  <div class="container">
    <!-- 搜索标题 -->
    <div class="searchTitle">
      <el-icon>
        <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="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">
          <!-- 表格 -->
          <el-table
            :data="tableData"
            style="width: 100%"
            height="100%"
            :scrollbar-always-on="true"
          >
            <el-table-column fixed prop="fileName" 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="dir.dirName" label="所属空间" width="100" />
            <el-table-column prop="createTime" label="时间" width="200" />
            <el-table-column prop="fileType" label="类型" width="180" />
            <el-table-column prop="fileSize" label="大小" width="160">
              <template #default="scope">
                <div>{{ scope.row.fileSize }}KB</div>
              </template>
            </el-table-column>
            <el-table-column prop="dir.dirPath" label="文件夹" width="180">
              <template #default="scope">
                <div class="folder">
                  {{ scope.row.dir.dirPath }}
                </div>
              </template>
            </el-table-column>
          </el-table>
        </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>{{ item.fileName }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, toRaw, inject } from "vue";
import { search } from "@/api/search/search.js";
import { flieSearch } from "@/api/search/search.js";
import { useRoute } from "vue-router";
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 reload = inject("reload");
onMounted(() => {
  let route = useRoute();
  searchText.value = route.query.searchText;
  let searchData = route.query.searchData;
  // console.log("searchData", searchData);
  baseData.value = JSON.parse(searchData).rows;
  tableData.value = JSON.parse(searchData).rows;
  total.value = JSON.parse(searchData).total;
  // console.log("tableData", toRaw(tableData.value));
  changeSearchFor(searchFor.value);
  // console.log("total", total.value );
});
const tableData = ref([]);
// 切换搜索范围
const changeSearchFor = (name) => {
  // console.log('searchFor',searchFor.value);
  const typeArr = setType(searchType.value);
  let baseDataObj = toRaw(baseData.value);
  // console.log("baseDataObj", baseDataObj);
  tableData.value = toRaw(baseDataObj).filter(
    (item) => item.space.spaceType == name && typeArr.includes(item.fileType)
  );
};
// 切换搜索分类
const changeSearchType = (name) => {
  let baseDataObj = toRaw(baseData.value);
  // 获取分类具体数据
  const typeArr = setType(name);
  tableData.value = toRaw(baseDataObj).filter(
    (item) =>
      typeArr.includes(item.fileType) && item.space.spaceType == searchFor.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 setIcon = (fileType) => {
  switch (fileType) {
    case ".docx":
      return "src/assets/images/fileType/file_DOC.png";
      break;
    case ".pdf":
      return "src/assets/images/fileType/file_pdf.png";
      break;
    case ".ppt":
      return "src/assets/images/fileType/file_PPT.png";
      break;
    case ".txt":
      return "src/assets/images/fileType/file_TXT.png";
      break;
    case ".xlsx":
      return "src/assets/images/fileType/file_XLSX.png";
      break;
    case ".csv":
      return "src/assets/images/fileType/file_XLSX.png";
      break;
    case ".png":
      return "src/assets/images/fileType/file_pic.png";
      break;
    case ".mp3":
      return "src/assets/images/fileType/file_audio.png";
      break;
    case ".mp4":
      return "src/assets/images/fileType/file_video.png";
      break;
    case ".zip":
      return "src/assets/images/fileType/file_zip.png";
      break;
    default:
      return "src/assets/images/fileType/file_DOC.png";
      break;
  }
};
// 设置分类
const setType = (fileType) => {
  switch (fileType) {
    case "doc":
      return ['.txt',".ppd", ".pdf", ".docx", ".csv"];
      break;
    case "img":
      return [".png", ".jpg", ".jpeg"];
      break;
    case "audio":
      return [".mp3"];
      break;
    case "video":
      return [".mp4"];
      break;
    case "zip":
      return [".zip",'rar','.7z'];
      break;
    default:
      return [''];
      break;
  }
};
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  background-color: #fff;
  border-radius: 4px;
}
.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;
    }
  }
}
</style>