feat: 删除文件时显示一个对话框

src/api/file.js

@@ -26,9 +26,9 @@ export const GetAllFile = userId => {
     return axios.get(`${FILE_MODULE}/get/all`, {
         params:{
             userId: userId
-        }}).then(
-            res => {
-                return res.data;
+        }
+    }).then( res => {
+        return res.data;
     });
 }
 
@@ -54,7 +54,7 @@ export const getFileDetail = fileId => {
         params: {
             fileId: fileId
         }
-    }).then(res => {
+    }).then( res => {
         return res.data;
     })
 }
@@ -164,14 +164,16 @@ export const getFileDetail = fileId => {
 
 /**
  *  删除文件 GET /delete
- * @param {*} payload
+ * @param {*} fileId
  * @returns
  */
-export const deleteFile = payload => {
-    console.log(payload);
-    const {fileId} = payload;
-    return axios.get(`${FILE_MODULE}/delete`, {params:{fields:fields}}).then(res => {
-        return res.data;
+export const deleteFile = fileId => {
+    return axios.get(`${FILE_MODULE}/delete`, {
+        params:{
+            fileId: fileId
+        }
+    }).then( res => {
+            return res.data;
     });
 }
 

src/views/file/FileList.vue

@@ -24,9 +24,12 @@
                 <!----------------------------todo------------------------------->
                 <!----------------------------获取文件详细信息、跳转到响应页面；删除文件------------------------------->
                 <div style="display:flex;width: 100%;justify-content:space-around;">
-                  <el-button size="small" type="primary" @click="handleFileDetail(scope.row.fileId)">查看详情</el-button>
+                  <el-button size="small" @click="handleFileDetail(scope.row.fileId)">查看详情</el-button>
 
-                  <el-button size="small" @click="handleFileDelete(scope.$index)">删除文件</el-button>
+                <!--  scope.$index 是数组下标,这里再传一个fileId             handleFileDelete(scope.$index,scope.row.fileId)   -->
+                  <el-button size="small" type="danger"  @click="handleDeleteDialog(scope.row.fileId);dialogVisible=true">
+                    删除文件
+                  </el-button>
                 </div>
               </template>
             </el-table-column>
@@ -44,7 +47,7 @@
             <el-table-column width="240" label="操作">
               <template #default="scope">
                 <div style="display:flex;width: 100%;justify-content:space-around;">
-                  <el-button size="small" type="primary" @click="handlePicDetail(scope.row.fileId)">查看详情</el-button>
+                  <el-button size="small" type="primary" @click="handlePicDetail(scope.row.picId)">查看详情</el-button>
 
                   <el-button size="small" @click="handlePicDelete(scope.$index)">删除图片</el-button>
                 </div>
@@ -59,13 +62,33 @@
       </el-tabs>
     </div>
 
+    <!--  对话框  -->
+    <el-dialog
+        v-model="dialogVisible"
+        title="确认删除"
+        width="30%"
+    >
+      <span>确认要删除该文件吗?</span>
+      <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="dialogVisible = false;toDeleteFileId=0;">
+          取消
+        </el-button>
+        <el-button type="danger" @click="dialogVisible = false;toDeleteFileId=0;handleFileDelete()">
+          确认
+        </el-button>
+      </span>
+      </template>
+    </el-dialog>
+
   </div>
 </template>
 
 <script>
 import {ref, reactive} from "vue";
-import{GetAllFile} from "../../api/file";
+import {deleteFile, GetAllFile} from "../../api/file";
 import {useRouter} from "vue-router";
+import {ElMessage} from "element-plus";
 
 export default {
   name: "fileList",
@@ -89,6 +112,8 @@ export default {
         }
       ],
     });
+    let dialogVisible=ref(false);
+    let toDeleteFileId=ref(0);
 
     //用户Id => 文件列表
     const getFileList=(userId)=>{
@@ -98,16 +123,11 @@ export default {
         }
         else{
           console.log("getFileList Error!");
+          ElMessage.error("获取文件列表失败!")
         }
       })
     };
-    //删除对应文件
-    const handleFileDelete = (index) => {
-      console.log("handleFileDelete")
-      console.log(index)
-      state.fileList.splice(index, 1);
-      //todo:调用删除接口
-    };
+
     //查看文件详情
     const handleFileDetail=(fileId)=>{
       router.push({
@@ -118,6 +138,25 @@ export default {
       })
     }
 
+    //打开提示确认删除的对话框，将fileId保存下来
+    const handleDeleteDialog = (fileId)=>{
+      toDeleteFileId=fileId;
+      ElMessage.info("fileId:"+fileId)
+    }
+
+    //删除对应文件
+    const handleFileDelete = (fileId) => {
+      deleteFile(fileId).then(res=>{
+        if(res.code===200){
+          ElMessage.success("删除成功!")
+          getFileList(userId);
+        }
+        else{
+          ElMessage.error("删除失败!错误码:"+res.status)
+        }
+      })
+    };
+
     //todo:调用删除图片的接口,后面再做吧
     const handlePicDelete = (index) => {
       console.log("handlePicDelete")
@@ -137,6 +176,11 @@ export default {
     return {
       currentTab,
       state,
+
+      dialogVisible,
+      toDeleteFileId,
+      handleDeleteDialog,
+
       handleFileDetail,
       handleFileDelete,
       handlePicDetail,