提交 d328d22e1dbf24ecedede8d7b70a02402575afe8

作者 愚道
1 个父辈 b9482c0a

add search input to SearchListProjects

1 import React, { PureComponent } from 'react'; 1 import React, { PureComponent } from 'react';
2 import moment from 'moment'; 2 import moment from 'moment';
3 import { connect } from 'dva'; 3 import { connect } from 'dva';
4 -import { Row, Col, Form, Card, Select, List } from 'antd'; 4 +import { Row, Col, Form, Card, Select, List, Input } from 'antd';
5 5
6 import { TagSelect, AvatarList, Ellipsis } from 'ant-design-pro'; 6 import { TagSelect, AvatarList, Ellipsis } from 'ant-design-pro';
7 7
8 import StandardFormRow from './components/StandardFormRow'; 8 import StandardFormRow from './components/StandardFormRow';
  9 +import PageHeaderWrapper from './components/PageHeaderWrapper';
9 import styles from './style.less'; 10 import styles from './style.less';
10 11
11 const { Option } = Select; 12 const { Option } = Select;
@@ -93,58 +94,75 @@ class CoverCardList extends PureComponent { @@ -93,58 +94,75 @@ class CoverCardList extends PureComponent {
93 sm: { span: 16 }, 94 sm: { span: 16 },
94 }, 95 },
95 }; 96 };
  97 + const mainSearch = (
  98 + <div style={{ textAlign: 'center' }}>
  99 + <Input.Search
  100 + placeholder="请输入"
  101 + enterButton="搜索"
  102 + size="large"
  103 + onSearch={this.handleFormSubmit}
  104 + style={{ width: 522 }}
  105 + />
  106 + </div>
  107 + );
96 108
97 return ( 109 return (
98 - <div className={styles.coverCardList}>  
99 - <Card bordered={false}>  
100 - <Form layout="inline">  
101 - <StandardFormRow title="所属类目" block style={{ paddingBottom: 11 }}>  
102 - <FormItem>  
103 - {getFieldDecorator('category')(  
104 - <TagSelect expandable>  
105 - <TagSelect.Option value="cat1">类目一</TagSelect.Option>  
106 - <TagSelect.Option value="cat2">类目二</TagSelect.Option>  
107 - <TagSelect.Option value="cat3">类目三</TagSelect.Option>  
108 - <TagSelect.Option value="cat4">类目四</TagSelect.Option>  
109 - <TagSelect.Option value="cat5">类目五</TagSelect.Option>  
110 - <TagSelect.Option value="cat6">类目六</TagSelect.Option>  
111 - <TagSelect.Option value="cat7">类目七</TagSelect.Option>  
112 - <TagSelect.Option value="cat8">类目八</TagSelect.Option>  
113 - <TagSelect.Option value="cat9">类目九</TagSelect.Option>  
114 - <TagSelect.Option value="cat10">类目十</TagSelect.Option>  
115 - <TagSelect.Option value="cat11">类目十一</TagSelect.Option>  
116 - <TagSelect.Option value="cat12">类目十二</TagSelect.Option>  
117 - </TagSelect>  
118 - )}  
119 - </FormItem>  
120 - </StandardFormRow>  
121 - <StandardFormRow title="其它选项" grid last>  
122 - <Row gutter={16}>  
123 - <Col lg={8} md={10} sm={10} xs={24}>  
124 - <FormItem {...formItemLayout} label="作者">  
125 - {getFieldDecorator('author', {})(  
126 - <Select placeholder="不限" style={{ maxWidth: 200, width: '100%' }}>  
127 - <Option value="lisa">王昭君</Option>  
128 - </Select>  
129 - )}  
130 - </FormItem>  
131 - </Col>  
132 - <Col lg={8} md={10} sm={10} xs={24}>  
133 - <FormItem {...formItemLayout} label="好评度">  
134 - {getFieldDecorator('rate', {})(  
135 - <Select placeholder="不限" style={{ maxWidth: 200, width: '100%' }}>  
136 - <Option value="good">优秀</Option>  
137 - <Option value="normal">普通</Option>  
138 - </Select>  
139 - )}  
140 - </FormItem>  
141 - </Col>  
142 - </Row>  
143 - </StandardFormRow>  
144 - </Form>  
145 - </Card>  
146 - <div className={styles.cardList}>{cardList}</div>  
147 - </div> 110 + <PageHeaderWrapper
  111 + title="搜索列表"
  112 + content={mainSearch}
  113 + onTabChange={this.handleTabChange}
  114 + >
  115 + <div className={styles.coverCardList}>
  116 + <Card bordered={false}>
  117 + <Form layout="inline">
  118 + <StandardFormRow title="所属类目" block style={{ paddingBottom: 11 }}>
  119 + <FormItem>
  120 + {getFieldDecorator('category')(
  121 + <TagSelect expandable>
  122 + <TagSelect.Option value="cat1">类目一</TagSelect.Option>
  123 + <TagSelect.Option value="cat2">类目二</TagSelect.Option>
  124 + <TagSelect.Option value="cat3">类目三</TagSelect.Option>
  125 + <TagSelect.Option value="cat4">类目四</TagSelect.Option>
  126 + <TagSelect.Option value="cat5">类目五</TagSelect.Option>
  127 + <TagSelect.Option value="cat6">类目六</TagSelect.Option>
  128 + <TagSelect.Option value="cat7">类目七</TagSelect.Option>
  129 + <TagSelect.Option value="cat8">类目八</TagSelect.Option>
  130 + <TagSelect.Option value="cat9">类目九</TagSelect.Option>
  131 + <TagSelect.Option value="cat10">类目十</TagSelect.Option>
  132 + <TagSelect.Option value="cat11">类目十一</TagSelect.Option>
  133 + <TagSelect.Option value="cat12">类目十二</TagSelect.Option>
  134 + </TagSelect>
  135 + )}
  136 + </FormItem>
  137 + </StandardFormRow>
  138 + <StandardFormRow title="其它选项" grid last>
  139 + <Row gutter={16}>
  140 + <Col lg={8} md={10} sm={10} xs={24}>
  141 + <FormItem {...formItemLayout} label="作者">
  142 + {getFieldDecorator('author', {})(
  143 + <Select placeholder="不限" style={{ maxWidth: 200, width: '100%' }}>
  144 + <Option value="lisa">王昭君</Option>
  145 + </Select>
  146 + )}
  147 + </FormItem>
  148 + </Col>
  149 + <Col lg={8} md={10} sm={10} xs={24}>
  150 + <FormItem {...formItemLayout} label="好评度">
  151 + {getFieldDecorator('rate', {})(
  152 + <Select placeholder="不限" style={{ maxWidth: 200, width: '100%' }}>
  153 + <Option value="good">优秀</Option>
  154 + <Option value="normal">普通</Option>
  155 + </Select>
  156 + )}
  157 + </FormItem>
  158 + </Col>
  159 + </Row>
  160 + </StandardFormRow>
  161 + </Form>
  162 + </Card>
  163 + <div className={styles.cardList}>{cardList}</div>
  164 + </div>
  165 + </PageHeaderWrapper>
148 ); 166 );
149 } 167 }
150 } 168 }
注册登录 后发表评论