@hzab/form-render 1.6.17 → 1.6.19

package/src/components/LocationPicker/index.tsx

@@ -1,197 +1,197 @@
-import { useEffect, useRef, useState } from "react";
-import { Modal } from "antd";
-import { observer } from "@formily/react";
-
-import ResInfo from "./components/ResInfo";
-import ModalContent from "./components/ModalContent";
-
-import { getCurrentPosition } from "../../common/location-utils";
-
-import { getPropsValue } from "./common/utils";
-import { getAddress } from "./servers";
-
-import "./index.less";
-
-export const LocationPicker = observer(function (props: any) {
-  const {
-    /**
-     * 地图显示类型：
-     * 弹窗 dialog
-     * 直接显示 show
-     */
-    mode = "dialog",
-    element = "Polypoint",
-    /**
-     * 选择器和地图的布局
-     * 水平 hor
-     * 垂直 ver
-     */
-    layout = "ver",
-    // 是否允许搜索
-    hasSearch = true,
-    /**
-     * 打开地图时是否根据经纬度自动修正已填的地址
-     */
-    isAutoFixAddr = false,
-    lonKey = "longitude",
-    latKey = "latitude",
-    addrKey = "address",
-    pointsKey = "points",
-    value,
-    // 搜索框是否自动搜索
-    isAutoSearch = true,
-    modalConf = {},
-    icons = {},
-    getCurPositionConf,
-  } = props;
-
-  const [loading, setLoading] = useState(false);
-  const [defaultLocation, setDefaultLocation] = useState({
-    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);
-      // 如果没有传入的经纬度，获取当前实际的经纬度数据
-      // 获取当前经纬度
-      getCurrentPosition(getCurPositionConf)
-        .then(async (res) => {
-          const { coords = {} } = res;
-          const lon = coords.longitude;
-          const lat = coords.latitude;
-          const addr: string = await getAddress(lon, lat).then((addr) => {
-            return addr;
-          });
-          pickInfoRef.current = {
-            lon,
-            lat,
-            addr,
-            points: [],
-          };
-          setDefaultLocation(pickInfoRef.current);
-          setLoading(false);
-        })
-        .catch((e) => {
-          console.warn("Error LocationPicker getCurrentPosition e: ", e);
-          setLoading(false);
-        });
-    } else {
-      setLoading(false);
-    }
-  }, []);
-
-  function onShow() {
-    setVisible(true);
-    setVisibleKey(Date.now());
-  }
-
-  function onClose() {
-    setVisible(false);
-    setVisibleKey(Date.now());
-  }
-
-  function onChange(res = pickInfoRef.current) {
-    const info = res || pickInfoRef.current;
-    const _res = {
-      [lonKey]: info.lon,
-      [latKey]: info.lat,
-      [addrKey]: info.addr,
-      [pointsKey]: info.points,
-    };
-    props.onChange && props.onChange(_res);
-  }
-
-  async function onOk() {
-    // 多边形时确定直接保存修改，无需双击结束
-    if (element !== "Polypoint") {
-      // @ts-ignore
-      await modalContentRef.current?.editDone();
-    }
-    onChange();
-    onClose();
-  }
-
-  function setResInfo(res) {
-    setPickInfo(res);
-    onChange(res);
-  }
-
-  function setPickInfo(res) {
-    pickInfoRef.current = res;
-  }
-
-  const isHor = layout === "hor" || layout === "hor-reverse";
-  const _props = {
-    ...props,
-    /**
-     * 地图显示类型：
-     * 弹窗 dialog
-     * 直接显示 show
-     */
-    mode: mode ?? "dialog",
-    element: element ?? "Polypoint",
-    layout: layout ?? "ver",
-    // 是否允许搜索
-    hasSearch: hasSearch ?? true,
-    /**
-     * 打开地图时是否根据经纬度自动修正已填的地址
-     */
-    isAutoFixAddr: isAutoFixAddr ?? false,
-    lonKey: lonKey ?? "longitude",
-    latKey: latKey ?? "latitude",
-    addrKey: addrKey ?? "address",
-    pointsKey: pointsKey ?? "points",
-    // 搜索框是否自动搜索
-    isAutoSearch: isAutoSearch ?? true,
-    visible,
-    visibleKey,
-    defaultLocation,
-    loading,
-    setLoading,
-  };
-
-  function onDialogInit(params) {
-    modalContentRef.current = params;
-  }
-
-  return (
-    <div className="location-picker">
-      {mode === "show" && <ModalContent {..._props} setPickInfo={setResInfo} init={onDialogInit} />}
-      {mode === "dialog" && (
-        <>
-          {/* 弹窗 */}
-          {/* 有弹窗时，显示表单选中的结果 */}
-          <ResInfo {..._props} onShow={onShow} pickerIcon={icons.pickerIcon} />
-          <Modal
-            className="location-picker-modal"
-            title="地图选点"
-            onCancel={onClose}
-            onOk={onOk}
-            visible={visible}
-            width={modalConf?.width || isHor ? "1024px" : "720px"}
-          >
-            <ModalContent {..._props} setPickInfo={setPickInfo} init={onDialogInit} />
-          </Modal>
-        </>
-      )}
-    </div>
-  );
-});
-
-export default LocationPicker;
+import { useEffect, useRef, useState } from "react";
+import { Modal } from "antd";
+import { observer } from "@formily/react";
+
+import ResInfo from "./components/ResInfo";
+import ModalContent from "./components/ModalContent";
+
+import { getCurrentPosition } from "../../common/location-utils";
+
+import { getPropsValue } from "./common/utils";
+import { getAddress } from "./servers";
+
+import "./index.less";
+
+export const LocationPicker = observer(function (props: any) {
+  const {
+    /**
+     * 地图显示类型：
+     * 弹窗 dialog
+     * 直接显示 show
+     */
+    mode = "dialog",
+    element = "Polypoint",
+    /**
+     * 选择器和地图的布局
+     * 水平 hor
+     * 垂直 ver
+     */
+    layout = "ver",
+    // 是否允许搜索
+    hasSearch = true,
+    /**
+     * 打开地图时是否根据经纬度自动修正已填的地址
+     */
+    isAutoFixAddr = false,
+    lonKey = "longitude",
+    latKey = "latitude",
+    addrKey = "address",
+    pointsKey = "points",
+    value,
+    // 搜索框是否自动搜索
+    isAutoSearch = true,
+    modalConf = {},
+    icons = {},
+    getCurPositionConf,
+  } = props;
+
+  const [loading, setLoading] = useState(false);
+  const [defaultLocation, setDefaultLocation] = useState({
+    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);
+      // 如果没有传入的经纬度，获取当前实际的经纬度数据
+      // 获取当前经纬度
+      getCurrentPosition(getCurPositionConf)
+        .then(async (res) => {
+          const { coords = {} } = res;
+          const lon = coords.longitude;
+          const lat = coords.latitude;
+          const addr: string = await getAddress(lon, lat).then((addr) => {
+            return addr;
+          });
+          pickInfoRef.current = {
+            lon,
+            lat,
+            addr,
+            points: [],
+          };
+          setDefaultLocation(pickInfoRef.current);
+          setLoading(false);
+        })
+        .catch((e) => {
+          console.warn("Error LocationPicker getCurrentPosition e: ", e);
+          setLoading(false);
+        });
+    } else {
+      setLoading(false);
+    }
+  }, []);
+
+  function onShow() {
+    setVisible(true);
+    setVisibleKey(Date.now());
+  }
+
+  function onClose() {
+    setVisible(false);
+    setVisibleKey(Date.now());
+  }
+
+  function onChange(res = pickInfoRef.current) {
+    const info = res || pickInfoRef.current;
+    const _res = {
+      [lonKey]: info.lon,
+      [latKey]: info.lat,
+      [addrKey]: info.addr,
+      [pointsKey]: info.points,
+    };
+    props.onChange && props.onChange(_res);
+  }
+
+  async function onOk() {
+    // 多边形时确定直接保存修改，无需双击结束
+    if (element !== "Polypoint") {
+      // @ts-ignore
+      await modalContentRef.current?.editDone();
+    }
+    onChange();
+    onClose();
+  }
+
+  function setResInfo(res) {
+    setPickInfo(res);
+    onChange(res);
+  }
+
+  function setPickInfo(res) {
+    pickInfoRef.current = res;
+  }
+
+  const isHor = layout === "hor" || layout === "hor-reverse";
+  const _props = {
+    ...props,
+    /**
+     * 地图显示类型：
+     * 弹窗 dialog
+     * 直接显示 show
+     */
+    mode: mode ?? "dialog",
+    element: element ?? "Polypoint",
+    layout: layout ?? "ver",
+    // 是否允许搜索
+    hasSearch: hasSearch ?? true,
+    /**
+     * 打开地图时是否根据经纬度自动修正已填的地址
+     */
+    isAutoFixAddr: isAutoFixAddr ?? false,
+    lonKey: lonKey ?? "longitude",
+    latKey: latKey ?? "latitude",
+    addrKey: addrKey ?? "address",
+    pointsKey: pointsKey ?? "points",
+    // 搜索框是否自动搜索
+    isAutoSearch: isAutoSearch ?? true,
+    visible,
+    visibleKey,
+    defaultLocation,
+    loading,
+    setLoading,
+  };
+
+  function onDialogInit(params) {
+    modalContentRef.current = params;
+  }
+
+  return (
+    <div className="location-picker">
+      {mode === "show" && <ModalContent {..._props} setPickInfo={setResInfo} init={onDialogInit} />}
+      {mode === "dialog" && (
+        <>
+          {/* 弹窗 */}
+          {/* 有弹窗时，显示表单选中的结果 */}
+          <ResInfo {..._props} onShow={onShow} pickerIcon={icons.pickerIcon} />
+          <Modal
+            className="location-picker-modal"
+            title="地图选点"
+            onCancel={onClose}
+            onOk={onOk}
+            visible={visible}
+            width={modalConf?.width || isHor ? "1024px" : "720px"}
+          >
+            <ModalContent {..._props} setPickInfo={setPickInfo} init={onDialogInit} />
+          </Modal>
+        </>
+      )}
+    </div>
+  );
+});
+
+export default LocationPicker;

package/src/components/PersonnelSelect/index.less

@@ -1,21 +1,21 @@
-.abt-user-item {
-  display: flex;
-  align-items: center;
-  padding: 0 16px;
-
-
-
-  .abt-user-item-info {
-    list-style: none;
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    padding-left: 16px;
-
-    .abt-user-item-info__item {
-      & > span:last-of-type {
-        color: #666;
-      }
-    }
-  }
-}
+.abt-user-item {
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+
+
+
+  .abt-user-item-info {
+    list-style: none;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    padding-left: 16px;
+
+    .abt-user-item-info__item {
+      & > span:last-of-type {
+        color: #666;
+      }
+    }
+  }
+}

package/src/components/PersonnelSelect/index.module.less

@@ -1,33 +1,33 @@
-.user-select {
-
-  &-option {
-    :global {
-      .ant-select-item-option-content {
-        display: flex;
-      }
-    }
-
-
-    &__avatar {
-      margin-right: 10px;
-    }
-
-    .user-item {
-      display: flex;
-      flex-direction: column;
-
-      &-name {
-        margin-bottom: 4px;
-        color: #000000d9;
-        font-size: 14px;
-        display: flex;
-        align-items: center;
-      }
-
-      &__idCard {
-        color: #00000073;
-        font-size: 14px;
-      }
-    }
-  }
-}
+.user-select {
+
+  &-option {
+    :global {
+      .ant-select-item-option-content {
+        display: flex;
+      }
+    }
+
+
+    &__avatar {
+      margin-right: 10px;
+    }
+
+    .user-item {
+      display: flex;
+      flex-direction: column;
+
+      &-name {
+        margin-bottom: 4px;
+        color: #000000d9;
+        font-size: 14px;
+        display: flex;
+        align-items: center;
+      }
+
+      &__idCard {
+        color: #00000073;
+        font-size: 14px;
+      }
+    }
+  }
+}