@hzab/form-render 1.6.11 → 1.6.12

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+# @hzab/form-render@1.6.12
+
+feat: PersonnelSelect组件优化传值方式，支持复数据传入、返回
+
 # @hzab/form-render@1.6.11
 
 feat: editor添加配置merage

package/package.json

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

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;