estateagents-admin-manager/src/pages/building/list/add/components/base.jsx

import React, { useState, useEffect } from 'react';
import { Form, Icon, Input, Button, DatePicker, Select, Card, Row, Col, Pagination, Alert, Radio, Tag, Tooltip, Tabs, InputNumber, notification } from 'antd';
import moment from 'moment';
import request from '../../../../../utils/request';
import apis from '../../../../../services/apis';
import Styles from '../style.less';
import { router } from 'umi';
import ImageUpload from '../../../../../components/XForm/ImageUpload'
import ImageListUpload from '../../../../../components/XForm/ImageListUpload'
import Wangedit from '../../../../../components/Wangedit/Wangedit'
import TagGroup from './tags'
import Amap from './amap'
import BudildingProjectType from './buildingProjectType'
import SelectCity from '../../../../../components/SelectButton/CitySelect'

const { Option } = Select
const { TabPane } = Tabs;

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 2 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 16 },
  },
};


function openNotificationWithIcon(type, message) {
  notification[type]({
    message,
    description:
      '',
  });
}


function AddBuilding(props) {
  const { getFieldDecorator } = props.form;

  if (props.building.buildingId !== undefined) {
    const { buildingId } = props.building
    if (buildingId !== '') {
      // eslint-disable-next-line react-hooks/rules-of-hooks
      useEffect(() => {
        getById(buildingId)
      }, [])
    }
  }

   // 获取详情信息
   function getById(currentId) {

    request({ ...apis.building.buildingGetById, urlData: { id: currentId } }).then(res => {
      if (res.openingDate !== null) {
        res.openingDate = moment(res.openingDate)
      }
      if (res.receivedDate !== null) {
        res.receivedDate = moment(res.receivedDate)
      }

      res.avatarImage = res.buildingImg.map(item => item.url)
      props.form.setFieldsValue(res)
    })
  }

  function handleSubmit(e) {
    e.preventDefault();
    props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        addBuilding(values)
      }
    });
  }

  function addBuilding(data) {
    data.openingDate = moment(data.openingDate, 'yyyy-MM-dd HH:mm:ss')
    data.receivedDate = moment(data.receivedDate, 'yyyy-MM-dd HH:mm:ss')
    // 项目主图
    data.img = data.avatarImage && data.avatarImage.map((item, index) => ({ imgType: 'banner', url: item, orderNo: index + 1 }))

    const api = data.buildingId === undefined ? apis.building.addBuilding : apis.building.updateBuilding
    request({ ...api, data: { ...data } }).then(() => {
      openNotificationWithIcon('success', '操作成功')
      router.go(-1)
    }).catch(err => {
      openNotificationWithIcon('error', err.message)
    })
  }

  return (
        <Form {...formItemLayout} onSubmit={handleSubmit}>
          <Form.Item label="项目Id" hasFeedback style={{ display: 'none' }}>
            {getFieldDecorator('buildingId')(<Input disabled />)}
          </Form.Item>
          <Form.Item label="楼盘编号" hasFeedback>
            {getFieldDecorator('code')(<Input />)}
          </Form.Item>
          <Form.Item label="楼盘名称" hasFeedback>
            {getFieldDecorator('buildingName')(<Input />)}
          </Form.Item>
          <Form.Item label="别名" hasFeedback>
            {getFieldDecorator('name')(<Input />)}
          </Form.Item>
          <Form.Item label="项目类型">
            {getFieldDecorator('buildingProjectType')(<BudildingProjectType />)}
          </Form.Item>
          <Form.Item label="均价" hasFeedback>
            {getFieldDecorator('price')(<Input />)}
          </Form.Item>
          <Form.Item label="开盘时间"  hasFeedback>
            {getFieldDecorator('openingDate')(<DatePicker format="YYYY/MM/DD" />)}
          </Form.Item>
          <Form.Item label="电话" hasFeedback>
            {getFieldDecorator('tel',{
              initialValue:'',
              rules:[
                  {
                      pattern:new RegExp('^1[0-9]{10}$'),
                      message:'请输入正确的电话号码'
                  }
              ]
            })(<Input />)}
          </Form.Item>
          <Form.Item label="项目动态" hasFeedback>
            {getFieldDecorator('dynamic')(<Input />)}
          </Form.Item>
          <Form.Item label="物业类型" hasFeedback>
            {getFieldDecorator('propertyType')(
              // <Select mode="multiple" placeholder="物业类型" style={{ width: '1016px' }}>
              //   <Option value="未知">未知</Option>
              // </Select>,
              <Input />,
            )}
          </Form.Item>
          <Form.Item label="销售状态" hasFeedback>
            {getFieldDecorator('marketStatus')(<Input />)}
          </Form.Item>
          <Form.Item label="标签" hasFeedback style={{ display: 'none' }}>
            {getFieldDecorator('tags')(
              <Select mode="multiple" placeholder="标签" style={{ width: '1016px' }}>
                <Option value="未知">未知</Option>
              </Select>,
            )}
          </Form.Item>
          <Form.Item label="项目主图" hasFeedback>
            {getFieldDecorator('avatarImage')(
              <ImageListUpload />,
            )}
          </Form.Item>
          <Form.Item label="地址图片" hasFeedback>
            {getFieldDecorator('mapImg')(
              <ImageUpload />,
            )}
          </Form.Item>
          <Form.Item label="海报底图" hasFeedback>
            {getFieldDecorator('poster')(
              <ImageUpload />,
            )}
          </Form.Item>
          <Form.Item label="排序" hasFeedback>
            {getFieldDecorator('orderNo')(<Input />)}
          </Form.Item>
          <Form.Item label="优惠信息" hasFeedback>
            {getFieldDecorator('discount')(<Input />)}
          </Form.Item>
          <Form.Item label="首页推荐" hasFeedback>
            {getFieldDecorator('isMain')(
            <Radio.Group>
              <Radio value={1}>是</Radio>
              <Radio value={2}>否</Radio>
            </Radio.Group>,
            )}
          </Form.Item>
          <Form.Item label="所在城市" hasFeedback>
            {getFieldDecorator('cityId')(
              <SelectCity />,
            )}
          </Form.Item>
          <Form.Item label="楼盘区域" hasFeedback>
            {getFieldDecorator('buildingArea')(<Input />)}
          </Form.Item>
          <Form.Item label="项目地址" hasFeedback>
            {getFieldDecorator('address')(<Input />)}
          </Form.Item>
          <Form.Item label="项目坐标" hasFeedback>
            {getFieldDecorator('coordinate')(<Input disabled />)}
          </Form.Item>
          <Form.Item label="地图位置" hasFeedback>
            {getFieldDecorator('coordinate')(<Amap />)}
          </Form.Item>
          <Form.Item label="周边交通" hasFeedback>
            {getFieldDecorator('buildingTransport')(
              <TagGroup />,
            )}
          </Form.Item>
          <Form.Item label="周边商业" hasFeedback>
            {getFieldDecorator('buildingMall')(
              <TagGroup />,
            )}
          </Form.Item>
          <Form.Item label="周边学校" hasFeedback>
            {getFieldDecorator('buildingEdu')(
              <TagGroup />,
            )}
          </Form.Item>
          <Form.Item label="周边医院" hasFeedback>
            {getFieldDecorator('buildingHospital')(
              <TagGroup />,
            )}
          </Form.Item>
          <Form.Item label="周边银行" hasFeedback>
            {getFieldDecorator('buildingBank')(
              <TagGroup />,
            )}
          </Form.Item>
          <Form.Item label="周边餐饮" hasFeedback>
            {getFieldDecorator('buildingRestaurant')(
              <TagGroup />,
            )}
          </Form.Item>
          <Form.Item label="绿化率" hasFeedback>
            {getFieldDecorator('greeningRate')(<Input />)}
          </Form.Item>
          <Form.Item label="容积率" hasFeedback>
            {getFieldDecorator('volumeRate')(<Input />)}
          </Form.Item>
          <Form.Item label="车位比" hasFeedback>
            {getFieldDecorator('parkingRate')(<Input />)}
          </Form.Item>
          <Form.Item label="规划户数" hasFeedback>
            {getFieldDecorator('familyNum')(<InputNumber />)}
          </Form.Item>
          <Form.Item label="物业公司" hasFeedback>
            {getFieldDecorator('serviceCompany')(<Input />)}
          </Form.Item>
          <Form.Item label="物业费" hasFeedback>
            {getFieldDecorator('serviceFee')(<Input />)}
          </Form.Item>
          <Form.Item label="装修标准" hasFeedback>
            {getFieldDecorator('decoration')(<Input />)}
          </Form.Item>
          <Form.Item label="交房时间" hasFeedback>
            {getFieldDecorator('receivedDate')(<DatePicker />)}
          </Form.Item>
          <Form.Item label="产权年限" hasFeedback>
            {getFieldDecorator('rightsYear')(<InputNumber />)}
          </Form.Item>
          <Form.Item label="预售许可证" hasFeedback>
            {getFieldDecorator('preSalePermit')(
              <ImageUpload />,
            )}
          </Form.Item>
          <Form.Item label="项目备注" hasFeedback>
            {getFieldDecorator('remark')(
              <Wangedit />,
            )}
          </Form.Item>
          <Form.Item style={{ width: '400px', margin: 'auto', display: 'flex', justifyContent: 'space-between' }}>
            <Button type="primary" htmlType="submit">
                确定
            </Button>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <Button onClick={() => router.go(-1)}>
                取消
            </Button>
          </Form.Item>
        </Form>
  )
}

const WrappedAddBuildingForm = Form.create({ name: 'addBuilding' })(AddBuilding);

export default WrappedAddBuildingForm