123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236 |
- import React, { Component, Fragment } from 'react';
- import moment from 'moment';
- import { connect } from 'dva';
- import { Form, Card, Select, List, Tag, Icon, Avatar, Row, Col, Button } from 'antd';
-
- import TagSelect from 'components/TagSelect';
- import StandardFormRow from 'components/StandardFormRow';
- import styles from './Articles.less';
-
- const { Option } = Select;
- const FormItem = Form.Item;
-
- const pageSize = 5;
-
- @Form.create()
- @connect(({ list, loading }) => ({
- list,
- loading: loading.models.list,
- }))
- export default class SearchList extends Component {
- componentDidMount() {
- this.fetchMore();
- }
-
- setOwner = () => {
- const { form } = this.props;
- form.setFieldsValue({
- owner: ['wzj'],
- });
- };
-
- fetchMore = () => {
- this.props.dispatch({
- type: 'list/appendFetch',
- payload: {
- count: pageSize,
- },
- });
- };
-
- render() {
- const { form, list: { list }, loading } = this.props;
- const { getFieldDecorator } = form;
-
- const owners = [
- {
- id: 'wzj',
- name: '我自己',
- },
- {
- id: 'wjh',
- name: '吴家豪',
- },
- {
- id: 'zxx',
- name: '周星星',
- },
- {
- id: 'zly',
- name: '赵丽颖',
- },
- {
- id: 'ym',
- name: '姚明',
- },
- ];
-
- const IconText = ({ type, text }) => (
- <span>
- <Icon type={type} style={{ marginRight: 8 }} />
- {text}
- </span>
- );
-
- const ListContent = ({ data: { content, updatedAt, avatar, owner, href } }) => (
- <div className={styles.listContent}>
- <div className={styles.description}>{content}</div>
- <div className={styles.extra}>
- <Avatar src={avatar} size="small" />
- <a href={href}>{owner}</a> 发布在 <a href={href}>{href}</a>
- <em>{moment(updatedAt).format('YYYY-MM-DD HH:mm')}</em>
- </div>
- </div>
- );
-
- const formItemLayout = {
- wrapperCol: {
- xs: { span: 24 },
- sm: { span: 24 },
- md: { span: 12 },
- },
- };
-
- const loadMore =
- list.length > 0 ? (
- <div style={{ textAlign: 'center', marginTop: 16 }}>
- <Button onClick={this.fetchMore} style={{ paddingLeft: 48, paddingRight: 48 }}>
- {loading ? (
- <span>
- <Icon type="loading" /> 加载中...
- </span>
- ) : (
- '加载更多'
- )}
- </Button>
- </div>
- ) : null;
-
- return (
- <Fragment>
- <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="owner" grid>
- <Row>
- <Col lg={16} md={24} sm={24} xs={24}>
- <FormItem>
- {getFieldDecorator('owner', {
- initialValue: ['wjh', 'zxx'],
- })(
- <Select
- mode="multiple"
- style={{ maxWidth: 286, width: '100%' }}
- placeholder="选择 owner"
- >
- {owners.map(owner => (
- <Option key={owner.id} value={owner.id}>
- {owner.name}
- </Option>
- ))}
- </Select>
- )}
- <a className={styles.selfTrigger} onClick={this.setOwner}>
- 只看自己的
- </a>
- </FormItem>
- </Col>
- </Row>
- </StandardFormRow>
- <StandardFormRow title="其它选项" grid last>
- <Row gutter={16}>
- <Col xl={8} lg={10} md={12} sm={24} xs={24}>
- <FormItem {...formItemLayout} label="活跃用户">
- {getFieldDecorator('user', {})(
- <Select
- onChange={this.handleFormSubmit}
- placeholder="不限"
- style={{ maxWidth: 200, width: '100%' }}
- >
- <Option value="lisa">李三</Option>
- </Select>
- )}
- </FormItem>
- </Col>
- <Col xl={8} lg={10} md={12} sm={24} xs={24}>
- <FormItem {...formItemLayout} label="好评度">
- {getFieldDecorator('rate', {})(
- <Select
- onChange={this.handleFormSubmit}
- placeholder="不限"
- style={{ maxWidth: 200, width: '100%' }}
- >
- <Option value="good">优秀</Option>
- </Select>
- )}
- </FormItem>
- </Col>
- </Row>
- </StandardFormRow>
- </Form>
- </Card>
- <Card
- style={{ marginTop: 24 }}
- bordered={false}
- bodyStyle={{ padding: '8px 32px 32px 32px' }}
- >
- <List
- size="large"
- loading={list.length === 0 ? loading : false}
- rowKey="id"
- itemLayout="vertical"
- loadMore={loadMore}
- dataSource={list}
- renderItem={item => (
- <List.Item
- key={item.id}
- actions={[
- <IconText type="star-o" text={item.star} />,
- <IconText type="like-o" text={item.like} />,
- <IconText type="message" text={item.message} />,
- ]}
- extra={<div className={styles.listItemExtra} />}
- >
- <List.Item.Meta
- title={
- <a className={styles.listItemMetaTitle} href={item.href}>
- {item.title}
- </a>
- }
- description={
- <span>
- <Tag>Ant Design</Tag>
- <Tag>设计语言</Tag>
- <Tag>蚂蚁金服</Tag>
- </span>
- }
- />
- <ListContent data={item} />
- </List.Item>
- )}
- />
- </Card>
- </Fragment>
- );
- }
- }
|