@hzab/form-render 1.1.0 → 1.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/form-render",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "",
   "main": "lib",
   "scripts": {

package/src/common/schema-merge.ts

@@ -0,0 +1,68 @@
+import _ from "lodash";
+
+export function mergeSchema(BaseSchema, InsideSchema, title = "") {
+  const _schema = {
+    form: BaseSchema.form,
+    schema: _.cloneDeep(BaseSchema.schema),
+  };
+  let idx = Object.keys(_schema.schema.properties).length;
+
+  if (title) {
+    _schema.schema.properties.insideTitle = {
+      type: "string",
+      "x-component": "Text",
+      "x-component-props": {
+        content: title || "内部情况",
+      },
+      "x-designable-id": "insideTitle" + idx,
+      "x-index": idx,
+    };
+  }
+
+  Object.keys(InsideSchema.schema.properties).forEach((key) => {
+    const obj = InsideSchema.schema.properties[key];
+    idx += 1;
+    obj["x-index"] = idx;
+    _schema.schema.properties[key] = obj;
+  });
+  return _schema;
+}
+
+export function mergeSchemas(schemas) {
+  if (!(Array.isArray(schemas) && schemas.length > 0)) {
+    console.error("请传入 schema");
+    return;
+  }
+  const _schemaList = _.cloneDeep(schemas);
+  const _schema = {
+    form: _schemaList[0].json.form,
+    schema: {
+      type: "object",
+      properties: {},
+      "x-designable-id": _.uniqueId("schema-merge-"),
+    },
+  };
+
+  let idx = 0;
+  _schemaList.forEach((schema, i) => {
+    const titleName = `insideTitle-${i}`;
+    _schema.schema.properties[titleName] = {
+      type: "string",
+      "x-component": "Text",
+      "x-component-props": {
+        content: schema.title,
+      },
+      "x-designable-id": titleName,
+      "x-index": idx,
+    };
+    idx += 1;
+    Object.keys(schema.json.schema.properties).forEach((key) => {
+      const obj = schema.json.schema.properties[key];
+      obj["x-index"] = idx;
+      _schema.schema.properties[key] = obj;
+      idx += 1;
+    });
+  });
+
+  return _schema;
+}

package/src/components/LocationListPicker/assets/icon.js

@@ -0,0 +1 @@
+export const iconCircle0080ff = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAJQSURBVGhD3ZrrdcIwDIVldw26R+kesEdZALJA2QMGgT3KGq2razk4cV4OSYPd7w92yznRtSUrslA0B3uzohd6pW/a8OyNFI+JVvZ/nhsZutiRpjPt1dmOJzJNQGE2bNQnj0Jj4zAsZKKY8QKw2sRGK7va82HoSIXauVk04wQU5sOt+N+haMc7cnSzQeIEYNWV9d/HXGUsEitb3pGb/KEb7T67gZ8r+uLRMsYDRWv7TDx7gH4B4jInN1sePBs29NDtQkv4eyw9cdEuQI7H5618G4pjouW4bQqQgIXPp4fhBBkEdlsMpLXyVeQkrFEXAL/HCZAuqzCo6y50MMaN0qbiSn4H9iaNEyeOu61egKLe8zYpKu9hIiAi4yWHs1kE/Mz8ZrkELslKEOcSvCEczDpL9ynhKlBn6T4lXMLWE1l+vOnEM28/Ci60ZKEyP6vcXSh4mcuQfyFgsPJPmJvmbJZm9RWDoQt24CqzPNGcjme5ZH0Kms6a03G+LrRXLEBKs/wCGTfbjByjuDjKDVzLM76oz60mOChru09kbkuyAL0Eh9+BlG/kQtzqA78DCOYcYiGw0e9AycEs2wsYAxofhXp3M4vfgRKTdIGzdZ93mgLElRpffDqwKbiZBk0BAPfwKcWDNDhaT8lmDFRJoUsjxnd2LfsFgGd2azq6MlWGBQBpbp/420sFOH6WsG7z+ZA4ASVLuNSAy4SME1CCXsLc1/HyKrOLWfUqjwkoQXzgavLx301I9h/w8z6mCahSigESK2E2h18jy19tFYhCauRqNyH6BUPQrVUSJvRPAAAAAElFTkSuQmCC`;

package/src/components/LocationListPicker/components/AddrList/index.less

@@ -7,11 +7,22 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
+    padding: 12px 24px;
+    line-height: 1;
+
+    &.active {
+      background: #f2f9ff;
+      border: 1px solid #0080ff;
+    }
+
+    .addr-item-content {
+      flex: 1;
+      width: 100%;
+    }
 
     .item-content {
       display: flex;
-      .item-addr{
-        flex: 1;
+      .item-addr {
       }
       .item-range {
         flex-shrink: 0;

package/src/components/LocationListPicker/components/AddrList/index.tsx

@@ -2,9 +2,10 @@ import { Popconfirm } from "antd";
 import { EditOutlined, DeleteOutlined } from "@ant-design/icons";
 
 import "./index.less";
+import { useState } from "react";
 
 export const AddrList = (props) => {
-  const { list, ItemRender, onItemClick, onEdit, onDel, hasAction = true } = props;
+  const { list, ItemRender, onItemClick, onEdit, onDel, hasAction = true, activeId, onDelClick, onDelCancel } = props;
 
   const CItemRender = ItemRender ?? LItemRender;
 
@@ -12,13 +13,19 @@ export const AddrList = (props) => {
     <div className="addr-list">
       {list?.map((it, i) => {
         return (
-          <div className="addr-item" key={it.id ?? i} onClick={onItemClick}>
-            <CItemRender item={it} index={i} />
+          <div className={`addr-item ${activeId === it.id ? "active" : ""}`} key={it.id ?? i}>
+            <div className="addr-item-content" onClick={(e) => onItemClick(it, i, e)}>
+              <CItemRender item={it} index={i} />
+            </div>
             {hasAction && (
               <div className="action-box">
-                <EditOutlined className="action-btn edit-btn" onClick={(e) => onEdit(it, i, e)} />
-                <Popconfirm title={"确认删除当前项？"} onConfirm={(e) => onDel(it, i, e)}>
-                  <DeleteOutlined className="action-btn del-btn" />
+                <EditOutlined className="action-btn edit-btn" onClick={(e) => onEdit && onEdit(it, i, e)} />
+                <Popconfirm
+                  title={"确认删除当前项？"}
+                  onConfirm={(e) => onDel && onDel(it, i, e)}
+                  onOpenChange={(open) => open === false && onDelCancel && onDelCancel(it, i)}
+                >
+                  <DeleteOutlined className="action-btn del-btn" onClick={(e) => onDelClick && onDelClick(it, i, e)} />
                 </Popconfirm>
               </div>
             )}

package/src/components/LocationListPicker/components/Popup/address.schema.json

@@ -0,0 +1,21 @@
+{
+  "form": {},
+  "schema": {
+    "type": "object",
+    "properties": {
+      "address": {
+        "type": "string",
+        "title": "位置",
+        "x-decorator": "FormItem",
+        "x-component": "text",
+        "x-validator": [],
+        "x-component-props": {},
+        "x-decorator-props": {},
+        "x-designable-id": "address",
+        "name": "address",
+        "x-index": 0
+      }
+    },
+    "x-designable-id": "o6m980wykh1"
+  }
+}

package/src/components/LocationListPicker/components/Popup/index.tsx

@@ -3,6 +3,8 @@ import { Button } from "antd";
 
 import FormRender from "@hzab/form-render";
 
+import { mergeSchema } from "../../../../common/schema-merge";
+import AddressSchema from "./range.schema.json";
 import RangeSchema from "./range.schema.json";
 
 import "./index.less";
@@ -44,18 +46,21 @@ export const Popup = forwardRef((props: IPopupProps, parentRef) => {
 
   function onCancel() {
     setData(null);
-    rejectRef.current();
+    rejectRef.current && rejectRef.current();
   }
 
   function onConfirm() {
-    formRef.current?.formRender?.validate().then(() => {
-      resolveRef.current(formRef.current.formRender.values);
-      setData(null);
-    }).catch(() => {
-
-    });
+    formRef.current?.formRender
+      ?.validate()
+      .then(() => {
+        resolveRef.current(formRef.current.formRender.values);
+        setData(null);
+      })
+      .catch(() => {});
   }
 
+  const schema = mergeSchema(AddressSchema, formProps?.schema ?? RangeSchema);
+
   return data ? (
     <div className="popup-box" style={{ top: data?.top, left: data?.left }}>
       <div className="popup-body">
@@ -64,7 +69,7 @@ export const Popup = forwardRef((props: IPopupProps, parentRef) => {
         <FormRender
           ref={formRef}
           {...formProps}
-          schema={formProps?.schema ?? RangeSchema}
+          schema={schema}
           initialValues={{ ...formProps?.initialValues, ...data }}
         />
       </div>

package/src/components/LocationListPicker/index.less

@@ -11,10 +11,8 @@
     min-height: 600px;
     margin-right: 12px;
     .location-list-picker-notice-bar {
+      width: 120px;
       position: absolute;
-      left: 0;
-      right: 0;
-      bottom: 0;
       z-index: 9;
     }
     .add-btn {

package/src/components/LocationListPicker/index.tsx

@@ -12,6 +12,9 @@ import AMapCom from "../LocationPicker/Map/AMap";
 import MapSearch from "../LocationPicker/components/MapSearch";
 import { MapUtils } from "../LocationPicker/Map/AMap/common/utils";
 import { getAddress } from "../LocationPicker/servers";
+import { markerIconBase64 } from "../LocationPicker/assets/svg-icon";
+
+import { iconCircle0080ff } from "./assets/icon";
 
 import "./index.less";
 
@@ -19,7 +22,11 @@ export const LocationListPicker = observer((props) => {
   const { value, listProps, popupProps, ItemRender, markerIconConf, isAutoSearch, onChange } = props;
 
   const [loading, setLoading] = useState(props.loading || false);
+  const [showTip, setShowTip] = useState(false);
+  const [tipPosition, setTipPosition] = useState({});
+  const [activeId, setActiveId] = useState();
 
+  const mapDomRef = useRef();
   const mapUtilsRef = useRef<MapUtils>();
   const listRef = useRef(value);
   const statusRef = useRef();
@@ -31,6 +38,7 @@ export const LocationListPicker = observer((props) => {
     return () => {
       // 取消监听
       mapUtilsRef.current?.off("click", onMapClick);
+      mapDomRef.current.current.removeEventListener("mousemove", onMouseMove);
     };
   }, []);
 
@@ -49,17 +57,25 @@ export const LocationListPicker = observer((props) => {
   }, [value]);
 
   function renderMarker() {
-    listRef.current?.forEach((it) => {
-      mapUtilsRef.current.setMarker(it.longitude, it.latitude, { ...it });
-      mapUtilsRef.current.setCircle(it.longitude, it.latitude, it.range, { ...it });
+    listRef.current?.forEach((item) => {
+      mapUtilsRef.current.setMarker(item.longitude, item.latitude, {
+        ...item,
+        data: item,
+        onClick: onMarkerClick,
+      });
+      mapUtilsRef.current.setCircle(item.longitude, item.latitude, item.range, { ...item });
+      setInactiveMarkerIcon(item.id);
     });
   }
 
-  function mapInit({ map, mapUtils }) {
+  function mapInit({ map, mapUtils, mapDomRef: _mapDomRef }) {
+    mapDomRef.current = _mapDomRef;
+    _mapDomRef.current.addEventListener("mousemove", onMouseMove);
     mapUtilsRef.current = mapUtils;
     // 启动监听事件
     mapUtilsRef.current.on("click", onMapClick);
     renderMarker();
+    mapUtilsRef.current.setFitView();
   }
 
   function onAddClick() {
@@ -67,6 +83,8 @@ export const LocationListPicker = observer((props) => {
       message.warn("请先完成上次操作");
       return;
     }
+    setInactiveMarkerIcon(activeId);
+    setShowTip(true);
     statusRef.current = "add";
   }
 
@@ -75,6 +93,7 @@ export const LocationListPicker = observer((props) => {
     const status = statusRef.current;
     const isAdd = status === "add";
     const isEdit = status === "edit";
+    setShowTip(false);
 
     if (!isAdd && !isEdit) {
       return;
@@ -106,7 +125,11 @@ export const LocationListPicker = observer((props) => {
     item.address = await getAddress(lng, lat);
 
     // 更新地图状态
-    mapUtilsRef.current.setMarker(lng, lat, { ...item });
+    mapUtilsRef.current.setMarker(lng, lat, {
+      ...item,
+      onClick: onMarkerClick,
+      data: item,
+    });
     // 回显范围
     mapUtilsRef.current.setCircle(lng, lat, item.range, { ...item });
 
@@ -126,10 +149,13 @@ export const LocationListPicker = observer((props) => {
       isAdd && mapUtilsRef.current.rmMarker(item.id);
       // 编辑状态恢复数据
       if (isEdit) {
-        mapUtilsRef.current.setMarker(preItem.longitude, preItem.latitude, { ...preItem });
+        mapUtilsRef.current.setMarker(preItem.longitude, preItem.latitude, {
+          ...preItem,
+          data: item,
+        });
         mapUtilsRef.current.setCircle(preItem.longitude, preItem.latitude, preItem.range, { ...preItem });
       }
-      clearStatus();
+      clearStatus(item.id);
       return;
     }
 
@@ -151,12 +177,51 @@ export const LocationListPicker = observer((props) => {
     clearStatus();
   }
 
-  function clearStatus() {
+  function onMarkerClick(e, ...args) {
+    const { id } = e.target.getExtData() || {};
+    setActiveId((_id) => {
+      setInactiveMarkerIcon(_id);
+      return id;
+    });
+    setActiveMarkerIcon(id);
+  }
+
+  function clearStatus(id) {
     isEditingRef.current = false;
     // 清除状态，解决重复创建的问题
     statusRef.current = null;
     // 编辑状态清除数据
     currentItemRef.current = null;
+    setShowTip(false);
+    id && setInactiveMarkerIcon(id);
+    popupRef.current.onCancel();
+  }
+
+  function onItemClick(item, i) {
+    clearStatus(item.id);
+    setInactiveMarkerIcon(activeId);
+    setActiveId(item.id);
+    const mapUtils = mapUtilsRef.current;
+    const marker = mapUtils.markers[item.id];
+    const position = marker?.getPosition();
+    position && mapUtils.setCenter(position.lng, position.lat);
+    setActiveMarkerIcon(item.id);
+  }
+
+  function setActiveMarkerIcon(id) {
+    mapUtilsRef.current.setMarkerIcon(id, {
+      image: markerIconBase64,
+      size: [34, 34],
+      offset: [-17, -34],
+    });
+  }
+
+  function setInactiveMarkerIcon(id) {
+    mapUtilsRef.current.setMarkerIcon(id, {
+      image: iconCircle0080ff,
+      size: [12, 12],
+      offset: [-6, -6],
+    });
   }
 
   function onEdit(item, i) {
@@ -164,9 +229,13 @@ export const LocationListPicker = observer((props) => {
       message.warn("请先完成上次操作");
       return;
     }
+    setInactiveMarkerIcon(activeId);
+    setActiveId(item.id);
+    setShowTip(true);
     statusRef.current = "edit";
     currentItemRef.current = item;
     mapUtilsRef.current.setCenter(item.longitude, item.latitude, { immediately: true });
+    setActiveMarkerIcon(item.id);
     onMapClick({
       lnglat: {
         lng: item.longitude,
@@ -175,6 +244,13 @@ export const LocationListPicker = observer((props) => {
     });
   }
 
+  function onDelClick(item, i) {
+    setInactiveMarkerIcon(activeId);
+    setActiveId(item.id);
+    mapUtilsRef.current.setCenter(item.longitude, item.latitude, { immediately: true });
+    setActiveMarkerIcon(item.id);
+  }
+
   function onDel(item, i) {
     const list = [...listRef.current];
     list?.splice(i, 1);
@@ -185,9 +261,13 @@ export const LocationListPicker = observer((props) => {
     mapUtilsRef.current.rmCircle(item.id);
   }
 
+  function onDelCancel(item, i) {
+    setInactiveMarkerIcon(item.id);
+    setActiveId(null);
+  }
+
   function setPoint(lng, lat) {
     mapUtilsRef.current.setCenter(lng, lat, { immediately: true });
-    mapUtilsRef.current.map.setZoom(15, true);
     statusRef.current = "add";
     onMapClick({
       lnglat: {
@@ -197,23 +277,36 @@ export const LocationListPicker = observer((props) => {
     });
   }
 
+  function onMouseMove(e) {
+    const { offsetX, offsetY } = e;
+    setTipPosition({ left: offsetX + 10, top: offsetY + 10 });
+  }
+
   return (
     <div className="location-list-picker">
       <div className="map-box">
         <AMapCom init={mapInit} loading={loading} markerIconConf={markerIconConf} />
         <MapSearch setPoint={setPoint} isAutoSearch={isAutoSearch} />
-        <Alert
-          className="location-list-picker-notice-bar"
-          message={"点击地图上的位置，选择目标地址"}
-          type="info"
-          showIcon
-        />
+        {showTip && (
+          <Alert className="location-list-picker-notice-bar" message={"点击选择地址"} type="info" style={tipPosition} />
+        )}
         <Button className="add-btn" onClick={onAddClick}>
           新增地址
         </Button>
         <Popup ref={popupRef} {...popupProps} />
       </div>
-      <AddrList {...listProps} list={value} ItemRender={ItemRender} onEdit={onEdit} onDel={onDel} />
+      <AddrList
+        {...listProps}
+        mapUtilsRef={mapUtilsRef}
+        activeId={activeId}
+        list={value}
+        ItemRender={ItemRender}
+        onItemClick={onItemClick}
+        onEdit={onEdit}
+        onDel={onDel}
+        onDelClick={onDelClick}
+        onDelCancel={onDelCancel}
+      />
     </div>
   );
 });

package/src/components/LocationPicker/Map/AMap/common/utils.ts

@@ -23,16 +23,26 @@ export function setSecurityJsCode(securityJsCode) {
   };
 }
 
+export interface IMarker {
+  setIcon: Function;
+  setSize: Function;
+  setOffset: Function;
+  getPosition: Function;
+}
+
 export type setMarkerOptT = {
   id?: number | string;
-  marker?: Object;
+  marker?: IMarker;
   map?: Object;
   AMap?: Object;
   markerIconConf?: Object;
+  markerConf?: Object;
+  onClick?: Function;
+  data?: Object;
 };
 
 export type markersT = {
-  [k: number | string]: Object;
+  [k: number | string]: IMarker;
 };
 
 export class MapUtils {
@@ -42,14 +52,16 @@ export class MapUtils {
   public circles = {};
   public pickerMarker;
   public markerIconConf;
+  public markerConf;
 
-  constructor({ map, AMap, markerIconConf }) {
+  constructor({ map, AMap, markerIconConf, markerConf }) {
     if (!map) {
       throw new Error("请传入地图实例");
     }
     this.map = map;
     this.AMap = AMap;
     this.markerIconConf = markerIconConf || {};
+    this.markerConf = markerConf || {};
   }
 
   /**
@@ -84,6 +96,11 @@ export class MapUtils {
     map.setCenter(position, immediately, duration);
   }
 
+  setFitView() {
+    // 调整地图以适应所有标记点
+    this.map.setFitView();
+  }
+
   /**
    * 创建或修改 Marker
    * @param lon
@@ -92,7 +109,16 @@ export class MapUtils {
    * @returns
    */
   setMarker(lon, lat, opt?: setMarkerOptT) {
-    const { id = nanoid(), marker, map = this.map, AMap = this.AMap, markerIconConf = {} } = opt || {};
+    const {
+      data,
+      id = nanoid(),
+      marker,
+      map = this.map,
+      AMap = this.AMap,
+      markerIconConf = {},
+      markerConf = {},
+      onClick,
+    } = opt || {};
 
     if (!(AMap && map)) {
       throw new Error("请传入地图实例和 AMap");
@@ -111,10 +137,11 @@ export class MapUtils {
       return _marker;
     }
 
+    const size = new AMap.Size(34, 34);
     const icon = new AMap.Icon({
-      size: new AMap.Size(34, 34), //图标尺寸
+      size, //图标尺寸
       image: markerIconBase64, // Icon 的图像
-      imageSize: new AMap.Size(34, 34), // 根据所设置的大小拉伸或压缩图片
+      imageSize: size, // 根据所设置的大小拉伸或压缩图片
       ...this.markerIconConf,
       ...markerIconConf,
     });
@@ -122,13 +149,51 @@ export class MapUtils {
       offset: new AMap.Pixel(-17, -34),
       icon,
       position,
+      extData: {
+        id,
+        data,
+      },
+      ...this.markerConf,
+      ...markerConf,
     });
+
     this.markers[id] = _m;
 
+    if (onClick) {
+      _m.on("click", onClick);
+    }
+
     map?.add(_m);
     return _m;
   }
 
+  setMarkerIcon(
+    id,
+    opt = {
+      size: null,
+      image: null,
+      offset: null,
+    },
+  ) {
+    const marker = this.markers[id];
+    if (!marker) {
+      return;
+    }
+    const { image, offset } = opt || {};
+    const AMap = this.AMap;
+
+    const size = new AMap.Size(...opt?.size);
+    const icon = new AMap.Icon({
+      size, //图标尺寸
+      image: image, // Icon 的图像
+      imageSize: size, // 根据所设置的大小拉伸或压缩图片
+    });
+
+    marker.setIcon(icon);
+    marker.setSize(size);
+    marker.setOffset(new AMap.Pixel(...offset));
+  }
+
   /**
    * 删除指定 marker
    * @param id

package/src/components/LocationPicker/Map/AMap/index.jsx

@@ -25,11 +25,16 @@ function AMapCom(props) {
     }).then((AMap) => {
       const { zoom, center, init } = props;
       mapRef.current = new AMap.Map(mapDomRef.current, {
-        zoom: zoom || 11,
+        zoom: zoom || 14,
         center: center || [120.160217, 30.243861],
       });
       init &&
-        init({ map: mapRef.current, mapUtils: new MapUtils({ map: mapRef.current, AMap, markerIconConf }), AMap });
+        init({
+          mapDomRef,
+          map: mapRef.current,
+          mapUtils: new MapUtils({ map: mapRef.current, AMap, markerIconConf }),
+          AMap,
+        });
     });
   }, []);