最近文件显示和打开文件夹

src/layout/indexCommon.vue

@@ -95,6 +95,8 @@
               v-model="editableTabsValue"
               @tab-click="clickTab"
               @tab-add="addTab"
+              :value="JSON.stringify(item)"
+              :data-item="JSON.stringify(item)"
               type="card"
               class="common-tabs"
             >
@@ -103,7 +105,7 @@
                 :key="item.path"
                 :label="item.label"
                 :name="item.path"
-                :value="JSON.stringify(item)"
+                :data-item="JSON.stringify(item)"
               >
                 <template #label>
                   <div class="tab_pane">
@@ -368,9 +370,10 @@ const clickPath = (index, items) => {
   editableTabsValue.value = items.path;
   // console.log("editableTabs", editableTabs.value);
 };
-const clickTab = (item,el) => {
+const clickTab = (item,el,e) => {
   console.log("item", toRaw(item));
-  console.log("el", toRaw(el));
+  console.log("el", el);
+  console.log("e", e);
   let regExp = new RegExp(/^\//);
   let regFile = new RegExp(/^tofile/);
   if (!regExp.test(toRaw(item))) {

src/views/biz/recent/index.vue

@@ -1,18 +1,19 @@
 <template>
-<TopTabs></TopTabs>
-  <div>
+  <!-- <TopTabs></TopTabs> -->
+  <div class="page">
     <el-collapse v-model="activeNames" @change="handleChange">
       <div v-if="isList">
-        <el-collapse-item name="folder">
+        <el-collapse-item name="folder" class="collapse_Item">
           <template #title>
             <span class="collapseItem_title">文件夹</span>
           </template>
           <!-- 表格 -->
           <el-table
-            :data="tableData"
+            :data="tableFolderData"
             style="width: 100%"
-            height="250"
+            height="40vh"
             :scrollbar-always-on="true"
+            @row-click="changeFile"
           >
             <el-table-column fixed prop="date" label="名称" width="500">
               <template #default="scope">
@@ -23,24 +24,26 @@
                     alt=""
                     style=""
                   />
-                  {{ scope.row.date }}
+                  {{ scope.row.dirName }}
                 </div>
               </template>
             </el-table-column>
-            <el-table-column prop="name" label="时间" width="200" />
-            <el-table-column prop="state" label="类型" width="180" />
-            <el-table-column prop="city" label="大小" width="160" />
+            <el-table-column prop="createTime" label="时间" width="200" />
+            <el-table-column prop="state" label="类型" width="180"
+              >文件夹</el-table-column
+            >
+            <!-- <el-table-column prop="city" label="大小" width="160" /> -->
           </el-table>
         </el-collapse-item>
-        <el-collapse-item name="file">
+        <el-collapse-item name="file" class="collapse_Item">
           <template #title>
             <span class="collapseItem_title">文件</span>
           </template>
           <!-- 表格 -->
           <el-table
-            :data="tableData"
+            :data="tableFileData"
             style="width: 100%"
-            height="250"
+            height="40vh"
             :scrollbar-always-on="true"
           >
             <el-table-column fixed prop="date" label="名称" width="500">
@@ -48,17 +51,23 @@
                 <div>
                   <img
                     class="table_icon"
-                    src="@/assets/images/fileBox.png"
+                    :src="setIcon(scope.row.fileType)"
                     alt=""
                     style=""
                   />
-                  {{ scope.row.date }}
+                  {{ scope.row.fileName }}
                 </div>
               </template>
             </el-table-column>
-            <el-table-column prop="name" label="时间" width="200" />
-            <el-table-column prop="state" label="类型" width="180" />
-            <el-table-column prop="city" label="大小" width="160" />
+            <el-table-column prop="createTime" label="时间" width="200" />
+            <el-table-column prop="fileType" label="类型" width="180" />
+            <el-table-column label="大小">
+              <template #default="scope">
+                <span>
+                  {{ formatFileSize(scope.row.fileSize) }}
+                </span>
+              </template>
+            </el-table-column>
           </el-table>
         </el-collapse-item>
       </div>
@@ -70,7 +79,7 @@
           <!-- 平铺 -->
           <el-scrollbar height="360px">
             <div class="tile_box">
-              <div class="file_box" v-for="item in 20" :key="item">
+              <div class="file_box" v-for="item in tableData" :key="item">
                 <img
                   class="big_file_img"
                   src="@/assets/images/fileBox.png"
@@ -105,90 +114,172 @@
 </template>
 
 <script setup>
-import { onMounted, ref } from "vue";
-import TopTabs from "@/components/TopTabs/index.vue"
-import { listRecent } from "@/api/biz/recent";
+import { onMounted, ref, toRaw } from "vue";
+// import TopTabs from "@/components/TopTabs/index.vue"
+import { listRecent, getRecent } from "@/api/biz/recent";
+import { getInfo } from "@/api/biz/info";
+import { getDir } from "@/api/biz/dir";
+import documents from "@/api/document/document";
+import myfile from "@/api/myfile/myfile";
 const activeNames = ref(["folder", "file"]);
-const isList = ref(false); //控制显示方式
+const isList = ref(true); //控制显示方式
+const tableFolderData = ref([]);
+const tableFileData = ref([]);
+const thisFolder = ref(); //当前文件夹
+const newDirId = ref();
+const newSpaceId = ref();
+
+//----引入图片----
+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";
+// -------
 
 onMounted(() => {
   getList();
 });
 const getList = async () => {
-  const res = await listRecent();
-  console.log("res = ", res);
+  const resY = await listRecent({ isFolder: "Y" });
+  const resN = await listRecent({ isFolder: "N" });
+  if (resY.code === 200) {
+    var arr = [];
+    resY.rows.map(async (item) => {
+      const detail = await getDir(item.relaId);
+      tableFolderData.value.push(JSON.parse(JSON.stringify(detail.data)));
+    });
+    console.log("resYarr", arr);
+    // tableFolderData.value = resY.rows;
+    console.log("tableData.value = ", toRaw(tableFolderData.value));
+  }
+  if (resN.code === 200) {
+    var arr = [];
+    resN.rows.map(async (item) => {
+      const detail = await getInfo(item.relaId);
+      tableFileData.value.push(detail);
+    });
+    console.log("resNarr", arr);
+    // tableFileData.value = resN.rows;
+    console.log("tableFileData.value = ", tableFileData.value);
+  }
 };
+const getFileDetail = () => {};
 const handleChange = (val) => {
   // console.log(val);
 };
-const tableData = [
-  {
-    date: "2016-05-03",
-    name: "Tom",
-    state: "California",
-    city: "Los Angeles",
-    address: "No. 189, Grove St, Los Angeles",
-    zip: "CA 90036",
-  },
-  {
-    date: "2016-05-02",
-    name: "Tom",
-    state: "California",
-    city: "Los Angeles",
-    address: "No. 189, Grove St, Los Angeles",
-    zip: "CA 90036",
-  },
-  {
-    date: "2016-05-04",
-    name: "Tom",
-    state: "California",
-    city: "Los Angeles",
-    address: "No. 189, Grove St, Los Angeles",
-    zip: "CA 90036",
-  },
-  {
-    date: "2016-05-01",
-    name: "Tom",
-    state: "California",
-    city: "Los Angeles",
-    address: "No. 189, Grove St, Los Angeles",
-    zip: "CA 90036",
-  },
-  {
-    date: "2016-05-08",
-    name: "Tom",
-    state: "California",
-    city: "Los Angeles",
-    address: "No. 189, Grove St, Los Angeles",
-    zip: "CA 90036",
-  },
-  {
-    date: "2016-05-06",
-    name: "Tom",
-    state: "California",
-    city: "Los Angeles",
-    address: "No. 189, Grove St, Los Angeles",
-    zip: "CA 90036",
-  },
-  {
-    date: "2016-05-07",
-    name: "Tom",
-    state: "California",
-    city: "Los Angeles",
-    address: "No. 189, Grove St, Los Angeles",
-    zip: "CA 90036",
-  },
-];
+function changeFile(row, num) {
+  row = toRaw(row);
+  thisFolder.value = row;
+  console.log("changeFilerow2", row);
+  newDirId.value = row.dirId;
+  newSpaceId.value = row.spaceId;
+  documents
+    .getALLdocument({ parentId: row.dirId - 0, spaceId: row.spaceId - 0 })
+    .then((res) => {
+      tableFolderData.value = res.data;
+      // if (res.code === 200) {
+      if (res.data.length === 0) {
+        myfile
+          .getById(newDirId.value)
+          .then((res) => {
+            if (res.code === 200) {
+              tableFileData.value = res.rows;
+            }
+          })
+          .catch((error) => {
+            console.error("myfile.getAllFileMenu 调用失败:", error);
+          });
+      } else {
+        myfile
+          .getById(row.dirId - 0)
+          .then((res) => {
+            if (res.code === 200) {
+              tableFileData.value = res.rows;
+            }
+          })
+          .catch((error) => {
+            console.error("myfile.getAllFileMenu 调用失败:", error);
+          });
+      }
+      // }
+    });
+}
+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";
+  }
+}
+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;
+  }
+};
 </script>
 
 <style lang="scss" scoped>
+.page {
+  height: 100%;
+  height: 100%;
+  background-color: #fff;
+}
 .table_icon {
   height: 27px;
   width: 27px;
   vertical-align: middle;
 }
+.collapse_Item {
+  height: 50%;
+}
 ::v-deep .el-collapse-item__content {
   padding-bottom: 0;
+  height: 50% !important;
 }
 ::v-deep .el-collapse-item__header {
   background-color: #ebeff6 !important;
@@ -218,7 +309,7 @@ const tableData = [
 }
 .collapseItem_title {
   position: relative;
-  left: 40px;
+  left: 60px;
   color: #2e6bc8;
   font-family: Inter-Medium;
   font-size: 12px;
@@ -235,7 +326,7 @@ const tableData = [
 }
 ::v-deep .el-table__body tbody [class*="column_"] {
   text-align: right;
-  &:nth-child(4n+1){
+  &:nth-child(4n + 1) {
     text-align: left;
   }
 }

src/views/myfile/MyFile.vue

@@ -93,7 +93,7 @@
                                 </span>
                             </div>
                         </div>
-                        <div
+                        <div v-if="thisFolder.dirType"
                             style="display: flex;width: 82px;height: 32px;justify-content: flex-start;align-items: center;">
                             <div style="margin-left: 5px;">
                                 <el-icon
@@ -106,6 +106,19 @@
                                 <span style="font-size: 14px;">新建</span>
                             </div>
                         </div>
+                        <div v-else
+                            style="display: flex;opacity:0.5;width: 82px;height: 32px;justify-content: flex-start;align-items: center;">
+                            <div style="margin-left: 5px;">
+                                <el-icon
+                                    style="background-color: #7084B4;width: 24px;height: 24px;border-radius: 50%;color: white;"
+                                    @click="createNewMenu(0)">
+                                    <Plus />
+                                </el-icon>
+                            </div>
+                            <div style="margin-left: 5px;" @click="createNewMenu(0)">
+                                <span style="font-size: 14px;">新建</span>
+                            </div>
+                        </div>
                         <template v-for="(item, index) in useMenu" :key="index">
                             <div :class="{ 'isCheck': haveCheck }"
                                 style="display: flex;width: 82px;opacity:0.5;height: 32px;justify-content: flex-start;align-items: center;line-height: 18px;cursor: pointer;"

vite.config.js

@@ -1,74 +0,0 @@
-import {
-	defineConfig,
-	loadEnv
-} from 'vite'
-import path from 'path'
-import createVitePlugins from './vite/plugins'
-
-// https://vitejs.dev/config/
-export default defineConfig(({
-								 mode,
-								 command
-							 }) => {
-	const env = loadEnv(mode, process.cwd())
-	const {
-		VITE_APP_ENV
-	} = env
-	return {
-		// 部署生产环境和开发环境下的URL。
-		// 默认情况下，vite 会假设你的应用是被部署在一个域名的根路径上
-		// 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.ruoyi.vip/admin/，则设置 baseUrl 为 /admin/。
-		base: VITE_APP_ENV === 'production' ? '/' : '/',
-		plugins: createVitePlugins(env, command === 'build'),
-		resolve: {
-			// https://cn.vitejs.dev/config/#resolve-alias
-			alias: {
-				// 设置路径
-				'~': path.resolve(__dirname, './'),
-				// 设置别名
-				'@': path.resolve(__dirname, './src')
-			},
-			// https://cn.vitejs.dev/config/#resolve-extensions
-			extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
-		},
-		// vite 相关配置
-		server: {
-			port: 80,
-			host: true,
-			open: true,
-			proxy: {
-				// https://cn.vitejs.dev/config/#server-proxy
-				'/dev-api': {
-					// target: 'http://192.168.1.28:8080/',
-					target: 'http://localhost:8080/',
-					// target:'http://192.168.1.28:8080/',
-					changeOrigin: true,
-					rewrite: (p) => p.replace(/^\/dev-api/, '')
-				},
-				//websocket代理
-				'/websocket': {
-					target:'ws://localhost:8080/websocket',
-					// target:'ws://192.168.1.28:8080/websocket',
-					// target:'ws://192.168.1.11:8080/websocket',
-					changeOrigin: true,
-					rewrite: (p) => p.replace(/^\/websocket/, '')
-				}
-			}
-		},
-		//fix:error:stdin>:7356:1: warning: "@charset" must be the first rule in the file
-		css: {
-			postcss: {
-				plugins: [{
-					postcssPlugin: 'internal:charset-removal',
-					AtRule: {
-						charset: (atRule) => {
-							if (atRule.name === 'charset') {
-								atRule.remove();
-							}
-						}
-					}
-				}]
-			}
-		}
-	}
-})