123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113 |
- <ion-header class="ion-no-border">
- <ion-toolbar color="light">
- <ion-buttons slot="start">
- <ion-button (click)="cancel()">
- <ion-icon name="close" slot="icon-only"></ion-icon>
- </ion-button>
- </ion-buttons>
- <ion-title class="ion-text-center">新建任务</ion-title>
- <ion-buttons slot="end">
- <ion-button (click)="confirm()" [strong]="true" color="primary">
- 保存
- </ion-button>
- </ion-buttons>
- </ion-toolbar>
- </ion-header>
- <ion-content class="ion-padding-horizontal">
- <ion-list lines="none">
- <!-- 任务名称 -->
- <ion-item fill="outline" class="ion-margin-vertical">
- <ion-label position="stacked">任务名称</ion-label>
- <ion-input
- [(ngModel)]="task.title"
- placeholder="请输入任务名称"
- clearOnEdit
- ></ion-input>
- </ion-item>
- <!-- 任务标签 -->
- <ion-item fill="outline" class="ion-margin-vertical">
- <ion-label position="stacked">任务标签</ion-label>
- <ion-input
- [(ngModel)]="newTag"
- placeholder="输入标签后按回车"
- (keyup.enter)="addTag()"
- ></ion-input>
- <ion-button
- slot="end"
- fill="clear"
- (click)="addTag()"
- [disabled]="!newTag"
- >
- <ion-icon name="add" slot="icon-only"></ion-icon>
- </ion-button>
- </ion-item>
- <!-- 标签展示 -->
- <div class="tags-container ion-margin-bottom">
- <ion-chip
- *ngFor="let tag of task.tags; let i = index"
- color="medium"
- outline
- >
- {{ tag }}
- <ion-icon name="close" (click)="removeTag(i)"></ion-icon>
- </ion-chip>
- </div>
- <!-- 截止时间 -->
- <ion-item
- fill="outline"
- class="ion-margin-vertical"
- button
- detail="false"
- (click)="openDateTimePicker()"
- >
- <ion-label>截止时间</ion-label>
- <ion-text slot="end">{{ task.dueDate | date: 'MM月dd日 HH:mm' }}</ion-text>
- </ion-item>
- <!-- 日期选择器 -->
- <!-- 子任务 -->
- <div class="subtask-section ion-margin-vertical">
- <ion-item lines="none">
- <ion-label>子任务列表</ion-label>
- <ion-button fill="clear" (click)="addSubtask()">
- <ion-icon name="add-circle" slot="start"></ion-icon>
- 添加子任务
- </ion-button>
- </ion-item>
- <ion-list class="subtask-list">
- <ion-item *ngFor="let subtask of task.subtasks; let i = index">
- <ion-input
- [(ngModel)]="task.subtasks[i]"
- placeholder="子任务描述"
- clearOnEdit
- ></ion-input>
- <ion-button
- fill="clear"
- color="danger"
- (click)="removeSubtask(i)"
- >
- <ion-icon name="trash" slot="icon-only"></ion-icon>
- </ion-button>
- </ion-item>
- </ion-list>
- </div>
- <!-- 备注 -->
- <ion-item fill="outline" class="ion-margin-vertical">
- <ion-label position="stacked">任务备注</ion-label>
- <ion-textarea
- [(ngModel)]="task.note"
- placeholder="请输入任务备注(可选)"
- autoGrow
- rows="3"
- ></ion-textarea>
- </ion-item>
- </ion-list>
- </ion-content>
|