aiforge/web_src/js/components/vueTree.vue

<template>
  <div class="myTrees">
    <el-tree
      ref="tree"
      :data="treeData"
      node-key="filePath"
      empty-text="暂无数据"
      highlight-current
      @node-click="handleLeftclick"
    >
      <div slot-scope="{ node , data }" class="custom-tree-node">
        <span>
          <i :class="getIcon(node.data)" />
          {{ node.label }}
        </span>
        <span>
          <el-dropdown trigger="click" class="el-dropdown"
           v-show="!isLeaf && data.type == 'tree'"
          >
            <span class="el-dropdown-link">
              <svg class="icon el-dropdown-svg" aria-hidden="true">
                <use xlink:href="#icon-a-bianzu31"></use>
              </svg>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                @click.native="addChildNode('leaf')"
                >新建文件</el-dropdown-item
              >
              <el-dropdown-item
                @click.native="addChildNode('')"
                >新建文件夹</el-dropdown-item
              >
              <!-- <el-dropdown-item @click.native="deleteNode">删除</el-dropdown-item> -->
            </el-dropdown-menu>
          </el-dropdown>
        </span>
      </div>
    </el-tree>
  </div>
</template>
<!-- file-icon ide-icon word-icon dark-blue -->
<link rel="stylesheet" href="/web_src/js/components/treeIcon.css" />
<script>
import {icons} from "./icons";
console.log("icons:",icons)
export default {
  name: "List",
  props: {
    treeListData: {
      type: Array,
      default: () => [],
    },
    fileInfoParams: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      fileParams: {},
      treeData: [],
      isShow: false,
      currentData: "",
      currentNode: "",
      menuVisible: false,
      firstLevel: false,
      lastLevel: false,
      filterText: "",
      isLeaf: false,
    };
  },
  watch: {
    treeListData(val) {
      this.treeData = val;
    },
    fileInfoParams(val) {
      this.fileParams = val;
    },
  },

  methods: {
    // 鼠标左击事件
    handleLeftclick(data, node) {
      this.currentData = data;
      this.currentNode = node;
      this.firstLevel = false;
      this.isLeaf = data.isLeaf;
      this.lastLevel = false;
      if (data.type === 'tree') return;
      // if (data.sha) {
      this.$emit("handleChangFile", data, this.treeData);
      // }
    },
    getIcon(data){
      console.log("data:",data.name.split("."))
      let icon = '';
      if(data.type === 'tree'){
        return 'fa fa-folder ide-icon ide-icon-folder'
      }
      try {
        let suffix = data.name.split(".").pop();
        if(data.name.indexOf(".") > -1){
          suffix = "." + suffix
        }
        icons.forEach(element => {
            if(element[2].test(suffix)){
              icon = element[0] + ' ' + element[1].join(' ');
              throw('')
            }
        })
      } catch (error) {

      }
      return "file-icon ide-icon " + icon;
    },

    // 增加子级节点事件
    addChildNode(shape) {
      const id = Math.ceil(Math.random() * 100);
      this.$prompt("请输入名称", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          if (value.trim().indexOf("") === -1)
            return this.$message.warning("名称不能包含空格！");
          const treeD = {
            id,
            label: value,
            operation: "add",
            isEdit: true,
            type: shape === "leaf" ? "blob" : "tree",
            filePath: `${this.currentData.filePath}/${value}`,
            isLeaf: shape === "leaf",
            name: value,
            fileType:"txt",
            children: [],
          };
          if(shape === "leaf"){
            treeD.content = "";
            treeD.oldContent = "";
            treeD.newContent = "";
            treeD.fileType = 'txt'
          }
          treeD.path = treeD.filePath;
          this.$refs.tree.append(treeD, this.currentData.filePath);
          this.$emit("handleAddNode", treeD, this.currentData.filePath); // 触发父组件更改提交界面的数据变化
        })
        .catch(() => {});
    },
    // 删除节点
    deleteNode() {
      this.$confirm(`确定删除当前文件,是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (this.currentData.isLeaf) {
            // isLeaf为true 代表文件类型
            if (this.currentData.operation === "add") {
              // 新增的节点删去
              this.$emit("handleDeleteAddNode", this.currentData);
            } else if (this.currentData.sha) {
              // 原本存在的数据 触发父组件更新已存在数据的状态
              this.$emit("handleDeleteOldNode", this.currentData);
            }
          }
          this.$refs.tree.remove(this.currentNode);
        })
        .catch(() => {});
    },
  },
};
</script>
<style lang="less" scoped>
@import "./treeIcon.css";
.myTrees {
  /*background: transparent;*/
  height: 100%;
  overflow: auto;
  background: #FFFFFF;
}
.el-tree {
  /* padding: 20px; */
  /*background: transparent;*/
  background: #FFFFFF;
  color: black;
}
.el-tree .is-current{
  background: #f5f7fa;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 8px;
  font-size: 14px;
  height: 34px;
  line-height: 34px;
  .el-dropdown-svg{
    height: 16px;
    width: 16px;
    color: #979797;
  }
  .el-dropdown-svg:hover{
    color: #007aff;
  }
}
/deep/ .el-tree-node__content{
  height: 34px;
  line-height: 34px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
}
/deep/ .el-tree-node.is-current > .el-tree-node__content{
  background: #F5F7FA;
  color: #2285D0 !important;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #2285D0;
}
.el-dropdown-menu{
  padding: 0px !important;
}
.el-popper[x-placement^=bottom] .popper__arrow {
  display: none !important;
}
.el-dropdown-menu__item{
  color: #333333 !important;
  height: 34px !important;
}
li.el-dropdown-menu__item:hover {
  background: #f2f2f2 !important;
}
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>
<style>
  .myTrees .el-tree-node__expand-icon{
    visibility: hidden;
  }
  .monaco-editor .line-numbers{
    color: #999;
  }
</style>