123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207 |
- import React, { PureComponent } from 'react';
- import numeral from 'numeral';
- import { connect } from 'dva';
- import { Row, Col, Form, Card, Select, Icon, Avatar, List, Tooltip, Dropdown, Menu } from 'antd';
-
- import TagSelect from 'components/TagSelect';
- import StandardFormRow from 'components/StandardFormRow';
-
- import styles from './Applications.less';
-
- const { Option } = Select;
- const FormItem = Form.Item;
-
- const formatWan = val => {
- const v = val * 1;
- if (!v || isNaN(v)) return '';
-
- let result = val;
- if (val > 10000) {
- result = Math.floor(val / 10000);
- result = (
- <span>
- {result}
- <em className={styles.wan}>万</em>
- </span>
- );
- }
- return result;
- };
-
- /* eslint react/no-array-index-key: 0 */
- @Form.create()
- @connect(({ list, loading }) => ({
- list,
- loading: loading.models.list,
- }))
- export default class FilterCardList extends PureComponent {
- componentDidMount() {
- this.props.dispatch({
- type: 'list/fetch',
- payload: {
- count: 8,
- },
- });
- }
-
- handleFormSubmit = () => {
- const { form, dispatch } = this.props;
- // setTimeout 用于保证获取表单值是在所有表单字段更新完毕的时候
- setTimeout(() => {
- form.validateFields(err => {
- if (!err) {
- // eslint-disable-next-line
- dispatch({
- type: 'list/fetch',
- payload: {
- count: 8,
- },
- });
- }
- });
- }, 0);
- };
-
- render() {
- const { list: { list }, loading, form } = this.props;
- const { getFieldDecorator } = form;
-
- const CardInfo = ({ activeUser, newUser }) => (
- <div className={styles.cardInfo}>
- <div>
- <p>活跃用户</p>
- <p>{activeUser}</p>
- </div>
- <div>
- <p>新增用户</p>
- <p>{newUser}</p>
- </div>
- </div>
- );
-
- const formItemLayout = {
- wrapperCol: {
- xs: { span: 24 },
- sm: { span: 16 },
- },
- };
-
- const itemMenu = (
- <Menu>
- <Menu.Item>
- <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
- 1st menu item
- </a>
- </Menu.Item>
- <Menu.Item>
- <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
- 2nd menu item
- </a>
- </Menu.Item>
- <Menu.Item>
- <a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
- 3d menu item
- </a>
- </Menu.Item>
- </Menu>
- );
-
- return (
- <div className={styles.filterCardList}>
- <Card bordered={false}>
- <Form layout="inline">
- <StandardFormRow title="所属类目" block style={{ paddingBottom: 11 }}>
- <FormItem>
- {getFieldDecorator('category')(
- <TagSelect onChange={this.handleFormSubmit} expandable>
- <TagSelect.Option value="cat1">类目一</TagSelect.Option>
- <TagSelect.Option value="cat2">类目二</TagSelect.Option>
- <TagSelect.Option value="cat3">类目三</TagSelect.Option>
- <TagSelect.Option value="cat4">类目四</TagSelect.Option>
- <TagSelect.Option value="cat5">类目五</TagSelect.Option>
- <TagSelect.Option value="cat6">类目六</TagSelect.Option>
- <TagSelect.Option value="cat7">类目七</TagSelect.Option>
- <TagSelect.Option value="cat8">类目八</TagSelect.Option>
- <TagSelect.Option value="cat9">类目九</TagSelect.Option>
- <TagSelect.Option value="cat10">类目十</TagSelect.Option>
- <TagSelect.Option value="cat11">类目十一</TagSelect.Option>
- <TagSelect.Option value="cat12">类目十二</TagSelect.Option>
- </TagSelect>
- )}
- </FormItem>
- </StandardFormRow>
- <StandardFormRow title="其它选项" grid last>
- <Row gutter={16}>
- <Col lg={8} md={10} sm={10} xs={24}>
- <FormItem {...formItemLayout} label="作者">
- {getFieldDecorator('author', {})(
- <Select
- onChange={this.handleFormSubmit}
- placeholder="不限"
- style={{ maxWidth: 200, width: '100%' }}
- >
- <Option value="lisa">王昭君</Option>
- </Select>
- )}
- </FormItem>
- </Col>
- <Col lg={8} md={10} sm={10} xs={24}>
- <FormItem {...formItemLayout} label="好评度">
- {getFieldDecorator('rate', {})(
- <Select
- onChange={this.handleFormSubmit}
- placeholder="不限"
- style={{ maxWidth: 200, width: '100%' }}
- >
- <Option value="good">优秀</Option>
- <Option value="normal">普通</Option>
- </Select>
- )}
- </FormItem>
- </Col>
- </Row>
- </StandardFormRow>
- </Form>
- </Card>
- <List
- rowKey="id"
- style={{ marginTop: 24 }}
- grid={{ gutter: 24, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }}
- loading={loading}
- dataSource={list}
- renderItem={item => (
- <List.Item key={item.id}>
- <Card
- hoverable
- bodyStyle={{ paddingBottom: 20 }}
- actions={[
- <Tooltip title="下载">
- <Icon type="download" />
- </Tooltip>,
- <Tooltip title="编辑">
- <Icon type="edit" />
- </Tooltip>,
- <Tooltip title="分享">
- <Icon type="share-alt" />
- </Tooltip>,
- <Dropdown overlay={itemMenu}>
- <Icon type="ellipsis" />
- </Dropdown>,
- ]}
- >
- <Card.Meta avatar={<Avatar size="small" src={item.avatar} />} title={item.title} />
- <div className={styles.cardItemContent}>
- <CardInfo
- activeUser={formatWan(item.activeUser)}
- newUser={numeral(item.newUser).format('0,0')}
- />
- </div>
- </Card>
- </List.Item>
- )}
- />
- </div>
- );
- }
- }
|