party update

src/pages/serve-pages/food/food-apply/food-apply.html

+<ion-header>
+
+  <ion-navbar>
+    <ion-title>订餐申请</ion-title>
+  </ion-navbar>
+
+</ion-header>
+
+
+<ion-content>
+  <div class="padding-6">
+    <ion-item>
+      <ion-label class="item-left"><span class="color-red">*</span>订餐日期:</ion-label>
+      <ion-datetime cancelText="取消" doneText="确认" displayFormat="YYYY-MM-DD"
+                    pickerFormat="YYYY MM DD" placeholder="请选择"
+                    [(ngModel)]="obj.orderDate"></ion-datetime>
+      <ion-label class="right-arrow">
+        <ion-icon name="arrow-forward"></ion-icon>
+      </ion-label>
+      <ion-label *ngIf="checkObj.orderDate" class="check-tips">请选择订餐日期</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label class="item-left"><span class="color-red">*</span>时间点:</ion-label>
+      <ion-label (click)="chooseTime()" [ngStyle]="{'color':obj.typeText == '请选择'?'#999':'#333'}"
+                 class="choose">{{obj.typeText}}</ion-label>
+      <ion-label class="right-arrow" (click)="chooseTime()">
+        <ion-icon name="arrow-forward"></ion-icon>
+      </ion-label>
+      <ion-label *ngIf="checkObj.type" class="check-tips">请选择时间点</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label class="item-left"><span class="color-red">*</span>人数:</ion-label>
+      <ion-input [(ngModel)]="obj.peopleCount" type="text" maxlength="20"
+                 [placeholder]="'请输入'"></ion-input>
+      <ion-label *ngIf="checkObj.peopleCount" class="check-tips">请输入人数</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label class="item-left"><span class="color-red">*</span>标准:</ion-label>
+      <ion-label (click)="chooseStandard()" [ngStyle]="{'color':obj.standardText == '请选择'?'#999':'#333'}"
+                 class="choose">{{obj.standardText}}</ion-label>
+      <ion-label class="right-arrow" (click)="chooseStandard()">
+        <ion-icon name="arrow-forward"></ion-icon>
+      </ion-label>
+      <ion-label *ngIf="checkObj.standard" class="check-tips">请选择标准</ion-label>
+    </ion-item>
+    <div class="item-box">
+      <div class="left">备注:</div>
+      <div class="right">
+        <ion-textarea [(ngModel)]="obj.remark"></ion-textarea>
+      </div>
+    </div>
+  </div>
+
+  <button  class="submit-btn submit" (click)="submit()">提交</button>
+
+</ion-content>

src/pages/serve-pages/food/food-apply/food-apply.scss

+page-food-apply {
+
+  .item-left {
+    text-align: right;
+    width: 20%;
+    font-weight: bold;
+    font-size: 1.4rem;
+    flex: none;
+    opacity: 1;
+  }
+
+  .item-ios.item-block .item-inner {
+    border-bottom: 0.55px solid #eeeeee;
+  }
+
+  ion-datetime, ion-select {
+    width: 80%;
+    max-width: 80%;
+    text-align: right;
+    font-size: 1.4rem;
+  }
+
+  ion-item {
+    position: relative;
+  }
+
+  ion-input input {
+    text-align: right;
+    font-size: 1.4rem;
+  }
+
+  .segment-ios .segment-button{
+    border-color: #e12724;
+    color: #e12724;
+    height: 2.2rem;
+    line-height: 2rem;
+  }
+  .segment-ios .segment-button.segment-activated{
+    background-color: #e12724;
+  }
+
+  .datetime-ios {
+    padding: 11px 15px 11px 16px;
+  }
+
+  .right-arrow {
+    position: absolute;
+    right: 2px;
+    top: 5px;
+    color: #999;
+    font-size: 1.6rem;
+  }
+
+  .choose{
+    text-align: right;
+    margin-right: 20px;
+    font-size: 1.5rem;
+    color: #999;
+  }
+
+  .item-box {
+    display: flex;
+    border-bottom: 0.55px solid #eeeeee;
+
+    .left {
+      text-align: right;
+      width: 20%;
+      font-weight: bold;
+      font-size: 1.4rem;
+      margin: 11px 8px 11px 0;
+    }
+
+    .right {
+      width: 80%;
+      padding: 11px 8px 11px 16px;
+
+      .div-tag {
+        span {
+          display: inline-block;
+          margin-right: 10px;
+          white-space: initial;
+          border: 1px solid #eee;
+          padding: 2px 5px;
+          font-size: 1rem;
+          margin-bottom: 5px;
+          border-radius: 4px;
+
+          ion-icon {
+            margin-left: 3px;
+            color: #666666;
+            font-size: 1rem;
+          }
+        }
+      }
+
+      button {
+        margin: 0;
+      }
+
+      ion-textarea {
+        padding: 6px;
+        height: 100px;
+        border: 1px solid #ddd;
+      }
+
+      .tag {
+        border: 1px solid #ccc;
+        margin: 0 5px 10px 0;
+        display: inline-block;
+        padding: 4px 20px;
+        brder-radius: 4px;
+        font-size: 1.2rem;
+      }
+
+      span.selectLead {
+        background-color: #fdf8f2;
+        border: 1px solid #e42417;
+        color: #e42417;
+      }
+    }
+  }
+  ion-item,.item-box{
+    position: relative;
+  }
+  .check-tips{
+    position: absolute;
+    font-size: 1.2rem;
+    top: 24px;
+    color: red;
+    left: 10px;
+  }
+}

src/pages/serve-pages/food/food-apply/food-apply.ts

+import {Component} from '@angular/core';
+import {ActionSheetController, IonicPage, ModalController, NavController, NavParams} from 'ionic-angular';
+import {ServeService} from "../../serve.service";
+import {CommonService} from "../../../../provide/common.service";
+import {DatePipe} from "@angular/common";
+import {PersonMulComponent} from "../../../../components/person-mul/person-mul";
+
+
+@Component({
+    selector: 'page-food-apply',
+    templateUrl: 'food-apply.html',
+})
+export class FoodApplyPage {
+
+    obj = {
+        orderDate: null,
+        type: null,
+        typeText: '请选择',
+        peopleCount: '',
+        standard: '',
+        standardText: '请选择',
+        amount: '请选择',
+        remark: '',
+    };
+
+    checkObj = {
+        orderDate: false,
+        type: false,
+        peopleCount: false,
+        standard: false,
+    };
+
+    personList = [];
+    applyId; //是否编辑
+    type;
+
+    constructor(public navCtrl: NavController, public navParams: NavParams,
+                private serveSer: ServeService, public modalCtrl: ModalController,
+                private commonSer: CommonService, private datePipe: DatePipe,
+                private actionSheetCtrl: ActionSheetController) {
+    }
+
+    ionViewDidLoad() {
+        this.initParams();
+        this.applyId = this.navParams.get('id');
+        this.type = this.navParams.get('type');
+        console.log(this.type);
+        if (this.applyId) {
+            this.meetDetail();
+        }
+    }
+
+    //初始化参数
+    initParams() {
+        const data = this.navParams.get('data');
+        console.log(data);
+        if (data) {
+
+        } else {
+            this.obj.orderDate = this.datePipe.transform(new Date(), 'yyyy-MM-ddTHH:mm');
+        }
+    }
+
+    //用车详情
+    meetDetail() {
+        this.serveSer.detailMeals(this.applyId).subscribe(
+            (res) => {
+                if (res) {
+
+                }
+            }
+        )
+    }
+
+    // 选择时间点
+    chooseTime() {
+        const buttonsArr = [
+            {
+                text: '中午',
+                handler: () => {
+                    this.obj.type = '1';
+                    this.obj.typeText = '中午';
+                }
+            },
+            {
+                text: '晚上',
+                handler: () => {
+                    this.obj.type = '2';
+                    this.obj.typeText = '晚上';
+                }
+            },
+            {
+                text: '取消',
+                role: 'cancel',
+                handler: () => {
+                    console.log('Cancel clicked');
+                }
+            }
+        ];
+        const actionSheet = this.actionSheetCtrl.create({
+            cssClass: 'cameraAction',
+            buttons: buttonsArr
+        });
+        actionSheet.present();
+    }
+
+
+    //选择标准
+    chooseStandard() {
+        const buttonsArr = [
+            {
+                text: '15元',
+                handler: () => {
+                    this.obj.standard = '1';
+                    this.obj.standardText = '15元';
+                    this.obj.amount = '15';
+                }
+            },
+            {
+                text: '20元',
+                handler: () => {
+                    this.obj.standard = '2';
+                    this.obj.standardText = '20元';
+                    this.obj.amount = '20';
+                }
+            },
+            {
+                text: '其他',
+                handler: () => {
+                    this.obj.standard = '3';
+                    this.obj.standardText = '15元';
+                    this.obj.amount = '15';
+                }
+            }, {
+                text: '取消',
+                role: 'cancel',
+                handler: () => {
+                    console.log('Cancel clicked');
+                }
+            }
+        ];
+        const actionSheet = this.actionSheetCtrl.create({
+            cssClass: 'cameraAction',
+            buttons: buttonsArr
+        });
+        actionSheet.present();
+    }
+
+    //选择人员
+    choose() {
+        let modal = this.modalCtrl.create(PersonMulComponent, {
+            enterAnimation: 'modal-scale-enter',
+            leaveAnimation: 'modal-scale-leave'
+        });
+        modal.onDidDismiss(data => {
+            if (data) {
+                this.personList = data;
+            }
+        });
+        modal.present();
+    }
+
+    //移除人员
+    removePerson(index) {
+        this.personList.splice(index, 1);
+    }
+
+    //提交申请
+    submit() {
+        //校验
+        let checkBool = false;
+        for (let i in this.checkObj) {
+            if (!this.obj[i]) {
+                checkBool = true;
+                this.checkObj[i] = true;
+            } else {
+                this.checkObj[i] = false;
+            }
+        }
+
+        if (checkBool) {
+            this.commonSer.toast("请输入必填项！");
+            return false;
+        }
+
+        let carUser = [];
+        this.personList.forEach(e => {
+            carUser.push(e.id);
+        });
+        const data = {
+            orderDate: this.datePipe.transform(this.obj.orderDate,'yyyy-MM-dd'),
+            type: this.obj.type,
+            peopleCount: this.obj.peopleCount,
+            standard: this.obj.peopleCount,
+            amount: this.obj.amount,
+            remark: this.obj.remark,
+        };
+        console.log(data);
+        this.commonSer.alert('确认提交？', () => {
+            this.serveSer.saveMeals(data).subscribe(
+                (res) => {
+                    if (res.errcode == 1000) {
+                        this.commonSer.toast('提交申请成功');
+                        this.navCtrl.pop();
+                    } else {
+                        this.commonSer.toast(res.errmsg);
+                    }
+                }
+            )
+        });
+    }
+
+}

src/pages/serve-pages/food/food-deal/food-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">
+        <div class="duty-content">
+            <ion-list class="myItem">
+                <div class="apply" *ngFor="let item of apply.list">
+                    <p>
+                        <ion-checkbox *ngIf="changeType == 1" [(ngModel)]="item.checkbox" color="danger"
+                                      (ngModelChange)="changeCheck(item)"></ion-checkbox>
+                        <span>处室:<span>{{item.orgName}}</span></span>
+                        <ng-container *ngIf="changeType == 2">
+                            <span float-end *ngIf="item.status == 1">已提交</span>
+                            <span float-end *ngIf="item.status == 2">已审核</span>
+                        </ng-container>
+                    </p>
+                    <p>
+                                <span class="apply-room">
+                                    {{item.orgName}}
+                                    等
+                                    {{item.peopleCount}}
+                                    人，标准:
+                                    {{item.total}}
+                                    元
+                            </span>
+
+                    </p>
+                    <p>
+                                <span class="order-time">预定时间:
+                                <span>{{item.orderDate | date:'yyyy-MM-dd'}},
+                                    <span *ngIf="item.type == 1">午餐</span>&nbsp;&nbsp;
+                                    <span *ngIf="item.type == 2">晚餐</span>
+                                </span>
+                                                                </span>
+                    </p>
+                    <p>
+                         <span *ngIf="changeType == 1" class="order-time">申请时间:
+                                <span>{{item.submitTime | date:'yyyy-MM-dd'}}
+                                </span>
+                         </span>
+                    </p>
+                </div>
+            </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-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(3)">
+            <button style="background-color:#bbb;" round small color="light" ion-button>退回</button>
+        </div>
+        <div (click)="submit(2)">
+            <button round small color="danger" ion-button>通过</button>
+        </div>
+
+    </div>
+</div>
+

src/pages/serve-pages/food/food-deal/food-deal.scss

+page-food-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/food/food-deal/food-deal.ts

+import {Component, ViewChild} from '@angular/core';
+import {InfiniteScrollContent, IonicPage, NavController, NavParams} from 'ionic-angular';
+import {ServeService} from "../../serve.service";
+import {CommonService} from "../../../../provide/common.service";
+import {timer} from "rxjs/observable/timer";
+import {CarApplyPage} from "../../use-car/car-apply/car-apply";
+
+@Component({
+    selector: 'page-food-deal',
+    templateUrl: 'food-deal.html',
+})
+export class FoodDealPage {
+
+    @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 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,
+            status: this.changeType
+        };
+        this.serveSer.searchMealCheckList(data).subscribe(
+            (res) => {
+                this.apply.list = res.data.list;
+            }
+        )
+    }
+
+    change(type) {
+        this.changeType = type;
+        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,
+            status: this.changeType
+        };
+        this.serveSer.searchMealCheckList(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,
+            status: this.changeType
+        };
+        this.serveSer.searchMealCheckList(data).subscribe(
+            (res) => {
+                this.totalNum = res.data.total;
+                res.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 == 2 ? '确定通过所选申请' : '确定退回所选申请';
+        this.commonSer.alert(msg, () => {
+            this.serveSer.operateMeals(data).subscribe(
+                (res) => {
+                    this.getList();
+                }
+            )
+        })
+    }
+
+
+}

src/pages/serve-pages/food/food.html

+<ion-header>
+
+    <ion-navbar>
+        <ion-title>订餐预定</ion-title>
+        <ion-buttons end>
+            <button ion-button icon-only (click)="goDeal()" class="toolbar-icon">
+                <span style="font-size: 2.5rem" class="top-right-icon icon iconfont icon-shenhe"></span>
+            </button>
+        </ion-buttons>
+        <ion-buttons end>
+            <button ion-button (click)="goApply()">
+                <ion-icon style="font-size: 2rem" class="top-right-icon icon-fabu iconfont"></ion-icon>
+            </button>
+        </ion-buttons>
+
+    </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">
+        <ng-container *ngIf="changeType == 1">
+            <ion-calendar [(ngModel)]="date"
+                          (onChange)="getDate($event)"
+                          [options]="options"
+                          type="string"
+                          format="YYYY-MM-DD">
+            </ion-calendar>
+            <div class="room">
+                <div class="already">
+                    <p>午餐</p>
+                    <div class="morning">
+                        <div class="morning-room">
+                            <span (click)="goApplyEdit(item1)" *ngFor="let item1 of room?.lunchList">
+                                <span *ngIf="item1?.type == 1">午餐</span>&nbsp;&nbsp;
+                                    <span *ngIf="item1?.type == 2">晚餐</span> {{item1.orgName}}等{{item1.peopleCount}}人，标准:{{item1.total}}元
+                            </span>
+                        </div>
+                    </div>
+                </div>
+                <div class="already">
+                    <p>晚餐</p>
+                    <div class="morning">
+                        <div class="morning-room">
+                            <span (click)="goApply()" *ngFor="let item3 of room?.dinnerList">
+                               <span *ngIf="item3?.type == 1">午餐</span>&nbsp;&nbsp;
+                                    <span *ngIf="item3?.type == 2">晚餐</span> {{item3.orgName}}等{{item3.peopleCount}}人，标准:{{item3.total}}元
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </ng-container>
+        <ng-container *ngIf="changeType == 2">
+            <div class="duty-content">
+                <ion-list class="myItem">
+                    <ion-item-sliding class="apply" *ngFor="let item of applyList">
+                        <ion-item>
+                            <p>
+                                <span *ngIf="item.status == 1">已提交</span>
+                                <span *ngIf="item.status == 2">已审核</span>
+                                <span float-end>申请时间：
+                                    <span>{{item.submitTime | date:'yyyy-MM-dd HH:mm'}}</span>
+                                </span>
+                            </p>
+                            <p>
+                                <span class="apply-room">标准：
+                                <span>{{item.total}}元</span>
+                            </span>
+                                <span class="meet-type">
+                                    <span>{{item.peopleCount}}人</span>
+                                </span>
+                            </p>
+                            <p>
+                                <span class="order-time">预定时间：
+                                    <span>{{item.orderDate | date:'yyyy-MM-dd'}}
+                                    <span *ngIf="item.type == 1">午餐</span>&nbsp;&nbsp;
+                                    <span *ngIf="item.type == 2">晚餐</span>
+                                </span>
+                                                                </span>
+                            </p>
+                        </ion-item>
+                        <ion-item-options>
+                            <button ion-button color="danger" (click)="removeItem(item)">取消</button>
+                        </ion-item-options>
+                    </ion-item-sliding>
+                </ion-list>
+                <ion-list text-center style="margin-top: 10rem;color: #666666"
+                          *ngIf="!isLoad  && applyList.length == 0">
+                    <img style="width: 20%;" src="./assets/imgs/no-info.png" alt="">
+                    <p text-center>
+                        暂无预订
+                    </p>
+                </ion-list>
+            </div>
+        </ng-container>
+    </ion-content>
+</ion-content>
+

src/pages/serve-pages/food/food.module.ts

+import { NgModule } from '@angular/core';
+import { IonicPageModule } from 'ionic-angular';
+import { FoodPage } from './food';
+import {FoodApplyPage} from "./food-apply/food-apply";
+import {FoodDealPage} from "./food-deal/food-deal";
+import {CalendarModule} from "ion2-calendar";
+
+@NgModule({
+  declarations: [
+    FoodPage,
+    FoodApplyPage,
+    FoodDealPage
+  ],
+  imports: [
+    CalendarModule,
+    IonicPageModule.forChild(FoodPage),
+  ],
+  entryComponents:[
+    FoodApplyPage,
+    FoodDealPage
+  ]
+})
+export class FoodPageModule {}

src/pages/serve-pages/food/food.scss

+page-food {
+  .list-ios .item-block .item-inner {
+    border: none;
+  }
+
+  .bar-buttons-ios[end]{
+    width: 35px;
+    height: 35px;
+    text-align: center;
+    margin-right: 10px;
+  }
+
+  .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;
+  }
+
+  .span-btn {
+    background-color: #e42417;
+    font-size: 1.4rem;
+    padding: 4px 6px;
+    color: #fff;
+    border-radius: 3px;
+  }
+
+  .dutyItem > div {
+    margin-bottom: 10px;
+  }
+
+  .daySpan {
+    padding: 2px 20px;
+    background-color: #e42417;
+    color: #fff;
+    border-bottom-right-radius: 5px;
+  }
+
+  .nightSpan {
+    padding: 4px 20px;
+    background-color: #4e5e6f;
+    color: #fff;
+    border-bottom-right-radius: 5px;
+  }
+
+  .duty-Obj .item-ios p {
+    margin-bottom: 15px;
+  }
+
+  .duty-Obj .label-ios {
+    margin: 0;
+  }
+
+  .duty-Obj {
+    .item-ios.item-block .item-inner {
+      background-color: #f5f6f7;
+    }
+  }
+
+  .room {
+    padding: 15px;
+    background-color: #fff;
+  }
+
+  .morning, .afternoon {
+    display: flex;
+
+    .morning-text, .afternoon-text {
+      width: 20%;
+      display: flex;
+      align-items: center;
+      font-weight: bold;
+      padding-left: 15px;
+    }
+
+    .morning-room, .morning-room {
+      width: 100%;
+      padding: 10px 5px;
+      min-height: 53px;
+
+      span {
+        display: inline-block;
+        font-size: 1.5rem;
+        border-radius: 4px;
+        color: #474747;
+        padding: 0 8px;
+        margin-bottom: 8px;
+        margin-right: 5px;
+      }
+    }
+  }
+
+  .morning + .afternoon {
+    border-top: 1px solid #cccccc;
+  }
+
+  .already, .notYet {
+    border: 1px solid #dddddd;
+    border-radius: 3px;
+    margin-bottom: 20px;
+
+    p {
+      background-color: #fff1f0;
+      color: #e42417;
+      padding: 6px 15px;
+    }
+  }
+
+  .already {
+
+    .morning {
+      border-top-right-radius: 8px;
+      border-top-left-radius: 8px;
+    }
+
+    .afternoon {
+      border-bottom-right-radius: 8px;
+      border-bottom-left-radius: 8px;
+    }
+  }
+
+  .notYet {
+    margin-top: 15px;
+
+    .morning, .afternoon {
+      .morning-room {
+        span {
+          background-color: #f2f2f2;
+          border: 1px solid #f2f2f2;
+          color: #666666;
+        }
+      }
+    }
+  }
+
+  .duty-content {
+    padding: 15px;
+    ion-item{
+      p{
+        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: 10px;
+      }
+    }
+  }
+
+  .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;
+  }
+
+  .list-ios .item-block .item-inner{
+    padding: 0;
+  }
+}

src/pages/serve-pages/food/food.ts

+import { Component } from '@angular/core';
+import { IonicPage, NavController, NavParams } from 'ionic-angular';
+import {CalendarComponentOptions} from "ion2-calendar";
+import {monthCh, weekDay} from "../../../app/main";
+import {AppGlobal} from "../../../service/http.service";
+import {ServeService} from "../serve.service";
+import {DatePipe} from "@angular/common";
+import {CommonService} from "../../../provide/common.service";
+import {AppMainService} from "../../../app/app.service";
+import {RoomDealPage} from "../meet-room/room-deal/room-deal";
+import {RoomApplyPage} from "../meet-room/room-apply/room-apply";
+import {FoodApplyPage} from "./food-apply/food-apply";
+import {FoodDealPage} from "./food-deal/food-deal";
+
+
+@IonicPage()
+@Component({
+  selector: 'page-food',
+  templateUrl: 'food.html',
+})
+export class FoodPage {
+
+  changeType = 1;
+  date = new Date();
+  options: CalendarComponentOptions = {
+    from: new Date(2000, 0, 1),
+    monthFormat: 'YYYY 年 MM 月 ',
+    weekdays: weekDay,
+    monthPickerFormat: monthCh,
+    pickMode: 'single',
+    color: 'danger'
+  };
+
+  role = [];
+  mineInfo;
+  room;
+  applyList = [];
+  selectDate;
+
+  pageNumber = 1;
+  pageSize = AppGlobal.pageCount;
+  total;
+  isLoad = true;
+
+  constructor(public navCtrl: NavController, public navParams: NavParams,
+              private serveSer: ServeService, public datePipe: DatePipe,
+              private commonSer: CommonService, private appMainSer: AppMainService) {
+  }
+
+  ionViewDidEnter(){
+    this.myApply();
+    this.selectDate = this.datePipe.transform(new Date(), 'yyyy-MM-dd');
+    this.getApply();
+  }
+
+  ionViewDidLoad() {
+    //获取权限
+    this.appMainSer.role.subscribe(value => {
+          this.role = value;
+        }
+    );
+
+    //获取个人信息
+    this.appMainSer.mineInfo.subscribe(value => {
+      this.mineInfo = value;
+    })
+  }
+
+  //获取预定日程
+  getApply() {
+    const data = {'dateStr': this.selectDate};
+    this.serveSer.mealsQueryByDate(data).subscribe(
+        (res) => {
+          this.room = res.data;
+        }
+    )
+  }
+
+  getDate(e) {
+    this.selectDate = e;
+    this.getApply();
+  }
+
+  //我的预定
+  myApply() {
+    const data = {
+      P_pageNumber: this.pageNumber,
+      P_pageSize: this.pageSize,
+    };
+    this.serveSer.myBook(data).subscribe(
+        (res) => {
+          this.isLoad = false;
+          this.applyList = res.data.list;
+          this.total = res.data.total;
+        }
+    )
+  }
+
+  //取消预定
+  removeItem(item) {
+    this.serveSer.cancelMeals(item.id).subscribe(
+        (res) => {
+          if (res.errcode == 1000) {
+            this.commonSer.toast('取消预定成功');
+            this.myApply();
+          } else {
+            this.commonSer.toast(res.errmsg);
+          }
+        }
+    )
+  }
+
+  //审核
+  goDeal() {
+    this.navCtrl.push(FoodDealPage);
+  }
+
+  //改变
+  change(type) {
+    this.changeType = type;
+
+    if (this.changeType == 1) this.getApply();
+    if (this.changeType == 2) this.myApply();
+  }
+
+  //编辑申请
+  goApplyEdit(item) {
+    if (this.role.includes(0)) return false;  //普通人不可编辑
+    if (this.role.includes(1) && item.orgName != this.mineInfo.orgName) return false;  //内勤只能编辑本处室的
+    this.navCtrl.push(RoomApplyPage, {id: item.applyId});
+  }
+
+  //新增申请
+  goApply() {
+      this.navCtrl.push(FoodApplyPage);
+  }
+}