event.component.html

<!--新增事件-->
<nz-modal [nzWidth]="1080" [(nzVisible)]="isVisiable" [nzTitle]="title" (nzOnCancel)="handleEditCancel()"
          (nzOnOk)="handEditleOk()">
    <form nz-form [formGroup]="validateForm">
        <div class="ant-advanced-search-form form-select">
            <div nz-row [nzGutter]="24">
                <div nz-col [nzSpan]="12">
                    <nz-form-item nzFlex>
                        <nz-form-label [nzOffset]="4" [nzSpan]="6" nzRequired nzFor="title">事件标题</nz-form-label>
                        <nz-form-control [nzSpan]="14">
                            <input id="title" nz-input placeholder="事件标题" name="title" formControlName="title">
                            <nz-form-explain *ngIf="validateForm.get('title').dirty && validateForm.get('title').errors">最多输入20个字</nz-form-explain>
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col [nzSpan]="12">
                    <nz-form-item nzFlex>
                        <nz-form-label [nzSpan]="6" nzRequired nzFor="type">事件分类
                        </nz-form-label>
                        <nz-form-control [nzSpan]="14">
                            <nz-select name="type" nzPlaceHolder="选择事件分类" formControlName="type">
                                <ng-container *ngFor="let item of eventTypeList">
                                    <nz-option [nzLabel]="item.name" [nzValue]="item.id"></nz-option>
                                </ng-container>
                            </nz-select>
                            <nz-form-explain *ngIf="validateForm.get('type').dirty && validateForm.get('type').errors">请选择事件分类</nz-form-explain>

                        </nz-form-control>
                    </nz-form-item>
                </div>
            </div>
        </div>

        <div nz-row [nzGutter]="24">
            <div nz-col [nzSpan]="12">
                <nz-form-item nzFlex>
                    <nz-form-label [nzOffset]="4" [nzSpan]="6" nzRequired nzFor="requester">请求人</nz-form-label>
                    <nz-form-control [nzSpan]="14">
                        <input id="requester" nz-input placeholder="请求人" name="requester" formControlName="requester">
                        <nz-form-explain *ngIf="validateForm.get('requester').dirty && validateForm.get('requester').errors">最多输入10个字</nz-form-explain>

                    </nz-form-control>
                </nz-form-item>
            </div>

            <div nz-col [nzSpan]="12">
                <nz-form-item nzFlex>
                    <nz-form-label [nzSpan]="6" nzRequired nzFor="requesterPhone">联系电话
                    </nz-form-label>
                    <nz-form-control [nzSpan]="14">
                        <input id="requesterPhone" nz-input placeholder="联系电话" name="requesterPhone" formControlName="requesterPhone">
                        <nz-form-explain *ngIf="validateForm.get('requesterPhone').dirty && validateForm.get('requesterPhone').errors">请输入13位联系电话</nz-form-explain>

                    </nz-form-control>
                </nz-form-item>
            </div>
        </div>

        <div nz-row [nzGutter]="24">
            <div nz-col [nzSpan]="12">
                <nz-form-item nzFlex>
                    <nz-form-label [nzOffset]="4" [nzSpan]="6" nzRequired>处理人</nz-form-label>
                    <nz-form-control [nzSpan]="14">
                        <button (click)="selectPerson()" nz-button><span>选择</span></button>
                        <ng-container *ngFor="let item of operatorsList;let i = index;">
                            <span style="margin-right: 10px">
                                 <span>{{item.username}}</span><span class="main-color" (click)="deletePerson(i)">X</span>
                            </span>
                        </ng-container>
                    </nz-form-control>
                </nz-form-item>
            </div>
            <div nz-col [nzSpan]="12">
                <nz-form-item>
                    <nz-form-label [nzSpan]="6" nzFor="description">详细描述</nz-form-label>
                    <nz-form-control [nzSpan]="14">
                        <textarea nz-input id="description" name="description" formControlName="description" placeholder="详细描述" [nzAutosize]="{ minRows: 2, maxRows: 6 }"></textarea>
                    </nz-form-control>
                </nz-form-item>
            </div>
        </div>

        <div nz-row [nzGutter]="24">
            <div nz-col [nzSpan]="12">
                <nz-form-item>
                    <nz-form-label [nzOffset]="4" [nzSpan]="6">附件</nz-form-label>
                    <nz-form-control [nzSpan]="14">
                        <nz-upload [nzBeforeUpload]="beforeUpload" [(nzFileList)]="fileList">
                            <button nz-button>
                                <i class="anticon anticon-upload"></i><span>上传</span>
                            </button>
                        </nz-upload>
                    </nz-form-control>
                </nz-form-item>
            </div>
        </div>
    </form>
</nz-modal>

<!--选择人员-->
<smart-select-person #smartSelectPerson (done)="getUser($event)"></smart-select-person>