访客登记审核

src/pages/serve-pages/vistor-register/vistor-deal/vistor-deal.html

+<ion-header>
+
+    <ion-navbar>
+        <ion-title>访客登记申请</ion-title>
+    </ion-navbar>
+    <div class="duty">
+        <div class="dutyItem" (click)="change(1)">
+            <span class="{{changeType == 1?'duty-title':''}}">待处理</span>
+        </div>
+        <div class="dutyItem" (click)="change(2)">
+            <span class="{{changeType == 2?'duty-title':''}}">已处理</span>
+        </div>
+    </div>
+</ion-header>
+
+<ion-content>
+    <ion-content direction="y" scrollbar-y="true" class="bgc-e7e8ed">
+        <ion-refresher (ionRefresh)="doRefresh($event)">
+            <ion-refresher-content pullingText="下拉刷新"
+                                   refreshingSpinner="bubbles">
+            </ion-refresher-content>
+        </ion-refresher>
+        <div class="duty-content">
+            <ion-list class="myItem">
+                <ng-container *ngFor="let item of apply.list">
+                    <div class="apply">
+                        <p>
+                            <ion-checkbox *ngIf="changeType == 1" [(ngModel)]="item.checkbox" color="danger"
+                                          (ngModelChange)="changeCheck(item)"></ion-checkbox>
+                            <span>申请人:<span>{{item.submitterName || "-"}}</span></span>
+                            <ng-container *ngIf="changeType == 2">
+                                <span float-end *ngIf="item.status == 1">审核通过</span>
+                                <span float-end *ngIf="item.status == 2">确认到访</span>
+                                <span float-end *ngIf="item.status == 3">提交审核</span>
+                                <span float-end *ngIf="item.status == 4">已驳回</span>
+                            </ng-container>
+                        </p>
+                        <p>
+                                <span class="order-time">访客名称:
+                                    <span>{{item.visitorName || "-"}}</span>
+                                </span>
+                        </p>
+                        <p>
+                                <span class="order-time">访客单位:
+                                    <span>{{item.visitorOrg || "-"}}</span>
+                                </span>
+                        </p>
+                        <p>
+                                <span class="order-time">到访时间:
+                                    <span>{{item.visitTime | date:'yyyy-MM-dd HH:mm:ss'}}</span>
+                                </span>
+                        </p>
+                        <p>
+                         <span *ngIf="changeType == 1" class="order-time">申请时间:
+                                <span>{{item.submitTime | date:'yyyy-MM-dd'}}
+                                </span>
+                         </span>
+                        </p>
+                    </div>
+                </ng-container>
+            </ion-list>
+            <ion-list text-center style="margin-top: 10rem;color: #666666"
+                      *ngIf="apply.isLoad  && apply.list.length == 0">
+                <img style="width: 20%;" src="./assets/imgs/no-info.png" alt="">
+                <p text-center>
+                    暂无申请
+                </p>
+            </ion-list>
+        </div>
+        <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
+            <ion-infinite-scroll-content
+                    loadingSpinner="bubbles"
+                    loadingText="加载中"></ion-infinite-scroll-content>
+        </ion-infinite-scroll>
+    </ion-content>
+</ion-content>
+
+<div *ngIf="footerView" class="stuff-footer">
+    <div class="footer-flex">
+        <div class="flex-all">
+            <ion-item>
+                <ion-label>全选</ion-label>
+                <ion-checkbox [(ngModel)]="checkAll" (ngModelChange)="selectAll($event)" color="danger"></ion-checkbox>
+            </ion-item>
+        </div>
+        <div (click)="submit(4)">
+            <button style="background-color:#bbb;" round small color="light" ion-button>退回</button>
+        </div>
+        <div (click)="submit(1)">
+            <button round small color="danger" ion-button>通过</button>
+        </div>
+
+    </div>
+</div>
+

src/pages/serve-pages/vistor-register/vistor-deal/vistor-deal.scss

+page-vistor-deal {
+  .duty {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    height: 36px;
+    background-color: #fff;
+  }
+
+  .duty-state {
+    border: 1px solid #f8ac56;
+    font-size: 1.3rem;
+    border-radius: 4px;
+    padding: 1px 4px;
+    color: #f8ac56;
+  }
+
+  .duty div {
+    width: 50%;
+    text-align: center;
+    position: relative;
+    height: 36px;
+    line-height: 36px;
+  }
+
+  .duty-title {
+    position: relative;
+    color: #e42417;
+  }
+
+  .duty-title::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 2px;
+    background-color: #e42417;
+    bottom: -10px;
+    left: 0px;
+  }
+
+  .duty-content {
+    padding: 8px;
+
+    .apply {
+      background-color: #fff;
+
+      p {
+        ion-checkbox {
+          vertical-align: bottom;
+          margin-right: 5px;
+        }
+
+        padding: 0 10px 10px 10px;
+
+        span {
+          color: #333333;
+          font-weight: 500;
+
+          span {
+            color: #666666;
+            font-weight: 400;
+          }
+        }
+      }
+
+      p:first-child {
+        border-bottom: 1px solid #cccccc;
+        margin-bottom: 15px;
+        padding-top: 15px;
+      }
+    }
+  }
+
+  .apply {
+    font-size: 1.4rem;
+    border-radius: 5px;
+
+    .apply-room {
+      font-size: 1.4rem;
+    }
+
+    .meet-type {
+      font-size: 1.4rem;
+      margin-left: 20px;
+
+      span {
+        font-size: 1.4rem;
+      }
+    }
+
+    .order-time {
+      font-size: 1.4rem;
+    }
+  }
+
+  .apply + .apply {
+    margin-top: 8px;
+  }
+
+  .stuff-footer {
+    position: fixed;
+    bottom: 0;
+    height: 5rem;
+    width: 100%;
+    text-align: center;
+    border-top: 1px solid #eeeeee;
+    z-index: 9;
+    background-color: #fff;
+
+    .item-ios.item-block .item-inner {
+      border: none;
+    }
+
+    .button-small-ios {
+      height: 2.6rem;
+    }
+
+    img {
+      margin-top: .5rem;
+      width: 30px;
+    }
+
+    .tip-num {
+      position: absolute;
+      right: 15px;
+      top: 10px;
+      color: #e12724;
+      font-size: 1rem;
+      background: #fff;
+      display: block;
+      line-height: 1rem;
+      border-radius: 5px;
+    }
+
+    ion-icon {
+      color: #666666;
+      position: relative;
+      font-size: 2.5rem;
+    }
+
+    ion-icon.main-color {
+      color: #e66866;
+    }
+
+    .input {
+      background: #ddd;
+      border: 1px solid #ddd;
+      border-radius: 2px;
+      height: 2.8rem;
+      line-height: 2.8rem;
+      color: #666666;
+    }
+  }
+
+  .footer-flex {
+    display: flex;
+  }
+
+  .footer-flex > div {
+    width: 50%;
+    line-height: 4rem;
+    padding: 0 20px;
+  }
+}

src/pages/serve-pages/vistor-register/vistor-deal/vistor-deal.ts

+import {Component, ViewChild} from '@angular/core';
+import {InfiniteScrollContent, IonicPage, LoadingController, NavController, NavParams} from 'ionic-angular';
+import {ServeService} from "../../serve.service";
+import {CommonService} from "../../../../provide/common.service";
+import {timer} from "rxjs/observable/timer";
+
+@Component({
+    selector: 'page-vistor-deal',
+    templateUrl: 'vistor-deal.html',
+})
+export class VistorDealPage {
+
+
+    @ViewChild(InfiniteScrollContent) infiniteScrollContent: InfiniteScrollContent;
+
+    pageNum = 1;
+    pageSize = 10;
+    changeType = 1;
+    footerView = false;
+    checkAll = false;
+    chooseObj = [];
+
+    totalNum;
+    apply = {
+        list: [],
+        isLoad: false,
+        loadMore: false
+    };
+
+    constructor(public navCtrl: NavController, public navParams: NavParams,
+                private loading: LoadingController,
+                private serveSer: ServeService, private commonSer: CommonService) {
+    }
+
+    ionViewDidLoad() {
+        this.footerView = true;
+        this.getList();
+    }
+
+    ionViewWillLeave() {
+        this.footerView = false;
+    }
+
+    getList() {
+        const data = {
+            P_pageNumber: 1,
+            P_pageSize: this.pageSize,
+            flag: this.changeType
+        };
+        this.serveSer.searchVisitorCheckList(data).subscribe(
+            (res) => {
+                this.apply.list = res.data.list;
+            }
+        )
+    }
+
+    change(type) {
+        this.changeType = type;
+        if (this.changeType == 2) this.footerView = false;
+        if (this.changeType == 1) this.footerView = true;
+        this.getList();
+    }
+
+    changeCheck(item) {
+        const index = this.chooseObj.indexOf(item.id);
+        if (index > -1) {
+            this.chooseObj.splice(index, 1);
+        } else {
+            this.chooseObj.push(item.id);
+        }
+        this.checkAll = this.chooseObj.length === this.apply.list.length;
+    }
+
+    //下拉刷新
+    doRefresh(e) {
+        this.apply.loadMore = true;
+        this.infiniteScrollContent.inf.enable(true);
+        const data = {
+            P_pageNumber: 1,
+            P_pageSize: this.pageSize,
+            flag: this.changeType
+        };
+        this.serveSer.searchVisitorCheckList(data).subscribe(
+            (res) => {
+                this.apply.list = res.data.list;
+                this.totalNum = res.data.total;
+                timer(800).subscribe(() => {
+                    this.commonSer.toast('刷新成功');
+                    e.complete()
+                });
+            }
+        )
+    }
+
+    //加载更多
+    doInfinite(e) {
+        if (this.totalNum == this.apply.list.length) {
+            console.log("没有更多了");
+            this.apply.loadMore = false;
+            e.enable(false);
+            return false;
+        }
+        this.pageNum++;
+        const data = {
+            P_pageNumber: this.pageNum,
+            P_pageSize: this.pageSize,
+            flag: this.changeType
+        };
+        this.serveSer.searchVisitorCheckList(data).subscribe(
+            (res) => {
+                this.totalNum = res.data.total;
+                res.data.list.forEach(e => {
+                    this.apply.list.push(e);
+                });
+                timer(800).subscribe(() => e.complete());
+            }
+        )
+    }
+
+    //全选
+    selectAll(e) {
+        this.chooseObj = [];
+        if (e == false) {
+            this.apply.list.forEach(e => {
+                e.checkbox = false;
+            })
+        } else {
+            this.apply.list.forEach(e => {
+                e.checkbox = true;
+                this.chooseObj.push(e.id);
+            })
+        }
+    }
+
+    submit(status) {
+        if (this.chooseObj.length == 0) {
+            this.commonSer.toast('请选择申请');
+            return false;
+        }
+        const data = {
+            ids: this.chooseObj.join(','),
+            status: status,
+        };
+        let msg = status == 1 ? '确定通过所选申请' : '确定退回所选申请';
+        this.commonSer.alert(msg, () => {
+            let loading = this.loading.create({
+                content: '提交中...'
+            });
+            loading.present();
+            this.serveSer.visitorOperate(data).subscribe(
+                (res) => {
+                    this.getList();
+                    loading.dismiss();
+                }
+            )
+        })
+    }
+
+}