Merge branch 'master' of http://git.ycjcjy.com/marketing/pc-admin

config/proxy.js

@@ -8,7 +8,7 @@
 export default {
   dev: {
     '/api/': {
-      target: 'http://81.69.196.8:8567/',
+      target: 'https://xlk.njyz.tech/',
       changeOrigin: true,
       pathRewrite: {
         '^': '',

src/models/user.js

@@ -13,12 +13,16 @@ const UserModel = {
   },
   effects: {
     *fetchCurrent(_, { call, put }) {
-      const response = yield call(getCurrentUser);
-
-      yield put({
-        type: 'saveCurrentUser',
-        payload: response,
-      });
+      try {
+        const response = yield call(getCurrentUser);
+  
+        yield put({
+          type: 'saveCurrentUser',
+          payload: response,
+        });
+      } catch (err) {
+        console.error(err)
+      }
     },
   },
   reducers: {

src/pages/building/Edit/Basic/form.js

@@ -0,0 +1,31 @@
+export function initForm(form, data) {
+  if (!data) return;
+
+  const formData = { ...data }
+  // 交房时间
+  if (data.receivedDate) {
+    formData.receivedDate = moment(data.receivedDate)
+  }
+
+  // 主图 - 多个
+  if (data.buildingImg) {
+    formData.avatarImage = data.buildingImg.map((x) => x.url)
+  }
+
+  // 封面 - 一个
+  if (data.buildingListImg) {
+    formData.listImage = data.buildingListImg.map(item => item.url)[0]
+  }
+
+  // 视频
+  if (data.videoUrl) {
+    formData.videoUrl = [].concat(data.videoUrl)
+  }
+
+  // 视频封面
+  if (data.videoImage) {
+    formData.videoImage = data.videoImage[0].url
+  }
+
+  form.setFieldsValue(formData);
+}

src/pages/building/Edit/Basic/getData.js

@@ -1,53 +0,0 @@
-import moment from 'moment'
-import { fetch, apis } from '@/utils/request'
-
-export default (id) => {
-  if (!id) {
-    return Promise.reject('没有找到有效的项目ID');
-  }
-
-  return new Promise((resolve, reject) => {
-    fetch(apis.building.buildingGetById)({ urlData: { id } }).then((res) => {
-      const data = { ...res }
-
-      // 交房时间
-      if (res.receivedDate) {
-        data.receivedDate = moment(res.receivedDate)
-      }
-
-      // 标签
-      if (res.buildingTag) {
-        data.tag = res.buildingTag.map((x) => x.tagName)
-      }
-
-      // 主图 - 多个
-      if (res.buildingImg) {
-        data.avatarImage = res.buildingImg.map((x) => x.url)
-      }
-
-      // 封面 - 一个
-      if (res.buildingListImg) {
-        data.listImage = res.buildingListImg.map(item => item.url)[0]
-      }
-
-      // 视频
-      if (res.videoUrl) {
-        data.videoUrl = [].concat(res.videoUrl)
-      }
-
-      // 视频封面
-      if (res.videoImage) {
-        data.videoImage = res.videoImage[0].url
-      }
-
-      // POI 相关
-      if (res.mapJson) {
-        data.mapJson = JSON.parse(res.mapJson) || []
-      }
-
-      resolve(data)
-    }).catch((err) => {
-      reject(err.message || err)
-    })
-  })
-}

src/pages/building/Edit/Basic/index.jsx

@@ -12,27 +12,40 @@ import OpenTimePicker from '../components/OpenTimePicker'
 import EditableArround from '../components/EditableArround'
 import FormGroupItem, { gourpItemLayout } from '../components/FormGroupItem'
 import { formItemLayout, validMinNum } from '../utils'
-import useTags from './tag'
+import useArrounds from './useArrounds'
+import usePois from './usePois'
+import useQuery from './useQuery'
+import { initForm } from './form'
 
 const fullWidth= { width: '100%' }
 const Item = Form.Item
 
 const BuildingBasic = React.forwardRef((props, ref) => {
-  const { form } = props;
+  const { form, history } = props;
   const { getFieldDecorator, getFieldValue, setFieldsValue } = form;
+  const { query } = history.location;
+  const { id } = query;
 
-  const [ loading, setLoading ] = useState({ arround: false })
+  const [ loading, setLoading ] = useState({ form: false, arround: false })
   const [
-    tags,
-    initTags,
-    updateTags,
-    deletePoi,
+    arrounds,
+    initArrounds,
+    updateArrounds,
+    deleteArround,
+  ] = useArrounds()
+  const [
+    pois,
     initPois,
-    pois2Tags,
-    // updatePois,
-    deleteTag,
-    updatePoisAndTags,
-  ] = useTags()
+    deletePoi,
+  ] = usePois()
+
+  const updateLoading = (key) => (state) => setLoading({ ...loading, [key]: state })
+
+  useQuery(id, updateLoading('form'), (res) => {
+    initPois(res.mapJson)
+    initArrounds(res)
+    initForm(form, res)
+  })
   
   // 视频文件上传前 回调
   const fileUploadBeforeUpload = (file, fileList) => {
@@ -67,322 +80,327 @@ const BuildingBasic = React.forwardRef((props, ref) => {
         }
       }, {})
 
-      updatePoisAndTags(pois)
+      initPois(pois, true)
       setLoading({ ...loading, arround: false })
     }).catch((err) => {
       setLoading({ ...loading, arround: false })
       console.error(err)
       notification.error({ message: '周边数据获取异常' })
     })
-
-    // POI_TYPES.forEach(({ key }) => {
-    //   getPoiData({ type: key, location: lngLat, radius: e }).then(res => {
-    //     updatePois(key, res.pois || [])
-    //   }).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} />
-          )}
+    <Spin spinning={loading.form}>
+      <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="电话" {...gourpItemLayout.ab.b } >
-          {getFieldDecorator('tel', {
-            rules: [
-              {
-                pattern: new RegExp('^[0-9]*$'),
-                message: '请输入正确的电话号码',
-              },
-            ],
-          })(<Input placeholder="手机或者座机号码" />)}
+        <Form.Item label="列表均价" help="项目列表展示价格，示例：约10000元/㎡、约1000万元/套起">
+          {getFieldDecorator('price')(<Input />)}
         </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} />,
-          )}
+        <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="视频封面图" help="建议图片尺寸：750*600px，比例5:4,格式：jpg，用于视频封面" labelCol={{span: 8}} wrapperCol={{span:16}}>
-          {getFieldDecorator('videoImage')(
-            <ImageUpload />,
+        {/* <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>
-      </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 label="项目标签" >
+          {getFieldDecorator('tag')(
+            <Select mode="tags" placeholder="输入后选中" style={fullWidth} />
           )}
         </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: '请选择城市' }],
+
+        <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: '请选择项目主图' }],
           })(
-            <SelectCity style={fullWidth} />,
+            <ImageListUpload unlimited />,
           )}
         </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>
-      <Spin spinning={loading.arround}>
-        <Form.Item label="周边交通" >
-          <EditableArround
-            tags={tags.buildingTransport}
-            onChange={(e) => updateTags('buildingTransport', e)}
-            onDelete={(tag) => deleteTag('buildingTransport', tag)}
-            onPoiDelete={(poi) => deletePoi('Transport', poi)}
-          />
-        </Form.Item>
-        <Form.Item label="周边商业" >
-          <EditableArround
-            tags={tags.buildingMall}
-            onChange={(e) => updateTags('buildingMall', e)}
-            onDelete={(tag) => deleteTag('buildingMall', tag)}
-            onPoiDelete={(poi) => deletePoi('Mall', poi)}
-          />
-        </Form.Item>
-        <Form.Item label="周边学校" >
-          <EditableArround
-            tags={tags.buildingEdu}
-            onChange={(e) => updateTags('buildingEdu', e)}
-            onDelete={(tag) => deleteTag('buildingEdu', tag)}
-            onPoiDelete={(poi) => deletePoi('Edu', poi)}
-          />
-        </Form.Item>
-        <Form.Item label="周边医院" >
-          <EditableArround
-            tags={tags.buildingHospital}
-            onChange={(e) => updateTags('buildingHospital', e)}
-            onDelete={(tag) => deleteTag('buildingHospital', tag)}
-            onPoiDelete={(poi) => deletePoi('Hospital', poi)}
-          />
-        </Form.Item>
-        <Form.Item label="周边银行" >
-          <EditableArround
-            tags={tags.buildingBank}
-            onChange={(e) => updateTags('buildingBank', e)}
-            onDelete={(tag) => deleteTag('buildingBank', tag)}
-            onPoiDelete={(poi) => deletePoi('Bank', poi)}
-          />
-        </Form.Item>
-        <Form.Item label="周边餐饮" >
-          <EditableArround
-            tags={tags.buildingRestaurant}
-            onChange={(e) => updateTags('buildingRestaurant', e)}
-            onDelete={(tag) => deleteTag('buildingRestaurant', tag)}
-            onPoiDelete={(poi) => deletePoi('Restaurant', poi)}
-          />
-        </Form.Item>
-      </Spin>
-      <FormGroupItem>
-        <Form.Item label="绿化率" {...gourpItemLayout.ab.a } >
-          {getFieldDecorator('greeningRate')(<Input />)}
-        </Form.Item>
-        <Form.Item label="容积率" {...gourpItemLayout.ab.b }>
-          {getFieldDecorator('volumeRate')(<Input />)}
+        <Form.Item label="楼盘封面图" help="建议图片尺寸：750*420px，比例16:9,格式：jpg，用于楼盘列表">
+          {getFieldDecorator('listImage', {
+            rules: [{ required: true, message: '请选择列表图' }],
+          })(
+            <ImageUpload />,
+          )}
         </Form.Item>
-      </FormGroupItem>
-      <FormGroupItem>
-        <Form.Item label="车位数量" {...gourpItemLayout.ab.a }>
-          {getFieldDecorator('parkingRate', {
-            rules: [{ validator: validMinNum }]
-          })(<InputNumber min={0} style={fullWidth}/>)}
+        <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="规划户数" {...gourpItemLayout.ab.b }>
-          {getFieldDecorator('familyNum', {
-            rules: [{ validator: validMinNum }]
-          })(<InputNumber min={0} style={fullWidth}/>)}
+        <Form.Item label="项目坐标" >
+          {getFieldDecorator('coordinate', {
+            rules: [{ required: true, message: '请输入项目坐标' }],
+          })(<Amap onChange={e => setFieldsValue({ coordinate: e })} />)}
         </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 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="供电" {...gourpItemLayout.abc.b }>
-          {getFieldDecorator('powerSupply')(
-            <Select style={fullWidth}>
-              <Select.Option value="民电">民电</Select.Option>
-              <Select.Option value="商用">商用</Select.Option>
-            </Select>
-          )}
+        <Spin spinning={loading.arround}>
+          <Form.Item label="周边交通" >
+            <EditableArround
+              type="Transport"
+              pois={pois.Transport}
+              tags={arrounds.buildingTransport}
+              onChange={(e) => updateArrounds('buildingTransport', e)}
+              onDelete={deleteArround}
+              onPoiDelete={(poi) => deletePoi('Transport', poi)}
+            />
+          </Form.Item>
+          <Form.Item label="周边商业" >
+            <EditableArround
+              type="Mall"
+              pois={pois.Mall}
+              tags={arrounds.buildingMall}
+              onChange={(e) => updateArrounds('buildingMall', e)}
+              onDelete={deleteArround}
+              onPoiDelete={(poi) => deletePoi('Mall', poi)}
+            />
+          </Form.Item>
+          <Form.Item label="周边学校" >
+            <EditableArround
+              type="Edu"
+              pois={pois.Edu}
+              tags={arrounds.buildingEdu}
+              onChange={(e) => updateArrounds('buildingEdu', e)}
+              onDelete={deleteArround}
+              onPoiDelete={(poi) => deletePoi('Edu', poi)}
+            />
+          </Form.Item>
+          <Form.Item label="周边医院" >
+            <EditableArround
+              type="Hospital"
+              pois={pois.Hospital}
+              tags={arrounds.buildingHospital}
+              onChange={(e) => updateArrounds('buildingHospital', e)}
+              onDelete={deleteArround}
+              onPoiDelete={(poi) => deletePoi('Hospital', poi)}
+            />
+          </Form.Item>
+          <Form.Item label="周边银行" >
+            <EditableArround
+              type="Bank"
+              pois={pois.Bank}
+              tags={arrounds.buildingBank}
+              onChange={(e) => updateArrounds('buildingBank', e)}
+              onDelete={deleteArround}
+              onPoiDelete={(poi) => deletePoi('Bank', poi)}
+            />
+          </Form.Item>
+          <Form.Item label="周边餐饮" >
+            <EditableArround
+              type="Restaurant"
+              pois={pois.Restaurant}
+              tags={arrounds.buildingRestaurant}
+              onChange={(e) => updateArrounds('buildingRestaurant', e)}
+              onDelete={deleteArround}
+              onPoiDelete={(poi) => deletePoi('Restaurant', poi)}
+            />
+          </Form.Item>
+        </Spin>
+        <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="供暖" {...gourpItemLayout.abc.c }>
-          {getFieldDecorator('heatingSupply')(
-            <Select style={fullWidth}>
-              <Select.Option value="集中供暖">集中供暖</Select.Option>
-              <Select.Option value="自采暖">自采暖</Select.Option>
-            </Select>
-          )}
+        <Form.Item label="物业费" >
+          {getFieldDecorator('serviceFee', {
+            rules: [{ max: 30, message: '不超过30个字' }]
+          })(<Input placeholder="不超过30个字"/>)}
         </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>
-          )}
+        <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="楼栋总数" {...gourpItemLayout.ab.b }>
-          {getFieldDecorator('buildingNum', {
-            rules: [{ validator: validMinNum }]
-          })(<InputNumber style={fullWidth}/>)}
+        <Form.Item label="开发商" >
+          {getFieldDecorator('propertyDeveloper', {
+            rules: [{ max: 30, message: '不超过30个字' }]
+          })(<Input placeholder="不超过30个字"/>)}
         </Form.Item>
-      </FormGroupItem>
-      <FormGroupItem>
-        <Form.Item label="交房时间" {...gourpItemLayout.ab.a }>
-          {getFieldDecorator('receivedDate')(<DatePicker style={fullWidth}/>)}
+        <Form.Item label="备案名" >
+          {getFieldDecorator('recordName', {
+            rules: [{ max: 30, message: '不超过30个字' }]
+          })(<Input placeholder="不超过30个字" />)}
         </Form.Item>
-        <Form.Item label="产权年限" {...gourpItemLayout.ab.b }>
-          {getFieldDecorator('rightsYear', {
-            rules: [{ validator: validMinNum }]
-          })(<InputNumber style={fullWidth}/>)}
+        <Form.Item label="预售许可证" >
+          {getFieldDecorator('preSalePermit')(
+            <ImageUpload />,
+          )}
         </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>
+        <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>
+    </Spin>
   )
 })
 

src/pages/building/Edit/Basic/tag.js

@@ -1,116 +0,0 @@
-import { useCallback, useState, useRef } from "react";
-
-export default function useTags(form) {
-  const [tags, setTags] = useState({})
-  const poisRef = useRef({})
-
-  // const updatePoi2Form = pois => form.setFieldsValue('mapJson', Object.keys(pois).map((key) => ({ key, data: pois[key] })))
-
-  // initPois 必须先于 initTags 执行
-  // initPois, initTags 是在请求远程数据结束后执行
-  const initPois = useCallback((raw) => {
-    const newPois = !raw ? {} : raw.reduce((acc, poi) => {
-      const { key, data } = poi
-      return {
-        ...acc,
-        [key]: data || []
-      }
-    }, {})
-
-    poisRef.current = newPois
-  }, [])
-
-  // 主要用于地图搜索周边结果
-  const updatePois = useCallback((key, val) => {
-    poisRef.current[key] = val
-
-    // 先把 tags 中的 poi 去掉, 再更新
-    const tagKey = `building${key}`
-    const newTags = (tags[tagKey] || []).filter((tag) => !tag.id).concat(val)
-    setTags({
-      ...tags,
-      [tagKey]: newTags,
-    })
-
-    // 更新form
-    // updatePoi2Form(poisRef.current)
-    // form.setFieldsValue({ [key]: newTags.map((tag) => tag.name).join(',') })
-  }, [tags])
-
-  // 主要用于单个 poi 删除
-  const deletePoi = useCallback((key, val) => {
-    if (!poisRef.current[key] || !poisRef.current[key].length) return;
-
-    const newPois = poisRef.current[key].filter((poi) => poi.name !== val.name)
-    poisRef.current[key] = newPois
-
-    // 更新form
-    // updatePoi2Form(poisRef.current)
-  }, [])
-
-  const updatePoisAndTags = useCallback((pois) => {
-    poisRef.current = pois
-    const keys = Object.keys(pois)
-    
-    const newTags = keys.reduce((acc, key) => {
-      const tagKey = `building${key}`
-      const arr = (tags[tagKey] || []).filter((tag) => !tag.id).concat(pois[key])
-      return { ...acc, [tagKey]: arr }
-    }, tags)
-
-    setTags(newTags)
-  }, [tags])
-
-  const initTags = useCallback((key, raw) => {
-    const tagArr = !raw ? [] : raw.split(',').filter(Boolean)
-
-    if (!tagArr.length) return;
-
-    const pois = poisRef.current[key] || []
-
-    const newTags = tagArr.map((tag) => {
-      const found = pois.filter((poi) => poi.name === tag)[0]
-
-      return found || { name: tag }
-    })
-
-    setTags({
-      ...tags,
-      [key]: newTags,
-    })
-  }, [tags])
-
-  const updateTags = useCallback((key, newTags = []) => {
-    setTags({
-      ...tags,
-      [key]: newTags,
-    })
-
-    // form.setFieldsValue({ [key]: newTags.map((tag) => tag.name).join(',') })
-  }, [tags])
-
-  // 主要用户单个 tag 删除
-  const deleteTag = useCallback((key, tag) => {
-    if (!tags[key] || !tags[key].length) return;
-
-    const leftTags = tags[key].filter((x) => x.name !== tag.name)
-
-    setTags({
-      ...tags,
-      [key]: leftTags,
-    })
-
-    // form.setFieldsValue({ [key]: leftTags.map((tag) => tag.name).join(',') })
-  })
-
-  return [
-    tags,
-    initTags,
-    updateTags,
-    deletePoi,
-    initPois,
-    updatePois,
-    deleteTag,
-    updatePoisAndTags,
-  ]
-}

src/pages/building/Edit/Basic/useArrounds.js

@@ -0,0 +1,48 @@
+import { useCallback, useState, useRef } from "react";
+
+const formateArroundTag = str => (str || '').split(',').filter(Boolean).map(x => ({name: x}));
+
+export default function useArrounds() {
+  const [arrounds, setArrounds] = useState({})
+
+  // 用来初始化数据库数据
+  const initArrounds = useCallback((data) => {
+    const tags = {
+      buildingTransport: formateArroundTag(data.buildingTransport),
+      buildingMall: formateArroundTag(data.buildingMall),
+      buildingEdu: formateArroundTag(data.buildingEdu),
+      buildingHospital: formateArroundTag(data.buildingHospital),
+      buildingBank: formateArroundTag(data.buildingBank),
+      buildingRestaurant: formateArroundTag(data.buildingRestaurant),
+    }
+
+    setArrounds(tags)
+  }, [])
+
+  // 用于周边 onChange 事件
+  const updateArrounds = useCallback((key, vals) => {
+    setArrounds({
+      ...arrounds,
+      [key]: vals || [],
+    })
+  }, [arrounds])
+
+  // 主要用户单个 tag 删除
+  const deleteArround = useCallback((key, tag) => {
+    if (!arrounds[key] || !arrounds[key].length) return;
+
+    const leftArrounds = arrounds[key].filter((x) => x.name !== tag.name)
+
+    setArrounds({
+      ...arrounds,
+      [key]: leftArrounds,
+    })
+  }, [arrounds])
+
+  return [
+    arrounds,
+    initArrounds,
+    updateArrounds,
+    deleteArround,
+  ]
+}

src/pages/building/Edit/Basic/usePois.js

@@ -0,0 +1,40 @@
+import { useCallback, useState } from "react";
+
+export default function usePois() {
+  const [pois, setPois] = useState({})
+
+  const initPois = useCallback((data, formated) => {
+    if (!data) return;
+
+    if (formated) {
+      setPois(data)
+      return;
+    }
+
+    const nwPois = data.reduce((acc, poi) => {
+      return {
+        ...acc,
+        [poi.key]: poi.data ? JSON.parse(poi.data) : [],
+      }
+    }, {})
+
+    setPois(nwPois)
+  }, [])
+  
+  const deletePoi = useCallback((key, val) => {
+    if (!pois[key] || !pois[key].length) return;
+
+    const newPois = pois[key].filter((poi) => poi.name !== val.name)
+
+    setPois({
+      ...pois,
+      [key]: newPois
+    })
+  }, [pois])
+
+  return [
+    pois,
+    initPois,
+    deletePoi,
+  ]
+}

src/pages/building/Edit/Basic/useQuery.js

@@ -0,0 +1,40 @@
+import { useEffect, useState } from 'react'
+import { fetch, apis } from '@/utils/request'
+import { notification } from 'antd'
+
+export default function useData(id, setLoading, callback) {
+  const [data, setData] = useState()
+
+  useEffect(() => {
+    if (!id) {
+      setData();
+      return;
+    }
+
+    setLoading(true);
+    fetch(apis.building.buildingGetById)({ urlData: { id } }).then((res) => {
+
+      // 标签
+      if (res.buildingTag) {
+        res.tag = res.buildingTag.map((x) => x.tagName)
+      }
+
+      // POI 相关
+      if (res.mapJson) {
+        res.mapJson = JSON.parse(res.mapJson) || []
+      }
+
+      setData(res)
+      setLoading(false);
+
+      if (callback) {
+        callback(res)
+      }
+    }).catch((err) => {
+      setLoading(false);
+      notification.error({message: err.message || err})
+    })
+  }, [id])
+
+  return [data, setData]
+}

src/pages/building/Edit/components/Amap/index.jsx

@@ -22,13 +22,11 @@ export default (props) => {
 
   useEffect(() => {
     // 只加载一次 amap 相关 js
-    sdk.loadMapModule({
-      plugins,
-    }).then((AMap) => {
+    sdk.loadMapModule({ plugins }).then((AMap) => {
       const instance = new AMap.Map(container.current, { zoom: 12 })
       instance.addControl(new AMap.Scale())
       instance.addControl(new AMap.ToolBar())
-      
+
       // 尝试自动定位到当前位置
       if (!props.value) {
         instance.addControl(autoPos(AMap))
@@ -60,7 +58,15 @@ export default (props) => {
 
   useEffect(() => {
     if (currentPos.length) {
-      posMarker.current.setPosition(currentPos)
+      if (posMarker.current) {
+        posMarker.current.setPosition(currentPos)
+      }
+      if (map.current) {
+        map.current.setCenter(currentPos);
+      }
+      if (currentPos.length && map.current) {
+        posMarker.current.setMap(map.current)
+      }
     }
   }, [currentPos])
 

src/pages/building/Edit/components/EditableArround/MapPois.jsx

@@ -1,26 +0,0 @@
-import React, { useRef, useEffect, forwardRef } from 'react'
-
-export default forwardRef((props, ref) => {
-  const tags = useRef((props.pois || '').split(','))
-
-  // 用来记录上一次传值
-  const previous = useRef()
-
-  // 监控 props.pois 的变化, 触发 onChange
-  // 实际场景中 props.pois 只会由地图引起变化
-  useEffect(() => {
-    const changed = previous.current !== props.pois
-    if (changed) {
-      tags.current = (props.pois || '').split(',')
-      previous.current = props.pois
-
-      if (props.onChange) {
-        props.onChange(tags.current)
-      }
-    }
-  }, [props.pois, props.onChange])
-
-  return (
-    <></>
-  )
-})

src/pages/building/Edit/components/EditableArround/hooks/usePoi.js

@@ -1,41 +0,0 @@
-import { useCallback, useEffect, useRef } from "react";
-
-export default function usePoi(pois, tags, setTags) {
-  const poiRef = useRef([])
-
-  useEffect(() => {
-    const len1 = !pois ? 0 : pois.length
-    const len2 = poiRef.current.length
-
-    // 空数据
-    if (len1 === len2 && len1 === 0) {
-      return
-    }
-
-    // 如果是 poiRef 更新导致了 pois 更新
-    if (len1 > 0 && poiRef.current === pois) {
-      return
-    }
-
-    // 如果是初始化
-    poiRef.current = pois || []
-  }, [pois])
-
-  const updatePois = useCallback((pois) => {
-    const newTags = tags.filter((tag) => !tag.id)
-    setTags(newTags.concat(pois))
-  }, [tags])
-
-  const deletePoi = useCallback((poi) => {
-    const newTags = tags.filter((tag) => tag.id !== poi.id)
-
-    const newPois = !poiRef.current.length ? [] : poiRef.current.filter((p) => p.id !== poi.id)
-    poiRef.current = newPois
-
-    setTags(newTags)
-
-    return newPois
-  }, [tags])
-
-  return [updatePois, deletePoi]
-}

src/pages/building/Edit/components/EditableArround/hooks/useTag.js

@@ -1,43 +0,0 @@
-import { useCallback, useRef } from "react";
-
-export default function useTag(inited, tags, setTags) {
-  const getNewTag = useRef()
-  getNewTag.current = (tag) => {
-    const matched = tags.filter((item) => (tag.name === item.name))[0]
-
-    if (matched && matched.id) {
-      return matched
-    }
-
-    return tag
-  }
-
-  const updateTags = useCallback((nwTags) => {
-    if (!nwTags || !nwTags.length) {
-      return tags
-    }
-
-    const nwVals = nwTags.map((tag) => getNewTag.current(tag))
-    setTags(nwVals)
-    inited.current = true
-  }, [tags])
-
-  const appendTags = useCallback((tag) => {
-    const found = tags.filter((item) => (tag.name === item.name))[0]
-    if (found) {
-      return
-    }
-
-    setTags(tags.concat(tag))
-    inited.current = true
-  }, [tags])
-
-
-  const deleteTags = useCallback((tag) => {
-    const nwVal = tags.filter((it) => it.name !== tag.name)
-    
-    setTags(nwVal)
-  }, [tags])
-
-  return [updateTags, appendTags, deleteTags]
-}

src/pages/building/Edit/components/EditableArround/hooks/useValue.js

@@ -1,17 +0,0 @@
-import { useEffect, useRef } from "react"
-
-export default function useValue(value, poiRef, updateTags) {
-  const valueInited = useRef(false)
-
-  useEffect(() => {
-    if (!valueInited.current && value) {
-      const vals = value.split(',').filter(Boolean).map((tag) => ({ name: tag }))
-      const newTags = !poiRef.length ? vals : vals.map((val) => {
-        const found = poiRef.current.filter((poi) => poi.name === val.name)[0]
-        return found || val
-      })
-      updateTags(newTags)
-      valueInited.current = true
-    }
-  }, [value])
-}

src/pages/building/Edit/components/EditableArround/index.jsx

@@ -1,10 +1,8 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useRef, useState } from 'react'
 import { Typography, Tag, Input, Icon } from 'antd'
-import MapPois from './MapPois'
-import { arrRemove, arrAdd } from './utils'
 
 export default React.forwardRef((props, ref) => {
-  const { tags = [], onPoiDelete, onDelete, onChange } = props
+  const { tags = [], pois = [], type, onPoiDelete, onDelete, onChange } = props
 
   const inputRef = useRef()
   const [inputValue, setInputValue] = useState()
@@ -12,18 +10,19 @@ export default React.forwardRef((props, ref) => {
 
   const handleClose = (tag) => {
     if (tag.id && onPoiDelete) {
-      onPoiDelete(tag)
+      onPoiDelete(type, tag)
+      return
     }
 
     if (onDelete) {
-      onDelete(tag)
+      onDelete(`building${type}`, tag)
     }
   }
 
   const handleInputConfirm = () => {
-    const exists = tags.filter((tag) => tag.name === inputValue)[0]
+    const exists = tags.concat(pois).filter((tag) => tag.name === inputValue)[0]
     if (!exists) {
-      onChange(tags.concat({ name: inputValue }))
+      onChange(`building${type}`, tags.concat({ name: inputValue }))
     }
     setInputVisible(false)
     setInputValue()
@@ -32,7 +31,7 @@ export default React.forwardRef((props, ref) => {
   return (
     <div>
       {
-        tags.map((tag) => (
+        tags.concat(pois).map((tag) => (
           <Tag key={tag.name} closable onClose={() => handleClose(tag)}>
             <Typography.Text>{tag.name}</Typography.Text>
           </Tag>

src/pages/building/Edit/components/EditableArround/utils.js

@@ -1,35 +0,0 @@
-
-export function arrRemove(src, target) {
-  if (!target || target.length < 1) {
-    return src;
-  }
-
-  if (!src || src.length < 1) {
-    return src;
-  }
-
-  const arr = src.filter((it) => target.indexOf(it) === -1)
-  if (arr.length === src.length) return src;
-
-  return arr;
-}
-
-export function arrAdd(src, add) {
-  if (!add || add.length < 1) {
-    return src;
-  }
-
-  if (!src && add.length > 0) {
-    return [...add]
-  }
-
-  
-  const nwTags = src.slice()
-  add.forEach((it) => {
-    if (nwTags.indexOf(it) === -1) {
-      nwTags.push(it)
-    }
-  })
-
-  return nwTags;
-}

src/pages/building/Edit/index.jsx

@@ -21,45 +21,45 @@ export default (props) => {
       <Tabs defaultActiveKey="1">
         <TabPane tab="基础信息" key="1">
           <div className={styles['tab-wrapper']} style={{maxWidth: 1000}}>
-            <Basic />
+            <Basic {...props} />
           </div>
         </TabPane>
         <TabPane tab="户型设置" key="2">
           <div className={styles['tab-wrapper']}>
-            <Apartment />
+            <Apartment {...props} />
           </div>
         </TabPane>
         <TabPane tab="项目相册" key="3">
           <div className={styles['tab-wrapper']}>
-            <AlbumList />
+            <AlbumList {...props} />
           </div>
         </TabPane>
         <TabPane tab="全景照片" key="4">
           <div className={styles['tab-wrapper']}>
-            <Panorama />
+            <Panorama {...props} />
           </div>
         </TabPane>
         <TabPane tab="项目动态" key="8">
           <div className={styles['tab-wrapper']}>
-            <News />
+            <News {...props} />
           </div>
         </TabPane>
         <TabPane tab="特价房源" key="9">
           <div className={styles['tab-wrapper']}>
-            <SpecialRoom />
+            <SpecialRoom {...props} />
           </div>
         </TabPane>
         <TabPane tab="渠道设置" key="7">
           <div className={styles['tab-wrapper']} style={{maxWidth: '800px'}}>
-            <Channel />
+            <Channel {...props} />
           </div>
         </TabPane>
         <TabPane tab="海报图片" key="5">
-          <Poster target={target} />
+          <Poster target={target} {...props} />
         </TabPane>
         <TabPane tab="分享设置" key="6">
           <div className={styles['tab-wrapper']} style={{maxWidth: '800px'}}>
-            <Share target={target} />
+            <Share target={target} {...props} />
           </div>
         </TabPane>
       </Tabs>

src/utils/image.js

@@ -3,5 +3,5 @@ export function getImgURL(img) {
     if (!img) return undefined;
 
     const isProd = process.env.NODE_ENV === 'production'
-    return isProd ? img : `http://81.69.196.8:8567${img}`;
+    return isProd ? img : `https://xlk.njyz.tech${img}`;
 }