Skip to content

Commit

Permalink
add list basic-list and card-list
Browse files Browse the repository at this point in the history
  • Loading branch information
@llkui
llkui committed Nov 19, 2020
1 parent 2aca3ac commit ffe6c09
Show file tree
Hide file tree
Showing 10 changed files with 584 additions and 4 deletions.
12 changes: 10 additions & 2 deletions src/app/admin/admin.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,8 +64,16 @@
<span>查询表格</span>
</a>
</li>
<li nz-menu-item>标准列表</li>
<li nz-menu-item>卡片列表</li>
<li nz-menu-item routerLinkActive="ant-menu-item-selected">
<a [routerLink]="'/list/basic-list'">
<span>标准列表</span>
</a>
</li>
<li nz-menu-item routerLinkActive="ant-menu-item-selected">
<a [routerLink]="'/list/card-list'">
<span>卡片列表</span>
</a>
</li>
</ul>
</li>
<li nz-menu-item>
Expand Down
1 change: 1 addition & 0 deletions src/app/admin/changelog/changelog.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
<nz-timeline-item>2020-11-13 add page list search-projects</nz-timeline-item>
<nz-timeline-item>2020-11-14 add page list search-articles and search-applications</nz-timeline-item>
<nz-timeline-item>2020-11-18 add page list table-list</nz-timeline-item>
<nz-timeline-item>2020-11-19 add page list basic-list and card-list</nz-timeline-item>
</nz-timeline>
</nz-card>
</div>
141 changes: 141 additions & 0 deletions src/app/admin/list/basic-list.component.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,141 @@
<nz-page-header class="site-page-header" nzTitle="标准列表" nzCotent>
<nz-breadcrumb nz-page-header-breadcrumb>
<nz-breadcrumb-item>
<a [routerLink]="'/home'">首页</a>
</nz-breadcrumb-item>
<nz-breadcrumb-item>列表页</nz-breadcrumb-item>
<nz-breadcrumb-item>标准列表</nz-breadcrumb-item>
</nz-breadcrumb>
</nz-page-header>
<div class="content-section">
<nz-card>
<div nz-row>
<div nz-col [nzXs]="24" [nzSm]="8" class="headerInfo">
<span>我的待办</span>
<p>8个任务</p>
<em></em>
</div>
<div nz-col [nzXs]="24" [nzSm]="8" class="headerInfo">
<span>本周任务平均处理时间</span>
<p>32分钟</p>
<em></em>
</div>
<div nz-col [nzXs]="24" [nzSm]="8" class="headerInfo">
<span>本周完成任务数</span>
<p>24个任务</p>
<em></em>
</div>
</div>
</nz-card>
<nz-card [nzTitle]="'基本列表'" [nzExtra]="extraTpl" class="mt20">
<ng-template #extraTpl>
<nz-radio-group [(ngModel)]="status" class="mr10">
<label nz-radio-button nzValue="all">全部</label>
<label nz-radio-button nzValue="ongoing">进行中</label>
<label nz-radio-button nzValue="stay">等待中</label>
</nz-radio-group>
<nz-input-group nzSearch [nzAddOnAfter]="suffixIconButton">
<input type="text" nz-input placeholder="请输入" />
</nz-input-group>
<ng-template #suffixIconButton>
<button nz-button nzSearch><i nz-icon nzType="search"></i></button>
</ng-template>
</ng-template>
<button (click)="add()" nz-button nzType="dashed" nzBlock>
<i nz-icon nzType="plus" nzTheme="outline"></i>
<span>添加</span>
</button>
<nz-list class="demo-loadmore-list" [nzLoading]="isSpinning">
<nz-list-item *ngFor="let item of list">
<nz-list-item-meta>
<nz-list-item-meta-avatar [nzSrc]="item.avatar"> </nz-list-item-meta-avatar>
<nz-list-item-meta-title>
<a>{{ item.name }}</a>
</nz-list-item-meta-title>
<nz-list-item-meta-description>
{{ item.desc }}
</nz-list-item-meta-description>
</nz-list-item-meta>
<div class="listContent">
<div class="listContentItem">
<div>Owner</div>
<div>{{item.owner}}</div>
</div>
<div class="listContentItem">
<div>开始时间</div>
<div>{{item.time}}</div>
</div>
<div class="listContentItem">
<nz-progress [nzPercent]="item.progress" [nzStatus]="item.progress_status"></nz-progress>
</div>
</div>
<ul nz-list-item-actions>
<nz-list-item-action>
<a (click)="edit(item)">编辑</a>
</nz-list-item-action>
<nz-list-item-action>
<a nz-dropdown [nzDropdownMenu]="menu">
更多<i nz-icon nzType="down" nzTheme="outline"></i>
</a>
<nz-dropdown-menu #menu="nzDropdownMenu">
<ul nz-menu>
<li nz-menu-item (click)="edit(item)">编辑</li>
<li nz-menu-item (click)="deleteItem()">删除</li>
</ul>
</nz-dropdown-menu>
</nz-list-item-action>
</ul>
</nz-list-item>
<nz-list-pagination>
<nz-pagination [nzPageIndex]="1" [nzPageSize]="5" [nzTotal]="50" nzShowQuickJumper nzShowSizeChanger>
</nz-pagination>
</nz-list-pagination>
</nz-list>
</nz-card>
</div>
<nz-modal [(nzVisible)]="isVisible" nzTitle="任务添加" [nzWidth]="640" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()"
[nzOkText]="'保存'">
<form nz-form [formGroup]="validateForm">
<nz-form-item>
<nz-form-label [nzSpan]="7" nzFor="name" nzRequired>任务名称</nz-form-label>
<nz-form-control [nzSpan]="13" [nzErrorTip]="'请输入任务名称'">
<input nz-input id="name" formControlName="name" placeholder="请输入">
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="7" nzFor="time" nzRequired>开始时间</nz-form-label>
<nz-form-control [nzSpan]="13" [nzErrorTip]="'请选择开始时间'">
<nz-date-picker nzShowTime nzFormat="yyyy-MM-dd HH:mm:ss" formControlName="time" [nzPlaceHolder]="'请选择'"
class="w100">
</nz-date-picker>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="7" nzFor="user" nzRequired>任务负责人</nz-form-label>
<nz-form-control [nzSpan]="13" [nzErrorTip]="'请选择任务负责人'">
<nz-select formControlName="user" [nzPlaceHolder]="'请选择'">
<nz-option nzValue="1" nzLabel="付小小"></nz-option>
<nz-option nzValue="2" nzLabel="曲丽丽"></nz-option>
<nz-option nzValue="3" nzLabel="林东东"></nz-option>
<nz-option nzValue="4" nzLabel="周星星"></nz-option>
<nz-option nzValue="5" nzLabel="吴加好"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="7" nzFor="desc">产品描述</nz-form-label>
<nz-form-control [nzSpan]="13" [nzErrorTip]="'请输入至少五个字符的产品描述！'">
<textarea nz-input id="desc" rows="3" formControlName="desc" placeholder="请输入至少五个字符"></textarea>
</nz-form-control>
</nz-form-item>
</form>
</nz-modal>

<nz-modal [(nzVisible)]="isVisibleResult" [nzTitle]="null" [nzWidth]="640" [nzFooter]="null"
(nzOnCancel)="cancelResult()">
<nz-result nzStatus="success" nzTitle="操作成功" nzSubTitle="一系列的信息描述，很短同样也可以带标点。">
<div nz-result-extra>
<button (click)="okResult()" nz-button nzType="primary">知道了</button>
</div>
</nz-result>
</nz-modal>
49 changes: 49 additions & 0 deletions src/app/admin/list/basic-list.component.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
:host ::ng-deep {
.ant-input-group-wrapper {
width: inherit;
}

.listContentItem {
display: inline-block;
margin-left: 40px;
color: rgba(0, 0, 0, .45);
font-size: 14px;
vertical-align: middle;
}

.ant-progress {
width: 180px;
}

.ant-avatar {
width: 48px;
height: 48px;
border-radius: 0;
}
}

.headerInfo {
position: relative;
text-align: center;

span {
margin-bottom: 4px;
color: rgba(0, 0, 0, .45);
}

p {
font-size: 24px;
line-height: 32px;
color: rgba(0, 0, 0, .85);
margin: 0;
}

em {
position: absolute;
top: 0;
right: 0;
width: 1px;
height: 56px;
background-color: #f0f0f0;
}
}
155 changes: 155 additions & 0 deletions src/app/admin/list/basic-list.component.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,155 @@
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

import { NzModalService, NzModalRef } from 'ng-zorro-antd/modal';

@Component({
selector: 'app-list-basic',
templateUrl: './basic-list.component.html',
styleUrls: ['./basic-list.component.scss']
})

export class BasicListComponent implements OnInit {
status = 'all';
list = [];
isSpinning = false;
isVisible = false;
validateForm: FormGroup;
confirmModal?: NzModalRef;
isVisibleResult = false;

constructor(
private fb: FormBuilder,
private modal: NzModalService
) {
this.validateForm = this.fb.group({
name: ['', [Validators.required]],
time: [null, [Validators.required]],
user: [null, [Validators.required]],
desc: ['', [Validators.minLength(5)]],
});
}

ngOnInit() {
this.search();
}

search() {
this.isSpinning = true;
setTimeout(() => {
this.list = [
{
id: 1,
name: 'Alipay',
desc: '那是一种内在的东西， 他们到达不了，也无法触及的',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
owner: '付小小',
owner_id: '1',
time: '2020-11-18 15:12',
progress: '75',
progress_status: 'active'
},
{
id: 2,
name: 'Angular',
desc: '希望是一个好东西，也许是最好的，好东西是不会消亡的',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png',
owner: '曲丽丽',
owner_id: '2',
time: '2020-11-19 07:51',
progress: '93',
progress_status: 'exception'
},
{
id: 3,
name: 'Ant Design',
desc: '生命就像一盒巧克力，结果往往出人意料',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png',
owner: '林东东',
owner_id: '3',
time: '2020-11-19 05:51',
progress: '94',
progress_status: 'active'
},
{
id: 4,
name: 'Ant Design Pro',
desc: '城镇中有那么多的酒馆，她却偏偏走进了我的酒馆',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png',
owner: '周星星',
owner_id: '4',
time: '2020-11-19 03:51',
progress: '93',
progress_status: 'active'
},
{
id: 5,
name: 'Bootstrap',
desc: '那时候我只会想自己想要什么，从不想自己拥有什么',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png',
owner: '吴加好',
owner_id: '5',
time: '2020-11-19 01:51',
progress: '91',
progress_status: 'exception'
},
];
this.isSpinning = false;
}, 1000);
}

add() {
this.isVisible = true;
}

edit(item) {
this.validateForm.controls.name.reset(item.name);
this.validateForm.controls.time.reset(new Date(item.time));
this.validateForm.controls.user.reset(item.owner_id);
this.validateForm.controls.desc.reset(item.desc);
this.isVisible = true;
}

deleteItem() {
this.confirmModal = this.modal.confirm({
nzTitle: '删除任务',
nzContent: '确定删除该任务吗？',
nzOnOk: () => {
this.search();
}
});
}

handleCancel() {
this.validateForm.controls.name.reset('');
this.validateForm.controls.time.reset(null);
this.validateForm.controls.user.reset(null);
this.validateForm.controls.desc.reset('');
this.isVisible = false;
}

handleOk() {
for (const i in this.validateForm.controls) {
if (i) {
this.validateForm.controls[i].markAsDirty();
this.validateForm.controls[i].updateValueAndValidity();
}
}
if (this.validateForm.invalid) {
return;
}
this.isVisible = false;
this.isVisibleResult = true;
this.search();
}

cancelResult() {
this.isVisibleResult = false;
this.handleCancel();
}

okResult() {
this.isVisibleResult = false;
this.handleCancel();
}
}
Loading

0 comments on commit ffe6c09

Please sign in to comment.