访客增加分页和搜索

src/app/account/score/score.component.html

@@ -1,5 +1,4 @@
-<!--设置高度，添加bootstrap样式类d-flex align-items-center 使表单垂直居中，justify-content-center水平居中-->
+
-<div class="">
   <form [formGroup]="scoreFrom">
     <!--    用户名-->
     <div class="input-group mb-3 mx-auto col-6">
@@ -74,9 +73,9 @@
   </table>
 
   <app-page [pageData]="users" [currentPage]="currentPage" (voted)="loadAll($event)"></app-page>
-</div>
 
-<!-- Modal -->
+
+  <!-- Modal -->
 <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
      aria-hidden="true">
   <div class="modal-dialog" role="document">

src/app/visitor/visitor.module.ts

@@ -4,6 +4,7 @@ import {TranslateModule} from '@ngx-translate/core';
 import {RouterModule} from '@angular/router';
 import {VisitorComponent} from './visitor/visitor.component';
 import {ReactiveFormsModule} from '@angular/forms';
+import {PageModule} from '../page/page/page.module';
 
 
 /**
@@ -15,7 +16,8 @@ import {ReactiveFormsModule} from '@angular/forms';
     CommonModule,
     TranslateModule,
     RouterModule,
-    ReactiveFormsModule
+    ReactiveFormsModule,
+    PageModule
   ]
 })
 export class VisitorModule {

src/app/visitor/visitor/visitor.component.html

@@ -1,3 +1,26 @@
+<form [formGroup]="queryForm">
+  <!--  预约人-->
+  <div class="input-group mb-3 mx-auto col-4">
+    <div class="input-group-prepend">
+      <span class="input-group-text">{{ 'visitor.username' | translate }}</span>
+    </div>
+    <input type="text" class="form-control text-center" [class.is-invalid]="getValue('appointment').invalid"
+           [placeholder]="'tip.input' | translate:{value:'visitor.username'|translate}"
+           formControlName="appointment" aria-label="appointment"/>
+
+    <div class="input-group-prepend">
+      <button class="btn btn-outline-secondary" type="button"
+              (click)="loadAll(1)">{{'button.search'|translate}}</button>
+    </div>
+
+    <div class="invalid-feedback font-weight-bold text-center">
+      {{'tip.notnull' | translate:{value: 'visitor.username'|translate} }}
+    </div>
+  </div>
+</form>
+
+<app-page [pageData]="visitors" [currentPage]="currentPage" (voted)="loadAll($event)"></app-page>
+
 <table class="table">
   <thead>
   <tr>
@@ -27,3 +50,5 @@
   </ng-container>
   </tbody>
 </table>
+
+<app-page [pageData]="visitors" [currentPage]="currentPage" (voted)="loadAll($event)"></app-page>

src/app/visitor/visitor/visitor.component.ts

@@ -8,22 +8,32 @@ import {environment} from '../../../environments/environment';
 import {CookieService} from 'ngx-cookie-service';
 import {AbstractRoute} from '../../AbstractRoute';
 import {Router} from '@angular/router';
+import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+import {Commons} from '../../commons';
 
 @Component({
   selector: 'app-visitor',
   templateUrl: './visitor.component.html',
   styleUrls: ['./visitor.component.scss']
 })
-export class VisitorComponent implements OnInit, MessageInterface {
+export class VisitorComponent extends Commons implements OnInit, MessageInterface {
 
   constructor(private visitorService: VisitorService,
               private messageUtil: MessageUtil,
               private cookieService: CookieService,
               private abstractRoute: AbstractRoute,
               private router: Router,
+              private fb: FormBuilder,
   ) {
+    super();
   }
 
+  // 查询表单
+  queryForm = this.fb.group({
+    // 查询预约人
+    appointment: this.fb.control('', [Validators.required]),
+  });
+
   // 访客信息
   visitors: Page<Visitor>;
   // 审核状态
@@ -36,7 +46,7 @@ export class VisitorComponent implements OnInit, MessageInterface {
   // 加载访客信息
   loadAll(page) {
     this.currentPage = page;
-    this.visitorService.loadAll(page).subscribe(r => {
+    this.visitorService.loadAll(Object.assign(this.queryForm.value, {currentPage: page})).subscribe(r => {
       if (r.result === Result.OK) {
         this.visitors = r.visitorList;
       } else {
@@ -66,4 +76,8 @@ export class VisitorComponent implements OnInit, MessageInterface {
     }
   }
 
+  form(): FormGroup {
+    return this.queryForm;
+  }
+
 }

src/app/visitor/visitor/visitor.service.ts

@@ -16,11 +16,9 @@ export class VisitorService extends JSONRequest {
   }
 
   // 加载访客信息
-  loadAll(page: number): Observable<VisitorResponse> {
+  loadAll(queryForm: object): Observable<VisitorResponse> {
     return this.http.get<VisitorResponse>(HttpInterface.visitor, Object.assign(this.httpOptions, {
-      params: {
+      params: queryForm
-        currentPage: page,
-      }
     })).pipe(
       catchError(this.handleError<any>('加载访客信息'))
     );