Skip to content

Commit

Permalink
feat(列表模块): basic-list组件 完善组件内容
Browse files Browse the repository at this point in the history
  • Loading branch information
@jiayisheji
jiayisheji committed Mar 2, 2018
1 parent 97aa90b commit 78f3d45
Show file tree
Hide file tree
Showing 3 changed files with 338 additions and 31 deletions.
111 changes: 83 additions & 28 deletions src/app/feature/list/basic-list/basic-list.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,90 @@
<div class="page-header">
<sim-breadcrumb></sim-breadcrumb>
<div>
<h2>标准列表</h2>
</div>
</div>
<app-page-header></app-page-header>
<div class="page-content">
<sim-card>
<sim-card-content>
<div>
<sim-card class="m-task">
<sim-card-content fxLayout="row" fxLayoutAlign="space-between center">
<div fxFlex="33.33%">
<span>我的待办</span>
<p>8个任务</p>
</div>
<div fxFlex="33.33%">
<span>本周任务平均处理时间</span>
<p>32分钟</p>
</div>
<div fxFlex="33.33%">
<span>本周完成任务数</span>
<p>24个任务</p>
</div>
</sim-card-content>
</sim-card>
<sim-card sim-card-paddings style="margin-top: 24px;">
<sim-card-header>
<div class="card-header-title">
标准列表
</div>
<div class="card-header-extra">

</div>
</div>
</sim-card-header>
<sim-card-content>
<button type="button" sim-button [color]="'primary'" [shape]="'dashed'" style="width: 100%; margin-bottom: 8px;">
<i class="icon-plus"></i>
<span>添加</span>
</button>
<sim-list [dataSource]="_list" [loading]="_loading" [split]="true">
<sim-list-item *ngFor="let item of _list" fxLayout="row" fxLayoutAlign="space-between center">
<sim-list-item-meta>
<ng-template #avatar>
<span sim-avatar [avatarSrc]="item.avatar" [avatarShapes]="'square'"></span>
</ng-template>
<ng-template #title>
<a href="https://ant.design">{{item.title}}</a>
</ng-template>
<ng-template #description>
{{item.subDescription}}
</ng-template>
</sim-list-item-meta>
<sim-list-item-content>
<div>

<span>Owner</span>
<p>{{item.owner}}</p>
</div>
<div>

<span>开始时间</span>
<p>{{item.createdAt | date : 'yyyy-MM-dd hh:mm'}}</p>
</div>
</sim-card-content>
</sim-card>
<sim-card sim-card-paddings style="margin-top: 24px;">
<sim-card-header>
<div class="card-header-title">
标准列表
</div>
<div class="card-header-extra">

<div>
<div class="sim-progress">
<div>
<div class="ant-progress-outer">
<div class="ant-progress-inner">
<div class="ant-progress-bg" style="width: 68%; height: 6px;"></div>
</div>
</div>
<span class="ant-progress-text">68%</span>
</div>
</div>
</div>
</sim-card-header>
<sim-card-content>
<button type="button" sim-button [color]="'primary'" [shape]="'dashed'" style="width: 100%; margin-bottom: 8px;"><i class="icon-plus"></i><span>添加</span></button>

</sim-card-content>
</sim-card>
</div>
</sim-list-item-content>
<sim-list-item-action fxFlex="130px">
<sim-action>
<a [routerLink]="[ '/basic-list', item.id ]">编辑</a>
</sim-action>
<sim-action>
<sim-dropdown>
<a class="ant-dropdown-link" sim-dropdown>
更多
<i class="icon-down"></i>
</a>
<ul sim-menu>
<li sim-menu-item>Clicking me will not close the menu.</li>
<li sim-menu-item>Clicking me will not close the menu also.</li>
<li sim-menu-item (click)="visible = false">Clicking me will close the menu</li>
</ul>
</sim-dropdown>
</sim-action>
</sim-list-item-action>
</sim-list-item>
</sim-list>
</sim-card-content>
</sim-card>
</div>
61 changes: 61 additions & 0 deletions src/app/feature/list/basic-list/basic-list.component.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
.m-task {
.sim-card-content {
padding: 24px 32px;
>div {
position: relative;
text-align: center;
span {
color: rgba(0, 0, 0, 0.45);
display: inline-block;
font-size: 14px;
line-height: 22px;
margin-bottom: 4px;
}
p {
color: rgba(0, 0, 0, 0.85);
font-size: 24px;
line-height: 32px;
}
&:not(:last-child):after {
content: "";
position: absolute;
right: 0;
top: 0;
height: 56px;
width: 1px;
background-color: #e8e8e8;
}
}
}
}

.list-item-meta-avatar {
margin-right: 16px;
}

.list-item-content {
font-size: 0;
>div {
color: rgba(0, 0, 0, 0.45);
display: inline-block;
font-size: 14px;
margin-left: 40px;
span {
line-height: 20px;
}
p {
margin-top: 4px;
margin-bottom: 0;
line-height: 22px;
}
.sim-progress {
position: relative;
top: -16px;
width: 188px;
}
}
}

.sim-list-item-action {
margin-left: 48px;
}
197 changes: 194 additions & 3 deletions src/app/feature/list/basic-list/basic-list.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,206 @@
import { Component, OnInit } from '@angular/core';

const basicList = [
{
id: 1,
owner: 'jiayi',
title: 'Angular',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png',
cover: 'https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png',
status: 'active',
percent: 80,
logo: 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png',
href: 'https://ant.design',
updatedAt: new Date(new Date().getTime() - (1000 * 60 * 60 * 2)),
createdAt: new Date(new Date().getTime() - (1000 * 60 * 60 * 2)),
subDescription: '那是一种内在的东西， 他们到达不了，也无法触及的',
description: '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。',
activeUser: Math.ceil(Math.random() * 100000) + 100000,
newUser: Math.ceil(Math.random() * 1000) + 1000,
star: Math.ceil(Math.random() * 100) + 100,
like: Math.ceil(Math.random() * 100) + 100,
message: Math.ceil(Math.random() * 10) + 10,
content: '段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。',
members: [
{
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png',
name: '曲丽丽',
},
{
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png',
name: '王昭君',
},
{
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png',
name: '董娜娜',
},
]
},
{
id: 2,
owner: 'jiayi',
title: 'Angular',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png',
cover: 'https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png',
status: 'active',
percent: 80,
logo: 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png',
href: 'https://ant.design',
updatedAt: new Date(new Date().getTime() - (1000 * 60 * 60 * 2)),
createdAt: new Date(new Date().getTime() - (1000 * 60 * 60 * 2)),
subDescription: '那是一种内在的东西， 他们到达不了，也无法触及的',
description: '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。',
activeUser: Math.ceil(Math.random() * 100000) + 100000,
newUser: Math.ceil(Math.random() * 1000) + 1000,
star: Math.ceil(Math.random() * 100) + 100,
like: Math.ceil(Math.random() * 100) + 100,
message: Math.ceil(Math.random() * 10) + 10,
content: '段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。',
members: [
{
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png',
name: '曲丽丽',
},
{
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png',
name: '王昭君',
},
{
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png',
name: '董娜娜',
},
]
},
{
id: 3,
owner: 'jiayi',
title: 'Angular',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png',
cover: 'https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png',
status: 'active',
percent: 80,
logo: 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png',
href: 'https://ant.design',
updatedAt: new Date(new Date().getTime() - (1000 * 60 * 60 * 2)),
createdAt: new Date(new Date().getTime() - (1000 * 60 * 60 * 2)),
subDescription: '那是一种内在的东西， 他们到达不了，也无法触及的',
description: '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。',
activeUser: Math.ceil(Math.random() * 100000) + 100000,
newUser: Math.ceil(Math.random() * 1000) + 1000,
star: Math.ceil(Math.random() * 100) + 100,
like: Math.ceil(Math.random() * 100) + 100,
message: Math.ceil(Math.random() * 10) + 10,
content: '段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。',
members: [
{
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png',
name: '曲丽丽',
},
{
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png',
name: '王昭君',
},
{
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png',
name: '董娜娜',
},
]
},
{
id: 4,
owner: 'jiayi',
title: 'Angular',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png',
cover: 'https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png',
status: 'active',
percent: 80,
logo: 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png',
href: 'https://ant.design',
updatedAt: new Date(new Date().getTime() - (1000 * 60 * 60 * 2)),
createdAt: new Date(new Date().getTime() - (1000 * 60 * 60 * 2)),
subDescription: '那是一种内在的东西， 他们到达不了，也无法触及的',
description: '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。',
activeUser: Math.ceil(Math.random() * 100000) + 100000,
newUser: Math.ceil(Math.random() * 1000) + 1000,
star: Math.ceil(Math.random() * 100) + 100,
like: Math.ceil(Math.random() * 100) + 100,
message: Math.ceil(Math.random() * 10) + 10,
content: '段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。',
members: [
{
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png',
name: '曲丽丽',
},
{
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png',
name: '王昭君',
},
{
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png',
name: '董娜娜',
},
]
},
{
id: 5,
owner: 'jiayi',
title: 'Angular',
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png',
cover: 'https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png',
status: 'active',
percent: 80,
logo: 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png',
href: 'https://ant.design',
updatedAt: new Date(new Date().getTime() - (1000 * 60 * 60 * 2)),
createdAt: new Date(new Date().getTime() - (1000 * 60 * 60 * 2)),
subDescription: '那是一种内在的东西， 他们到达不了，也无法触及的',
description: '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。',
activeUser: Math.ceil(Math.random() * 100000) + 100000,
newUser: Math.ceil(Math.random() * 1000) + 1000,
star: Math.ceil(Math.random() * 100) + 100,
like: Math.ceil(Math.random() * 100) + 100,
message: Math.ceil(Math.random() * 10) + 10,
content: '段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。',
members: [
{
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png',
name: '曲丽丽',
},
{
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png',
name: '王昭君',
},
{
avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png',
name: '董娜娜',
},
]
}
];
@Component({
selector: 'app-basic-list',
templateUrl: './basic-list.component.html',
styleUrls: ['./basic-list.component.scss']
})
export class BasicListComponent implements OnInit {

constructor() { }
_list = [];
_loading: boolean;
constructor() {
this._loading = true;
}

ngOnInit() {
setTimeout(() => {
this._list = basicList;
this._loading = false;
}, 1000);
}

itemAction(type, item) {
console.log('itemAction', type, item);
}


test(item) {
console.log('wosho ', item);
}
}

0 comments on commit 78f3d45

Please sign in to comment.