@hzab/form-render-mobile 0.2.4 → 0.2.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/lib/index.js +1 -1
  2. package/lib/static/imgs/marker-icon_ab8bbcc8cb.svg +4 -0
  3. package/lib/static/imgs/picker-icon_24d725ef02.svg +5 -0
  4. package/lib/static/imgs/position-icon_5bcb8a742e.svg +6 -0
  5. package/lib/static/imgs/reset-icon_9edad62306.svg +5 -0
  6. package/package.json +1 -1
  7. package/src/components/LocationPicker/Map/AMap/common/utils.ts +7 -0
  8. package/src/components/LocationPicker/README.md +13 -9
  9. package/src/components/LocationPicker/assets/marker-icon.svg +4 -0
  10. package/src/components/LocationPicker/assets/picker-icon.svg +5 -0
  11. package/src/components/LocationPicker/assets/position-icon.svg +6 -0
  12. package/src/components/LocationPicker/assets/reset-icon.svg +5 -0
  13. package/src/components/LocationPicker/components/ModalContent/index.less +19 -2
  14. package/src/components/LocationPicker/components/ModalContent/index.tsx +70 -23
  15. package/src/components/LocationPicker/components/PickerInfo/index.tsx +29 -21
  16. package/src/components/LocationPicker/components/ResInfo/index.less +5 -0
  17. package/src/components/LocationPicker/components/ResInfo/index.tsx +3 -2
  18. package/src/components/LocationPicker/index.tsx +12 -1
package/lib/static/imgs/marker-icon_ab8bbcc8cb.svg ADDED
@@ -0,0 +1,4 @@
1
+ <svg t="1708497164654" class="icon" viewBox="0 0 1024 1024" version="1.1"
2
+ xmlns="http://www.w3.org/2000/svg" p-id="8489" width="200" height="200">
3
+ <path d="M512 1024c-205.76-241.472-326.272-411.712-361.664-510.72a384 384 0 1 1 723.072 0.832C837.76 612.928 717.312 782.848 512 1024.064z m0-512a128 128 0 1 0 0-256 128 128 0 0 0 0 256z" fill="#1677ff" p-id="8490"></path>
4
+ </svg>
package/lib/static/imgs/picker-icon_24d725ef02.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg t="1708305242338" class="icon" viewBox="0 0 1088 1024" version="1.1"
2
+ xmlns="http://www.w3.org/2000/svg" p-id="1494" width="200" height="200">
3
+ <path d="M812.224 416a288 288 0 1 0-576 0c0 118.144 94.528 272.128 288 456.576 193.472-184.448 288-338.432 288-456.576z m-288 544c-234.688-213.312-352-394.688-352-544a352 352 0 1 1 704 0c0 149.312-117.312 330.688-352 544z" fill="#1677ff" p-id="1495"></path>
4
+ <path d="M524.224 448a64 64 0 1 0 0-128 64 64 0 0 0 0 128z m0 64a128 128 0 1 1 0-256 128 128 0 0 1 0 256z m345.6 192l102.4 256h-288v-64h-320v64h-288l102.4-256h691.2z m-68.928 0H247.552l-76.8 192h706.944l-76.8-192z" fill="#1677ff" p-id="1496"></path>
5
+ </svg>
package/lib/static/imgs/position-icon_5bcb8a742e.svg ADDED
@@ -0,0 +1,6 @@
1
+ <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
2
+ <svg t="1708478996666" class="icon" viewBox="0 0 1024 1024" version="1.1"
3
+ xmlns="http://www.w3.org/2000/svg" p-id="6897"
4
+ xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
5
+ <path d="M895.044488 550.176484l-42.200124 0C834.62235 708.540282 709.048353 834.001715 550.718325 852.244194l0 42.258453c0 21.946848-17.790178 39.730886-39.729863 39.730886s-39.729863-17.784038-39.729863-39.730886l0-42.258453C312.926524 834.001715 187.354574 708.540282 169.131537 550.176484l-42.199101 0c-21.940708 0-39.730886-17.786085-39.730886-39.729863 0-21.940708 17.789155-39.726793 39.730886-39.726793l42.257429 0c18.24248-158.335145 143.711076-283.907095 302.068733-302.126039l0-42.200124c0-21.940708 17.789155-39.730886 39.729863-39.730886s39.729863 17.789155 39.729863 39.730886l0 42.258453c158.331052 18.241456 283.904025 143.706983 302.126039 302.06771l42.200124 0c21.940708 0 39.729863 17.786085 39.729863 39.726793C934.774351 532.390399 916.986219 550.176484 895.044488 550.176484zM696.395172 470.719828l76.16161 0c-17.251919-114.39847-107.492176-204.651007-221.838458-221.913159l0 76.236312c0 21.939685-17.790178 39.726793-39.729863 39.726793s-39.729863-17.787108-39.729863-39.726793l0-76.165704c-114.39233 17.256012-204.644867 107.495246-221.910089 221.842551l76.233242 0c21.946848 0 39.729863 17.786085 39.729863 39.726793 0 21.943778-17.781992 39.729863-39.729863 39.729863l-76.162634 0c17.251919 114.39847 107.498316 204.649983 221.839481 221.910089l0-76.234265c0-21.943778 17.789155-39.72577 39.729863-39.72577s39.729863 17.781992 39.729863 39.72577l0 76.234265c114.346281-17.260106 204.586538-107.511619 221.838458-221.910089l-76.16161 0c-21.941732 0-39.729863-17.786085-39.729863-39.729863C656.665309 488.505913 674.453441 470.719828 696.395172 470.719828zM510.988462 550.176484c-21.939685 0-39.729863-17.786085-39.729863-39.729863 0-21.940708 17.789155-39.726793 39.729863-39.726793s39.729863 17.786085 39.729863 39.726793C550.718325 532.390399 532.928147 550.176484 510.988462 550.176484z" fill="#000000" p-id="6898"></path>
6
+ </svg>
package/lib/static/imgs/reset-icon_9edad62306.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg t="1708485324277" class="icon" viewBox="0 0 1024 1024" version="1.1"
2
+ xmlns="http://www.w3.org/2000/svg" p-id="7503" width="200" height="200">
3
+ <path d="M512 682.666667c71.296 0 128-56.789333 128-128s-56.704-128-128-128-128 56.789333-128 128 56.704 128 128 128z" p-id="7504"></path>
4
+ <path d="M888.192 477.269333a381.44 381.44 0 0 0-57.813333-137.344 386.261333 386.261333 0 0 0-103.68-103.68 381.866667 381.866667 0 0 0-137.344-57.813333 385.194667 385.194667 0 0 0-78.421334-7.68V85.333333L341.333333 213.333333l169.6 128V256.085333c20.650667-0.085333 41.301333 1.877333 61.226667 5.973334a297.002667 297.002667 0 0 1 106.752 44.928 298.88 298.88 0 0 1 80.725333 80.725333A297.258667 297.258667 0 0 1 810.666667 554.666667a300.032 300.032 0 0 1-23.466667 116.266666 303.36 303.36 0 0 1-27.477333 50.688 307.2 307.2 0 0 1-36.608 44.330667 299.861333 299.861333 0 0 1-150.869334 81.365333 304.213333 304.213333 0 0 1-120.405333 0 297.002667 297.002667 0 0 1-106.794667-44.970666 298.752 298.752 0 0 1-80.64-80.64A298.496 298.496 0 0 1 213.333333 554.666667H128a384.853333 384.853333 0 0 0 65.664 214.784 388.096 388.096 0 0 0 103.594667 103.594666A381.866667 381.866667 0 0 0 512 938.666667a387.84 387.84 0 0 0 77.397333-7.808 384.597333 384.597333 0 0 0 137.301334-57.813334 379.136 379.136 0 0 0 56.789333-46.890666 393.728 393.728 0 0 0 46.933333-56.832A381.952 381.952 0 0 0 896 554.666667a387.84 387.84 0 0 0-7.808-77.397334z" p-id="7505"></path>
5
+ </svg>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hzab/form-render-mobile",
3
- "version": "0.2.4",
3
+ "version": "0.2.5",
4
4
  "description": "formily-form-render-mobile",
5
5
  "main": "lib",
6
6
  "scripts": {
package/src/components/LocationPicker/Map/AMap/common/utils.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import AMapLoader from "./loader";
2
+ import MarkerIcon from "../../../assets/marker-icon.svg";
2
3
 
3
4
  if (!window._AMapLoaderTemp) {
4
5
  window._AMapLoaderTemp = {};
@@ -94,7 +95,13 @@ export class MapUtils {
94
95
  _marker.setPosition(position);
95
96
  return _marker;
96
97
  }
98
+ const icon = new AMap.Icon({
99
+ size: new AMap.Size(34, 34), //图标尺寸
100
+ image: MarkerIcon, // Icon 的图像
101
+ imageSize: new AMap.Size(34, 34), // 根据所设置的大小拉伸或压缩图片
102
+ });
97
103
  const _m = new AMap.Marker({
104
+ icon,
98
105
  position,
99
106
  });
100
107
  this.markers[id] = _m;
package/src/components/LocationPicker/README.md CHANGED
@@ -14,15 +14,19 @@ export default function AMap(props) {
14
14
 
15
15
  ### InfoPanel Attributes
16
16
 
17
- | 参数 | 类型 | 必填 | 默认值 | 说明 |
18
- | ------------- | ------- | ---- | --------- | ----------------------------------------------------------- | --- |
19
- | hasSearch | boolean | 否 | true | 是否允许搜索 | |
20
- | isObjectRes | boolean | 否 | true | 是否把数据存放在对象中 | |
21
- | isAutoFixAddr | boolean | 否 | false | 打开地图时是否根据经纬度自动修正已填的地址 | |
22
- | changeMode | string | 否 | move | 改变经纬度等数据的触发模式；移动地图：move，点击地图：click | |
23
- | lonKey | string | 否 | longitude | 经度字段 key | |
24
- | latKey | string | 否 | latitude | 维度字段 key | |
25
- | addrKey | string | 否 | address | 地址字段 key | |
17
+ | 参数 | 类型 | 必填 | 默认值 | 说明 |
18
+ | ------------- | --------- | ---- | ---------------- | ----------------------------------------------------------- |
19
+ | mode | string | 否 | dialog | 地图显示的类型， dialog 弹窗显示、 show 直接显示 |
20
+ | layout | string | 否 | ver | 选择器和地图的布局 hor 水平、 ver 垂直 |
21
+ | hasSearch | boolean | 否 | true | 是否允许搜索 |
22
+ | isObjectRes | boolean | 否 | true | 是否把数据存放在对象中 |
23
+ | isAutoFixAddr | boolean | 否 | false | 打开地图时是否根据经纬度自动修正已填的地址 |
24
+ | changeMode | string | 否 | move | 改变经纬度等数据的触发模式；移动地图：move，点击地图：click |
25
+ | lonKey | string | 否 | longitude | 经度字段 key |
26
+ | latKey | string | 否 | latitude | 维度字段 key |
27
+ | addrKey | string | 否 | address | 地址字段 key |
28
+ | isAutoSearch | boolean | 否 | false | 搜索框是否自动搜索 |
29
+ | pickerIcon | ReactNode | 否 | <LocationFill /> | 地图选点弹窗开启按钮的 icon 元素 |
26
30
 
27
31
  - isObjectRes 是否把数据存放在对象中
28
32
 
package/src/components/LocationPicker/assets/marker-icon.svg ADDED
@@ -0,0 +1,4 @@
1
+ <svg t="1708497164654" class="icon" viewBox="0 0 1024 1024" version="1.1"
2
+ xmlns="http://www.w3.org/2000/svg" p-id="8489" width="200" height="200">
3
+ <path d="M512 1024c-205.76-241.472-326.272-411.712-361.664-510.72a384 384 0 1 1 723.072 0.832C837.76 612.928 717.312 782.848 512 1024.064z m0-512a128 128 0 1 0 0-256 128 128 0 0 0 0 256z" fill="#1677ff" p-id="8490"></path>
4
+ </svg>
package/src/components/LocationPicker/assets/picker-icon.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg t="1708305242338" class="icon" viewBox="0 0 1088 1024" version="1.1"
2
+ xmlns="http://www.w3.org/2000/svg" p-id="1494" width="200" height="200">
3
+ <path d="M812.224 416a288 288 0 1 0-576 0c0 118.144 94.528 272.128 288 456.576 193.472-184.448 288-338.432 288-456.576z m-288 544c-234.688-213.312-352-394.688-352-544a352 352 0 1 1 704 0c0 149.312-117.312 330.688-352 544z" fill="#1677ff" p-id="1495"></path>
4
+ <path d="M524.224 448a64 64 0 1 0 0-128 64 64 0 0 0 0 128z m0 64a128 128 0 1 1 0-256 128 128 0 0 1 0 256z m345.6 192l102.4 256h-288v-64h-320v64h-288l102.4-256h691.2z m-68.928 0H247.552l-76.8 192h706.944l-76.8-192z" fill="#1677ff" p-id="1496"></path>
5
+ </svg>
package/src/components/LocationPicker/assets/position-icon.svg ADDED
@@ -0,0 +1,6 @@
1
+ <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
2
+ <svg t="1708478996666" class="icon" viewBox="0 0 1024 1024" version="1.1"
3
+ xmlns="http://www.w3.org/2000/svg" p-id="6897"
4
+ xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
5
+ <path d="M895.044488 550.176484l-42.200124 0C834.62235 708.540282 709.048353 834.001715 550.718325 852.244194l0 42.258453c0 21.946848-17.790178 39.730886-39.729863 39.730886s-39.729863-17.784038-39.729863-39.730886l0-42.258453C312.926524 834.001715 187.354574 708.540282 169.131537 550.176484l-42.199101 0c-21.940708 0-39.730886-17.786085-39.730886-39.729863 0-21.940708 17.789155-39.726793 39.730886-39.726793l42.257429 0c18.24248-158.335145 143.711076-283.907095 302.068733-302.126039l0-42.200124c0-21.940708 17.789155-39.730886 39.729863-39.730886s39.729863 17.789155 39.729863 39.730886l0 42.258453c158.331052 18.241456 283.904025 143.706983 302.126039 302.06771l42.200124 0c21.940708 0 39.729863 17.786085 39.729863 39.726793C934.774351 532.390399 916.986219 550.176484 895.044488 550.176484zM696.395172 470.719828l76.16161 0c-17.251919-114.39847-107.492176-204.651007-221.838458-221.913159l0 76.236312c0 21.939685-17.790178 39.726793-39.729863 39.726793s-39.729863-17.787108-39.729863-39.726793l0-76.165704c-114.39233 17.256012-204.644867 107.495246-221.910089 221.842551l76.233242 0c21.946848 0 39.729863 17.786085 39.729863 39.726793 0 21.943778-17.781992 39.729863-39.729863 39.729863l-76.162634 0c17.251919 114.39847 107.498316 204.649983 221.839481 221.910089l0-76.234265c0-21.943778 17.789155-39.72577 39.729863-39.72577s39.729863 17.781992 39.729863 39.72577l0 76.234265c114.346281-17.260106 204.586538-107.511619 221.838458-221.910089l-76.16161 0c-21.941732 0-39.729863-17.786085-39.729863-39.729863C656.665309 488.505913 674.453441 470.719828 696.395172 470.719828zM510.988462 550.176484c-21.939685 0-39.729863-17.786085-39.729863-39.729863 0-21.940708 17.789155-39.726793 39.729863-39.726793s39.729863 17.786085 39.729863 39.726793C550.718325 532.390399 532.928147 550.176484 510.988462 550.176484z" fill="#000000" p-id="6898"></path>
6
+ </svg>
package/src/components/LocationPicker/assets/reset-icon.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg t="1708485324277" class="icon" viewBox="0 0 1024 1024" version="1.1"
2
+ xmlns="http://www.w3.org/2000/svg" p-id="7503" width="200" height="200">
3
+ <path d="M512 682.666667c71.296 0 128-56.789333 128-128s-56.704-128-128-128-128 56.789333-128 128 56.704 128 128 128z" p-id="7504"></path>
4
+ <path d="M888.192 477.269333a381.44 381.44 0 0 0-57.813333-137.344 386.261333 386.261333 0 0 0-103.68-103.68 381.866667 381.866667 0 0 0-137.344-57.813333 385.194667 385.194667 0 0 0-78.421334-7.68V85.333333L341.333333 213.333333l169.6 128V256.085333c20.650667-0.085333 41.301333 1.877333 61.226667 5.973334a297.002667 297.002667 0 0 1 106.752 44.928 298.88 298.88 0 0 1 80.725333 80.725333A297.258667 297.258667 0 0 1 810.666667 554.666667a300.032 300.032 0 0 1-23.466667 116.266666 303.36 303.36 0 0 1-27.477333 50.688 307.2 307.2 0 0 1-36.608 44.330667 299.861333 299.861333 0 0 1-150.869334 81.365333 304.213333 304.213333 0 0 1-120.405333 0 297.002667 297.002667 0 0 1-106.794667-44.970666 298.752 298.752 0 0 1-80.64-80.64A298.496 298.496 0 0 1 213.333333 554.666667H128a384.853333 384.853333 0 0 0 65.664 214.784 388.096 388.096 0 0 0 103.594667 103.594666A381.866667 381.866667 0 0 0 512 938.666667a387.84 387.84 0 0 0 77.397333-7.808 384.597333 384.597333 0 0 0 137.301334-57.813334 379.136 379.136 0 0 0 56.789333-46.890666 393.728 393.728 0 0 0 46.933333-56.832A381.952 381.952 0 0 0 896 554.666667a387.84 387.84 0 0 0-7.808-77.397334z" p-id="7505"></path>
5
+ </svg>
package/src/components/LocationPicker/components/ModalContent/index.less CHANGED
@@ -18,8 +18,25 @@
18
18
  top: 50%;
19
19
  left: 50%;
20
20
  transform: translate(-50%, -100%);
21
- font-size: 32px;
22
- color: #1890ff;
21
+ width: 32px;
22
+ color: #1677ff;
23
+ }
24
+
25
+ .set-map-actions {
26
+ position: absolute;
27
+ right: 4vw;
28
+ bottom: 8vh;
29
+ & > img {
30
+ display: block;
31
+ width: 6vw;
32
+ margin-bottom: 2vw;
33
+ padding: 1vw;
34
+ background-color: #fff;
35
+ border-radius: 2vw;
36
+ &:last-child {
37
+ margin-bottom: unset;
38
+ }
39
+ }
23
40
  }
24
41
  }
25
42
 
package/src/components/LocationPicker/components/ModalContent/index.tsx CHANGED
@@ -1,6 +1,5 @@
1
1
  import { useEffect, useMemo, useRef, useState } from "react";
2
2
  import { SpinLoading, Toast } from "antd-mobile";
3
- import { LocationFill } from "antd-mobile-icons";
4
3
  import { useField } from "@formily/react";
5
4
  import { debounce } from "lodash";
6
5
 
@@ -9,10 +8,15 @@ import AMapCom from "../../Map/AMap";
9
8
  import Notice from "../Notice";
10
9
  import MapSearch from "../MapSearch";
11
10
 
11
+ import { getCurrentPosition } from "../../../../common/location-utils";
12
12
  import { MapUtils } from "../../Map/AMap/common/utils";
13
13
  import { getAddress } from "../../servers";
14
14
  import { getPropsValue } from "../../common/utils";
15
15
 
16
+ import MarkerIcon from "../../assets/marker-icon.svg";
17
+ import PositionIcon from "../../assets/position-icon.svg";
18
+ import ResetIcon from "../../assets/reset-icon.svg";
19
+
16
20
  import "./index.less";
17
21
 
18
22
  export const ModalContent = (props) => {
@@ -51,6 +55,8 @@ export const ModalContent = (props) => {
51
55
  //
52
56
  visible,
53
57
  defaultLocation,
58
+ disabled,
59
+ readOnly,
54
60
  } = props;
55
61
 
56
62
  const field: any = useField();
@@ -102,26 +108,31 @@ export const ModalContent = (props) => {
102
108
  setMapCenter(_lon, _lat);
103
109
  setLoading(false);
104
110
 
105
- if (changeMode === "click") {
106
- mapUtilsRef.current?.setPickerMarker(_lon, _lat);
107
- // 点击选中点位的情况
108
- mapUtilsRef.current.on("click", function (ev) {
109
- const { lng: evLon, lat: evLat } = ev.lnglat || {};
110
- setPickPoint(evLon, evLat, { changeCenter: true });
111
- });
111
+ if (!(disabled || readOnly)) {
112
+ if (changeMode === "click") {
113
+ mapUtilsRef.current?.setPickerMarker(_lon, _lat);
114
+ // 点击选中点位的情况
115
+ mapUtilsRef.current.on("click", function (ev) {
116
+ const { lng: evLon, lat: evLat } = ev.lnglat || {};
117
+ setPickPoint(evLon, evLat, { changeCenter: true });
118
+ });
119
+ } else {
120
+ // 移动地图
121
+ mapUtilsRef.current.on(
122
+ "touchend",
123
+ debounce(function (ev) {
124
+ let currentCenter = mapUtilsRef.current?.getCenter();
125
+ const { lng: centerLon, lat: centerLat } = currentCenter || {};
126
+ // 移动选中点位的情况
127
+ let _lon = centerLon;
128
+ let _lat = centerLat;
129
+ setPickPoint(_lon, _lat);
130
+ }, 1000),
131
+ );
132
+ }
112
133
  } else {
113
- // 移动地图
114
- mapUtilsRef.current.on(
115
- "touchend",
116
- debounce(function (ev) {
117
- let currentCenter = mapUtilsRef.current?.getCenter();
118
- const { lng: centerLon, lat: centerLat } = currentCenter || {};
119
- // 移动选中点位的情况
120
- let _lon = centerLon;
121
- let _lat = centerLat;
122
- setPickPoint(_lon, _lat);
123
- }, 1000),
124
- );
134
+ // 禁用、只读情况使用 marker 展示点位
135
+ mapUtilsRef.current?.setPickerMarker(_lon, _lat);
125
136
  }
126
137
  }
127
138
 
@@ -130,7 +141,7 @@ export const ModalContent = (props) => {
130
141
  * @param lon
131
142
  * @param lat
132
143
  */
133
- function setMapCenter(lon, lat) {
144
+ function setMapCenter(lon = pickInfo.lon, lat = pickInfo.lat) {
134
145
  mapUtilsRef.current?.setCenter(lon, lat);
135
146
  }
136
147
 
@@ -138,7 +149,8 @@ export const ModalContent = (props) => {
138
149
  const { isAutoFixAddr: _isAutoFixAddr = isAutoFixAddr || true, changeCenter } = opt || {};
139
150
  const lon = _lon || pickInfo.lon;
140
151
  const lat = _lat || pickInfo.lat;
141
- if (changeMode === "click") {
152
+ // 禁用、只读情况使用 marker 展示点位
153
+ if (changeMode === "click" || disabled || readOnly) {
142
154
  mapUtilsRef.current?.setPickerMarker(_lon, _lat);
143
155
  }
144
156
  if (changeCenter) {
@@ -172,6 +184,31 @@ export const ModalContent = (props) => {
172
184
  });
173
185
  }
174
186
 
187
+ function resetCenter() {
188
+ setMapCenter();
189
+ }
190
+
191
+ function getPosition() {
192
+ setLoading(true);
193
+ // 获取当前经纬度
194
+ getCurrentPosition()
195
+ .then((res) => {
196
+ const { coords = {} } = res;
197
+ setPickPoint(coords.longitude, coords.latitude, { changeCenter: true });
198
+ setLoading(false);
199
+ })
200
+ .catch((e) => {
201
+ setLoading(false);
202
+ Toast.show({ icon: "fail", content: "定位获取失败" });
203
+ console.warn("Error getCurrentPosition e: ", e);
204
+ });
205
+ }
206
+
207
+ // 展示已选点位恢复居中按钮:changeMode !== 'move' 或 禁用、只读模式。用于详情等只读情况恢复点位居中
208
+ const showResetCenter = changeMode !== "move" || disabled || readOnly;
209
+ // 展示获取当前定位按钮 props.showGetPositionBtn !== false 且非禁用、只读模式
210
+ const showGetPositionBtn = props.showGetPositionBtn !== false && !(disabled || readOnly);
211
+
175
212
  return (
176
213
  <div className={`location-picker-modal-content location-modal-content-layout-${layout}`}>
177
214
  {/* 点击/移动 地图选中的数据 */}
@@ -181,13 +218,23 @@ export const ModalContent = (props) => {
181
218
  setPoint={setPickPoint}
182
219
  addrLoading={addrLoading}
183
220
  defaultLocation={defaultLocation}
221
+ disabled={disabled}
222
+ readOnly={readOnly}
184
223
  />
185
224
 
186
225
  <div className="location-picker-map">
187
226
  {/* 关闭弹窗之后清除搜索内容 */}
188
227
  {hasSearch && visible ? <MapSearch setPoint={setPickPoint} isAutoSearch={isAutoSearch} /> : null}
189
228
  <AMapCom init={mapInit} loading={loading} style={{ height: "66vh" }} />
190
- {!loading && changeMode !== "click" && <LocationFill className="location-picker-center-icon" />}
229
+ <div className="set-map-actions">
230
+ {/* 已选的点位居中 */}
231
+ {showResetCenter ? <img className="reset-icon" src={ResetIcon} onClick={resetCenter} /> : null}
232
+ {/* 获取当前经纬度 */}
233
+ {showGetPositionBtn ? <img className="center-icon" src={PositionIcon} onClick={getPosition} /> : null}
234
+ </div>
235
+ {changeMode !== "click" && !(disabled || readOnly) && (
236
+ <img className="location-picker-center-icon" src={MarkerIcon} />
237
+ )}
191
238
  <Notice changeMode={changeMode} />
192
239
  </div>
193
240
  {loading && (
package/src/components/LocationPicker/components/PickerInfo/index.tsx CHANGED
@@ -3,7 +3,7 @@ import { Input, DotLoading } from "antd-mobile";
3
3
  import "./index.less";
4
4
 
5
5
  export const PickerInfo = (props) => {
6
- const { pickInfo, setPickInfo, setPoint, addrLoading, defaultLocation } = props;
6
+ const { pickInfo, setPickInfo, setPoint, addrLoading, defaultLocation, disabled, readOnly } = props;
7
7
 
8
8
  function onPILonChange(e) {
9
9
  const val = e?.target?.value ?? e;
@@ -43,29 +43,37 @@ export const PickerInfo = (props) => {
43
43
  <div className="location-picker-info">
44
44
  <div className="picker-info-lon">
45
45
  <div className="picker-info-label">经度：</div>
46
- <Input
47
- className="picker-info-input"
48
- disabled={addrLoading}
49
- max={180}
50
- min={-180}
51
- value={pickInfo.lon}
52
- onChange={onPILonChange}
53
- onBlur={onPILonBlur}
54
- onEnterPress={onPILonBlur}
55
- />
46
+ {readOnly ? (
47
+ pickInfo.lon
48
+ ) : (
49
+ <Input
50
+ className="picker-info-input"
51
+ disabled={disabled || addrLoading}
52
+ max={180}
53
+ min={-180}
54
+ value={pickInfo.lon}
55
+ onChange={onPILonChange}
56
+ onBlur={onPILonBlur}
57
+ onEnterPress={onPILonBlur}
58
+ />
59
+ )}
56
60
  </div>
57
61
  <div className="picker-info-lat">
58
62
  <div className="picker-info-label">纬度：</div>
59
- <Input
60
- className="picker-info-input"
61
- disabled={addrLoading}
62
- max={90}
63
- min={-90}
64
- value={pickInfo.lat}
65
- onChange={onPILatChange}
66
- onBlur={onPILatBlur}
67
- onEnterPress={onPILatBlur}
68
- />
63
+ {readOnly ? (
64
+ pickInfo.lat
65
+ ) : (
66
+ <Input
67
+ className="picker-info-input"
68
+ disabled={disabled || addrLoading}
69
+ max={90}
70
+ min={-90}
71
+ value={pickInfo.lat}
72
+ onChange={onPILatChange}
73
+ onBlur={onPILatBlur}
74
+ onEnterPress={onPILatBlur}
75
+ />
76
+ )}
69
77
  </div>
70
78
  <div className="picker-info-addr">
71
79
  <div className="picker-info-label">地址：</div>
package/src/components/LocationPicker/components/ResInfo/index.less CHANGED
@@ -9,5 +9,10 @@
9
9
  .location-btn {
10
10
  padding: 4px 0;
11
11
  padding-left: 5px;
12
+ line-height: 1;
13
+ .picker-icon {
14
+ width: 4.2vw;
15
+ vertical-align: middle;
16
+ }
12
17
  }
13
18
  }
package/src/components/LocationPicker/components/ResInfo/index.tsx CHANGED
@@ -3,6 +3,7 @@ import { Button } from "antd-mobile";
3
3
  import { LocationFill } from "antd-mobile-icons";
4
4
  import { useField } from "@formily/react";
5
5
 
6
+ import pickerIconDefault from "../../assets/picker-icon.svg";
6
7
  import { getPropsValue } from "../../common/utils";
7
8
 
8
9
  import "./index.less";
@@ -13,7 +14,7 @@ import "./index.less";
13
14
  * @returns
14
15
  */
15
16
  export const ResInfo = (props) => {
16
- const { onShow, isObjectRes, lonKey, latKey, addrKey, value, pickerText = "选点" } = props || {};
17
+ const { onShow, isObjectRes, lonKey, latKey, addrKey, value, pickerText = "选点", pickerIcon } = props || {};
17
18
  const field: any = useField();
18
19
 
19
20
  // 数据格式转为内部格式，方便存取
@@ -36,7 +37,7 @@ export const ResInfo = (props) => {
36
37
  <div>纬度：{formatVal.lat}</div>
37
38
  </div>
38
39
  <Button className="location-btn" color="primary" fill="none" onClick={onShow}>
39
- <LocationFill />
40
+ {pickerIcon ? pickerIcon : <img className="picker-icon" src={pickerIconDefault} />}
40
41
  {pickerText}
41
42
  </Button>
42
43
  </div>
package/src/components/LocationPicker/index.tsx CHANGED
@@ -42,8 +42,14 @@ export function LocationPicker(props) {
42
42
  * 垂直 ver
43
43
  */
44
44
  layout = "ver",
45
- // 是否允许搜索
45
+ /**
46
+ * 是否允许搜索
47
+ */
46
48
  hasSearch = true,
49
+ /**
50
+ * 展示获取经纬度的按钮
51
+ */
52
+ showGetPositionBtn = true,
47
53
  /**
48
54
  *
49
55
  isObjectRes
@@ -124,6 +130,8 @@ export function LocationPicker(props) {
124
130
  }
125
131
 
126
132
  const _props = {
133
+ disabled: props.disabled,
134
+ readOnly: props.readOnly,
127
135
  /**
128
136
  * 地图显示类型：
129
137
  * 弹窗 dialog
@@ -162,6 +170,9 @@ export function LocationPicker(props) {
162
170
  // 搜索框是否自动搜索
163
171
  isAutoSearch: isAutoSearch ?? true,
164
172
  defaultLocation,
173
+ // 地图选点按钮的 icon 元素
174
+ pickerIcon: props.pickerIcon,
175
+ showGetPositionBtn,
165
176
  };
166
177
 
167
178
  return (