|
@@ -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
|
})
|