部门管理-新增

src/app/pages/main.scss

@@ -8,6 +8,10 @@
 .orange{
 	color: orange;
 }
+
+.danger{
+	color: #f86c6b;
+}
 .left{
 	float: left;
 }

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

@@ -118,9 +118,10 @@
 				</nz-form-item>
 				<nz-form-item>
 					<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="code" nzRequired>机构编码</nz-form-label>
-					<nz-form-control [nzSm]="18" [nzXs]="24">
-						<input nz-input id="code" formControlName="code" placeholder="请输入姓名">
+					<nz-form-control [nzSm]="18" [nzXs]="24" [nzValidateStatus]="checkNameStatus" nzHasFeedback>
+						<input nz-input id="code" formControlName="code" placeholder="请输入姓名" (blur)='checkName()' (keydown)="checkNameStatus='';nameOnly=true" name="validating">
 						<nz-form-explain *ngIf="validateForm.get('code').dirty && validateForm.get('code').errors">请输入机构编码</nz-form-explain>
+						<nz-form-explain *ngIf="!nameOnly" class="danger">该编码已存在</nz-form-explain>
 					</nz-form-control>
 				</nz-form-item>
 				<nz-form-item>
@@ -153,16 +154,49 @@
 					</nz-form-control>
 				</nz-form-item>
 				<nz-form-item>
-				<nz-form-label [nzSm]="4" [nzXs]="24">所属机构</nz-form-label>
-				<nz-form-control [nzSm]="18" [nzXs]="24">
-					<span *ngIf="orgSeleted">
-					<nz-tag nzMode="closeable"  (nzOnClose)="tagClose($event)" >{{orgSeleted.organization}}</nz-tag>
-					</span>
-					<a href="javascript:;"  (click)="open()"><span *ngIf="orgSeleted">修改</span><span *ngIf="!orgSeleted">选择</span></a>
-					<nz-form-explain *ngIf="!orgSeleted&&saveCheck" class="red">请选择所属机构</nz-form-explain>
-				</nz-form-control>
-			</nz-form-item>
+					<nz-form-label [nzSm]="4" [nzXs]="24">所属机构</nz-form-label>
+					<nz-form-control [nzSm]="18" [nzXs]="24">
+						<span *ngIf="orgSeleted">
+						<nz-tag nzMode="closeable"  (nzOnClose)="tagClose($event)" >{{orgSeleted.organization}}</nz-tag>
+						</span>
+						<a href="javascript:;"  (click)="open()"><span *ngIf="orgSeleted">修改</span><span *ngIf="!orgSeleted">选择</span></a>
+						<nz-form-explain *ngIf="!orgSeleted&&saveCheck" class="red">请选择所属机构</nz-form-explain>
+					</nz-form-control>
+				</nz-form-item>
+				<nz-form-item>
+					<nz-form-label [nzSm]="4" [nzXs]="24">机构负责人</nz-form-label>
+					<nz-form-control [nzSm]="18" [nzXs]="24">
+						<a href="javascript:;"  (click)="openUsers()">选择</a>
+					</nz-form-control>
+				</nz-form-item>
+				<div class="user-table table-box">
+					<nz-table [nzShowPagination]='false'  #dataSet [nzData]="userSelecteds">
+						<thead>
+							<tr>
+								<th>姓名</th>
+								<th>用户名</th>
+								<th>电话</th>
+								<th>操作</th>
+							</tr>
+						</thead>
+						<tbody>
+							<tr *ngFor="let item of dataSet.data;let i=index">
+								<td>{{item.real_name}}</td>
+								<td>{{item.login_name}}</td>
+								<td>{{item.mobile}}</td>
+								<td>
+									<i nz-popconfirm nzTitle="确定删除该用户?" nzOkText="确定" nzCancelText="取消" (nzOnConfirm)="delectConfirm(item)" (nzOnCancel)="delectCancel()" class="table-operation-btn danger" nz-icon type="delete" theme="outline"></i>
+								</td>
+							</tr>
+						</tbody>
+					</nz-table>
+				</div>
+
 			</form>
+			<div class="user-footer" *ngIf="modifyType!=3">
+				<button (click)='submitForm()' [nzLoading]="isLoadingSave"  nz-button nzType="primary"  class="mr10" [disabled]='!this.validateForm.valid||!this.nameOnly'>保存</button>
+				<button (click)='cancel()' nz-button nzType="default">取消</button>
+			</div>
 			<!-- 新增、修改 end -->
 		</div>
 	</div>
@@ -175,11 +209,47 @@
 				<input nz-input style="width: 180px !important;margin-left: 8px;margin-right: 6px;" id="key" />
 				<button nz-button nzType="primary" nzShape="circle" (click)="searchNode()"><i nz-icon type="search"></i></button>
 			</div>
-			<ul id="treeDemoChild" class="ztree"></ul>
+			<ul id="treeDemoChild" class="ztree ztree-child"></ul>
 			<div class="drawer-footer">
 				<button (click)='treeSave()'  nz-button nzType="primary" class="mr10">保存</button>
 				<button (click)=close() nz-button nzType="default">取消</button>
 			</div>
 		</div>
 	</nz-drawer>
+</div>
+
+<!-- 机构负责人选择 -->
+<!-- 选择所属机构 -->
+<div class="org-selete-box">
+	<nz-drawer [nzBodyStyle]="{ height: 'calc(100% - 55px)', overflow: 'auto', 'padding-bottom':'53px' }" [nzMaskClosable]="false" [nzWidth]="auto" [nzVisible]="visibleUsers" nzTitle="选择机构" (nzOnClose)="closeUser()">
+		<div class="users-box" [hidden]='statusParamsUsers.status!=3'>
+			<div class="user-table-box">
+				<nz-table [nzShowPagination]='false'  #dataSet [nzData]="userData">
+					<thead>
+						<tr>
+							<th></th>
+							<th>姓名</th>
+							<th>用户名</th>
+							<th>电话</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr *ngFor="let item of dataSet.data">
+							<td nzShowCheckbox [(nzChecked)]="item.checked" [nzDisabled]="item.disabled"></td>
+							<td>{{item.real_name}}</td>
+							<td>{{item.login_name}}</td>
+							<td>{{item.mobile}}</td>
+						</tr>
+					</tbody>
+				</nz-table>
+				<div class="page-box" *ngIf="statusParamsUsers.status==3">
+					<nz-pagination [nzPageIndex]="search.page_index" (nzPageIndexChange)='pageChange($event)' [nzPageSize]='search.page_size' [nzTotal]="collectionSize"></nz-pagination>
+				</div>
+			</div>
+			<div class="drawer-footer">
+				<button (click)='userSave()'  nz-button nzType="primary" class="mr10">保存</button>
+				<button (click)=closeUser() nz-button nzType="default">取消</button>
+			</div>
+		</div>
+	</nz-drawer>
 </div>

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

@@ -26,4 +26,27 @@
 			overflow-y:scroll; 
 		}
 	} 
+	.user-footer{
+
+		text-align: center;
+		
+	}
+}
+@-moz-document url-prefix(){
+	.user-footer{
+		padding-bottom: 20px; 
+	}
+}
+.ztree-child{
+	padding-bottom: 40px;
+	padding-right: 16px;
+}
+.drawer-footer{
+	display: inline-block;
+	position: relative;
+	left: 50%;
+	transform: translate(-50%)
+}
+.users-box{
+	padding-bottom: 30px;
 }

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

@@ -15,27 +15,41 @@ declare var jQuery: any
   styleUrls: ['./department-management.component.scss']
 })
 export class DepartmentManagementComponent implements OnInit {
+	collectionSize:any ; 
 	treeSelected:any;		//树模型-当前选中项
 	treeSelectedChild:any; //上级机构选择树
 	statusParamsTree:any={	//获取机构接口的状态，0请求失败 1请求前 2请求中 3请求成功，有数据  4请求成功，无数据 
 		status:1,
 	}
+	statusParamsUsers:any={	//接口的状态，0请求失败 1请求前 2请求中 3请求成功，有数据  4请求成功，无数据 
+		status:1,
+	}
 	public TreeData:any;
 	public canDel:any=false;
 	public canEdit:any=false;
 	public search:any={
-		orgId:'',	 
+		page_index:'1',
+		page_size:'10',
+		real_name:'',	 
 	}
 	public orgDetail:any='';
 	public orgSeleted:any=''; //所选机构详情
 	public modifyType:any='3'; //操作状态 1新增 2修改 3详情
 	public parentName:any='';
 	public parentNode:any='';	//当前选中机构的父级节点
-	public userList:any='';		//机构负责人列表
+	public userList:any='';		//机构负责人列表-详情时展示用户列表
+	public userSelecteds:any=[]; 	//机构负责人已选用户-新增、修改时 
+	public userData:any=[];		//用户列表数据
 	saveCheck:any=false; //保存检查，保存验证表单 false 还未验证  true 触发了验证
-	
+	public visible:any=false;
+	public orgSeletedBtn:any=true; //控制机构选择按钮
 	validateForm: FormGroup;
-
+	visibleUsers:any=false;
+	isLoadingSave:any=false;
+	nameOnly:any=true; //系统账号是否唯一 true唯一 false重复
+	oldLoginName:any=''; //修改时，保存原本的系统账号，用于检测唯一性
+	checkNameStatus:any=''; //检测账号唯一性的图标状态
+	orgList:any=[];
 	constructor(
 		private fb: FormBuilder,
 		private http:HttpClientService,
@@ -62,14 +76,41 @@ export class DepartmentManagementComponent implements OnInit {
 
 		    });
 		this.initTree();
+		this.queryTable();
 	}
 	//新增、修改
 	addModify(type){
 		this.modifyType=type;
+		this.userSelecteds=[];
 	}
-
+	//保存
 	submitForm(){
-		this.saveCheck=true;
+		let pid='';
+		let userList=[];
+		this.orgSeleted?pid=this.orgSeleted.id:pid='';
+		if(this.userSelecteds&&this.userSelecteds.length>0){
+			this.userSelecteds.forEach(item=>{
+				userList.push({uid:item.uid})
+			})
+		}
+		let params=Object.assign({},this.validateForm.value,{pid:pid},{userList:userList})
+		console.log(params)
+	}
+	//取消	
+	cancel(){
+		this.modifyType=3;
+	}
+	//保存机构负责人
+	userSave(){
+		console.log(this.userData);
+		this.userData.forEach(item=>{
+			if(item.checked&&!item.disabled){
+				console.log(item)
+				// 增加数据
+				    this.userSelecteds = [ ...this.userSelecteds, item];
+			}
+		})
+		this.visibleUsers = false;
 	}
 	//保存选择机构
 	treeSave(){
@@ -82,6 +123,28 @@ export class DepartmentManagementComponent implements OnInit {
 			this.message.create('warning', `请选择所属机构！`,{ nzDuration: 2000 });
 		}
 	}
+	//打开机构负责人抽屉
+	openUsers(){
+		this.visibleUsers = true;
+		this.queryTable();
+	}
+	//处理机构负责人选择和数据回填
+	userSelect(){
+		if(this.userData){
+			this.userData.forEach(item=>{
+				this.userSelecteds.forEach(option=>{
+					if(item.uid==option.uid){
+						item.checked=true;
+						item.disabled=true;
+					}
+				})
+			})
+		}
+	}
+	//关闭用户选择抽屉
+	closeUser(){
+		this.visibleUsers = false;
+	}
 	//打开机构树抽屉
 	open(): void {
 		this.treeSelectedChild='';
@@ -96,6 +159,52 @@ export class DepartmentManagementComponent implements OnInit {
 		this.orgSeletedBtn=true;
 		this.orgSeleted='';
 	}
+	//删除机构负责人
+	delectConfirm(item){
+		this.userSelecteds=this.userSelecteds.filter(function(option){
+			return item.uid!==option.uid
+		})
+	}
+	//取消删除
+	delectCancel(){
+
+	}
+	
+	//获取列表
+	queryTable():void{
+		this.statusParamsUsers.status=1;
+		this.http.get('/sysapi/setting/user/list',this.search).subscribe((json)=>{
+			if(json.is_success){
+				this.userData=json.body.list;
+				this.collectionSize=json.body.total;
+				if(json.body.list&&json.body.list.length>0){
+					this.statusParamsUsers.status=3;
+					this.userData.forEach(item=>{
+						if(this.userSelecteds.length>0){
+							this.userSelecteds.forEach(option=>{
+								if(item.uid==option.uid){
+									item.checked=true;
+									item.disabled=true;
+								}
+							})
+						}else{
+							item.checked=false;
+							item.disabled=false;
+						}
+					})
+				}else{
+					this.statusParamsUsers.status=4;
+				}
+			}else{
+				this.statusParamsUsers.status=0;
+			}
+		})
+	}
+	//翻页
+	pageChange(event){
+		this.search.page_index=event;
+		this.queryTable();
+	}
 	//修改时查询该系统下的所有用户
 	queryUserById():void{
 	  this.http.get('/sysapi/setting/organization/queryUserById/'+this.orgDetail.id).subscribe((json)=>{
@@ -106,6 +215,21 @@ export class DepartmentManagementComponent implements OnInit {
 	    }
 	  })
 	}
+	//检验编码的唯一性
+	checkName(){
+		//处理修改的时候，修改的值为原来的值，这时候直接显示验证成功
+		if(this.modifyType==2&&this.validateForm.value.code.trim()==this.oldLoginName){
+			this.nameOnly = true;
+			this.checkNameStatus='success';
+			return false;
+		}
+		this.orgList.forEach(item=>{
+			if(this.validateForm.value.code.trim()==item.code){
+				this.checkNameStatus='error';
+				this.nameOnly = false;
+			}
+		})
+	}
 	//获取机构列表，树模型数据处理
 	initTree(){
    		//获取目录列表
@@ -114,6 +238,7 @@ export class DepartmentManagementComponent implements OnInit {
    			if(json.is_success){
    				if(json.body.length>0){
    					this.statusParamsTree.status=3;
+   					this.orgList=json.body;
    					let children=[];
    					json.body.forEach(option=>{
    						option.name=option.organization;
@@ -174,6 +299,7 @@ export class DepartmentManagementComponent implements OnInit {
 	            console.log(isTopNode)
 	            if(isTopNode){	//子节点
 	            	this.orgDetail=treeNode;
+	            	this.oldLoginName=this.orgDetail.code;
 	            	this.queryUserById();
 	            	this.canDel=true;
 	            	this.canEdit=true;
@@ -184,7 +310,7 @@ export class DepartmentManagementComponent implements OnInit {
 	            		this.parentNode=isTopNode;
 	            	}
 	            }else{	//顶级节点
-	            	this.orgDetail='';
+	            	this.orgDetail=''; 
 	            	this.canDel=false;
 	            	this.canEdit=false;
 	            }

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

@@ -26,7 +26,7 @@
 				</nz-form-control>
 			</nz-form-item>
 			<nz-form-item>
-				<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="password" nzRequired>所属机构</nz-form-label>
+				<nz-form-label [nzSm]="4" [nzXs]="24" nzRequired>所属机构</nz-form-label>
 				<nz-form-control [nzSm]="14" [nzXs]="24">
 					<span *ngIf="orgDetail">
 					<nz-tag nzMode="closeable"  (nzOnClose)="tagClose($event)" >{{orgDetail.organization}}</nz-tag>

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

@@ -1,4 +1,4 @@
-<div class="system-main-container">
+<div class="system-main-container"> 
 	<div class="user-manage">
 		<div class="tree-box" id="tree-box">
 			<app-request-status [statusParams]='statusParamsTree'></app-request-status>