vue3+antdv仿百度网盘样式文件夹管理组件

实现：

1. 默认进入页面时，文件夹全选；
2. 文件夹状态，以及文件夹内的文件选择状态，与组件联动
3. 文件夹数量，根据后端数据动态生成

实现思路：

将后端数据存到vuex中，增加（多选框状态控制）的参数

文件夹状态，通过监听vuex 中对应文件夹的，文件选择情况处理

选中/取消  单个文件和文件夹时，更新vuex数据

选中/取消  所有文件夹时，更新vuex数据

Checkbox 多选框状态控制
全选： indeterminate: false,  checkAll: true

半选： indeterminate: true,//半选  checkAll: false,//全选

未选：indeterminate: false,  checkAll: false,//全选

vuex

import { createStore } from 'vuex';

export default createStore({
  state: {
        ExportData: [],//文件夹数据
  },

  mutations: {
   
    // 存文件夹数据
    setExportData(state, file) {
      console.log('存文件夹数据api数据', file)
      state.ExportData = file;
    },
    updateChooseNum(state, item) {
      // 首个元素的 typeName 是 '全部文件'  
      // const firstFileType = state.ExportData.filter((item) => item.typeName === '全部文件');
      let fileIndex = state.ExportData.findIndex((df) => df.typeName == item.name);
      if (fileIndex != -1) {
        // 使用扩展运算符和 Object.assign 合并对象，并添加新字段  idlist：已选文件的id数组
        const updatedFileType = {
          ...state.ExportData[fileIndex], idlist: item.idlist || [],
          chooseNum: item.idlist.length || 0
        };
        console.log('12221更新数据', updatedFileType)

        state.ExportData.splice(fileIndex, 1, updatedFileType);
      }
      console.log('11更新导出数据', state.ExportData)
      if (state.ExportData[0]) {
        // 累加除首个外的 chooseNum  
        let sum = 0;
        for (let i = 1; i < state.ExportData.length; i++) {
          sum += state.ExportData[i].chooseNum;
        }
        // 更新首个元素的 chooseNum  
        state.ExportData[0].chooseNum = sum;
      }
      console.log('更新导出数据', state.ExportData)
    },
    // 全部文件-文件夹全选,（是否顶部全部文件夹，typename，是否清空）
    setFilderCheck(state, item) {
      let { all, name, empty } = item
      if (all) {
        if (empty) {
          state.ExportData.forEach((obj) => {
            obj.chooseNum = 0
            obj.idlist = []
          });
          state.ExportData[0].chooseNum = 0
        } else {
          state.ExportData.forEach((obj) => {
            obj.chooseNum = obj.fileIdList.length
            obj.idlist = obj.fileIdList
          });
          state.ExportData[0].chooseNum = state.ExportData[0].totalNum
        }
      } else {
        let fileIndex = state.ExportData.findIndex((df) => df.typeCode == name);
        let currnum = state.ExportData[fileIndex].totalNum
        let first = state.ExportData[0].chooseNum
        console.log("vuex|c，totle", currnum, first)
        if (fileIndex != -1) {
          // 使用扩展运算符和 Object.assign 合并对象，并添加新字段  
          const updatedFileType = {
            ...state.ExportData[fileIndex], idlist: empty ? [] : state.ExportData[fileIndex].fileIdList,
            chooseNum: empty ? 0 : state.ExportData[fileIndex].fileIdList.length
          };
          state.ExportData.splice(fileIndex, 1, updatedFileType);
          if (empty) {
            state.ExportData[0].chooseNum = first - currnum
          } else {
            state.ExportData[0].chooseNum = first + currnum
          }
        }
        console.log('xx更新导出数据', state.ExportData)
      }

    },
  },
});

组件 ：fileManager.vue 

组件使用：

import fileManager from "../components/fileManager.vue";

//从后端获取数据后存入vuex

    tabs.value = res.data;
    store.commit("setExportData", res.data);

tabs.value 格式示例：
[
  {
    "typeCode": "allFile",
    "typeName": "全部文件",
    "chooseNum": 0,
    "totalNum": 4,
    "index": 1,
    "icon": "icon-tz-icon_wjj",
    "fileIdList": [
      "declarationDraft",
      "attestationReport",
      "contractVoucher",
      "otherDocuments"
    ]
  },
  {
    "typeCode": "declarationDraft",
    "typeName": "文件夹1",
    "chooseNum": 0,
    "totalNum": 2,
    "index": 2,
    "icon": "icon-tz-icon_sjdg1",
    "fileIdList": [
      "208c57896ef3_11",
      "208c5f07896ef3_10"
    ]
  },
  {
    "typeCode": "attestationReport",
    "typeName": "文件夹2",
    "chooseNum": 0,
    "totalNum": 1,
    "index": 3,
    "icon": "icon-tz-icon_jzbg",
    "fileIdList": [
      "208c5f0303644"
    ]
  },
  {
    "typeCode": "contractVoucher",
    "typeName": "文件夹3",
    "chooseNum": 0,
    "totalNum": 1,
    "index": 6,
    "icon": "icon-tz-icon_xmht",
    "fileIdList": [
      "6402"
    ]
  },
  {
    "typeCode": "otherDocuments",
    "typeName": "其他资料",
    "chooseNum": 0,
    "totalNum": 0,
    "index": 7,
    "icon": "icon-tz-icon_qtcc",
    "fileIdList": []
  }
]
    

//各文件夹，默认选中 按需使用
    const arr = res.data.find(item => {
      return item.typeCode == 'otherDocuments'
    })
    selectedRowKeys.value = arr.idlist
    store.commit("setFilderCheck", { all: true, name: '', empty: false });