spfm-market-front/src/components/newTree.vue

<template>
  <div class="flex-box">
    <div class="treebox">
      <div class="tree-text">组织机构</div>
      <el-input placeholder="可按名字匹配所在部门" v-model="filterText">
      </el-input>
      <el-tree ref="tree" @node-click="handleNodeClick" :data="treeList" node-key="o" :indent="20"
        :default-checked-keys="defaultListc" :default-expanded-keys="defaultList">
        <span class="span-ellipsis" slot-scope="{ node, data }">
          <span :title="node.label"><i v-if="data.children.length === 0" class="el-icon-caret-right icon-right"></i>
            {{ node.label }}</span>
        </span>
      </el-tree>
    </div>
    <div class="flex-transfer">
      <el-transfer v-model="value" :titles="['待选人员', '已选人员']" @change="handleCheckChange"
        :data="transferList"></el-transfer>
    </div>
  </div>
</template>

<script>
export default {
  props: ["defaultList", "type"],
  data() {
    return {
      filterTexts: "",
      filterText: "",
      transferList: [],
      treeList: [],
      treeLists: [],
      rightList: [],
      value: [],
      newArr: [],
      opt: [],
      treeId: 1,
      defaultProps: {
        children: "children",
        label: "label",
      },
      defaultListc: [],
    };
  },
  methods: {
    handleNodeClick(v) {
      for (let i = v.children.length - 1; i >= 0; i--) {
        if (v.children[i].haveUserFlag == "N") {
          v.children.splice(i, 1);
        }
      }
      // v.children.map((item,index) =>{

      //   if(item.haveUserFlag == "N"){
      //     v.children.splice(index, 1);
      //   }
      //   console.log(v.children);
      // })
      let list = {
        groupId: v.o,
      };
      if (this.filterTexts) {
        list.loginNameStr = this.filterTexts;
      }
      if (v.o !== this.treeId) {
        if (this.value.length !== 0) {
          let a = [];
          for (let i = 0; i <= this.transferList.length - 1; i++) {
            for (let y = 0; y <= this.value.length; y++) {
              if (this.transferList[i].key === this.value[y]) {
                console.log(this.transferList[i].key);
                console.log(this.value[y]);
                a.push(this.transferList[i]);

              }
            }
          }
          console.log(a);
          this.transferList = a;
          // console.log(this.transferList);
        } else {
          this.transferList = [];
        }
      }
      let s = false;
      if (v.children && v.children.length == 0) {
        s = true;
      }
      if (v.type) {
        return;
      }
      if (
        v.children &&
        v.children.length > 0 &&
        v.children[v.children.length - 1].type == 1
      ) {
        return;
      }
      if (v.o !== this.treeId) {
        this.$http({
          url: "/sysmgr/sysuserinfo/queryListByName",
          method: "post",
          headers: {
            "Content-Type": "application/json",
          },
          data: list
        }).then((res) => {
          v.children = v.children ? v.children : [];
          this.treeId = v.o;
          this.treeLists = res.data;
          res.data.map((item, index) => {
            this.transferList.push({
              label: item.loginNameStr,
              key: item.loginNoStr,
            });
          });
          const dalaoyang = (arr, key) => {
            let map = new Map()
            return arr.filter(item => !map.has(item[key]) && map.set(item[key], 1))
          }
          this.transferList = dalaoyang(this.transferList, "key")
          console.log(this.transferList);
        });
      } else {
        console.log(this.transferList);
      }
    },
    getTree(v, e) {
      let list = {
        parentorgid: v,
        // functionName: e,
      };
      if (e) {
        list.functionName = e;
      }
      this.loading = true;
      this.$http({
        url: "/sysmgr/csysdept/queryAllList",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: list,
      }).then((res) => {
        this.loading = false;
        this.treeList = res.data;
        let list = res.data[0].children.filter((item, i, array) => {
          return item.haveUserFlag === "Y";
        });
        this.treeList[0].children = list;
      });
    },
    handleCheckChange(v) {
      // let opt = [];
      // let list = this.$refs.tree.getCheckedNodes();
      // for (let i = 0; i < list.length; i++) {
      //   if (this.type == 1) {
      //     opt.push({
      //       deptCode: list[i].o,
      //       deptName: list[i].ou,
      //     });
      //   } else {
      //     opt.push({
      //       deptId: list[i].o,
      //       deptName: list[i].ou,
      //     });
      //   }
      // }
      // console.log(opt);
      let opt = [];
      this.transferList.map((item) => {
        this.value.map((items) => {
          if (item.key === items) {
            opt.push(item);
          }
        });
      });
      console.log(opt);
      this.$emit("treeCheck", opt);
    },
  },
  created() {
    this.getTree();
    this.defaultListc = this.defaultList;
  },
  watch: {
    filterText(val) {
      // this.$refs.tree.filter(val);
      console.log(val);
      this.filterTexts = val;
      this.getTree("", this.filterTexts);
    },
  },
};
</script>


<style scoped lang="scss">
::v-deep .el-checkbox.el-transfer-panel__item {
  display: block !important;
}

::v-deep .el-transfer-panel__list.is-filterable {
  height: calc(100% - 110px);
}

::v-deep .el-transfer-panel__body {
  height: 100%;
}

.tree-text {
  font-size: 20px;
  color: black;
  padding: 15px;
  font-weight: 600;
}

.flex-box {
  display: flex;
  width: 100%;
  justify-content: center;
  height: 80%;
}

::v-deep .el-icon-caret-right {
  font-size: 12px;
  background-size: cover;
  margin-left: px;
}

.icon-right {
  margin-left: 5px;
  color: #fff;
}

.treebox {
  width: 30%;
  border: 1px solid #ddd;
  height: 100%;
  background-color: #fff;
  overflow: scroll;
  overflow-x: hidden;
}

.flex-transfer {
  width: 50%;
  height: 100%;
  margin-left: 30px;
}

::v-deep .el-transfer-panel {
  width: 35%;
  height: 100%;
}

::v-deep .el-transfer {
  height: 100%;
}
</style>