From 628f041b17e9a38d3875d620ba0430698cce2bab Mon Sep 17 00:00:00 2001 From: liweijin <610336687@qq.com> Date: Mon, 10 Dec 2018 18:31:18 +0800 Subject: [PATCH] =?UTF-8?q?=E8=A7=92=E8=89=B2=E7=AE=A1=E7=90=86-=E6=96=B0?= =?UTF-8?q?=E5=A2=9E=E3=80=81=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../department-management.component.html | 9 +- .../department-management.component.ts | 31 +- .../role-management-modify.component.html | 98 +++++++ .../role-management-modify.component.scss | 43 +++ .../role-management-modify.component.spec.ts | 25 ++ .../role-management-modify.component.ts | 275 ++++++++++++++++++ .../role-management.component.html | 63 +++- .../role-management.component.scss | 20 ++ .../role-management.component.ts | 87 +++++- .../system-management-routing.module.ts | 6 + .../system-management.module.ts | 2 + 11 files changed, 644 insertions(+), 15 deletions(-) create mode 100644 src/app/pages/system-management/role-management/role-management-modify/role-management-modify.component.html create mode 100644 src/app/pages/system-management/role-management/role-management-modify/role-management-modify.component.scss create mode 100644 src/app/pages/system-management/role-management/role-management-modify/role-management-modify.component.spec.ts create mode 100644 src/app/pages/system-management/role-management/role-management-modify/role-management-modify.component.ts diff --git a/src/app/pages/system-management/department-management/department-management.component.html b/src/app/pages/system-management/department-management/department-management.component.html index 3c4fc18..7199f9a 100644 --- a/src/app/pages/system-management/department-management/department-management.component.html +++ b/src/app/pages/system-management/department-management/department-management.component.html @@ -8,7 +8,7 @@
- +
@@ -176,7 +176,7 @@ 姓名 用户名 电话 - 操作 + 操作 @@ -194,7 +194,7 @@
- +
@@ -219,9 +219,8 @@ -
- +
diff --git a/src/app/pages/system-management/department-management/department-management.component.ts b/src/app/pages/system-management/department-management/department-management.component.ts index 645e132..90ec8f7 100644 --- a/src/app/pages/system-management/department-management/department-management.component.ts +++ b/src/app/pages/system-management/department-management/department-management.component.ts @@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core'; import { FormBuilder,FormControl,FormGroup,Validators} from '@angular/forms'; import { HttpClientService } from '../../../services/http-client.service'; import { Router } from '@angular/router'; -import { NzMessageService } from 'ng-zorro-antd'; +import { NzMessageService,NzModalRef, NzModalService } from 'ng-zorro-antd'; import { Observable } from 'rxjs'; import 'ztree'; @@ -50,12 +50,15 @@ export class DepartmentManagementComponent implements OnInit { oldLoginName:any=''; //修改时，保存原本的系统账号，用于检测唯一性 checkNameStatus:any=''; //检测账号唯一性的图标状态 orgList:any=[]; + confirmModal:NzModalRef; constructor( private fb: FormBuilder, private http:HttpClientService, private router:Router, private message: NzMessageService, - ) { } + private modal: NzModalService, + ) { + } ngOnInit() { $('.tree-box').css('height',(document.documentElement.clientHeight-106+'px')); @@ -111,6 +114,26 @@ export class DepartmentManagementComponent implements OnInit { } } + //删除 + delete(){ + this.confirmModal = this.modal.confirm({ + nzTitle: '删除', + nzContent: '确定删除【'+this.orgDetail.organization+'】?', + nzOnOk: () => new Promise((resolve, reject) => { + this.http.delete('/sysapi/setting/organization/delOrgByid/'+this.orgDetail.id).subscribe((json)=>{ + if(json.is_success){ + resolve(); + this.message.success(`删除成功!`); + this.initTree(); + }else{ + reject(); + this.message.error(`删除失败!`); + } + }) + + }).catch(() => console.log('Oops errors!')) + }); + } //保存 submitForm(){ let pid=''; @@ -129,7 +152,7 @@ export class DepartmentManagementComponent implements OnInit { this.message.success(`新增成功!`); this.initTree(); }else{ - this.message.success(`新增失败!`); + this.message.error(`新增失败!`); } }) }else if(this.modifyType==2){ @@ -138,7 +161,7 @@ export class DepartmentManagementComponent implements OnInit { this.message.success(`修改成功!`); this.initTree(); }else{ - this.message.success(`修改失败!`); + this.message.error(`修改失败!`); } }) } diff --git a/src/app/pages/system-management/role-management/role-management-modify/role-management-modify.component.html b/src/app/pages/system-management/role-management/role-management-modify/role-management-modify.component.html new file mode 100644 index 0000000..2a89ace --- /dev/null +++ b/src/app/pages/system-management/role-management/role-management-modify/role-management-modify.component.html @@ -0,0 +1,98 @@ +
+
+ + +
+ + 角色名称 + + + 请输入角色名称 + + + + 角色类型 + + + + + + + + + 角色用户 + + 选择 + + +
+ + + + 姓名 + 用户名 + 电话 + 操作 + + + + + {{item.real_name}} + {{item.login_name}} + {{item.mobile}} + + + + + + +
+ + 功能权限 + +
+
    +
    +     +     +
    +
    + + +
    +
    +
    + +
    + +
    +
    + + + + + 姓名 + 用户名 + 电话 + + + + + + {{item.real_name}} + {{item.login_name}} + {{item.mobile}} + + + +
    + +
    +
    +
    + + +
    +
    +     +
    \ No newline at end of file diff --git a/src/app/pages/system-management/role-management/role-management-modify/role-management-modify.component.scss b/src/app/pages/system-management/role-management/role-management-modify/role-management-modify.component.scss new file mode 100644 index 0000000..41e3b9e --- /dev/null +++ b/src/app/pages/system-management/role-management/role-management-modify/role-management-modify.component.scss @@ -0,0 +1,43 @@ + @import "../../../main.scss"; + .user-modify-box{ + position: relative; + overflow-y:scroll; + .user-footer{ + text-align: center; + margin-top: -20px; + + } +} +.ztree{ + padding-bottom: 40px; + padding-right: 16px; +} +.relative{ + position: relative; + width: 120px; + height: 40px; +} +.user-table{ + width: 80%; + margin: 0 auto; + margin-bottom: 30px; +} +.drawer-footer{ + display: inline-block; + position: relative; + left: 50%; + transform: translate(-50%) +} +.users-box{ + padding-bottom: 30px; +} +.tree-box{ + margin-bottom: 40px; +} +//火狐浏览器单独设置样式 解决在火狐浏览器下 底部padding-bottom无效问题 +@-moz-document url-prefix(){ + .user-footer{ + padding-bottom: 20px; + } +} + \ No newline at end of file diff --git a/src/app/pages/system-management/role-management/role-management-modify/role-management-modify.component.spec.ts b/src/app/pages/system-management/role-management/role-management-modify/role-management-modify.component.spec.ts new file mode 100644 index 0000000..7b8638e --- /dev/null +++ b/src/app/pages/system-management/role-management/role-management-modify/role-management-modify.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { RoleManagementModifyComponent } from './role-management-modify.component'; + +describe('RoleManagementModifyComponent', () => { + let component: RoleManagementModifyComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ RoleManagementModifyComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(RoleManagementModifyComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pages/system-management/role-management/role-management-modify/role-management-modify.component.ts b/src/app/pages/system-management/role-management/role-management-modify/role-management-modify.component.ts new file mode 100644 index 0000000..66387a7 --- /dev/null +++ b/src/app/pages/system-management/role-management/role-management-modify/role-management-modify.component.ts @@ -0,0 +1,275 @@ +import { Component, OnInit } from '@angular/core'; +import { FormBuilder,FormControl,FormGroup,Validators} from '@angular/forms'; +import { HttpClientService } from '../../../../services/http-client.service'; +import { Router,ActivatedRoute } from '@angular/router'; +import { NzMessageService } from 'ng-zorro-antd'; +import { Observable } from 'rxjs'; +import 'ztree'; +declare var $: any; +declare var jQuery: any; + +@Component({ + selector: 'app-role-management-modify', + templateUrl: './role-management-modify.component.html', + styleUrls: ['./role-management-modify.component.scss'] +}) +export class RoleManagementModifyComponent implements OnInit { + /* 新树形组件参数 begin*/ + parentNode:any; + parentName:any; + treeSelected:any; + isTreeTop:any; + /* 新树形组件参数 bed */ + validateForm: FormGroup; + visibleUsers = false; //控制抽屉显示 + statusParamsDetail:any={ //获取用户详情接口的状态，0请求失败 1请求前 2请求中 3请求成功，有数据 4请求成功，无数据 + status:1, + } + statusParamsUsers:any={ //接口的状态，0请求失败 1请求前 2请求中 3请求成功，有数据 4请求成功，无数据 + status:1, + } + modifyType:any=1; //当前页面操作类型 1 新增 2 编辑 + public roleId:any=''; + public userSelecteds:any=[]; //机构负责人已选用户-新增、修改时 + public userData:any=[]; //用户列表数据 + public search:any={ + page_index:'1', + page_size:'10', + real_name:'', + } + collectionSize:any ; + + + constructor( + private fb: FormBuilder, + private http:HttpClientService, + private route:ActivatedRoute, + private router:Router, + private message: NzMessageService, + ) { } + + ngOnInit() { + this.validateForm = this.fb.group({ + role_name:[ '', [ Validators.required ] ], + role_type:[ 1, [ Validators.required ] ], //0=系统内置(不可删除) ，1=用户定义 + description:[ ''], + role_code:[ ''], + status:[''], + user:[], + permission:[], + }); + //取路由参数 + this.route.queryParams.subscribe(routeParams=>{ + this.modifyType=routeParams.operateType; + //routeParams 1新增 2修改 + if(routeParams.operateType==2){ + this.roleId=routeParams.id; + this.queryUserById(); + this.queryDetail(); + }else{ + this.initTree(); + this.statusParamsDetail.status=3; + } + }) + } + submitForm(){ + let permission:any=[]; + var zTree = $.fn.zTree.getZTreeObj("treeDemo"); + var checkList=zTree.getCheckedNodes(true); + if(checkList.length>0){ + for(var i=0;i0){ + this.userSelecteds.forEach(item=>{ + users.push({ + uid:item.uid, + real_name:item.real_name, + mobile:item.mobile, + email:item.email, + sex:item.sex, + }) + }) + } + this.validateForm.patchValue({ + permission:permission, + user:users, + }) + console.log(this.validateForm.value) + this.http.post('/sysapi/setting/role/add/',this.validateForm.value).subscribe((json)=>{ + if(json.is_success){ + this.message.success(`新增成功!`); + this.router.navigate(['app/system/roles']) + }else{ + this.message.error(`新增失败!`); + } + }) + } + //修改时查询该角色下的所有用户 + queryUserById():void{ + this.http.get('/sysapi/setting/role/users/'+this.roleId).subscribe((json)=>{ + if(json.is_success){ + if(json.body&&json.body.length>0){ + json.body.forEach(item=>{ + console.log() + this.userSelecteds = [ ...this.userSelecteds, item]; + }) + } + }else{ + + } + }) + } + //根据id查询角色详情 + queryDetail():void{ + this.http.get('/sysapi/setting/role/detail/find',{rid:this.roleId}).subscribe((json)=>{ + if(json.is_success){ + if(json.body){ + this.statusParamsDetail=3; + //数据回填 + let item=json.body; + this.validateForm.patchValue({ + role_name:item.role_name, + role_type:item.role_type, //0=系统内置(不可删除) ，1=用户定义 + description:item.description, + role_code:item.role_code, + status:item.status, + }) + + }else{ + this.statusParamsDetail=4; + } + }else{ + this.statusParamsDetail=0; + } + + + }) + } + //保存机构负责人 + userSave(){ + console.log(this.userData); + this.userData.forEach(item=>{ + if(item.checked&&!item.disabled){ + // 增加数据 + this.userSelecteds = [ ...this.userSelecteds, item]; + } + }) + this.visibleUsers = false; + console.log(this.userSelecteds) + } + //删除机构负责人 + delectConfirm(item){ + this.userSelecteds=this.userSelecteds.filter(function(option){ + return item.uid!==option.uid + }) + } + //打开机构负责人抽屉 + openUsers(){ + this.visibleUsers = true; + this.queryTable(); + } + //关闭机构选择页面 + close(): void { + this.visibleUsers = false; + } + //翻页 + pageChange(event){ + this.search.page_index=event; + this.queryTable(); + } + //获取用户列表 + 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; + } + }) + } + + //新树模型参数设置 + public zNodes: any[]; + setting = { + data: { + simpleData: { + enable: true + } + }, + view: { + showLine: true, + dblClickExpand: false, + showIcon:true + }, + check:{ + autoCheckTrigger:true, + chkboxType:{"Y":"ps","N":"ps"}, + enable: true, + chkStyle: "checkbox", + }, + callback: { + //节点点击事件 + onClick: (event, treeId, treeNode, clickFlag) => { + var zTree = $.fn.zTree.getZTreeObj("treeDemo"); + zTree.expandNode(treeNode); + this.treeSelected=treeNode; + 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/permission/menu/list').subscribe(json=>{ + + let treeList=[]; + treeList.push({ //一层目录 + name:"全部权限", + isParent:true, + open:true, + id:'', + children:json.body + }); + this.zNodes=treeList; + $.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes); + var zTree = $.fn.zTree.getZTreeObj("treeDemo"); + let node = zTree.getNodes(); + }) + } + +} diff --git a/src/app/pages/system-management/role-management/role-management.component.html b/src/app/pages/system-management/role-management/role-management.component.html index a67e626..e262611 100644 --- a/src/app/pages/system-management/role-management/role-management.component.html +++ b/src/app/pages/system-management/role-management/role-management.component.html @@ -1,3 +1,60 @@ -

    - role-management works! -

    +
    +
    +
    +
    +
    +
    + + 角色名称 + + + + +
    +
    + + + + + + +
    +
    +
    + +
    +
    + +
    + + + + 角色名称 + 角色类型 + 创建人 + 创建日期 + 操作 + + + + + {{item.role_name}} + 系统内置用户定义 + {{item.create_by}} + {{item.create_date| date:'yyyy-MM-dd HH:mm:ss'}} + + + + + + + + +
    + +
    +
    + +
    +
    +
    diff --git a/src/app/pages/system-management/role-management/role-management.component.scss b/src/app/pages/system-management/role-management/role-management.component.scss index e69de29..a42cc05 100644 --- a/src/app/pages/system-management/role-management/role-management.component.scss +++ b/src/app/pages/system-management/role-management/role-management.component.scss @@ -0,0 +1,20 @@ +@import "../../main.scss"; +.system-main-container{ + .user-manage{ + .system-main-content{ + overflow-y:scroll; + } + .card{ + + } + .tree-box{ + overflow-y:scroll; + } + } +} + +.user-detail{ + .detail-item-text{ + color: #1890ff; + } +} diff --git a/src/app/pages/system-management/role-management/role-management.component.ts b/src/app/pages/system-management/role-management/role-management.component.ts index c012681..e8da4f7 100644 --- a/src/app/pages/system-management/role-management/role-management.component.ts +++ b/src/app/pages/system-management/role-management/role-management.component.ts @@ -1,4 +1,11 @@ import { Component, OnInit } from '@angular/core'; +import { HttpClientService } from '../../../services/http-client.service'; +import { Router } from '@angular/router'; +import { NzMessageService } from 'ng-zorro-antd'; + +import 'ztree'; +declare var $: any; +declare var jQuery: any; @Component({ selector: 'app-role-management', @@ -6,10 +13,84 @@ import { Component, OnInit } from '@angular/core'; styleUrls: ['./role-management.component.scss'] }) export class RoleManagementComponent implements OnInit { + collectionSize:any ; + public tableData:any=[]; + statusParamsTable:any={ //获取用户列表接口的状态，0请求失败 1请求前 2请求中 3请求成功，有数据 4请求成功，无数据 + status:1, + } - constructor() { } + statusParamsDetail:any={ //获取用户详情接口的状态，0请求失败 1请求前 2请求中 3请求成功，有数据 4请求成功，无数据 + status:1, + } + public search:any={ + page_index:'1', + page_size:'10', + role_name:'', + } + visible = false; //用户详情抽屉框显示隐藏 + userDetail:any={}; //用户详情 - ngOnInit() { - } + constructor( + private http:HttpClientService, + private router:Router, + private message: NzMessageService, + ) { } + + ngOnInit() { + // 页面监听 动态改变表单高度 + $('#main-box').css('height',(document.documentElement.clientHeight-106+'px')); + $(window).resize(function(){ + $('#main-box').css('height',(document.documentElement.clientHeight-106+'px')); + }) + this.queryTable(); + } + //新增、修改 1新增 2修改 + addModify(type,item?){ + if(type==1){ + this.router.navigate(['app/system/roles/modify'],{queryParams:{operateType:1}}) + }else if(type==2){ + this.router.navigate(['app/system/roles/modify'],{queryParams:{operateType:2,id:item.rid}}) + } + } + //删除 + delectConfirm(item){ + this.http.delete('/sysapi/setting/role/delete/'+item.rid).subscribe((json)=>{ + if(json.is_success){ + this.message.success(`删除成功!`); + this.queryTable(); + }else{ + this.message.error(`删除失败`) + } + }) + } + //重置，重置搜索条件 + reset(){ + this.search.page_index=1; + this.search.page_size=10; + this.search.role_name=''; + this.queryTable(); + } + //获取列表 + queryTable():void{ + this.statusParamsTable.status=1; + this.http.get('/sysapi/setting/role/list',this.search).subscribe((json)=>{ + if(json.is_success){ + this.tableData=json.body.list; + this.collectionSize=json.body.total; + if(json.body.list&&json.body.list.length>0){ + this.statusParamsTable.status=3; + }else{ + this.statusParamsTable.status=4; + } + }else{ + this.statusParamsTable.status=0; + } + }) + } + //翻页 + pageChange(event){ + this.search.page_index=event; + this.queryTable(); + } } diff --git a/src/app/pages/system-management/system-management-routing.module.ts b/src/app/pages/system-management/system-management-routing.module.ts index a0002b7..1fceed9 100644 --- a/src/app/pages/system-management/system-management-routing.module.ts +++ b/src/app/pages/system-management/system-management-routing.module.ts @@ -9,6 +9,7 @@ import { DepartmentManagementComponent } from './department-management/departmen import { OperationLogsComponent } from './operation-logs/operation-logs.component'; import { DataSynchronizeComponent } from './data-synchronize/data-synchronize.component'; import { UserManagementModifyComponent } from './user-management/user-management-modify/user-management-modify.component'; +import { RoleManagementModifyComponent } from './role-management/role-management-modify/role-management-modify.component'; const systemManagementRoutes: Routes = [ { @@ -30,6 +31,11 @@ const systemManagementRoutes: Routes = [ component: RoleManagementComponent, data: { preload: true, reuse: false } }, + { + path: 'roles/modify', + component: RoleManagementModifyComponent, + data: { preload: true, reuse: false } + }, { path: 'users', component: UserManagementComponent, diff --git a/src/app/pages/system-management/system-management.module.ts b/src/app/pages/system-management/system-management.module.ts index 9a6ff3e..b09224a 100644 --- a/src/app/pages/system-management/system-management.module.ts +++ b/src/app/pages/system-management/system-management.module.ts @@ -22,6 +22,7 @@ import { MsgAlertWarningComponent } from './personal-settings/msg-alert-warning/ import { FlightAgencyComponent } from './personal-settings/flight-agency/flight-agency.component'; import { ComponentsModule } from '../../components/components.module'; import { UserManagementModifyComponent } from './user-management/user-management-modify/user-management-modify.component'; +import { RoleManagementModifyComponent } from './role-management/role-management-modify/role-management-modify.component'; @NgModule({ imports: [ CommonModule, @@ -44,6 +45,7 @@ import { UserManagementModifyComponent } from './user-management/user-management MsgAlertWarningComponent, FlightAgencyComponent, UserManagementModifyComponent, + RoleManagementModifyComponent, ], providers : [ { provide: NZ_I18N, useValue: zh_CN } ],