@hzab/form-render 1.3.3 → 1.4.0-beta

package/src/components/LocationPicker/index.tsx

@@ -20,6 +20,7 @@ export const LocationPicker = observer(function (props: any) {
      * 直接显示 show
      */
     mode = "dialog",
+    element = "Polypoint",
     /**
      * 选择器和地图的布局
      * 水平 hor
@@ -35,6 +36,7 @@ export const LocationPicker = observer(function (props: any) {
     lonKey = "longitude",
     latKey = "latitude",
     addrKey = "address",
+    pointsKey = "points",
     value,
     // 搜索框是否自动搜索
     isAutoSearch = true,
@@ -45,21 +47,25 @@ export const LocationPicker = observer(function (props: any) {
 
   const [loading, setLoading] = useState(false);
   const [defaultLocation, setDefaultLocation] = useState({
-    lon: 120.168893,
-    lat: 30.225404,
-    addr: "浙江省杭州市上城区南星街道杭州西湖风景名胜区",
+    lon: "",
+    lat: "",
+    addr: "",
+    points: [],
   });
   const [visible, setVisible] = useState(mode === "show");
   // 解决 弹窗关闭之后 visible 无法传入 ModalContent 的问题
   const [visibleKey, setVisibleKey] = useState(0);
   const pickInfoRef = useRef(defaultLocation);
+  const modalContentRef = useRef();
 
   useEffect(() => {
     const propsVal = getPropsValue(value, {
       lonKey,
       latKey,
       addrKey,
+      pointsKey,
     });
+    setPickInfo(propsVal)
     if (!propsVal.lon || !propsVal.lat) {
       setLoading(true);
       // 如果没有传入的经纬度，获取当前实际的经纬度数据
@@ -76,6 +82,7 @@ export const LocationPicker = observer(function (props: any) {
             lon,
             lat,
             addr,
+            points: [],
           };
           setDefaultLocation(pickInfoRef.current);
           setLoading(false);
@@ -105,11 +112,17 @@ export const LocationPicker = observer(function (props: any) {
       [lonKey]: info.lon,
       [latKey]: info.lat,
       [addrKey]: info.addr,
+      [pointsKey]: info.points,
     };
     props.onChange && props.onChange(_res);
   }
 
-  function onOk() {
+  async function onOk() {
+    // 多边形时确定直接保存修改，无需双击结束
+    if (element !== "Polypoint") {
+      // @ts-ignore
+      await modalContentRef.current?.editDone();
+    }
     onChange();
     onClose();
   }
@@ -132,6 +145,7 @@ export const LocationPicker = observer(function (props: any) {
      * 直接显示 show
      */
     mode: mode ?? "dialog",
+    element: element ?? "Polypoint",
     layout: layout ?? "ver",
     // 是否允许搜索
     hasSearch: hasSearch ?? true,
@@ -142,6 +156,7 @@ export const LocationPicker = observer(function (props: any) {
     lonKey: lonKey ?? "longitude",
     latKey: latKey ?? "latitude",
     addrKey: addrKey ?? "address",
+    pointsKey: pointsKey ?? "points",
     // 搜索框是否自动搜索
     isAutoSearch: isAutoSearch ?? true,
     visible,
@@ -151,11 +166,14 @@ export const LocationPicker = observer(function (props: any) {
     setLoading,
   };
 
+  function onDialogInit(params) {
+    modalContentRef.current = params;
+  }
+
   return (
     <div className="location-picker">
-      {mode === "show" ? (
-        <ModalContent {..._props} setPickInfo={setResInfo} />
-      ) : (
+      {mode === "show" && <ModalContent {..._props} setPickInfo={setResInfo} init={onDialogInit} />}
+      {mode === "dialog" && (
         <>
           {/* 弹窗 */}
           {/* 有弹窗时，显示表单选中的结果 */}
@@ -166,10 +184,9 @@ export const LocationPicker = observer(function (props: any) {
             onCancel={onClose}
             onOk={onOk}
             visible={visible}
-            confirmLoading={loading}
             width={modalConf?.width || isHor ? "1024px" : "720px"}
           >
-            <ModalContent {..._props} setPickInfo={setPickInfo} />
+            <ModalContent {..._props} setPickInfo={setPickInfo} init={onDialogInit} />
           </Modal>
         </>
       )}