feats

src/components/Poster/Form.jsx

@@ -1,6 +1,7 @@
-import React from 'react'
-import { Button, Form, Input } from 'antd'
+import React, { useEffect, useState } from 'react'
+import { Button, Form, Input, message } from 'antd'
 import ImageUpload from '@/components/XForm/ImageUpload'
+import { fetch, apis } from '@/utils/request'
 
 const formItemLayout = {
   labelCol: {
@@ -13,16 +14,73 @@ const formItemLayout = {
   },
 }
 
+const getData = fetch(apis.activity.poster)
+const saveData = fetch(apis.activity.addPoster)
+const updateData = fetch(apis.activity.updatePoster)
+
 const PosterForm = (props) => {
-  const { form } = props
-  const { getFieldDecorator } = form
+  const { form, targetId, targetType } = props
+  const { getFieldDecorator, resetFields, setFieldsValue, validateFields } = form
+
+  const [formData, setFormData] = useState()
+  const [loading, setLoading] = useState(false)
 
   const handleImageChange = (img) => {
     props.onImageChange(img)
   }
 
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    validateFields((err, values) => {
+      if (err) {
+        console.error(err)
+        return
+      }
+
+      const request = formData.posterId ? updateData : saveData
+      const urlData = formData.posterId ? { id: formData.posterId } : undefined
+      const data = {
+        targetId,
+        targetType,
+        ...(formData || {}),
+        ...values,
+      }
+
+      setLoading(true)
+      request({ urlData, data }).then((res) => {
+        setLoading(false)
+        setFormData(res)
+        message.success('操作成功')
+      }).catch((err) => {
+        setLoading(false)
+        console.error(err)
+      })
+    })
+  }
+
+  useEffect(() => {
+    if (targetId && targetType) {
+      setLoading(true)
+      getData({ params: { targetId, targetType } }).then((res) => {
+        setFormData(res ? res[0] : undefined)
+        setLoading(false)
+      }).catch((err) => {
+        console.error(err)
+        setLoading(false)
+      })
+    }
+  }, [targetId, targetType])
+
+  useEffect(() => {
+    const { posterImg, posterTitle, posterDescription } = formData || {}
+
+    resetFields()
+    setFieldsValue({ posterImg, posterTitle, posterDescription })
+    handleImageChange(posterImg)
+  }, [formData])
+
   return (
-    <Form {...formItemLayout}>
+    <Form {...formItemLayout} onSubmit={handleSubmit}>
       <Form.Item label="海报图" help="图片建议尺寸：1080*1925px，比例9:16,格式：jpg">
       {getFieldDecorator('posterImg', {
           rules: [{ required: true, message: '请楼盘海报图' }],
@@ -35,8 +93,8 @@ const PosterForm = (props) => {
       {getFieldDecorator('posterDescription')(<Input.TextArea row={4} />)}
       </Form.Item>
       <Form.Item label=" " colon={false} style={{marginTop: '2em'}}>
-        <Button style={{marginLeft: '4em'}} type="primary" htmlType="submit">保存</Button>
-        <Button style={{marginLeft: '2em'}} onClick={props.onCancel}>取消</Button>
+        <Button loading={loading} style={{marginLeft: '4em'}} type="primary" htmlType="submit">保存</Button>
+        {/* <Button style={{marginLeft: '2em'}} onClick={props.onCancel}>取消</Button> */}
       </Form.Item>
     </Form>
   )

src/components/Poster/index.jsx

@@ -1,24 +1,29 @@
-import React, { useMemo, useState } from 'react'
+import React, { useState } from 'react'
 import { getImgURL } from '@/utils/image'
 import Preview from './Preview'
 import Form from './Form'
 import Styles from './style.less'
 
+const noop = x => x;
+
 export default (props) => {
-  const { target } = props
+  const { target, onCancel = noop } = props
   const { id: targetId, type: targetType } = target
 
-  const [poster, setPoster] = useState()
-
-  const posterImage = useMemo(() => (poster ? getImgURL(poster) : undefined), [poster]);
+  const [posterImg, setPosterImg] = useState()
 
   return (
     <div className={Styles['building-poster']}>
       <div className={Styles['poster-preview']}>
-        <Preview img={posterImage} />
+        <Preview img={getImgURL(posterImg)} />
       </div>
       <div className={Styles['poster-form']}>
-        <Form onImageChange={setPoster} />
+        <Form
+          targetId={targetId}
+          targetType={targetType}
+          onImageChange={setPosterImg}
+          onCancel={onCancel}
+        />
       </div>
     </div>
   )

src/components/Share/index.jsx

@@ -1,6 +1,7 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 import { Button, Form, Input } from 'antd'
 import ImageUpload from '@/components/XForm/ImageUpload'
+import { fetch, apis } from '@/utils/request'
 
 const formItemLayout = {
   labelCol: {
@@ -12,27 +13,82 @@ const formItemLayout = {
     sm: { span: 19 },
   },
 }
+const getData = fetch(apis.activity.shareContent)
+const saveData = fetch(apis.activity.addShareContent)
+const updateData = fetch(apis.activity.updateShareContent)
 
 const ShareForm = (props) => {
   const { target, form } = props
-  const { id: targetId, type: shareContentType } = target
-  const { getFieldDecorator } = form
+  const { id: targetId, type: targetType } = target
+  const { getFieldDecorator, resetFields, setFieldsValue, validateFields } = form
+
+  const [formData, setFormData] = useState()
+  const [loading, setLoading] = useState(false)
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    validateFields((err, values) => {
+      if (err) {
+        console.error(err)
+        return
+      }
+
+      const request = formData.shareContentId ? updateData : saveData
+      const urlData = formData.shareContentId ? { id: formData.shareContentId } : undefined
+      const data = {
+        targetId,
+        shareContentType: targetType,
+        ...(formData || {}),
+        ...values,
+      }
+
+      setLoading(true)
+      request({ urlData, data }).then((res) => {
+        setLoading(false)
+        setFormData(res)
+        message.success('操作成功')
+      }).catch((err) => {
+        setLoading(false)
+        console.error(err)
+      })
+    })
+  }
+
+  useEffect(() => {
+    if (targetId && targetType) {
+      setLoading(true)
+      getData({ params: { targetId, targetType } }).then((res) => {
+        setFormData(res ? res[0] : undefined)
+        setLoading(false)
+      }).catch((err) => {
+        console.error(err)
+        setLoading(false)
+      })
+    }
+  }, [targetId, targetType])
+
+  useEffect(() => {
+    const { shareContentImg, shareContentTitle } = formData || {}
+
+    resetFields()
+    setFieldsValue({ shareContentImg, shareContentTitle })
+  }, [formData])
 
   return (
-    <Form {...formItemLayout}>
+    <Form {...formItemLayout} onSubmit={handleSubmit}>
       <Form.Item label="分享标题">
       {getFieldDecorator('shareContentTitle', {
         rules: [{required: true, message: '请填写分享标题'}]
-      })(<Input />)}
+      })(<Input placeholder="建议不要超过20字" />)}
       </Form.Item>
       <Form.Item label="分享图" help="建议图片尺寸：750*600px，比例5:4,格式：jpg">
-      {getFieldDecorator('posterImg', {
+      {getFieldDecorator('shareContentImg', {
           rules: [{ required: true, message: '请上传分享图' }],
       })(<ImageUpload />)}
       </Form.Item>
       <Form.Item label=" " colon={false} style={{marginTop: '2em'}}>
-        <Button style={{marginLeft: '4em'}} type="primary" htmlType="submit">保存</Button>
-        <Button style={{marginLeft: '2em'}} onClick={props.onCancel}>取消</Button>
+        <Button loading={loading} style={{marginLeft: '4em'}} type="primary" htmlType="submit">保存</Button>
+        {/* <Button style={{marginLeft: '2em'}} onClick={props.onCancel}>取消</Button> */}
       </Form.Item>
     </Form>
   )

src/pages/building/Edit/Apartment/Form.jsx

@@ -12,7 +12,7 @@ const saveData = fetch(apis.building.buildingApartmentAdd)
 const updateData = fetch(apis.building.buildingApartmentUpdate)
 
 const AMForm = (props) => {
-  const { visible, onCancel, form, onSubmit } = props
+  const { visible, onCancel, form, formData, onSuccess } = props
   const { getFieldDecorator, setFieldsValue, resetFields, validateFields } = form
 
   const [loading, setLoading] = useState(false)
@@ -25,9 +25,9 @@ const AMForm = (props) => {
         return
       }
 
-      const request = props.formData.apartmentId ? updateData : saveData
+      const request = formData && formData.apartmentId ? updateData : saveData
       const data = {
-        ...(props.formData),
+        ...(formData || {}),
         ...values,
       }
 
@@ -35,7 +35,7 @@ const AMForm = (props) => {
       request({ data }).then((res) => {
         setLoading(false)
         message.success('操作成功')
-        props.onSuccess(res)
+        onSuccess(res)
       }).catch((err) => {
         setLoading(false)
         console.error(err)
@@ -45,8 +45,8 @@ const AMForm = (props) => {
 
   useEffect(() => {
     resetFields()
-    setFieldsValue(props.formData || {})
-  }, [props.formData])
+    setFieldsValue(formData || {})
+  }, [formData])
 
   return (
     <ModalForm
@@ -55,9 +55,6 @@ const AMForm = (props) => {
       onCancel={onCancel}
       onSubmit={handleSubmit}
     >
-      <Form.Item label="编号" style={{ display: 'none' }}>
-          {getFieldDecorator('apartmentId')(<Input />)}
-      </Form.Item>
       <Form.Item label="户型名称">
         {getFieldDecorator('apartmentName', {
           rules: [

src/pages/building/Edit/Apartment/index.jsx

@@ -62,7 +62,7 @@ export default (props) => {
   return (
     <div>
       <div>
-        <Button type="primary" onClick={handleEdit}>新增户型</Button>
+        <Button type="primary" onClick={() => handleEdit()}>新增户型</Button>
       </div>
       <Form visible={visible} onCancel={() => setVisible(false)} formData={apartmentRef.current} onSuccess={handleSuccess} />
       <List loading={loading} dataSource={list} onEdit={handleEdit} onDelete={handleDelete} />

src/pages/building/Edit/index.jsx

@@ -15,7 +15,11 @@ import styles from './style.less'
 const { TabPane } = Tabs
 
 export default (props) => {
-  const target = { id: '', type: 'building' }
+  const { history } = props
+  const { query } = history.location
+  const { id } = query
+
+  const target = { id, type: 'building' }
 
   return (
     <Card>

src/utils/image.js

@@ -1,7 +1,9 @@
 
+const host = process.env.NODE_ENV !== 'production' ? 'https://xlk.njyz.tech' : ''
+
 export function getImgURL(img) {
     if (!img) return undefined;
+    if (img.indexOf('http') === 0) return img;
 
-    const isProd = process.env.NODE_ENV === 'production'
-    return isProd ? img : `https://xlk.njyz.tech${img}`;
+    return `${host}${img}`;
 }