Your Name 3 年前
父节点
当前提交
784375b302

+ 131
- 33
src/pages/building/Edit/Basic.jsx 查看文件

@@ -1,5 +1,5 @@
1 1
 import React, { useState } from 'react'
2
-import { Row, Col, Form, Input, InputNumber, Radio, notification, Select } from 'antd'
2
+import { Button, Row, Col, DatePicker, Form, Input, InputNumber, Radio, notification, Select } from 'antd'
3 3
 import FileUpload from '@/components/XForm/FileUpload'
4 4
 import ImageUpload from '@/components/XForm/ImageUpload'
5 5
 import ImageListUpload from '@/components/XForm/ImageListUpload'
@@ -10,26 +10,17 @@ import BuildingType from './components/BuildingTypeSelect'
10 10
 import OpenTimePicker from './components/OpenTimePicker'
11 11
 import Amap from './components/Amap'
12 12
 import EditableArround from './components/EditableArround'
13
-import { formItemLayout, groupItemLayout } from './utils'
13
+import FormGroupItem, { gourpItemLayout } from './components/FormGroupItem'
14
+import { formItemLayout, validMinNum } from './utils'
14 15
 
15 16
 const fullWidth= { width: '100%' }
16
-
17 17
 const Item = Form.Item
18
-
19
-const GroupItem = ({children}) => (
20
-  <Row gutter={24}>
21
-    <Col span={12}>{children[0]}</Col>
22
-    <Col span={11}>{children[1]}</Col>
23
-  </Row>
24
-)
25
-
26 18
 const initPoiData = POI_TYPES.map((poi) => poi.key).reduce((acc, key) => ({ ...acc, [key]: undefined }), {})
27 19
 
28 20
 const BuildingBasic = React.forwardRef((props, ref) => {
29 21
   const [pois, setPois] = useState(initPoiData)
30 22
   const { form } = props;
31 23
   const { getFieldDecorator, getFieldValue, setFieldsValue } = form;
32
-
33 24
   
34 25
   // 视频文件上传前 回调
35 26
   const fileUploadBeforeUpload = (file, fileList) => {
@@ -53,15 +44,17 @@ const BuildingBasic = React.forwardRef((props, ref) => {
53 44
     }
54 45
 
55 46
     const lngLat = getFieldValue('coordinate').split(',')
47
+    let poisCopy = { ...pois }
56 48
 
57 49
     // 把支持的周边分类都去检索一遍
58 50
     POI_TYPES.forEach(({ key }) => {
59 51
       getPoiData({ type: key, location: lngLat, radius: e }).then(res => {
60 52
         const poiStr = (res.pois || []).map((p) => p.name).join(',')
61
-        setPois({
62
-          ...pois,
53
+        poisCopy = {
54
+          ...poisCopy,
63 55
           [key]: poiStr
64
-        })
56
+        }
57
+        setPois({ ...poisCopy })
65 58
       }).catch(err => {
66 59
         console.error(err)
67 60
         notification.error({ message: '周边数据获取失败' })
@@ -92,13 +85,13 @@ const BuildingBasic = React.forwardRef((props, ref) => {
92 85
       <Form.Item label="列表均价" help="项目列表展示价格,示例:约10000元/㎡、约1000万元/套起">
93 86
         {getFieldDecorator('price')(<Input />)}
94 87
       </Form.Item>
95
-      <GroupItem>
96
-        <Form.Item label="开盘时间" {...groupItemLayout.a} >
88
+      <FormGroupItem>
89
+        <Form.Item label="开盘时间" {...gourpItemLayout.ab.a} >
97 90
           {getFieldDecorator('openingDate')(
98 91
             <OpenTimePicker placeholder="请选择开盘时间" style={fullWidth} />
99 92
           )}
100 93
         </Form.Item>
101
-        <Form.Item label="电话" {...groupItemLayout.b } >
94
+        <Form.Item label="电话" {...gourpItemLayout.ab.b } >
102 95
           {getFieldDecorator('tel', {
103 96
             rules: [
104 97
               {
@@ -108,7 +101,7 @@ const BuildingBasic = React.forwardRef((props, ref) => {
108 101
             ],
109 102
           })(<Input placeholder="手机或者座机号码" />)}
110 103
         </Form.Item>
111
-      </GroupItem>
104
+      </FormGroupItem>
112 105
       <Form.Item label="项目说明" >
113 106
         {getFieldDecorator('dynamic')(<Input placeholder="项目动态等,不超过30个字" maxLength={30}/>)}
114 107
       </Form.Item>
@@ -133,20 +126,18 @@ const BuildingBasic = React.forwardRef((props, ref) => {
133 126
         )}
134 127
       </Form.Item>
135 128
 
136
-      <GroupItem>
137
-        <Form.Item label="项目视频" help="视频仅支持mp4格式,建议尺寸:750*600,比例5:4,用于楼盘详情" {...groupItemLayout.a} >
129
+      <FormGroupItem>
130
+        <Form.Item label="项目视频" help="视频仅支持mp4格式,建议尺寸:750*600,比例5:4,用于楼盘详情" {...gourpItemLayout.ab.a} >
138 131
           {getFieldDecorator('videoUrl')(
139 132
             <FileUpload accept=".mp4" beforeUpload={fileUploadBeforeUpload} label="上传视频" size={1} />,
140 133
           )}
141 134
         </Form.Item>
142 135
         <Form.Item label="视频封面图" help="建议图片尺寸:750*600px,比例5:4,格式:jpg,用于视频封面" labelCol={{span: 8}} wrapperCol={{span:16}}>
143
-          {getFieldDecorator('videoImage', {
144
-            rules: [{ required: true, message: '请选择视频封面图' }],
145
-          })(
136
+          {getFieldDecorator('videoImage')(
146 137
             <ImageUpload />,
147 138
           )}
148 139
         </Form.Item>
149
-      </GroupItem>
140
+      </FormGroupItem>
150 141
       <Form.Item label="楼盘主图" help="建议图片尺寸:750*600px,比例5:4,格式:jpg,用于楼盘详情">
151 142
         {getFieldDecorator('avatarImage', {
152 143
           rules: [{ required: true, message: '请选择项目主图' }],
@@ -161,8 +152,8 @@ const BuildingBasic = React.forwardRef((props, ref) => {
161 152
           <ImageUpload />,
162 153
         )}
163 154
       </Form.Item>
164
-      <GroupItem>
165
-        <Form.Item label="首页推荐" {...groupItemLayout.a} >
155
+      <FormGroupItem>
156
+        <Form.Item label="首页推荐" {...gourpItemLayout.ab.a} >
166 157
           {getFieldDecorator('isMain', { initialValue: 1 })(
167 158
             <Radio.Group>
168 159
               <Radio value={1}>是</Radio>
@@ -170,24 +161,24 @@ const BuildingBasic = React.forwardRef((props, ref) => {
170 161
             </Radio.Group>,
171 162
           )}
172 163
         </Form.Item>
173
-        <Form.Item label="排序" help="数值越大,楼盘在小程序列表页中展示越靠前" {...groupItemLayout.b}>
164
+        <Form.Item label="排序" help="数值越大,楼盘在小程序列表页中展示越靠前" {...gourpItemLayout.ab.b}>
174 165
           {getFieldDecorator('orderNo')(<InputNumber min={0} style={fullWidth} />)}
175 166
         </Form.Item>
176
-      </GroupItem>
177
-      <GroupItem>
178
-        <Form.Item label="所在城市" {...groupItemLayout.a } >
167
+      </FormGroupItem>
168
+      <FormGroupItem>
169
+        <Form.Item label="所在城市" {...gourpItemLayout.ab.a } >
179 170
           {getFieldDecorator('cityId', {
180 171
             rules: [{ required: true, message: '请选择城市' }],
181 172
           })(
182 173
             <SelectCity style={fullWidth} />,
183 174
           )}
184 175
         </Form.Item>
185
-        <Form.Item label="楼盘区域" {...groupItemLayout.b } >
176
+        <Form.Item label="楼盘区域" {...gourpItemLayout.ab.b } >
186 177
           {getFieldDecorator('buildingArea', {
187 178
             rules: [{ required: true, message: '请输入楼盘区域' }],
188 179
           })(<AreaSelect style={fullWidth} />)}
189 180
         </Form.Item>
190
-      </GroupItem>
181
+      </FormGroupItem>
191 182
       <Form.Item label="项目地址" >
192 183
         {getFieldDecorator('address', {
193 184
           rules: [{ required: true, message: '请输入项目地址' }],
@@ -240,7 +231,114 @@ const BuildingBasic = React.forwardRef((props, ref) => {
240 231
           <EditableArround pois={pois[POI_TYPES_KETY.Restaurant]} />,
241 232
         )}
242 233
       </Form.Item>
234
+      <FormGroupItem>
235
+        <Form.Item label="绿化率" {...gourpItemLayout.ab.a } >
236
+          {getFieldDecorator('greeningRate')(<Input />)}
237
+        </Form.Item>
238
+        <Form.Item label="容积率" {...gourpItemLayout.ab.b }>
239
+          {getFieldDecorator('volumeRate')(<Input />)}
240
+        </Form.Item>
241
+      </FormGroupItem>
242
+      <FormGroupItem>
243
+        <Form.Item label="车位数量" {...gourpItemLayout.ab.a }>
244
+          {getFieldDecorator('parkingRate', {
245
+            rules: [{ validator: validMinNum }]
246
+          })(<InputNumber min={0} style={fullWidth}/>)}
247
+        </Form.Item>
248
+        <Form.Item label="规划户数" {...gourpItemLayout.ab.b }>
249
+          {getFieldDecorator('familyNum', {
250
+            rules: [{ validator: validMinNum }]
251
+          })(<InputNumber min={0} style={fullWidth}/>)}
252
+        </Form.Item>
253
+      </FormGroupItem>
254
+      <FormGroupItem>
255
+        <Form.Item label="供水" {...gourpItemLayout.abc.a }>
256
+          {getFieldDecorator('waterSupply')(
257
+            <Select style={fullWidth}>
258
+              <Select.Option value="民水">民水</Select.Option>
259
+              <Select.Option value="商用">商用</Select.Option>
260
+            </Select>
261
+          )}
262
+        </Form.Item>
263
+        <Form.Item label="供电" {...gourpItemLayout.abc.b }>
264
+          {getFieldDecorator('powerSupply')(
265
+            <Select style={fullWidth}>
266
+              <Select.Option value="民电">民电</Select.Option>
267
+              <Select.Option value="商用">商用</Select.Option>
268
+            </Select>
269
+          )}
270
+        </Form.Item>
271
+        <Form.Item label="供暖" {...gourpItemLayout.abc.c }>
272
+          {getFieldDecorator('heatingSupply')(
273
+            <Select style={fullWidth}>
274
+              <Select.Option value="集中供暖">集中供暖</Select.Option>
275
+              <Select.Option value="自采暖">自采暖</Select.Option>
276
+            </Select>
277
+          )}
278
+        </Form.Item>
279
+      </FormGroupItem>
280
+      <Form.Item label="物业公司" >
281
+        {getFieldDecorator('serviceCompany', {
282
+          rules: [{ max: 30, message: '不超过30个字' }]
283
+        })(<Input placeholder="不超过30个字"/>)}
284
+      </Form.Item>
285
+      <Form.Item label="物业费" >
286
+        {getFieldDecorator('serviceFee', {
287
+          rules: [{ max: 30, message: '不超过30个字' }]
288
+        })(<Input placeholder="不超过30个字"/>)}
289
+      </Form.Item>
290
+      <FormGroupItem>
291
+        <Form.Item label="装修标准" {...gourpItemLayout.ab.a }>
292
+          {getFieldDecorator('decoration')(
293
+            <Select style={fullWidth}>
294
+              <Select.Option value="精装">精装</Select.Option>
295
+              <Select.Option value="毛坯">毛坯</Select.Option>
296
+            </Select>
297
+          )}
298
+        </Form.Item>
299
+        <Form.Item label="楼栋总数" {...gourpItemLayout.ab.b }>
300
+          {getFieldDecorator('buildingNum', {
301
+            rules: [{ validator: validMinNum }]
302
+          })(<InputNumber style={fullWidth}/>)}
303
+        </Form.Item>
304
+      </FormGroupItem>
305
+      <FormGroupItem>
306
+        <Form.Item label="交房时间" {...gourpItemLayout.ab.a }>
307
+          {getFieldDecorator('receivedDate')(<DatePicker style={fullWidth}/>)}
308
+        </Form.Item>
309
+        <Form.Item label="产权年限" {...gourpItemLayout.ab.b }>
310
+          {getFieldDecorator('rightsYear', {
311
+            rules: [{ validator: validMinNum }]
312
+          })(<InputNumber style={fullWidth}/>)}
313
+        </Form.Item>
314
+      </FormGroupItem>
315
+      <Form.Item label="品牌开发商" help="【品牌开发商】与【开发商】二选一">
316
+        {getFieldDecorator('brandId')(<Select style={fullWidth}></Select>)}
317
+      </Form.Item>
318
+      <Form.Item label="开发商" >
319
+        {getFieldDecorator('propertyDeveloper', {
320
+          rules: [{ max: 30, message: '不超过30个字' }]
321
+        })(<Input placeholder="不超过30个字"/>)}
322
+      </Form.Item>
323
+      <Form.Item label="备案名" >
324
+        {getFieldDecorator('recordName', {
325
+          rules: [{ max: 30, message: '不超过30个字' }]
326
+        })(<Input placeholder="不超过30个字" />)}
327
+      </Form.Item>
328
+      <Form.Item label="预售许可证" >
329
+        {getFieldDecorator('preSalePermit')(
330
+          <ImageUpload />,
331
+        )}
332
+      </Form.Item>
243 333
 
334
+      <Form.Item label=" " colon={false}>
335
+        <Button style={{marginLeft: '6em'}} type="primary" htmlType="submit">
336
+            确定
337
+        </Button>
338
+        <Button style={{marginLeft: '2em'}} onClick={() => router.go(-1)}>
339
+            取消
340
+        </Button>
341
+      </Form.Item>
244 342
     </Form>
245 343
   )
246 344
 })

+ 5
- 1
src/pages/building/Edit/components/Amap/index.jsx 查看文件

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

+ 1
- 0
src/pages/building/Edit/components/Amap/utils.js 查看文件

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

+ 2
- 2
src/pages/building/Edit/components/EditableArround/utils.js 查看文件

@@ -19,7 +19,7 @@ export function arrAdd(src, add) {
19 19
     return src;
20 20
   }
21 21
 
22
-  if (!src || add.length < 1) {
22
+  if (!src && add.length > 0) {
23 23
     return [...add]
24 24
   }
25 25
 
@@ -31,5 +31,5 @@ export function arrAdd(src, add) {
31 31
     }
32 32
   })
33 33
 
34
-  return src;
34
+  return nwTags;
35 35
 }

+ 12
- 0
src/pages/building/Edit/components/FormGroupItem/ThreeParts.jsx 查看文件

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

+ 11
- 0
src/pages/building/Edit/components/FormGroupItem/TwoParts.jsx 查看文件

@@ -0,0 +1,11 @@
1
+import React from 'react'
2
+import { Row, Col } from 'antd'
3
+
4
+export default (props) => {
5
+  return (
6
+    <Row gutter={24}>
7
+      <Col span={12}>{props.children[0]}</Col>
8
+      <Col span={11}>{props.children[1]}</Col>
9
+    </Row>
10
+  )
11
+}

+ 41
- 0
src/pages/building/Edit/components/FormGroupItem/index.jsx 查看文件

@@ -0,0 +1,41 @@
1
+import React from 'react'
2
+import TwoParts from './TwoParts'
3
+import ThreeParts from './ThreeParts'
4
+
5
+export const gourpItemLayout = {
6
+  ab: {
7
+    a: {
8
+      labelCol:{ span: 6 },
9
+      wrapperCol:{ span:18 },
10
+    },
11
+    b: {
12
+      labelCol:{ span: 4 },
13
+      wrapperCol:{ span:18 }
14
+    },
15
+  },
16
+  abc: {
17
+    a: {
18
+      labelCol:{ span: 9 },
19
+      wrapperCol:{ span:14 }
20
+    },
21
+    b: {
22
+      labelCol:{ span: 4 },
23
+      wrapperCol:{ span:16 }
24
+    },
25
+    c: {
26
+      labelCol:{ span: 3 },
27
+      wrapperCol:{ span:16 }
28
+    },
29
+  }
30
+}
31
+
32
+export default (props) => {
33
+  const len = React.Children.count(props.children)
34
+
35
+  if (len !== 2 && len !== 3) {
36
+    throw new Error('FormGroupItem 仅支持2或3个子元素')
37
+  }
38
+
39
+  const Wrapper = len === 2 ? TwoParts : ThreeParts
40
+  return <Wrapper>{props.children}</Wrapper>
41
+}

+ 5
- 8
src/pages/building/Edit/utils.js 查看文件

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