diff --git a/src/app/pages/body/index/index.component.html b/src/app/pages/body/index/index.component.html index da1c346..8871421 100644 --- a/src/app/pages/body/index/index.component.html +++ b/src/app/pages/body/index/index.component.html @@ -13,18 +13,16 @@
  • {{item.menuName}}
  • -
    +
    - {{userInfo['userName']}} - - + {{userInfo['userName']}} +
      +
    • 修改密码
    • 退出登录
    • -
    -
    @@ -63,3 +61,43 @@ + + +
    + + + 旧密码 + + + + + + + 新密码 + + + + + + + 确认新密码 + + + + @if (control.errors?.['confirm']) { + 两次密码输入不一致! + } + + + + +
    + +
    +
    +
    +
    diff --git a/src/app/pages/body/index/index.component.ts b/src/app/pages/body/index/index.component.ts index ad80492..84366e7 100644 --- a/src/app/pages/body/index/index.component.ts +++ b/src/app/pages/body/index/index.component.ts @@ -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) => { diff --git a/src/app/services/account/sys-account.service.ts b/src/app/services/account/sys-account.service.ts index d16175a..d7ba33f 100644 --- a/src/app/services/account/sys-account.service.ts +++ b/src/app/services/account/sys-account.service.ts @@ -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 diff --git a/src/app/utils/validators.service.ts b/src/app/utils/validators.service.ts new file mode 100644 index 0000000..b6e8d7c --- /dev/null +++ b/src/app/utils/validators.service.ts @@ -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; +export type validatorsErrors = Record; + +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); +}