一、在router.config.js中添加新的页面(新增)
{
name: 'connectapply',
icon: 'form',
path: '/connect-apply',
routes: [
{
path: '/connect-apply/data-connect-apply',
name: 'data-connect-apply',
component: './ConnectApply/DataConnectApply',
},
//insert
{
path: "/connect-apply/req-submit", //随便取名,显示在访问路径url中,如果是子路由,需要和父路径匹配
name: "req-submit", //菜单栏显示的标题
component: "./Requirement/ReqSubmit" //点击菜单需要渲染的项目路径
},
],
}
二、在pages中创建文件夹Requirement
1、创建js文件,布置页面
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import {
Form,
Input,
Select,
Button,
Card,
Row,
Col,
} from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
const FormItem = Form.Item;
const { Option } = Select;
@connect(({ loading, req }) => ({
formSubmitLoading: loading.effects['req/insertRequirement'],
}))
@Form.create()
class ReqSubmit extends PureComponent {
componentDidMount() {
};
/**
* 提交函数
*/
handleSubmit = e => {
const { dispatch, form } = this.props;
e.preventDefault();
form.validateFields((err, fieldsValue) => {
if (err) return;
dispatch({
type: 'req/insertRequirement',
payload: {
...fieldsValue,
},
});
});
};
// 渲染函数
render() {
const {
trySubmitting,
form: { getFieldDecorator },
} = this.props;
const formItemLayout = {
labelCol: {
xs: { span: 12 },
sm: { span: 7 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 12 },
md: { span: 10 },
},
};
const submitFormLayout = {
wrapperCol: {
xs: { span: 24, offset: 7 },
sm: { span: 10, offset: 10 },
},
};
getFieldDecorator('keys', { initialValue: [] });
return (
<PageHeaderWrapper
title="数据增加测试"
content=""
>
<Card bordered={1}>
<Form style={{ marginTop: 4 }}>
<Row>
<Col span={12}>
<FormItem {...formItemLayout} label="目录名称">
{getFieldDecorator('mulumingcheng', {
rules: [
{
required: true,
message: '请输入目录名称',
},
],
})(<Input/>)}
</FormItem>
</Col>
<Col span={12}>
<FormItem {...formItemLayout} label="申请字段">
{getFieldDecorator('shnqingziduan', {
rules: [
{
required: true,
message: '请输入申请字段',
},
],
})(<Input/>)}
</FormItem>
</Col>
</Row>
<Row>
<Col span={12}>
<FormItem {...formItemLayout} label="申请理由">
{getFieldDecorator('shenqingliyou', {
rules: [
{
required: true,
message: '请输入申请理由',
},
],
})(<Input/>)}
</FormItem>
</Col>
<Col span={12}>
<FormItem {...formItemLayout} label="事项名称">
{getFieldDecorator('shixiangmincheng', {
rules: [
{
required: true,
message: '请输入事项名称',
},
],
})(<Input/>)}
</FormItem>
</Col>
</Row>
<Row>
<Col span={12}>
<FormItem {...formItemLayout} label="应用场景">
{getFieldDecorator('yingyongchangjing', {
rules: [
{
required: true,
message: '请输入应用场景',
},
],
})(<Input/>)}
</FormItem>
</Col>
<Col span={12}>
<FormItem {...formItemLayout} label="使用方式">
{getFieldDecorator('shiyongfangshi', {
rules: [
{
required: true,
message: '请输入使用方式',
},
],
})(<Input/>)}
</FormItem>
</Col>
</Row>
<Row>
<Col span={12}>
<FormItem {...formItemLayout} label="数据需求部门">
{getFieldDecorator('shujuxuqiubumen', {
rules: [
{
required: true,
message: '请输入数据需求部门',
},
],
})(<Input/>)}
</FormItem>
</Col>
<Col span={12}>
<FormItem {...formItemLayout} label="数据使用单位">
{getFieldDecorator('shujushiyongdanwei', {
rules: [
{
required: true,
message: '请输入数据使用单位',
},
],
})(<Input/>)}
</FormItem>
</Col>
</Row>
<Row>
<Col span={12}>
<FormItem {...formItemLayout} label="数据提供单位">
{getFieldDecorator('shujutigongdanwei', {
rules: [
{
required: true,
message: '请输入数据提供单位',
},
],
})(<Input/>)}
</FormItem>
</Col>
<Col span={12}>
<FormItem {...formItemLayout} label="录入人员姓名">
{getFieldDecorator('lururen', {
rules: [
{
required: true,
message: '请输入录入人员姓名',
},
],
})(<Input/>)}
</FormItem>
</Col>
</Row>
<Row>
<Col span={12}>
<FormItem {...formItemLayout} label="所属模块">
{getFieldDecorator('suoshumokuai', {
initialValue: 'POST',
rules: [
{
required: true,
message: '请输入所属模块',
},
],
})(
<Select style={{ width: 120 }}>
<Option value="GET">---选择1---</Option>
<Option value="POST">---选择2---</Option>
</Select>,
)}
</FormItem>
</Col>
<Col span={12}>
<FormItem {...formItemLayout} label="优先级">
{getFieldDecorator('youxianji', {
rules: [
{
required: true,
message: '请输入优先级',
},
],
})(<Input/>)}
</FormItem>
</Col>
</Row>
<FormItem {...submitFormLayout} style={{ marginTop: 32 }}>
<Button type="primary" htmlType="submit" loading={trySubmitting} onClick={this.handleSubmit}>
提交
</Button>
</FormItem>
</Form>
</Card>
</PageHeaderWrapper>
);
}
}
export default ReqSubmit;
2、创建models文件,js文件连接service接口和页面(属于中间件)
effects: {
*insertRequirement({ payload }, { call }) {
yield call(insertRequirement, payload);
message.success('提交成功');
},
*submitStepForm({ payload }, { call, put }) {
yield call(fakeSubmitForm, payload);
yield put({
type: 'saveStepFormData',
payload,
});
yield put(routerRedux.push('/form/step-form/result'));
} }
三、在service中配置js文件,请求发送方
export async function insertRequirement(params) { return
request(`/job/req/insertRequirement`, {
method: 'POST',
body:params
});
四、在requirement中的models中创建js文件,配置新增方法(effects和reducers中都需要配置)
import { message } from 'antd';
import {
insertRequirement,
getRequirementByParam,
updateRequirementByParam
} from '@/services/req';
export default {
namespace: 'req',
state: {
requirementList:[]
},
effects: {
*insertRequirement({ payload }, { call }) {
yield call(insertRequirement, payload);
message.success('提交成功');
},
},
reducers: {
getRequirementByParamFunc(state, { payload }) {
return {
...state,
requirementList:payload.data
};
},
},
};
五、在springboot后台的resources中,修改xml文件
<insert id="insertRequirement" parameterType="java.util.List">
INSERT INTO req_requirement( mulumingcheng, shnqingziduan,
shenqingliyou, shixiangmincheng, yingyongchangjing,
shiyongfangshi, shujuxuqiubumen, shujushiyongdanwei,
shujutigongdanwei, lururen, lurushijian,
liuchengzhuangtai, xuqiuzhuangtai, suoshumokuai,
youxianji ) VALUES <foreach collection="list" index="index" item="item" separator=","> (
#{item.mulumingcheng} ,#{item.shnqingziduan}
,#{item.shenqingliyou} ,#{item.shixiangmincheng}
,#{item.yingyongchangjing} ,#{item.shiyongfangshi}
,#{item.shujuxuqiubumen} ,#{item.shujushiyongdanwei}
,#{item.shujutigongdanwei} ,#{item.lururen} ,now() ,0
,1 ,#{item.suoshumokuai} ,#{item.youxianji} )
</foreach> ON DUPLICATE KEY UPDATE
mulumincheng=VALUES(mulumingcheng),
shnqingziduan=VALUES(shnqingziduan),
shenqingliyou=VALUES(shenqingliyou),
shixiangmincheng=VALUES(shixiangmincheng),
yingyongchangjing=VALUES(yingyongchangjing),
shiyongfangshi=VALUES(shiyongfangshi),
shujuxuqiubumen=VALUES(shujuxuqiubumen),
shujushiyongdanwei=VALUES(shujushiyongdanwei),
shujutigongdanwei=VALUES(shujutigongdanwei),
lururen=VALUES(lururen), lurushijian=VALUES(lurushijian),
liuchengzhuangtai=VALUES(liuchengzhuangtai),
xuqiuzhuangtai=VALUES(xuqiuzhuangtai),
suoshumokuai=VALUES(suoshumokuai), youxianji=VALUES(youxianji)
</insert>