@hzab/form-render 1.6.17 → 1.6.18

package/CHANGELOG.md

@@ -1,283 +1,287 @@
-# @hzab/form-render@1.6.17
-
-fix: 修复上传组件，文件名和后缀名取值逻辑
-
-# @hzab/form-render@1.6.16
-
-fix: ArrayTable value 空问题兼容
-fix: 修复人员选择组件中 isObject 函数 ts 类型不明确导致在部分项目中出现类型错误提示的问题
-
-# @hzab/form-render@1.6.15
-
-feat: 新增 formily js 的 change 事件
-
-# @hzab/form-render@1.6.14
-
-fix: 修复 TreeCheckbox 隐藏不能点击问题。
-
-# @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
-
-# @hzab/form-render@1.6.10
-
-feat: 富文本编辑器实例像外暴露
-
-# @hzab/form-render@1.6.9
-
-feat: PersonnelSelect 组件
-
-# @hzab/form-render@1.6.8
-
-feat:富文本组件添加私有化部署文件上传与 oss 上传的区分
-
-# @hzab/form-render@1.6.7
-
-fix: 修复 LocationListPicker 组件在编辑时第一次无法正确渲染的 bug。
-
-# @hzab/form-render@1.6.5
-
-fix: 修复 LocationListPicker 组件在编辑时第一次无法正确渲染的 bug。
-feat: LocationPicker 渲染时增加范围
-
-# @hzab/form-render@1.6.3
-
-fix: 修复 LocationListPicker 组件的 Pupup 弹窗在某些时候漂移的 bug。
-
-# @hzab/form-render@1.6.2
-
-feat:自增列表组件新增删除二次确认功能
-
-# @hzab/form-render@1.6.1
-
-fix:列表新增-上传组件删除后清除对应的值
-
-# @hzab/form-render@1.6.0
-
-feat: 私有部署文件上传
-fix: 文件名称是否 hash 支持配置 useHashName
-
-# @hzab/form-render@1.5.1
-
-fix: schemaScope 使用 Ref 缓存，解决 onChange tempData 更新问题
-
-# @hzab/form-render@1.5.0
-
-feat: ossUpload 文件目录配置 dir 前缀 oss-upload 文件目录；dir 格式格式化
-feat: 上传组件多模式上传，出参格式配置
-fix: 字符串事件处理（onChange）
-
-# @hzab/form-render@1.4.1
-
-fix: Upload 修复历史遗留问题，解决 单项上传始终解析为 对象/字符串 无法切换会数组的情况
-
-# @hzab/form-render@1.4.0
-
-break: location-list-picker 添加多区域规划
-fix: LocationListPicker 点位信息弹窗位置问题修复
-
-# @hzab/form-render@1.3.3
-
-fix: 富文本异步数据问题修复
-
-# @hzab/form-render@1.3.2
-
-fix: schema props 为 schemaScope 字符串的情况
-
-# @hzab/form-render@1.3.1
-
-feat: 表单 onChange 事件（目前仅做触发，值计算后续优化）
-
-# @hzab/form-render@1.3.0
-
-break: 去除 lib，默认 src
-
-# @hzab/form-render@1.2.5
-
-- fix: LocationListPicker 组件高度调整与删除点位修复
-
-# @hzab/form-render@1.2.4
-
-fix: ossUpload 入参问题修复
-fix: UserSelect InfoRender
-
-# @hzab/form-render@1.2.3
-
-- fix: 富文本添加 loading 样式
-
-# @hzab/form-render@1.2.2
-
-- fix: Upload 预览 src（修复版）
-
-# @hzab/form-render@1.2.1
-
-- fix: 富文本 video 样式调整
-
-# @hzab/form-render@1.2.0
-
-- feat: Upload 增加 video 视频上传配置
-
-# @hzab/form-render@1.1.7
-
-- fix: Upload 预览 src
-
-# @hzab/form-render@1.1.6
-
-fix: 时间范围修复
-
-# @hzab/form-render@1.1.5
-
-fix: Upload 预览优化
-
-# @hzab/form-render@1.1.4
-
-fix: Upload 添加内部地址拼接
-
-# @hzab/form-render@1.1.3
-
-fix: Upload 添加预览配置
-
-# @hzab/form-render@1.1.2
-
-- feat: LocationListPicker 优化；列表激活状态、新增按钮提示、marker 激活状态及相关交互
-
-# @hzab/form-render@1.1.1
-
-- Upload OSS 上传支持数组对象格式值
-
-# @hzab/form-render@1.1.0
-
-- feat: LocationListPicker 组件
-
-# @hzab/form-render@1.0.3
-
-- fix: dayjs 自定义解析器，解决 YYYY 年 MM 月 DD 日 格式问题
-
-# @hzab/form-render@1.0.2
-
-- fix: Upload 预览文件判断逻辑
-
-# @hzab/form-render@1.0.1
-
-- fix: 提交结果为字符串处理 isOssUpload || isStrRes
-
-# @hzab/form-render@1.0.0
-
-- feat: @formily/antd 使用 c-formily-antd 替换，formily 相关包升级至 2.3.1 "@formily/core": "^2.3.1", "@formily/react": "^2.3.1", "c-formily-antd": "^2.3.1",
-
-# @hzab/form-render@0.7.4
-
-- RichEditor zIndex
-
-# @hzab/form-render@0.7.3
-
-- fix: Upload 通过 accept 判断文件类型
-
-# @hzab/form-render@0.7.2
-
-- fix: ossUpload axios 数据结构兼容
-
-# @hzab/form-render@0.7.1
-
-- Upload props customRequest
-
-# @hzab/form-render@0.7.0
-
-- 富文本组件 RichEditor
-
-# @hzab/form-render@0.6.2
-
-- fix: TreeCheckbox tabs 强制渲染，解决 checkbox 没有渲染导致值丢失的问题
-
-# @hzab/form-render@0.6.1
-
-- fix: LocationPicker MapSearch 只读模式选择结果只修改地图中心点
-- fix: LocationPicker 解决 AMap 异步加载导致 setPickPoint 异常的问题
-
-# @hzab/form-render@0.6.0
-
-- feat: TreeCheckbox 支持无线层 tab
-- feat: TreeCheckbox 支持合并叶子节点
-- refactor: svg-icon.js -> svg-icon.jsx
-
-# @hzab/form-render@0.5.5
-
-- fix: TreeCheckbox key 问题修复
-- fix: TreeCheckbox 数据兼容处理
-
-# @hzab/form-render@0.5.4
-
-- feat: LocationPicker mapInit 设置值取增加临时存储的 formatVal 的逻辑
-
-# @hzab/form-render0.5.3
-
-- feat: LocationPicker MapSearch 清除改为 input, map 请求优化
-
-# @hzab/form-render0.5.2
-
-- feat: TreeCheckbox tabBox 最外层允许配置成 tab
-
-# @hzab/form-render0.5.1
-
-- fix: LocationPicker 去除 changMode 参数，仅允许 点击地图选点
-- fix: LocationPicker 获取地址逻辑修复
-- fix: DatePicker 问题修复
-
-# @hzab/form-render0.5.0
-
-- fix： LocationPicker disabled || readOnly 不展示 Notice
-- fix： LocationPicker 异步数据回填逻辑处理
-- fix： LocationPicker 去除 isObjectRes 参数
-
-# @hzab/form-render0.4.2
-
-- LocationPicker getCurPosition 逻辑优化
-
-# @hzab/form-render0.4.1
-
-- LocationPicker useField 容错
-
-# @hzab/form-render0.4.0
-
-- LocationPicker 地图选点组件
-- UserSelect 去除 defaultOpen 属性
-
-# @hzab/form-render0.3.0
-
-- feat: TreeCheckbox
-
-# @hzab/form-render0.2.5
-
-- fix: ant-form-inline style
-
-# @hzab/form-render0.2.3
-
-- export Components
-
-# @hzab/form-render0.2.2
-
-- Upload beforeUploadCheck
-
-# @hzab/form-render0.2.1
-
-- Upload preview video、img、audio
-
-# @hzab/form-render0.2.0
-
-- 人员选择组件
-
-# @hzab/form-render0.1.0
-
-- Upload 组件
-
-# @hzab/form-render0.0.1
-
-组件初始化
+# @hzab/form-render@1.6.18
+
+fix:修复人员选择组件单选模式自定义节点展示以及选中判断问题
+
+# @hzab/form-render@1.6.17
+
+fix: 修复上传组件，文件名和后缀名取值逻辑
+
+# @hzab/form-render@1.6.16
+
+fix: ArrayTable value 空问题兼容
+fix: 修复人员选择组件中 isObject 函数 ts 类型不明确导致在部分项目中出现类型错误提示的问题
+
+# @hzab/form-render@1.6.15
+
+feat: 新增 formily js 的 change 事件
+
+# @hzab/form-render@1.6.14
+
+fix: 修复 TreeCheckbox 隐藏不能点击问题。
+
+# @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
+
+# @hzab/form-render@1.6.10
+
+feat: 富文本编辑器实例像外暴露
+
+# @hzab/form-render@1.6.9
+
+feat: PersonnelSelect 组件
+
+# @hzab/form-render@1.6.8
+
+feat:富文本组件添加私有化部署文件上传与 oss 上传的区分
+
+# @hzab/form-render@1.6.7
+
+fix: 修复 LocationListPicker 组件在编辑时第一次无法正确渲染的 bug。
+
+# @hzab/form-render@1.6.5
+
+fix: 修复 LocationListPicker 组件在编辑时第一次无法正确渲染的 bug。
+feat: LocationPicker 渲染时增加范围
+
+# @hzab/form-render@1.6.3
+
+fix: 修复 LocationListPicker 组件的 Pupup 弹窗在某些时候漂移的 bug。
+
+# @hzab/form-render@1.6.2
+
+feat:自增列表组件新增删除二次确认功能
+
+# @hzab/form-render@1.6.1
+
+fix:列表新增-上传组件删除后清除对应的值
+
+# @hzab/form-render@1.6.0
+
+feat: 私有部署文件上传
+fix: 文件名称是否 hash 支持配置 useHashName
+
+# @hzab/form-render@1.5.1
+
+fix: schemaScope 使用 Ref 缓存，解决 onChange tempData 更新问题
+
+# @hzab/form-render@1.5.0
+
+feat: ossUpload 文件目录配置 dir 前缀 oss-upload 文件目录；dir 格式格式化
+feat: 上传组件多模式上传，出参格式配置
+fix: 字符串事件处理（onChange）
+
+# @hzab/form-render@1.4.1
+
+fix: Upload 修复历史遗留问题，解决 单项上传始终解析为 对象/字符串 无法切换会数组的情况
+
+# @hzab/form-render@1.4.0
+
+break: location-list-picker 添加多区域规划
+fix: LocationListPicker 点位信息弹窗位置问题修复
+
+# @hzab/form-render@1.3.3
+
+fix: 富文本异步数据问题修复
+
+# @hzab/form-render@1.3.2
+
+fix: schema props 为 schemaScope 字符串的情况
+
+# @hzab/form-render@1.3.1
+
+feat: 表单 onChange 事件（目前仅做触发，值计算后续优化）
+
+# @hzab/form-render@1.3.0
+
+break: 去除 lib，默认 src
+
+# @hzab/form-render@1.2.5
+
+- fix: LocationListPicker 组件高度调整与删除点位修复
+
+# @hzab/form-render@1.2.4
+
+fix: ossUpload 入参问题修复
+fix: UserSelect InfoRender
+
+# @hzab/form-render@1.2.3
+
+- fix: 富文本添加 loading 样式
+
+# @hzab/form-render@1.2.2
+
+- fix: Upload 预览 src（修复版）
+
+# @hzab/form-render@1.2.1
+
+- fix: 富文本 video 样式调整
+
+# @hzab/form-render@1.2.0
+
+- feat: Upload 增加 video 视频上传配置
+
+# @hzab/form-render@1.1.7
+
+- fix: Upload 预览 src
+
+# @hzab/form-render@1.1.6
+
+fix: 时间范围修复
+
+# @hzab/form-render@1.1.5
+
+fix: Upload 预览优化
+
+# @hzab/form-render@1.1.4
+
+fix: Upload 添加内部地址拼接
+
+# @hzab/form-render@1.1.3
+
+fix: Upload 添加预览配置
+
+# @hzab/form-render@1.1.2
+
+- feat: LocationListPicker 优化；列表激活状态、新增按钮提示、marker 激活状态及相关交互
+
+# @hzab/form-render@1.1.1
+
+- Upload OSS 上传支持数组对象格式值
+
+# @hzab/form-render@1.1.0
+
+- feat: LocationListPicker 组件
+
+# @hzab/form-render@1.0.3
+
+- fix: dayjs 自定义解析器，解决 YYYY 年 MM 月 DD 日 格式问题
+
+# @hzab/form-render@1.0.2
+
+- fix: Upload 预览文件判断逻辑
+
+# @hzab/form-render@1.0.1
+
+- fix: 提交结果为字符串处理 isOssUpload || isStrRes
+
+# @hzab/form-render@1.0.0
+
+- feat: @formily/antd 使用 c-formily-antd 替换，formily 相关包升级至 2.3.1 "@formily/core": "^2.3.1", "@formily/react": "^2.3.1", "c-formily-antd": "^2.3.1",
+
+# @hzab/form-render@0.7.4
+
+- RichEditor zIndex
+
+# @hzab/form-render@0.7.3
+
+- fix: Upload 通过 accept 判断文件类型
+
+# @hzab/form-render@0.7.2
+
+- fix: ossUpload axios 数据结构兼容
+
+# @hzab/form-render@0.7.1
+
+- Upload props customRequest
+
+# @hzab/form-render@0.7.0
+
+- 富文本组件 RichEditor
+
+# @hzab/form-render@0.6.2
+
+- fix: TreeCheckbox tabs 强制渲染，解决 checkbox 没有渲染导致值丢失的问题
+
+# @hzab/form-render@0.6.1
+
+- fix: LocationPicker MapSearch 只读模式选择结果只修改地图中心点
+- fix: LocationPicker 解决 AMap 异步加载导致 setPickPoint 异常的问题
+
+# @hzab/form-render@0.6.0
+
+- feat: TreeCheckbox 支持无线层 tab
+- feat: TreeCheckbox 支持合并叶子节点
+- refactor: svg-icon.js -> svg-icon.jsx
+
+# @hzab/form-render@0.5.5
+
+- fix: TreeCheckbox key 问题修复
+- fix: TreeCheckbox 数据兼容处理
+
+# @hzab/form-render@0.5.4
+
+- feat: LocationPicker mapInit 设置值取增加临时存储的 formatVal 的逻辑
+
+# @hzab/form-render0.5.3
+
+- feat: LocationPicker MapSearch 清除改为 input, map 请求优化
+
+# @hzab/form-render0.5.2
+
+- feat: TreeCheckbox tabBox 最外层允许配置成 tab
+
+# @hzab/form-render0.5.1
+
+- fix: LocationPicker 去除 changMode 参数，仅允许 点击地图选点
+- fix: LocationPicker 获取地址逻辑修复
+- fix: DatePicker 问题修复
+
+# @hzab/form-render0.5.0
+
+- fix： LocationPicker disabled || readOnly 不展示 Notice
+- fix： LocationPicker 异步数据回填逻辑处理
+- fix： LocationPicker 去除 isObjectRes 参数
+
+# @hzab/form-render0.4.2
+
+- LocationPicker getCurPosition 逻辑优化
+
+# @hzab/form-render0.4.1
+
+- LocationPicker useField 容错
+
+# @hzab/form-render0.4.0
+
+- LocationPicker 地图选点组件
+- UserSelect 去除 defaultOpen 属性
+
+# @hzab/form-render0.3.0
+
+- feat: TreeCheckbox
+
+# @hzab/form-render0.2.5
+
+- fix: ant-form-inline style
+
+# @hzab/form-render0.2.3
+
+- export Components
+
+# @hzab/form-render0.2.2
+
+- Upload beforeUploadCheck
+
+# @hzab/form-render0.2.1
+
+- Upload preview video、img、audio
+
+# @hzab/form-render0.2.0
+
+- 人员选择组件
+
+# @hzab/form-render0.1.0
+
+- Upload 组件
+
+# @hzab/form-render0.0.1
+
+组件初始化

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/form-render",
-  "version": "1.6.17",
+  "version": "1.6.18",
   "description": "",
   "main": "src",
   "scripts": {

package/src/components/PersonnelSelect/index.tsx

@@ -1,300 +1,305 @@
-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, isPlainObject } from "lodash";
-import type { LabelValue, ScrollPagination, RemoteSelectProps } from "./type";
-
-import "./index.less";
-
-const defaultListItemConfigs = [
-  { label: "姓名：", key: "userName" },
-  { label: "主部门：", key: "parentName" },
-  { label: "主驻点：", key: "orgName" },
-  { label: "手机号：", key: "phoneNumber" },
-  { label: "身份证号：", key: "idnumber" },
-];
-
-const transfromLabelInValueData = (list: LabelValue[], labelKey: string, valueKey: string): LabelValue[] => {
-  try {
-    return list.map((item) => ({ ...item, label: item?.[labelKey], value: item?.[valueKey] }));
-  } catch (e) {
-    console.error(e);
-    return list;
-  }
-};
-
-const RemoteSelect: React.FC<RemoteSelectProps> = ({
-  loadData,
-  searchData,
-  renderItem,
-  listItemConfigs,
-  labelKey = "userName",
-  valueKey = "userId",
-  disabledKey = "disabled",
-  initialPagination = {},
-  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<LabelValue[]>([]);
-  const [cacheDeafultList, setCacheDeafultList] = useState<LabelValue[]>([]);
-  const [pagination, setPagination] = useState<ScrollPagination>({
-    pageNum: 1,
-    pageSize: 10,
-    ...initialPagination,
-  });
-  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 loadData(search, {
-        ...pagination,
-        pageNum: isScrollLoad ? pagination.pageNum + 1 : 1,
-      });
-      const { list, pagination: resPagination } = result;
-
-      total.current = resPagination.total;
-
-      const transformatList: LabelValue[] = transfromLabelInValueData(list, labelKey, valueKey);
-
-      setList((prev) => (isScrollLoad ? [...prev, ...transformatList] : transformatList));
-    } finally {
-      isScrollLoad ? setLoadingMore(false) : setLoading(false);
-    }
-  }, 500);
-
-  const debounceHandleScroll = async (e: React.UIEvent<HTMLDivElement>) => {
-    const { scrollTop, clientHeight, scrollHeight } = e.currentTarget;
-    const isNearBottom = scrollHeight - scrollTop - clientHeight < 30;
-
-    if (isNearBottom && !loadingMore && list.length <= total.current) {
-      await getData(true);
-      setPagination((pre) => ({ ...pre, pageNum: pagination.pageNum + 1 }));
-    }
-  };
-
-  const getData = useCallback(debounceLoadData, [search, pagination, loadData]);
-
-  // 处理滚动加载
-  const handleScroll = useCallback(debounceHandleScroll, [search, loadingMore, loadData]);
-
-  // 重置list滚动条
-  const resetListScroll = () => {
-    const listNode = document.getElementById("abt-list");
-    listNode && listNode.scrollTo({ top: 0, behavior: "auto" });
-  };
-
-  // 处理搜索
-  const handleSearch = debounce((value: string) => {
-    resetListScroll();
-    setSearch(value);
-    setPagination((prev) => ({ ...prev, pageNum: 1 }));
-  }, 1000);
-
-  const handleOnDropdownVisibleChange = (open: boolean) => {
-    if (!isClearable) return;
-    if (open) {
-      getData();
-    } else {
-      resetListScroll();
-      setList([]);
-      setPagination((prev) => ({ ...prev, pageNum: 1 }));
-    }
-  };
-
-  // 处理选项点击事件
-  const handleItemClick = (item: LabelValue) => {
-    const { value: currentValue, mode, onChange } = selectProps;
-    const itemId = item.value;
-
-    // 多选模式处理
-    const handleMultipleSelection = () => {
-      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 !== itemId) // 移除已选项
-        : [...selectedOptions, item]; // 添加新选项
-    };
-
-    // 单选模式处理
-    const handleSingleSelection = () => {
-      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?.(resultValue, currentValue as any);
-
-    // 单选模式自动关闭下拉框
-    if (mode !== "multiple" && selectInstance.current) selectInstance.current.blur();
-  };
-
-  // 合并配置
-  const itemConfigs = useMemo(() => {
-    if (Array.isArray(listItemConfigs) && listItemConfigs?.length) return listItemConfigs;
-    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: LabelValue) => {
-      const { mode, value: selectedValue } = selectProps;
-      const { value, [disabledKey]: isDisabled = false } = item;
-      // 选中状态判断
-      const getSelectionStatus = () => {
-        if (mode === "multiple") {
-          if (!Array.isArray(selectedValue)) return false;
-          const selectedValues = (selectedValue || [])?.map((opt) =>
-            (isObject(opt) as unknown as Record<string, any>) ? 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 LabelValue)?.value === value : selectedValue === value;
-      };
-
-      // 禁用样式生成
-      const generateStyle = (disabled: boolean): React.CSSProperties => {
-        if (typeof disabledStyle === "function") {
-          return disabledStyle(disabled);
-        }
-
-        return {
-          cursor: disabled ? "not-allowed" : "pointer",
-          backgroundColor: disabled ? "#f0f0f0" : getSelectionStatus() ? "#e6f7ff" : "inherit",
-          color: disabled ? "#999" : "inherit",
-          filter: disabled ? "grayscale(100%)" : "none",
-        };
-      };
-
-      // 头像组件
-      const avatarComponent = <Avatar alt={item.userName} size={60} {...avataProps} src={item.avatar} />;
-
-      // 用户信息列表
-      const userInfoContent = (
-        <ul className="abt-user-item-info">
-          {itemConfigs.map((configItem, index) => (
-            <li key={configItem?.key || index} className="abt-user-item-info__item">
-              <span>{configItem?.label}</span>
-              <span>{item?.[configItem.key]}</span>
-            </li>
-          ))}
-        </ul>
-      );
-
-      return (
-        <List.Item key={value} onClick={() => !isDisabled && handleItemClick(item)} style={generateStyle(isDisabled)}>
-          {customItemNode || (
-            <div className="abt-user-item" key={item?.value}>
-              <div className="abt-user-item-avatar">{avatarComponent}</div>
-              {userInfoContent}
-            </div>
-          )}
-        </List.Item>
-      );
-    },
-    [selectProps.value, list?.length],
-  );
-
-  // 自定义下拉内容
-  const dropdownRender = () => (
-    <div>
-      <Spin spinning={loading}>
-        <List
-          id={"abt-list"}
-          loading={loadingMore}
-          dataSource={list}
-          renderItem={renderItem ? renderItem : defaultRenderItem}
-          /*@ts-ignore*/
-          onScroll={handleScroll}
-          style={{ maxHeight: 250, overflowY: "auto" }}
-        />
-      </Spin>
-    </div>
-  );
-
-  return (
-    <Select
-      {...selectProps}
-      ref={selectInstance}
-      onDropdownVisibleChange={handleOnDropdownVisibleChange}
-      showSearch
-      onSearch={handleSearch}
-      filterOption={false}
-      dropdownRender={dropdownRender}
-      placeholder="请选择人员"
-      options={list.map((item) => ({
-        value: item.userId,
-        label: item.userName,
-        ...item,
-      }))}
-    />
-  );
-};
-
-const PersonnelSelect = connect(
-  RemoteSelect,
-  mapProps(
-    {
-      loading: true,
-    },
-    (props) => {
-      return {
-        ...props,
-      };
-    },
-  ),
-);
-
-export { RemoteSelect, PersonnelSelect };
+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 { LabelValue, ScrollPagination, RemoteSelectProps } from "./type";
+
+import "./index.less";
+
+const defaultListItemConfigs = [
+  { label: "姓名：", key: "userName" },
+  { label: "主部门：", key: "parentName" },
+  { label: "主驻点：", key: "orgName" },
+  { label: "手机号：", key: "phoneNumber" },
+  { label: "身份证号：", key: "idnumber" },
+];
+
+const transfromLabelInValueData = (list: LabelValue[], labelKey: string, valueKey: string): LabelValue[] => {
+  try {
+    return list.map((item) => ({ ...item, label: item?.[labelKey], value: item?.[valueKey] }));
+  } catch (e) {
+    console.error(e);
+    return list;
+  }
+};
+
+const RemoteSelect: React.FC<RemoteSelectProps> = ({
+  loadData,
+  searchData,
+  renderItem,
+  listItemConfigs,
+  labelKey = "userName",
+  valueKey = "userId",
+  disabledKey = "disabled",
+  initialPagination = {},
+  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<LabelValue[]>([]);
+  // const [cacheDeafultList, setCacheDeafultList] = useState<LabelValue[]>([]);
+  const [pagination, setPagination] = useState<ScrollPagination>({
+    pageNum: 1,
+    pageSize: 10,
+    ...initialPagination,
+  });
+  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 loadData(search, {
+        ...pagination,
+        pageNum: isScrollLoad ? pagination.pageNum + 1 : 1,
+      });
+      const { list, pagination: resPagination } = result;
+
+      total.current = resPagination.total;
+
+      const transformatList: LabelValue[] = transfromLabelInValueData(list, labelKey, valueKey);
+
+      setList((prev) => (isScrollLoad ? [...prev, ...transformatList] : transformatList));
+    } finally {
+      isScrollLoad ? setLoadingMore(false) : setLoading(false);
+    }
+  }, 500);
+
+  const debounceHandleScroll = async (e: React.UIEvent<HTMLDivElement>) => {
+    const { scrollTop, clientHeight, scrollHeight } = e.currentTarget;
+    const isNearBottom = scrollHeight - scrollTop - clientHeight < 30;
+
+    if (isNearBottom && !loadingMore && list.length <= total.current) {
+      await getData(true);
+      setPagination((pre) => ({ ...pre, pageNum: pagination.pageNum + 1 }));
+    }
+  };
+
+  const getData = useCallback(debounceLoadData, [search, pagination, loadData]);
+
+  // 处理滚动加载
+  const handleScroll = useCallback(debounceHandleScroll, [search, loadingMore, loadData]);
+
+  // 重置list滚动条
+  const resetListScroll = () => {
+    const listNode = document.getElementById("abt-list");
+    listNode && listNode.scrollTo({ top: 0, behavior: "auto" });
+  };
+
+  // 处理搜索
+  const handleSearch = debounce((value: string) => {
+    resetListScroll();
+    setSearch(value);
+    setPagination((prev) => ({ ...prev, pageNum: 1 }));
+  }, 1000);
+
+  const handleOnDropdownVisibleChange = (open: boolean) => {
+    if (!isClearable) return;
+    if (open) {
+      getData();
+    } else {
+      reset();
+    }
+  };
+
+  const reset = () => {
+    setSearch("");
+    resetListScroll();
+    setList([]);
+    setPagination((prev) => ({ ...prev, pageNum: 1 }));
+  };
+
+  // 处理选项点击事件
+  const handleItemClick = (item: LabelValue) => {
+    const { value: currentValue, mode, onChange } = selectProps;
+    const itemId = item.value;
+
+    // 多选模式处理
+    const handleMultipleSelection = () => {
+      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 !== itemId) // 移除已选项
+        : [...selectedOptions, item]; // 添加新选项
+    };
+
+    // 单选模式处理
+    const handleSingleSelection = () => {
+      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?.(resultValue, currentValue as any);
+
+    // 单选模式自动关闭下拉框
+    if (mode !== "multiple" && selectInstance.current) selectInstance.current.blur();
+  };
+
+  // 合并配置
+  const itemConfigs = useMemo(() => {
+    if (Array.isArray(listItemConfigs) && listItemConfigs?.length) return listItemConfigs;
+    return defaultListItemConfigs;
+  }, [listItemConfigs]);
+
+  useEffect(() => {
+    getData();
+  }, [search]);
+  useEffect(() => {
+    // 当value为一个id或者id数组时，需要进行数据查询用以回显label等信息
+    if (selectProps.value && typeof searchData === "function" && initSearch.current) {
+      searchData?.(selectProps.value).then((res: Record<string, any>) => {
+        const listData = transfromLabelInValueData(res.list || [], labelKey, valueKey);
+        // setCacheDeafultList(listData);
+        setList(listData);
+      });
+      // 只有初始化时执行
+      initSearch.current = false;
+    }
+  }, [selectProps.value]);
+
+  // 默认渲染项（增加选中状态和点击处理）
+  const defaultRenderItem = useCallback(
+    (item: LabelValue) => {
+      const { mode, value: selectedValue } = selectProps;
+      const { value, [disabledKey]: isDisabled = false } = item;
+      // 选中状态判断
+      const getSelectionStatus = () => {
+        if (mode === "multiple") {
+          if (!Array.isArray(selectedValue)) return false;
+          const selectedValues = (selectedValue || [])?.map((opt) =>
+            (isObject(opt) as unknown as Record<string, any>) ? opt?.value ?? opt?.value : opt,
+          );
+          return selectedValues.includes(value);
+        }
+
+        return isObject(selectedValue) ? (selectedValue as LabelValue)?.value === value : selectedValue === value;
+      };
+
+      // 禁用样式生成
+      const generateStyle = (disabled: boolean): React.CSSProperties => {
+        if (typeof disabledStyle === "function") {
+          return disabledStyle(disabled);
+        }
+
+        return {
+          cursor: disabled ? "not-allowed" : "pointer",
+          backgroundColor: disabled ? "#f0f0f0" : getSelectionStatus() ? "#e6f7ff" : "inherit",
+          color: disabled ? "#999" : "inherit",
+          filter: disabled ? "grayscale(100%)" : "none",
+        };
+      };
+
+      // 头像组件
+      const avatarComponent = <Avatar alt={item.userName} size={60} {...avataProps} src={item.avatar} />;
+
+      // 用户信息列表
+      const userInfoContent = (
+        <ul className="abt-user-item-info">
+          {itemConfigs.map((configItem, index) => (
+            <li key={configItem?.key || index} className="abt-user-item-info__item">
+              <span>{configItem?.label}</span>
+              <span>{item?.[configItem.key]}</span>
+            </li>
+          ))}
+        </ul>
+      );
+      const itemStyle = generateStyle(isDisabled);
+
+      const renderCustomItemNode = typeof customItemNode === "function" ? customItemNode?.(item, itemStyle) : null;
+
+      return (
+        <List.Item key={value} onClick={() => !isDisabled && handleItemClick(item)} style={itemStyle}>
+          {renderCustomItemNode || (
+            <div className="abt-user-item" key={item?.value}>
+              <div className="abt-user-item-avatar">{avatarComponent}</div>
+              {userInfoContent}
+            </div>
+          )}
+        </List.Item>
+      );
+    },
+    [selectProps.value, list?.length],
+  );
+
+  // 自定义下拉内容
+  const dropdownRender = () => (
+    <div>
+      <Spin spinning={loading}>
+        <List
+          id={"abt-list"}
+          loading={loadingMore}
+          dataSource={list}
+          renderItem={renderItem ? renderItem : defaultRenderItem}
+          /*@ts-ignore*/
+          onScroll={handleScroll}
+          style={{ maxHeight: 250, overflowY: "auto" }}
+        />
+      </Spin>
+    </div>
+  );
+
+  return (
+    <Select
+      filterOption={false}
+      showSearch
+      placeholder="请选择人员"
+      {...selectProps}
+      ref={selectInstance}
+      onDropdownVisibleChange={handleOnDropdownVisibleChange}
+      onSearch={handleSearch}
+      dropdownRender={dropdownRender}
+      options={list.map((item) => ({
+        value: item?.[valueKey] || item?.userId,
+        label: item?.[labelKey] || item.userName,
+        ...item,
+      }))}
+    />
+  );
+};
+
+const PersonnelSelect = connect(
+  RemoteSelect,
+  mapProps(
+    {
+      loading: true,
+    },
+    (props) => {
+      return {
+        ...props,
+      };
+    },
+  ),
+);
+
+export { RemoteSelect, PersonnelSelect };