import { Avatar, Card, Col, Dropdown, Form, Icon, List, Menu, Row, Select, Tooltip } from 'antd'; import React, { Component } from 'react'; import { Dispatch } from 'redux'; import { FormComponentProps } from 'antd/es/form'; import { connect } from 'dva'; import numeral from 'numeral'; 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; export function formatWan(val: number) { const v = val * 1; if (!v || Number.isNaN(v)) return ''; let result: React.ReactNode = val; if (val > 10000) { result = ( {Math.floor(val / 10000)} ); } return result; } 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: 8, }, }); } render() { const { BLOCK_NAME_CAMEL_CASE: { list }, loading, form, } = this.props; const { getFieldDecorator } = form; const CardInfo: React.SFC<{ activeUser: React.ReactNode; newUser: React.ReactNode; }> = ({ activeUser, newUser }) => (

活跃用户

{activeUser}

新增用户

{newUser}

); const formItemLayout = { wrapperCol: { xs: { span: 24 }, sm: { span: 16 }, }, }; const itemMenu = ( 1st menu item 2nd menu item 3d menu item ); return (
{getFieldDecorator('category')( 类目一 类目二 类目三 类目四 类目五 类目六 类目七 类目八 类目九 类目十 类目十一 类目十二 , )} {getFieldDecorator('author', {})( , )} {getFieldDecorator('rate', {})( , )}

rowKey="id" grid={{ gutter: 24, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }} loading={loading} dataSource={list} renderItem={item => ( , , , , ]} > } title={item.title} />
)} />
); } } 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);