Browse Source

修复二次List 和 Dashboard 的二次确认优化

pull/2/head
禺疆 9 years ago
parent
commit
88882a0fab
  1. 1
      src/components/Charts/index.less
  2. 3
      src/routes/Dashboard/Analysis.less
  3. 28
      src/routes/Dashboard/Monitor.js
  4. 3
      src/routes/List/BasicList.js
  5. 2
      src/routes/List/CardList.js
  6. 4
      src/routes/List/CardList.less
  7. 23
      src/routes/List/CoverCardList.js
  8. 26
      src/routes/List/FilterCardList.js
  9. 25
      src/routes/List/SearchList.js
  10. 22
      src/routes/List/TableList.js

1
src/components/Charts/index.less

@ -1,4 +1,5 @@
.miniChart {
overflow: hidden;
position: relative;
width: 100%;
& > div {

3
src/routes/Dashboard/Analysis.less

@ -72,6 +72,9 @@
}
@media screen and (max-width: @screen-lg) {
.salesExtra {
display: none;
}
.rankingList {
li {
span:first-child {

28
src/routes/Dashboard/Monitor.js

@ -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>
);
}
}

3
src/routes/List/BasicList.js

@ -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}

2
src/routes/List/CardList.js

@ -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>
);

4
src/routes/List/CardList.less

@ -12,6 +12,10 @@
.extraImg {
margin-top: -60px;
text-align: center;
width: 195px;
img {
width: 100%;
}
}
.newButton {

23
src/routes/List/CoverCardList.js

@ -1,6 +1,7 @@
import React, { PureComponent } from 'react';
import moment from 'moment';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import { Row, Col, Form, Card, Select, Spin } from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
@ -49,6 +50,23 @@ 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;
@ -90,7 +108,7 @@ export default class CoverCardList extends PureComponent {
const tabList = [
{
key: 'docs',
key: 'doc',
tab: '文章',
},
{
@ -100,6 +118,7 @@ export default class CoverCardList extends PureComponent {
{
key: 'project',
tab: '项目',
default: true,
},
];
@ -121,9 +140,11 @@ export default class CoverCardList extends PureComponent {
title="带封面的卡片列表"
content={pageHeaderContent}
tabList={tabList}
onTabChange={this.handleTabChange}
>
<div className={styles.coverCardList}>
<Card
bordered={false}
noHovering
>
<Form

26
src/routes/List/FilterCardList.js

@ -1,6 +1,7 @@
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"

25
src/routes/List/SearchList.js

@ -1,6 +1,7 @@
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}

22
src/routes/List/TableList.js

@ -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}

Loading…
Cancel
Save