活动编辑页

src/pages/activity/editActivity.jsx

@@ -20,29 +20,193 @@ import xiaochengxu from '../../assets/xiaochengxu.png'
 const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
 const { TextArea } = Input;
 
+const formItemLayout = {
+  labelCol: { span: 6 },
+  wrapperCol: { span: 14 },
+};
+
+const BasicForm = props => {
+  const [isEnlist, setIsEnlist] = useState(1)
+
+  const radioOnChange = e => {
+    // console.log(e.target.value)
+    setIsEnlist(e.target.value)
+  }
+
+  const { dynamicId } = props
+
+  // 查询详情
+  const getDynamicData = dynamicId => {
+    request({ ...apis.activity.details, params: { dynamicId } }).then((data) => {
+      console.log(data)
+      data.activityTime = [moment(data.startDate), moment(data.endDate)]
+      data.signupTime = [moment(data.enlistStart), moment(data.enlistEnd)]
+
+      setIsEnlist(data.isEnlist)
+      props.form.setFieldsValue(data)
+    })
+  }
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEffect(() => {
+      props.form.setFieldsValue({ isEnlist })
+      if (dynamicId) {
+        getDynamicData(dynamicId);
+      }
+    }, [])
+ 
+  const handleSubmit = e => {
+    e.preventDefault();
+    props.form.validateFields((err, values) => {
+      if (!err) {
+        console.log('Received values of form: ', values);
+        const { activityTime, signupTime } = values
+        const [startDate, endDate] = activityTime
+        values.startDate = moment(startDate).format('YYYY-MM-DD HH:mm');
+        values.endDate = moment(endDate).format('YYYY-MM-DD HH:mm');
+        if (signupTime) {
+          const [enlistStart, enlistEnd] = signupTime
+          values.enlistStart = moment(enlistStart).format('YYYY-MM-DD HH:mm');
+          values.enlistEnd = moment(enlistEnd).format('YYYY-MM-DD HH:mm');
+        }
+        
+        console.log('submit data --->', values)
+        if (dynamicId) {
+          values.dynamicId = dynamicId
+          request({ ...apis.activity.update, data: values }).then(data => {
+            message.info('保存成功')
+            router.go(-1)
+          }).catch((err) => {
+            message.info(err.msg || err.message)
+          })
+        } else {
+          request({ ...apis.activity.add, data: { ...values } }).then((data) => {
+            message.info('保存成功')
+            router.go(-1)
+          }).catch((err) => {
+            message.info(err.msg || err.message)
+          })
+        }
+      }
+    });
+  }
+
+  const { getFieldDecorator } = props.form;
+  return (
+    <>
+      <Form {...formItemLayout} onSubmit={handleSubmit}>
+        <Form.Item label="所属项目">
+        {getFieldDecorator('buildingId', {
+          rules: [
+            {
+              required: true,
+              message: '请选择所属项目',
+            },
+          ],
+        })(<BuildSelect />)}
+        </Form.Item>
+        <Form.Item label="主图">
+          {getFieldDecorator('imgUrl')(<ImageUploader />)}
+          <span>建议图片尺寸：750px*560px</span>
+        </Form.Item>
+        <Form.Item label="活动标题">
+        {getFieldDecorator('title', {
+          rules: [
+            {
+              required: true,
+              message: '请输入活动标题',
+            },
+          ],
+        })(<Input />)}
+        </Form.Item>
+        <Form.Item label="活动时间">
+        {getFieldDecorator('activityTime', {
+          rules: [
+            {
+              required: true,
+              message: '请选择活动时间',
+            },
+          ],
+        })(<RangePicker format="YYYY-MM-DD HH:mm" />)}
+        </Form.Item>
+        <Form.Item label="活动地点">
+        {getFieldDecorator('address', {
+          rules: [
+            {
+              required: true,
+              message: '请输入活动地点',
+            },
+          ],
+        })(<Input />)}
+        </Form.Item>
+        <Form.Item label="活动人数">
+        {getFieldDecorator('personNum', {
+          rules: [
+            {
+              required: true,
+              message: '请输入活动人数',
+            },
+          ],
+        })(<Input type="number" />)}
+        </Form.Item>
+        <Form.Item label="最大报名人数">
+        {getFieldDecorator('maxEnlistByPerson', {
+          rules: [
+            {
+              required: true,
+              message: '请输入最大报名人数',
+            },
+          ],
+        })(<Input type="number" />)}
+        </Form.Item>
+        <Form.Item label="活动详情">
+        {getFieldDecorator('desc')(<Wangedit />)}
+        </Form.Item>
+        <Form.Item label="是否需要报名">
+        {getFieldDecorator('isEnlist')(
+          <Radio.Group onChange={(e) => radioOnChange(e)}>
+            <Radio value={1}>是</Radio>
+            <Radio value={0}>否</Radio>
+          </Radio.Group>,
+        )}
+        </Form.Item>
+        {
+          isEnlist === 1 && (<Form.Item label="报名时间">
+          {getFieldDecorator('signupTime', {
+            rules: [
+              {
+                required: true,
+                message: '请选择报名时间',
+              },
+            ],
+          })(<RangePicker format="YYYY-MM-DD HH:mm" />)}
+          </Form.Item>)
+        }
+        <Form.Item wrapperCol={{ span: 12, offset: 8 }}>
+          <Button type="primary" htmlType="submit">
+            确认
+          </Button>
+          &nbsp;&nbsp;&nbsp;&nbsp;
+          <Button onClick={() => router.go(-1)}>
+            取消
+          </Button>
+        </Form.Item>
+      </Form>
+    </>
+  )
+}
+
+const Basic = Form.create({ name: 'BasicForm' })(BasicForm);
+
 /**
  *
  *
  * @param {*} props
  * @returns
  */
-const Edit = (props) => {
+const Edit = props => {
   const [tab, changeTab] = useState('basic')
-  const dynamicId = props.location.query.dynamicId
-  const [dynamicData, setDynamicData] = useState({ isEnlist: 1 })
-  if (dynamicId) {
-    useEffect(() => {
-      getDynamicData(dynamicId);
-    }, [])
-
-    // 查询列表
-    const getDynamicData = (dynamicId) => {
-      request({ ...apis.activity.details, params: { dynamicId } }).then((data) => {
-        console.log(data)
-        setDynamicData(data)
-      })
-    }
-  }
+  const { dynamicId } = props.location.query
 
   const cancelPage = () => {
     router.push({
@@ -50,133 +214,6 @@ const Edit = (props) => {
     });
   }
 
-  const radioOnChange = e => {
-    console.log(e.target.value)
-    setDynamicData({ ...dynamicData, isEnlist: e.target.value })
-  }
-
-  const Basic = (props) => {
-    const fields = [
-      {
-        label: '所属项目',
-        name: 'buildingId',
-        render: <BuildSelect />,
-        value: dynamicData.buildingId,
-        rules: [
-          { required: true, message: '请选择所属项目' },
-        ]
-      },
-      {
-        label: '主图',
-        name: 'imgUrl',
-        type: FieldTypes.ImageUploader,
-        value: dynamicData.imgUrl,
-        help: '建议图片尺寸：750px*560px',
-      },
-      {
-        label: '活动标题',
-        name: 'title',
-        type: FieldTypes.Text,
-        value: dynamicData.title,
-        rules: [
-          { required: true, message: '请输入活动标题' },
-        ]
-      },
-      {
-        label: '活动时间',
-        name: 'activityTime',
-        type: FieldTypes.RangePicker,
-        value: dynamicData.startDate != null ? [moment(dynamicData.startDate, 'YYYY-MM-DD HH:mm'), moment(dynamicData.endDate, 'YYYY-MM-DD HH:mm')] : null,
-        props: {showTime:{ format: 'HH:mm' }},
-        rules: [
-          { required: true, message: '请选择活动时间' },
-        ]
-      },
-      {
-        label: '活动地点',
-        name: 'address',
-        type: FieldTypes.Text,
-        value: dynamicData.address,
-        rules: [
-          { required: true, message: '请输入活动地点' },
-        ]
-      },
-      {
-        label: '活动人数',
-        name: 'personNum',
-        type: FieldTypes.Text,
-        value: dynamicData.personNum,
-        rules: [
-          { required: true, message: '请输入活动人数' },
-        ]
-      },
-      {
-        label: '最大报名人数',
-        name: 'maxEnlistByPerson',
-        type: FieldTypes.Text,
-        value: dynamicData.maxEnlistByPerson,
-        rules: [
-          { required: true, message: '请输入最大报名人数' },
-        ]
-      },
-      {
-        label: '活动详情',
-        name: 'desc',
-        render: <Wangedit />,
-        value: dynamicData.desc,
-      },
-      {
-        label: '是否需要报名',
-        name: 'isEnlist',
-        render: <Radio.Group name="radiogroup" onChange={(e) => radioOnChange(e)}>
-          <Radio value={1}>是</Radio>
-          <Radio value={0}>否</Radio>
-        </Radio.Group>,
-        value: dynamicData.isEnlist != null ? dynamicData.isEnlist - 0 : 1,
-      },
-      {
-        label: '报名时间',
-        name: 'signupTime',
-        // type: FieldTypes.RangePicker,
-        render: dynamicData.isEnlist === 1 ? (<RangePicker format={ 'YYYY/MM/DD HH:mm' } style={{ width: '100%' }} />) : '',
-        value: dynamicData.enlistStart != null ? [moment(dynamicData.enlistStart, 'YYYY-MM-DD HH:mm'), moment(dynamicData.enlistEnd, 'YYYY-MM-DD HH:mm')] : null,
-        // props: {showTime:{ format: 'HH:mm' }},
-        rules: [
-          { required: true, message: '请选择报名时间' },
-        ]
-      },
-    ]
-
-    const handleSubmit = val => {
-      let { activityTime, signupTime, ...submitValue } = val
-      const [startDate, endDate] = activityTime
-      submitValue.startDate = moment(startDate).format('YYYY-MM-DD HH:mm');
-      submitValue.endDate = moment(endDate).format('YYYY-MM-DD HH:mm');
-      const [enlistStart, enlistEnd] = signupTime
-      submitValue.enlistStart = moment(enlistStart).format('YYYY-MM-DD HH:mm');
-      submitValue.enlistEnd = moment(enlistEnd).format('YYYY-MM-DD HH:mm');
-      console.log('submit data --->', submitValue)
-      if (dynamicId) {
-        submitValue.dynamicId = dynamicId
-        request({ ...apis.activity.update, data: submitValue }).then((data) => {
-          message.info("保存成功")
-          cancelPage()
-        }).catch((err) => {
-          message.info(err.msg || err.message)
-        })
-      } else {
-        request({ ...apis.activity.add, data: submitValue }).then((data) => {
-          message.info("保存成功")
-          cancelPage()
-        }).catch((err) => {
-          message.info(err.msg || err.message)
-        })
-      }
-    }
-
-    return <XForm onSubmit={handleSubmit} onCancel={cancelPage} fields={fields}></XForm>
-  }
-
   const Poster = (props) => {
     const [inputValue, changeInput] = useState('')
     const [textAreaValue, changeTextArea] = useState('')
@@ -244,8 +281,13 @@ const Edit = (props) => {
               <span style={{ color: '#999', margin: '25px 0 0 60px', fontSize: '17px' }}>2019.09.21</span>
             </div>
             <p style={{
-              margin: '10px 20px', fontSize: '20px', color: '#222', fontWeight: '600',
-              display: '-webkit-box', lineClamp: '3', height: '60px',
+              margin: '10px 20px',
+fontSize: '20px',
+color: '#222',
+fontWeight: '600',
+              display: '-webkit-box',
+lineClamp: '3',
+height: '60px',
               WebkitLineClamp: '2',
               WebkitBoxOrient: 'vertical',
               overflow: 'hidden',
@@ -254,8 +296,12 @@ const Edit = (props) => {
 
             <img src={yinhao} style={{ width: '30px', marginLeft: '20px' }} alt="" />
             <p style={{
-              margin: '16px 20px 28px 20px', fontSize: '17px', color: '#999',
-              display: '-webkit-box', lineClamp: '3', height: '72px',
+              margin: '16px 20px 28px 20px',
+fontSize: '17px',
+color: '#999',
+              display: '-webkit-box',
+lineClamp: '3',
+height: '72px',
               WebkitLineClamp: '3',
               WebkitBoxOrient: 'vertical',
               overflow: 'hidden',
@@ -326,7 +372,7 @@ const Edit = (props) => {
           request({ ...apis.activity.addShareContent, data: { targetId: dynamicId, shareContentType: 'activity', shareContentImg: imgValue, shareContentTitle: inputValue }, }).then((data) => {
             setShareContentId(data.shareContentId)
             message.info("保存成功")
-          }).catch((err) => {
+          }).catch(err => {
             message.info(err.msg || err.message)
           })
         }
@@ -367,7 +413,7 @@ const Edit = (props) => {
         </Radio.Group>
       </div>
       <div>
-        {tab === 'basic' && <Basic />}
+        {tab === 'basic' && <Basic dynamicId={dynamicId} />}
         {tab === 'poster' && <Poster />}
         {tab === 'share' && <Share />}
       </div>
@@ -375,6 +421,4 @@ const Edit = (props) => {
   );
 }
 
-
-
 export default Edit