VUE-ElementUI 对话框多层级树形控件，穿越框复杂业务实现

请忽略css，主要是逻辑，看图，图片为子组件,左侧树形控件，中间选择框，右侧展示框

父组件

<template>
  <div class="box">
    <div class="ad-primary choose-btn" @click="chooseOne">请选择人员</div>
    <div class="ad-primary choose-btn" @click="chooseTwo">请选择管理员</div>
    <div>选择人员{{attendanceOfficerNameList}}</div>
    <div>选择管理员{{attendanceOfficerNameListF}}</div>

    <select-officer
      @dialogFun="dialogOne"
      :post-visible="dialogVisibleOne"
      :post-person="kqPerson"
      :post-frame="kqCount"
      :post-user="kqCountu"></select-officer>
    
    <select-officer
      @dialogFun="dialogTwo"
      :post-visible="dialogVisibleTwo"
      :post-person="labelPerson"
      :post-frame="labelCount"
      :post-user="labelCountu"></select-officer>
    
  </div>
</template>

<script>
  import attendanceOfficer from "@/pages/common/attendanceOfficer"

  export default {
    name: 'attendanceAdd',
    components: {
      'select-officer': attendanceOfficer
    },
    data() {
      return {
        dialogVisibleOne: false,
        dialogVisibleTwo: false,
        kqPerson: [],
        kqCount: 0,
        kqCountu: 0,
        labelPerson: [],
        labelCount: 0,
        labelCountu: 0,
        attendanceOfficerIds: [],
        attendanceOfficerNameList: "",
        attendanceOfficerIdsF: [],
        attendanceOfficerNameListF: "",
      }
    },
    created() {
      this.getDatas();
    },
    methods: {
      /** 考勤类型列表 */
      getDatas() {
        function getQuery (variable) {
          let code = window.location.search.substring(1)
          //let enUrl = 'user=dev-test&pwd=11111111'
          //let enUrls = encodeURIComponent(enUrl)
          //console.log(enUrls)
          let codes = decodeURIComponent(code)
          let vars = codes.split("&");
          for (let i = 0; i < vars.length; i++) {
            let pair = vars[i].split("=");
            if (pair[0] == variable) {
              return pair[1];
            }
          }
          return (false);
        }

        let that = this;
        let u = getQuery('kqId');
        //console.log('kq = '+u)
        if (u) {
          let params_show = {
            //"requestId":"4333532244114",
            "authToken": "12312",
            "userToken": "26cea5f746ae4c7fbf7c3a4018b23f28",
            "data": {
              "kqId": u
            }
          }
          this.http.post('www.centby.com/show', params_show).then(
            res => {
              if (res.data.kqPersons != null) {
                that.kqPerson = res.data.kqPersons;
                let j = 0;
                let k = 0;
                res.data.kqPersons.forEach(function (item) {
                  if (nodeType == 0) {
                    j++;
                  } else if (nodeType == 1) {
                    k++
                  }
                });
                that.kqCount = j;
                that.kqCountu = k;
              }
              if (res.data.kqLiablePersons != null) {
                that.labelPerson = res.data.kqLiablePersons;
                let m = 0;
                let n = 0;
                res.data.kqLiablePersons.forEach(function (item) {
                  if (nodeType == 0) {
                    m++;
                  } else if (nodeType == 1) {
                    n++
                  }
                });
                that.labelCount = m;
                that.labelCountu = n;
              }
              //console.log(JSON.stringify(res))
            },
            error => {
              console.log(error.message)
            }
          )
        }
      },
      chooseOne(){
        this.dialogVisibleOne = true;
      },
      chooseTwo(){
        this.dialogVisibleTwo = true;
      },
      dialogOne(data){
        //console.log(data)
        this.dialogVisibleOne = data.emita;
        this.attendanceOfficerIds = data.emitb;
        this.attendanceOfficerNameList = data.emitc;
      },
      dialogTwo(data){
        //console.log(data)
        this.dialogVisibleTwo = data.emita;
        this.attendanceOfficerIdsF = data.emitb;
        this.attendanceOfficerNameListF = data.emitc;
      }
    }
  }
</script>

<style scoped>
  .choose-btn {
    width: 80px;
    height: 30px;
    line-height: 30px;
    padding: 0 20px;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
  }
</style>

子组件

<template>
  <el-dialog
    title="选择人员"
    align="left"
    :visible.sync="dialogVisible"
    width="50%"
    :before-close="handleClose">
    <div class="chosen-modal">
      <div class="chosen-modal-left">
        <div class="chosen-modal-hd">
          <div class="chosen-modal-hd-search">
            <i class="el-icon-search" @click="searchSelect"></i>
            <input type="text" class="aui-input" placeholder="搜索" v-model="searchWord" id="chosenSearch">
          </div>
        </div>
        <div class="chosen-modal-bd" style="position: relative;">
          <div class="chosen-left" style="width: 200px;">
            <el-tree :data="treeData" :props="defaultProps" node-key="id" @node-click="handleNodeClick">
                <span class="custom-tree-node" slot-scope="{ node, data }">
                  <i class="el-icon-folder-opened" v-show="data.nodeType == 0 ? true : false"></i>
                  <i class="el-icon-s-custom" v-show="data.nodeType == 0 ? false : true"></i>
                  <span>{{ node.label }}</span>
                </span>
            </el-tree>
          </div>
          <div class="chosen-right">
            <el-checkbox v-model="checkAll" @change="handleCheckAllChange" :disabled="forbid">全选</el-checkbox>
            <div style="margin: 15px 0;"></div>
            <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
              <el-checkbox v-for="item in category" :label="item.id" :key="item.id" :disabled="forbid">
                <i class="el-icon-folder-opened" v-show="item.nodeType == 0 ? true : false"></i>
                <i class="el-icon-s-custom" v-show="item.nodeType == 0 ? false : true"></i>
                {{item.name}}
              </el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
      </div>
      <div class="chosen-modal-right">
        <div class="chosen-modal-right-hd">
          <p id="tipText">已选{{frameCount}}个架构，{{userCount}}名用户</p>
        </div>
        <div class="chosen-modal-right-bd">
          <div class="chosen-person-org" v-for="items in selectList" :key="items.id" @click="delList(items.id)">
            <i class="el-icon-folder-opened" v-show="items.nodeType == 0 ? true : false"></i>
            <i class="el-icon-s-custom" v-show="items.nodeType == 0 ? false : true"></i>
            <span class="js-chosen-rs-text">{{items.name}}</span>
            <i class="el-icon-close"></i>
          </div>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" class="ad-primary" @click="next">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  //centby.com

  export default {
    name: 'attendanceOfficer',
    props: {
      postFrame: {
        type: Number
      },
      postUser: {
        type: Number
      },
      postVisible: {
        type: Boolean
      },
      postPerson: {
        type: Array,
        default: () => []
      }
    },
    data () {
      return {
        searchWord: "",
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        treeData: [],//树形渲染
        category: [],//选中框渲染
        selectList: [],//展示框渲染
        checkAll: false,//全选按钮状态
        checkedCities: [],//选中框选中的 id 列表
        listId:[],//选中框所有 id 列表
        parentList: [],//当前树形节点所有父级 id 列表包含自己
        forbid: false,//选中框所有禁选状态，默认可选
        frameCount: 0,
        userCount: 0,
        attendanceOfficerIds: [],//选中的 id 传给父组件
        attendanceOfficerNameList: "",//选中字符串传给父组件，做展示
        reviewData: '',//展示框请求回显数据
        dialogVisible: false//对话框打开或关闭状态
      }
    },
    watch: {
      postFrame: {
        handler(newName, oldName) {
          this.frameCount = newName;
        },
        immediate: true,
        deep: true
      },
      postUser: {
        handler(newName, oldName) {
          this.userCount = newName;
        },
        immediate: true,
        deep: true
      },
      postPerson: {
        handler(newName, oldName) {
          this.selectList = newName;
        },
        immediate: true,
        deep: true
      },
      postVisible: {
        handler(newName, oldName) {
          this.dialogVisible = newName;
        },
        type: Boolean
      }
    },
    created(){
      this.treePool();
    },
    methods: {
      handleClose(){
        this.dialogVisible = false;
        this.$emit('dialogFun', this.dialogVisible);
      },
      next() {
        let list = this.selectList;
        let arr = [];
        list.forEach(item => {
          this.attendanceOfficerIds.push(item.id);
          arr.push(item.name);
        })
        this.attendanceOfficerNameList = arr.join(",");
        console.log(this.attendanceOfficerIds)
        console.log(this.attendanceOfficerNameList)
        this.dialogVisible = false;
        //对话框打开关闭状态，选中 id 列表，选中 name 列表返回给父组件
        this.$emit('dialogFun', {emita:this.dialogVisible,emitb:this.attendanceOfficerIds,emitc:this.attendanceOfficerNameList});
      },
      treePool () {
        //展示框数据
        // this.selectList = [{
        //   id: '7387601',
        //   name: '科技部',
        //   nodeType: '0'
        // }]
        //树形数据
        /*
        [{
            "id": "0",
            "label": "学生",
            "nodeType": 0,
            "orgType": 1,
            "children": [
                {
                    "id": "3736461431145987660",
                    "label": "初中部",
                    "nodeType": 0,
                    "orgType": 1,
                    "children": [
                        {
                            "id": "3736461431145987661",
                            "label": "2011级",
                            "nodeType": 0,
                            "orgType": 1,
                            "children": [
                                {
                                    "id": "3736461431145987662",
                                    "label": "3班",
                                    "nodeType": 0,
                                    "orgType": 1,
                                    "children": [
                                        {
                                            "id": "3736461431145987663",
                                            "label": "小牛奶",
                                            "nodeType": 1,
                                            "orgType": 1,
                                            "children": null
                                        },
                                        {
                                            "id": "3736461431145987663",
                                            "label": "小牛奶",
                                            "nodeType": 1,
                                            "orgType": 1,
                                            "children": null
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]
        }]
        */
        let that = this;
        let params = {
          //"requestId":"4333532244114",
          "authToken":"12312",
          "userToken":"26cea5f746ae4c7fbf7c3a4018b23f28",
          "data":{

          }
        }
        this.http.post('www.centby.com/whole', params).then(
          res => {
            that.treeData = res.data;
            //console.log(JSON.stringify(treeData))
          },
          error => {
            console.log(error.message)
          }
        )
      },
      searchSelect() {
        console.log(this.searchWord);
        let that = this;
        let keyWord = this.searchWord;
        let params = {
          //"requestId":"userToken1574677356105xRx1",
          "authToken":"666",
          "userToken":"666",
          "data":{
            "keyWord": keyWord
          }
        }
        this.http.post('www.centby.com/word', params).then(
          res => {
            console.log(JSON.stringify(res))
            that.treeData = res.data
          },
          error => {
            console.log(error.message)
          }
        )
      },
      handleCheckAllChange(val) {
        let all = JSON.parse(JSON.stringify(this.listId));
        //console.log("all  ===   "+all)
        this.checkedCities = val ? all : [];
        //this.isIndeterminate = false;
        //console.log("list  ===   "+this.checkedCities);
        let that = this;
        let categorys = JSON.parse(JSON.stringify(this.category));
        if(val === true){
          //全部展示
          categorys.forEach(function(item){
            categorys.find(function(s){
              if(s.id === item.id){
                //console.log(s)
                that.selectList = that.selectList.concat([s])
                //放入展示框，并去重
                let k = {};
                that.selectList = that.selectList.reduce(function (subitem, next) {
                  k[next.id] ? '' : k[next.id] = true && subitem.push(next);
                  return subitem;
                }, []);
              }
            })
          })
        }else{
          //取消展示
          categorys.forEach(function(item){
            for(let j = 0;j < that.selectList.length;j++){
              if(that.selectList[j].id === item.id){
                that.selectList.splice(j,1);
              }
            }
          })
        }
        //计算展示框数量
        let j = 0;
        let k = 0;
        that.selectList.forEach(function(item){
          if(item.nodeType == 0){
            j++;
          }else if(item.nodeType == 1){
            k++
          }
        });
        that.frameCount = j;
        that.userCount = k;
      },
      handleCheckedCitiesChange(value) {
        //console.log("sub  ===   "+JSON.stringify(value))
        /*
        //选中 id 列表数据示例
        //checkedCities = [3736461431145987743]
        //选择框数据示例
        category = [
            {
                "id": "3736461431145987660",
                "name": "初中部",
                "nodeType": 0
            },
            {
                "id": "3736461431145987743",
                "name": "小学部",
                "nodeType": 0
            }
        ]
        * * */
        let categorys = this.category;
        console.log("value  === " + this.checkedCities )
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.category.length;
        //this.isIndeterminate = checkedCount > 0 && checkedCount < this.category.length;
        let that = this;
        //console.log('list  = '+this.listId)
        let deepCopy = JSON.stringify(this.listId);
        let unChecked = JSON.parse(deepCopy);
        //选中ID展示
        value.forEach(function (item) {
          //console.log(item)
          //添加到展示框
          categorys.find(function(s){
            if(s.id === item){
              //console.log(s)
              that.selectList = that.selectList.concat([s])
              //放入展示框，并去重
              let k = {};
              that.selectList = that.selectList.reduce(function (subitem, next) {
                k[next.id] ? '' : k[next.id] = true && subitem.push(next);
                return subitem;
              }, []);
            }
          })
          //console.log('uncheck = '+JSON.stringify(unChecked))
          //获取不选中的id
          for(let i = 0;i < unChecked.length;i++){
            // /console.log(item)
            if(unChecked[i] == item){
              unChecked.splice(i,1);
            }
          }
        })
        //console.log('res = '+JSON.stringify(unChecked))
        //把未选中的从展示框删除
        unChecked.forEach(function(item){
          for(let j = 0;j < that.selectList.length;j++){
            if(that.selectList[j].id == item){
              that.selectList.splice(j,1);
            }
          }
        })
        //计算展示框数量
        let j = 0;
        let k = 0;
        that.selectList.forEach(function(item){
          if(item.nodeType == 0){
            j++;
          }else if(item.nodeType == 1){
            k++
          }
        });
        that.frameCount = j;
        that.userCount = k;
      },
      delList(val){
        console.log('del     '+JSON.stringify(val))
        //console.log('forbid  = '+ this.forbid)
        let that = this;
        //let checkedMenu = JSON.parse(JSON.stringify(this.checkedCities));
        let categorys = JSON.parse(JSON.stringify(that.category));
        //第一步先从展示框删除
        for(let j = 0;j < that.selectList.length;j++){
          if(that.selectList[j].id == val){
            that.selectList.splice(j,1);
          }
        }
        let permission = this.forbid;
        if(permission === true){
          //禁止选择状态
          //第二步拿删除当前id后的展示框列表 和 所有树形父级 id 列表对比
          let hasOne = false;
          let parent = JSON.parse(JSON.stringify(that.parentList));
          let showList = JSON.parse(JSON.stringify(that.selectList));
          console.log('after   ==  '+ JSON.stringify(showList))
          console.log('parent   ==  '+ JSON.stringify(parent))
          parent.forEach(function(item){
            showList.forEach(function(show){
              if(show.id == item){
                hasOne = true;
              }
            })
          })
          //没有父级，改变禁选状态为可选，并重新渲染选择框列表
          if(hasOne === false){
            //改变禁选状态为可选
            that.forbid = false;
            //从展示框删除
            for(let j = 0;j < that.selectList.length;j++){
              if(that.selectList[j].id == val){
                that.selectList.splice(j,1);
              }
            }
            //重新渲染选中框
            that.checkAll = false;
            that.checkedCities = [];
            that.selectList.forEach(function (item) {
              //console.log(item)
              categorys.find(function(s){
                if(s.id === item.id){
                  //console.log(s)
                  that.checkedCities.push(item.id)
                  //选中等于当前所有选中框列表全选操作
                  if(that.checkedCities.length == categorys.length){
                    that.checkAll = true;
                  }
                }
              })
            })
          }
        }else{
          //非禁选状态
          //重新渲染选中框
          for(let j = 0;j < that.checkedCities.length;j++){
            if(that.checkedCities[j] == val){
              that.checkedCities.splice(j,1);
              that.checkAll = false;
            }
          }
        }
        //计算展示框数量
        let j = 0;
        let k = 0;
        that.selectList.forEach(function(item){
          if(item.nodeType == 0){
            j++;
          }else if(item.nodeType == 1){
            k++
          }
        });
        that.frameCount = j;
        that.userCount = k;
      },
      handleNodeClick(data) {
        //点击树状列表
        //console.log(data);
        /*
        //选择框数据示例
        {
          "code": 0,
          "message": "调用成功",
          "data": {
              "parentIds": [],
              "nodes": [
                  {
                      "id": "3736461431145987660",
                      "name": "初中部",
                      "nodeType": 0
                  },
                  {
                      "id": "3736461431145987743",
                      "name": "小学部",
                      "nodeType": 0
                  }
              ]
          }
        }

        //选中 id 数据示例
        checkedCities = [3736461431145987743]
        //选择框展示数据示例，展示框数据结构和选择框数据结构相同，选择框选中的列表为数组结构 id 列表
        category = [
            {
                "id": "3736461431145987660",
                "name": "初中部",
                "nodeType": 0
            },
            {
                "id": "3736461431145987743",
                "name": "小学部",
                "nodeType": 0
            }
        ]
        * * */
        let that = this;
        let idx = data.id;
        let types = data.orgType;
        let params = {
          //"requestId":"userToken1574677356105xRx1",
          "authToken":"666",
          "userToken":"666",
          "data":{
            "orgId": idx,
            "orgType": types
          }
        }
        this.http.post('www.centby.com/info', params).then(
          res => {
            //console.log(res)
            that.category = res.data.nodes;
            //提取所有ID并保存
            let arr = [];
            that.category.forEach(function(item){
              //console.log(item.id)
              arr.push(item.id)
            });
            that.listId = arr;
            //所有id保存，that.listId = ['3736461431145987600','3736461431145987601','3736461431145987602'];
            //初始化并保存当前所有树形父级 id 列表包含自己，展示框删除操作会调用此数据
            that.parentList = JSON.parse(JSON.stringify(res.data.parentIds));
            console.log('parent   =  '+ JSON.stringify(that.parentList));
            //初始化禁选判断，禁选，全选按钮，已选中
            let permission = false;
            that.forbid = false;
            that.checkAll = false;
            that.checkedCities = [];
            //使用JSON转换解决深拷贝问题
            let parent = JSON.parse(JSON.stringify(that.parentList));
            let showList = JSON.parse(JSON.stringify(that.selectList));
            //每次点击树状列表,拿当前所有树形父级 id 列表（parentIds）包含自己，和展示框列表 id 对比，如果有，选择框展示全部全选并且禁止状态
            //展示框删除动作，会取此禁选状态做展示框删除动作
            parent.forEach(function(item){
              showList.forEach(function(show){
                if(show.id == item){
                  permission = true;
                }
              })
            })
            if(permission == true){
              //禁止选择操作
              that.checkedCities = that.listId;
              that.checkAll = true;
              that.forbid = true;
              // that.selectList.forEach(function (item) {
              //   if(item.id == idx){
              //     that.checkedCities = that.listId;
              //     that.checkAll = true;
              //     that.forbid = true;
              //   }
              // })
            }else{
              //不禁止状态回显渲染
              that.selectList.forEach(function (item) {
                //console.log(item)
                that.category.find(function(s){
                  if(s.id === item.id){
                    //console.log(s)
                    that.checkedCities.push(item.id)
                    //选中等于当前所有选中框列表全选操作
                    if(that.checkedCities.length == that.listId.length){
                      that.checkAll = true;
                    }
                  }
                })
              })
            }

          },
          error => {
            console.log(error.message)
          }
        )
      },
    }
  }
</script>

<style scoped lang="scss">
  .box >>> .el-checkbox {
    display: block;
  }
  .chosen-modal {
    display: flex;
    height: 598px;
    padding: 15px;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
  }
  .chosen-modal-left {
    width: 430px;
  }
  .chosen-modal-hd {
    padding: 20px;
    display: flex;
    border-top: 1px solid #dddee1;
    border-right: 1px solid #dddee1;
    border-left: 1px solid #dddee1;
  }
  .chosen-modal-hd .chosen-modal-hd-search {
    position: relative;
    flex: 1;
  }
  .chosen-modal-hd .chosen-modal-hd-search i {
    width: 32px;
    height: 32px;
    line-height: 32px;
    font-size: 16px;
    text-align: center;
    color: #80848f;
    position: absolute;
    right: 0;
    z-index: 1;
    cursor: pointer;
  }
  .aui-input {
    display: inline-block;
    width: 100%;
    height: 32px;
    line-height: 1.5;
    padding: 4px 32px 4px 7px;
    box-sizing: border-box;
    font-size: 12px;
    border: 1px solid #dddee1;
    border-radius: 4px;
    color: #6e7d8f;
    background-color: #fff;
    background-image: none;
    position: relative;
    cursor: text;
    transition: border .2s ease-in-out,background .2s ease-in-out,box-shadow .2s ease-in-out;
  }
  .chosen-modal-bd {
    display: flex;
    height: 526px;
    border: 1px solid #dddee1;
  }
  .chosen-left {
    margin-top: -1px;
    width: 200px;
    min-width: 200px;
    height: 525px;
    overflow-y: auto;
    position: absolute;
    background: #fff;
    z-index: 2;
    overflow-x: hidden;
    border-top: 1px solid #dddee1;
    border-right: 1px solid #dddee1;
  }
  .chosen-left-device {
    margin-top: -1px;
    width: 200px;
    min-width: 200px;
    height: 525px;
    overflow-y: auto;
    position: absolute;
    background: #fff;
    z-index: 2;
    overflow-x: hidden;
    border-top: 1px solid #dddee1;
  }
  .chosen-right {
    flex: 1;
    padding-left: 200px;
    z-index: 1;
    overflow-y: scroll;
  }
  .chosen-right .el-checkbox {
    padding: 10px 15px;
    color: #0cb181;
  }
  .aui-checkbox-label {
    align-items: center;
    width: 100%;
    white-space: normal;
    word-wrap: break-word;
    word-break: break-all;
    margin-bottom: 0;
    line-height: 1.3;
  }
  .chosen-modal-right {
    flex: 1;
    border: 1px solid #dddee1;
    margin-left: 20px;
  }
  .chosen-modal-right-hd {
    padding: 20px;
  }
  .chosen-modal-right-bd {
    height: 538px;
    overflow: auto;
  }
  .chosen-person-org {
    display: flex;
    padding: 6px 20px;
    height: 20px;
    align-items: center;
  }
  .chosen-modal-right-bd>div>i {
    font-size: 12px;
    color: #0cb181;
    margin-right: 5px;
    align-self: baseline;
    position: relative;
    top: 6px;
  }
  .chosen-modal-right-bd>div>span {
    flex: 1;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    word-break: break-all;
    overflow: hidden;
  }

</style>