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-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 colspan="text">
                <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>
          </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>
          <table class="imgtable">
            <tr>
              <td class="head">营业执照</td>
              <td colspan="3" class="imgbox">
                <div class="uploadDivbox">
                  <div class="uploadDiv">
                    <img *ngIf="httpBody.businessLicenseImage" style="width: 100%;height: 100%;"
                      [src]="httpBody.businessLicenseImage" alt="">
                    <input *ngIf="!httpBody.businessLicenseImage" (change)="filechange($event,'businessLicense')"
                      class="fileinput" type="file" name="" id="">
                    <button *ngIf="!httpBody.businessLicenseImage" nz-button [nzLoading]="isLoadingOne"><i nz-icon
                        nzType="upload" nzTheme="outline"></i>上传图片</button>
                  </div>
                  <div class="uploadDiv" *ngIf="httpBody.businessLicenseImage">
                    <input (change)="filechange($event,'businessLicense')" class="fileinput" type="file" name="" id="">
                    <button nz-button [nzLoading]="isLoadingOne"><i nz-icon nzType="upload"
                        nzTheme="outline"></i>重新上传</button>
                  </div>
                </div>

              </td>
            </tr>
            <tr>
              <td class="head">危险化学品<br>经营许可证</td>
              <td colspan="3" class="imgbox">
                <div class="uploadDivbox">
                  <div class="uploadDiv">
                    <img *ngIf="httpBody.dangerousChemicalLicenseImage" style="width: 100%;height: 100%;"
                      [src]="httpBody.dangerousChemicalLicenseImage" alt="">
                    <input *ngIf="!httpBody.dangerousChemicalLicenseImage"
                      (change)="filechange($event,'dangerousChemical')" class="fileinput" type="file" name="" id="">
                    <button *ngIf="!httpBody.dangerousChemicalLicenseImage" nz-button [nzLoading]="isLoadingTwo"><i
                        nz-icon nzType="upload" nzTheme="outline"></i>上传图片</button>
                  </div>
                  <div class="uploadDiv" *ngIf="httpBody.dangerousChemicalLicenseImage">
                    <input (change)="filechange($event,'dangerousChemical')" class="fileinput" type="file" name=""
                      id="">
                    <button nz-button [nzLoading]="isLoadingTwo"><i nz-icon nzType="upload"
                        nzTheme="outline"></i>重新上传</button>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td class="head">成品油零售<br>经营许可证</td>
              <td colspan="3" class="imgbox">
                <div class="uploadDivbox">
                  <div class="uploadDiv">
                    <img *ngIf="httpBody.gasSellLicenseImage" style="width: 100%;height: 100%;"
                      [src]="httpBody.gasSellLicenseImage" alt="">
                    <input *ngIf="!httpBody.gasSellLicenseImage" (change)="filechange($event,'retailOfRefinedOil')"
                      class="fileinput" type="file" name="" id="">
                    <button *ngIf="!httpBody.gasSellLicenseImage" nz-button [nzLoading]="isLoadingThree"><i nz-icon
                        nzType="upload" nzTheme="outline"></i>上传图片</button>
                  </div>
                  <div class="uploadDiv" *ngIf="httpBody.gasSellLicenseImage">
                    <input (change)="filechange($event,'retailOfRefinedOil')" class="fileinput" type="file" name=""
                      id="">
                    <button nz-button [nzLoading]="isLoadingThree"><i nz-icon nzType="upload"
                        nzTheme="outline"></i>重新上传</button>
                  </div>
                </div>
              </td>
            </tr>
          </table>
        </div>
        <div class="btnbox">
          <button  [nzLoading]="isLoadingSave" nz-button type="submit">保存</button>
          <button 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>