【ionic4】-用数组来单独提交多人信息

进入积分项目之后拿到的第一个任务是完成考勤中纪委闭环反馈这部分，需要提交多人信息，前端也需要以数组形式区分不同人的信息，先来理一下业务需求。

业务需求：

A、请假记录

1、从考勤表中按期查询当天所有请假同学

2、按人显示到前端页面中，包括申请人，请假类型，请假原因，开始时间，结束时间

B、违纪记录

1、从告警表中按期查询当天所有违纪同学

2、按人显示到前端页面中，包括违纪人，违纪类型（纪委反馈，违纪原因，提交按钮）

3、提交纪委对所有违纪同学填写的纪委反馈和违纪原因

4、前端以数组形式划分多个违纪同学的违纪原因和纪委反馈

在请假记录中，因为涉及到显示多个人的信息，所以用到了ngFor，并且以插值表达式来显示每项信息。展开折叠的效果是用图标画上去的，借助ngIf加判断从而实现点击展开再次点击折叠的效果。

HTML中：

 <ion-item>
    <label>请假记录</label>
    <ion-icon name="ios-arrow-down" style="margin-left: 70%;" item-right *ngIf="isShow" (click)="isShow=!isShow">
    </ion-icon>
    <ion-icon name="ios-arrow-forward" style="margin-left: 70%;" item-right *ngIf="!isShow" (click)="isShow=!isShow">
    </ion-icon>
  </ion-item>

  <ion-list *ngIf="isShow">
    <ion-item *ngFor="let item of list">
      <ion-label>
        <ion-label>申请人：{{item.userName}}</ion-label>
        <p>请假类型：{{item.leaveType}}</p>
        <p>请假原因：{{item.remark}}</p>
        <p>开始时间：{{item.startTime|date:"yyyy-MM-dd hh:mm:ss"}}</p>
        <p>结束时间：{{item.endTime|date:"yyyy-MM-dd hh:mm:ss"}}</p>
      </ion-label>
    </ion-item>
  </ion-list>

Ts中：

 ngOnInit() {
    this.getDiscipline();
  }

  ionViewWillEnter() {
    this.activatedRoute.queryParams.subscribe(queryParams => {
      this.organizationId = queryParams.organizationId;
    });
    this.getAlarmDetail(this.organizationId);
  }

  canGoBack() {
    this.nav.goBack();
  }

  getAlarmDetail(organizationId: string) {

    const startTime = '2019-05-27';   // 测试
    const endTime = '2019-05-29';     // 测试
    console.log(this.startTime);
    console.log(this.endTime);
    const dataUrl = 'dingtalk-web/approveDetail/getPeriod/'
      + 'MWCsetHahSD1iY3W9G71wr' + '/'
      + startTime + '/'
      + endTime;
    this.http.get(dataUrl).subscribe(
      res => {
        if (res.json().code === '0000' && res.json().data != null) {
          this.list = res.json().data;
        } else {
          super.showToast(this.toastCtrl, '当前没有钉钉考勤记录！');
        }
      });
  }

在违纪记录中，因为要提交多人的违纪原因和纪委反馈，而且是单独提交，巧妙的借助了索引来区别不同的人，用数组和索引结合从而实现每次单独提交一个人的信息。通过id来提交每个人的违纪原因和纪委反馈，用索引区分每次提交的人，所以将id和索引值传给提交方法。

  <ion-item>
    <label>违纪记录</label>
    <ion-icon name="ios-arrow-down" style="margin-left: 70%;" item-right *ngIf="Display" (click)="Display=!Display">
    </ion-icon>
    <ion-icon name="ios-arrow-forward" style="margin-left: 70%;" item-right *ngIf="!Display" (click)="Display=!Display">
    </ion-icon>
  </ion-item>

  <ion-list *ngIf="Display">
    <ion-item *ngFor="let item of list1,let i = index">
      <ion-card>
        <ion-card-content>
          <ion-label>违纪人：{{item.userName}}</ion-label>
          <p>违纪类型：{{item.disciplineReason}}</p>
          <div class="item item-input item-select">
            <div class="input-label">
              纪委反馈:
              <ion-item style="width: 300px;">
                <ion-select placeholder="请选择" id="feedback" [(ngModel)]="feedback[i]" cancelText="取消" doneText="确认">
                  <ion-select-option value="已解决">已解决</ion-select-option>
                  <ion-select-option value="未解决">未解决</ion-select-option>
                </ion-select>
              </ion-item>
            </div>
            <ion-card>原因:
              <ion-textarea type="text" rows="5" cols="20" [(ngModel)]="reasons[i]"></ion-textarea>
            </ion-card>

            <ion-button color="primary" style="margin-left: 5%;margin-right: 5%;width: 90%;"
              (click)="submitReason(item.id,i)">提交</ion-button>
          </div>
        </ion-card-content>
      </ion-card>
    </ion-item>
  </ion-list>

Ts中：

// 查询违纪 温娉哲 2019年6月15日20:26:03
  getDiscipline() {
    const startTime = '2019-05-27';   //测试
    const endTime = '2019-06-01';      //测试
    const dataUrl = 'http://localhost:8115/dingtalk-web/detailRecord/searchDayOff/'
      + 'MWCsetHahSD1iY3W9G71wr' + '/'
      + startTime + '/'
      + endTime;
    this.http.get(dataUrl).subscribe(
      res => {
        if (res.json().code === '0000' && res.json().data != null) {
          this.list1 = res.json().data;
          console.log(this.list1);
        } else {
          super.showToast(this.toastCtrl, '当前没有钉钉违纪记录！');
        }
      });
  }

  // 提交违纪原因和纪委反馈-温娉哲-2019年6月15日21:39:56
  submitReason(event: any, index: number, reasons: string) {
    this.infor = new DingtalkModel();
    this.inforList = [];
    console.log(this.reasons.length);
    if (this.reasons[index] === '' || this.reasons[index] === null || this.reasons[index] === undefined
      || this.feedback[index] === '' || this.feedback[index] === null || this.feedback[index] === undefined) {
      super.showToast(this.toastCtrl, '请先完善您的信息！');
      return false;
    }

    this.infor.reasons = this.reasons[index];
    this.infor.feedback = this.feedback[index];
    this.infor.id = event;
    
    this.inforList.push(this.infor);
    const body = JSON.stringify(this.inforList);

    const dataUrl = 'http://localhost:8115/dingtalk-web/alarmDetail/updateById';
    this.http.post(dataUrl, body).subscribe(res => {
      console.log(res.json().code);
      if (res.json().code === '0000') {
        super.showToast(this.toastCtrl, '提交成功！');
      }
    });
  }