完成文件所有

pphboy · Apr 27, 2023 · 21a4977 · 21a4977
1 parent 174f191
commit 21a4977
Show file tree

Hide file tree

Showing 8 changed files with 324 additions and 78 deletions.
diff --git a/src/components/FileList/FileItemList.vue b/src/components/FileList/FileItemList.vue
@@ -3,16 +3,18 @@ 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 { ElMessageBox,UploadProps, ElMessage, UploadFile, ElNotification } from "element-plus";
 import { useGlobalStore } from "@/store/modules/global";
-import { saveStatusAndRefresh } from "@/services/FileDirectoryService";
+import {  saveStatusAndRefresh,renameDirectoryFunc, deleteDirectory, deleteDirectoryFunc } from "@/services/FileDirectoryService";
+import { renameFileFunc,deleteFileFunc,downloadFile} from '@/services/FileService'
+import { DirectoryDto } from "@/services/dto/FileDirectoryDto";
 
 interface FileItemListProps {
   fileDirectory: PiFileDirectory,
 }
 const fileDirectoryStore = useFileDirectoryStore();
 const projectDetailStore = useProjectDetailStore();
-const globalStore=useGlobalStore();
+const globalStore = useGlobalStore();
 
 const props = defineProps<FileItemListProps>();
 
@@ -39,53 +41,39 @@ 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){
+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 {
+    } else {
       ElMessage.error(message)
     }
   }
 }
-const uploadError: UploadProps['onError'] = (error :any)  => {
+const uploadError: UploadProps['onError'] = (error: any) => {
   ElNotification.error("上传失败，请检查文件大小，文件大小不可超过100MB")
 }
 
-
 </script>
 
 <template>
-  <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 class="class-flex">
+    <el-button @click="fileDirectoryStore.setIndex()">首页</el-button>
+    <div class="class-flex" v-if="fileDirectoryStore.copy">
+      <div>&emsp;</div>
+      <el-button title="返回到上一个过来的路径" @click="setBack">返回</el-button>
+      <div>&emsp;</div>
+      <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">上传文件</el-button>
+      </el-upload>
+    </div>
 
   </div>
   <el-table :data="fileDirectory.childDirectoryList" style="width: 100%" empty-text="本目录中没有文件夹">
@@ -103,8 +91,8 @@ const uploadError: UploadProps['onError'] = (error :any)  => {
     <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>
+        <el-button size="small" @click="renameDirectoryFunc(scope.row)">重命名</el-button>
+        <el-button size="small" type="danger" @click="deleteDirectoryFunc(scope.row)">删除</el-button>
       </template>
     </el-table-column>
     <template #header>
@@ -125,12 +113,17 @@ const uploadError: UploadProps['onError'] = (error :any)  => {
     <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>
+        <el-button type="primary" size="small" @click="downloadFile(`http://localhost:8085${scope.row.filePath}`,scope.row.filename)">下载</el-button>
+        <el-button size="small" @click="renameFileFunc(scope.row)">重命名</el-button>
+        <el-button size="small" type="danger" @click="deleteFileFunc(scope.row)">删除</el-button>
       </template>
     </el-table-column>
   </el-table>
 </template>
 
-<style scoped></style>
+<style scoped>
+
+.class-flex{
+  display: flex;
+}
+</style>
diff --git a/src/components/Header.vue b/src/components/Header.vue
@@ -5,6 +5,9 @@ import { PiProject } from '@/types/Project'
 import MessageBag from '@/components/MessageList/MessageBag.vue'
 import {FormRules,FormInstance, ElNotification} from 'element-plus'
 import {saveProject,getProjectList} from '@/services/ProjectListService';
+import { useProjectDetailStore } from '@/store/modules/projectDetail';
+
+const projectDetailStore = useProjectDetailStore();
 
 const newProjectDialog = ref(false);
 
@@ -109,6 +112,7 @@ const createSubmit = async (formEl: FormInstance | undefined) => {
     </el-row>
 
     <div class="nav-btns" v-if=" type == 'ProjectDetail'">
+      <el-button class="nav-btn" type="primary" title="项目名称">{{  projectDetailStore.projectDetail.projectName}}</el-button>
       <el-button class="nav-btn" @click="$router.push({name:'ProjectDetailMain'})">看板</el-button>
       <el-button class="nav-btn" @click="$router.push({name:'ProjectTodoList'})">列表</el-button>
       <el-button class="nav-btn" @click="$router.push({name:'ProjectFileList'})">文件</el-button>

diff --git a/src/services/FileDirectoryService.ts b/src/services/FileDirectoryService.ts
@@ -1,6 +1,6 @@
 import { API } from "@/types/API";
 import axios from '@/utils/axios';
-import { ElLoading, ElMessage} from 'element-plus';
+import {ElMessageBox, ElLoading, ElMessage} from 'element-plus';
 
 import { DirectoryDto } from "./dto/FileDirectoryDto";
 import { PiFileDirectory } from "@/types/File";
@@ -47,7 +47,9 @@ export async function getProjectAllFileDirectory(): Promise<Array<PiFileDirector
 export async function createDirectory(directory: DirectoryDto): Promise<boolean> {
   const projectDetailStore = useProjectDetailStore();
   return new Promise<boolean>((resolve, reject) => {
+    // 设置项目ID
     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);
@@ -77,7 +79,11 @@ export async function createDirectory(directory: DirectoryDto): Promise<boolean>
  * @returns 
  */
 export async function renameDirectory(directory: DirectoryDto): Promise<boolean> {
+  const projectDetailStore = useProjectDetailStore();
   return new Promise<boolean>((resolve, reject) => {
+    // 设置项目ID
+    directory.projectId = projectDetailStore.projectDetail.projectId;
+
     axios.put(API.PROJECT.FILE_DIRECTORY.RENAME,directory).then(res => {
       console.log("renameDirectory",res);
       if (res.data.status) {
@@ -97,11 +103,16 @@ export async function renameDirectory(directory: DirectoryDto): Promise<boolean>
 
 /**
  * 删除文件 
+ * 因为是删除，如果要保存的打开状态不存在删除的目录，则显示的就是首页
  * @param directory 
  * @returns 
  */
 export async function deleteDirectory(directory: DirectoryDto): Promise<boolean> {
+  const projectDetailStore = useProjectDetailStore();
   return new Promise<boolean>((resolve, reject) => {
+    // 设置项目ID
+    directory.projectId = projectDetailStore.projectDetail.projectId;
+
     axios.delete(API.PROJECT.FILE_DIRECTORY.DELETE,{data:directory}).then(res => {
       console.log("deleteDirectory",res);
       if (res.data.status) {
@@ -146,10 +157,99 @@ export function getEqualIdDirectory(id:number,directoryList?:Array<PiFileDirecto
 export function saveStatusAndRefresh(){
   const fileDirectoryStore = useFileDirectoryStore();
   const id = fileDirectoryStore.directoryDetail.fileDirectoryId;
-  const copy = {...fileDirectoryStore.copy};
+
+  let copy:any = undefined;
+  // 必须要有 目录的时候，copy存在才有意义，如果没有目录的时候也设置copy就会直接在首页打开“潘多拉报错”
+  if(fileDirectoryStore.copy){
+    copy = {...fileDirectoryStore.copy};
+  }
 
   getProjectAllFileDirectory().then(res=>{
     getEqualIdDirectory(id,fileDirectoryStore.directoryList);
-    fileDirectoryStore.copy = {...copy} as PiFileDirectory;
+    if(fileDirectoryStore.copy){
+      fileDirectoryStore.copy = {...copy} as PiFileDirectory;
+    }
   });
-}
+}
+
+export const createDirectoryFunc = (parent?:PiFileDirectory)=>{
+  ElMessageBox.prompt('请输入文件目录名', '创建文件目录', {
+    confirmButtonText: '创建',
+    cancelButtonText: '取消',
+    inputPlaceholder:"请输入文件目录名",
+    inputPattern:/^.{1,50}$/,
+    inputErrorMessage: '文件目录在1~50之间的长度',
+  })
+    .then(({ value }) => {
+      if(!value.trim()){
+        ElMessage.error("禁止使用空串作为目录名");
+        return;
+      }
+      const directory:DirectoryDto = {
+        parentId:parent?.fileDirectoryId,
+        directoryName:value,
+      };
+      createDirectory(directory)
+    })
+    .catch(() => {
+      ElMessage({
+        type: 'info',
+        message: '取消添加',
+      })
+    })
+}
+
+export const renameDirectoryFunc = (parent?:PiFileDirectory)=>{
+  ElMessageBox.prompt('请输入文件目录名', `您正在修改名为[${parent?.fileDirectoryTitle}]的文件夹名称`, {
+    confirmButtonText: '编辑',
+    cancelButtonText: '取消',
+    inputPlaceholder:"请输入文件目录名",
+    inputPattern:/^.{1,50}$/,
+    inputValue:parent?.fileDirectoryTitle,
+    type:'warning',
+    inputErrorMessage: '文件目录在1~50之间的长度',
+  })
+    .then(({ value }) => {
+      if(!value.trim()){
+        ElMessage.error("禁止使用空串作为目录名");
+        return;
+      }
+      const directory:DirectoryDto = {
+        directoryName:value,
+        directoryId:parent?.fileDirectoryId,
+      };
+      renameDirectory(directory)
+      // 其实传进来的数据肯定是存在的，但个判断是为了不报错
+      if( parent && parent.fileDirectoryTitle){
+        parent.fileDirectoryTitle=value
+      }
+    })
+
+    .catch(() => {
+      ElMessage({
+        type: 'info',
+        message: '取消编辑',
+      })
+    })
+}
+
+export const deleteDirectoryFunc = (parent?:PiFileDirectory)=>{
+  ElMessageBox.prompt('你正在执行危险操作,删除后数据找回需要到数据库内，请谨慎操作', `您正在删除名为[${parent?.fileDirectoryTitle}]的文件夹名称`, {
+    confirmButtonText: '删除',
+    cancelButtonText: '取消',
+    type:'error',
+    showInput:false
+  })
+    .then(({ value }) => {
+      const directory:DirectoryDto = {
+        directoryId:parent?.fileDirectoryId,
+      };
+      deleteDirectory(directory)
+    })
+    .catch(() => {
+      ElMessage({
+        type: 'info',
+        message: '取消删除',
+      })
+    })
+}