@hzab/form-render 1.0.3 → 1.1.1

package/package.json

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

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

@@ -0,0 +1,39 @@
+.addr-list {
+  flex: 1;
+  height: 100%;
+  min-height: 600px;
+  overflow-y: auto;
+  .addr-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .item-content {
+      display: flex;
+      .item-addr{
+        flex: 1;
+      }
+      .item-range {
+        flex-shrink: 0;
+        color: #999;
+      }
+    }
+
+    .action-box {
+      min-width: 56px;
+    }
+    .action-btn {
+      margin-right: 12px;
+      font-size: 16px;
+      &:last-child {
+        margin-right: none;
+      }
+    }
+    .edit-btn {
+      color: #0080ff;
+    }
+    .del-btn {
+      color: #ff3333;
+    }
+  }
+}

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

@@ -0,0 +1,43 @@
+import { Popconfirm } from "antd";
+import { EditOutlined, DeleteOutlined } from "@ant-design/icons";
+
+import "./index.less";
+
+export const AddrList = (props) => {
+  const { list, ItemRender, onItemClick, onEdit, onDel, hasAction = true } = props;
+
+  const CItemRender = ItemRender ?? LItemRender;
+
+  return (
+    <div className="addr-list">
+      {list?.map((it, i) => {
+        return (
+          <div className="addr-item" key={it.id ?? i} onClick={onItemClick}>
+            <CItemRender item={it} index={i} />
+            {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" />
+                </Popconfirm>
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+function LItemRender(props) {
+  const { item } = props;
+  const { address, range } = item || {};
+  return (
+    <div className="item-content">
+      <div className="item-addr">{address}</div>
+      {range && <span className="item-range">（范围：{range}）</span>}
+    </div>
+  );
+}
+
+export default AddrList;

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

@@ -0,0 +1,19 @@
+.popup-box {
+  position: absolute;
+  z-index: 9;
+  min-width: 200px;
+  padding: 20px;
+  border-radius: 4px;
+  background-color: #fff;
+  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
+
+  .popup-footer {
+    .ant-btn {
+      margin-right: 12px;
+
+      &:last-child {
+        margin-right: none;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,81 @@
+import { useRef, forwardRef, useImperativeHandle, useState } from "react";
+import { Button } from "antd";
+
+import FormRender from "@hzab/form-render";
+
+import RangeSchema from "./range.schema.json";
+
+import "./index.less";
+
+export interface IPopupProps {
+  formProps?: {
+    schema;
+    initialValues?: Object;
+  };
+}
+
+export interface IData {
+  top: number;
+  left: number;
+  address: string;
+}
+
+export const Popup = forwardRef((props: IPopupProps, parentRef) => {
+  const { formProps = { schema: RangeSchema } } = props;
+
+  const [data, setData] = useState<IData>();
+
+  const formRef: any = useRef();
+  const resolveRef = useRef<Function>();
+  const rejectRef = useRef<Function>();
+
+  useImperativeHandle(parentRef, () => ({
+    onShow,
+    onCancel,
+  }));
+
+  function onShow(data) {
+    setData(data ?? {});
+    return new Promise((resolve, reject) => {
+      resolveRef.current = resolve;
+      rejectRef.current = reject;
+    });
+  }
+
+  function onCancel() {
+    setData(null);
+    rejectRef.current();
+  }
+
+  function onConfirm() {
+    formRef.current?.formRender?.validate().then(() => {
+      resolveRef.current(formRef.current.formRender.values);
+      setData(null);
+    }).catch(() => {
+
+    });
+  }
+
+  return data ? (
+    <div className="popup-box" style={{ top: data?.top, left: data?.left }}>
+      <div className="popup-body">
+        {/* TODO: schema 中插入地址字段 text 格式 */}
+        <div>地址：{data?.address}</div>
+        <FormRender
+          ref={formRef}
+          {...formProps}
+          schema={formProps?.schema ?? RangeSchema}
+          initialValues={{ ...formProps?.initialValues, ...data }}
+        />
+      </div>
+      <div className="popup-footer">
+        <Button type="primary" onClick={onConfirm}>
+          确定
+        </Button>
+        <Button onClick={onCancel}>取消</Button>
+      </div>
+    </div>
+  ) : null;
+});
+
+export default Popup;

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

@@ -0,0 +1,21 @@
+{
+  "form": {},
+  "schema": {
+    "type": "object",
+    "properties": {
+      "range": {
+        "type": "string",
+        "title": "范围",
+        "x-decorator": "FormItem",
+        "x-component": "Input",
+        "x-validator": [],
+        "x-component-props": {},
+        "x-decorator-props": {},
+        "x-designable-id": "range",
+        "name": "range",
+        "x-index": 0
+      }
+    },
+    "x-designable-id": "o6m980wykh1"
+  }
+}

package/src/components/LocationListPicker/index.less

@@ -0,0 +1,26 @@
+.location-list-picker {
+  width: 100%;
+  display: flex;
+  .location-map-search {
+    top: 12px;
+    left: 12px;
+  }
+  .map-box {
+    position: relative;
+    width: 50%;
+    min-height: 600px;
+    margin-right: 12px;
+    .location-list-picker-notice-bar {
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 9;
+    }
+    .add-btn {
+      position: absolute;
+      top: 12px;
+      right: 12px;
+    }
+  }
+}

package/src/components/LocationListPicker/index.tsx

@@ -0,0 +1,221 @@
+// @ts-nocheck
+import { useEffect, useRef, useState } from "react";
+import { Button, message, Alert } from "antd";
+import { observer } from "@formily/react";
+
+import { nanoid } from "nanoid";
+
+import AddrList from "./components/AddrList";
+import Popup from "./components/Popup";
+
+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 "./index.less";
+
+export const LocationListPicker = observer((props) => {
+  const { value, listProps, popupProps, ItemRender, markerIconConf, isAutoSearch, onChange } = props;
+
+  const [loading, setLoading] = useState(props.loading || false);
+
+  const mapUtilsRef = useRef<MapUtils>();
+  const listRef = useRef(value);
+  const statusRef = useRef();
+  const currentItemRef = useRef();
+  const popupRef = useRef();
+  const isEditingRef = useRef();
+
+  useEffect(() => {
+    return () => {
+      // 取消监听
+      mapUtilsRef.current?.off("click", onMapClick);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!Array.isArray(value) || value?.length == 0 || !mapUtilsRef.current) {
+      return;
+    }
+    // 处理 id
+    value?.forEach((it) => {
+      if (!it.id) {
+        it.id = nanoid();
+      }
+    });
+    listRef.current = value;
+    renderMarker();
+  }, [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 });
+    });
+  }
+
+  function mapInit({ map, mapUtils }) {
+    mapUtilsRef.current = mapUtils;
+    // 启动监听事件
+    mapUtilsRef.current.on("click", onMapClick);
+    renderMarker();
+  }
+
+  function onAddClick() {
+    if (isEditingRef.current) {
+      message.warn("请先完成上次操作");
+      return;
+    }
+    statusRef.current = "add";
+  }
+
+  // 处理 marker、范围 绘制填写逻辑
+  async function onMapClick(e) {
+    const status = statusRef.current;
+    const isAdd = status === "add";
+    const isEdit = status === "edit";
+
+    if (!isAdd && !isEdit) {
+      return;
+    }
+    isEditingRef.current = true;
+
+    const { lng, lat } = e.lnglat || {};
+
+    const preItem = currentItemRef.current;
+    const id = isAdd ? nanoid() : preItem?.id;
+
+    let item = {
+      id,
+      longitude: lng,
+      latitude: lat,
+      address: "",
+      range: null,
+      ...preItem,
+    };
+
+    // 解决新增时点击修改重复创建的问题
+    if (isAdd) {
+      item.longitude = lng;
+      item.latitude = lat;
+      currentItemRef.current = item;
+    }
+
+    // 接口获取地址
+    item.address = await getAddress(lng, lat);
+
+    // 更新地图状态
+    mapUtilsRef.current.setMarker(lng, lat, { ...item });
+    // 回显范围
+    mapUtilsRef.current.setCircle(lng, lat, item.range, { ...item });
+
+    // 根据经纬度获取弹窗位置
+    const { x, y } = mapUtilsRef.current.map.lngLatToContainer([lng, lat]);
+    let res = {};
+    try {
+      res = await popupRef.current?.onShow({
+        top: y,
+        left: x,
+        address: item.address,
+        range: item.range,
+        item,
+      });
+    } catch (error) {
+      // 新增状态，取消时清除已添加的 marker circle
+      isAdd && mapUtilsRef.current.rmMarker(item.id);
+      // 编辑状态恢复数据
+      if (isEdit) {
+        mapUtilsRef.current.setMarker(preItem.longitude, preItem.latitude, { ...preItem });
+        mapUtilsRef.current.setCircle(preItem.longitude, preItem.latitude, preItem.range, { ...preItem });
+      }
+      clearStatus();
+      return;
+    }
+
+    // 设置范围
+    mapUtilsRef.current.setCircle(lng, lat, res.range, { ...item });
+
+    item = Object.assign(item, res);
+
+    const list = [...listRef.current];
+
+    if (isAdd) {
+      list.push(item);
+    } else if (isEdit) {
+      const idx = list.findIndex((it) => it.id === id);
+      list.splice(idx, 1, item);
+    }
+
+    onChange && onChange(list);
+    clearStatus();
+  }
+
+  function clearStatus() {
+    isEditingRef.current = false;
+    // 清除状态，解决重复创建的问题
+    statusRef.current = null;
+    // 编辑状态清除数据
+    currentItemRef.current = null;
+  }
+
+  function onEdit(item, i) {
+    if (isEditingRef.current) {
+      message.warn("请先完成上次操作");
+      return;
+    }
+    statusRef.current = "edit";
+    currentItemRef.current = item;
+    mapUtilsRef.current.setCenter(item.longitude, item.latitude, { immediately: true });
+    onMapClick({
+      lnglat: {
+        lng: item.longitude,
+        lat: item.latitude,
+      },
+    });
+  }
+
+  function onDel(item, i) {
+    const list = [...listRef.current];
+    list?.splice(i, 1);
+    onChange && onChange(list);
+    // 清除对应的 marker
+    mapUtilsRef.current.rmMarker(item.id);
+    // 清除对应的 circle
+    mapUtilsRef.current.rmCircle(item.id);
+  }
+
+  function setPoint(lng, lat) {
+    mapUtilsRef.current.setCenter(lng, lat, { immediately: true });
+    mapUtilsRef.current.map.setZoom(15, true);
+    statusRef.current = "add";
+    onMapClick({
+      lnglat: {
+        lng,
+        lat,
+      },
+    });
+  }
+
+  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
+        />
+        <Button className="add-btn" onClick={onAddClick}>
+          新增地址
+        </Button>
+        <Popup ref={popupRef} {...popupProps} />
+      </div>
+      <AddrList {...listProps} list={value} ItemRender={ItemRender} onEdit={onEdit} onDel={onDel} />
+    </div>
+  );
+});
+
+export default LocationListPicker;

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

@@ -1,5 +1,6 @@
 import AMapLoader from "./loader";
 import { markerIconBase64 } from "../../../assets/svg-icon";
+import { nanoid } from "nanoid";
 
 if (!window._AMapLoaderTemp) {
   window._AMapLoaderTemp = {};
@@ -38,6 +39,7 @@ export class MapUtils {
   public map;
   public AMap;
   public markers: markersT = {};
+  public circles = {};
   public pickerMarker;
   public markerIconConf;
 
@@ -68,14 +70,18 @@ export class MapUtils {
    * @param lat
    * @param opt
    */
-  setCenter(lon, lat, opt = { map: this.map, AMap: this.AMap || window.AMap }) {
-    const { map = this.map, AMap = this.AMap || window.AMap } = opt || {};
+  setCenter(
+    lon,
+    lat,
+    opt = { immediately: undefined, duration: undefined, map: this.map, AMap: this.AMap || window.AMap },
+  ) {
+    const { map = this.map, AMap = this.AMap || window.AMap, immediately, duration } = opt || {};
     if (!(AMap && map)) {
       throw new Error("请传入地图实例和 AMap");
     }
     const position = new window.AMap.LngLat(lon, lat);
     // 设置中心点
-    map.setCenter(position);
+    map.setCenter(position, immediately, duration);
   }
 
   /**
@@ -86,7 +92,8 @@ export class MapUtils {
    * @returns
    */
   setMarker(lon, lat, opt?: setMarkerOptT) {
-    const { id = Date.now(), marker, map = this.map, AMap = this.AMap, markerIconConf = {} } = opt || {};
+    const { id = nanoid(), marker, map = this.map, AMap = this.AMap, markerIconConf = {} } = opt || {};
+
     if (!(AMap && map)) {
       throw new Error("请传入地图实例和 AMap");
     }
@@ -96,6 +103,7 @@ export class MapUtils {
     }
     const position = new AMap.LngLat(lon, lat);
     let _marker = marker || this.markers[id];
+
     // 创建 Marker 或修改位置
     if (_marker) {
       // @ts-ignore
@@ -116,12 +124,67 @@ export class MapUtils {
       position,
     });
     this.markers[id] = _m;
+
     map?.add(_m);
     return _m;
   }
 
+  /**
+   * 删除指定 marker
+   * @param id
+   */
+  rmMarker(id) {
+    this.map.remove(this.markers[id]);
+    delete this.markers[id];
+  }
+
+  setCircle(lon, lat, radius, opt?) {
+    const { id = nanoid(), circle, map = this.map, AMap = this.AMap, circleConf = {} } = opt || {};
+    if (!(AMap && map)) {
+      throw new Error("请传入地图实例和 AMap");
+    }
+    if (lon === null || lon === undefined || lat === null || lat === undefined) {
+      console.warn("setMarker 请传入正确的经纬度");
+      return;
+    }
+    // circles
+
+    const center = new AMap.LngLat(lon, lat);
+    let _circle = circle || this.circles[id];
+
+    // 创建 Marker 或修改位置
+    if (_circle) {
+      // @ts-ignore
+      _circle.setCenter(center);
+      _circle.setRadius(radius);
+      return _circle;
+    }
+
+    //创建圆形 Circle 实例
+    const _c = new AMap.Circle({
+      center: center, // 圆心
+      radius: radius, // 半径
+      borderWeight: 1, // 描边的宽度
+      strokeColor: "#0080FF", // 轮廓线颜色
+      strokeWeight: 1, // 轮廓线宽度
+      fillOpacity: 0.1, // 圆形填充透明度
+      fillColor: "#0080FF", // 圆形填充颜色
+      zIndex: 50, // 圆形的叠加顺序
+      ...circleConf,
+    });
+    this.circles[id] = _c;
+    map?.add(_c);
+    return _c;
+  }
+
+  rmCircle(id) {
+    this.map.remove(this.circles[id]);
+    delete this.circles[id];
+  }
+
   /**
    * 创建或修改地图选点的 Marker
+   * 在当前 utils 中唯一
    * @param lon
    * @param lat
    * @param opt

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

@@ -1,4 +1,8 @@
 .a-map-container {
   width: 100%;
   height: 100%;
+  .amap-logo,
+  .amap-copyright {
+    z-index: 5;
+  }
 }

package/src/components/Upload/uploader.jsx

@@ -11,7 +11,7 @@ import React, { useEffect, useState } from "react";
 import { nanoid } from "nanoid";
 
 import { handleInputFileList, getFileName, getFileType } from "./common/utils";
-import UploadOss from "./common/ossUpload";
+import LUploadOss from "./common/ossUpload";
 
 import PreviewModal, { hasPreviewRender, hasPreviewMedium } from "./components/PreviewModal";
 
@@ -43,6 +43,9 @@ export function Uploader({ onChange, ...props }) {
     templateUrl,
     beforeUploadCheck,
     templateDownloadText = "模板下载",
+    isFileObj = false,
+    isFileJson = false,
+    UploadOss,
   } = props;
 
   const [fileList, setFileList] = useState([]);
@@ -60,8 +63,14 @@ export function Uploader({ onChange, ...props }) {
           _file = _file?.originFileObj;
         }
         // 从文件对象中获取 url，ossPromise 为上传中的文件，兼容 file 为字符串的情况
-        let str = (await _file.ossPromise) || _file.url || _file.ossUrl || _file;
-        _files[i] = str;
+
+        if (isFileObj) {
+          let { ossUrl, url, uid, name, type } = (await _file.ossPromise) || _file;
+          _files[i] = { ossUrl, url, uid, name, type };
+        } else {
+          let str = (await _file.ossPromise) || _file.url || _file.ossUrl || _file;
+          _files[i] = str;
+        }
       }
     }
     // 处理空数据情况
@@ -71,17 +80,25 @@ export function Uploader({ onChange, ...props }) {
       // maxCount 为 1 的时候返回结果去除数组
       _files = _files[0];
     }
-    onChange && onChange?.(_files);
+    onChange && onChange?.(isFileJson ? JSON.stringify(_files) : _files);
   };
 
   useEffect(() => {
     if (!value) {
       return;
     }
-    let _list = value;
+
+    let _list = [];
+    try {
+      _list = JSON.parse(value);
+    } catch (e) {
+      _list = value;
+    }
+
     if (typeof _list === "string") {
       _list = value.split(",");
     }
+
     if (Array.isArray(_list)) {
       _list = _list.map((res) => {
         if (typeof res === "string") {
@@ -173,7 +190,8 @@ export function Uploader({ onChange, ...props }) {
     },
     customRequest: isOssUpload
       ? function customRequest({ action, data, file, filename, headers, method, onSuccess, onProgress, onError }) {
-          const ossUpload = new UploadOss({
+          const _UploadOss = UploadOss || LUploadOss;
+          const ossUpload = new _UploadOss({
             serverUrl: ossUrl,
             ...ossOpt,
           });
@@ -188,7 +206,7 @@ export function Uploader({ onChange, ...props }) {
               file.url = res?.data?.data?.fileUrl ?? res?.data?.fileUrl ?? res?.fileUrl;
               file.ossUrl = file.url;
               onSuccess(file);
-              return file.ossUrl;
+              return isFileObj ? file : file.ossUrl;
             })
             .catch(onError);
         }

package/src/components/index.tsx

@@ -8,6 +8,7 @@ export * from "./TreeCheckbox";
 export * from "./DatePicker";
 
 export * from "./LocationPicker";
+export * from "./LocationListPicker";
 export * from "./RichEditor";
 
 export { Text };