|
|
@@ -0,0 +1,176 @@
|
|
|
+<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", "resetList"],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ treeList: [],
|
|
|
+ opt: [],
|
|
|
+ defaultProps: {
|
|
|
+ children: "children",
|
|
|
+ label: "label",
|
|
|
+ },
|
|
|
+ defaultListc: [],
|
|
|
+ loading: false,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getTree() {
|
|
|
+ this.loading = true;
|
|
|
+ this.$http({
|
|
|
+ url: "/sysmgr/csysdept/queryAllList",
|
|
|
+ method: "post",
|
|
|
+ headers: {
|
|
|
+ "Content-Type": "application/json",
|
|
|
+ },
|
|
|
+ data: {},
|
|
|
+ }).then((res) => {
|
|
|
+ this.treeList = res.data;
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ // 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() {
|
|
|
+ const nodeList = this.$refs.tree.store.getCheckedNodes();
|
|
|
+ // let opt = {
|
|
|
+ // loginNameStr: v.data.loginNoStr,
|
|
|
+ // leaderAuditName: v.data.label,
|
|
|
+ // displayname: v.data.displayname,
|
|
|
+ // groupId: v.data.o,
|
|
|
+ // };
|
|
|
+ this.$emit("treeCheck", nodeList);
|
|
|
+ // 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 = !this.$refs.tree.store._getAllNodes()[i].checked;
|
|
|
+ // }
|
|
|
+ // // else {
|
|
|
+ // // this.$refs.tree.store._getAllNodes()[i].checked = false;
|
|
|
+ // // }
|
|
|
+ // }
|
|
|
+ // this.$forceUpdate();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getTree();
|
|
|
+ this.defaultListc = this.defaultList;
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ type() {
|
|
|
+ console.log("aaa");
|
|
|
+ this.defaultListc = this.defaultList;
|
|
|
+ this.$forceUpdate();
|
|
|
+ },
|
|
|
+ defaultList() {
|
|
|
+ this.$forceUpdate();
|
|
|
+ },
|
|
|
+ closeList() {
|
|
|
+ this.$refs.tree.setCheckedKeys([]);
|
|
|
+ if ([...this.resetList] && [...this.resetList].length > 0) {
|
|
|
+ [...this.resetList].forEach((el) => {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.tree.setChecked(el, true);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.el-icon-caret-right {
|
|
|
+ color: #ccc;
|
|
|
+ margin: 0 5px;
|
|
|
+}
|
|
|
+.treebox {
|
|
|
+ border: 1px solid #ddd;
|
|
|
+}
|
|
|
+</style>
|
韩兵