## 改造新增頁
1. 基于dva數據流改造需要做如下修改
* model修改為如下代碼
~~~
import { message } from 'antd';
import router from 'umi/router';
import { list, submit } from '../services/demo';
export default {
namespace: 'demo',
state: {
data: {
list: [],
pagination: {},
},
detail: {},
},
effects: {
*fetchList({ payload }, { call, put }) {
const response = yield call(list, payload);
if (response.success) {
yield put({
type: 'saveList',
payload: {
list: response.data.records,
pagination: {
total: response.data.total,
current: response.data.current,
pageSize: response.data.size,
},
},
});
}
},
*submit({ payload }, { call }) {
const response = yield call(submit, payload);
if (response.success) {
message.success('提交成功');
router.push('/platform/demo');
}
},
},
reducers: {
saveList(state, action) {
return {
...state,
data: action.payload,
};
},
},
};
~~~
* 增加connect
~~~
@connect(({ demo, loading }) => ({
demo,
loading: loading.models.demo,
}))
@Form.create()
class DemoAdd extends PureComponent {
}
~~~
* 修改handelSubmit，使用dispatch調用數據流進行表單提交
~~~
handleSubmit = e => {
e.preventDefault();
const { form, dispatch } = this.props;
form.validateFieldsAndScroll((err, values) => {
if (!err) {
const params = {
...values,
date: func.format(values.date),
};
dispatch({
type: 'demo/submit',
payload: params,
});
}
});
};
~~~
2. 打開系統提交數據，發現接口傳參調用完全正確
3. 最后提供新增頁的完整代碼
~~~
import React, { PureComponent } from 'react';
import { Form, Input, Card, Button, DatePicker } from 'antd';
import { connect } from 'dva';
import moment from 'moment';
import Panel from '../../../components/Panel';
import styles from '../../../layouts/Sword.less';
import func from '../../../utils/Func';
const FormItem = Form.Item;
const { TextArea } = Input;
@connect(({ demo, loading }) => ({
demo,
loading: loading.models.demo,
}))
@Form.create()
class DemoAdd extends PureComponent {
handleSubmit = e => {
e.preventDefault();
const { form, dispatch } = this.props;
form.validateFieldsAndScroll((err, values) => {
if (!err) {
const params = {
...values,
date: func.format(values.date),
};
dispatch({
type: 'demo/submit',
payload: params,
});
}
});
};
render() {
const {
form: { getFieldDecorator },
} = this.props;
const formItemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 7 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 12 },
md: { span: 10 },
},
};
const action = (
<Button type="primary" onClick={this.handleSubmit}>
提交
</Button>
);
return (
<Panel title="新增" back="/platform/demo" action={action}>
<Form hideRequiredMark style={{ marginTop: 8 }}>
<Card title="基本信息" className={styles.card} bordered={false}>
<FormItem {...formItemLayout} label="標題">
{getFieldDecorator('title', {
rules: [
{
required: true,
message: '請輸入標題',
},
],
})(<Input placeholder="請輸入標題" />)}
</FormItem>
<FormItem {...formItemLayout} label="日期">
{getFieldDecorator('date', {
rules: [
{
required: true,
message: '請輸入日期',
},
],
})(
<DatePicker
style={{ width: '100%' }}
format="YYYY-MM-DD HH:mm:ss"
disabledDate={this.disabledDate}
showTime={{ defaultValue: moment('00:00:00', 'HH:mm:ss') }}
/>
)}
</FormItem>
<FormItem {...formItemLayout} label="內容">
{getFieldDecorator('content')(
<TextArea style={{ minHeight: 32 }} placeholder="請輸入內容" rows={10} />
)}
</FormItem>
</Card>
</Form>
</Panel>
);
}
}
export default DemoAdd;
~~~