import { Button, Card, Col, Form, Icon, List, Row, Select, Tag } from 'antd'; import React, { Component } from 'react'; import { Dispatch } from 'redux'; import { FormComponentProps } from 'antd/es/form'; import { connect } from 'dva'; import ArticleListContent from './components/ArticleListContent'; import { IStateType } from './model'; import { ListItemDataType } from './data'; import StandardFormRow from './components/StandardFormRow'; import TagSelect from './components/TagSelect'; import styles from './style.less'; const { Option } = Select; const FormItem = Form.Item; const pageSize = 5; interface PAGE_NAME_UPPER_CAMEL_CASEProps extends FormComponentProps { dispatch: Dispatch; BLOCK_NAME_CAMEL_CASE: IStateType; loading: boolean; } class PAGE_NAME_UPPER_CAMEL_CASE extends Component { componentDidMount() { const { dispatch } = this.props; dispatch({ type: 'BLOCK_NAME_CAMEL_CASE/fetch', payload: { count: 5, }, }); } setOwner = () => { const { form } = this.props; form.setFieldsValue({ owner: ['wzj'], }); }; fetchMore = () => { const { dispatch } = this.props; dispatch({ type: 'BLOCK_NAME_CAMEL_CASE/appendFetch', payload: { count: pageSize, }, }); }; render() { const { form, BLOCK_NAME_CAMEL_CASE: { 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: React.SFC<{ type: string; text: React.ReactNode; }> = ({ type, text }) => ( {text} ); const formItemLayout = { wrapperCol: { xs: { span: 24 }, sm: { span: 24 }, md: { span: 12 }, }, }; const loadMore = list.length > 0 ? (
) : null; return ( <>
{getFieldDecorator('category')( 类目一 类目二 类目三 类目四 类目五 类目六 类目七 类目八 类目九 类目十 类目十一 类目十二 , )} {getFieldDecorator('owner', { initialValue: ['wjh', 'zxx'], })( , )} 只看自己的 {getFieldDecorator('user', {})( , )} {getFieldDecorator('rate', {})( , )}
size="large" loading={list.length === 0 ? loading : false} rowKey="id" itemLayout="vertical" loadMore={loadMore} dataSource={list} renderItem={item => ( , , , ]} extra={
} > {item.title} } description={ Ant Design 设计语言 蚂蚁金服 } /> )} /> ); } } const WarpForm = Form.create({ onValuesChange({ dispatch }: PAGE_NAME_UPPER_CAMEL_CASEProps, changedValues, allValues) { // 表单项变化时请求数据 // 模拟查询表单生效 dispatch({ type: 'BLOCK_NAME_CAMEL_CASE/fetch', payload: { count: 8, }, }); }, })(PAGE_NAME_UPPER_CAMEL_CASE); export default connect( ({ BLOCK_NAME_CAMEL_CASE, loading, }: { BLOCK_NAME_CAMEL_CASE: IStateType; loading: { models: { [key: string]: boolean } }; }) => ({ BLOCK_NAME_CAMEL_CASE, loading: loading.models.BLOCK_NAME_CAMEL_CASE, }), )(WarpForm);