✨ feat(menu-form.component.ts): Refactor form validation and error …

…handling. ✨ feat(`menus.component.ts`): Enhance form event processing and add menu save functionality. ✨ feat(`menus.service.ts`): Add saveMenu method for menu persistence. ✨ feat(`login.component.ts`): Refactor login component constructor injection.
vnobo · Oct 17, 2024 · 7df050e · 7df050e
1 parent b07cba9
commit 7df050e
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 44 deletions.
diff --git a/ng-web/src/app/pages/home/menus/menu-form.component.ts b/ng-web/src/app/pages/home/menus/menu-form.component.ts
@@ -33,36 +33,14 @@ import { NzNotificationService } from 'ng-zorro-antd/notification';
             <div class="row my-2">
               <nz-form-item class="col-md mx-1mx-1">
                 <nz-form-label nzRequired nzFor="code">编码</nz-form-label>
-                <nz-form-control
-                  nzHasFeedback
-                  nzValidatingTip="验证中..."
-                  [nzErrorTip]="codeErrorTpl">
+                <nz-form-control nzHasFeedback>
                   <input nz-input type="text" id="code" formControlName="code" />
-                  <ng-template #codeErrorTpl let-control>
-                    <ng-container *ngIf="control.hasError('required')"
-                    >Please input your username!
-                    </ng-container>
-                    <ng-container *ngIf="control.hasError('duplicated')"
-                    >The username is redundant!
-                    </ng-container>
-                  </ng-template>
                 </nz-form-control>
               </nz-form-item>
               <nz-form-item class="col-md mx-1">
                 <nz-form-label nzRequired nzFor="pcode">父级</nz-form-label>
-                <nz-form-control
-                  nzHasFeedback
-                  nzValidatingTip="验证中..."
-                  [nzErrorTip]="pcodeErrorTpl">
+                <nz-form-control nzHasFeedback>
                   <input nz-input type="text" id="pcode" formControlName="pcode" />
-                  <ng-template #pcodeErrorTpl let-control>
-                    <ng-container *ngIf="control.hasError('required')"
-                    >Please input your username!
-                    </ng-container>
-                    <ng-container *ngIf="control.hasError('duplicated')"
-                    >The username is redundant!
-                    </ng-container>
-                  </ng-template>
                 </nz-form-control>
               </nz-form-item>
             </div>
@@ -157,22 +135,22 @@ import { NzNotificationService } from 'ng-zorro-antd/notification';
   `,
 })
 export class MenuFormComponent implements OnInit {
+  private _message = inject(NzNotificationService);
   @Output() formEvent = new EventEmitter<{
     btn: string;
     status: number;
     data: Menu | null;
   }>();
-  private _message = inject(NzNotificationService);
 
   isVisible = signal(false);
   private _formBuilder = inject(FormBuilder);
   menuForm: FormGroup = this._formBuilder.group({
     id: [null],
-    code: [{ value: null, disabled: true }, Validators.required],
-    pcode: [{ value: '0', disabled: true }, Validators.required],
+    code: [{ value: '0', disabled: true }, [Validators.required]],
+    pcode: [{ value: '0', disabled: true }, [Validators.required]],
     tenantCode: [{ value: '0', disabled: true }, Validators.required],
     type: [MenuType.MENU, Validators.required],
-    authority: ['', [Validators.required, Validators.minLength(6), Validators.maxLength(64)]],
+    authority: [null, [Validators.required, Validators.minLength(6), Validators.maxLength(64)]],
     name: [null, Validators.required],
     path: ['', [Validators.required, Validators.pattern(/^(\/|(\/[a-zA-Z0-9_-]+)+)$/)]],
     icons: [null, Validators.required],
@@ -185,15 +163,14 @@ export class MenuFormComponent implements OnInit {
   }
 
   submitForm() {
+    const menu = this.menuForm.value as Menu;
+    menu.code = this.menuForm.controls['code'].value;
+    menu.pcode = this.menuForm.controls['pcode'].value;
+    menu.tenantCode = this.menuForm.controls['tenantCode'].value;
     if (this.menuForm.valid) {
-      const menu = this.menuForm.value as Menu;
-      this.formEvent.next({ btn: 'submit', status: 0, data: menu });
-      this.isVisible.set(false);
-    } else {
-      this._message.error('表单验证失败', '验证不通过,请检查输入内容. RES:' + this.menuForm.valid, {
-        nzDuration: 3000,
-      });
+      this.formEvent.next({ btn: 'submit', status: 100, data: menu });
     }
+    this.isVisible.set(false);
   }
 
   restForm(): void {

diff --git a/ng-web/src/app/pages/home/menus/menus.component.ts b/ng-web/src/app/pages/home/menus/menus.component.ts
@@ -21,8 +21,11 @@ export class MenusComponent implements OnInit, OnDestroy {
 
   private _subject: Subject<void> = new Subject<void>();
 
-  formEvent(event: any): void {
-    console.log(event);
+  formEvent($event: any): void {
+    if ($event.btn === 'submit' && $event.status === 100) {
+      const menu = $event.data as Menu;
+      this._menusSer.saveMenu(menu).subscribe(result => this.refresh());
+    }
   }
 
   collapse(array: Menu[], data: Menu, $event: boolean): void {
@@ -35,8 +38,6 @@ export class MenusComponent implements OnInit, OnDestroy {
             this.collapse(array, target, false);
           }
         });
-      } else {
-        return;
       }
     }
   }

diff --git a/ng-web/src/app/pages/home/menus/menus.service.ts b/ng-web/src/app/pages/home/menus/menus.service.ts
@@ -39,6 +39,10 @@ export class MenusService {
       .pipe(concatMap(this.childrenMap), toArray(), retry(3));
   }
 
+  saveMenu(menu: Menu): Observable<Menu> {
+    return this.http.post<Menu>('/menus/save', menu);
+  }
+
   getChildren(request: Menu): Observable<Menu[]> {
     const params = new HttpParams({ fromObject: request as never });
     return this.http.get<Menu[]>('/menus/me', { params: params });

diff --git a/ng-web/src/app/pages/login/login.component.ts b/ng-web/src/app/pages/login/login.component.ts
@@ -17,6 +17,8 @@ export class LoginComponent implements OnInit, OnDestroy {
   private _subject$: Subject<void> = new Subject<void>();
   private _loginSer = inject(LoginService);
   private _message = inject(NzNotificationService);
+  private _router = inject(Router);
+  private _route = inject(ActivatedRoute);
 
   loginForm = new FormGroup({
     username: new FormControl('', [
@@ -32,9 +34,6 @@ export class LoginComponent implements OnInit, OnDestroy {
     remember: new FormControl(false),
   });
 
-  constructor(private router: Router, private route: ActivatedRoute) {
-  }
-
   onSubmit(): void {
     if (this.loginForm.valid) {
       const credentials = this.loginForm.value as Credentials;
@@ -50,7 +49,7 @@ export class LoginComponent implements OnInit, OnDestroy {
   ngOnInit(): void {
     const auth = this._loginSer.autoLogin();
     if (auth) {
-      this.router.navigate([this._loginSer._auth.redirectUrl], { relativeTo: this.route }).then();
+      this._router.navigate([this._loginSer._auth.redirectUrl], { relativeTo: this._route }).then();
       return;
     }
     const credentials = this._loginSer.getRememberMe();
@@ -64,7 +63,7 @@ export class LoginComponent implements OnInit, OnDestroy {
     this._loginSer
       .login(credentials)
       .pipe(takeUntil(this._subject$), debounceTime(100), distinctUntilChanged())
-      .subscribe(res => this.router.navigate(['/home'], { relativeTo: this.route }).then());
+      .subscribe(res => this._router.navigate(['/home'], { relativeTo: this._route }).then());
   }
 
   ngOnDestroy(): void {