GCLS_Page_Book/src/views/drag1.vue

<template>
  <div style="font-size: 14px">
    <Tree :value="treeData" @drop="dragend" @before-drop="beforeDrop">
      <div class="tree_box" slot-scope="{ node, index, path, tree }">
        <span
          v-if="node.children && node.children.length > 0"
          @click="tree.toggleFold(node, path)"
        >
          <template v-if="node.$folded">
            <i class="el-icon-caret-bottom"></i>
          </template>
          <template v-else><i class="el-icon-caret-bottom"></i></template>
        </span>
        <span style="width: 100px; display: inline-block">
          <template v-if="node.type == 1">
            <i class="el-icon-reading"></i>
          </template>
          <template v-else><i class="el-icon-document"></i></template>
          {{ node.text }}
        </span>
        <div class="btn_box">
          <el-popover placement="bottom" width="100" trigger="click">
            <div class="tree_other_btn">
              <p class="tree_rename">重命名</p>
              <p class="tree_del">删除</p>
            </div>
            <span slot="reference">...</span>
          </el-popover>

          <i class="el-icon-plus" @click="addNode(node, index)"></i>
        </div>
      </div>
    </Tree>
    <el-dialog title="新建节点" :visible.sync="nodesVisible" width="40%">
      <div>
        <el-form ref="form" :model="nodeForm" label-width="80px">
          <el-form-item label="节点名称">
            <el-input v-model="nodeForm.text"></el-input>
          </el-form-item>
          <el-form-item label="节点类型">
            <el-radio-group v-model="nodeForm.type">
              <el-radio label="1">章节</el-radio>
              <el-radio label="2">互动课件</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sureAddNode">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import "he-tree-vue/dist/he-tree-vue.css";
import { Tree, Fold, Draggable } from "he-tree-vue";
import * as hp from "helper-js";

export default {
  components: {
    Tree: Tree.mixPlugins([Fold, Draggable]),
  },
  data() {
    return {
      treeData: [
        { text: "node 1", type: "1", children: [] },
        {
          text: "node 2",
          type: "1",
          children: [{ text: "node 2-1", type: "2", children: [] }],
        },
      ],
      nodesVisible: false,
      nodeForm: {
        text: "",
        type: "1",
        children: [],
      },
      curNode: null,
      curIndex: "",
      ondragend: {},
    };
  },
  methods: {
    beforeDrop(val) {
      console.log(val);
      console.log("我不要");
    },
    dragend(val) {
      console.log(val);
      console.log(this.treeData);
    },
    addNode(node, index) {
      this.curNode = node;
      this.curIndex = index;
      this.nodesVisible = true;
    },
    sureAddNode() {
      let node = JSON.parse(JSON.stringify(this.nodeForm));
      this.curNode.children.push(node);
      this.nodesVisible = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.my-tree-view .tree-node {
}
.tree_box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 40px;
  .kuazhan {
    font-size: 40px;
    padding: 0 10px;
    cursor: pointer;
  }
  .tree_other_btn {
    > p {
      font-size: 16px;
      cursor: pointer;
    }
  }
  .btn_box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 30px;
    span {
      margin-right: 10px;
      cursor: pointer;
    }
  }
}
</style>