机构树实现添加子节点、添加父节点

<template>
  <div class="app-wrapper">
    <headerTitle :titleList="titleList" :hideButton="true" />
    <div class="app-container" id="instructor-detail">
      <div class="block" style="display: flex">
        <div class="left">
          <div style="margin-bottom: 10px; cursor: pointer" @click="addFnode">
            <span
              class="el-icon-circle-plus-outline left_add"
              >&nbsp;</span
            >
            <span class="add_btn">新建</span>
          </div>
          <div style="font-size: 14px">
            <el-tree
              ref="menuTree"
              :data="data2"
              node-key="id"
              :props="defaultProps"
              default-expand-all
              :expand-on-click-node="false"
              @node-click="handleNodeClick"
              :highlight-current="true"
              :current-node-key="currentNodekey"
            >
              <span slot-scope="{ data }" class="custom-tree-node">
                <span>{{ data.name }}</span>
              </span>
            </el-tree>
          </div>
        </div>
        <div class="tab-container">
          <div style="margin: 0 0 30px 30px">
            <el-button
              round
              size="mini"
              class="el-icon-circle-plus-outline add_child_organ"
              v-show="organShow==2"
              @click="addChildOrgan(infoForm.name)"
              >&nbsp;添加附属机构</el-button
            >
            <el-button
              round
              size="mini"
              class="del_btn"
              @click="delNode"
              >删除</el-button
            >
          </div>
          <el-form
            style="width: 78%; margin-left: 10px"
            ref="ruleForm1"
            :model="infoForm"
            :rules="formrules"
            label-width="80px"
            autocomplete="off"
            label-position="right"
          >
            <el-form-item label="所在机构" label-width="100px" v-show="organShow==3">
              <div class="elform-item">
                <el-input
                  class="item"
                  size="small"
                  placeholder="请选择所在机构"
                  v-model="infoForm.organ"
                  :disabled="organShow==3"
                ></el-input>
              </div>
            </el-form-item>
            <el-form-item label="名称" prop="name" label-width="100px">
              <div class="elform-item">
                <el-input
                  class="item"
                  size="small"
                  placeholder="请输入名称"
                  v-model="infoForm.name"
                ></el-input>
              </div>
            </el-form-item>
            <el-form-item label="编码" label-width="100px">
              <div class="elform-item">
                <el-input
                  class="item"
                  size="small"
                  placeholder="请输入编码"
                  v-model="infoForm.code"
                ></el-input>
              </div>
            </el-form-item>
            <el-form-item label="描述" label-width="100px">
              <div class="elform-item">
                <el-input
                  class="item"
                  size="small"
                  type="textarea"
                  placeholder="请输入描述"
                  :rows="5"
                  v-model="infoForm.into"
                ></el-input>
              </div>
            </el-form-item>
            <el-form-item label="状态" label-width="100px">
              <!-- <div class="elform-item"> -->
              <el-radio-group
                v-model="infoForm.status"
                style="margin-left: 80px"
              >
                <el-radio :label="1">启用</el-radio>
                <el-radio :label="0">禁用</el-radio>
              </el-radio-group>
              <!-- </div> -->
            </el-form-item>
          </el-form>
          <div
            style="
              width: 78%;
              margin-left: 70px;
              display: flex;
              justify-content: center;
            "
          >
            <el-button size="mini" type="default" round @click="cancel()"
              >取消</el-button
            >
            <el-button size="mini" type="primary" round @click="saveAdd()"
              >保存</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import headImg from "../../../../src/icons/default_photo.png";
import MD5 from "js-md5";
import HeaderTitle from "@/components/Headertitle/index";
import {
  addInstructor,
  updateInstructor,
  fetchInstructorList,
} from "@/api/zjrsapi/instructor";
import { fetchBranchOrgan, fetchLabel, uploadFile } from "@/api/zjrsapi/common"; //分支机构
export default {
  components: {
    HeaderTitle,
  },
  data() {
    return {
      titleList: [{ title: "用户角色" }, { title: "设置权限" }],
      type: "", //1新增2编辑
      teacherLabelList: [], //讲师标签
      infoForm: {
        organ: "", //所在机构
        name: "", //名称
        code: "", //编码
        into: "", //描述
        status: 1, //状态
      },
      imgUrl: headImg,
      formrules: {
        // id: [{ required: true, message: "讲师ID不能为空", trigger: "blur" }],
        // name: [
        //   { required: true, message: "讲师姓名不能为空", trigger: "blur" },
        // ],
        // tag: [{ required: true, message: "讲师标签不能为空", trigger: "blur" }],
      },
      branchOrgan: [],
      editid: "",
      fOz: 1,
      organShow:2,  //2展示添加附属机构按钮 3展示所在机构
      data2: [
        {
          id: 51,
          name: "视频库",
          childList: [],
        },
        {
          id: 57,
          name: "话术库",
          childList: [
            {
              id: 58,
              name: "话术1号",
            },
            {
              id: 72,
              name: "话术库2号",
            },
          ],
        },
        {
          id: 73,
          name: "测试A",
          childList: [
            {
              id: 75,
              name: "测试AB",
            },
          ],
        },
        {
          id: 74,
          name: "测试AB",
          childList: [],
        },
        {
          id: 59,
          name: "素材库",
          childList: [
            {
              id: 70,
              name: "素材库1号",
            },
          ],
        },
      ],
      defaultProps: {
        children: "childList",
        label: "name",
        id: "id",
      },
      delId:"",
      currentNodekey:"",//默认选中的节点树
    };
  },
  mounted() {
    this.fetchTeacherLabel();
    this.fetchBranchOrgans();
    //设置当前选中的节点为第一个
    this.currentNodekey=this.data2[0].id
    if(this.$refs.menuTree){
      this.$refs.menuTree.setCurrentKey(this.data2[0])
      this.infoForm.name=this.data2[0].name
    }
    
  },
  methods: {
    //所属机构
    fetchBranchOrgans() {
      fetchBranchOrgan({ id: 0 }).then((response) => {
        if (response.code == 0) {
          this.branchOrgan = response.data;
        } else {
          this.$message({
            type: "error",
            message: response.msg,
          });
        }
      });
    },
    //讲师标签
    fetchTeacherLabel() {
      fetchLabel({ id: 36 }).then((response) => {
        if (response.code == 0) {
          this.teacherLabelList = response.data;
        } else {
          this.$message({
            type: "error",
            message: response.msg,
          });
        }
      });
    },
    cancel() {
      this.$router.back();
    },
    getEditData(id) {
      fetchInstructorList({}).then((res) => {
        res.data.forEach((item, index) => {
          if (item.id == id) {
            this.infoForm = item;
          }
        });
      });
    },
    saveAdd() {
      if(this.fOz==1){
        //父
        let length = 0;
        this.data2.forEach((item, index) => {
          length += item.childList.length;
        });
        length = this.data2.length + length;
        console.log(length, "长度");
        this.data2.push({
          id: length + 1,
          name: this.infoForm.name,
          childList: [],
        });
      }else{
        //子
        let length = 0;
        this.data2.forEach((item, index) => {
          length += item.childList.length;
        });
        length = this.data2.length + length;

        this.data2.forEach((item,index)=>{
          if(item.name==this.infoForm.organ){
            item.childList.push({
              id:length+1,
              name:this.infoForm.name
            })
          }
        })
      }
      // const p1 = new Promise((resolve, reject) => {
      //   this.$refs["ruleForm1"].validate((valid) => {
      //     if (valid) {
      //       resolve();
      //     } else {
      //       console.log("error submit!!");
      //       return false;
      //     }
      //   });
      // });

      // Promise.all([p1]).then(() => {
      //   console.log("验证通过,提交表单数据");
      //   if (this.type == "1") {
      //     addInstructor({
      //       ...this.infoForm,
      //     }).then((response) => {
      //       if (response.code == 0) {
      //         this.cancel();
      //       } else {
      //         this.$message({
      //           type: "error",
      //           message: response.msg,
      //         });
      //       }
      //     });
      //   } else {
      //     updateInstructor({
      //       id: this.editid,
      //       ...this.infoForm,
      //     }).then((response) => {
      //       if (response.code == 0) {
      //         this.cancel();
      //       } else {
      //         this.$message({
      //           type: "error",
      //           message: response.msg,
      //         });
      //       }
      //     });
      //   }
      // });
    },
    //树节点被点击时
    handleNodeClick(data) {
      console.log(data, "我被点击啦");
      this.delId=data.id
      this.infoForm.name=data.name
      if(data.childList){
        //点击的是父
        this.organShow=2
      }else{
        //点击的是子
        this.organShow=1
        this.infoForm.organ=data.name
      }
    },
    //添加父节点
    addFnode() {
      this.fOz=1
      this.organShow=1
      this.infoForm={
        organ: "", //所在机构
        name: "", //名称
        code: "", //编码
        into: "", //描述
        status: 1, //状态
      }
    },
    //添加附属机构
    addChildOrgan(name){
      this.infoForm.organ=name;
      this.infoForm.name=""
      this.fOz=2
      this.organShow=3
    },
    //删除节点
    delNode(){
      if(!this.delId){
        this.$message({
          type: 'error',
          message: '请选择节点后再删除'
        }); 
      }else{
        this.$confirm('确定删除该节点吗, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          console.log(this.delId,"删除的节点")
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }
       
    }

  },
};
</script>
<style lang="scss">
#instructor-detail .el-form-item__label {
  color: #333;
  font-weight: 600;
}
</style>
<style lang="scss" scoped>
.app-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  .app-container {
    .block {
      width: 100%;
      height: 100%;
      background: #fff;
      .left {
        width: 232px;
        border-right: 1px solid rgb(216, 211, 211);
        padding: 15px;
        .left_add{
          color: grey; 
          font-weight: 600
        }
        .add_btn{
          color: #333333;
          font-weight: 600;
          font-size: 13px
        }
      }
      .tab-container {
        width: 100%;
        margin-top: 15px;
        .add_child_organ{
          border-color: #0059da;
          color: #0059da;
          background-color: #eaf3fe;
        }
        .del_btn{
          border-color: #0059da;
          color: #0059da
        }
        
        .elform-item {
          display: flex;
          margin-left: 80px;
          .item {
            width: 40%;
            margin-right: 20px;
          }
          .item-span {
            color: #ccc;
            font-size: 13px;
          }
          .upload-img {
            position: relative;
          }
          .img_mask {
            display: none;
            height: 200px;
            width: 90%;
            background: rgba(165, 162, 162, 0.4);
            position: absolute;
            margin-left: 10px;
            color: white;
          }
          .upload-img:hover .img_mask {
            display: block;
            z-index: 20;
          }
        }
      }
    }
  }
}
</style>