detail.component.html

<div class="mask" (click)="goBack()">
  <div class="container" (click)="$event.stopPropagation()">
    <div style="text-align: right;">
      <button nz-button nzType="primary" nzSize="large" nzShape="circle" (click)="confirm()" style="margin-right: 10px;">
        <i class="anticon anticon-check"></i>
      </button>
      <button nz-button nz-popconfirm nzPlacement="bottomRight" nzTitle="你真的要删除这条待办事项吗？" (nzOnConfirm)="delete()" nzType="danger"
        nzSize="large" nzShape="circle">
        <i class="anticon anticon-delete"></i>
      </button>
    </div>
    <label nz-checkbox (click)="$event.stopPropagation()" [(ngModel)]="currentTodo.completedFlag"></label>
    <span>标记完成</span>
    <nz-divider nzText="标签" nzOrientation="left"></nz-divider>
    <div class="input-container">
      <nz-tag
        *ngFor="let tagName of currentTodo.tags; let i = index"
        nzMode="closeable"
        (nzAfterClose)="handleTagClose(i)">{{ tagName }}</nz-tag>
      <nz-tag
        *ngIf="!addTagInputVisible"
        class="editable-tag"
        (click)="showAddTagInput()">
        <i class="anticon anticon-plus"></i> New Tag
      </nz-tag>
      <input
        *ngIf="addTagInputVisible"
        #tagNameInput
        style="width: 78px;"
        nz-input
        [(ngModel)]="newTagName"
        nzSize="small"
        (blur)="handleAddTagConfirm()"
        (keyup.enter)="handleAddTagConfirm()">
    </div>
    <nz-divider nzText="标题" nzOrientation="left"></nz-divider>
    <div class="input-container">
      <input nz-input [(ngModel)]="currentTodo.title" placeholder="待办事项" [disabled]="!!currentTodo.completedFlag" id="title" name="title">
    </div>
    <nz-divider nzText="日期与提醒" nzOrientation="left"></nz-divider>
    <div class="due-date-container input-container">
      <span class="prefix">截止日期</span>
      <nz-date-picker [(ngModel)]="dueDate" [disabled]="!!currentTodo.completedFlag" [nzDisabledDate]="dueDisabledDate" (ngModelChange)="handleDueDateChange($event)">
      </nz-date-picker>
    </div>
    <div class="plan-date-container input-container">
      <span class="prefix">计划日期</span>
      <nz-date-picker nzShowTime [(ngModel)]="planDate" [disabled]="!!currentTodo.completedFlag" [nzDisabledDate]="planDisabledDate"
        (ngModelChange)="handlePlanDateChange($event)">
      </nz-date-picker>
    </div>
    <div class="input-container">
      <span class="prefix">计划提醒</span>
      <nz-switch [(ngModel)]="currentTodo.notifyMe" [nzControl]="true" [nzDisabled]="!!currentTodo.completedFlag" (click)="clickSwitch()"></nz-switch>
    </div>
    <nz-divider nzText="更多" nzOrientation="left"></nz-divider>
    <div class="input-container">
      <textarea nz-input="" row="8" placeholder="待办详情" [disabled]="!!currentTodo.completedFlag" [(ngModel)]="currentTodo.desc"></textarea>
    </div>
  </div>
</div>