Vue3实战uu云盘（三）：文件删除+文件移动+目录导航+上传优化/文件过滤/搜索

一、文件删除

（1）选中了之后才可以删除，没有选中时就显示暗调删除按钮
（2）实现选中高亮功能
（3）单个删除
（4）批量删除

Main.vue中 

                <!-- 按钮3 -->
                <!-- 如果selectFileIdList数组的长度为0（即数组为空），则HTML元素的disabled属性将被设置为true，从而使该元素变为禁用状态 -->
                <el-button type="danger" @click="delFileBatch" :disabled="selectFileIdList.length == 0">
                    <span class="iconfont icon-del"></span>
                    批量删除
                </el-button>

.....

<span class="iconfont icon-del" @click="delFile(row)">
                                    删除
</span>

......

// 定义多选文件夹列表
const selectFileIdList = ref([]);
// 多选
const rowSelected = (rows) => {
    // 重置为一个空数组,清空数据
    selectFileIdList.value = [];
    // 遍历 rows 数组中的每一个元素
    rows.forEach((item) => {
        // 经遍历到的fileId添加到selectFileIdList中
        selectFileIdList.value.push(item.fileId);
    });
};
// 删除单个文件
const delFile = (row) => {
    // 调用Confirm
    proxy.Confirm(
        `你确定要删除【$row.fileName】吗？删除的文件可在 10 天内通过回收站还原`,
        async () => {
            let result = await proxy.Request({
                url: api.delFile,
                params: {
                    fileIds: row.fileId,
                },
            });
            if (!result) {
                return;
            }
            // 重新获取数据
            loadDataList();
        }
    );
};
// 批量删除文件
const delFileBatch = () => {
    // 如果要删除的长度为0就不执行
    if (selectFileIdList.value.length == 0) {
        return;
    }
    // 调用Confirm
    proxy.Confirm(
        // 第一个参数是一个字符串，用于显示给用户的确认消息
        `你确定要删除这些文件吗？删除的文件可在 10 天内通过回收站还原`,
        // 第二个参数，当用户点击确认按钮后，这个异步函数会被执行
        async () => {
            // 使用await关键字调用proxy.Request方法，发送一个HTTP请求到服务器
            // 接收proxy.Request方法的响应并将其存储在result变量中
            let result = await proxy.Request({
                // 请求的URL来自api.delFile，这可能是一个常量或配置对象中的属性，指向删除文件的API端点。
                url: api.delFile,
                // join将这个数组转换为一个由逗号分隔的字符串（因为批量删除多个ids所以要分开）,作为查询参数发送的文件ID列表
                params: {
                    fileIds: selectFileIdList.value.join(","),
                },
            });
            // 处理响应，
            if (!result) {
                return;
            }
            // 重新获取数据
            loadDataList();
        }
    );
};

 二、文件移动

（1）定义全局组件，FolderSelect.vue

（因为文件移动到哪个文件夹，文件保存到哪个文件夹都要用到，所以封装一个全局组件）

别忘记在Main.js中引入

src/components/FolderSelect.vue（不全面，未添加导航）

<!-- 移动/保存到哪个文件夹组件 -->
<template>
    <div>
        <!-- 弹出的对话框组件Dialog -->
        <Dialog
          :show="dialogConfig.show"
          :title="dialogConfig.title"
          :buttons="dialogConfig.buttons"
          width="600px"
          :showCancel="true"
          @close="dialogConfig.show = false">
            <!-- 目录导航 -->
            <div class="navigation-panel"></div>
            <!-- 文件夹列表 -->
            <div class="folder-list" v-if="folderList.length > 0">
                <!-- 每一项文件夹 -->
                <div
                   class="folder-item"
                   v-for="item in folderList"
                   @click="selectFolder(item)">
                   <!-- 文件类型为0时即文件夹就显示文件夹的图标 -->
                   <Icon :fileType="0"></Icon>
                   <!-- 每个文件夹的名字 -->
                   <span class="file-name">{
  
  { item.fileName }}</span>
               </div>
            </div>
            <!-- 判断 -->
            <div v-else class="tips">
                移动到 <span>{
  
  { currentFolder.fileName }}</span> 文件夹
            </div>
        </Dialog>
    </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from "vue";
import { useRouter, useRoute } from "vue-router";

const { proxy } = getCurrentInstance();
const router = useRouter();
const route = useRoute();

const api = {
    loadAllFolder: "/file/loadAllFolder",
};

// 定义弹出框的属性
const dialogConfig = ref({
    show: false,
    // 对话框的标题
    title: "移动到",
    buttons: [
        {
            type: "primary",