123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160 |
- import React, { PureComponent } from 'react';
- import moment from 'moment';
- import { connect } from 'dva';
- import { Row, Col, Form, Card, Select, List } from 'antd';
-
- import TagSelect from 'components/TagSelect';
- import AvatarList from 'components/AvatarList';
- import Ellipsis from 'components/Ellipsis';
- import StandardFormRow from 'components/StandardFormRow';
-
- import styles from './Projects.less';
-
- const { Option } = Select;
- const FormItem = Form.Item;
-
- /* eslint react/no-array-index-key: 0 */
- @Form.create()
- @connect(({ list, loading }) => ({
- list,
- loading: loading.models.list,
- }))
- export default class CoverCardList 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 cardList = list ? (
- <List
- rowKey="id"
- loading={loading}
- grid={{ gutter: 24, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }}
- dataSource={list}
- renderItem={item => (
- <List.Item>
- <Card
- className={styles.card}
- hoverable
- cover={<img alt={item.title} src={item.cover} height={154} />}
- >
- <Card.Meta
- title={<a href="#">{item.title}</a>}
- description={<Ellipsis lines={2}>{item.subDescription}</Ellipsis>}
- />
- <div className={styles.cardItemContent}>
- <span>{moment(item.updatedAt).fromNow()}</span>
- <div className={styles.avatarList}>
- <AvatarList size="mini">
- {item.members.map((member, i) => (
- <AvatarList.Item
- key={`${item.id}-avatar-${i}`}
- src={member.avatar}
- tips={member.name}
- />
- ))}
- </AvatarList>
- </div>
- </div>
- </Card>
- </List.Item>
- )}
- />
- ) : null;
-
- const formItemLayout = {
- wrapperCol: {
- xs: { span: 24 },
- sm: { span: 16 },
- },
- };
-
- return (
- <div className={styles.coverCardList}>
- <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>
- <div className={styles.cardList}>{cardList}</div>
- </div>
- );
- }
- }
|