工业级招标演示
blame | history | patch | commit | commitdiff | ignore whitespace
fengxiang
2018-07-11 12b04f145bae740e1971036b1e2dfc1bc224d17b 
 src/app/routes/pro/form/advanced-form/advanced-form.component.html


New file


@@ -0,0 +1,218 @@


<page-header [title]="'高级表单'">


  高级表单常见于一次性输入和提交大批量数据的场景。（示例采用响应式表单，也可使用模板驱动方式）


</page-header>


<form nz-form [formGroup]="form" (ngSubmit)="_submitForm()" [nzLayout]="'vertical'">


  <nz-card [nzBordered]="false" nzTitle="仓库管理">


    <nz-row nzGutter="16">


      <nz-col nzLg="6" nzMd="12" nzSm="24">


        <nz-form-item>


          <nz-form-label nzFor="name">仓库名</nz-form-label>


          <nz-form-control>


            <input nz-input formControlName="name" id="name" placeholder="请输入仓库名称">


            <nz-form-explain *ngIf="(name.dirty || name.touched) && name.errors?.required">


              请输入仓库名称


            </nz-form-explain>


          </nz-form-control>


        </nz-form-item>


      </nz-col>


      <nz-col [nzXl]="{span:6, offset:2}" [nzLg]="{span:8}" [nzMd]="{span:12}" nzSm="24">


        <nz-form-item>


          <nz-form-label>仓库域名</nz-form-label>


          <nz-form-control>


            <nz-input-group nzAddOnBefore="http://" nzAddOnAfter=".com">


              <input nz-input formControlName="url" placeholder="请输入">


            </nz-input-group>


            <nz-form-explain *ngIf="(url.dirty || url.touched) && url.errors?.required">


              请输入仓库域名


            </nz-form-explain>


          </nz-form-control>


        </nz-form-item>


      </nz-col>


      <nz-col [nzXl]="{span:8, offset:2}" [nzLg]="{span:10}" [nzMd]="{span:24}" nzSm="24">


        <nz-form-item>


          <nz-form-label>仓库管理员</nz-form-label>


          <nz-form-control>


            <nz-select formControlName="owner" [nzPlaceHolder]="'请选择管理员'" [nzShowSearch]="true">


              <nz-option *ngFor="let i of users" [nzLabel]="i.label" [nzValue]="i.value"></nz-option>


            </nz-select>


            <nz-form-explain *ngIf="(owner.dirty || owner.touched) && owner.errors?.required">


              请选择管理员


            </nz-form-explain>


          </nz-form-control>


        </nz-form-item>


      </nz-col>


    </nz-row>


    <nz-row nzGutter="16">


      <nz-col nzLg="6" nzMd="12" nzSm="24">


        <nz-form-item>


          <nz-form-label>审批员</nz-form-label>


          <nz-form-control>


            <nz-select formControlName="approver" [nzPlaceHolder]="'请选择管理员'" [nzShowSearch]="true">


              <nz-option *ngFor="let i of users" [nzLabel]="i.label" [nzValue]="i.value">


              </nz-option>


            </nz-select>


            <nz-form-explain *ngIf="(approver.dirty || approver.touched) && approver.errors?.required">


              请选择审批员


            </nz-form-explain>


          </nz-form-control>


        </nz-form-item>


      </nz-col>


      <nz-col [nzXl]="{span:6, offset:2}" [nzLg]="{span:8}" [nzMd]="{span:12}" nzSm="24">


        <nz-form-item>


          <nz-form-label>生效日期</nz-form-label>


          <nz-form-control>


            <nz-range-picker formControlName="date_range" [nzStyle]="{width: '100%'}"></nz-range-picker>


          </nz-form-control>


        </nz-form-item>


      </nz-col>


      <nz-col [nzXl]="{span:8, offset:2}" [nzLg]="{span:10}" [nzMd]="{span:24}" nzSm="24">


        <nz-form-item>


          <nz-form-label>仓库类型</nz-form-label>


          <nz-form-control>


            <nz-select formControlName="type" [nzShowSearch]="true" [nzPlaceHolder]="'请选择仓库类型'">


              <nz-option [nzLabel]="'私密'" [nzValue]="'private'"></nz-option>


              <nz-option [nzLabel]="'公开'" [nzValue]="'public'"></nz-option>


            </nz-select>


            <nz-form-explain *ngIf="(type.dirty || type.touched) && type.errors?.required">


              请选择仓库类型


            </nz-form-explain>


          </nz-form-control>


        </nz-form-item>


      </nz-col>


    </nz-row>


  </nz-card>


  <nz-card [nzBordered]="false" nzTitle="任务管理">


    <nz-row nzGutter="16">


      <nz-col nzLg="6" nzMd="12" nzSm="24">


        <nz-form-item>


          <nz-form-label>任务名</nz-form-label>


          <nz-form-control>


            <input nz-input formControlName="name2" placeholder="请输入任务名">


            <nz-form-explain *ngIf="(name2.dirty || name2.touched) && name2.errors?.required">


              请输入任务名


            </nz-form-explain>


          </nz-form-control>


        </nz-form-item>


      </nz-col>


      <nz-col [nzXl]="{span:6, offset:2}" [nzLg]="{span:8}" [nzMd]="{span:12}" nzSm="24">


        <nz-form-item>


          <nz-form-label>任务描述</nz-form-label>


          <nz-form-control>


            <textarea nz-input formControlName="summary" [nzAutosize]="true" placeholder="请输入任务描述"></textarea>


            <nz-form-explain *ngIf="(summary.dirty || summary.touched) && summary.errors?.required">


              请输入任务描述


            </nz-form-explain>


          </nz-form-control>


        </nz-form-item>


      </nz-col>


      <nz-col [nzXl]="{span:8, offset:2}" [nzLg]="{span:10}" [nzMd]="{span:24}" nzSm="24">


        <nz-form-item>


          <nz-form-label>执行人</nz-form-label>


          <nz-form-control>


            <nz-select formControlName="owner2" [nzPlaceHolder]="'请选择执行人'" [nzShowSearch]="true">


              <nz-option *ngFor="let i of users" [nzLabel]="i.label" [nzValue]="i.value">


              </nz-option>


            </nz-select>


            <nz-form-explain *ngIf="(owner2.dirty || owner2.touched) && owner2.errors?.required">


              请选择执行人


            </nz-form-explain>


          </nz-form-control>


        </nz-form-item>


      </nz-col>


    </nz-row>


    <nz-row nzGutter="16">


      <nz-col nzLg="6" nzMd="12" nzSm="24">


        <nz-form-item>


          <nz-form-label>责任人</nz-form-label>


          <nz-form-control>


            <nz-select formControlName="approver2" [nzPlaceHolder]="'请选择责任人'" [nzShowSearch]="true">


              <nz-option *ngFor="let i of users" [nzLabel]="i.label" [nzValue]="i.value"></nz-option>


            </nz-select>


            <nz-form-explain *ngIf="(approver2.dirty || approver2.touched) && approver2.errors?.required">


              请选择责任人


            </nz-form-explain>


          </nz-form-control>


        </nz-form-item>


      </nz-col>


      <nz-col [nzXl]="{span:6, offset:2}" [nzLg]="{span:8}" [nzMd]="{span:12}" nzSm="24">


        <nz-form-item>


          <nz-form-label>生效时间</nz-form-label>


          <nz-form-control>


            <nz-time-picker formControlName="time"></nz-time-picker>


          </nz-form-control>


        </nz-form-item>


      </nz-col>


      <nz-col [nzXl]="{span:8, offset:2}" [nzLg]="{span:10}" [nzMd]="{span:24}" nzSm="24">


        <nz-form-item>


          <nz-form-label>任务类型</nz-form-label>


          <nz-form-control>


            <nz-select formControlName="type2" [nzShowSearch]="true" [nzPlaceHolder]="'请选择任务类型'">


              <nz-option [nzLabel]="'私密'" [nzValue]="'private'"></nz-option>


              <nz-option [nzLabel]="'公开'" [nzValue]="'public'"></nz-option>


            </nz-select>


            <nz-form-explain *ngIf="(type2.dirty || type2.touched) && type2.errors?.required">


              请选择任务类型


            </nz-form-explain>


          </nz-form-control>


        </nz-form-item>


      </nz-col>


    </nz-row>


  </nz-card>


  <nz-card [nzBordered]="false" nzTitle="成员管理">


    <nz-table formArrayName="items" [nzData]="items.value" [nzShowPagination]="false">


      <thead>


        <tr>


          <th>成员姓名</th>


          <th>工号</th>


          <th>所属部门</th>


          <th>操作</th>


        </tr>


      </thead>


      <tbody>


        <tr *ngFor="let item of items.controls; let i = index" [formGroupName]="i">


          <td>


            <span *ngIf="editIndex!==i">{{items.value[i].name}}</span>


            <span *ngIf="editIndex===i" nz-form-control>


              <input nz-input formControlName="name" placeholder="请输入成员姓名">


            </span>


          </td>


          <td>


            <span *ngIf="editIndex!==i">{{items.value[i].workId}}</span>


            <span *ngIf="editIndex===i" nz-form-control>


              <input nz-input formControlName="workId" placeholder="请输入工号">


            </span>


          </td>


          <td>


            <span *ngIf="editIndex!==i">{{items.value[i].department}}</span>


            <span *ngIf="editIndex===i" nz-form-control>


              <input nz-input formControlName="department" placeholder="请输入所属部门">


            </span>


          </td>


          <td>


            <span *ngIf="editIndex!==i">


              <a (click)="edit(i)">编辑</a>


              <nz-divider nzType="vertical"></nz-divider>


              <nz-popconfirm (nzOnConfirm)="del(i)" [nzTitle]="'是否要删除此行？'">


                <a nz-popconfirm>删除</a>


              </nz-popconfirm>


            </span>


            <span *ngIf="editIndex===i">


              <a (click)="save(i)">保存</a>


              <nz-divider nzType="vertical"></nz-divider>


              <nz-popconfirm (nzOnConfirm)="cancel(i)" [nzTitle]="'是否要取消操作？'">


                <a nz-popconfirm>取消</a>


              </nz-popconfirm>


            </span>


          </td>


        </tr>


      </tbody>


    </nz-table>


    <button *ngIf="editIndex===-1" nz-button [nzType]="'dashed'" (click)="add()" class="ant-btn__block mt-md">


      <i class="anticon anticon-plus"></i>


      <span>新增成员</span>


    </button>


  </nz-card>


  <footer-toolbar errorCollect>


    <button nz-button type="primary" nzType="primary">提交</button>


  </footer-toolbar>


</form>