manage

estateagents-admin-manager/src/components/AMap/AMapSearch.jsx

@@ -0,0 +1,128 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Map, Marker } from 'react-amap'
+import debounce from 'lodash.debounce'
+import styles from './style.less'
+
+const getPosFromProps = props => {
+  if (props.value) {
+    const temp = props.value.split(',')
+    return { longitude: temp[0], latitude: temp[1] }
+  } else {
+    return null
+  }
+}
+
+class AMapSearch extends React.PureComponent {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      markerPosition: getPosFromProps(props),
+    }
+
+    // 高德地图 Marker 实例
+    this.markerInstance = undefined
+    // 高德地图 Map 实例
+    this.mapInstance = undefined
+
+    this.amapEvents = {
+      created: mapInstance => {
+        this.mapInstance = mapInstance
+        
+        AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.CitySearch'], () => {
+          // 实例化Autocomplete
+          const autoOptions = { input: 'amapInput' }
+          const autoComplete = new AMap.Autocomplete(autoOptions)
+          const placeSearch = new AMap.PlaceSearch({ map: mapInstance })
+
+          // 监听下拉框选中事件
+          AMap.event.addListener(autoComplete, 'select', e => {
+            // TODO 针对选中的poi实现自己的功能
+            placeSearch.setCity(e.poi.adcode)
+            placeSearch.search(e.poi.name)
+          })
+
+          const citySearch = new AMap.CitySearch()
+          citySearch.getLocalCity((status, result) => {
+            if (status === 'complete' && result.info === 'OK') {
+              // 查询成功，result即为当前所在城市信息
+              console.log('当前所在城市：', result)
+              if (result && result.city && result.bounds) {
+                // 当前城市位置信息
+                const citybounds = result.bounds;
+                // 地图显示当前城市
+                mapInstance.setBounds(citybounds);
+                // 需要在设置坐标成功后，重新设置 缩放级别
+                // mapInstance.setZoom(15)
+              }
+            }
+          })
+
+          // 搜索结果点击
+          placeSearch.on('markerClick', debounce(e => {
+            const { location: loc } = e.data
+            const lngLat = `${loc.lng},${loc.lat}`
+            this.props.onChange(lngLat, e)
+          }, 300, { leading: true }))
+        })
+
+        // 实例点击事件
+        mapInstance.on('click', debounce(e => {
+          const lngLat = `${e.lnglat.getLng()},${e.lnglat.getLat()}`
+          this.props.onChange(lngLat, e)
+        }, 300, { leading: true }));
+      },
+    };
+    
+    this.markerEvents = {
+      created: markerInstance => {
+        this.markerInstance = markerInstance
+        console.log('--->',markerInstance)
+      }
+    }
+    // this.markerPosition = { longitude: 120, latitude: 30 };
+  }
+
+  static getDerivedStateFromProps(props, state) {
+    if (props.value && !state.markerPosition) {
+      return { markerPosition: getPosFromProps(props) }
+    }
+
+    return null
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.value !== prevProps.value) {
+      if (this.props.value) {
+        this.setState({ markerPosition: getPosFromProps(this.props) }, () => {
+          if (this.mapInstance) {
+            // 需要在设置坐标成功后，重新设置 缩放级别
+            // this.mapInstance.setZoom(15)
+          }
+        })
+      }
+    }
+  }
+
+  render() {
+    return (
+      <>
+        <div style={{ width: '100%', height: '100%', minHeight: '400px', position: 'relative' }}>
+          {/* zoom={15} 设置后，无效，不知道什么原因，必须手动设置 */}
+          <Map plugins={['ToolBar']} events={this.amapEvents} amapkey={this.props.amapkey} center={this.state.markerPosition}>
+            <Marker position={this.state.markerPosition} events={this.markerEvents} clickable />
+          </Map>
+          {
+          <div className={styles.infoBox}>
+            <span className={styles.inputText}>请输入关键字</span>
+            <input id="amapInput" className={styles.input} type="text" />
+          </div>
+          }
+        </div>
+      </>
+    )
+  }
+}
+
+export default AMapSearch

estateagents-admin-manager/src/components/AMap/index.js

@@ -0,0 +1,7 @@
+import AMapSearch from './AMapSearch'
+import { regeo as getRegeo } from './utils'
+
+export {
+  AMapSearch,
+  getRegeo
+}

estateagents-admin-manager/src/components/AMap/style.less

@@ -0,0 +1,53 @@
+
+.infoBox {
+  padding: 10px;
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  background-color: white;
+  width: 290px;
+  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
+  z-index: 100;
+  .inputText{
+    margin-right: 10px;
+  }
+  .input{
+    width: 150px;
+    height: 32px;
+    font-size: 16px;
+  }
+ 
+}
+
+
+/* types */
+
+.native-toast-error {
+  background-color: #d92727;
+  color: white;
+}
+
+.native-toast-success {
+  background-color: #62a465;
+  color: white;
+}
+
+.native-toast-warning {
+  background-color: #fdaf17;
+  color: white;
+}
+
+.native-toast-info {
+  background-color: #5060ba;
+  color: white;
+}
+
+[class^="native-toast-icon-"] {
+  vertical-align: middle;
+  margin-right: 8px
+}
+
+[class^="native-toast-icon-"] svg {
+  width: 16px;
+  height: 16px;
+}

estateagents-admin-manager/src/components/AMap/utils.js

@@ -0,0 +1,26 @@
+import { fetch, apis } from '@/utils/request'
+
+export function regeo(key, params) {
+  return new Promise((resolve, reject) => {
+    fetch(apis.amap.regeo)({
+      params: {
+        key,
+        output: 'json',
+        extensions: 'base',
+        batch: 'false',
+        roadlevel: 0,
+        ...params,
+      }
+    }).then(res => {
+      if (res.status === '1' && res.infocode === '10000') {
+        resolve(res.regeocode)
+      } else {
+        console.error(res)
+        resolve(res.info)
+      }
+    }).catch(err => {
+      console.error(err)
+      resolve(err.message)
+    })
+  })
+}

estateagents-admin-manager/src/components/ActionList/index.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Menu, Dropdown, Icon } from 'antd';
+
+import './style.less';
+
+export default function withActions(actionsRender) {
+  return function ActionList(text, record) {
+    const actions = actionsRender(text, record);
+    const [Act1, Act2, ...leftActs] = (actions || []).filter(Boolean);
+    const showMore = leftActs && leftActs.length > 0;
+
+    const menus = (
+      <Menu className="actlist-menu">
+        {[Act2].concat(leftActs).filter(Boolean).map((Act, index) => (<Menu.Item key={`dm-${index}`}>{Act}</Menu.Item>))}
+      </Menu>
+    );
+    console.log('---------->', record, menus)
+
+    return (
+      <div className="action-list">
+        {
+          Act1 && <span>{Act1}</span>
+        }
+        {
+          !showMore && Act2 && <span>{Act2}</span>
+        }
+        {
+          showMore ?
+          (
+            <span>
+              <Dropdown overlay={menus} trigger={['click']}>
+                <a onClick={e => e.preventDefault()}>
+                  <span>更多</span> <Icon type="down" />
+                </a>
+              </Dropdown>
+            </span>
+          ) : null
+        }
+      </div>
+    );
+  }
+}

estateagents-admin-manager/src/components/ActionList/style.less

@@ -0,0 +1,29 @@
+
+:global{
+  .action-list {  
+    span {
+      display: inline-block;
+      & + span {
+        margin-left: 16px;
+      }
+  
+      a {
+        color: #666;
+  
+        span {
+          color: #FF4A4A;
+        }
+      }
+    }
+  }
+  
+  .actlist-menu {
+    .ant-dropdown-menu-item {
+      color: #666 !important;
+
+      &:hover {
+        background-color: rgba(0,0,0, .1);
+      }
+    }
+  }
+}