pc-admin/src/pages/building/Edit/Basic/index.jsx

import React, { useState } from 'react'
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'
import SelectCity from '@/components/SelectButton/CitySelect'
import AreaSelect from '@/components/SelectButton/AreaSelect'
import { POI_TYPES_KETY, POI_TYPES, getPoiData } from '@/utils/map'
import Amap from '../components/Amap'
import BuildingType from '../components/BuildingTypeSelect'
import OpenTimePicker from '../components/OpenTimePicker'
import EditableArround from '../components/EditableArround'
import FormGroupItem, { gourpItemLayout } from '../components/FormGroupItem'
import { formItemLayout, validMinNum } from '../utils'

const fullWidth= { width: '100%' }
const Item = Form.Item
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) => {
    return new Promise((resolve, reject) => {
      if (file.type === 'video/mp4' || file.type === '.mp4') {
          // setVideoImage(true)
          resolve(file)
      } else {
        notification.error({ message: '项目视频，仅支持MP4格式' })
        reject()
      }
    })
  }

  // 周边设施 回调
  function handleMapScopeChange(e) {
    const coordinateValue = getFieldValue('coordinate')
    if (!coordinateValue) {
      notification.error({ message: '请先选择项目坐标位置' })
      return
    }

    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(',')
        poisCopy = {
          ...poisCopy,
          [key]: poiStr
        }
        setPois({ ...poisCopy })
      }).catch(err => {
        console.error(err)
        notification.error({ message: '周边数据获取失败' })
      })
    })
  }

  return (
    <Form {...formItemLayout}>
      <Item label="项目Id" style={{ display: 'none' }}>
        {getFieldDecorator('buildingId')(<Input disabled />)}
      </Item>
      <Item label="楼盘编号" >
        {getFieldDecorator('code', {
          rules: [{ required: true, message: '请输入楼盘编号' }],
        })(<Input />)}
      </Item>
      <Item label="楼盘名称" >
        {getFieldDecorator('buildingName', {
          rules: [{ required: true, message: '请输入楼盘名' }],
        })(<Input />)}
      </Item>
      <Form.Item label="项目类型">
        {getFieldDecorator('buildingProjectType', {
          rules: [{ required: true, message: '请选择项目类型' }],
        })(<BuildingType />)}
      </Form.Item>
      <Form.Item label="列表均价" help="项目列表展示价格，示例：约10000元/㎡、约1000万元/套起">
        {getFieldDecorator('price')(<Input />)}
      </Form.Item>
      <FormGroupItem>
        <Form.Item label="开盘时间" {...gourpItemLayout.ab.a} >
          {getFieldDecorator('openingDate')(
            <OpenTimePicker placeholder="请选择开盘时间" style={fullWidth} />
          )}
        </Form.Item>
        <Form.Item label="电话" {...gourpItemLayout.ab.b } >
          {getFieldDecorator('tel', {
            rules: [
              {
                pattern: new RegExp('^[0-9]*$'),
                message: '请输入正确的电话号码',
              },
            ],
          })(<Input placeholder="手机或者座机号码" />)}
        </Form.Item>
      </FormGroupItem>
      <Form.Item label="项目说明" >
        {getFieldDecorator('dynamic')(<Input placeholder="项目动态等，不超过30个字" maxLength={30}/>)}
      </Form.Item>
      {/* <Form.Item label="物业类型" >
        {getFieldDecorator('propertyType')(<Input />)}
      </Form.Item> */}
      <Form.Item label="销售状态" >
        {getFieldDecorator('marketStatus', {
          rules: [{ required: true, message: '请选择销售状态' }],
        })(
          <Select placeholder="销售状态" style={fullWidth}>
            <Select.Option value="待售">待售</Select.Option>
            <Select.Option value="在售">在售</Select.Option>
            <Select.Option value="售罄">售罄</Select.Option>
            <Select.Option value="在租">在租</Select.Option>
          </Select>,
        )}
      </Form.Item>
      <Form.Item label="项目标签" >
        {getFieldDecorator('tag')(
          <Select mode="tags" placeholder="输入后选中" style={fullWidth} />
        )}
      </Form.Item>

      <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')(
            <ImageUpload />,
          )}
        </Form.Item>
      </FormGroupItem>
      <Form.Item label="楼盘主图" help="建议图片尺寸：750*600px，比例5:4,格式：jpg，用于楼盘详情">
        {getFieldDecorator('avatarImage', {
          rules: [{ required: true, message: '请选择项目主图' }],
        })(
          <ImageListUpload unlimited />,
        )}
      </Form.Item>
      <Form.Item label="楼盘封面图" help="建议图片尺寸：750*420px，比例16:9,格式：jpg，用于楼盘列表">
        {getFieldDecorator('listImage', {
          rules: [{ required: true, message: '请选择列表图' }],
        })(
          <ImageUpload />,
        )}
      </Form.Item>
      <FormGroupItem>
        <Form.Item label="首页推荐" {...gourpItemLayout.ab.a} >
          {getFieldDecorator('isMain', { initialValue: 1 })(
            <Radio.Group>
              <Radio value={1}>是</Radio>
              <Radio value={2}>否</Radio>
            </Radio.Group>,
          )}
        </Form.Item>
        <Form.Item label="排序" help="数值越大，楼盘在小程序列表页中展示越靠前" {...gourpItemLayout.ab.b}>
          {getFieldDecorator('orderNo')(<InputNumber min={0} style={fullWidth} />)}
        </Form.Item>
      </FormGroupItem>
      <FormGroupItem>
        <Form.Item label="所在城市" {...gourpItemLayout.ab.a } >
          {getFieldDecorator('cityId', {
            rules: [{ required: true, message: '请选择城市' }],
          })(
            <SelectCity style={fullWidth} />,
          )}
        </Form.Item>
        <Form.Item label="楼盘区域" {...gourpItemLayout.ab.b } >
          {getFieldDecorator('buildingArea', {
            rules: [{ required: true, message: '请输入楼盘区域' }],
          })(<AreaSelect style={fullWidth} />)}
        </Form.Item>
      </FormGroupItem>
      <Form.Item label="项目地址" >
        {getFieldDecorator('address', {
          rules: [{ required: true, message: '请输入项目地址' }],
        })(<Input />)}
      </Form.Item>
      <Form.Item label="项目坐标" >
        {getFieldDecorator('coordinate', {
          rules: [{ required: true, message: '请输入项目坐标' }],
        })(<Amap onChange={e => setFieldsValue({ coordinate: e })} />)}
      </Form.Item>
      <Form.Item label="周边范围" >
        {getFieldDecorator('mapScope', {
          rules: [{ required: true, message: '请选择周边设施搜索范围' }],
        })(
          <Select placeholder="周边设施搜索范围" style={fullWidth} onChange={handleMapScopeChange}>
            <Select.Option value={1000}>1公里</Select.Option>
            <Select.Option value={3000}>3公里</Select.Option>
            <Select.Option value={5000}>5公里</Select.Option>
            <Select.Option value={10000}>10公里</Select.Option>
          </Select>,
        )}
      </Form.Item>
      <Form.Item label="周边交通" >
        {getFieldDecorator('buildingTransport')(
          <EditableArround pois={pois[POI_TYPES_KETY.Transport]} />,
        )}
      </Form.Item>
      <Form.Item label="周边商业" >
        {getFieldDecorator('buildingMall')(
          <EditableArround pois={pois[POI_TYPES_KETY.Mall]} />,
        )}
      </Form.Item>
      <Form.Item label="周边学校" >
        {getFieldDecorator('buildingEdu')(
          <EditableArround pois={pois[POI_TYPES_KETY.Edu]} />,
        )}
      </Form.Item>
      <Form.Item label="周边医院" >
        {getFieldDecorator('buildingHospital')(
          <EditableArround pois={pois[POI_TYPES_KETY.Hospital]} />,
        )}
      </Form.Item>
      <Form.Item label="周边银行" >
        {getFieldDecorator('buildingBank')(
          <EditableArround pois={pois[POI_TYPES_KETY.Bank]} />,
        )}
      </Form.Item>
      <Form.Item label="周边餐饮" >
        {getFieldDecorator('buildingRestaurant')(
          <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>
  )
})

export default Form.create({ onValuesChange: console.log })(BuildingBasic)