线上渠道

src/pages/main/performance/components/deptTreeOnly.vue

@@ -0,0 +1,154 @@
+<template>
+  <div class="treebox" v-loading="loading">
+    <el-tree
+      :highlight-current="true"
+      :check-strictly="true"
+      ref="tree"
+      :data="treeList"
+      node-key="o"
+      :default-checked-keys="defaultListc"
+      :default-expanded-keys="defaultListc"
+      @node-click="handleNodeClick"
+    >
+      <span class="custom-tree-node" slot-scope="{ node }">
+        <em
+          style="display: inline-block; width: 20px"
+          v-if="node.data.haveUserFlag == 'N' && node.data.children.length == 0"
+        ></em>
+        <i
+          class="el-icon-caret-right"
+          v-if="node.data.haveUserFlag == 'Y' && node.data.children.length == 0"
+        ></i>
+        <el-checkbox
+          @change="handleCheckChange(node)"
+          style="margin-right: 10px"
+          v-model="node.checked"
+          v-if="node.data.type == 1"
+        ></el-checkbox>
+        <span>{{ node.label }}</span>
+      </span>
+    </el-tree>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["defaultList", "type", "closeList"],
+  data() {
+    return {
+      treeList: [],
+      opt: [],
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+      defaultListc: [],
+      loading: false,
+    };
+  },
+  methods: {
+    getTree() {
+      const info = JSON.parse(sessionStorage.userInfo);
+      console.log(info, "JSON.parse(sessionStorage.userInfo)");
+      this.treeList = [
+        {
+          children: [],
+          o: info.groupId,
+          label: `${info.groupName}`,
+          haveUserFlag: "Y",
+          ou: `${info.groupName}`,
+        },
+      ];
+    },
+    handleNodeClick(v) {
+      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;
+      }
+      this.loading = true;
+      console.log(v);
+      this.$http({
+        url: "/sysmgr/sysuserinfo/queryList",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        data: {
+          groupId: v.o,
+        },
+      }).then((res) => {
+        v.children = v.children ? v.children : [];
+        res.data.forEach((item) => {
+          v.children.push({
+            id: item.groupId,
+            label: item.loginNameStr,
+            type: 1,
+            displayname: v.displayname,
+            loginNoStr: item.loginNoStr,
+            o: item.id,
+          });
+        });
+        this.loading = false;
+      });
+      for (let i = 0; i < this.$refs.tree.store._getAllNodes().length; i++) {
+        if (s && v.o == this.$refs.tree.store._getAllNodes()[i].data.o) {
+          this.$refs.tree.store._getAllNodes()[i].expanded = true;
+        }
+      }
+    },
+    handleCheckChange(v) {
+      let opt = {
+        loginNameStr: v.data.loginNoStr,
+        leaderAuditName: v.data.label,
+        displayname: v.data.displayname,
+        groupId: v.data.o,
+      };
+      this.$emit("treeCheck", opt);
+      for (let i = 0; i < this.$refs.tree.store._getAllNodes().length; i++) {
+        if (v.data.o == this.$refs.tree.store._getAllNodes()[i].data.o) {
+          this.$refs.tree.store._getAllNodes()[i].checked = true;
+        } else {
+          this.$refs.tree.store._getAllNodes()[i].checked = false;
+        }
+      }
+      this.$forceUpdate();
+    },
+  },
+  created() {
+    this.getTree();
+    this.defaultListc = this.defaultList;
+  },
+  watch: {
+    type() {
+      this.defaultListc = this.defaultList;
+      this.$forceUpdate();
+    },
+    defaultList() {
+      this.$forceUpdate();
+    },
+    closeList() {
+      this.$refs.tree.setCheckedNodes([]);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.el-icon-caret-right {
+  color: #ccc;
+  margin: 0 5px;
+}
+.treebox {
+  border: 1px solid #ddd;
+}
+</style>