feats

src/pages/building/Edit/Basic.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Row, Col, Form, Input, InputNumber, Radio, notification, Select } from 'antd'
+import { Button, Row, Col, DatePicker, Form, Input, InputNumber, Radio, notification, Select } from 'antd'
 import FileUpload from '@/components/XForm/FileUpload'
 import ImageUpload from '@/components/XForm/ImageUpload'
 import ImageListUpload from '@/components/XForm/ImageListUpload'
@@ -10,26 +10,17 @@ import BuildingType from './components/BuildingTypeSelect'
 import OpenTimePicker from './components/OpenTimePicker'
 import Amap from './components/Amap'
 import EditableArround from './components/EditableArround'
-import { formItemLayout, groupItemLayout } from './utils'
+import FormGroupItem, { gourpItemLayout } from './components/FormGroupItem'
+import { formItemLayout, validMinNum } from './utils'
 
 const fullWidth= { width: '100%' }
-
 const Item = Form.Item
-
-const GroupItem = ({children}) => (
-  <Row gutter={24}>
-    <Col span={12}>{children[0]}</Col>
-    <Col span={11}>{children[1]}</Col>
-  </Row>
-)
-
 const initPoiData = POI_TYPES.map((poi) => poi.key).reduce((acc, key) => ({ ...acc, [key]: undefined }), {})
 
 const BuildingBasic = React.forwardRef((props, ref) => {
   const [pois, setPois] = useState(initPoiData)
   const { form } = props;
   const { getFieldDecorator, getFieldValue, setFieldsValue } = form;
-
   
   // 视频文件上传前 回调
   const fileUploadBeforeUpload = (file, fileList) => {
@@ -53,15 +44,17 @@ const BuildingBasic = React.forwardRef((props, ref) => {
     }
 
     const lngLat = getFieldValue('coordinate').split(',')
+    let poisCopy = { ...pois }
 
     // 把支持的周边分类都去检索一遍
     POI_TYPES.forEach(({ key }) => {
       getPoiData({ type: key, location: lngLat, radius: e }).then(res => {
         const poiStr = (res.pois || []).map((p) => p.name).join(',')
-        setPois({
-          ...pois,
+        poisCopy = {
+          ...poisCopy,
           [key]: poiStr
-        })
+        }
+        setPois({ ...poisCopy })
       }).catch(err => {
         console.error(err)
         notification.error({ message: '周边数据获取失败' })
@@ -92,13 +85,13 @@ const BuildingBasic = React.forwardRef((props, ref) => {
       <Form.Item label="列表均价" help="项目列表展示价格，示例：约10000元/㎡、约1000万元/套起">
         {getFieldDecorator('price')(<Input />)}
       </Form.Item>
-      <GroupItem>
-        <Form.Item label="开盘时间" {...groupItemLayout.a} >
+      <FormGroupItem>
+        <Form.Item label="开盘时间" {...gourpItemLayout.ab.a} >
           {getFieldDecorator('openingDate')(
             <OpenTimePicker placeholder="请选择开盘时间" style={fullWidth} />
           )}
         </Form.Item>
-        <Form.Item label="电话" {...groupItemLayout.b } >
+        <Form.Item label="电话" {...gourpItemLayout.ab.b } >
           {getFieldDecorator('tel', {
             rules: [
               {
@@ -108,7 +101,7 @@ const BuildingBasic = React.forwardRef((props, ref) => {
             ],
           })(<Input placeholder="手机或者座机号码" />)}
         </Form.Item>
-      </GroupItem>
+      </FormGroupItem>
       <Form.Item label="项目说明" >
         {getFieldDecorator('dynamic')(<Input placeholder="项目动态等，不超过30个字" maxLength={30}/>)}
       </Form.Item>
@@ -133,20 +126,18 @@ const BuildingBasic = React.forwardRef((props, ref) => {
         )}
       </Form.Item>
 
-      <GroupItem>
-        <Form.Item label="项目视频" help="视频仅支持mp4格式，建议尺寸：750*600，比例5:4，用于楼盘详情" {...groupItemLayout.a} >
+      <FormGroupItem>
+        <Form.Item label="项目视频" help="视频仅支持mp4格式，建议尺寸：750*600，比例5:4，用于楼盘详情" {...gourpItemLayout.ab.a} >
           {getFieldDecorator('videoUrl')(
             <FileUpload accept=".mp4" beforeUpload={fileUploadBeforeUpload} label="上传视频" size={1} />,
           )}
         </Form.Item>
         <Form.Item label="视频封面图" help="建议图片尺寸：750*600px，比例5:4,格式：jpg，用于视频封面" labelCol={{span: 8}} wrapperCol={{span:16}}>
-          {getFieldDecorator('videoImage', {
-            rules: [{ required: true, message: '请选择视频封面图' }],
-          })(
+          {getFieldDecorator('videoImage')(
             <ImageUpload />,
           )}
         </Form.Item>
-      </GroupItem>
+      </FormGroupItem>
       <Form.Item label="楼盘主图" help="建议图片尺寸：750*600px，比例5:4,格式：jpg，用于楼盘详情">
         {getFieldDecorator('avatarImage', {
           rules: [{ required: true, message: '请选择项目主图' }],
@@ -161,8 +152,8 @@ const BuildingBasic = React.forwardRef((props, ref) => {
           <ImageUpload />,
         )}
       </Form.Item>
-      <GroupItem>
-        <Form.Item label="首页推荐" {...groupItemLayout.a} >
+      <FormGroupItem>
+        <Form.Item label="首页推荐" {...gourpItemLayout.ab.a} >
           {getFieldDecorator('isMain', { initialValue: 1 })(
             <Radio.Group>
               <Radio value={1}>是</Radio>
@@ -170,24 +161,24 @@ const BuildingBasic = React.forwardRef((props, ref) => {
             </Radio.Group>,
           )}
         </Form.Item>
-        <Form.Item label="排序" help="数值越大，楼盘在小程序列表页中展示越靠前" {...groupItemLayout.b}>
+        <Form.Item label="排序" help="数值越大，楼盘在小程序列表页中展示越靠前" {...gourpItemLayout.ab.b}>
           {getFieldDecorator('orderNo')(<InputNumber min={0} style={fullWidth} />)}
         </Form.Item>
-      </GroupItem>
-      <GroupItem>
-        <Form.Item label="所在城市" {...groupItemLayout.a } >
+      </FormGroupItem>
+      <FormGroupItem>
+        <Form.Item label="所在城市" {...gourpItemLayout.ab.a } >
           {getFieldDecorator('cityId', {
             rules: [{ required: true, message: '请选择城市' }],
           })(
             <SelectCity style={fullWidth} />,
           )}
         </Form.Item>
-        <Form.Item label="楼盘区域" {...groupItemLayout.b } >
+        <Form.Item label="楼盘区域" {...gourpItemLayout.ab.b } >
           {getFieldDecorator('buildingArea', {
             rules: [{ required: true, message: '请输入楼盘区域' }],
           })(<AreaSelect style={fullWidth} />)}
         </Form.Item>
-      </GroupItem>
+      </FormGroupItem>
       <Form.Item label="项目地址" >
         {getFieldDecorator('address', {
           rules: [{ required: true, message: '请输入项目地址' }],
@@ -240,7 +231,114 @@ const BuildingBasic = React.forwardRef((props, ref) => {
           <EditableArround pois={pois[POI_TYPES_KETY.Restaurant]} />,
         )}
       </Form.Item>
+      <FormGroupItem>
+        <Form.Item label="绿化率" {...gourpItemLayout.ab.a } >
+          {getFieldDecorator('greeningRate')(<Input />)}
+        </Form.Item>
+        <Form.Item label="容积率" {...gourpItemLayout.ab.b }>
+          {getFieldDecorator('volumeRate')(<Input />)}
+        </Form.Item>
+      </FormGroupItem>
+      <FormGroupItem>
+        <Form.Item label="车位数量" {...gourpItemLayout.ab.a }>
+          {getFieldDecorator('parkingRate', {
+            rules: [{ validator: validMinNum }]
+          })(<InputNumber min={0} style={fullWidth}/>)}
+        </Form.Item>
+        <Form.Item label="规划户数" {...gourpItemLayout.ab.b }>
+          {getFieldDecorator('familyNum', {
+            rules: [{ validator: validMinNum }]
+          })(<InputNumber min={0} style={fullWidth}/>)}
+        </Form.Item>
+      </FormGroupItem>
+      <FormGroupItem>
+        <Form.Item label="供水" {...gourpItemLayout.abc.a }>
+          {getFieldDecorator('waterSupply')(
+            <Select style={fullWidth}>
+              <Select.Option value="民水">民水</Select.Option>
+              <Select.Option value="商用">商用</Select.Option>
+            </Select>
+          )}
+        </Form.Item>
+        <Form.Item label="供电" {...gourpItemLayout.abc.b }>
+          {getFieldDecorator('powerSupply')(
+            <Select style={fullWidth}>
+              <Select.Option value="民电">民电</Select.Option>
+              <Select.Option value="商用">商用</Select.Option>
+            </Select>
+          )}
+        </Form.Item>
+        <Form.Item label="供暖" {...gourpItemLayout.abc.c }>
+          {getFieldDecorator('heatingSupply')(
+            <Select style={fullWidth}>
+              <Select.Option value="集中供暖">集中供暖</Select.Option>
+              <Select.Option value="自采暖">自采暖</Select.Option>
+            </Select>
+          )}
+        </Form.Item>
+      </FormGroupItem>
+      <Form.Item label="物业公司" >
+        {getFieldDecorator('serviceCompany', {
+          rules: [{ max: 30, message: '不超过30个字' }]
+        })(<Input placeholder="不超过30个字"/>)}
+      </Form.Item>
+      <Form.Item label="物业费" >
+        {getFieldDecorator('serviceFee', {
+          rules: [{ max: 30, message: '不超过30个字' }]
+        })(<Input placeholder="不超过30个字"/>)}
+      </Form.Item>
+      <FormGroupItem>
+        <Form.Item label="装修标准" {...gourpItemLayout.ab.a }>
+          {getFieldDecorator('decoration')(
+            <Select style={fullWidth}>
+              <Select.Option value="精装">精装</Select.Option>
+              <Select.Option value="毛坯">毛坯</Select.Option>
+            </Select>
+          )}
+        </Form.Item>
+        <Form.Item label="楼栋总数" {...gourpItemLayout.ab.b }>
+          {getFieldDecorator('buildingNum', {
+            rules: [{ validator: validMinNum }]
+          })(<InputNumber style={fullWidth}/>)}
+        </Form.Item>
+      </FormGroupItem>
+      <FormGroupItem>
+        <Form.Item label="交房时间" {...gourpItemLayout.ab.a }>
+          {getFieldDecorator('receivedDate')(<DatePicker style={fullWidth}/>)}
+        </Form.Item>
+        <Form.Item label="产权年限" {...gourpItemLayout.ab.b }>
+          {getFieldDecorator('rightsYear', {
+            rules: [{ validator: validMinNum }]
+          })(<InputNumber style={fullWidth}/>)}
+        </Form.Item>
+      </FormGroupItem>
+      <Form.Item label="品牌开发商" help="【品牌开发商】与【开发商】二选一">
+        {getFieldDecorator('brandId')(<Select style={fullWidth}></Select>)}
+      </Form.Item>
+      <Form.Item label="开发商" >
+        {getFieldDecorator('propertyDeveloper', {
+          rules: [{ max: 30, message: '不超过30个字' }]
+        })(<Input placeholder="不超过30个字"/>)}
+      </Form.Item>
+      <Form.Item label="备案名" >
+        {getFieldDecorator('recordName', {
+          rules: [{ max: 30, message: '不超过30个字' }]
+        })(<Input placeholder="不超过30个字" />)}
+      </Form.Item>
+      <Form.Item label="预售许可证" >
+        {getFieldDecorator('preSalePermit')(
+          <ImageUpload />,
+        )}
+      </Form.Item>
 
+      <Form.Item label=" " colon={false}>
+        <Button style={{marginLeft: '6em'}} type="primary" htmlType="submit">
+            确定
+        </Button>
+        <Button style={{marginLeft: '2em'}} onClick={() => router.go(-1)}>
+            取消
+        </Button>
+      </Form.Item>
     </Form>
   )
 })

src/pages/building/Edit/components/Amap/index.jsx

@@ -15,6 +15,7 @@ export default (props) => {
   const handleClick = (e) => {
     const { lnglat } = e
     const pos = [lnglat.getLng(), lnglat.getLat()]
+    posMarker.current.setMap(map.current);
     setCurrentPos(pos)
     props.onChange(pos.join(','))
   }
@@ -36,10 +37,13 @@ export default (props) => {
       // 当前选中点 - 初始的时候没有定位
       posMarker.current = newMarker(AMap, {
         active: true,
-        map: instance,
         position: props.value ? props.value.split(',') : undefined,
       })
 
+      if (props.value) {
+        posMarker.current.setMap(instance);
+      }
+
       // POI 搜索
       autoPoi(instance, AMap, inputRef, { click: handleClick })
 

src/pages/building/Edit/components/Amap/utils.js

@@ -61,6 +61,7 @@ export function autoPoi(map, AMap, inputRef, evt) {
       marker.on('click', evt.click)
       markers.push(marker)
     })
+    // map.setZoom(18);
     map.setFitView();
   }
   

src/pages/building/Edit/components/EditableArround/utils.js

@@ -19,7 +19,7 @@ export function arrAdd(src, add) {
     return src;
   }
 
-  if (!src || add.length < 1) {
+  if (!src && add.length > 0) {
     return [...add]
   }
 
@@ -31,5 +31,5 @@ export function arrAdd(src, add) {
     }
   })
 
-  return src;
+  return nwTags;
 }

src/pages/building/Edit/components/FormGroupItem/ThreeParts.jsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { Row, Col } from 'antd'
+
+export default (props) => {
+  return (
+    <Row>
+      <Col span={8}>{props.children[0]}</Col>
+      <Col span={8}>{props.children[1]}</Col>
+      <Col span={8}>{props.children[2]}</Col>
+    </Row>
+  )
+}

src/pages/building/Edit/components/FormGroupItem/TwoParts.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { Row, Col } from 'antd'
+
+export default (props) => {
+  return (
+    <Row gutter={24}>
+      <Col span={12}>{props.children[0]}</Col>
+      <Col span={11}>{props.children[1]}</Col>
+    </Row>
+  )
+}

src/pages/building/Edit/components/FormGroupItem/index.jsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import TwoParts from './TwoParts'
+import ThreeParts from './ThreeParts'
+
+export const gourpItemLayout = {
+  ab: {
+    a: {
+      labelCol:{ span: 6 },
+      wrapperCol:{ span:18 },
+    },
+    b: {
+      labelCol:{ span: 4 },
+      wrapperCol:{ span:18 }
+    },
+  },
+  abc: {
+    a: {
+      labelCol:{ span: 9 },
+      wrapperCol:{ span:14 }
+    },
+    b: {
+      labelCol:{ span: 4 },
+      wrapperCol:{ span:16 }
+    },
+    c: {
+      labelCol:{ span: 3 },
+      wrapperCol:{ span:16 }
+    },
+  }
+}
+
+export default (props) => {
+  const len = React.Children.count(props.children)
+
+  if (len !== 2 && len !== 3) {
+    throw new Error('FormGroupItem 仅支持2或3个子元素')
+  }
+
+  const Wrapper = len === 2 ? TwoParts : ThreeParts
+  return <Wrapper>{props.children}</Wrapper>
+}

src/pages/building/Edit/utils.js

@@ -10,13 +10,10 @@ export const formItemLayout = {
   },
 }
 
-export const groupItemLayout = {
-  a: {
-    labelCol:{ span: 6 },
-    wrapperCol:{ span:18 }
-  },
-  b: {
-    labelCol:{ span: 4 },
-    wrapperCol:{ span:18 }
+export const validMinNum = (rule, value, callback) => {
+  if (value < 0) {
+    return callback('请输入大于0的数字')
   }
+
+  return callback()
 }