Tree 树形控件

用到了节点过滤、可拖拽节点，以及增加、删除编辑都出现Dialog 对话框

(工作中遇到的需求存一下🗯 万一以后还要用)

 功能效果：（图一：编辑以及节点新增） （图二：节点拖拽 以及搜索对应的 新增最高级节点）

        

代码：

<template>
  <div>
    <!-- 搜索框 -->
    <div class="navright">
      <div style="width: 260px">
        <el-input placeholder="搜索组织" suffix-icon="el-icon-search" v-model="filterText">
        </el-input>
      </div>
      <!-- 新增主题按钮 -->
      <el-button class="rightBtn" @click="firstLevelFn"><i class="el-icon-plus"></i>添加</el-button>
    </div>
    <div class="framework">
      <el-tree :data="data" ref="tree" :filter-node-method="filterNode" node-key="id" :props="defaultProps"
        default-expand-all :expand-on-click-node="false" @node-drag-start="handleDragStart"
        @node-drag-end="handleDragEnd" @node-drop="handleDrop" draggable :allow-drop="allowDrop"
        :allow-drag="allowDrag">
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{ data.organizationName }}</span>
          <span>
            <el-button type="text" size="mini" @click="() => edit(node, data)">
              编辑
            </el-button>
            <el-button type="text" size="mini" @click="() => firstLevelFn(data)">
              增加
            </el-button>
            <el-button type="text" size="mini" @click="() => remove(node, data)">
              删除
            </el-button>
          </span>
        </span>
      </el-tree>
    </div>

    <el-dialog title="添加组织架构" :visible.sync="addDialog" width="380px" center>
      <el-form ref="form" :model="addForm" label-width="80px">
        <el-form-item label="组织名称">
          <el-input v-model="addForm.organizationName" style="width: 280px;"></el-input>
        </el-form-item>
        <el-form-item label="组织编码">
          <el-input v-model="addForm.code" style="width: 280px;"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button class="btn1" @click="addDialog = false">取 消</el-button>
        <el-button class="btn2" @click="confirmFn">确 定</el-button>
      </span>
    </el-dialog>


    <el-dialog title="编辑组织架构" :visible.sync="editDialog" width="380px" center>
      <el-form ref="editForm" :model="editForm" label-width="80px">
        <el-form-item label="组织名称">
          <el-input v-model="editForm.organizationName" style="width: 280px;"></el-input>
        </el-form-item>
        <el-form-item label="组织编码">
          <el-input v-model="editForm.code" style="width: 280px;"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button class="btn1" @click="editDialog = false">取 消</el-button>
        <el-button class="btn2" @click="submitEdit(data)">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { Message, MessageBox } from 'element-ui';
export default {
  data() {
    return {
      endid: "",//拖拽结束时的id
      startParentid: "", //拖拽开始时的partentid
      filterText: '',
      addDialog: false,
      editDialog: false,
      addForm: {
        organizationName: '',
        code: '',
      },
      editForm: {
        organizationName: '',
        code: '',
      },
      editData: {},
      newData: {
        id: "",
        parentId: "",
        systemId: "",
        organizationName: "",
        code: ""
      },
      orgid: '',
      systemId: "1",
      addOrga: null,//新增组织
      data: [],
      defaultProps: {
        children: 'organizationChildren',
        label: 'organizationName'
      }
    };
  },
//节点过滤
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  props: ["msg"],
  created() {
    this.orgid = this.msg;
    this.getTree();
  },

  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.organizationName.indexOf(value) !== -1;
    },
    //根据id查询
    getTree() {
      //debugger
      var _this = this;
      _this.isLoading = true;
      _this.$get("接口" + _this.orgid).then((res) => {
        console.log(119, res);
        if (res.success) {
          _this.isLoading = false;
          _this.data = res.data.organizationTree.organizationChildren;
          console.log(_this.data);
        }
      })

    },

    firstLevelFn(data) {
      this.addDialog = true
      this.addOrga = data
    },
    // 确定--添加一级//新增层级
    confirmFn() {
      console.log(137, this.addOrga.parentId);
      if (this.addOrga.parentId != null) {
        this.append()
      } else {
        // debugger
        const nodeObj = { parentId: '1', systemId: this.systemId, code: this.addForm.code, organizationName: this.addForm.organizationName, children: [] }
        if (!this.data.organizationChildren) {
          this.$set(this.data, 'organizationChildren', []);
        }
        this.data.push(nodeObj)
        this.$post("接口", nodeObj).then((res) => {
          if (res.success) {
            Message({
              type: 'success',
              message: '添加成功！'
            })
            this.addForm = {}
            this.getTree();
            this.addDialog = false
          }
        })
      }

    },

    //节点开始拖拽时触发的事件
    handleDragStart(node) {
      this.newData.id = node.data.id;
      this.newData.systemId = node.data.systemId;
      this.newData.organizationName = node.data.organizationName;
      this.newData.parentId = node.data.parentId;
      // 拖拽开始时克隆数据
      this.copyTreeList = JSON.parse(
        JSON.stringify(this.data)
      );
    },
    //拖拽进入其他节点时触发的事件
    // handleDragEnter(draggingNode, dropNode, ev) {
    //   //console.log('tree drag enter: ', dropNode.label);
    // },
    //拖拽离开某个节点时触发的事件
    // handleDragLeave(draggingNode, dropNode, ev) {
    //   //console.log('tree drag leave: ', dropNode.label);
    // },
    //在拖拽节点时触发的事件（类似浏览器的 mouseover 事件）
    // handleDragOver(draggingNode, dropNode, ev) {
    //   // console.log('tree drag over: ', dropNode.label);
    // },
    //拖拽结束时（可能未成功）触发的事件, dropType, ev
    handleDragEnd(draggingNode, dropNode) {
      // debugger
      console.log('tree drag end: ', dropNode.data.id);
      this.endid = dropNode.data.id
    },
    //拖拽成功完成时触发的事件 draggingNode, dropNode, dropType, ev
    handleDrop(draggingNode, dropNode, dropType) {
      this.$confirm(
        `是否将节点移动到${dropNode.label}${dropType == "before" ? "之前" : dropType == "after" ? "之后" : "下"
        }?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          // 成功之后调用接口
          this.newData.parentId = this.endid;
          this.$put("接口", this.newData).then((res) => {
            if (res.success) {
              Message({
                type: 'success',
                message: '修改成功！'
              })
            }
          })
          this.$message({
            type: "success",
            message: "移动成功!"
          });
          this.getTree();
        })
        .catch(() => {
          this.data = this.copyTreeList;
          this.$message({
            type: "info",
            message: "取消移动"
          });
          // this.newData.parentId = this.endid;
          // this.$put("接口", this.newData).then((res) => {
          //   if (res.success) {
          //     Message({
          //       type: 'success',
          //       message: '修改成功！'
          //     })
          //   }
          // })
        })
    },
    //拖拽时判定目标节点能否被放置。, type
    allowDrop(draggingNode, dropNode) {
      // console.log(55, dropNode.label, dropNode.data.parentId);
      if (dropNode.data.id === 1) {
        console.log(151, dropNode.data.id);
        return false
      } else {
        return true
      }
    },
    //判断节点能否被拖拽
    allowDrag(draggingNode) {
      // 顶层默认分组不允许拖拽
      if (draggingNode.data.id === 1) {
        this.startParentid = this.endid;
        return false
      } else {
        this.startParentid = this.endid;
        return true
      }
    },
    //添加
    append() {
      // debugger
      var obj = {
        parentId: this.addOrga.id,
        systemId: this.addOrga.systemId,
        code: this.addForm.code,
        organizationName: this.addForm.organizationName,
        organizationChildren: []
      }
      if (!this.data.organizationChildren) {
        this.$set(this.data, 'organizationChildren', []);
      }
      this.data.organizationChildren.push(obj);
      console.log(2356, obj);
      this.$post("接口", obj).then((res) => {
        if (res.success) {
          Message({
            type: 'success',
            message: '添加成功！'
          })
          this.getTree();
          this.addForm = {}
          this.addDialog = false
        }
      })

    },

    //编辑
    edit(node, data) {
      this.editData = data
      this.editDialog = true
      this.editForm = JSON.parse(JSON.stringify(data));
    },

    //保存编辑
    submitEdit() {
      this.newData.id = this.editData.id;
      this.newData.systemId = this.editData.systemId;
      this.newData.organizationName = this.editForm.organizationName;
      this.newData.code = this.editForm.code;
      this.newData.parentId = this.editData.parentId;
      this.$put("接口", this.newData).then((res) => {
        if (res.success) {
          Message({
            type: 'success',
            message: '修改成功！'
          })
          this.editDialog = false
          this.getTree();
        }
      })
    },

    //删除
    remove(node, data) {
      console.log(data.id);
      var _this = this;
      MessageBox.confirm("是否确定删除该架构信息！", "提醒", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        _this.$delete('接口' + data.id)
          .then((res) => {
            if (res.code == 200) {
              Message({
                type: "success",
                message: "删除成功！",
              });
              _this.getTree();
            }
          })
          .catch((err) => {
            console.log(err);
          });
      });
    },
  }
};
</script>