@hzab/form-render 1.6.17 → 1.6.19

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 };