@hzab/form-render 1.6.11 → 1.6.13

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+# @hzab/form-render@1.6.13
+
+feat:locationListPicker在已有元素范围内可新增地址标记
+
+# @hzab/form-render@1.6.12
+
+feat: PersonnelSelect组件优化传值方式，支持复数据传入、返回
+
 # @hzab/form-render@1.6.11
 
 feat: editor添加配置merage

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@hzab/form-render",
-  "version": "1.6.11",
+  "version": "1.6.13",
   "description": "",
   "main": "src",
   "scripts": {
     "dev": "webpack serve -c ./config/webpack.config.js --env local",
     "build": "webpack -c ./config/webpack.config.js --env production",
+    "publish-beta": "npm publish --beta",
     "publish-patch": "npm version patch && npm publish --access public",
     "publish-minor": "npm version minor && npm publish --access public",
     "publish-major": "npm version major && npm publish --access public"

package/src/components/LocationListPicker/index.tsx

@@ -89,7 +89,7 @@ export const LocationListPicker = observer((props) => {
           data: item,
           onClick: onMarkerClick,
         });
-        mapUtilsRef.current.setCircle(item.longitude, item.latitude, item.range, { ...item });
+        mapUtilsRef.current.setCircle(item.longitude, item.latitude, item.range, { ...item, onClick: handleMarker });
       }
     });
     mapUtilsRef.current.setFitView();
@@ -199,8 +199,14 @@ export const LocationListPicker = observer((props) => {
     clearStatus();
   }
 
+
+  // 地图单击除现有元素范围外添加点位地址
+  function onMapClick(e) {
+    mapUtilsRef.current.isContains(e, handleMarker);
+  }
+
   // 处理 marker、范围 绘制填写逻辑
-  async function onMapClick(e) {
+  async function handleMarker(e) {
     if (drawType.current !== "marker") {
       return;
     }
@@ -297,18 +303,20 @@ export const LocationListPicker = observer((props) => {
   }
 
   function onPolygonClick(e) {
-    if (!isEditingRef.current) {
+    if (!isEditingRef.current && statusRef.current !== "add") {
       drawType.current = "polygon";
       const id = e.target.id;
       clearEdit(id);
       setActiveId(id);
       setActivePolygon(e.target);
+    } else if (statusRef.current === "add") {
+      handleMarker(e);
     }
   }
 
   function onMarkerClick(e, ...args) {
     clearActive();
-    if (!isEditingRef.current) {
+    if (!isEditingRef.current && statusRef.current !== "add") {
       setShowTip(false);
       isEditingRef.current = false;
       const { id } = e.target.getExtData() || {};
@@ -412,7 +420,7 @@ export const LocationListPicker = observer((props) => {
     } else {
       setTipText("点击选择地址");
       setActiveMarkerIcon(item.id);
-      onMapClick({
+      handleMarker({
         lnglat: {
           lng: item.longitude,
           lat: item.latitude,
@@ -458,7 +466,7 @@ export const LocationListPicker = observer((props) => {
   function setPoint(lng, lat) {
     mapUtilsRef.current.setCenter(lng, lat, { immediately: true });
     statusRef.current = "add";
-    onMapClick({
+    handleMarker({
       lnglat: {
         lng,
         lat,

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

@@ -59,7 +59,7 @@ export class MapUtils {
     PolygonEditor: undefined,
     PolylineEditor: undefined,
   };
-  public polygonEnum;
+  public polygonEnum = {};
   public polygonConf;
   public mapDomRef;
 
@@ -332,7 +332,7 @@ export class MapUtils {
   }
 
   setCircle(lon, lat, radius, opt?) {
-    const { id = nanoid(), circle, map = this.map, AMap = this.AMap, circleConf = {} } = opt || {};
+    const { id = nanoid(), circle, map = this.map, AMap = this.AMap, onClick, circleConf = {} } = opt || {};
     if (!(AMap && map)) {
       throw new Error("请传入地图实例和 AMap");
     }
@@ -362,9 +362,10 @@ export class MapUtils {
       strokeWeight: 1, // 轮廓线宽度
       fillOpacity: 0.1, // 圆形填充透明度
       fillColor: "#0080FF", // 圆形填充颜色
-      zIndex: 50, // 圆形的叠加顺序
+      zIndex: 100, // 圆形的叠加顺序
       ...circleConf,
     });
+    _c.on("click", onClick);
     this.circles[id] = _c;
     map?.add(_c);
     return _c;
@@ -375,6 +376,22 @@ export class MapUtils {
     delete this.circles[id];
   }
 
+
+  // 判断当前点击点位是否在地图现有元素范围内，并回调函数返回值
+  isContains(e, callBack) {
+    const element = {
+      ...this.circles,
+      ...this.polygonEnum,
+    };
+    const { lng, lat } = e.lnglat || {};
+    const point = new this.AMap.LngLat(lng, lat);
+    const isRange = Object.keys(element).some((key) => element[key].contains(point));
+    if (!isRange) {
+      callBack && callBack(e);
+    }
+    return isRange;
+  }
+
   /**
    * 创建或修改地图选点的 Marker
    * 在当前 utils 中唯一

package/src/components/PersonnelSelect/index.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useState, useRef, useCallback, useMemo } from "react";
 import { Select, List, Avatar, Spin } from "antd";
 import { connect, mapProps } from "@formily/react";
-import { debounce, isObject } from "lodash";
-import type { LableValue, Person, ScrollPagination, RemoteSelectProps } from "./type";
+import { debounce, isObject, isPlainObject } from "lodash";
+import type { LabelValue, ScrollPagination, RemoteSelectProps } from "./type";
 
 import "./index.less";
 
@@ -14,7 +14,7 @@ const defaultListItemConfigs = [
   { label: "身份证号：", key: "idnumber" },
 ];
 
-const transfromLabelInValueData = (list: Person[], labelKey: string, valueKey: string): Person[] => {
+const transfromLabelInValueData = (list: LabelValue[], labelKey: string, valueKey: string): LabelValue[] => {
   try {
     return list.map((item) => ({ ...item, label: item?.[labelKey], value: item?.[valueKey] }));
   } catch (e) {
@@ -24,7 +24,8 @@ const transfromLabelInValueData = (list: Person[], labelKey: string, valueKey: s
 };
 
 const RemoteSelect: React.FC<RemoteSelectProps> = ({
-  loadOptions,
+  loadData,
+  searchData,
   renderItem,
   listItemConfigs,
   labelKey = "userName",
@@ -34,12 +35,15 @@ const RemoteSelect: React.FC<RemoteSelectProps> = ({
   avataProps = {},
   disabledStyle,
   customItemNode,
+  labelInValue = false,
+  isClearable = false,
   ...selectProps
 }) => {
   const [search, setSearch] = useState("");
   const [loading, setLoading] = useState(false);
   const [loadingMore, setLoadingMore] = useState(false);
-  const [list, setList] = useState<Person[]>([]);
+  const [list, setList] = useState<LabelValue[]>([]);
+  const [cacheDeafultList, setCacheDeafultList] = useState<LabelValue[]>([]);
   const [pagination, setPagination] = useState<ScrollPagination>({
     pageNum: 1,
     pageSize: 10,
@@ -47,12 +51,13 @@ const RemoteSelect: React.FC<RemoteSelectProps> = ({
   });
   const selectInstance = useRef<any>(null);
   const total = useRef(0);
+  const initSearch = useRef(true);
 
   const debounceLoadData = debounce(async (isScrollLoad = false) => {
     try {
       isScrollLoad ? setLoadingMore(true) : setLoading(true);
 
-      const result = await loadOptions(search, {
+      const result = await loadData(search, {
         ...pagination,
         pageNum: isScrollLoad ? pagination.pageNum + 1 : 1,
       });
@@ -60,7 +65,7 @@ const RemoteSelect: React.FC<RemoteSelectProps> = ({
 
       total.current = resPagination.total;
 
-      const transformatList: Person[] = transfromLabelInValueData(list, labelKey, valueKey);
+      const transformatList: LabelValue[] = transfromLabelInValueData(list, labelKey, valueKey);
 
       setList((prev) => (isScrollLoad ? [...prev, ...transformatList] : transformatList));
     } finally {
@@ -73,15 +78,15 @@ const RemoteSelect: React.FC<RemoteSelectProps> = ({
     const isNearBottom = scrollHeight - scrollTop - clientHeight < 30;
 
     if (isNearBottom && !loadingMore && list.length <= total.current) {
-      await loadData(true);
+      await getData(true);
       setPagination((pre) => ({ ...pre, pageNum: pagination.pageNum + 1 }));
     }
   };
 
-  const loadData = useCallback(debounceLoadData, [search, pagination, loadOptions]);
+  const getData = useCallback(debounceLoadData, [search, pagination, loadData]);
 
   // 处理滚动加载
-  const handleScroll = useCallback(debounceHandleScroll, [loadingMore, loadData]);
+  const handleScroll = useCallback(debounceHandleScroll, [search, loadingMore, loadData]);
 
   // 重置list滚动条
   const resetListScroll = () => {
@@ -96,36 +101,61 @@ const RemoteSelect: React.FC<RemoteSelectProps> = ({
     setPagination((prev) => ({ ...prev, pageNum: 1 }));
   }, 1000);
 
-  useEffect(() => {
-    loadData();
-  }, [search]);
+  const handleOnDropdownVisibleChange = (open: boolean) => {
+    if (!isClearable) return;
+    if (open) {
+      getData();
+    } else {
+      resetListScroll();
+      setList([]);
+      setPagination((prev) => ({ ...prev, pageNum: 1 }));
+    }
+  };
 
   // 处理选项点击事件
-  const handleItemClick = (item: Person) => {
+  const handleItemClick = (item: LabelValue) => {
     const { value: currentValue, mode, onChange } = selectProps;
-    const itemId = item.userId;
+    const itemId = item.value;
 
     // 多选模式处理
     const handleMultipleSelection = () => {
-      const selectedOptions = Array.isArray(currentValue) ? currentValue : [];
-      const isSelected = selectedOptions.some((opt) => opt.value === itemId);
+      const selectedOptions: any[] = Array.isArray(currentValue) ? currentValue : [currentValue];
+
+      if (labelInValue) {
+        const isSelected = selectedOptions.some((opt) => opt.value === itemId);
+
+        return isSelected
+          ? selectedOptions.filter((opt) => opt.value !== itemId) // 移除已选项
+          : [...selectedOptions, item]; // 添加新选项
+      }
+
+      const isSelected = selectedOptions.some((opt) => opt === itemId);
 
       return isSelected
-        ? selectedOptions.filter((opt) => opt.value !== itemId) // 移除已选项
+        ? selectedOptions.filter((opt) => opt !== itemId) // 移除已选项
         : [...selectedOptions, item]; // 添加新选项
     };
 
     // 单选模式处理
     const handleSingleSelection = () => {
-      const isCurrentSelected = (currentValue as LableValue)?.value === itemId;
+      const isCurrentSelected = (currentValue as LabelValue)?.value === itemId;
       return isCurrentSelected ? undefined : item;
     };
 
+    let resultValue: string | number | any[] | LabelValue;
+
     // 执行模式对应处理
     const newValue = mode === "multiple" ? handleMultipleSelection() : handleSingleSelection();
 
+    if (mode === "multiple") {
+      if (labelInValue) resultValue = newValue;
+      else resultValue = newValue.map((x: LabelValue | string | number) => (typeof x === "object" ? x?.value : x));
+    } else {
+      labelInValue ? (resultValue = newValue) : (resultValue = (newValue as unknown as LabelValue).value);
+    }
+
     // 触发变更回调
-    onChange?.(newValue, currentValue);
+    onChange?.(resultValue, currentValue as any);
 
     // 单选模式自动关闭下拉框
     if (mode !== "multiple" && selectInstance.current) selectInstance.current.blur();
@@ -137,19 +167,39 @@ const RemoteSelect: React.FC<RemoteSelectProps> = ({
     return defaultListItemConfigs;
   }, [listItemConfigs]);
 
+  useEffect(() => {
+    getData();
+  }, [search]);
+  useEffect(() => {
+    // 当value为一个id或者id数组时，需要进行数据查询用以回显label等信息
+    if (!labelInValue && selectProps.value && typeof searchData === "function" && initSearch.current) {
+      searchData?.(selectProps.value).then((res: Record<string, any>) => {
+        setCacheDeafultList(res?.list || []);
+        setList(res?.list || []);
+      });
+      // 只有初始化时执行
+      initSearch.current = false;
+    }
+  }, [selectProps.value]);
+
   // 默认渲染项（增加选中状态和点击处理）
   const defaultRenderItem = useCallback(
-    (item: Person) => {
+    (item: LabelValue) => {
       const { mode, value: selectedValue } = selectProps;
-      const { userId, [disabledKey]: isDisabled = false } = item;
+      const { value, [disabledKey]: isDisabled = false } = item;
       // 选中状态判断
       const getSelectionStatus = () => {
         if (mode === "multiple") {
           if (!Array.isArray(selectedValue)) return false;
-          const selectedValues = (selectedValue || [])?.map((opt) => (isObject(opt) ? opt?.value ?? opt?.userId : opt));
-          return selectedValues.includes(userId);
+          const selectedValues = (selectedValue || [])?.map((opt) => (isObject(opt) ? opt?.value ?? opt?.value : opt));
+          return selectedValues.includes(value);
+        }
+
+        if (Array.isArray(cacheDeafultList)) {
+          return cacheDeafultList.map((x) => x.value).includes(value);
         }
-        return isObject(selectedValue) ? (selectedValue as LableValue)?.value === userId : false;
+
+        return isObject(selectedValue) ? (selectedValue as LabelValue)?.value === value : selectedValue === value;
       };
 
       // 禁用样式生成
@@ -182,9 +232,9 @@ const RemoteSelect: React.FC<RemoteSelectProps> = ({
       );
 
       return (
-        <List.Item key={userId} onClick={() => !isDisabled && handleItemClick(item)} style={generateStyle(isDisabled)}>
+        <List.Item key={value} onClick={() => !isDisabled && handleItemClick(item)} style={generateStyle(isDisabled)}>
           {customItemNode || (
-            <div className="abt-user-item">
+            <div className="abt-user-item" key={item?.value}>
               <div className="abt-user-item-avatar">{avatarComponent}</div>
               {userInfoContent}
             </div>
@@ -192,7 +242,7 @@ const RemoteSelect: React.FC<RemoteSelectProps> = ({
         </List.Item>
       );
     },
-    [selectProps.value],
+    [selectProps.value, list?.length],
   );
 
   // 自定义下拉内容
@@ -216,8 +266,8 @@ const RemoteSelect: React.FC<RemoteSelectProps> = ({
     <Select
       {...selectProps}
       ref={selectInstance}
+      onDropdownVisibleChange={handleOnDropdownVisibleChange}
       showSearch
-      labelInValue
       onSearch={handleSearch}
       filterOption={false}
       dropdownRender={dropdownRender}

package/src/components/PersonnelSelect/type.ts

@@ -2,41 +2,40 @@ import type { SelectProps } from "antd/lib/select";
 import React from "react";
 import type { AvatarProps } from "antd/lib/avatar";
 
-export interface Person {
-  userId: string | number;
-  userName: string;
-  avatar?: string;
-  email?: string;
-  description?: string;
-  disabled?: boolean;
-  [key: string]: any;
-}
-
 export interface ScrollPagination {
   pageNum: number;
   pageSize: number;
   current?: number;
+  hasMore?: boolean;
   total?: number;
 }
 
-export type LableValue = {
+export type LabelValue = {
   label: string;
   value: string | number;
   [key: string]: any;
 };
 
-export interface RemoteSelectProps extends Omit<SelectProps<any>, "options" | "children"> {
+interface BaseSelectProps extends Omit<SelectProps<any>, "options" | "children"> {
   /**
    * @title 请求函数
    * */
-  loadOptions: (
+  loadData: (
     search: string,
     pagination: ScrollPagination,
-  ) => Promise<{ list: Person[]; pagination: ScrollPagination }>;
+  ) => Promise<{ list: LabelValue[]; pagination: ScrollPagination }>;
+  /**
+   * @title 查询函数
+   * */
+  searchData?: <T = Record<string, any>, U = any[]>(query: T) => Promise<U[]>;
   /**
    * @title 自定义列表项
    * */
-  renderItem?: (item: Person) => React.ReactNode;
+  renderItem?: (item: LabelValue) => React.ReactNode;
+  /**
+   * @title 下拉框收起时是否清除数据
+   * */
+  isClearable?: boolean;
   /**
    * @title 分页参数
    * */
@@ -45,10 +44,7 @@ export interface RemoteSelectProps extends Omit<SelectProps<any>, "options" | "c
    * @title antd头像组件props
    * */
   avataProps?: AvatarProps;
-  /**
-   * @title 下拉框值
-   * */
-  value: LableValue[] | LableValue;
+  mode: "multiple" | "tags";
   /**
    * @title 列表项内部展示的字段内容
    * */
@@ -74,3 +70,23 @@ export interface RemoteSelectProps extends Omit<SelectProps<any>, "options" | "c
    * */
   customItemNode?: React.ReactNode;
 }
+
+// 多选模式
+export interface RemoteSelectMultipleProps extends BaseSelectProps {
+  mode: "multiple";
+  /**
+   * @title 下拉框值
+   * */
+  value?: LabelValue[] | Array<string | number>;
+}
+
+// 单选模式
+export interface RemoteSelectTagsProps extends BaseSelectProps {
+  mode: "tags";
+  /**
+   * @title 下拉框值
+   * */
+  value?: LabelValue | string | number;
+}
+
+export type RemoteSelectProps = RemoteSelectMultipleProps | RemoteSelectTagsProps;