Ant Design Pro 新增页面强化学习

一、在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>