@hzab/form-render-mobile 1.1.1 → 1.1.3-beta

package/package.json

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

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

@@ -50,6 +50,39 @@ export class MapUtils {
     this.markerIconConf = markerIconConf || {};
   }
 
+  /**
+   * 设置范围
+   * @param rangeArr
+   *
+   */
+  setMapRang({
+    map = this.map,
+    AMap = this.AMap || window.AMap,
+    rangeArr = [],
+    rangeKey = "range",
+    lonKey = "longitude",
+    latKey = "latitude",
+  }) {
+    // 获取地图上所有覆盖物
+    const overlays = map?.getAllOverlays() || [];
+    // 遍历覆盖物并删除圆形
+    overlays?.forEach((overlay: any) => {
+      if (overlay instanceof AMap.Circle) {
+        overlay.setMap(null);
+      }
+    });
+    //范围圆覆盖
+    rangeArr.forEach((item: any) => {
+      const circle = new AMap.Circle({
+        center: new AMap.LngLat(...[item[lonKey], item[latKey]]), // 圆心位置
+        radius: Number(item[rangeKey]), // 圆半径（米）
+        fillColor: "#1890ff", // 圆形填充颜色
+        strokeColor: "#40a9ff", // 描边颜色
+      });
+      map.add(circle);
+    });
+  }
+
   /**
    * 获取地图中心点
    * @param map

package/src/components/LocationPicker/components/ModalContent/index.tsx

@@ -38,6 +38,7 @@ export const ModalContent = observer((props: any) => {
     lonKey = "longitude",
     latKey = "latitude",
     addrKey = "address",
+    rangeKey = "range",
     value,
     // 搜索框是否自动搜索
     isAutoSearch = true,
@@ -48,6 +49,7 @@ export const ModalContent = observer((props: any) => {
     readOnly,
     markerIconConf,
     icons,
+    rangeArr = [],
   } = props;
 
   const mapUtilsRef = useRef<MapUtils>();
@@ -71,6 +73,15 @@ export const ModalContent = observer((props: any) => {
     setLoading(props.loading);
   }, [props.loading]);
 
+  useEffect(() => {
+    //设置范围
+    mapUtilsRef.current?.setMapRang({
+      lonKey,
+      latKey,
+      rangeKey,
+      rangeArr: rangeArr,
+    });
+  }, [rangeArr]);
   useEffect(() => {
     if (visible) {
       let _lon = defaultLocation.lon;
@@ -112,6 +123,13 @@ export const ModalContent = observer((props: any) => {
       // 禁用、只读情况使用 marker 展示点位
       mapUtilsRef.current?.setPickerMarker(_lon, _lat);
     }
+    //设置范围
+    mapUtilsRef.current?.setMapRang({
+      lonKey,
+      latKey,
+      rangeKey,
+      rangeArr: rangeArr,
+    });
   }
 
   /**

package/src/components/LocationPicker/index.tsx

@@ -41,10 +41,12 @@ export const LocationPicker = observer(function (props: any) {
     lonKey = "longitude",
     latKey = "latitude",
     addrKey = "address",
+    rangeKey = "range",
     value,
     // 搜索框是否自动搜索
     isAutoSearch = true,
     icons = {},
+    rangeArr = [],
   } = props;
 
   const [defaultLocation, setDefaultLocation] = useState({
@@ -150,6 +152,8 @@ export const LocationPicker = observer(function (props: any) {
     lonKey: lonKey ?? "longitude",
     latKey: latKey ?? "latitude",
     addrKey: addrKey ?? "address",
+    rangeKey: rangeKey ?? "range",
+    rangeArr: rangeArr ?? [],
     value,
     // 搜索框是否自动搜索
     isAutoSearch: isAutoSearch ?? true,

package/src/components/Uploader/common/ossUpload.js

@@ -110,7 +110,7 @@ class OssUpload {
  */
 export async function handleOssUpload(files, opt) {
   const _files = files;
-  const { ossUrl, signatureParams, ossParams, axiosConf } = opt || {};
+  const { ossUrl, signatureParams, ossParams, axiosConf, beforeUpload } = opt || {};
   const ossUpload = new OssUpload({
     axios: opt.axios,
     axiosConf: axiosConf,
@@ -126,18 +126,23 @@ export async function handleOssUpload(files, opt) {
       promise.push(Promise.resolve(file.ossUrl));
     } else {
       promise.push(
-        ossUpload
-          .upload(file, {
-            signatureParams: {
-              isPublic: 1,
-              ...(signatureParams || {}),
-            },
-            ossParams,
-            axiosConf,
-          })
-          .then((res) => {
-            return Promise.resolve(res?.data?.data?.fileUrl);
-          }),
+        new Promise(async (resolve, reject) => {
+          const f = (await (beforeUpload && beforeUpload(file, { reject }))) || file;
+          ossUpload
+            .upload(f, {
+              signatureParams: {
+                isPublic: 1,
+                ...(signatureParams || {}),
+              },
+              ossParams,
+              axiosConf,
+            })
+            .then((res) => {
+              resolve(res?.data?.data?.fileUrl);
+              return Promise.resolve(res?.data?.data?.fileUrl);
+            })
+            .catch(reject);
+        }),
       );
     }
   });

package/src/components/Uploader/uploader.jsx

@@ -255,13 +255,16 @@ function Uploader(props, ref) {
       {disabled || readOnly || (maxCount > 0 && fileList.length >= maxCount) ? null : (
         <>
           <div
-            className="uploader-add-btn"
+            className={`uploader-add-btn ${loading ? "uploader-add-btn-loading" : ""}`}
             onClick={() => {
+              if (loading) {
+                return;
+              }
               setActionSheetVisible(true);
             }}
             loading={loading}
           >
-            {uploadBtnNode ? uploadBtnNode : "+"}
+            {loading ? "上传中..." : uploadBtnNode ? uploadBtnNode : "+"}
           </div>
           <ActionSheet
             cancelText="取消"

package/src/components/Uploader/uploader.less

@@ -11,6 +11,7 @@
     margin-bottom: 2vw;
     vertical-align: top;
     border-radius: 4px;
+    border: 1px dashed #e3e3e3;
     .file-item-content-box {
       width: 100%;
       height: 100%;
@@ -38,6 +39,9 @@
   .uploader-add-btn {
     font-size: 6vw;
   }
+  .uploader-add-btn-loading {
+    font-size: 3vw;
+  }
   .aria-hidden {
     display: none;
   }

package/src/index.less

@@ -1,61 +1,147 @@
 .form-render {
+  background: #F5F5F5;
+  padding: 32px;
   font-size: 4vw;
+
+  .adm-formily-layout {
+    background: #ffffff;
+  }
+
+  .adm-card {
+    background: #ffffff;
+    padding: 0;
+
+    .adm-card-header {
+      padding: 0;
+      background: #F5F5F5;
+      padding-top: 24px;
+
+    }
+
+    .adm-card-body {
+      padding: 0;
+    }
+
+    .adm-card-header-title {
+      font-size: 32px;
+      font-weight: 500;
+      margin-bottom: 24px;
+
+    }
+  }
+
+  .adm-card:last-child {
+    margin-bottom: 0;
+  }
+
+  .adm-card:first-child {
+    .adm-card-header {
+      padding-top: 0px;
+    }
+  }
+
   .formily-form-item {
-    padding: 1.6vw;
+    padding: 24px 0;
+    margin: 0 24px;
+
+    border-bottom: 2px solid #F2F2F5;
+
     &.layout-vertical {
+
       .adm-formily-item-label,
       .adm-formily-item-control {
         width: 100%;
+
+
       }
     }
+
+    .adm-formily-item-asterisk {
+      font-size: 28px;
+    }
+
+    .adm-input-element {
+      font-size: 28px;
+    }
+
+    .adm-radio {
+      .adm-radio-content {
+        font-size: 28px;
+        color: #333333;
+      }
+
+      .adm-radio-icon {
+        width: 32px;
+        height: 32px;
+      }
+    }
+
+    .adm-formily-item-help-enter-active {
+      font-size: 28px;
+    }
+  }
+
+  .formily-form-item:last-child {
+    border-bottom: none;
   }
+
   .adm-formily-item-layout-vertical {
     .adm-formily-item-asterisk {
       top: unset;
       margin-left: unset;
     }
   }
+
   .adm-formily-item-asterisk {
     min-width: 3vw;
     position: unset;
     margin-left: 0;
     padding-right: 1vw;
   }
+
   .adm-formily-item-control {
     .adm-formily-item-extra {
       line-height: 1.3;
     }
   }
+
   .adm-formily-item {
     font-size: 4vw;
+
     .adm-list-item-title {
       font-size: 4vw;
     }
+
     .adm-formily-item-label {
       align-items: unset;
       line-height: 1.5;
     }
+
     .adm-formily-item-error-help {
       line-height: 1.5;
     }
+
     .adm-formily-item-control .adm-formily-item-control-content .adm-formily-item-control-content-component {
       line-height: 1.5;
     }
   }
+
   .adm-list-body {
     background-color: unset;
+
     .adm-card-body {
       .adm-list-item-content {
         border-top: unset;
       }
     }
   }
+
   .picker-box {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    .picker-right-icon {
-    }
+
+    .picker-right-icon {}
   }
 
   .adm-formily-item-control-align-right {
@@ -67,6 +153,7 @@
   .placeholder {
     color: #ccc;
   }
+
   &.content-right {
     .adm-formily-item-control-content-component {
       display: flex;
@@ -79,6 +166,7 @@
     .adm-formily-item-asterisk {
       display: none;
     }
+
     .adm-selector-item-disabled {
       opacity: 1;
     }
@@ -88,4 +176,4 @@
   & .adm-checkbox {
     padding-right: 10px;
   }
-}
+}