cloudfile-ui/src/layout/components/DefaultPage/DefaultPage.vue

<template>
  <div class="main">
    <div class="search">
      <input type="text" class="search_input" placeholder="请输入关键字" />
      <div class="searchBtn">
        <img src="@/assets/images/newIndex/search.png" alt="" />
        <span>全局搜索</span>
      </div>
    </div>
    <div class="btmBox">
      <div class="upFile">
        <!-- <img
          src="@/assets/images/newIndex/upFolderLogo.png"
          class="upImg"
          alt=""
        />
        <span class="text1">上传你的文件</span> -->
        <el-upload
          class="upload-demo"
          :file-list="fileArr"
          :limit="10"
          :on-change="upBefore"
          :show-file-list="false"
          drag
          :http-request="onSuccess"
          multiple
          element-loading-text="上传中..."
          element-loading-background="rgba(255, 255, 255, 0.8)"
          v-loading="loadingUpload"
        >
          <img
            src="@/assets/images/newIndex/upFolderLogo.png"
            class="upImg"
            alt=""
          />
          <span class="text1">上传你的文件</span>
        </el-upload>
        <p class="text2">将文件拖到此处或 <span>选择文件</span></p>
        <div class="line"></div>
        <img src="@/assets/images/newIndex/scan.png" class="scanImg" alt="" />
        <div class="text3">扫描文件</div>
      </div>
      <div class="recent">
        <div class="top">
          <span>最近文件</span>
        </div>
        <div class="list">
          <div
            v-for="item in tableFileData"
            :key="item"
            @click="toFile(item)"
            class="oneBox"
          >
            <div class="imgBox">
              <img :src="setImg(item == null ? '' : item.fileType)" alt="" />
            </div>
            <div class="rightBox">
              <div class="text">{{ item.fileName }}</div>
              <div class="time">{{ item.createTime }}</div>
            </div>
            <img
              class="openArrow"
              src="@/assets/images/newIndex/CaretRight.png"
              alt=""
            />
          </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 } from "vue";
import { getInfo, getInfoByDirId } from "@/api/biz/info";
import { listRecent, getRecent } from "@/api/biz/recent";
import { setIcon, canPreviewFile } from "@/utils/index.js";
import { preview } from "@/api/common/common.js";
import { ElMessage, ElLoading, ElMessageBox } from "element-plus";
import ImgPreview from "@/components/ImgPreview/ImgPreview.vue";
import { getConfigKey } from "@/api/system/config.js";
import myfile from "@/api/myfile/myfile";
import documents from '@/api/document/document'
import uploadApi from '@/api/upload/upload'
const tableFileData = ref([]);
const copyFileType = ref();
const previewData = ref();
const loadingPreview = ref(false);
const showPreview = ref(false);
let fileArr = ref([]);
const useSpace = ref();
let fileBig = ref(0);
const allSpace = ref();
const maxFileSize = ref(); //能上传的最大size
const loadingUpload = ref(false);
const topDirId = ref();//我的文件顶层的目录id
const topSpaceId = ref();//我的文件顶层的目录id
const emit = defineEmits(["openMaxmin"]);
// 获取数据
const getList = async () => {
  const resN = await listRecent({ isFolder: "N" });
  if (resN.code === 200) {
    var arr = [];
    resN.rows.map(async (item) => {
      const detail = await getInfo(item.relaId);
      tableFileData.value.push(detail.data);
    });
  }
};
// 打开最近文件
const toFile = async (row) => {
  copyFileType.value = row.fileType;
  console.log("row", row);
  loadingPreview.value = true;
  const filePreview = canPreviewFile(row.fileType);
  if (filePreview) {
    loadingPreview.value = false;
    emit(
      "openMaxmin",
      row.fileName,
      `${window.location.origin}/fileEdit?clickRowId=${row.docId}&canEdit=0&canCopy=0&history=0&fileId=0`
    );
  } else {
    const res = await preview(row.docId);
    showPreview.value = true;
    previewData.value = URL.createObjectURL(res);
    loadingPreview.value = false;
  }
};
// 设置icon
const setImg = (type) => {
  return setIcon(type);
};
//关闭图片预览事件
const closeImgPreview = () => {
  // console.log('close');
  showPreview.value = false;
};
// 限制上传文件大小
const upBefore = (file, files) => {
  const maxSize = (maxFileSize.value - 0) * 1024 * 1024;
  // console.log('maxSize',maxSize);
  if (file.size > maxSize) {
    files.pop();
    ElMessage({
      message:
        file.name + "上传失败，上传文件大小最大为" + maxFileSize.value + "M",
      type: "error",
    });
  } else {
    fileBig.value = file.size + fileBig.value;
    // fileArr.value.push(file.raw)
  }
  // console.log('filesend',files);
};
// 我的文件的空间信息
function getSpaceList() {
  myfile.fileType(3).then((res) => {
    useSpace.value = res.data.usedCap;
    allSpace.value = res.data.spaceCap;
  });
}
//获取我的文件顶层的目录id
const getDirId = ()=>{
  documents.getTop(3).then(res => {
    topDirId.value = res.dirId
    topSpaceId.value = res.spaceId
  })
}
function onSuccess(files, val) {
  // console.log('suFiles',files);
  const maxSize = (maxFileSize.value - 0) * 1024 * 1024;
  if (files.file.size < maxSize) {
    fileArr.value.push(files.file);
  }
  sureUpload()
}
// 确认上传
function sureUpload() {
  loadingUpload.value = true;
  if (
    useSpace.value * 1024 * 1024 + fileBig.value / 1024 >
    allSpace.value * 1024 * 1024
  ) {
    ElMessage({
      message: "超过最大容量，请联系管理员扩容",
      type: "error",
    });
    loadingUpload.value = false;
    return;
  } else {
    if (fileArr.value.length > 0) {
      // console.log('fileArr',fileArr.value);
      let form = new FormData();
      for (var i = 0; i < fileArr.value.length; i++) {
        form.append("files", fileArr.value[i]);
      }
      form.append("spaceId", topSpaceId.value);
      form.append("dirId", topDirId.value);
      // console.error(fileArr.value);
      uploadApi
        .uploadFileMany(form)
        .then((res) => {
          if (res.code === 200) {
            ElMessage({
              message: "上传文件成功",
              type: "success",
            });
            // getAllTop()
            refreshFile();
            uploadModal.value = false;
            loadingUpload.value = false;
            fileArr.value = [];
            fileBig.value = 0;
          }
        })
        .catch((err) => {
          loadingUpload.value = false;
          fileArr.value = [];
        });
    } else {
      loadingUpload.value = false;
      return ElMessage({ message: "请选择文件", type: "error" });
    }
  }
}
onMounted(() => {
  getList();
  getSpaceList();
  getDirId()
  getConfigKey("file.size.limit").then((response) => {
    // console.log('response',response);
    maxFileSize.value = response.msg;
  });
});
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  height: calc(100vh - 160px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.search {
  width: 1232px;
  height: 64px;
  background-color: #2e8bf6;
  border-radius: 86px 86px 86px 86px;
  display: flex;
  justify-content: space-between;
  padding-right: 24px;
  .search_input {
    width: 1080px;
    height: 100%;
    border: none;
    outline: none;
    background-color: #fff;
    padding-left: 20px;
    border-radius: 86px 86px 86px 86px;
  }
  .searchBtn {
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    span {
      margin-left: 8px;
    }
  }
}
.btmBox {
  margin-top: 16px;
  width: 1232px;
  height: 624px;
  display: flex;
  justify-content: space-between;
  .upFile {
    width: 494px;
    height: 100%;
    background-color: #fff;
    border-radius: 16px 16px 16px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .upImg {
      width: 194px;
      height: 128px;
    }
    .text1 {
      font-style: 18px;
      color: #030102;
      font-weight: bold;
      margin-top: 16px;
      margin-bottom: 8px;
    }
    .text2 {
      font-weight: 400;
      font-size: 16px;
      color: #7c808d;
      span {
        font-weight: 500;
        font-size: 16px;
        color: #2e8bf6;
        text-decoration-line: underline;
      }
    }
    .text3 {
      font-weight: 400;
      font-size: 14px;
      color: #7c808d;
      margin-top: 8px;
    }
    .line {
      margin-top: 16px;
      width: 124px;
      height: 1px;
      border-top: 1px solid #dbdbdb;
    }
    .scanImg {
      width: 32px;
      height: 32px;
      margin-top: 16px;
    }
  }
  .recent {
    width: 722px;
    height: 100%;
    background-color: #fff;
    border-radius: 16px 16px 16px 16px;
    padding: 24px;
    .top {
      width: 100%;
      height: 42px;
      border-bottom: 1px solid #dbdbdb;
      span {
        font-weight: bold;
        font-size: 18px;
        color: #030102;
      }
    }
    .list {
      width: 100%;
      height: calc(624px - 42px - 1px - 24px);
      overflow-y: auto;
      // padding-top: 12px;
      box-sizing: border-box;
      .oneBox {
        width: 100%;
        height: 60px;
        padding: 8px 22px;
        box-sizing: border-box;
        border-radius: 12px 12px 12px 12px;
        display: flex;
        align-items: center;
        .imgBox {
          width: 44px;
          height: 44px;
          border-radius: 8px 8px 8px 8px;
          border: 1px solid #d0d6e6;
          display: flex;
          justify-content: center;
          align-items: center;
          img {
            width: 32px;
            height: 32px;
          }
        }
        .rightBox {
          margin-left: 12px;
          width: calc(100% - 44px - 12px);
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .text {
            font-weight: bold;
            font-size: 16px;
            color: #030102;
          }
          .time {
            font-weight: 500;
            font-size: 12px;
            color: #7c808d;
          }
        }
        .openArrow {
          width: 20px;
          height: 20px;
        }
        &:hover {
          background: #f6f6f6;
          .imgBox {
            border: 1px solid #2e8bf6;
          }
        }
      }
    }
  }
}
::v-deep .el-upload-dragger {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
</style>