cdia/airport-chengdu-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

用户管理-修改

Browse Source
This commit is contained in:
liweijin
2018-11-23 09:30:05 +08:00
parent b8f0b8f5f1
commit a1ffdb02c8
4 changed files with 188 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/pages/system-management/user-management/user-management-modify/user-management-modify.component.html
+17 -11
View File
@@ -1,6 +1,8 @@
<div class="system-main-container">
<div class="user-modify-box card">
<form nz-form [formGroup]="validateForm">
<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" *ngIf="statusParamsDetail.status==3">
<nz-form-item>
<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="real_name" nzRequired>姓名</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="24">
@@ -10,9 +12,10 @@
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="login_name" nzRequired>系统账号</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="24">
<input nz-input (ngBlur)='checkName()' id="login_name" formControlName="login_name" placeholder="请输入统一身份认证账号">
<nz-form-control [nzSm]="14" [nzXs]="24" [nzValidateStatus]="checkNameStatus" nzHasFeedback>
<input nz-input (blur)='checkName()' (keydown)="checkNameStatus='';nameOnly=true" name="validating" id="login_name" formControlName="login_name" placeholder="请输入统一身份认证账号">
<nz-form-explain *ngIf="validateForm.get('login_name').dirty && validateForm.get('login_name').errors">请输入系统账号</nz-form-explain>
<nz-form-explain *ngIf="!nameOnly" class="red">本账号已存在</nz-form-explain>
</nz-form-control>
</nz-form-item>
<nz-form-item>
@@ -44,6 +47,12 @@
<nz-form-explain *ngIf="(roleList.length<=0)&&saveCheck" class="red">请选择所属角色</nz-form-explain>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="remark">描述</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="24">
<textarea rows="3" id="remark" nz-input formControlName="remark" placeholder="请输入描述信息" ></textarea>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="identify_num">身份证号</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="24">
@@ -71,7 +80,7 @@
</nz-radio-group>
</nz-form-control>
</nz-form-item>
<!-- <nz-form-item>
<nz-form-item *ngIf='modifyType==2'>
<nz-form-label [nzSm]="4" [nzXs]="24" >状态</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="24">
<nz-radio-group formControlName="status">
@@ -79,15 +88,12 @@
<label nz-radio nzValue="0">未激活</label>
</nz-radio-group>
</nz-form-control>
</nz-form-item> -->
<nz-form-item nz-row style="margin-bottom:8px;">
<nz-form-control [nzSpan]="14" [nzOffset]="6">
<button (click)='submitForm()' nz-button nzType="primary" class="mr10">保存</button>
<button (click)='cancel()' nz-button nzType="default">取消</button>
</nz-form-control>
</nz-form-item>
</form>
<div class="user-footer">
<button (click)='submitForm()' nz-button nzType="primary" class="mr10" [disabled]='!this.validateForm.valid||!this.orgDetail||this.roleList.length<=0||!this.nameOnly'>保存</button>
<button (click)='cancel()' nz-button nzType="default">取消</button>
</div>
</div>
</div>
<!-- 选择所属机构 -->
src/app/pages/system-management/user-management/user-management-modify/user-management-modify.component.scss
+10
View File
@@ -1,3 +1,13 @@
.user-modify-box{
position: relative;
.user-footer{
display: inline-block;
position: absolute;
bottom: 30px;
left: 50%;
transform: translate(-50%,0)
}
}
.ztree{
padding-bottom: 40px;
padding-right: 16px;
src/app/pages/system-management/user-management/user-management-modify/user-management-modify.component.ts
+141 -29
View File
@@ -30,6 +30,15 @@ export class UserManagementModifyComponent implements OnInit {
saveCheck:any=false; //保存检查，保存验证表单 false 还未验证 true 触发了验证
roleList:any=[]; //保存所选角色
listOfRole:any=[]; //角色列表
nameOnly:any=true; //系统账号是否唯一 true唯一 false重复
oldLoginName:any=''; //修改时，保存原本的系统账号，用于检测唯一性
checkNameStatus:any=''; //检测账号唯一性的图标状态
modifyType:any=1; //当前页面操作类型 1 新增用户 2 编辑用户
userId:any=''; //用户ID 修改的用户ID
userDetail:any={}; //用户详情
statusParamsDetail:any={ //获取用户详情接口的状态，0请求失败 1请求前 2请求中 3请求成功，有数据 4请求成功，无数据
status:1,
}
constructor(
private fb: FormBuilder,
private http:HttpClientService,
@@ -49,19 +58,84 @@ export class UserManagementModifyComponent implements OnInit {
mobile:[ ''],
sex:['m'],
status:['1'],
role:['']
role:[''],
remark: ['']
});
//取路由参数
this.route.queryParams.subscribe(routeParams=>{
this.modifyType=routeParams.operateType;
//routeParams 1新增 2修改
if(routeParams.operateType==2){
this.userId=routeParams.id;
this.queryUserDetail();
}else{
this.statusParamsDetail.status=3;
}
})
}
//获取用户详情
queryUserDetail(){
this.http.get('/sysapi/setting/user/detail/list', { uid:this.userId }).subscribe((json)=>{
if(json.is_success){
if(json.body){
this.statusParamsDetail.status=3;
this.userDetail=json.body;
let detail=json.body;
this.validateForm.setValue({
real_name:detail.real_name,
login_name:detail.login_name,
password:detail.password,
identify_num:detail.identify_num,
email:detail.email,
mobile:detail.mobile,
sex:detail.sex,
status:detail.status,
role:'',
remark:detail.remark,
})
this.oldLoginName=detail.login_name;
if(detail.orgList&&detail.orgList.length>0){
this.orgDetail=detail.orgList[0];
}
if(detail.roleList&&detail.roleList.length>0){
detail.roleList.forEach(item=>{
this.roleList.push(item.rid)
})
}
}else{
this.statusParamsDetail.status=4;
}
}else{
this.statusParamsDetail.status=0;
}
})
}
//检验系统账号的唯一性
checkName(){
console.log(334343)
console.log(this.validateForm.value.login_name.trim())
console.log(this.oldLoginName)
if(this.modifyType==2&&this.validateForm.value.login_name.trim()==this.oldLoginName){
this.nameOnly = true;
this.checkNameStatus='success';
return false;
}
this.checkNameStatus='validating';
this.http.get('/sysapi/setting/user/isOnly', { loginName: this.validateForm.value.login_name.trim() }).subscribe((json) => {
if (json.is_success) {
if(json.body){
this.checkNameStatus='success';
this.nameOnly = true;
}else{
this.checkNameStatus='error';
this.nameOnly = false;
}
} else {
this.message.error(`账号验证接口错误`)
}
})
}
//机构树，搜索功能
searchNode() {
@@ -108,37 +182,67 @@ export class UserManagementModifyComponent implements OnInit {
this.visible = false;
}
submitForm(): void {
submitForm(){
this.saveCheck=true;
for (const i in this.validateForm.controls) {
this.validateForm.controls[ i ].markAsDirty();
this.validateForm.controls[ i ].updateValueAndValidity();
}
if(this.validateForm.valid&&this.orgDetail&&this.roleList.length>0){
let item=this.validateForm.value;
let params={
real_name: item.real_name,
login_name: item.login_name,
password: item.password,
mobile: item.mobile,
sex: item.sex,
identify_num: item.identify_num,
email: item.email,
status: item.status,
orgList: [],
roleList: [],
};
this.roleList.forEach(option=>{
params.roleList.push({
rid:option
})
})
this.orgList.forEach(option=>{
if(option.id==this.orgDetail.id){
params.orgList.push(option)
if(this.validateForm.valid&&this.orgDetail&&this.roleList.length>0&&this.nameOnly){
//再次检验账号唯一性，避免用户填完账号直接点击提交，无法利用blur事件验证。
if(this.modifyType==2&&this.validateForm.value.login_name.trim()==this.oldLoginName){
this.nameOnly = true;
this.checkNameStatus='success';
this.submitConfirm(2);
return false;
}
this.checkNameStatus='validating';
this.http.get('/sysapi/setting/user/isOnly', { loginName: this.validateForm.value.login_name.trim() }).subscribe((json) => {
if (json.is_success) {
if(json.body){
this.checkNameStatus='success';
this.nameOnly = true;
//表单处理
this.submitConfirm(this.modifyType);
}else{
this.checkNameStatus='error';
this.nameOnly = false;
return false;
}
} else {
this.message.error(`账号验证接口错误`)
}
})
console.log(params)
}
}
//确认提交表单
submitConfirm(type){
let item=this.validateForm.value;
let params={
real_name: item.real_name,
login_name: item.login_name,
password: item.password,
mobile: item.mobile,
sex: item.sex,
identify_num: item.identify_num,
email: item.email,
status: item.status,
remark: item.remark,
orgList: [],
roleList: [],
};
this.roleList.forEach(option=>{
params.roleList.push({
rid:option
})
})
this.orgList.forEach(option=>{
if(option.id==this.orgDetail.id){
params.orgList.push(option)
}
})
console.log(params)
if(type==1){
this.http.post('/sysapi/setting/user/add', params).subscribe((json) => {
if (json.is_success) {
this.message.success(`新增成功`);
@@ -147,9 +251,17 @@ export class UserManagementModifyComponent implements OnInit {
this.message.error(`新增失败`)
}
})
}else if(type==2){
this.http.put('/sysapi/setting/user/updateById/'+this.userId, params).subscribe((json) => {
if (json.is_success) {
this.message.success(`修改成功`);
this.router.navigate(['app/system/users'])
} else {
this.message.error(`修改失败`)
}
})
}
}
//取消 返回列表页
cancel(){
src/app/pages/system-management/user-management/user-management.component.html
+20 -11
View File
@@ -112,6 +112,24 @@
</nz-form-item>
</div>
</div>
<div nz-row nzGutter="8">
<div nz-col nzSpan="24">
<nz-form-item>
<nz-form-label>所属角色</nz-form-label>
<ng-container *ngFor="let option of userDetail.roleList;let i=index">
<span class="detail-item-text">{{option.role_name}}</span><span *ngIf="userDetail.roleList.length>0&&(i!=userDetail.roleList.length-1)">、</span>
</ng-container>
<span *ngIf="userDetail.roleList.length<=0">无</span>
</nz-form-item>
</div>
<div nz-col nzSpan="24">
<nz-form-item>
<nz-form-label>描述</nz-form-label>
<span class="detail-item-text">{{userDetail.remark}}</span>
<span *ngIf='!userDetail.remark'>无</span>
</nz-form-item>
</div>
</div>
<div nz-row nzGutter="8">
<div nz-col nzSpan="24">
<nz-form-item>
@@ -137,17 +155,6 @@
</nz-form-item>
</div>
<div nz-col nzSpan="24">
<nz-form-item>
<nz-form-label>所属角色</nz-form-label>
<ng-container *ngFor="let option of userDetail.roleList;let i=index">
<span class="detail-item-text">{{option.role_name}}</span><span *ngIf="userDetail.roleList.length>0&&(i!=userDetail.roleList.length-1)">、</span>
</ng-container>
<span *ngIf="userDetail.roleList.length<=0">无</span>
</nz-form-item>
</div>
</div>
<div nz-row nzGutter="8">
<div nz-col nzSpan="24">
<nz-form-item>
<nz-form-label>状态</nz-form-label>
<span class="detail-item-text" *ngIf='userDetail.status==1'>已激活</span>
@@ -155,6 +162,8 @@
<span *ngIf='!userDetail.status'>无</span>
</nz-form-item>
</div>
</div>
<div nz-row nzGutter="8">
<div nz-col nzSpan="24">
<nz-form-item>
<nz-form-label>性别</nz-form-label>