form.jsx 3.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. import React from 'react'
  2. import { Row, Col, Card, Tree, DatePicker, Radio,Form, Select, Input,InputNumber, Button } from 'antd';
  3. import ImageUpload from '@/components/XForm/ImageUpload';
  4. const { Option } = Select;
  5. const FormItem = Form.Item;
  6. const {RangePicker}=DatePicker
  7. const formItemLayout = {
  8. labelCol: { span: 6 },
  9. wrapperCol: { span: 14 },
  10. };
  11. class TreedataFrom extends React.Component {
  12. handleSubmit = e => {
  13. e.preventDefault();
  14. this.props.form.validateFields((err, values) => {
  15. if (!err) {
  16. console.log('Received values of form: ', values);
  17. }
  18. });
  19. };
  20. handleSelectChange = value => {
  21. console.log(value);
  22. this.props.form.setFieldsValue({
  23. note: `Hi, ${value === 'male' ? 'man' : 'lady'}!`,
  24. });
  25. };
  26. render() {
  27. const { getFieldDecorator } = this.props.form;
  28. return (
  29. <Form {...formItemLayout} onSubmit={this.handleSubmit}>
  30. <FormItem label="照片" help="建议尺寸:750px*600px,比例5:4,格式:jpg,用于:列表和详情">
  31. {
  32. getFieldDecorator('curriculumImg', {
  33. rules: [
  34. { required: true, message: '请上传照片' }
  35. ]
  36. })(
  37. <ImageUpload />
  38. )
  39. }
  40. </FormItem>
  41. <FormItem label="姓名">
  42. {getFieldDecorator('note', {
  43. rules: [{ required: true, message: '请输入姓名!' }],
  44. })(<Input />)}
  45. </FormItem>
  46. <FormItem label="年龄" >
  47. {
  48. getFieldDecorator('weight', {
  49. rules: [{ required: true, message: '请输入年龄' }]
  50. })(
  51. <InputNumber min='18' />
  52. )
  53. }
  54. </FormItem>
  55. <FormItem label="性别">
  56. {
  57. getFieldDecorator('type', {
  58. rules: [
  59. { required: true, message: '请选择性别' }
  60. ]
  61. })(
  62. <Radio.Group style={{ width: '500px' }} defaultValue={1}>
  63. {/* onChange={e => setContentType(e.target.value)} */}
  64. <Radio value={1}>男</Radio>
  65. <Radio value={2}>女</Radio>
  66. </Radio.Group>
  67. )
  68. }
  69. </FormItem>
  70. <FormItem label="工作总时间" style={{ marginBottom: 0 }} help="如未离职,结束日期和开始日期一样即可">
  71. <FormItem style={{ display: 'inline-block' }} >
  72. <RangePicker style={{width: '255px'}}/>
  73. </FormItem>
  74. </FormItem>
  75. <FormItem label="Gender">
  76. {getFieldDecorator('gender', {
  77. rules: [{ required: true, message: 'Please select your gender!' }],
  78. })(
  79. <Select
  80. placeholder="Select a option and change input text above"
  81. onChange={this.handleSelectChange}
  82. >
  83. <Option value="male">male</Option>
  84. <Option value="female">female</Option>
  85. </Select>,
  86. )}
  87. </FormItem>
  88. <FormItem wrapperCol={{ span: 12, offset: 5 }}>
  89. <Button type="primary" htmlType="submit">
  90. Submit
  91. </Button>
  92. </FormItem>
  93. </Form>
  94. );
  95. }
  96. }
  97. TreedataFrom = Form.create({})(TreedataFrom);
  98. export default TreedataFrom
  99. // import React from 'react'
  100. // class Hello extends React.Component{
  101. // render(){
  102. // return<h1>asdasdasdas</h1>
  103. // }
  104. // }
  105. // export default Hello