|
|
@@ -0,0 +1,278 @@
|
|
|
+<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>
|
|
|
+ <p class="text2">将文件拖到此处或 <span>选择文件</span></p>
|
|
|
+ <div class="line"></div>
|
|
|
+ <img src="@/assets/images/newIndex/scan.png" class="scanImg" alt="" />
|
|
|
+ </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 ImgPreview from '@/components/ImgPreview/ImgPreview.vue'
|
|
|
+const tableFileData = ref([]);
|
|
|
+const copyFileType = ref();
|
|
|
+const previewData = ref();
|
|
|
+const loadingPreview = ref(false);
|
|
|
+const showPreview = ref(false);
|
|
|
+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;
|
|
|
+};
|
|
|
+onMounted(() => {
|
|
|
+ getList();
|
|
|
+});
|
|
|
+</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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|