完成目录的添加和展示

pphboy · Apr 27, 2023 · 174f191 · 174f191
1 parent 34c07b6
commit 174f191
Show file tree

Hide file tree

Showing 10 changed files with 496 additions and 227 deletions.
diff --git a/src/components/FileList/FileItemList.vue b/src/components/FileList/FileItemList.vue
@@ -1,97 +1,136 @@
 <script setup lang=ts>
- import { PiFileDirectory,PiFile } from "@/types/File";
-import {defineProps,ref,reactive,computed,Ref} from "vue";
+import { PiFileDirectory, PiFile } from "@/types/File";
+import { defineProps, ref, reactive, computed, Ref } from "vue";
+import { useFileDirectoryStore } from "@/store/modules/fileDirectory";
+import { useProjectDetailStore } from "@/store/modules/projectDetail";
+import { UploadProps,ElMessage,UploadFile, ElNotification} from "element-plus";
+import { useGlobalStore } from "@/store/modules/global";
+import { saveStatusAndRefresh } from "@/services/FileDirectoryService";
 
- interface FileItemListProps{
-  fileDirectory:PiFileDirectory,
- }
+interface FileItemListProps {
+  fileDirectory: PiFileDirectory,
+}
+const fileDirectoryStore = useFileDirectoryStore();
+const projectDetailStore = useProjectDetailStore();
+const globalStore=useGlobalStore();
+
+const props = defineProps<FileItemListProps>();
 
- const props = defineProps<FileItemListProps>();
- 
+const copyDirectory = ref<PiFileDirectory>();
 
 /**
  * file table
  */
 const search = ref('')
 const filterTableData = computed(() =>
-  // props.directoryList.filter(
-  //   (data) =>
-  //   {
-  //     !search.value || data.fileDirectoryTitle.toLowerCase().includes(search.value.toLowerCase());
-  //   }
-  // )
-  {}
+// props.directoryList.filter(
+//   (data) =>
+//   {
+//     !search.value || data.fileDirectoryTitle.toLowerCase().includes(search.value.toLowerCase());
+//   }
+// )
+{ }
 )
+const handleOpenDirectory = (index: number, row: PiFileDirectory) => {
+  fileDirectoryStore.setDetail(row);
+}
+
+const setBack = () => {
+  fileDirectoryStore.setBack();
+}
+
 const handleEdit = (index: number, row: PiFile) => {
   console.log(index, row)
 }
 const handleDelete = (index: number, row: PiFile) => {
   console.log(index, row)
 }
 
+
+const uploadSuccess: UploadProps['onSuccess'] = (response: any, uploadFile: UploadFile)  => {
+  if("status" in response && "message" in response){
+    const {status,message} = response;
+    console.log(response,uploadFile)
+    if(status){
+      saveStatusAndRefresh();
+      ElMessage.success(message)
+    }else {
+      ElMessage.error(message)
+    }
+  }
+}
+const uploadError: UploadProps['onError'] = (error :any)  => {
+  ElNotification.error("上传失败，请检查文件大小，文件大小不可超过100MB")
+}
+
+
 </script>
 
 <template>
-      <el-table :data="fileDirectory.childDirectoryList" style="width: 100%" empty-text="本目录中没有文件夹">
-          <el-table-column label="编号"  prop="fileDirectoryId" />
-          <el-table-column  label="文件名" prop="fileDirectoryTitle" />
-          <el-table-column  label="文件类型" >
-            <template #default="scope">
-              <div>
-                文件夹
-              </div>
-            </template>
-          </el-table-column>
-          <el-table-column  label="操作"  align="center">
-            <template #default="scope">
-              <el-button size="small" type="success" @click="handleEdit(scope.$index, scope.row)"
-                >打开</el-button
-              >
-              <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
-                >重命名</el-button
-              >
-              <el-button
-                size="small"
-                type="danger"
-                @click="handleDelete(scope.$index, scope.row)"
-                >删除</el-button
-              >
-            </template>
-          </el-table-column>
-          <template #header>
-            <el-input v-model="search" size="small" placeholder="搜索文件名" />
-          </template>
-      </el-table>
-      <el-table :data="fileDirectory.fileList" :show-header="false" style="width: 100%" empty-text="本目录中没有文件">
-          <el-table-column label="FileID" prop="fileId" />
-          <el-table-column label="Filename" prop="filename" />
-          <el-table-column  label="文件类型">
-            <template #default="scope" >
-              <div>
-                文件
-              </div>
-            </template>
-          </el-table-column>
-          <el-table-column  align="center">
-            <template #default="scope">
-              <el-button type="primary"  size="small" @click="handleEdit(scope.$index, scope.row)"
-                >下载</el-button
-              >
-              <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
-                >重命名</el-button
-              >
-              <el-button
-                size="small"
-                type="danger"
-                @click="handleDelete(scope.$index, scope.row)"
-                >删除</el-button
-              >
-            </template>
-          </el-table-column>
-        </el-table>
-</template>
-
-<style scoped>
+  <el-button @click="fileDirectoryStore.setIndex()">首页</el-button>
+  <div v-if="fileDirectoryStore.copy">
+  <el-button title="返回到上一个过来的路径"  @click="setBack">返回</el-button>
+  <el-upload
+   class="upload-demo"
+    :action="`/api/project/file/project/${projectDetailStore.projectDetail.projectId}/${fileDirectoryStore.directoryDetail.fileDirectoryId}`" 
+    :headers="{
+      'Authorization':globalStore.token
+    }"
+    :on-error="uploadError"
+    :on-success="uploadSuccess"
+    >
+    <el-button type="primary">Click to upload</el-button>
+    <template #tip>
+      <div class="el-upload__tip">
+        {{ fileDirectoryStore.directoryDetail.fileDirectoryId }}
+      </div>
+    </template>
+  </el-upload>
 
+  </div>
+  <el-table :data="fileDirectory.childDirectoryList" style="width: 100%" empty-text="本目录中没有文件夹">
+    <el-table-column label="编号" prop="fileDirectoryId" />
+    <el-table-column label="文件名" prop="fileDirectoryTitle" />
+    <el-table-column label="文件类型">
+      <template #default="scope">
+        <div>
+          文件夹
+        </div>
+      </template>
+    </el-table-column>
+    <el-table-column label="创建时间" prop="createTime"></el-table-column>
+    <el-table-column label="更新时间" prop="updateTime"></el-table-column>
+    <el-table-column label="操作" align="center">
+      <template #default="scope">
+        <el-button size="small" type="success" @click="handleOpenDirectory(scope.$index, scope.row)">打开</el-button>
+        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">重命名</el-button>
+        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+      </template>
+    </el-table-column>
+    <template #header>
+      <el-input v-model="search" size="small" placeholder="搜索文件名" />
+    </template>
+  </el-table>
+  <el-table :data="fileDirectory.fileList" :show-header="false" style="width: 100%" empty-text="本目录中没有文件">
+    <el-table-column label="FileID" prop="fileId" />
+    <el-table-column label="Filename" prop="filename" />
+    <el-table-column label="文件类型">
+      <template #default="scope">
+        <div>
+          文件
+        </div>
+      </template>
+    </el-table-column>
+    <el-table-column label="创建时间" prop="createTime"></el-table-column>
+    <el-table-column label="更新时间" prop="updateTime"></el-table-column>
+    <el-table-column align="center">
+      <template #default="scope">
+        <el-button type="primary" size="small" @click="handleEdit(scope.$index, scope.row)">下载</el-button>
+        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">重命名</el-button>
+        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
 
-</style>
+<style scoped></style>
diff --git a/src/services/FileDirectoryService.ts b/src/services/FileDirectoryService.ts
@@ -0,0 +1,155 @@
+import { API } from "@/types/API";
+import axios from '@/utils/axios';
+import { ElLoading, ElMessage} from 'element-plus';
+
+import { DirectoryDto } from "./dto/FileDirectoryDto";
+import { PiFileDirectory } from "@/types/File";
+
+import { useFileDirectoryStore } from "@/store/modules/fileDirectory";
+import { useProjectDetailStore } from "@/store/modules/projectDetail";
+
+/**
+ * 获取当前项目所有的文件目录
+ * @returns 
+ */
+export async function getProjectAllFileDirectory(): Promise<Array<PiFileDirectory>> {
+  const projectDetailStore = useProjectDetailStore();
+  const fileDirectoryStore = useFileDirectoryStore();
+  return new Promise<Array<PiFileDirectory>>((resolve, reject) => {
+    const loadingInstance = ElLoading.service({ fullscreen: true });
+    axios.get(API.PROJECT.FILE_DIRECTORY.ALL(projectDetailStore.projectDetail.projectId)).then(res => {
+      console.log("getProjectAllFileDirectory",res);
+      if (res.data.status) {
+        // ElMessage.success(res.data.message)
+        // 更新整个项目
+        fileDirectoryStore.setDirectory(res.data.data)
+        resolve(res.data.data)
+      }else 
+        reject([]);
+    }).catch((err) => {
+      console.log(`[createDirectory] `, err);
+      reject([]);
+    }).finally(() => {
+      setTimeout(() => {
+        loadingInstance.close();
+      }, 300)
+    })
+  });
+}
+
+
+
+/**
+ * 创建目录
+ * @param directory 目录对象
+ * @returns 
+ */
+export async function createDirectory(directory: DirectoryDto): Promise<boolean> {
+  const projectDetailStore = useProjectDetailStore();
+  return new Promise<boolean>((resolve, reject) => {
+    directory.projectId = projectDetailStore.projectDetail.projectId;
+    const loadingInstance = ElLoading.service({ fullscreen: true });
+    axios.post(API.PROJECT.FILE_DIRECTORY.CREATE,directory).then(res => {
+      console.log("createDirectory",directory);
+      if (res.data.status) {
+        ElMessage.success(res.data.message)
+        // 更新整个目录
+        saveStatusAndRefresh();
+        resolve(true)
+      }else 
+        reject(false);
+    }).catch((err) => {
+      console.log(`[createDirectory] `, err);
+      reject(false);
+    }).finally(() => {
+      setTimeout(() => {
+        loadingInstance.close();
+      }, 100)
+    })
+  });
+}
+
+
+/**
+ * 
+ * 文件重命名
+ * @param directory 
+ * @returns 
+ */
+export async function renameDirectory(directory: DirectoryDto): Promise<boolean> {
+  return new Promise<boolean>((resolve, reject) => {
+    axios.put(API.PROJECT.FILE_DIRECTORY.RENAME,directory).then(res => {
+      console.log("renameDirectory",res);
+      if (res.data.status) {
+        ElMessage.success(res.data.message)
+        // 更新整个项目
+        resolve(true)
+      }else 
+        reject(false);
+    }).catch((err) => {
+      console.log(`[renameDirectory] `, err);
+      reject(false);
+    }).finally(() => {
+
+    })
+  });
+}
+
+/**
+ * 删除文件 
+ * @param directory 
+ * @returns 
+ */
+export async function deleteDirectory(directory: DirectoryDto): Promise<boolean> {
+  return new Promise<boolean>((resolve, reject) => {
+    axios.delete(API.PROJECT.FILE_DIRECTORY.DELETE,{data:directory}).then(res => {
+      console.log("deleteDirectory",res);
+      if (res.data.status) {
+        ElMessage.success(res.data.message)
+        // 更新整个项目
+        saveStatusAndRefresh();
+        resolve(true)
+      }else 
+        reject(false);
+    }).catch((err) => {
+      console.log(`[deleteDirectory] `, err);
+      reject(false);
+    }).finally(() => {
+    })
+  });
+}
+
+/**
+ * 这是一个递归搜索算法，就是为了拿到数组里面等于id的值
+ * @param id 
+ * @param directoryList 
+ * @returns 
+ */
+export function getEqualIdDirectory(id:number,directoryList?:Array<PiFileDirectory>){
+  const fileDirectoryStore = useFileDirectoryStore();
+  if(directoryList && directoryList.length){
+    for(let i = 0;i<directoryList.length;i++){
+      const current = directoryList[i];
+      if(current.fileDirectoryId == id){
+        fileDirectoryStore.directoryDetail = current;
+        return current
+      }else {
+        getEqualIdDirectory(id,current.childDirectoryList);
+      }
+    }
+  }
+}
+
+/**
+ * 保存当前的打开目录的状态，并刷新数据
+ */
+export function saveStatusAndRefresh(){
+  const fileDirectoryStore = useFileDirectoryStore();
+  const id = fileDirectoryStore.directoryDetail.fileDirectoryId;
+  const copy = {...fileDirectoryStore.copy};
+
+  getProjectAllFileDirectory().then(res=>{
+    getEqualIdDirectory(id,fileDirectoryStore.directoryList);
+    fileDirectoryStore.copy = {...copy} as PiFileDirectory;
+  });
+}
diff --git a/src/services/ProjectDetailService.ts b/src/services/ProjectDetailService.ts
@@ -6,6 +6,7 @@ import { useProjectDetailStore } from "@/store/modules/projectDetail";
 import { MissionTodayAndLastDto } from "./dto/MissionTodayAndLastDto";
 import { getMemberList } from "./MemberService";
 import { getAllMissionList } from "./ProjectListService";
+import { getProjectAllFileDirectory } from "./FileDirectoryService";
 
 /**
  * 获取项目详情
@@ -49,6 +50,8 @@ export async function refreshProject(): Promise<PiProject> {
   getAllMissionList();
   // 获取未加入本项目的用户列表
   getMemberList();
+  // 刷新文件目录 
+  getProjectAllFileDirectory();
   return getProjectDetail(projectId())
 }