简易的仿桌面文件夹上传（vue2）

      <el-tab-pane label="项目资料">
          <Information :projectId="form.id"></Information>
        </el-tab-pane>

Information/index.vue

<template>
  <div>
    <el-row :gutter="20">
      <!--文件夹目录数据-->
      <el-col :span="4" :xs="24">
        <div class="head-container">
          <el-input
            v-model="name"
            placeholder="请输入文件夹名称"
            clearable
            size="small"
            prefix-icon="el-icon-search"
            style="margin-bottom: 20px"
          />
        </div>
        <div class="head-container">
          <el-tree
            :data="folderOptions"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            ref="tree"
            node-key="id"
            default-expand-all
            highlight-current
            @node-click="handleNodeClick"
          />
        </div>
      </el-col>
      <el-col :span="20" :xs="24">
        <div class="top">
<!--          <el-button size="small" type="primary" plain @click="goBack" v-if="currentFolder">-->
<!--            <i class="el-icon-back" style="margin-right: 2px;" /> 返回-->
<!--          </el-button>-->
          <el-upload
            v-if="currentFolder.id != 0"
            multiple
            :action="uploadFileUrl"
            :file-list="fileList"
            :on-success="handleUploadSuccess"
            :show-file-list="false"
            :headers="headers"
            ref="fileUpload">
            <el-button slot="trigger" size="small"  type="success" plain><i class="el-icon-upload" style="margin-right: 2px;"/>上传文件</el-button>
          </el-upload>
          <el-button  v-if="currentFolder.id != 0" size="small" type="primary" plain  @click="createNewFolder"><i class="el-icon-plus" style="margin-right: 2px;" /> 新建文件夹</el-button>
          <el-button type="info" plain @click="queryData"><i class="el-icon-refresh-left" style="margin-right: 2px;"></i>主目录</el-button>
        </div>
        <div class="main">
          <ContextMenu
            :menu="['重命名', '删除']"
            :row="selectedRow"
            @action="handleContextMenuAction">
            <el-table
            ref="singleTable"
            :data="files"
            highlight-current-row
            style="width: 100%"
            @row-dblclick="handleRowClick"
            @row-contextmenu="handleRightClick">
            <el-table-column label="文件名"  >
              <template slot-scope="scope">
<!--                <svg-icon :icon-class="scope.row.type === 'folder' ? 'folder' : 'fileEmpty'" style="font-size: 26px" />-->
                <div v-if="scope.row.type === 'folder'">
                  <svg-icon :icon-class="'folder'" style="font-size: 26px" />
                  <span  style="margin-left: 10px">{{ scope.row.name }}</span>
                </div>
                <file-upload v-else :only-list="true" v-model="scope.row.fileUrl"></file-upload>
              </template>
            </el-table-column>
            <el-table-column property="createBy"  label="创建者" ></el-table-column>
            <el-table-column property="createTime"  label="创建时间"></el-table-column>
          </el-table>
          </ContextMenu>
        </div>
      </el-col>
    </el-row>


    <!--      新建文件夹对话框-->
      <el-dialog
        title="新建文件夹"
        :visible.sync="dialogVisible"
         width="30%"
        append-to-body>
        <el-form :model="form" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
          <el-form-item
            label="文件名称"
            prop="name"
            :rules="[{ required: true, message: '文件名称不能为空'}]"
          >
            <el-input v-model.number="form.name" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitFile">确 定</el-button>
        </span>
      </el-dialog>
    </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import FileUpload  from "@/components/FileUpload/index.vue";
import { getFolderFile, addFolder, getFildsList, addFile, delFolder, delFolderFile, updateFolder } from "@/api/system/project";
import ContextMenu from "@/components/ContextMenu/index.vue";
export default {
  name: 'Information',
  components: {
    FileUpload,
    ContextMenu
  },
  props: {
    // 项目id
    projectId: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      currentFolder: {
        id: 0,
      }, // 当前所在文件夹的信息
      folderOptions: null, // 文件夹树选项
      name: null,   // 文件夹名称
      defaultProps: {
        children: "children",
        label: "label"
      },
      invoiceFile: null,
      uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传文件服务器地址
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      fileList: [],
      dialogVisible: false,
      form: {
        name: ''
      },
      files: [],
      contextMenuVisible: false, // 是否显示右键弹框
      menuPosition: { x: 0, y: 0 },  // 右键菜单的显示位置
      selectedRow: null // 右键选中的行
    };
  },
  watch: {
    // 根据名称筛选部门树
    name(val) {
      this.$refs.tree.filter(val);
    }
  },
  created() {
   this.queryData()
  },
  methods: {
    // 初始化列表
    queryData() {
      this.getDeptTree();
      this.getList(0);
    },
    // 获取列表数据
    getList(parentId) {
      getFolderFile({ parentId, projectId: this.projectId }).then(response => {
        let folders = response.data.map(item => ({
          ...item,
          type: 'folder'
        }));
        getFildsList(parentId, this.projectId).then(res => {
          let files = res.data.map(item => ({
            ...item,
            name: item.fileName,
            type: 'fileEmpty'
          }));
          this.files = [...folders, ...files];
        });
      });
    },
    // 文件表格点击事件
    handleRowClick(row) {
      if (row.type === 'folder') {
        this.currentFolder = row;
        this.getList(row.id);
        // 选中树形结构中的对应节点
        this.$nextTick(() => {
          this.$refs.tree.setCurrentKey(row.id); // 使用当前文件夹的 id 设置树节点选中
        });
      }
    },
    // 右键点击事件
    handleRightClick(row, column, event) {
      event.preventDefault();  // 阻止默认右键菜单
      this.selectedRow = row;  // 设置当前右键点击的行
      console.log(' this.selectedRow', this.selectedRow)
    },
    // 鼠标右键的点击事件
    handleContextMenuAction(action, row) {
      console.log('handleContextMenuAction', action, row)
      if (action === "删除") {
        this.deleteRow(row); // 删除操作
      } else if (action === "重命名") {
        this.renameRow(row); // 重命名操作
      }
    },
    // 删除
    deleteRow(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (row.type === 'folder') {
          delFolder(row.id).then(response => {
            this.getList(this.currentFolder.id);
          });
        } else {
          delFolderFile(row.id).then(response => {
            this.getList(this.currentFolder.id);
          });
        }
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 重命名
    renameRow(row) {
      this.$prompt('', '重新命名', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValue: row.name
      }).then(({ value }) => {
        if(row.type === 'folder') {
          updateFolder({id: row.id, name: value}).then(response => {
            this.getList(this.currentFolder.id);
            this.$message({
              type: 'success',
              message: '修改成功！'
            });
          })
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },
    /** 查询部门下拉树结构 */
    getDeptTree() {
      getFolderFile({ projectId: this.projectId}).then(response => {
        let originData = response.data.map(item => {
          return {
            id: item.id,
            parentId: item.parentId,
            label: item.name,
            children: item.children
          }
        })
        this.folderOptions = this.handleTree(originData)
      });
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.currentFolder = data;
      this.getList(data.id);
    },
    // 文件上传成功的回调
    handleUploadSuccess(res, file) {
      if (res.code === 200) {

        const params = {
          folderId: this.currentFolder.id || 0,
          fileName: res.originalFilename,
          fileUrl: res.url,
          projectId: this.projectId
        }
        // 上传文件
        addFile(params).then(res => {
          this.getList(this.currentFolder.id)
          this.$modal.msgSuccess("上传成功");
        })
      } else {
        this.$modal.msgError(res.msg);
      }
    },
    // 新建文件夹
    createNewFolder() {
      this.dialogVisible = true;
    },
    // 提交新建文件夹
    submitFile() {
      // 在这里实现新建文件夹的逻辑
      const params = {
        parentId: this.currentFolder.id,
        name: this.form.name,
        projectId: this.projectId
      };
      addFolder(params).then(res => {
        this.getList(this.currentFolder.id)
        this.getDeptTree();
        this.form = {
          name: undefined
        }
      })
      this.dialogVisible = false;
    },
  }
};
</script>


<style  lang="scss">
.el-popover {
  z-index: 9999 !important;
}

::v-deep .svg-icon {
  vertical-align: -0.28em;
}

.top {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  //margin-bottom: 20px;
  height: 56px;
  .el-button {
    margin-right: 10px;
  }
}
.file-name {
  font-size: 14px;
  margin-left: 10px;
  width: 300px;
}
.file-creater {
  font-size: 14px;
  width: 100px;
}
.file-time {
  font-size: 14px;
  color: #999;
  width: 100px;
}
.file-desc {
  color: #999;
  font-size: 14px;
}
.main {
  border: 1px solid #eee;
  border-radius: 4px;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
  margin: 0 10px;
  padding: 16px;
  box-sizing: border-box;
  .h-file-row, .h-file-title {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding: 6px 0;
  }
  .h-file-row:hover {
    background-color: #f0f9ff;
  }
}
</style>

ContentMenu/index.vue

<template>
  <div ref="contentRef" v-bind="$attrs">
    <slot></slot>
    <Teleport to="body" v-if="showMenu">
      <div  class="content-menu" :style="{ left: x + 'px', top: y + 'px' }">
        <div class="menu-list">
          <div
            class="menu-item"
            v-for="(item, index) in menu"
            :key="index"
            @click="handleMenuClick(item, $event)">
            {{ item }}
          </div>
        </div>
      </div>
    </Teleport>
  </div>
</template>

<script>
import Teleport from "../Teleport/index.vue"

export default {
  name: 'ContextMenu',
  components: {
    Teleport
  },
  props: {
    menu: {
      type: Array,
      default: () => ['重命名', '删除']
    },
    row: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      showMenu: false,
      x: 0,
      y: 0,
      mode: process.env.NODE_ENV,
      isTeleport: false, // 控制什么时候被传送
    };
  },
  mounted() {
    if (this.mode === 'production') {
      return;
    }
    const div = this.$refs.contentRef;
    div.addEventListener('contextmenu', this.showContextMenu);
    window.addEventListener('click', this.closeMenu, true);
  },
  beforeDestroy() {
    const div = this.$refs.contentRef;
    if (div) {
      div.removeEventListener('contextmenu', this.showContextMenu);
    }
    window.removeEventListener('click', this.closeMenu);
  },
  methods: {
    showContextMenu(e) {
      e.preventDefault();
      e.stopPropagation();

      this.x = e.clientX;
      this.y = e.pageY;
      this.showMenu = true;
    },
    closeMenu() {
      this.showMenu = false;
    },
    handleMenuClick(item, e) {
      e.stopPropagation();
      this.showMenu = false;
      this.$emit("action", item, this.row);
    }
  }
};
</script>

<style lang="scss" scoped>
.content-menu {
  position: absolute;
  cursor: pointer;
  z-index: 3001;
  width: 180px;
  background-color: #fff;
  padding: 8px 0;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.menu-list {
  text-align: center;
  letter-spacing: 4px;
  min-width: 100px;
}

.menu-item {
  padding: 6px 0;
  font-size: 12px;
  cursor: pointer;
  &:hover {
    background-color: #f6f6f6;
  }
}
</style>

Teleport/index.vue

<script>
export default {
  name: 'teleport',
  props: {
    /* 移动至哪个标签内，最好使用id */
    to: {
      type: String,
      required: true
    }
  },

  mounted() {
    // 把内容移动到指定的标签内this.to渲染
    document.querySelector(this.to).appendChild(this.$el)
  },

  beforeDestroy() {
    // 移除内容
    const targetElement = document.querySelector(this.to)
    if (targetElement && targetElement.contains(this.$el)) {
      targetElement.removeChild(this.$el)
    }
  },
  render() {
    return this.$scopedSlots.default()
  }
}
</script>