Sinopec-Anxin/src/app/pages/oil-station-info/oil-station-info.component.html

<div class="box" id="oilStationInfo">
  <div class="content">
    <div class="title">
      <app-title [name]="'编辑基本信息'"></app-title>
    </div>
    <div class="tablebox">
      <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
        <div class="table">

          <table formGroupName="oilStation">
            <tr>
              <td class="head">站名</td>
              <td class="text organizations">
                {{userdata.organization.displayName}}
              </td>
              <td class="head">开业时间<span style="color: red;">*</span></td>
              <td class="text">
                <nz-form-item>
                  <nz-form-control>
                    <nz-date-picker [(ngModel)]="httpBody.openTime" [nzFormat]="dateFormat"
                      formControlName="startBusinessTime"></nz-date-picker>
                  </nz-form-control>
                </nz-form-item>
              </td>
            </tr>
            <tr>
              <td class="head">油站类型</td>
              <td class="text">
                <nz-form-item>
                  <nz-form-control>
                    <nz-select [(ngModel)]="httpBody.stationType" formControlName="oilStationType">
                      <nz-option [nzValue]=0 nzLabel="自营"></nz-option>
                      <nz-option [nzValue]=1 nzLabel="加盟"></nz-option>
                      <nz-option [nzValue]=2 nzLabel="其他"></nz-option>
                    </nz-select>
                  </nz-form-control>
                </nz-form-item>
              </td>
              <td class="head">车道数量</td>
              <td class="text">
                <nz-form-item>
                  <nz-form-control>
                    <nz-input-group>
                      <input [(ngModel)]="httpBody.laneCount" nz-input type="text" formControlName="laneNumber" />
                    </nz-input-group>
                  </nz-form-control>
                </nz-form-item>
              </td>
            </tr>
            <tr>
              <td class="head">地址</td>
              <td class="text" colspan="3">
                <nz-form-item>
                  <nz-form-control>
                    <nz-input-group>
                      <input [(ngModel)]="httpBody.address" nz-input type="text" formControlName="address" />
                    </nz-input-group>
                  </nz-form-control>
                </nz-form-item>
              </td>
              <!-- <td class="head">营业执照有效期<span style="color: red;">*</span></td>
                <td colspan="text">
                  <nz-form-item>
                    <nz-form-control>
                      <nz-range-picker [(ngModel)]="validityTime" formControlName="validityTime">
                      </nz-range-picker>
                    </nz-form-control>
                  </nz-form-item>
                </td> -->
            </tr>
            <tr>
              <td class="head">区域名称</td>
              <td class="text">
                <nz-form-item>
                  <nz-form-control>
                    <nz-input-group>
                      <input [(ngModel)]="httpBody.locationName" nz-input type="text" formControlName="locationName" />
                    </nz-input-group>
                  </nz-form-control>
                </nz-form-item>
              </td>
              <td class="head">公司名称<span style="color: red;">*</span></td>
              <td class="text">
                <nz-form-item>
                  <nz-form-control>
                    <nz-input-group>
                      <input required [(ngModel)]="httpBody.companyName" nz-input type="text"
                        formControlName="companyName" />
                    </nz-input-group>
                  </nz-form-control>
                </nz-form-item>
              </td>
            </tr>
            <tr>
              <td class="head">联系人</td>
              <td class="text">
                <nz-form-item>
                  <nz-form-control>
                    <nz-input-group>
                      <input [(ngModel)]="httpBody.leaderName" nz-input type="text" formControlName="leaderName" />
                    </nz-input-group>
                  </nz-form-control>
                </nz-form-item>
              </td>
              <td class="head">联系电话</td>
              <td class="text">
                <nz-form-item>
                  <nz-form-control>
                    <nz-input-group>
                      <input [(ngModel)]="httpBody.leaderContact" nz-input type="text"
                        formControlName="leaderContact" />
                    </nz-input-group>
                  </nz-form-control>
                </nz-form-item>
              </td>
            </tr>
            <tr>
              <td class="head">油站等级</td>
              <td class="text">
                <nz-form-item>
                  <nz-form-control>
                    <nz-input-group>
                      <input [(ngModel)]="httpBody.stationLevel" nz-input type="text" formControlName="stationLevel" />
                    </nz-input-group>
                  </nz-form-control>
                </nz-form-item>
              </td>
              <td class="head">经营品种</td>
              <td class="text">
                <nz-form-item>
                  <nz-form-control>
                    <nz-input-group>
                      <input [(ngModel)]="httpBody.sellVariety" nz-input type="text" formControlName="sellVariety" />
                    </nz-input-group>
                  </nz-form-control>
                </nz-form-item>
              </td>
            </tr>
            <tr>
              <td class="head">油机数量</td>
              <td class="text">
                <nz-form-item>
                  <nz-form-control>
                    <nz-input-group>
                      <input [(ngModel)]="httpBody.gasStationCount" nz-input type="text"
                        formControlName="gasStationCount" />
                    </nz-input-group>
                  </nz-form-control>
                </nz-form-item>
              </td>
              <td class="head">油罐容积(m³)</td>
              <td class="text">
                <nz-form-item>
                  <nz-form-control>
                    <nz-input-group>
                      <input [(ngModel)]="httpBody.tankVolume" nz-input type="number" formControlName="tankVolume" />
                    </nz-input-group>
                  </nz-form-control>
                </nz-form-item>
              </td>
            </tr>
          </table>
          <table formGroupName="policeStation">
            <tr>
              <td class="head">辖区派出所</td>
              <td class="text">
                <nz-form-item>
                  <nz-form-control>
                    <nz-input-group>
                      <input [(ngModel)]="policeStation.name" nz-input type="text" formControlName="name" />
                    </nz-input-group>
                  </nz-form-control>
                </nz-form-item>
              </td>
              <td class="head">地址</td>
              <td class="text">
                <nz-form-item>
                  <nz-form-control>
                    <nz-input-group>
                      <input [(ngModel)]="policeStation.address" nz-input type="text" formControlName="address" />
                    </nz-input-group>
                  </nz-form-control>
                </nz-form-item>
              </td>
            </tr>
            <tr>
              <td class="head">距离</td>
              <td class="text">
                <nz-form-item>
                  <nz-form-control>
                    <nz-input-group>
                      <input [(ngModel)]="policeStation.distance" nz-input type="text" formControlName="distance" />
                    </nz-input-group>
                  </nz-form-control>
                </nz-form-item>
              </td>
              <td class="head">联系方式</td>
              <td class="text">
                <nz-form-item>
                  <nz-form-control>
                    <nz-input-group>
                      <input [(ngModel)]="policeStation.contactInformation" nz-input type="text"
                        formControlName="contactInformation" />
                    </nz-input-group>
                  </nz-form-control>
                </nz-form-item>
              </td>
            </tr>
          </table>
          <table formGroupName="hospital">
            <tr>
              <td class="head">辖区医院</td>
              <td class="text">
                <nz-form-item>
                  <nz-form-control>
                    <nz-input-group>
                      <input [(ngModel)]="hospital.name" nz-input type="text" formControlName="name" />
                    </nz-input-group>
                  </nz-form-control>
                </nz-form-item>
              </td>
              <td class="head">地址</td>
              <td class="text">
                <nz-form-item>
                  <nz-form-control>
                    <nz-input-group>
                      <input [(ngModel)]="hospital.address" nz-input type="text" formControlName="address" />
                    </nz-input-group>
                  </nz-form-control>
                </nz-form-item>
              </td>
            </tr>
            <tr>
              <td class="head">距离</td>
              <td class="text">
                <nz-form-item>
                  <nz-form-control>
                    <nz-input-group>
                      <input [(ngModel)]="hospital.distance" nz-input type="text" formControlName="distance" />
                    </nz-input-group>
                  </nz-form-control>
                </nz-form-item>
              </td>
              <td class="head">联系方式</td>
              <td class="text">
                <nz-form-item>
                  <nz-form-control>
                    <nz-input-group>
                      <input [(ngModel)]="hospital.contactInformation" nz-input type="text"
                        formControlName="contactInformation" />
                    </nz-input-group>
                  </nz-form-control>
                </nz-form-item>
              </td>
            </tr>
          </table>
          <table formGroupName="fireBrigade">
            <tr>
              <td class="head">辖区消防队</td>
              <td class="text">
                <nz-form-item>
                  <nz-form-control>
                    <nz-input-group>
                      <input [(ngModel)]="fireBrigade.name" nz-input type="text" formControlName="name" />
                    </nz-input-group>
                  </nz-form-control>
                </nz-form-item>
              </td>
              <td class="head">地址</td>
              <td class="text">
                <nz-form-item>
                  <nz-form-control>
                    <nz-input-group>
                      <input [(ngModel)]="fireBrigade.address" nz-input type="text" formControlName="address" />
                    </nz-input-group>
                  </nz-form-control>
                </nz-form-item>
              </td>
            </tr>
            <tr>
              <td class="head">距离</td>
              <td class="text">
                <nz-form-item>
                  <nz-form-control>
                    <nz-input-group>
                      <input [(ngModel)]="fireBrigade.distance" nz-input type="text" formControlName="distance" />
                    </nz-input-group>
                  </nz-form-control>
                </nz-form-item>
              </td>
              <td class="head">联系方式</td>
              <td class="text">
                <nz-form-item>
                  <nz-form-control>
                    <nz-input-group>
                      <input [(ngModel)]="fireBrigade.contactInformation" nz-input type="text"
                        formControlName="contactInformation" />
                    </nz-input-group>
                  </nz-form-control>
                </nz-form-item>
              </td>
            </tr>
          </table>

          <!-- 审核中遮罩层 -->
          <div class="shade" *ngIf="httpBody.auditStatus == 1 || httpBody.auditStatus == 2">
            审核中...
          </div>
          <!-- <table class="imgtable" id="images">
            <tr *ngFor="let item of httpBody.licenses;let key = index">
              <td class="head" [title]="item.name">{{item.name}}</td>
              <td colspan="3" class="imgbox">
                <div class="timeDiv">
                  <div class="timeDivflex">
                    <div class="itemname">
                      证件编号:<span style="color: red;">*</span>
                    </div>
                    <nz-form-item title="证件编号">
                      <nz-form-control>
                        <nz-input-group>
                          <input style="border: 1px solid #91CCFF" [ngModelOptions]="{standalone: true}"
                            placeholder="请输入证件编号" [(ngModel)]="item.code" nz-input type="text" />
                        </nz-input-group>
                      </nz-form-control>
                    </nz-form-item>
                  </div>
                  <div class="timeDivflex">
                    <div class="itemname">
                      证照有效期:<span style="color: red;">*</span>
                    </div>
                    <label style="color: white;" [ngModelOptions]="{standalone: true}" nz-checkbox
                      [(ngModel)]="item.isPerpetual" (ngModelChange)="perpetualChange(item,$event)">是否为长期证照</label>
                    <nz-form-item style="border: 1px solid #91CCFF" title="证照有效期开始时间">
                      <nz-form-control>
                        <nz-date-picker required [ngModelOptions]="{standalone: true}" [nzPlaceHolder]="'开始时间'"
                          [(ngModel)]="item.startTime" (ngModelChange)="onChange($event)"></nz-date-picker>
                      </nz-form-control>
                    </nz-form-item>
                    <nz-form-item style="border: 1px solid #91CCFF" title="证照有效期结束时间" *ngIf="!item.isPerpetual">
                      <nz-form-control>
                        <nz-date-picker [ngModelOptions]="{standalone: true}" [nzPlaceHolder]="'结束时间'"
                          [(ngModel)]="item.endTime" (ngModelChange)="onChange($event)"></nz-date-picker>
                      </nz-form-control>
                    </nz-form-item>
                  </div>
                  <div class="timeDivflex">
                    <div class="itemname">
                      证照提醒时间:<span style="color: red;">*</span>
                    </div>
                    <nz-form-item style="border: 1px solid #91CCFF" title="证照到期第一次提醒时间">
                      <nz-form-control>
                        <nz-date-picker [ngModelOptions]="{standalone: true}" [nzPlaceHolder]="'一次提醒时间'"
                          [(ngModel)]="item.firstWarnTime" (ngModelChange)="onChange($event)"></nz-date-picker>
                      </nz-form-control>
                    </nz-form-item>
                    <nz-form-item style="border: 1px solid #91CCFF" title="证照到期第二次提醒时间">
                      <nz-form-control>
                        <nz-date-picker [ngModelOptions]="{standalone: true}" [nzPlaceHolder]="'二次提醒时间'"
                          [(ngModel)]="item.secondWarnTime" (ngModelChange)="onChange($event)"></nz-date-picker>
                      </nz-form-control>
                    </nz-form-item>
                  </div>
                  <div class="timeDivflex">
                    <div class="itemname">
                      证照年检时间:<span style="color: red;">*</span>
                    </div>
                    <label style="color: white;" [ngModelOptions]="{standalone: true}" nz-checkbox
                      [(ngModel)]="item.hasAnnualInspection">是否年检</label>
                    <nz-form-item style="border: 1px solid #91CCFF" title="年检时间" *ngIf="item.hasAnnualInspection">
                      <nz-form-control>
                        <nz-date-picker [ngModelOptions]="{standalone: true}" [nzPlaceHolder]="'年检时间'"
                          [(ngModel)]="item.annualInspectionTime" (ngModelChange)="onChange($event)"></nz-date-picker>
                      </nz-form-control>
                    </nz-form-item>
                    <nz-form-item style="border: 1px solid #91CCFF" title="年检提醒时间" *ngIf="item.hasAnnualInspection">
                      <nz-form-control>
                        <nz-date-picker [ngModelOptions]="{standalone: true}" [nzPlaceHolder]="'年检提醒时间'"
                          [(ngModel)]="item.annualInspectionWarnTime" (ngModelChange)="onChange($event)">
                        </nz-date-picker>
                      </nz-form-control>
                    </nz-form-item>
                    <nz-form-item title="年检机构" *ngIf="item.hasAnnualInspection">
                      <nz-form-control>
                        <nz-input-group>
                          <input style="border: 1px solid #91CCFF" [ngModelOptions]="{standalone: true}"
                            placeholder="年检机构" [(ngModel)]="item.annualInspectionOrganizationName" nz-input
                            type="text" />
                        </nz-input-group>
                      </nz-form-control>
                    </nz-form-item>
                  </div>
                </div>
                <div class="uploadDivbox">
                  <div class="itemname">
                    证照图片:
                  </div>
                  <div class="uploadDiv">
                    <img *ngIf="item.imageUrl" style="width: 100%;height: 100%;" [src]="item.imageUrl" alt="">
                    <input *ngIf="!item.imageUrl" (change)="filechange($event,key)" class="fileinput" type="file"
                      name="" id="">
                    <button *ngIf="!item.imageUrl" nz-button [nzLoading]=""><i nz-icon nzType="upload"
                        nzTheme="outline"></i>上传图片</button>
                  </div>
                  <div class="uploadDiv" *ngIf="item.imageUrl">
                    <input (change)="filechange($event,key)" class="fileinput" type="file" name="" id="">
                    <button nz-button [nzLoading]=""><i nz-icon nzType="upload" nzTheme="outline"></i>重新上传</button>
                  </div>
                </div>
                <a class="deleteTr" nz-popconfirm nzPopconfirmTitle="确定删除该证照吗?" nzPopconfirmPlacement="bottom"
                  (nzOnConfirm)="deleteTrConfirm(key)">
                  <i *ngIf="item.name != '营业执照' && item.name != '危险化学品' && item.name != '成品油零售'" nz-icon nzType="close"
                    nzTheme="outline"></i>
                </a>
              </td>
            </tr>
            <tr style="height: 50px;">
              <td colspan="4">
                <i style="cursor: pointer;" nz-icon nzType="plus" nzTheme="outline" (click)="showModal()"></i>
                <nz-modal [nzWidth]="380" [(nzVisible)]="isVisible" nzTitle="新增证照" (nzOnCancel)="handleCancel()"
                  (nzOnOk)="handleOk()">
                  <input [ngModelOptions]="{standalone: true}" nz-input placeholder="请输入证照名称" [(ngModel)]="addName" />
                </nz-modal>
              </td>
            </tr>
          </table> -->
        </div>
        <div class="btnbox">
          <!-- <span style="color: #fff;">当前审核状态：{{httpBody.auditStatus | auditStatus}}</span> -->
          <span style="color: #fff;margin-right: 30px;">当前审核状态：{{httpBody.auditLog.auditStatusDesc}}</span>
          <span style="color: #fff;">审核意见：{{httpBody.auditLog.rejectReason}}</span>
          <button [nzLoading]="isSubmitAuditLoading" nz-button type="button" *ngIf="httpBody.auditStatus != 1 && httpBody.auditStatus != 2" (click)="submitAudit()">提交审核</button>
          <button [nzLoading]="isRevocationAuditLoading" nz-button type="button" *ngIf="httpBody.auditStatus == 1 || httpBody.auditStatus == 2" (click)="revocationAudit()">撤销审核</button>
          <button [nzLoading]="isLoadingSave" nz-button type="button" (click)="submitForm()" *ngIf="httpBody.auditStatus != 1" >保存</button>
          <button (click)="exportExcel()" nz-button type="button"><img style="vertical-align: top;margin-right: 6px;"
              src="../../../assets/images/excel.png" alt=""> 导出Excel</button>
        </div>
      </form>
    </div>
  </div>
  <div class="backbtn" *ngIf="userdata && !userdata.hideCloseBtn">
    <button nz-button (click)="goback()">返回</button>
  </div>
</div>