feats

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Button, Row, Col, DatePicker, Form, Input, InputNumber, Radio, notification, Select } from 'antd'
+import { Button, Spin, 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'
@@ -12,15 +12,27 @@ 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'
 
 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 [ loading, setLoading ] = useState({ arround: false })
+  const [
+    tags,
+    initTags,
+    updateTags,
+    deletePoi,
+    initPois,
+    pois2Tags,
+    // updatePois,
+    deleteTag,
+    updatePoisAndTags,
+  ] = useTags()
   
   // 视频文件上传前 回调
   const fileUploadBeforeUpload = (file, fileList) => {
@@ -44,22 +56,33 @@ const BuildingBasic = React.forwardRef((props, ref) => {
     }
 
     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
+    setLoading({ ...loading, arround: true })
+    Promise.all(POI_TYPES.map(({ key }) => getPoiData({ type: key, location: lngLat, radius: e }))).then((res) => {
+      const pois = POI_TYPES.reduce((acc, { key }, inx) => {
+        return {
+          ...acc,
+          [key]: (res[inx] || {}).pois || []
         }
-        setPois({ ...poisCopy })
-      }).catch(err => {
-        console.error(err)
-        notification.error({ message: '周边数据获取失败' })
-      })
+      }, {})
+
+      updatePoisAndTags(pois)
+      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 (
@@ -201,36 +224,56 @@ const BuildingBasic = React.forwardRef((props, ref) => {
           </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>
+      <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 />)}

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

@@ -0,0 +1,116 @@
+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/components/EditableArround/hooks/usePoi.js

@@ -0,0 +1,41 @@
+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

@@ -0,0 +1,43 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -3,66 +3,38 @@ import { Typography, Tag, Input, Icon } from 'antd'
 import MapPois from './MapPois'
 import { arrRemove, arrAdd } from './utils'
 
-/**
- * 因为周边TAG, 包含了2个部分的维护，一个是自定义周边，一个是地图周边，所以，需要单独写2个标签的处理
- */
-
 export default React.forwardRef((props, ref) => {
+  const { tags = [], onPoiDelete, onDelete, onChange } = props
+
   const inputRef = useRef()
-  const poiRef = useRef()
   const [inputValue, setInputValue] = useState()
   const [inputVisible, setInputVisible] = useState(false)
-  const [tags, setTags] = useState([])
-  const [mapTags, setMapTags] = useState([])
-
-  const handlePoiChange = (e) => {
-    setMapTags(e)
-
-    // 先清理原来的
-    const tagArr = arrRemove(tags, mapTags)
-    // 再加入新的
-    const nwTags = arrAdd(tagArr, e)
-
-    if (nwTags !== tags) {
-      setTags(nwTags)
-  
-      if (props.onChange) {
-        props.onChange(nwTags.join(','))
-      }
-    }
-  }
 
   const handleClose = (tag) => {
-    if (mapTags.indexOf(tag) > -1) {
-      setMapTags(mapTags.filter((it) => it !== tag))
+    if (tag.id && onPoiDelete) {
+      onPoiDelete(tag)
     }
 
-    if (props.onChange) {
-      props.onChange(tags.filter((t) => t !== tag).join(','))
+    if (onDelete) {
+      onDelete(tag)
     }
   }
 
   const handleInputConfirm = () => {
-    const exists = tags.indexOf(inputValue) > -1
+    const exists = tags.filter((tag) => tag.name === inputValue)[0]
     if (!exists) {
-      props.onChange(tags.concat(inputValue).join(','))
+      onChange(tags.concat({ name: inputValue }))
     }
     setInputVisible(false)
     setInputValue()
   }
 
-  useEffect(() => {
-    const arr = props.value ? props.value.split(',') : []
-    setTags(arr)
-  }, [props.value])
-
   return (
     <div>
-      <MapPois ref={poiRef} pois={props.pois} onChange={handlePoiChange} />
       {
         tags.map((tag) => (
-          <Tag key={tag} closable onClose={() => handleClose(tag)}>
-            <Typography.Text>{tag}</Typography.Text>
+          <Tag key={tag.name} closable onClose={() => handleClose(tag)}>
+            <Typography.Text>{tag.name}</Typography.Text>
           </Tag>
         ))
       }