fix(map-plugin): some data is incorrect (#1717)
* fix: data is incorrect * fix: the data is incorrect when switch page at details * feat: improve map configuration * fix: shouldn't display tip when type = point * fix: cache
This commit is contained in:
		
							parent
							
								
									f5df009465
								
							
						
					
					
						commit
						42152568ee
					
				@ -14,14 +14,13 @@ const defaultImage =
 | 
			
		||||
  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAA/CAYAAACM5Lr9AAAFkklEQVR42s3VaWxUVRjG8ddiEKPRxAQTCVSWLnZaWmjpTgulpYUBExP9Agou4IKAogUKAgItlNJCgUIXINFPfsFoDCjibkQRI0QIICAQWUpZugKtpcv0+DxyYqaTe2/vTLf58Etu7znnPf+0k44opQw5i5qsjIFs2APHoBZatFq+02vZeq94yyKs0dOjsAzOTCtuVtNKWtX0UpeaXqHU07tgt4ZnvuMa93Avz/CsniE2WIQV3iEaCDnQ8F/MTgZ4h2d4ljNgmZ4pFszDpmIRIuFP57YWDMcFu7uHMziLMyEKxJBl2MbbM6DZub2NQ3sUZ3K2vkMMGIdNKbi1ADqcZe1q2i7VKzibd8BCEE8GUQ3PQ4ez3KWcGNCbeAfv0neKm85hWRvqo+Hu1LJ2HuwTvAt3tkAciKbDIDO/7iE4l7X9rpqCA30pa3uLwt3nYRAIuIfV5mcWN6msnapf8G405IGQMGry+prB0DiloqPfwng3G3SLDltXnTt5S6PK3NnRr9jAFhDJyLsZAJcz8SGcjOr+xAa0XGGTpOfeSMrYUKcyKlx+gS1oSkbY9VXpm2+rjHKXX2ALm2TS2qq96duaVHp5u19gC5skbc3V05N23FWT8NIfsIVNkra6siGttE2llbX7h9JWhaZ6mfj+lfaJZW3Kn6DJJRNWXWqbgN+Y39jRqtDUKKkrL15PxfdjammrfyhpVmiqlNQVfx9KwX/cFJT6A7awSVLeu1CeUlinxu9o8QsphbUKTWUyfvn5Wcm511QSXvoDtrBJkpedewzaE/E58wdsYZMopSQ55+z+pKK6fo9KKqpXaDkAIgxLWnomK3H1JZVQ0tyv2ICW6XAvLHHJ6QD4K6GgRsVjQ3/g3WzQLffCKGHJqfHgisOXaNy2f/oU7+TdukGIUW5xJ0vic6+oWGzsS7yTd4NoncPiF594GC7FFlSrcVub+gTv4p36btE6h1Fc9nFn7IpzKmZrY5/gXbwTxI0O8xD77rGPYtZeVtE42Jt4B+8C8WAcNu6dPwZDzVh8PYzdcqdXcDbvgMdBPDHEOG7R0Xkxqy6oKAzpDZzNO0AMmIfFvH1kABwZk1epIotv9yjOxOyj+g4xYB4W/dbvlAAdozGsJ3Gmni0mzMPGLvyN6IMo/NojNt/qEZyFmR+CWLAIW3CYaDDUR+D/TTgGdwdncJaeKRbMw8bM/9XdosjlZ5VjU0O3cAZngXTBPCzqzV/cPQAXHeuqVBgu8IVj/TXFGXqWdME8LHLez55mRSw9qUI31fuEZzFjNogNFmFvHPQUACfC8IUbUlTvlbDcSsWzeobYYB42+vWfjDwbnn3c6zCewdnnQGwyD4t47UcjAXA2JO+qCi6ss4V7eUafFZuswn4wM8ex+LgKwqV2cC/OzAXxgnlY+KvfmxkIVaPyr6tRhbWWuId79RnxgnmYY+53VlaHLj2lRm6stRSSc0ph7xoQL1mEzfnWyhPQNrKgGgE1hrjGPTAExEvmYWGvfNOVPUErz6vhiDDCNez5GMQHVmFfd2Vq6MLD6smCGkNc4x4QH5iHPfXyV125H64NX1eFkOpO+I5reo/4wDws9KUDdhSPxFdNIGLc8R3XQHxkFfalHYnB8w6qYRuqO+E7roH4yDws5MX9dtwHlYF5lQi6qYjPfKfXxEcWYbO/sKtsBP50QxFFI/D/De8qQLrBPCwYizY9M2r+of/D+Mx3ID6zDJv1uaVwGfAIBDqGJsbhZ9eQ/BuK+OwYlhzPNe7hXh9Yhe0zwqBB4IAYouCZn1wIXH5GEZ/d1sjBMzzrBfOwoBf2GWFYBMS4C03JWRA087OaoBmf3uCz5zrP8Kx9lmF7jXiE2RbBs95ghB0MIo8/pS0OeJAzvOBLmKY//BAGURBN+jmMa3qPkLdh/wKOL8SpLbnYFgAAAABJRU5ErkJggg==';
 | 
			
		||||
 | 
			
		||||
export const MapBlock = (props) => {
 | 
			
		||||
  const { fieldNames, dataSource = [], fixedBlock, zoom, selectedRecordKeys, setSelectedRecordKeys } = useProps(props);
 | 
			
		||||
  const { fieldNames, dataSource = [], fixedBlock, zoom, setSelectedRecordKeys } = useProps(props);
 | 
			
		||||
  const { getField, getPrimaryKey } = useCollection();
 | 
			
		||||
  const field = getField(fieldNames?.field);
 | 
			
		||||
  const [isMapInitialization, setIsMapInitialization] = useState(false);
 | 
			
		||||
  const mapRef = useRef<AMapForwardedRefProps>();
 | 
			
		||||
  const geometryUtils: AMap.IGeometryUtil = mapRef.current?.aMap?.GeometryUtil;
 | 
			
		||||
  const [record, setRecord] = useState();
 | 
			
		||||
  const [visible, setVisible] = useState(false);
 | 
			
		||||
  const [selectingMode, setSelecting] = useState('');
 | 
			
		||||
  const { t } = useMapTranslation();
 | 
			
		||||
  const compile = useCompile();
 | 
			
		||||
@ -166,7 +165,6 @@ export const MapBlock = (props) => {
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        if (data) {
 | 
			
		||||
          setVisible(true);
 | 
			
		||||
          setRecord(data);
 | 
			
		||||
        }
 | 
			
		||||
      };
 | 
			
		||||
@ -241,9 +239,7 @@ export const MapBlock = (props) => {
 | 
			
		||||
          ) : null}
 | 
			
		||||
        </Space>
 | 
			
		||||
      </div>
 | 
			
		||||
      <RecordProvider record={record}>
 | 
			
		||||
        <MapBlockDrawer visible={visible} setVisible={setVisible} record={null} />
 | 
			
		||||
      </RecordProvider>
 | 
			
		||||
      <MapBlockDrawer record={record} setVisible={setRecord} />
 | 
			
		||||
      <AMap
 | 
			
		||||
        {...field?.uiSchema?.['x-component-props']}
 | 
			
		||||
        ref={mapRefCallback}
 | 
			
		||||
@ -261,7 +257,7 @@ export const MapBlock = (props) => {
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
const MapBlockDrawer = (props) => {
 | 
			
		||||
  const { visible, setVisible } = props;
 | 
			
		||||
  const { setVisible, record } = props;
 | 
			
		||||
  const fieldSchema = useFieldSchema();
 | 
			
		||||
  const schema: Schema = useMemo(
 | 
			
		||||
    () =>
 | 
			
		||||
@ -276,8 +272,10 @@ const MapBlockDrawer = (props) => {
 | 
			
		||||
 | 
			
		||||
  return (
 | 
			
		||||
    schema && (
 | 
			
		||||
      <ActionContext.Provider value={{ visible, setVisible }}>
 | 
			
		||||
      <ActionContext.Provider value={{ visible: !!record, setVisible }}>
 | 
			
		||||
        <RecordProvider record={record}>
 | 
			
		||||
          <RecursionField schema={schema} name={schema.name} />
 | 
			
		||||
        </RecordProvider>
 | 
			
		||||
      </ActionContext.Provider>
 | 
			
		||||
    )
 | 
			
		||||
  );
 | 
			
		||||
 | 
			
		||||
@ -19,6 +19,10 @@ export interface AMapComponentProps {
 | 
			
		||||
  onChange?: (value: number[]) => void;
 | 
			
		||||
  disabled?: boolean;
 | 
			
		||||
  mapType: string;
 | 
			
		||||
  /**
 | 
			
		||||
   * only ReadPretty
 | 
			
		||||
   */
 | 
			
		||||
  readonly: string;
 | 
			
		||||
  zoom: number;
 | 
			
		||||
  type: MapEditorType;
 | 
			
		||||
  style?: React.CSSProperties;
 | 
			
		||||
@ -80,7 +84,7 @@ export interface AMapForwardedRefProps {
 | 
			
		||||
 | 
			
		||||
const AMapComponent = React.forwardRef<AMapForwardedRefProps, AMapComponentProps>((props, ref) => {
 | 
			
		||||
  const { accessKey, securityJsCode } = useMapConfiguration(props.mapType) || {};
 | 
			
		||||
  const { value, onChange, block = false, disabled = block, zoom = 13, overlayCommonOptions } = props;
 | 
			
		||||
  const { value, onChange, block = false, readonly, disabled = block, zoom = 13, overlayCommonOptions } = props;
 | 
			
		||||
  const { t } = useMapTranslation();
 | 
			
		||||
  const fieldSchema = useFieldSchema();
 | 
			
		||||
  const aMap = useRef<any>();
 | 
			
		||||
@ -252,7 +256,7 @@ const AMapComponent = React.forwardRef<AMapForwardedRefProps, AMapComponentProps
 | 
			
		||||
  // 编辑时
 | 
			
		||||
  useEffect(() => {
 | 
			
		||||
    if (!aMap.current) return;
 | 
			
		||||
    if (!value || overlay.current) {
 | 
			
		||||
    if (!value || (!readonly && overlay.current)) {
 | 
			
		||||
      return;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
@ -260,10 +264,11 @@ const AMapComponent = React.forwardRef<AMapForwardedRefProps, AMapComponentProps
 | 
			
		||||
    // 聚焦在编辑的位置
 | 
			
		||||
    map.current.setFitView([nextOverlay]);
 | 
			
		||||
    overlay.current = nextOverlay;
 | 
			
		||||
 | 
			
		||||
    if (!disabled) {
 | 
			
		||||
      createEditor();
 | 
			
		||||
      setTarget();
 | 
			
		||||
  }, [value, needUpdateFlag, type, commonOptions]);
 | 
			
		||||
    }
 | 
			
		||||
  }, [value, needUpdateFlag, type, commonOptions, disabled, readonly]);
 | 
			
		||||
 | 
			
		||||
  // 当在编辑时,关闭 mouseTool
 | 
			
		||||
  useEffect(() => {
 | 
			
		||||
@ -285,6 +290,7 @@ const AMapComponent = React.forwardRef<AMapForwardedRefProps, AMapComponentProps
 | 
			
		||||
    createEditor();
 | 
			
		||||
  }, [disabled, needUpdateFlag, type]);
 | 
			
		||||
 | 
			
		||||
  // 当值变更时,toggle mouseTool
 | 
			
		||||
  useEffect(() => {
 | 
			
		||||
    if (!mouseTool.current || !editor.current) return;
 | 
			
		||||
    const target = editor.current.getTarget();
 | 
			
		||||
@ -310,7 +316,7 @@ const AMapComponent = React.forwardRef<AMapForwardedRefProps, AMapComponentProps
 | 
			
		||||
      plugins: ['AMap.MouseTool', 'AMap.PolygonEditor', 'AMap.PolylineEditor', 'AMap.CircleEditor'],
 | 
			
		||||
    })
 | 
			
		||||
      .then((amap) => {
 | 
			
		||||
        setTimeout(() => {
 | 
			
		||||
        requestIdleCallback(() => {
 | 
			
		||||
          map.current = new amap.Map(id.current, {
 | 
			
		||||
            resizeEnable: true,
 | 
			
		||||
            zoom,
 | 
			
		||||
@ -318,7 +324,7 @@ const AMapComponent = React.forwardRef<AMapForwardedRefProps, AMapComponentProps
 | 
			
		||||
          aMap.current = amap;
 | 
			
		||||
          setErrMessage('');
 | 
			
		||||
          forceUpdate([]);
 | 
			
		||||
        }, Math.random() * 300);
 | 
			
		||||
        });
 | 
			
		||||
      })
 | 
			
		||||
      .catch((err) => {
 | 
			
		||||
        if (err.includes('多个不一致的 key')) {
 | 
			
		||||
@ -393,6 +399,7 @@ const AMapComponent = React.forwardRef<AMapForwardedRefProps, AMapComponentProps
 | 
			
		||||
              icon={<SyncOutlined />}
 | 
			
		||||
            ></Button>
 | 
			
		||||
          </div>
 | 
			
		||||
          {type !== 'point' ? (
 | 
			
		||||
            <div
 | 
			
		||||
              className={css`
 | 
			
		||||
                position: absolute;
 | 
			
		||||
@ -402,8 +409,13 @@ const AMapComponent = React.forwardRef<AMapForwardedRefProps, AMapComponentProps
 | 
			
		||||
                pointer-events: none;
 | 
			
		||||
              `}
 | 
			
		||||
            >
 | 
			
		||||
            <Alert message={t('Click to select the starting point and double-click to end the drawing')} type="info" />
 | 
			
		||||
              <Alert
 | 
			
		||||
                message={t('Click to select the starting point and double-click to end the drawing')}
 | 
			
		||||
                type="info"
 | 
			
		||||
              />
 | 
			
		||||
            </div>
 | 
			
		||||
          ) : null}
 | 
			
		||||
 | 
			
		||||
          <div
 | 
			
		||||
            className={css`
 | 
			
		||||
              position: absolute;
 | 
			
		||||
 | 
			
		||||
@ -3,7 +3,7 @@ import { useBoolean } from 'ahooks';
 | 
			
		||||
import { Button, Card, Form, Input, message, Tabs } from 'antd';
 | 
			
		||||
import React, { useEffect, useMemo } from 'react';
 | 
			
		||||
import { MapTypes } from '../constants';
 | 
			
		||||
import { MapConfigurationResourceKey, useMapConfiguration } from '../hooks';
 | 
			
		||||
import { MapConfigurationResourceKey, getSSKey, useMapConfiguration } from '../hooks';
 | 
			
		||||
import { useMapTranslation } from '../locale';
 | 
			
		||||
 | 
			
		||||
const AMapConfiguration = ({ type }) => {
 | 
			
		||||
@ -30,6 +30,7 @@ const AMapConfiguration = ({ type }) => {
 | 
			
		||||
        type,
 | 
			
		||||
      })
 | 
			
		||||
      .then((res) => {
 | 
			
		||||
        sessionStorage.removeItem(getSSKey(type));
 | 
			
		||||
        message.success(t('Saved successfully'));
 | 
			
		||||
      })
 | 
			
		||||
      .catch((err) => {
 | 
			
		||||
 | 
			
		||||
@ -1,5 +1,5 @@
 | 
			
		||||
import { useField, useFieldSchema, useForm } from '@formily/react';
 | 
			
		||||
import { EllipsisWithTooltip, useCollection, useTableBlockContext } from '@nocobase/client';
 | 
			
		||||
import { EllipsisWithTooltip, useCollection } from '@nocobase/client';
 | 
			
		||||
import React, { useEffect } from 'react';
 | 
			
		||||
import AMapComponent from './AMap';
 | 
			
		||||
 | 
			
		||||
@ -10,8 +10,7 @@ const ReadPretty = (props) => {
 | 
			
		||||
  const collectionField = getField(fieldSchema.name);
 | 
			
		||||
  const mapType = props.mapType || collectionField?.uiSchema['x-component-props']?.mapType;
 | 
			
		||||
  const field = useField();
 | 
			
		||||
  const form = useForm()
 | 
			
		||||
 | 
			
		||||
  const form = useForm();
 | 
			
		||||
  useEffect(() => {
 | 
			
		||||
    if (!field.title && collectionField?.uiSchema?.title) {
 | 
			
		||||
      field.title = collectionField.uiSchema.title;
 | 
			
		||||
@ -28,7 +27,7 @@ const ReadPretty = (props) => {
 | 
			
		||||
    );
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  return mapType === 'amap' ? <AMapComponent mapType={mapType} {...props}></AMapComponent> : null;
 | 
			
		||||
  return mapType === 'amap' ? <AMapComponent readonly mapType={mapType} {...props}></AMapComponent> : null;
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
export default ReadPretty;
 | 
			
		||||
 | 
			
		||||
@ -1,15 +1,38 @@
 | 
			
		||||
import { useRequest } from "@nocobase/client";
 | 
			
		||||
import { useRequest } from '@nocobase/client';
 | 
			
		||||
import { useMemo } from 'react';
 | 
			
		||||
 | 
			
		||||
export const MapConfigurationResourceKey = 'map-configuration';
 | 
			
		||||
export const getSSKey = (type) => {
 | 
			
		||||
  return `NOCOBASE_PLUGIN_MAP_CONFIGURATION_${type}`;
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
export const useMapConfiguration = (type: string) => {
 | 
			
		||||
  return useRequest({
 | 
			
		||||
  // cache
 | 
			
		||||
  const config = useMemo(() => {
 | 
			
		||||
    const d = sessionStorage.getItem(getSSKey(type));
 | 
			
		||||
    if (d) {
 | 
			
		||||
      return JSON.parse(d);
 | 
			
		||||
    }
 | 
			
		||||
    return d;
 | 
			
		||||
  }, [type]);
 | 
			
		||||
 | 
			
		||||
  if (config) return config;
 | 
			
		||||
 | 
			
		||||
  return useRequest(
 | 
			
		||||
    {
 | 
			
		||||
      resource: MapConfigurationResourceKey,
 | 
			
		||||
      action: 'get',
 | 
			
		||||
      params: {
 | 
			
		||||
        type,
 | 
			
		||||
      },
 | 
			
		||||
  }).data?.data;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
    },
 | 
			
		||||
    {
 | 
			
		||||
      onSuccess(data) {
 | 
			
		||||
        sessionStorage.setItem(getSSKey(type), JSON.stringify(data?.data));
 | 
			
		||||
      },
 | 
			
		||||
      refreshOnWindowFocus: false,
 | 
			
		||||
      refreshDeps: [],
 | 
			
		||||
      manual: config ? true : false,
 | 
			
		||||
    },
 | 
			
		||||
  ).data?.data;
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
		Loading…
	
		Reference in New Issue
	
	Block a user