个人设置开发

src/app/pages/system-management/user-management/user-management.component.html

@@ -1,3 +1,10 @@
-<p>
-  user-management works!
-</p>
+<div class="system-main-container">
+	<div class="user-manage">
+		<div class="tree-box">
+			<ul id="treeDemo" class="ztree"></ul>
+		</div>
+		<div class="card">
+			
+		</div>
+	</div>
+</div>

src/app/pages/system-management/user-management/user-management.component.scss

@@ -0,0 +1,5 @@
+.user-manage{
+	.card{
+		
+	}
+}

src/app/pages/system-management/user-management/user-management.component.ts

@@ -1,15 +1,98 @@
 import { Component, OnInit } from '@angular/core';
+import { HttpClientService } from '../../../services/http-client.service';
+
+import 'ztree';
+declare var $: any;
+declare var jQuery: any;
 
 @Component({
   selector: 'app-user-management',
   templateUrl: './user-management.component.html',
-  styleUrls: ['./user-management.component.scss']
+  styleUrls: ['./user-management.component.scss','../../main.scss']
 })
 export class UserManagementComponent implements OnInit {
+	treeSelected:any;		//树模型-当前选中项
+	public search:any={
+		page_index:'1',
+		page_size:'10',
+		real_name:'',
+		login_name:'',
+		orgId:'',	
+	}
+	parentNode:any;
+	parentName:any;
+	isTreeTop:any=false;	//判断是否为树最顶层
 
-  constructor() { }
+	constructor(
+		private http:HttpClientService,
+		) { }
 
-  ngOnInit() {
-  }
+	ngOnInit() {
+		this.initTree();
+	}
+	//树模型参数设置
+	public zNodes: any[];
+	setting = {
+	    data: {
+	    	simpleData: {
+	        enable: true
+	      	}
+	    },
+	    view: {
+	    	showLine: false,
+	      	dblClickExpand: false,
+	      	showIcon:true
+	    },
+	    callback: {
+	     	//节点点击事件
+	    	onClick: (event, treeId, treeNode, clickFlag) => {
+	        	var zTree = $.fn.zTree.getZTreeObj("treeDemo");
+	        	zTree.expandNode(treeNode);
+	            this.treeSelected=treeNode;
+	            this.search.orgId=this.treeSelected.id;
+	            this.parentNode=this.treeSelected.getParentNode();
+	            if(!this.parentNode){
+	            	this.isTreeTop=true;
+	            }else{
+	            	this.isTreeTop=false;
+	            }
+	        },
+		    //节点展开事件
+		    onExpand: (event, treeId, treeNode) => {
+		        
+		    }
+	    },
+  	};
+	//新树模型
+	initTree(){
+   		//获取目录列表
+   		this.http.get("/sysapi/setting/organization/list",).subscribe(json=>{
+   			if(json.is_success&&json.body){
+   				let children=[];
+   				for(var i=0;i<json.body.length;i++){
+   					let option=json.body[i];
+   					option.name=option.organization;
+   					if(option.pid){
+   						option.pId=option.pid;
+   					}else{
+   						option.pId='hsfuhiw34239j89sauf98992h3indshv98h392hf9mplsd032fs2a2313fc';
+   					}
+   					
+   				}
+   				json.body.push({
+   					name:"全部机构",
+   					isParent:true,
+   					open:true,
+   					id:'hsfuhiw34239j89sauf98992h3indshv98h392hf9mplsd032fs2a2313fc',
+   				})
+   				
+   			}
 
+   			this.zNodes=json.body;
+	   		 $.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes);
+	          var zTree = $.fn.zTree.getZTreeObj("treeDemo");
+	          let node =  zTree.getNodes();
+	   	})
+
+	}
 }