前后端整合开发之新增房源

import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { formatMessage, FormattedMessage } from 'umi/locale';
import {
  Form,
  Input,
  DatePicker,
  Select,
  Button,
  Card,
  InputNumber,
  Radio,
  Icon,
  Tooltip,
  Checkbox,
  AutoComplete
} from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import PicturesWall from '../Utils/PicturesWall';

const FormItem = Form.Item;
const { Option } = Select;
const { RangePicker } = DatePicker;
const { TextArea } = Input;
const Search = Input.Search;
const InputGroup = Input.Group;
const CheckboxGroup = Checkbox.Group;

const estateMap = new Map([
  ['中远两湾城','1001|上海市,上海市,普陀区,远景路97弄'],
  ['上海康城','1002|上海市,上海市,闵行区,莘松路958弄'],
  ['保利西子湾','1003|上海市,上海市,松江区,广富林路1188弄'],
  ['万科城市花园','1004|上海市,上海市,闵行区,七莘路3333弄2区-15区'],
  ['上海阳城','1005|上海市,上海市,闵行区,罗锦路888弄']
]);


@connect(({ loading }) => ({
  submitting: loading.effects['form/submitRegularForm'],
}))
@Form.create()
class AddResource extends PureComponent {
  handleSubmit = e => {
    const { dispatch, form } = this.props;
    e.preventDefault();
    console.log(this.state.fileList);
    form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        if(values.facilities){
          values.facilities = values.facilities.join(",");
        }
        if(values.floor_1 && values.floor_2){
          values.floor = values.floor_1 + "/" + values.floor_2;

        }

        values.houseType = values.houseType_1 + "室" + values.houseType_2 + "厅"
          + values.houseType_3 + "卫" + values.houseType_4 + "厨"
          + values.houseType_2 + "阳台";
        delete values.floor_1;
        delete values.floor_2;
        delete values.houseType_1;
        delete values.houseType_2;
        delete values.houseType_3;
        delete values.houseType_4;
        delete values.houseType_5;

        // 楼盘id
        values.estateId =  this.state.estateId;

        dispatch({
          type: 'house/submitHouseForm',
          payload: values,
        });
      }
    });
  };

  handleSearch = (value)=>{
    let arr = new Array();
    if(value.length > 0 ){
      estateMap.forEach((v, k) => {
        if(k.startsWith(value)){
          arr.push(k);
        }
      });
    }
    this.setState({
      estateDataSource: arr
    });
  } ;

  handleFileList = (obj)=>{
    console.log(obj, "图片列表");
  }


  constructor(props){
    super(props);
    this.state = {
      estateDataSource : [],
      estateAddress : '',
      estateId : ''
    }
  }

  render() {
    const { submitting } = this.props;
    const {
      form: { getFieldDecorator, getFieldValue },
    } = this.props;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
        md: { span: 10 },
      },
    };

    const submitFormLayout = {
      wrapperCol: {
        xs: { span: 24, offset: 0 },
        sm: { span: 10, offset: 7 },
      },
    };



    return (
      <PageHeaderWrapper>
        <Form onSubmit={this.handleSubmit} hideRequiredMark style={{ marginTop: 8 }}>
          <Card bordered={false} title="房源信息">
            <FormItem {...formItemLayout} label="楼盘名称">
              <AutoComplete
                style={{ width: '100%' }}
                dataSource={this.state.estateDataSource}
                placeholder="搜索楼盘"
                onSelect={(value, option)=>{
                  let v = estateMap.get(value);
                  this.setState({
                    estateAddress: v.substring(v.indexOf('|')+1),
                    estateId : v.substring(0,v.indexOf('|'))
                  });
                }}
                onSearch={this.handleSearch}
                filterOption={(inputValue, option) => option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1}
              />
            </FormItem>
            <FormItem {...formItemLayout} label="楼盘地址">
              <Input
                prefix={<Icon type="environment" style={{ color: 'rgba(0,0,0,.25)' }} />}
                value={this.state.estateAddress} defaultValue={this.state.estateAddress} readOnly/>
            </FormItem>
            <FormItem {...formItemLayout} label="房源标题">
              {getFieldDecorator('title',{rules:[{ required: true, message:"此项为必填项" }]})(<Input style={{ width: '100%' }}  />)}
            </FormItem>
            <FormItem {...formItemLayout} label="楼栋">
              <InputGroup compact>
                {getFieldDecorator('buildingNum',{rules:[{ required: true, message:"此项为必填项" }]})(<Input style={{ width: '30%' }}  addonAfter="栋" />)}
                {getFieldDecorator('buildingUnit',{rules:[{ required: true, message:"此项为必填项" }]})(<Input style={{ width: '30%' }}  addonAfter="单元" />)}
                {getFieldDecorator('buildingFloorNum',{rules:[{ required: true, message:"此项为必填项" }]})(<Input style={{ width: '30%' }}  addonAfter="门牌号" />)}
              </InputGroup>
            </FormItem>
            <FormItem {...formItemLayout} label="租金">
              <InputGroup compact>
                {getFieldDecorator('rent',{rules:[{ required: true, message:"此项为必填项" }]})(<Input style={{ width: '50%' }} addonAfter="元/月" />)}
              </InputGroup>
            </FormItem>
            <FormItem {...formItemLayout} label="支付方式">
              {getFieldDecorator('paymentMethod',{initialValue:'1',rules:[{ required: true, message:"此项为必填项" }]})
              (
                <Select style={{ width: '50%' }}>
                  <Option value="1">付一押一</Option>
                  <Option value="2">付三押一</Option>
                  <Option value="3">付六押一</Option>
                  <Option value="4">年付押一</Option>
                  <Option value="5">其它</Option>
                </Select>
              )}
            </FormItem>
            <FormItem {...formItemLayout} label="租赁方式">
              {getFieldDecorator('rentMethod',{initialValue:'1',rules:[{ required: true, message:"此项为必填项" }]})
              (
                <Select  style={{ width: '50%' }}>
                  <Option value="1">整租</Option>
                  <Option value="2">合租</Option>
                </Select>
              )}
            </FormItem>
            <FormItem {...formItemLayout} label="户型">
              <InputGroup compact>
                {getFieldDecorator('houseType_1',{rules:[{ required: true, message:"此项为必填项" }]})(<Input style={{ width: '18%' }} addonAfter="室" />)}
                {getFieldDecorator('houseType_2',{rules:[{ required: true, message:"此项为必填项" }]})(<Input style={{ width: '18%', marginLeft: '5px' }} addonAfter="厅" />)}
                {getFieldDecorator('houseType_3',{rules:[{ required: true, message:"此项为必填项" }]})(<Input style={{ width: '18%', marginLeft: '5px' }} addonAfter="卫" />)}
                {getFieldDecorator('houseType_4',{rules:[{ required: true, message:"此项为必填项" }]})(<Input style={{ width: '18%', marginLeft: '5px' }} addonAfter="厨" />)}
                {getFieldDecorator('houseType_5',{rules:[{ required: true, message:"此项为必填项" }]})(<Input style={{ width: '23%', marginLeft: '5px' }} addonAfter="阳台" />)}
              </InputGroup>

            </FormItem>
            <FormItem {...formItemLayout} label="建筑面积">
              <InputGroup compact>
                {getFieldDecorator('coveredArea',{rules:[{ required: true, message:"此项为必填项" }]})(<Input style={{ width: '40%' }} addonAfter="平米" />)}
              </InputGroup>
            </FormItem>
            <FormItem {...formItemLayout} label="使用面积">
              <InputGroup compact>
                {getFieldDecorator('useArea',{rules:[{ required: true, message:"此项为必填项" }]})(<Input style={{ width: '40%' }} addonAfter="平米" />)}
              </InputGroup>
            </FormItem>
            <FormItem {...formItemLayout} label="楼层">
              <InputGroup compact>
                {getFieldDecorator('floor_1',{rules:[{ required: true, message:"此项为必填项" }]})(<Input style={{ width: '30%' }} addonBefore="第" addonAfter="层" />)}
                {getFieldDecorator('floor_2',{rules:[{ required: true, message:"此项为必填项" }]})(<Input style={{ width: '30%', marginLeft: '10px' }} addonBefore="总" addonAfter="层" />)}
              </InputGroup>
            </FormItem>
            <FormItem {...formItemLayout} label="朝向">
              {getFieldDecorator('orientation',{initialValue:'南',rules:[{ required: true, message:"此项为必填项" }]})
              (
                <Select style={{ width: '20%' }}>
                  <Option value="南">南</Option>
                  <Option value="北">北</Option>
                  <Option value="东">东</Option>
                  <Option value="西">西</Option>
                </Select>
              )}
            </FormItem>
            <FormItem {...formItemLayout} label="装修">
              {getFieldDecorator('decoration',{initialValue:'1',rules:[{ required: true, message:"此项为必填项" }]})
              (
                <Select style={{ width: '20%' }}>
                  <Option value="1">精装</Option>
                  <Option value="2">简装</Option>
                  <Option value="3">毛坯</Option>
                </Select>
              )}
            </FormItem>
            <FormItem {...formItemLayout} label="配套设施">
              {getFieldDecorator('facilities',{initialValue:['1','2','3'],rules:[{ required: true, message:"此项为必填项" }]})
              (
                <CheckboxGroup options={[
                  { label: '水', value: '1' },
                  { label: '电', value: '2' },
                  { label: '煤气/天然气', value: '3' },
                  { label: '暖气', value: '4' },
                  { label: '有线电视', value: '5' },
                  { label: '宽带', value: '6' },
                  { label: '电梯', value: '7' },
                  { label: '车位/车库', value: '8' },
                  { label: '地下室/储藏室', value: '9' }
                ]}/>
              )}
            </FormItem>
          </Card>
          <Card bordered={false} title="图片信息">
            <FormItem {...formItemLayout} label="房源描述">
              {getFieldDecorator('houseDesc')
              (
                <TextArea placeholder="请输入备注信息" autosize={{ minRows: 4, maxRows: 10 }} />
              )}
              <span>请勿填写联系方式或与房源无关信息以及图片、链接或名牌、优秀、顶级、全网首发、零距离、回报率等词汇。</span>
            </FormItem>

            <FormItem {...formItemLayout} label="上传室内图">
              <PicturesWall handleFileList={this.handleFileList.bind(this)}/>
            </FormItem>
          </Card>
          <Card bordered={false} title="出租信息">
            <FormItem {...formItemLayout} label="联系人">
              <InputGroup compact>
                {getFieldDecorator('contact',{rules:[{ required: true, message:"此项为必填项" }]})
                (
                  <Input placeholder="请输入" />
                )}
              </InputGroup>
            </FormItem>
            <FormItem {...formItemLayout} label="手机号">
              <InputGroup compact>
                {getFieldDecorator('mobile',{rules:[{ required: true,max:11, message:"此项为必填项" }]})
                (
                  <Input placeholder="请输入" maxLength="11" />
                )}
              </InputGroup>
            </FormItem>
            <FormItem {...formItemLayout} label="看房时间">
              {getFieldDecorator('time',{initialValue:'1',rules:[{ required: true, message:"此项为必填项" }]})
              (
                <Select style={{ width: '20%' }}>
                  <Option value="1">上午</Option>
                  <Option value="2">中午</Option>
                  <Option value="3">下午</Option>
                  <Option value="4">晚上</Option>
                  <Option value="5">全天</Option>
                </Select>
              )}

            </FormItem>
            <FormItem {...formItemLayout} label="物业费">
              <InputGroup compact>
                {getFieldDecorator('propertyCost',{rules:[{ required: true,max:11, message:"此项为必填项" }]})
                (
                  <Input style={{ width: '30%' }} addonAfter="元/平" />
                )}
              </InputGroup>

            </FormItem>

            <FormItem {...submitFormLayout} style={{ marginTop: 32 }}>
              <Button type="primary" htmlType="submit" loading={submitting}>
                <FormattedMessage id="form.submit" />
              </Button>
              <Button style={{ marginLeft: 8 }}>
                <FormattedMessage id="form.save" />
              </Button>
            </FormItem>
          </Card>
        </Form>
      </PageHeaderWrapper >
    );
  }
}

export default AddResource;

import { routerRedux } from 'dva/router';
import { message } from 'antd';
import { addHouseResource } from '@/services/haoke';

export default {
  namespace: 'house',

  state: {

  },

  effects: {
    *submitHouseForm({ payload }, { call }) {
      yield call(addHouseResource, payload);
      message.success('提交成功');
    }
  },

  reducers: {
    saveStepFormData(state, { payload }) {
      return {
        ...state
      };
    },
  },
};

import request from '@/utils/request';

export async function addHouseResource(params) {
  return request('/haoke/house/resources', {
    method: 'POST',
    body: params
  });
}

// https://umijs.org/config/
import os from 'os';
import pageRoutes from './router.config';
import webpackPlugin from './plugin.config';
import defaultSettings from '../src/defaultSettings';

export default {
  // add for transfer to umi
  plugins: [
    [
      'umi-plugin-react',
      {
        antd: true,
        dva: {
          hmr: true,
        },
        targets: {
          ie: 11,
        },
        locale: {
          enable: true, // default false
          default: 'zh-CN', // default zh-CN
          baseNavigator: true, // default true, when it is true, will use `navigator.language` overwrite default
        },
        dynamicImport: {
          loadingComponent: './components/PageLoading/index',
        },
        ...(!process.env.TEST && os.platform() === 'darwin'
          ? {
            dll: {
              include: ['dva', 'dva/router', 'dva/saga', 'dva/fetch'],
              exclude: ['@babel/runtime'],
            },
            hardSource: true,
          }
          : {}),
      },
    ],
    [
      'umi-plugin-ga',
      {
        code: 'UA-72788897-6',
        judge: () => process.env.APP_TYPE === 'site',
      },
    ],
  ],
  targets: {
    ie: 11,
  },
  define: {
    APP_TYPE: process.env.APP_TYPE || '',
  },
  // 路由配置
  routes: pageRoutes,
  // Theme for antd
  // https://ant.design/docs/react/customize-theme-cn
  theme: {
    'primary-color': defaultSettings.primaryColor,
  },
  externals: {
    '@antv/data-set': 'DataSet',
  },
  proxy: {
    '/haoke/': {
      target: 'http://127.0.0.1:18080',
      changeOrigin: true,
      pathRewrite: { '^/haoke/': '' }
    }
  },
  ignoreMomentLocale: true,
  lessLoaderOptions: {
    javascriptEnabled: true,
  },
  disableRedirectHoist: true,
  cssLoaderOptions: {
    modules: true,
    getLocalIdent: (context, localIdentName, localName) => {
      if (
        context.resourcePath.includes('node_modules') ||
        context.resourcePath.includes('ant.design.pro.less') ||
        context.resourcePath.includes('global.less')
      ) {
        return localName;
      }
      const match = context.resourcePath.match(/src(.*)/);
      if (match && match[1]) {
        const antdProPath = match[1].replace('.less', '');
        const arr = antdProPath
          .split('/')
          .map(a => a.replace(/([A-Z])/g, '-$1'))
          .map(a => a.toLowerCase());
        return `antd-pro${arr.join('-')}-${localName}`.replace(/--/g, '-');
      }
      return localName;
    },
  },
  manifest: {
    name: 'ant-design-pro',
    background_color: '#FFF',
    description: 'An out-of-box UI solution for enterprise applications as a React boilerplate.',
    display: 'standalone',
    start_url: '/index.html',
    icons: [
      {
        src: '/favicon.png',
        sizes: '48x48',
        type: 'image/png',
      },
    ],
  },

  chainWebpack: webpackPlugin,
  cssnano: {
    mergeRules: false,
  },
};