通过点击左侧的树获取人员列表，将选中的人员回显到已选择部分（树，多选框）

<el-dialog :title="setReviewerTitle" :visible.sync="setReviewerVisible">
        <div class="custom-tree-container" style="margin-bottom:15px;">
        <!-- 左侧的树 -->
          <div style="width:48%;border:1px solid #DCDFE6;height:300px;">
            <el-input placeholder="输入关键字进行过滤" v-model="filterText" style="padding:10px;">
            </el-input>
            <div style="width:95%;height:230px;overflow-y:auto;margin:0 auto;">
              <el-tree class="filter-tree" :data="setUserstreeData" :props="defaultProps" :filter-node-method="filterNode" :highlight-current="true" ref="tree" @node-click="setReviewerNodeClick" default-expand-all>
              </el-tree>
            </div>
          </div>
		  <!-- 右侧的人员列表-->
          <div style="width:48%;border:1px solid #DCDFE6;height:300px;">
            <el-input placeholder="输入关键字进行过滤" v-model="checkboxFilterText" style="padding:10px;" @input="inputCheckboxFilterText" />
            <div style="width:95%;height:230px;overflow-y:auto;margin:0 auto;">
              <el-checkbox-group v-model="checkedUsers" style="padding:10px;">
                <el-checkbox style="display:block;padding:3px;" v-for="item in checkboxUsers" :label="item.id" :key="item.id" @change="checkboxChange(item.realName,item.id,$event)">{{item.realName}}</el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
        </div>
        <!-- 将选中的人员进行回显-->
        <div style="height:25px;font-size:16px;line-height:20px;">
          已选择
        </div>
        <div style="width:99%;border:1px solid #DCDFE6;height:150px;overflow-y:auto;padding:10px;">
          <el-tag v-for="item in dynamicTags" :key="item.id" closable type="info" @close="handleClose(item)" effect="plain" style="margin-bottom:5px;">
            {{ item.realName }}
          </el-tag>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="preserveSetReviewer(setReviewerTitle)">保 存</el-button>
          <el-button @click="cancelSetReviewer(setReviewerTitle)">取 消</el-button>
        </span>
      </el-dialog>

setReviewerVisible: false, //设置评审人  对话框
      setReviewerTitle: "", //设置评审人标题

      dynamicTags: [
        //设置评审人 已选择人员展示
        // { id: "1368812632591613954", realName: "张三" },
        // { id: "1425622827346993153", realName: "李四" },
        // { id: "1354306079344857089", realName: "王五" },
        // { id: "1036465471609819137", realName: "小白" },
      ],
      setUserstreeData: [], //设置评审人 左侧的树
      checkedUsers: [], //设置评审人  右侧人员选中
      checkboxUsers: [], //设置评审人  右侧人员选择
      filterText: "", //设置评审人 左侧树形组件   输入框过滤
      checkboxFilterText: "", //设置评审人 右侧输入框过滤
      defaultProps: {
        children: "child",
        label: "name",
      },
      getCurrentSelectedId: "", //设置评审人 右侧当前选中的单位

    // 设置评审人 获取评审人单位组织机构树
    getReViewOfficeTree(code) {
      let params = {
        code: code,
      };
      //此处为获取组织机构树的接口
      getReViewOfficeTree(params)
        .then((res) => {
          this.setUserstreeData = [res.data];
        })
        .catch((err) => {});
    },
    // 设置评审人 左侧树  支持过滤
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    //设置评审人 左侧树 点击树的单位 获取所选单位的id
    setReviewerNodeClick(data) {
      console.log("kdsafkdsfn", data.id);
      this.getCurrentSelectedId = data.id;
      this.getCheckboxUsers();
    },
    // 设置评审人 右侧输入框人员过滤
    inputCheckboxFilterText() {
      // params.name = this.checkboxFilterText;
      this.getCheckboxUsers();
    },
    // 设置评审人 左侧选择树，右侧输入框过滤---获取最终人选列表
    getCheckboxUsers() {
      let params = {
        id: this.getCurrentSelectedId,
      };
      if (this.checkboxFilterText) {
        params.name = this.checkboxFilterText;
      }
      getComUsers(params)
        .then((res) => {
          this.checkboxUsers = res.data;
        })
        .catch((err) => {
          console.log("");
        });
    },
    // 设置评审人 点击右侧多选框
    checkboxChange(name, id, e) {
      console.log("checkboxChange点击右侧多选框2222", name, id, e);
      console.log("checkedUsers222", this.checkedUsers);
      if (e) {
        this.dynamicTags.push({ id: id, realName: name });
      } else {
        const values = this.dynamicTags.map((item) => item.id);
        console.log("values.indexOf(id)", values.indexOf(id));
        this.dynamicTags.splice(values.indexOf(id), 1);
      }
    },
    // 设置评审人 展示右侧已选中的用户名称，支持删除
    handleClose(tag) {
      this.$confirm("是否确定删除?", "删除", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
      })
        .then(() => {
          console.log("tag6666666", tag);
          this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
          this.$message({type: "success", message: "删除成功",});
          let values = JSON.parse(JSON.stringify( this.checkedUsers ));
          this.checkedUsers = values.filter((item) => item != tag.id);
        })
        .catch(() => {
          this.$message({type: "info",message: "已取消删除",});
        });
    },
    // 设置评审人  调取查询接口
    querySetReviewer(command) {
      this.dynamicTags = [];
      this.checkedUsers = [];
      this.getCurrentSelectedId = "";
      this.checkboxUsers = [];
      let params = {
        taskId: this.ruleForm.taskId,
      };
      //此处为刚进页面
      querySelectReportUsers(params)
        .then((res) => {
          console.log("res7777777", res.data);
          this.dynamicTags = res.data;
          this.checkedUsers = this.dynamicTags.map((item) => item.id);
        })
        .catch((err) => {});
    },
    // 保存  设置评审人
    preserveSetReviewer(command) {
      if (command.substring(0, 2) == "初评") {
        this.projectReportUser("2");
      } else {
        this.projectReportUser("3");
      }
    },
    // 保存  设置评审人 调用保存接口
    projectReportUser(val) {
      let ids = this.dynamicTags.map((item) => item.id);
      let params = {
        taskId: this.ruleForm.taskId,
        stage: val,
        ids: ids,
      };
      if (ids.length == 0) {
        return this.$message.error("请添加评审人");
      }
      projectReportUser(params)
        .then((res) => {
          if (res.code == "200") {
            console.log("dsadsfdsfsda");
            this.$message.success("设置成功" );
            this.setReviewerVisible = false;
            this.clickQuery();
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error( "设置失败" );
        });
    },
    // 取消  设置评审人
    cancelSetReviewer(command) {
      this.setReviewerVisible = false;
    },