新需求

src/components/SelectButton/AreaSelect.jsx

@@ -0,0 +1,63 @@
+import React, { useState, useEffect } from 'react';
+import { Select } from 'antd';
+
+import request from '../../utils/request'
+
+const { Option } = Select;
+
+/**
+ *
+ *
+ * @param {*} props
+ * @returns
+ */
+const CitySelect = (props) => {
+  const [ data, setData ] = useState([])
+  const cityId = typeof props.cityId === 'function' ? props.cityId() : props.cityId
+
+  useEffect(() => {
+    getCityAreaList();
+    getValue();
+  },[cityId])
+
+  const getCityAreaList = (e) => {
+    request({
+        url: '/api/admin/tdCityList/tdAreaCity',
+        method: 'GET',
+        params: {leveltype: 3, cityId},
+        action: 'select',
+    }).then((data) => {
+        setData(data)
+    })
+  }
+
+  /**
+   * 因为 有个需求是，如果这个城市被删除了，那么就直接展示为空，不能展示 cityId
+   */
+  const getValue = () => {
+    if (props.value) {
+      const tempData = data.filter(f => f.id == props.value)
+      const va = (tempData.length > 0) ? props.value : undefined
+      props.onChange(va)
+    }
+  }
+
+  return (
+      <Select
+      {...props}
+      showSearch
+      value={props.value}
+      style={{ width: '300px' }}
+      placeholder="请选择城市"
+      onChange={props.onChange}
+      filterOption={(input, option) =>
+        option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      }
+      >
+          {data.map(city => (
+            <Option key={city.id} value={city.name}>{city.name}</Option>
+          ))}
+      </Select>
+  )
+}
+export default CitySelect

src/pages/building/list/add/components/base.jsx

@@ -15,6 +15,7 @@ import Amap from './amap'
 import BudildingProjectType from './buildingProjectType'
 import DragableUploadImageList from '@/components/DragableUploadImageList'
 import SelectCity from '../../../../../components/SelectButton/CitySelect'
+import AreaSelect from '../../../../../components/SelectButton/AreaSelect'
 import FileUpload from '@/components/XForm/FileUpload';
 import { POI_TYPES_KETY, getAroundData, getPOIType, POI_TYPES } from './amapAroundData'
 
@@ -48,6 +49,7 @@ function AddBuilding(props) {
   const [poi, setPoi] = useState([])
   const [videoImage, setVideoImage] = useState(false)
   const [typeState, setTypeState] = useState("rich")
+  const [cityId, setCityId] = useState("")
 
   // 存放所以 buildingData 基础信息
   const [buildingData, setBuildingData] = useState({})
@@ -121,6 +123,7 @@ function AddBuilding(props) {
       res.buildingRestaurant = stringHandleTag(res.buildingRestaurant)
 
       setBuildingData(res)
+
       props.form.setFieldsValue(res)
       // console.log('mapJson: ', JSON.parse(res.mapJson))
       setPoi((res.mapJson && JSON.parse(res.mapJson)) || [])
@@ -324,6 +327,15 @@ function AddBuilding(props) {
     return newPoi
   }
 
+  function cityChange(e) {
+    setCityId(e)
+    setTimeout(()=>{
+      props.form.setFieldsValue({
+          'buildingArea': buildingData.buildingArea
+      })
+  },0)
+  }
+
   function setFormMapScopeTagValue(keyType, item) {
     const tag = item.data.map(t => ({ tagName: t.name, delete: true, automatic: true }))
     switch (keyType) {
@@ -487,13 +499,13 @@ function AddBuilding(props) {
             {getFieldDecorator('cityId', {
               rules: [{ required: true, message: '请选择城市' }],
             })(
-              <SelectCity />,
+              <SelectCity onChange={(e) => cityChange(e)}/>,
             )}
           </Form.Item>
           <Form.Item label="楼盘区域" >
             {getFieldDecorator('buildingArea', {
               rules: [{ required: true, message: '请输入楼盘区域' }],
-            })(<Input />)}
+            })(<AreaSelect cityId={cityId}/>)}
           </Form.Item>
           <Form.Item label="项目地址" >
             {getFieldDecorator('address', {