train_vue/src/views/dynamicTable/components/tree.vue

<template>
  <div>
    <!-- 
		拖拽
		draggable
		@node-drop="handleDrop"
		@node-drag-enter="handleDragEnter"
		:allow-drop="allowDrop"
    -->
    <el-tree
      :props="props"
      :load="loadNode"
      node-key="id"
      lazy
      show-checkbox
      :expand-on-click-node="expand"
      ref="tree"
      v-loading="loading"
      @check-change="handleCheckChange"
    >
      <template slot-scope="{data,node}">
        <div class="row">
          <span class="content">{{data.name}}</span>
          <span class="handle">
            <el-button type="text" size="mini" @click.stop.prevent="addNode(data,node)">新增</el-button>
            <el-button
              v-if="data.id!=-1"
              type="text"
              size="mini"
              @click.stop.prevent="delNode(data,node)"
            >删除</el-button>
            <el-button
              v-if="data.id!=-1"
              type="text"
              size="mini"
              @click.stop.prevent="putNode(data,node)"
            >更新</el-button>
          </span>
        </div>
      </template>
    </el-tree>
  </div>
</template>

<script>
// import { getNode, addNode, delNode, putNode } from "@/Api/tree";
import { getNode, addNode, delNode, putNode } from "@/Api/dept";
export default {
  name: "tree",
  data() {
    return {
      props: {
        label: "name",
        children: "zones",
        isLeaf: (data, node) => {
          // console.log("isLeaf",data,node);
          //算出是否是叶子 true是叶子，false不是🍃
          if (data.id != -1) {
            // console.log(1111,data,node);
            // console.log(parseInt((data.rght - data.lft - 1) / 2));
            if (!data.hasOwnProperty("rght")) return true; //如果没有rght属性 则就是叶子节点
            return parseInt((data.rght - data.lft - 1) / 2) == 0;
          }
          return false;
        }
      },
      loading: false,
      expand: true //是否点击任意地方展开
    };
  },
  methods: {
    //加载节点
    loadNode(node, resolve) {
      // console.log(resolve);
      if (node.level === 0) {
        let data = [
          {
            name: "树容器",
            id: -1
          }
        ];
        resolve(data);
        this.$nextTick(() => {
          this.$emit("check-node", this.$refs.tree.getCheckedNodes()); //返回所有节点
        });
        // return resolve(data);
      } else if (node.level === 1) {
        getNode().then(res => {
          // console.log(res.data);
          // res.data.leaf = false
          resolve(res.data);
          this.$nextTick(() => {
            this.$emit("check-node", this.$refs.tree.getCheckedNodes()); //返回所有节点
          });
        });
      } else {
        // console.log(node);
        let parent_id = node.data.id;
        let data = { parent_id };
        getNode(data)
          .then(res => {
            // console.log(res);
            resolve(res.data);
            this.$nextTick(() => {
              this.$emit("check-node", this.$refs.tree.getCheckedNodes()); //返回所有节点
            });
          })
          .catch(e => {
            // console.log(e);
            resolve({});
          });
      }
    },
    //添加节点
    addNode(data, node) {
      // this.expand = false;
      // console.log(data, node);
      this.$prompt("请输入名字", "插入节点", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      })
        .then(({ value }) => {
          console.log(data);
          let rep =
            data.id == -1
              ? { name: value }
              : { name: value, parent_id: data.id };
          this.loading = true;
          addNode(rep).then(res => {
            let childrenNode = res.data.node;
            let msg = res.data.message;
            this.$refs.tree.append(childrenNode, node); //插入节点
            node.isLeaf = false; //自己有叶子了，则自己不是叶子
            this.$message({
              type: "success",
              message: msg
            });
            console.log("插入成功", res);
            this.loading = false;
            // this.expand = true;
          });
        })
        .catch(e => {
          this.expand = true;
          console.log(e);
        });
    },
    //删除节点
    delNode(data, node) {
      // this.expand = false;
      // console.log(data, node);
      if (data.id == -1) {
        this.$message({
          type: "warring",
          message: "顶级容器不能删除"
        });
        return;
      }
      this.loading = true;
      delNode({ id: data.id })
        .then(res => {
          console.log("删除节点", res);
          this.$refs.tree.remove(node);
          this.loading = false;
          this.$nextTick(() => {
            this.$emit("check-node", this.$refs.tree.getCheckedNodes()); //返回所有节点
          });
          // this.expand = true;
        })
        .catch(e => {
          // this.expand = true;
          console.log(e);
        });
    },
    //更新节点 更新名字
    putNode(data, node) {
      // this.expand = false;
      this.$prompt("请输入名字", "修改节点", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      })
        .then(({ value }) => {
          this.loading = true;
          let rep = {
            id: data.id,
            name: value
          };
          putNode(rep)
            .then(res => {
              console.log("更新成功");
              console.log(data.id, data);
              data.name = value;
              this.$refs.tree.updateKeyChildren(data.id, data);
              // this.$forceUpdate();
              this.loading = false;
              this.$nextTick(() => {
                this.$emit("check-node", this.$refs.tree.getCheckedNodes()); //返回所有节点
              });
            })
            .catch(e => {
              this.loading = false;
              console.log(e);
            });
          // this.expand = true;
        })
        .catch(e => {
          // this.expand = true;
          this.loading = false;
          console.log("取消修改", e);
        });
    },
    /** 选择状态改变
     * @param {Object} data 节点详细数据
     * @param {Boolean} checked 是否被选中
     * @param {Boolean} indeterminate 是否内部被选择部分
     */
    handleCheckChange(data, checked, indeterminate) {
      // console.log(data, checked, indeterminate);
      this.$emit("check-node", this.$refs.tree.getCheckedNodes()); //返回所有节点
    },

    // 以下未使用 ✳
    //拖拽 更新节点
    handleDrop(draggingNode, dropNode, dropType, ev) {
      console.log(draggingNode.data, dropNode.data);
      let from = draggingNode.data; //拖拽的节点
      let to = dropNode.data; //到达某个点
      //更新 某个节点 与 另一个节点 在 同一个父级下
      let data = {
        id: from.id,
        name: from.name,
        parent_id: to.parent_id
      };
      this.loading = true;
      putNode(data).then(res => {
        this.loading = false;
        console.log(res);
      });
    },
    //拖拽 进入
    handleDragEnter(draggingNode, dropNode, ev) {
      console.log("tree drag enter: ", dropNode);
      let from = draggingNode.data; //拖拽的节点
      let to = dropNode.data; //到达某个点
      let data = {
        id: from.id,
        name: from.name,
        parent_id: to.id
      };
      this.loading = true;
      putNode(data).then(res => {
        //拖拽进入成功
        console.log(res);
        this.loading = false;
      });
    },
    //拖拽
    allowDrop(draggingNode, dropNode, type) {
      // console.log(dropNode);

      if (dropNode.isLeaf) {
        return false;
      } else {
        // console.log(dropNode);
        return true;
      }
    }
  }
};
</script>

<style lang="less">
.row {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  // padding-right: 8px;
  .handle {
    // background-color: #ccc;
    padding: 0px 5px;
    // border-radius: 5px;
    box-shadow: -2px -2px 2px #ccc inset;
    line-height: 15px;
    margin-left: 30px;
  }
}
</style>