el-tree

<template>
  <div>
    <el-button style="margin-left: 10px" type="primary" size="small" @click="dialogVisible = true,getList">树节点</el-button>

    <el-dialog
      title="节点树结构"
      :visible.sync="dialogVisible"
      width="60%"
    >
      <div>
        <el-input
          placeholder="输入关键字进行过滤"
          style="width: 200px;margin-bottom: 15px"
          @keyup.tab="append"
          v-model="filterText">
        </el-input>
        <el-tree
          :data="list"
          show-checkbox
          node-key="id"
          :props="defaultProps"
          :filter-node-method="filterNode"
          :current-change="currentChange"
          @node-click="handleNodeClick"
          :expand-on-click-node="false"
          ref="tree"
        >
      <span class="custom-tree-node" slot-scope="{ node, data }"  @mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)" >
        <el-input v-model="node.label"
               @keyup.tab.native="append(data,node,1)"
               @keyup.enter.native="append(data,node,0)"
              type="text" style="border:0px;outline:none;cursor: pointer;width: 200px;height: 20px"
        ></el-input>
        <span style="margin-left: 200px">
           <i v-show="data.show" class="el-icon-circle-plus blue" ></i>
          <el-button
            v-if="data.parent == null"
            v-show="data.show"
            type="text"
            size="mini"
            @click="() => append(data,node)">
            课程导读
          </el-button>
           <el-button
             v-if="data.parent != null"
             v-show="data.show"
               type="text"
               size="mini"
               @click="() => append(data,node)">
            课程
          </el-button>
          <el-button
            v-if="data.parent != null"
            v-show="data.show"
            type="text"
            size="mini"
            @click="() => remove(node, data)">
            试题
          </el-button>
        </span>
      </span>
        </el-tree>

        <div slot="footer" class="dialog-footer" style="margin-top: 40px;text-align: center">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveTree(list)">确 定</el-button>
        </div>

      </div>
    </el-dialog>

  </div>
</template>

<script>
  import {queryOutlineByMindId} from "../../../api/mind";

  export default {
    name: "tree",
    data() {
      return {
        dialogVisible: false,
        filterText: '',
        rootNode: "",
        mindId: "cb85d34a3d354fa48f97f310cd37a6fd",
        list: [],
        defaultProps: {
          children: 'children',
          label: 'text',
          id:'',
        }
      };
    },
    destroyed(){
      window.removeEventListener('keydown', event => {
        console.log(event.value)
        event.preventDefault()
      })
    },
    created() {
      this.getList();
      window.addEventListener('keydown', this.onClick)

    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
    methods: {
      getList(){
        queryOutlineByMindId(this.$route.query.mindId).then(response => {
          this.list = response.data
          // let res = response.data;
          //根节点
          // this.rootNode = res.text
          // //判断根节点下的子节点是否存在
          // if (res.children !=null) {
          //   //遍历根节点下的子节点
          //   for (let item in res.children) {
          //     //放入ul的list
          //     this.list.push(res.children[item])
          //     //判断子节点下的子节点是否存在
          //     if (res.children[item].children!=null) {
          //       //递归子节点
          //       this.recursiveChildNode(res.children[item].children)
          //     }
          //   }
          // }
        })
      },
      /**
       * 键盘监听事件
       */
      onClick (e) {
        if (e.keyCode == 9) {
          event.preventDefault();
        }
      },
      /**
       * 鼠标移入
       */
      treeMouseover(node,data){
        // console.log(data);
      },
      currentChange(node,data){
        console.log("node------>",node)
        console.log("data---->",data)
      },
      /**
       * 保存树结构
       */
      saveTree(list){
        console.log(list)
      },
      mouseenter(data){
        this.$set(data, 'show', true)
      },
      mouseleave(data){
        this.$set(data, 'show', false)
      },
      handleNodeClick(h, {node, data, store}) {
        // // data为被点击节点数据
        // // 记录点树节点击次数
        // this.treeClickCount++
        // if (this.treeClickCount > 2) return
        // setTimeout(() => {
        //   if (this.treeClickCount == 1) {
        //     // 进行单击事件处理
        //     console.log('单击事件', data)
        //   } else if (this.treeClickCount == 2) {
        //     // 进行双击事件处理
        //     console.log('双击事件', data)
        //   }
        //   this.treeClickCount = 0
        // }, 500)
      },
      filterNode(value, data) {
        if (!value) return true;
        return data.text.indexOf(value) !== -1;
      },
      S4() {
        // return "cbdsic7ck2w0";
        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
      },
      /***
       * 生成uid
       * @returns {string}
       * @constructor
       */
      guid() {
        return (this.S4() + this.S4() + this.S4());
      },
      append(data,node,isEnterOrTab) {
        let newChild={};
        // e.preventDefault();
        console.log('成功监听')
        // console.log(node.parent)
        let id = this.S4();
        let id2 = this.S4();
        // console.log(data)
        // console.log(data.id)
        if(isEnterOrTab == 1){
          if (!data.children) {
             newChild = {id: id+id2+this.S4(), text: '分支主题', children: [],parent:data.id};
            this.$set(data, 'children', []);
          }
          data.children.push(newChild);
        }else{
            console.log('daat:',data,'node:',node)
            if(data.parent  == null){
              return this.$message.error("该节点已经是根节点，不可同级")
            }

        }
      },

      remove(node, data) {
        const parent = node.parent;
        const children = parent.data.children || parent.data;
        const index = children.findIndex(d => d.id === data.id);
        children.splice(index, 1);
      },

    },
  }
</script>

<style lang="scss" scoped>
    /deep/ .el-input{
      border: 0;
      border: none;
    }
</style>