diff --git a/src/app/visitor/visitor.module.ts b/src/app/visitor/visitor.module.ts
new file mode 100644
index 0000000..747398f
--- /dev/null
+++ b/src/app/visitor/visitor.module.ts
@@ -0,0 +1,20 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {TranslateModule} from '@ngx-translate/core';
+import {RouterModule} from '@angular/router';
+import {VisitorComponent} from './visitor/visitor.component';
+
+
+/**
+ *  访客预约模块
+ */
+@NgModule({
+  declarations: [VisitorComponent],
+  imports: [
+    CommonModule,
+    TranslateModule,
+    RouterModule
+  ]
+})
+export class VisitorModule {
+}
diff --git a/src/app/visitor/visitor/visitor.component.html b/src/app/visitor/visitor/visitor.component.html
new file mode 100644
index 0000000..3448d52
--- /dev/null
+++ b/src/app/visitor/visitor/visitor.component.html
@@ -0,0 +1,29 @@
+<table class="table">
+  <thead>
+  <tr>
+    <th scope="col" class="text-center">{{'visitor.username'|translate}}</th>
+    <th scope="col" class="text-center">{{'visitor.time'|translate}}</th>
+    <th scope="col" class="text-center">{{'visitor.notes'|translate}}</th>
+    <th scope="col" class="text-center">{{'visitor.admin'|translate}}</th>
+    <th scope="col" class="text-center">{{'visitor.status'|translate}}</th>
+    <th scope="col" class="text-center">{{'visitor.action'|translate}}</th>
+  </tr>
+  </thead>
+  <tbody>
+  <ng-container *ngIf="visitors">
+    <tr *ngFor="let visitor of visitors.list">
+      <td class="text-center">{{visitor.appointment}}</td>
+      <td class="text-center">{{visitor.time|date:'yyyy-MM-dd HH:mm'}}</td>
+      <td class="text-center">{{visitor.notes}}</td>
+      <td class="text-center">{{visitor.managerName}}</td>
+      <td class="text-center">{{'visitor.' + visitor.status|translate}}</td>
+      <td>
+        <div class="text-center" *ngIf="visitor.status===uncheck;">
+          <button class="btn btn-primary mr-3" (click)="check(visitor.id,ok)">{{'visitor.ok'|translate}}</button>
+          <button class="btn btn-info" (click)="check(visitor.id,fail)">{{'visitor.fail'|translate}}</button>
+        </div>
+      </td>
+    </tr>
+  </ng-container>
+  </tbody>
+</table>
diff --git a/src/app/visitor/visitor/visitor.component.scss b/src/app/visitor/visitor/visitor.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/visitor/visitor/visitor.component.spec.ts b/src/app/visitor/visitor/visitor.component.spec.ts
new file mode 100644
index 0000000..ce50bf4
--- /dev/null
+++ b/src/app/visitor/visitor/visitor.component.spec.ts
@@ -0,0 +1,25 @@
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {VisitorComponent} from './visitor.component';
+
+describe('VisitorComponent', () => {
+  let component: VisitorComponent;
+  let fixture: ComponentFixture<VisitorComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [VisitorComponent]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(VisitorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/visitor/visitor/visitor.component.ts b/src/app/visitor/visitor/visitor.component.ts
new file mode 100644
index 0000000..029500f
--- /dev/null
+++ b/src/app/visitor/visitor/visitor.component.ts
@@ -0,0 +1,61 @@
+import {Component, OnInit} from '@angular/core';
+import {VisitorService} from './visitor.service';
+import {Result} from '../../interface/Result';
+import {MessageInterface, MessageUtil} from '../../message/message.service';
+import {Visitor} from '../../interface/Visitor';
+import {Page} from '../../interface/Page';
+import {environment} from '../../../environments/environment';
+import {CookieService} from 'ngx-cookie-service';
+
+@Component({
+  selector: 'app-visitor',
+  templateUrl: './visitor.component.html',
+  styleUrls: ['./visitor.component.scss']
+})
+export class VisitorComponent implements OnInit, MessageInterface {
+
+  constructor(private visitorService: VisitorService,
+              private messageUtil: MessageUtil,
+              private cookieService: CookieService
+  ) {
+  }
+
+  // 访客信息
+  visitors: Page<Visitor>;
+  // 审核状态
+  uncheck = 'uncheck';
+  ok = 'ok';
+  fail = 'fail';
+  // 当前页数
+  currentPage = 1;
+
+  // 加载访客信息
+  loadAll(page) {
+    this.currentPage = page;
+    this.visitorService.loadAll(page).subscribe(r => {
+      if (r.result === Result.OK) {
+        this.visitors = r.visitorList;
+      } else {
+        this.messageUtil.alert(r.message);
+      }
+    });
+  }
+
+  // 审核访客信息
+  check(id, status) {
+    this.visitorService.check(id, status, this.cookieService.get(environment.managerKey))
+      .subscribe(res => {
+        this.messageUtil.alert(this.prefix(res.message));
+        this.loadAll(this.currentPage);
+      });
+  }
+
+  prefix(key: string): string {
+    return 'server.visitor.' + key;
+  }
+
+  ngOnInit(): void {
+    this.loadAll(this.currentPage);
+  }
+
+}
diff --git a/src/app/visitor/visitor/visitor.service.spec.ts b/src/app/visitor/visitor/visitor.service.spec.ts
new file mode 100644
index 0000000..69d535c
--- /dev/null
+++ b/src/app/visitor/visitor/visitor.service.spec.ts
@@ -0,0 +1,16 @@
+import {TestBed} from '@angular/core/testing';
+
+import {VisitorService} from './visitor.service';
+
+describe('VisitorService', () => {
+  let service: VisitorService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(VisitorService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/src/app/visitor/visitor/visitor.service.ts b/src/app/visitor/visitor/visitor.service.ts
new file mode 100644
index 0000000..a76692c
--- /dev/null
+++ b/src/app/visitor/visitor/visitor.service.ts
@@ -0,0 +1,36 @@
+import {Injectable} from '@angular/core';
+import {JSONRequest} from '../../interface/JSONRequest';
+import {HttpClient} from '@angular/common/http';
+import {Observable} from 'rxjs';
+import {VisitorResponse} from '../../interface/Response';
+import {HttpInterface} from '../../interface/HttpInterface';
+import {catchError} from 'rxjs/operators';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class VisitorService extends JSONRequest {
+
+  constructor(private http: HttpClient) {
+    super();
+  }
+
+  // 加载访客信息
+  loadAll(page: number): Observable<VisitorResponse> {
+    return this.http.get<VisitorResponse>(HttpInterface.visitor, Object.assign(this.httpOptions, {
+      params: {
+        currentPage: page,
+      }
+    })).pipe(
+      catchError(this.handleError<any>('加载访客信息'))
+    );
+  }
+
+  // 审核访客信息
+  check($id: string, $status: string, $managerName: string): Observable<VisitorResponse> {
+    return this.http.post<VisitorResponse>(HttpInterface.visitor, {id: $id, status: $status, managerName: $managerName}, this.httpOptions)
+      .pipe(
+        catchError(this.handleError<any>('审核访客信息'))
+      );
+  }
+}