监控点 区域可选

xufenglei

2018-06-12 4d0fd6e3bb6c3dcd48763338255075e2662622e6

 src/app/routes/devices/monitor-point/monitor-point-edit/monitor-point-edit.component.html

@@ -1,3 +1,76 @@
<p>
  monitor-point-edit works!
</p>
<div class="modal-header">
  <div class="modal-title">{{ data.id != null ? '编辑' : '添加'}} - 监控站点</div>
</div>
<form [formGroup]="validateForm" (ngSubmit)="save($event,validateForm.value,validateForm.valid)" nz-form [nzType]="'horizontal'">
  <div nz-form-item nz-row class="mb-sm">
    <div nz-form-label nz-col [nzSm]="4" [nzXs]="24">
      <label nz-form-item-required>名称</label>
    </div>
    <div nz-form-control nz-col [nzSpan]="7" nzHasFeedback>
      <nz-input formControlName="name" maxlength="20" [nzPlaceHolder]="'监控站点名称'">
      </nz-input>
    </div>
    <div nz-form-label nz-col [nzSm]="4" [nzXs]="24">
      <label nz-form-item-required>组织</label>
    </div>
    <div nz-form-control nz-col [nzSpan]="6" nzHasFeedback>
      <nz-select formControlName="organizationId" [nzPlaceHolder]="'选择 组织(输入名称搜索)'"
       nzAllowClear [nzFilter]="false" nzShowSearch  (nzSearchChange)="OrgSelectChange($event)" [nzNotFoundContent]="'无法找到'" >
        <nz-option *ngFor="let option of orgOptions" [nzLabel]="option.name" [nzValue]="option.id" [nzDisabled]="option.disabled">
        </nz-option>
      </nz-select>
    </div>
  </div>
  <div nz-form-item nz-row class="mb-sm">
    <div nz-form-label nz-col [nzSm]="4" [nzXs]="24">
      <label nz-form-item-required>省/市/区</label>
    </div>
    <div nz-form-control nz-col [nzSpan]="7" nzHasFeedback>
      <nz-cascader [class.class123]="true" (nzChange)="setAreaCodes($event)" formControlName="_areas" (nzLoad)="areaLazyLoad($event)" [nzChangeOnSelect]="true"
      [nzPlaceHolder]="'选择 省/市/区'" >
      </nz-cascader>
    </div>
    <div nz-form-label nz-col [nzSm]="4" [nzXs]="24">
      <label>详细地址</label>
    </div>
    <div nz-form-control nz-col [nzSpan]="9" nzHasFeedback>
      <nz-input formControlName="address" maxlength="20" 
      [nzPlaceHolder]="'详细地址(例)：人民路120号'">
      </nz-input>
    </div>
  </div>
  <div nz-form-item nz-row class="mb-sm">
    <div nz-form-label nz-col [nzSm]="4" [nzXs]="24">
      <label>经度</label>
    </div>
    <div nz-form-control nz-col [nzSpan]="5" nzHasFeedback>
        <nz-input-number [ngStyle]="{'width': '100%' }" formControlName="longitude"  [nzMin]="-180" [nzMax]="180" [nzStep]="0.000001">
        </nz-input-number>
    </div>
    <div nz-form-control nz-col [nzSpan]="2" nzHasFeedback></div>
    <div nz-form-label nz-col [nzSm]="4" [nzXs]="24">
      <label>纬度</label>
    </div>
    <div nz-form-control nz-col [nzSpan]="5" nzHasFeedback>
          <nz-input-number [ngStyle]="{'width': '100%' }" formControlName="latitude" [nzMin]="-90" [nzMax]="90" [nzStep]="0.000001">
          </nz-input-number>
    </div>
  </div>
  <div nz-form-item nz-row class="mb-sm">
    <div nz-form-label nz-col [nzSm]="4" [nzXs]="24">
      <label>备注</label>
    </div>
    <div nz-form-control nz-col [nzSpan]="16" nzHasFeedback>
      <nz-input formControlName="description" maxlength="100"></nz-input>
    </div>
  </div>
  <div class="modal-footer">
    <button nz-button type="button" (click)="close()">关闭</button>
    <button nz-button [nzType]="'primary'" [nzLoading]="isSaving">
      <span>
        保存
        <span *ngIf="isSaving">中</span>
      </span>
    </button>
  </div>
</form>