Skip to content

GitLab

P
pro-blocks
Commit 8e75fc92 authored by niko's avatar niko Committed by GitHub
Browse files
Options

Merge pull request #2 from ant-design/List_Dashboard-optimize-again 

修复二次List 和 Dashboard 的二次确认优化
parents 26910430 abca36bd
Hide whitespace changes
Inline Side-by-side
Showing with 151 additions and 78 deletions
src/components/Charts/index.less
View file @ 8e75fc92
.miniChart {
overflow: hidden;
position: relative;
width: 100%;
& > div {
......
src/routes/Dashboard/Analysis.less
View file @ 8e75fc92
......@@ -72,6 +72,9 @@
}
@media screen and (max-width: @screen-lg) {
.salesExtra {
display: none;
}
.rankingList {
li {
span:first-child {
......
src/routes/Dashboard/Monitor.js
View file @ 8e75fc92
......@@ -3,7 +3,6 @@ import { connect } from 'dva';
import { Row, Col, Card } from 'antd';
import numeral from 'numeral';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import { NumberInfo, MiniArea, Pie, WaterWave, Gauge } from '../../components/Charts';
import MapChart from '../../components/MapChart';
import TagCloud from '../../components/TagCloud';
......@@ -45,12 +44,10 @@ export default class Monitor extends PureComponent {
const { tags } = monitor;
return (
<PageHeaderLayout
title="大盘监控"
>
<div>
<Row gutter={24}>
<Col lg={16} md={24} sm={24} xs={24} style={{ marginBottom: 24 }}>
<Card title="活动实时交易情况">
<Card title="活动实时交易情况" bordered={false}>
<Row>
<Col sm={6} xs={12}>
<NumberInfo
......@@ -85,7 +82,7 @@ export default class Monitor extends PureComponent {
</Card>
</Col>
<Col lg={8} md={24} sm={24} xs={24}>
<Card title="活动情况预测" style={{ marginBottom: 24 }}>
<Card title="活动情况预测" style={{ marginBottom: 24 }} bordered={false}>
<div className={styles.activeChart}>
<NumberInfo
subTitle="目标评估"
......@@ -125,7 +122,12 @@ export default class Monitor extends PureComponent {
}
</div>
</Card>
<Card title="券核效率" style={{ marginBottom: 24 }} bodyStyle={{ textAlign: 'center' }}>
<Card
title="券核效率"
style={{ marginBottom: 24 }}
bodyStyle={{ textAlign: 'center' }}
bordered={false}
>
<Gauge
title="跳出率"
height={164}
......@@ -136,7 +138,11 @@ export default class Monitor extends PureComponent {
</Row>
<Row gutter={24}>
<Col sm={8} xs={24}>
<Card title="各品类占比" style={{ marginBottom: 24 }}>
<Card
title="各品类占比"
style={{ marginBottom: 24 }}
bordered={false}
>
<Row style={{ padding: '18px 0 19px 0' }}>
<Col span={8}>
<Pie
......@@ -168,7 +174,7 @@ export default class Monitor extends PureComponent {
</Card>
</Col>
<Col sm={8} xs={24} style={{ marginBottom: 24 }}>
<Card title="热门搜索">
<Card title="热门搜索" bordered={false}>
<TagCloud
data={tags}
height={161}
......@@ -176,7 +182,7 @@ export default class Monitor extends PureComponent {
</Card>
</Col>
<Col sm={8} xs={24} style={{ marginBottom: 24 }}>
<Card title="资源剩余" bodyStyle={{ textAlign: 'center' }}>
<Card title="资源剩余" bodyStyle={{ textAlign: 'center' }} bordered={false}>
<WaterWave
height={161}
title="补贴资金剩余"
......@@ -185,7 +191,7 @@ export default class Monitor extends PureComponent {
</Card>
</Col>
</Row>
</PageHeaderLayout>
</div>
);
}
}
src/routes/List/BasicList.js
View file @ 8e75fc92
......@@ -95,7 +95,7 @@ export default class BasicList extends PureComponent {
return (
<PageHeaderLayout>
<div className={styles.standardList}>
<Card>
<Card bordered={false}>
<Row>
<Col sm={8} xs={24}>
<Info title="我的代办" value="8个任务" bordered />
......@@ -110,6 +110,7 @@ export default class BasicList extends PureComponent {
</Card>
<Card
bordered={false}
title="基础列表"
style={{ marginTop: 16 }}
extra={extraContent}
......
src/routes/List/CardList.js
View file @ 8e75fc92
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Row, Col, Card, Avatar, Spin, Button, Icon } from 'antd';
import { Card, Avatar, Button, Icon, List } from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
......@@ -42,7 +42,7 @@ export default class CardList extends PureComponent {
const extraContent = (
<div className={styles.extraImg}>
<img alt="这是一个标题" src="https://gw.alipayobjects.com/zos/rmsportal/tTIFdlIcZFvvmCROhyBg.png" />
<img alt="这是一个标题" src="https://gw.alipayobjects.com/zos/rmsportal/QfpzdhbrqRtdSyZHKhjp.png" />
</div>
);
......@@ -53,37 +53,35 @@ export default class CardList extends PureComponent {
extraContent={extraContent}
>
<div className={styles.cardList}>
{
loading ?
<Spin />
:
<Row gutter={16}>
<Col lg={8} md={12} sm={12} xs={24} style={{ marginBottom: 16 }}>
<Button type="dashed" className={styles.newButton}>
<Icon type="plus" /> 新增产品
</Button>
</Col>
{
list && list.map(item => (
<Col lg={8} md={12} sm={12} xs={24} key={item.id} style={{ marginBottom: 16 }}>
<Card
actions={[<a>操作一</a>, <a>操作二</a>]}
>
<Card.Meta
avatar={<Avatar size="large" src={item.avatar} />}
title={item.title}
description={(
<p className={styles.cardDescription}>
<span>{item.description}</span>
</p>
)}
/>
</Card>
</Col>
))
}
</Row>
}
<List
loading={loading}
grid={{ gutter: 16, lg: 3, md: 2, sm: 1, xs: 1 }}
>
<List.Item>
<Button type="dashed" className={styles.newButton}>
<Icon type="plus" /> 新增产品
</Button>
</List.Item>
{
list && list.map(item => (
<List.Item key={item.id}>
<Card
actions={[<a>操作一</a>, <a>操作二</a>]}
>
<Card.Meta
avatar={<Avatar size="large" src={item.avatar} />}
title={item.title}
description={(
<p className={styles.cardDescription}>
<span>{item.description}</span>
</p>
)}
/>
</Card>
</List.Item>
))
}
</List>
</div>
</PageHeaderLayout>
);
......
src/routes/List/CardList.less
View file @ 8e75fc92
......@@ -12,6 +12,10 @@
.extraImg {
margin-top: -60px;
text-align: center;
width: 195px;
img {
width: 100%;
}
}
.newButton {
......
src/routes/List/CoverCardList.js
View file @ 8e75fc92
import React, { PureComponent } from 'react';
import moment from 'moment';
import { connect } from 'dva';
import { Row, Col, Form, Card, Select, Spin } from 'antd';
import { routerRedux } from 'dva/router';
import { Row, Col, Form, Card, Select, List } from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import StandardFormRow from '../../components/StandardFormRow';
......@@ -49,15 +50,35 @@ export default class CoverCardList extends PureComponent {
}, 0);
}
handleTabChange = (key) => {
const { dispatch } = this.props;
switch (key) {
case 'doc':
dispatch(routerRedux.push('/list/search'));
break;
case 'app':
dispatch(routerRedux.push('/list/filter-card-list'));
break;
case 'project':
dispatch(routerRedux.push('/list/cover-card-list'));
break;
default:
break;
}
}
render() {
const { list: { list = [], loading }, form } = this.props;
const { getFieldDecorator } = form;
const cardList = list ? (
<Row gutter={16} style={{ marginTop: 16 }}>
<List
loading={loading}
grid={{ gutter: 16, lg: 4, md: 3, sm: 2, xs: 1 }}
>
{
list.map(item => (
<Col lg={6} md={8} sm={12} xs={24} style={{ marginBottom: 16 }} key={item.id}>
<List.Item key={item.id}>
<Card
cover={<img alt={item.title} src={item.cover} />}
>
......@@ -82,15 +103,15 @@ export default class CoverCardList extends PureComponent {
</div>
</div>
</Card>
</Col>
</List.Item>
))
}
</Row>
</List>
) : null;
const tabList = [
{
key: 'docs',
key: 'doc',
tab: '文章',
},
{
......@@ -100,6 +121,7 @@ export default class CoverCardList extends PureComponent {
{
key: 'project',
tab: '项目',
default: true,
},
];
......@@ -121,9 +143,11 @@ export default class CoverCardList extends PureComponent {
title="带封面的卡片列表"
content={pageHeaderContent}
tabList={tabList}
onTabChange={this.handleTabChange}
>
<div className={styles.coverCardList}>
<Card
bordered={false}
noHovering
>
<Form
......@@ -188,17 +212,9 @@ export default class CoverCardList extends PureComponent {
</StandardFormRow>
</Form>
</Card>
{
loading && (list.length > 0) && <Spin>
{cardList}
</Spin>
}
{
loading && (list.length < 1) && <div style={{ marginTop: 16 }}><Spin /></div>
}
{
!loading && cardList
}
<div className={styles.cardList}>
{ cardList }
</div>
</div>
</PageHeaderLayout>
);
......
src/routes/List/CoverCardList.less
View file @ 8e75fc92
......@@ -21,4 +21,7 @@
flex: 0 1 auto;
}
}
.cardList {
margin-top: 24px;
}
}
src/routes/List/FilterCardList.js
View file @ 8e75fc92
import React, { PureComponent } from 'react';
import numeral from 'numeral';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import { Row, Col, Form, Card, Select, Spin, Icon, Avatar } from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
......@@ -60,22 +61,39 @@ export default class FilterCardList extends PureComponent {
}, 0);
}
handleTabChange = (key) => {
const { dispatch } = this.props;
switch (key) {
case 'doc':
dispatch(routerRedux.push('/list/search'));
break;
case 'app':
dispatch(routerRedux.push('/list/filter-card-list'));
break;
case 'project':
dispatch(routerRedux.push('/list/cover-card-list'));
break;
default:
break;
}
}
render() {
const { list: { list, loading }, form } = this.props;
const { getFieldDecorator } = form;
const tabList = [
{
key: 'docs',
key: 'doc',
tab: '文章',
},
{
key: 'apps',
key: 'app',
tab: '应用',
default: true,
},
{
key: 'projects',
key: 'project',
tab: '项目',
},
];
......@@ -112,10 +130,12 @@ export default class FilterCardList extends PureComponent {
title="带筛选卡片列表"
content={pageHeaderContent}
tabList={tabList}
onTabChange={this.handleTabChange}
>
<div className={styles.filterCardList}>
<Card
noHovering
bordered={false}
>
<Form
layout="inline"
......
src/routes/List/SearchList.js
View file @ 8e75fc92
import React, { Component } from 'react';
import moment from 'moment';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import { Form, Card, Select, List, Tag, Icon, Avatar, Row, Col } from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
......@@ -70,6 +71,23 @@ export default class SearchList extends Component {
});
}
handleTabChange = (key) => {
const { dispatch } = this.props;
switch (key) {
case 'docs':
dispatch(routerRedux.push('/list/search'));
break;
case 'app':
dispatch(routerRedux.push('/list/filter-card-list'));
break;
case 'project':
dispatch(routerRedux.push('/list/cover-card-list'));
break;
default:
break;
}
}
render() {
const { showLoadMore, loadingMore } = this.state;
const { form, list: { list } } = this.props;
......@@ -100,7 +118,7 @@ export default class SearchList extends Component {
const tabList = [
{
key: 'docs',
key: 'doc',
tab: '文章',
},
{
......@@ -148,9 +166,10 @@ export default class SearchList extends Component {
title="搜索列表"
content={pageHeaderContent}
tabList={tabList}
onTabChange={this.handleTabChange}
>
<div>
<Card noHovering>
<Card noHovering bordered={false}>
<Form layout="inline">
<StandardFormRow title="所属类目" block>
<FormItem>
......@@ -243,7 +262,7 @@ export default class SearchList extends Component {
</StandardFormRow>
</Form>
</Card>
<Card style={{ marginTop: 16 }}>
<Card style={{ marginTop: 16 }} bordered={false}>
<List
loadingMore={loadingMore}
showLoadMore={(list.length > 0) && showLoadMore}
......
src/routes/List/TableList.js
View file @ 8e75fc92
......@@ -164,15 +164,13 @@ export default class TableList extends PureComponent {
const menu = (
<Menu onClick={this.handleMenuClick} selectedKeys={[]}>
<Menu.Item key="remove">删除</Menu.Item>
{
selectedRows.length > 1 && <Menu.Item key="approval">批量审批</Menu.Item>
}
<Menu.Item key="approval">批量审批</Menu.Item>
</Menu>
);
return (
<PageHeaderLayout title="标准表格">
<Card noHovering>
<Card noHovering bordered={false}>
<div className={styles.tableList}>
<div className={styles.tableListForm}>
<Form onSubmit={this.handleSearch}>
......@@ -229,12 +227,16 @@ export default class TableList extends PureComponent {
</div>
<div className={styles.tableListOperator}>
<Button icon="plus" type="primary" onClick={() => this.handleModalVisible(true)}>新建</Button>
<Button>批量操作</Button>
<Dropdown overlay={menu}>
<Button>
更多操作 <Icon type="down" />
</Button>
</Dropdown>
{
selectedRows.length > 0 && <span>
<Button>批量操作</Button>
<Dropdown overlay={menu}>
<Button>
更多操作 <Icon type="down" />
</Button>
</Dropdown>
</span>
}
</div>
<StandardTable
selectedRows={selectedRows}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment