@hzab/form-render 1.6.8-beta1 → 1.6.8-beta2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/form-render",
-  "version": "1.6.8-beta1",
+  "version": "1.6.8-beta2",
   "description": "",
   "main": "src",
   "scripts": {

package/src/components/PersonnelSelect/index.tsx

@@ -1,62 +1,34 @@
 import React, { useEffect, useState, useRef, useCallback, useMemo } from "react";
 import { Select, List, Avatar, Spin } from "antd";
 import { connect, mapProps } from "@formily/react";
-import type { SelectProps } from "antd/lib/select";
-import type { AvatarProps } from "antd/lib/avatar";
-import { debounce, isObject, uniq } from "lodash";
+import { debounce, isObject } from "lodash";
+import type { LableValue, Person, ScrollPagination, RemoteSelectProps } from "./type";
 
 import "./index.less";
 
-export interface Person {
-  id: string | number;
-  name: string;
-  avatar?: string;
-  email?: string;
-  description?: string;
-  disabled?: boolean;
-  [key: string]: any;
-}
-
-interface ScrollPagination {
-  pageNum: number;
-  pageSize: number;
-  current?: number;
-  total?: number;
-}
-
-type LableValue = {
-  label: string;
-  value: string | number;
-  [key: string]: any;
-};
-
-interface RemoteSelectProps extends Omit<SelectProps<any>, "options" | "children"> {
-  loadOptions: (
-    search: string,
-    pagination: ScrollPagination,
-  ) => Promise<{ list: Person[]; pagination: ScrollPagination }>;
-  renderItem?: (item: Person) => React.ReactNode;
-  initialPagination?: Partial<ScrollPagination>;
-  avataProps?: AvatarProps;
-  value: LableValue[] | LableValue;
-  listItemConfigs?: { label: string; key: string }[];
-  disabledKey?: string;
-  disabledStyle?: (disabled: boolean) => React.CSSProperties;
-  customItemNode?: React.ReactNode;
-}
-
 const defaultListItemConfigs = [
   { label: "姓名：", key: "userName" },
-  { label: "主部门：", key: "orgName" },
-  { label: "主驻点：", key: "userName" },
+  { label: "主部门：", key: "parentName" },
+  { label: "主驻点：", key: "orgName" },
   { label: "手机号：", key: "phoneNumber" },
   { label: "身份证号：", key: "idnumber" },
 ];
 
+const transfromLabelInValueData = (list: Person[], labelKey: string, valueKey: string): Person[] => {
+  try {
+    return list.map((item) => ({ ...item, label: item?.[labelKey], value: item?.[valueKey] }));
+  } catch (e) {
+    console.error(e);
+    return list;
+  }
+};
+
 const RemoteSelect: React.FC<RemoteSelectProps> = ({
   loadOptions,
   renderItem,
   listItemConfigs,
+  labelKey = "userName",
+  valueKey = "userId",
   disabledKey = "disabled",
   initialPagination = {},
   avataProps = {},
@@ -73,8 +45,8 @@ const RemoteSelect: React.FC<RemoteSelectProps> = ({
     pageSize: 10,
     ...initialPagination,
   });
-  const listRef = useRef<HTMLDivElement>(null);
   const selectInstance = useRef<any>(null);
+  const total = useRef(0);
 
   const debounceLoadData = debounce(async (isScrollLoad = false) => {
     try {
@@ -84,18 +56,23 @@ const RemoteSelect: React.FC<RemoteSelectProps> = ({
         ...pagination,
         pageNum: isScrollLoad ? pagination.pageNum + 1 : 1,
       });
-      const { list } = result;
+      const { list, pagination: resPagination } = result;
+
+      total.current = resPagination.total;
 
-      setList((prev) => (isScrollLoad ? [...prev, ...list] : list));
+      const transformatList: Person[] = 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) {
+    if (isNearBottom && !loadingMore && list.length <= total.current) {
       await loadData(true);
       setPagination((pre) => ({ ...pre, pageNum: pagination.pageNum + 1 }));
     }
@@ -106,8 +83,15 @@ const RemoteSelect: React.FC<RemoteSelectProps> = ({
   // 处理滚动加载
   const handleScroll = useCallback(debounceHandleScroll, [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);
@@ -116,37 +100,38 @@ const RemoteSelect: React.FC<RemoteSelectProps> = ({
     loadData();
   }, [search]);
 
-  // 处理选项点击
-  const handleItemClick = (itemId: string | number) => {
-    const currentValue = selectProps.value;
-    const isMultiple = selectProps.mode === "multiple";
-
-    // 更新值
-    if (isMultiple) {
-      const isValueArr = Array.isArray(currentValue);
-      let newValue = null;
-
-      if (isValueArr) {
-        const currentValueIds = currentValue.map((it) => it.value);
-        newValue = currentValueIds.includes(itemId)
-          ? currentValueIds.filter((v) => v !== itemId)
-          : uniq([...currentValue, itemId]);
-      } else {
-        newValue = [itemId];
-      }
-
-      selectProps.onChange?.(newValue, currentValue);
-    } else {
-      const newValue = itemId === (currentValue as LableValue)?.value ? undefined : itemId;
-      selectProps.onChange?.(newValue, currentValue);
-
-      // 单选模式下关闭下拉框
-      if (selectInstance.current) {
-        selectInstance.current.blur();
-      }
-    }
+  // 处理选项点击事件
+  const handleItemClick = (item: Person) => {
+    const { value: currentValue, mode, onChange } = selectProps;
+    const itemId = item.userId;
+
+    // 多选模式处理
+    const handleMultipleSelection = () => {
+      const selectedOptions = Array.isArray(currentValue) ? currentValue : [];
+      const isSelected = selectedOptions.some((opt) => opt.value === itemId);
+
+      return isSelected
+        ? selectedOptions.filter((opt) => opt.value !== itemId) // 移除已选项
+        : [...selectedOptions, item]; // 添加新选项
+    };
+
+    // 单选模式处理
+    const handleSingleSelection = () => {
+      const isCurrentSelected = (currentValue as LableValue)?.value === itemId;
+      return isCurrentSelected ? undefined : item;
+    };
+
+    // 执行模式对应处理
+    const newValue = mode === "multiple" ? handleMultipleSelection() : handleSingleSelection();
+
+    // 触发变更回调
+    onChange?.(newValue, currentValue);
+
+    // 单选模式自动关闭下拉框
+    if (mode !== "multiple" && selectInstance.current) selectInstance.current.blur();
   };
 
+  // 合并配置
   const itemConfigs = useMemo(() => {
     if (Array.isArray(listItemConfigs) && listItemConfigs?.length) return listItemConfigs;
     return defaultListItemConfigs;
@@ -155,48 +140,53 @@ const RemoteSelect: React.FC<RemoteSelectProps> = ({
   // 默认渲染项（增加选中状态和点击处理）
   const defaultRenderItem = useCallback(
     (item: Person) => {
-      let isSelected;
-
-      if (selectProps.mode === "multiple") {
-        isSelected = (selectProps.value || [])
-          .map((it) => (isObject(it) ? it?.value || it?.userId : it))
-          .includes(item.userId);
-      } else {
-        isSelected = isObject(selectProps.value) ? (selectProps.value as LableValue)?.value === item.userId : false;
-      }
-
-      const disabled = item?.[disabledKey] || false;
-      const getDisabledStyle: React.CSSProperties =
-        typeof disabledStyle === "function"
-          ? disabledStyle(disabled)
-          : {
-              cursor: disabled ? "not-allowed" : "pointer",
-              backgroundColor: disabled ? "#f0f0f0" : isSelected ? "#e6f7ff" : "inherit",
-              color: disabled ? "#999" : "inherit",
-              filter: disabled ? "grayscale(100%)" : "none",
-            };
+      const { mode, value: selectedValue } = selectProps;
+      const { userId, [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);
+        }
+        return isObject(selectedValue) ? (selectedValue as LableValue)?.value === userId : false;
+      };
+
+      // 禁用样式生成
+      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={item.userId}
-          onClick={() => (disabled ? null : handleItemClick(item.userId))}
-          style={getDisabledStyle}
-        >
-          {customItemNode ? (
-            customItemNode
-          ) : (
+        <List.Item key={userId} onClick={() => !isDisabled && handleItemClick(item)} style={generateStyle(isDisabled)}>
+          {customItemNode || (
             <div className="abt-user-item">
-              <div className="abt-user-item-avatar">
-                <Avatar alt={item?.userName} size={60} {...avataProps} src={item.avatar} />
-              </div>
-              <ul className="abt-user-item-info">
-                {itemConfigs.map((configItem) => (
-                  <li className="abt-user-item-info__item">
-                    <span>{configItem.label}</span>
-                    <span>{item?.[configItem.key]}</span>
-                  </li>
-                ))}
-              </ul>
+              <div className="abt-user-item-avatar">{avatarComponent}</div>
+              {userInfoContent}
             </div>
           )}
         </List.Item>
@@ -206,10 +196,11 @@ const RemoteSelect: React.FC<RemoteSelectProps> = ({
   );
 
   // 自定义下拉内容
-  const dropdownRender = (menu: React.ReactNode) => (
-    <div ref={listRef}>
+  const dropdownRender = () => (
+    <div>
       <Spin spinning={loading}>
         <List
+          id={"abt-list"}
           loading={loadingMore}
           dataSource={list}
           renderItem={renderItem ? renderItem : defaultRenderItem}
@@ -226,27 +217,27 @@ const RemoteSelect: React.FC<RemoteSelectProps> = ({
       {...selectProps}
       ref={selectInstance}
       showSearch
+      labelInValue
       onSearch={handleSearch}
       filterOption={false}
       dropdownRender={dropdownRender}
       placeholder="请选择人员"
-      // 增加虚拟的options用于显示选中标签
       options={list.map((item) => ({
         value: item.userId,
         label: item.userName,
+        ...item,
       }))}
     />
   );
 };
 
-// Formily集成
 const PersonnelSelect = connect(
   RemoteSelect,
   mapProps(
     {
       loading: true,
     },
-    (props, field: any) => {
+    (props) => {
       return {
         ...props,
       };

package/src/components/PersonnelSelect/type.ts

@@ -0,0 +1,76 @@
+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;
+  total?: number;
+}
+
+export type LableValue = {
+  label: string;
+  value: string | number;
+  [key: string]: any;
+};
+
+export interface RemoteSelectProps extends Omit<SelectProps<any>, "options" | "children"> {
+  /**
+   * @title 请求函数
+   * */
+  loadOptions: (
+    search: string,
+    pagination: ScrollPagination,
+  ) => Promise<{ list: Person[]; pagination: ScrollPagination }>;
+  /**
+   * @title 自定义列表项
+   * */
+  renderItem?: (item: Person) => React.ReactNode;
+  /**
+   * @title 分页参数
+   * */
+  initialPagination?: Partial<ScrollPagination>;
+  /**
+   * @title antd头像组件props
+   * */
+  avataProps?: AvatarProps;
+  /**
+   * @title 下拉框值
+   * */
+  value: LableValue[] | LableValue;
+  /**
+   * @title 列表项内部展示的字段内容
+   * */
+  listItemConfigs?: { label: string; key: string }[];
+  /**
+   * @title 动态disabledKey
+   * */
+  disabledKey?: string;
+  /**
+   * @title 动态labelKey
+   * */
+  labelKey?: string;
+  /**
+   * @title 动态valueKey
+   * */
+  valueKey?: string;
+  /**
+   * @title disabledStyle
+   * */
+  disabledStyle?: (disabled: boolean) => React.CSSProperties;
+  /**
+   * @title 自定义列表项中的样式
+   * */
+  customItemNode?: React.ReactNode;
+}