角色管理-新增、修改
This commit is contained in:
liweijin
+98
@@ -0,0 +1,98 @@
|
||||
<div class="system-main-container">
|
||||
<div class="user-modify-box card" id="main-container">
|
||||
<app-request-status *ngIf="modifyType==2" [statusParams]='statusParamsDetail'></app-request-status>
|
||||
<nz-skeleton [nzActive]="true" [nzParagraph]="{ rows: 16 }" *ngIf='modifyType==2&&statusParamsDetail.status==1'></nz-skeleton>
|
||||
<form nz-form [formGroup]="validateForm" >
|
||||
<nz-form-item>
|
||||
<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="role_name" nzRequired>角色名称</nz-form-label>
|
||||
<nz-form-control [nzSm]="14" [nzXs]="24">
|
||||
<input nz-input id="role_name" formControlName="role_name" placeholder="请输入角色名称">
|
||||
<nz-form-explain *ngIf="validateForm.get('role_name').dirty && validateForm.get('role_name').errors">请输入角色名称</nz-form-explain>
|
||||
</nz-form-control>
|
||||
</nz-form-item>
|
||||
<nz-form-item>
|
||||
<nz-form-label [nzSm]="4" [nzXs]="24" nzRequired>角色类型</nz-form-label>
|
||||
<nz-form-control [nzSm]="14" [nzXs]="24">
|
||||
<nz-radio-group formControlName="role_type">
|
||||
<label nz-radio [nzValue]=0>系统内置</label>
|
||||
<label nz-radio [nzValue]=1>用户定义</label>
|
||||
</nz-radio-group>
|
||||
</nz-form-control>
|
||||
</nz-form-item>
|
||||
<nz-form-item>
|
||||
<nz-form-label [nzSm]="4" [nzXs]="24" nzRequired>角色用户</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>
|
||||
<nz-form-item>
|
||||
<nz-form-label [nzSm]="4" [nzXs]="24">功能权限</nz-form-label>
|
||||
<nz-form-control [nzSm]="18" [nzXs]="24">
|
||||
<div class="tree-box ml10">
|
||||
<ul id="treeDemo" class="ztree"></ul>
|
||||
</div>
|
||||
</nz-form-control>
|
||||
</nz-form-item>
|
||||
</form>
|
||||
<div class="user-footer">
|
||||
<button (click)='submitForm()' [nzLoading]="isLoadingSave" nz-button nzType="primary" class="mr10" [disabled]='!validateForm.valid||!(userSelecteds.length>0)'>保存</button>
|
||||
<button (click)='cancel()' nz-button nzType="default">取消</button>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
+43
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
+25
@@ -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<RoleManagementModifyComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ RoleManagementModifyComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(RoleManagementModifyComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
+275
@@ -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;i<checkList.length;i++){
|
||||
if(checkList[i].checked&&checkList[i].level!=0&&checkList[i].level!=1){
|
||||
permission.push({
|
||||
pid:checkList[i].id,
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
let users:any=[];
|
||||
if(this.userSelecteds&&this.userSelecteds.length>0){
|
||||
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();
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user