组织机构树更改

src/components/newTree.vue

@@ -0,0 +1,216 @@
+<template>
+  <div class="flex-box">
+    <div class="treebox">
+      <div class="tree-text">组织机构</div>
+      <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="['待选人员', '已选人员']"
+        filterable
+        @change="handleCheckChange"
+        :data="transferList"
+      ></el-transfer>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["defaultList", "type"],
+  data() {
+    return {
+      transferList: [],
+      treeList: [],
+      treeLists:[],
+      rightList: [],
+      value: [],
+      newArr: [],
+      opt: [],
+      treeId: 1,
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+      defaultListc: [],
+    };
+  },
+  methods: {
+    handleNodeClick(v) {
+      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]) {
+                a.push(this.transferList[i]);
+              }
+            }
+          }
+          this.transferList = a;
+        } 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/queryList",
+          method: "post",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          data: {
+            groupId: v.o,
+          },
+        }).then((res) => {
+          this.treeId = v.o;
+          this.treeLists = res.data
+          res.data.map((item, index) => {
+            this.transferList.push({
+              label: item.loginNameStr,
+              key: item.loginNoStr
+,
+            });
+          });
+        });
+      } else {
+        console.log(this.transferList);
+      }
+    },
+    getTree(v) {
+      this.$http({
+        url: "/sysmgr/csysdept/queryAllList",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        data: {
+          parentorgid: v,
+        },
+      }).then((res) => {
+        this.treeList = res.data;
+
+        console.log(this.treeLists);
+      });
+    },
+    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);
+      console.log(this.transferList);
+      console.log(this.value);
+      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;
+  },
+};
+</script>
+
+
+<style scoped lang="scss">
+::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>