修改密码

dev
胡锐 2 weeks ago
parent b2dd0f7a5c
commit 3ad0e4032e
  1. 46
      src/app/pages/body/index/index.component.html
  2. 100
      src/app/pages/body/index/index.component.ts
  3. 12
      src/app/services/account/sys-account.service.ts
  4. 65
      src/app/utils/validators.service.ts

@ -16,15 +16,13 @@
<div class="user" nz-col nzSpan="4">
<div>
<span nz-dropdown [nzDropdownMenu]="menu">{{userInfo['userName']}}</span>
<nz-dropdown-menu #menu="nzDropdownMenu">
<nz-dropdown-menu #menu="nzDropdownMenu" >
<ul nz-menu nzSelectable>
<li nz-menu-item (click)="showUpdatePwd()">修改密码</li>
<li nz-menu-item (click)="loginOut()">退出登录</li>
</ul>
</nz-dropdown-menu>
</div>
</div>
</div>
</nz-header>
@ -63,3 +61,43 @@
</nz-layout>
</nz-layout>
<nz-modal [(nzVisible)]="updatePwdModal"
[nzWidth]="500"
nzTitle="修改密码"
[nzFooter]="null"
(nzOnCancel)="closeUpdatePwd()">
<ng-container *nzModalContent>
<form nz-form [formGroup]="updatePwdForm">
<nz-form-item>
<nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>旧密码</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="24">
<input [type]="'password'" nz-input formControlName="oldPassword" placeholder="请输入旧密码" />
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>新密码</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="24">
<input [type]="'password'" nz-input formControlName="newPassword" placeholder="请输入新密码" />
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>确认新密码</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="24" [nzErrorTip]="errorTpl">
<input [type]="'password'" nz-input formControlName="confirmPassword" placeholder="确认新密码" />
<ng-template #errorTpl let-control>
@if (control.errors?.['confirm']) {
两次密码输入不一致!
}
</ng-template>
</nz-form-control>
</nz-form-item>
<div nz-flex style="margin-top: 15px" [nzJustify]="'center'">
<button nz-button nzType="primary" (click)="submitUpdatePwd()" class="submit-btn" style="width: 150px;">确定</button>
</div>
</form>
</ng-container>
</nz-modal>

@ -10,7 +10,7 @@ import {
import {NzBreadCrumbComponent, NzBreadCrumbItemComponent} from "ng-zorro-antd/breadcrumb";
import {NzColDirective, NzRowDirective} from "ng-zorro-antd/grid";
import {NzMenuDirective, NzMenuGroupComponent, NzMenuItemComponent, NzSubMenuComponent} from "ng-zorro-antd/menu";
import {NgClass, NgForOf} from "@angular/common";
import {NgClass, NgForOf, NgIf} from "@angular/common";
import {NzIconDirective} from "ng-zorro-antd/icon";
import {NzTabComponent, NzTabSetComponent} from "ng-zorro-antd/tabs";
import {TabComponent} from "../tab/tab.component";
@ -23,6 +23,24 @@ import {CommonService} from "../../../services/common/common.service";
import {LoginService} from "../../../services/login/login.service";
import {NzConfigService} from "ng-zorro-antd/core/config";
import {buttonData} from "../../../data/common/button.namespace";
import {SysAccountService} from "../../../services/account/sys-account.service";
import {
AbstractControl,
FormGroup,
FormsModule,
NonNullableFormBuilder,
ReactiveFormsModule, ValidationErrors, ValidatorFn,
Validators
} from "@angular/forms";
import {NzButtonComponent} from "ng-zorro-antd/button";
import {NzDatePickerComponent} from "ng-zorro-antd/date-picker";
import {NzFlexDirective} from "ng-zorro-antd/flex";
import {NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
import {NzInputDirective} from "ng-zorro-antd/input";
import {NzModalModule} from "ng-zorro-antd/modal";
import {NzOptionComponent, NzSelectComponent} from "ng-zorro-antd/select";
import {NzUploadComponent} from "ng-zorro-antd/upload";
import {ValidatorsService} from "../../../utils/validators.service";
@Component({
selector: 'app-index',
@ -50,7 +68,22 @@ import {buttonData} from "../../../data/common/button.namespace";
NzSiderComponent,
NzMenuGroupComponent,
NzDropDownDirective,
NzDropdownMenuComponent
NzDropdownMenuComponent,
FormsModule,
NgIf,
NzButtonComponent,
NzDatePickerComponent,
NzFlexDirective,
NzFormControlComponent,
NzFormDirective,
NzFormItemComponent,
NzFormLabelComponent,
NzInputDirective,
NzOptionComponent,
NzSelectComponent,
NzUploadComponent,
ReactiveFormsModule,
NzModalModule,
],
templateUrl: './index.component.html',
styleUrl: './index.component.less',
@ -69,6 +102,9 @@ export class IndexComponent implements OnInit {
// 当前顶级菜单
currentParentMenu: any = {};
updatePwdModal = false;
updatePwdForm: FormGroup;
ngOnInit(): void {
// 缓存数据字典
this.commonService.queryDictionary('','',(data: any) => {
@ -95,6 +131,8 @@ export class IndexComponent implements OnInit {
private storage: BrowserStorageService,
private nzConfigService: NzConfigService,
private message: NzMessageService,
private fb: NonNullableFormBuilder,
private sysAccountService: SysAccountService,
private router: Router, // 路由
private login: LoginService
) {
@ -113,10 +151,30 @@ export class IndexComponent implements OnInit {
);
}
this.updatePwdForm = this.fb.group({
userId: [ this.storage.get(DATA)['account']['id']],
oldPassword: ['', [Validators.required, ValidatorsService.minLength(6), ValidatorsService.maxLength(16)]],
newPassword: ['', [Validators.required, ValidatorsService.minLength(6), ValidatorsService.maxLength(16)]],
confirmPassword: ['', [Validators.required, this.confirmationValidator]],
});
this.menuData = this.menuData.concat(this.storage.get(DATA)['menuTree']);
this.userInfo = this.storage.get(DATA)['account'];
}
/**
*
* @param control
*/
confirmationValidator: ValidatorFn = (control: AbstractControl): { [s: string]: boolean } => {
if (!control.value) {
return { required: true };
} else if (control.value !== this.updatePwdForm.controls['newPassword'].value) {
return { confirm: true, error: true };
}
return {};
};
// 选择操作
isSelected(item: any) {
this.menuData.map((data: any) => {
@ -133,6 +191,44 @@ export class IndexComponent implements OnInit {
}
/**
*
*/
public showUpdatePwd() {
this.updatePwdModal = true;
}
/**
*
*/
public submitUpdatePwd() {
if (this.updatePwdForm.valid) {
this.sysAccountService.updatePwd(this.updatePwdForm.value, (data: any) => {
if (data['return_code'] == '000000') {
this.message.success("修改成功,请重新登录");
// 登出
this.loginOut();
} else {
this.message.create('error', data['return_msg']);
}
});
} else {
Object.values(this.updatePwdForm.controls).forEach(control => {
if (control.invalid) {
control.markAsDirty();
control.updateValueAndValidity({ onlySelf: true });
}
});
}
}
/**
*
*/
public closeUpdatePwd() {
this.updatePwdModal = false;
}
// 退出登录
public loginOut(): void {
this.login.loginOut( (data: any) => {

@ -59,6 +59,18 @@ export class SysAccountService {
});
}
/**
*
* @param userId
* @param callBack
*/
public updatePwd(param: any, callBack:any) {
param.time = new Date().getTime();
this.http.post(environment.baseUrl + 'secUser/updatePwd', param).subscribe(data => {
callBack(data);
});
}
/**
*
* @param userId

@ -0,0 +1,65 @@
import {AbstractControl, ValidationErrors, ValidatorFn, Validators} from '@angular/forms';
import {NzSafeAny} from 'ng-zorro-antd/core/types';
export type validatorsErrorsOptions = { 'zh-cn': string; en: string } & Record<string, NzSafeAny>;
export type validatorsErrors = Record<string, validatorsErrorsOptions>;
export class ValidatorsService extends Validators {
/**
*
* @param minLength
*/
static override minLength(minLength: number): ValidatorFn {
return (control: AbstractControl): validatorsErrors | null => {
if (Validators.minLength(minLength)(control) === null) {
return null;
}
return { minlength: { 'zh-cn': `最小长度为 ${minLength}`, en: `MinLength is ${minLength}` } };
};
}
/**
*
* @param maxLength
*/
static override maxLength(maxLength: number): ValidatorFn {
return (control: AbstractControl): validatorsErrors | null => {
if (Validators.maxLength(maxLength)(control) === null) {
return null;
}
return { maxlength: { 'zh-cn': `最大长度为 ${maxLength}`, en: `MaxLength is ${maxLength}` } };
};
}
/**
*
* @param control
*/
static mobile(control: AbstractControl): validatorsErrors | null {
const value = control.value;
if (isEmptyInputValue(value)) {
return null;
}
return isMobile(value) ? null : { mobile: { 'zh-cn': `手机号码格式不正确`, en: `Mobile phone number is not valid` } };
}
static isMobile(value: string): boolean {
return typeof value === 'string' && /^[1](([3][0-9])|([4][0,1,4-9])|([5][0-3,5-9])|([6][2,5,6,7])|([7][0-8])|([8][0-9])|([9][0-3,5-9]))[0-9]{8}$/.test(value);
}
}
function isEmptyInputValue(value: NzSafeAny): boolean {
return value == null || value.length === 0;
}
function isMobile(value: string): boolean {
return typeof value === 'string' && /^[1](([3][0-9])|([4][0,1,4-9])|([5][0-3,5-9])|([6][2,5,6,7])|([7][0-8])|([8][0-9])|([9][0-3,5-9]))[0-9]{8}$/.test(value);
}
Loading…
Cancel
Save