@hzab/form-render 1.6.8 → 1.6.10

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# @hzab/form-render@1.6.10
+
+feat: 富文本编辑器实例像外暴露
+
+# @hzab/form-render@1.6.9
+
+feat: PersonnelSelect组件
 
 # @hzab/form-render@1.6.8
 

package/package.json

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

package/src/common/formily-utils.ts

@@ -1,13 +1,125 @@
+import _ from "lodash";
+
+export interface ISetTargetLevelValOpt {
+  /**
+   * 相对当前的层级数
+   */
+  level?: number;
+  /**
+   * 目标数据为数组是否使用 push
+   */
+  isArrPush?: boolean;
+}
+
 /**
- * 获取父级的数据对象（包括当前项的对象）
- * { 当前项: xxx, 其他项: lll }
- * @param field
+ * 获取父级的数据（包括当前项的对象）
+ * @param field formily field 对象 const field: any = useField();
  * @returns
  */
 export function getParentValue(field) {
-  let form = field?.parent?.value || field?.value;
-  if (Array.isArray(form)) {
-    form = form[field.index];
+  return getTargetLevelVal(field, -1);
+}
+
+/**
+ * 设置当前 field 同层级数据值。
+ * @param field formily field 对象 const field: any = useField();
+ * @param key 目标 key
+ * @param val 目标值
+ * @example
+ * 如当前的 field name 为 test, 设置同层级 testA
+ * // 初始值：
+ * {
+ *  test: 1
+ * }
+ * // 设置同层级 key 为 testA 的值为 222
+ * setParentValue(field, 'testA', 222);
+ * // 设置结果
+ * {
+ *  test: 1,
+ *  testA: 222
+ * }
+ */
+export function setParentValue(field, key, val) {
+  setTargetLevelVal(field, key, val, { level: -1 });
+}
+
+/**
+ * 获取相对当前层级的数据对象（包括当前项的对象）
+ * @param field formily field 对象 const field: any = useField();
+ * @param key 目标 key
+ * @param val 目标 value
+ * @param level 相对的层级 负数
+ * @returns
+ */
+export function getTargetLevelVal(field, level) {
+  if (typeof field !== "object" || !field.form || !field.path) {
+    console.warn("Warn setCurLevelData: field 入参不是一个正确的 formily field 数据");
+    return;
+  }
+  // 设置目标参数的路径
+  let path = [...field.path.segments];
+  // 层级超出路径长度不进行设置
+  if (Math.abs(level) > path.length) {
+    console.info("Info setCurLevelData: level 层级超出路径长度不进行设置");
+    return;
+  }
+  if (typeof level === "number") {
+    path = path.slice(0, level);
+  }
+  // 设置目标数据
+  return _.get(field.form.values, path.join("."));
+}
+
+/**
+ * 设置相对当前层级的数据对象（包括当前项的对象）
+ * @param field formily field 对象 const field: any = useField();
+ * @param key 目标 key
+ * @param val 目标 value
+ * @param level 相对的层级
+ * @returns
+ */
+export function setTargetLevelVal(
+  field,
+  key,
+  val,
+  opt: ISetTargetLevelValOpt = { level: undefined, isArrPush: false },
+) {
+  if (typeof field !== "object" || !field.form || !field.path) {
+    console.warn("Warn setCurLevelData: field 入参不是一个正确的 formily field 数据");
+    return;
+  }
+  const {
+    /**
+     * 数组是否进行 push 曹组
+     */
+    isArrPush,
+    /**
+     * 相对的层级
+     */
+    level,
+  } = opt || {};
+  // 设置目标参数的路径
+  let path = [...field.path.segments];
+  // 层级超出路径长度不进行设置
+  if (Math.abs(level) > path.length) {
+    console.info("Info setCurLevelData: level 层级超出路径长度不进行设置");
+    return;
+  }
+  if (typeof level === "number") {
+    path = path.slice(0, -Math.abs(level));
+  }
+  const parentPath = path.join(".");
+  const parentType = _.get(field.form.values, path);
+  // 添加目标 key，得到目标完整 path
+  path.push(key);
+  // 克隆 form 数据，用于修改目标数据 （）
+  const data = _.cloneDeep(field.form.values);
+  // 设置目标数据
+  if (isArrPush && Array.isArray(parentType)) {
+    const _d = _.get(data, parentPath);
+    Array.isArray(_d) && _d.push({ [key]: val });
+  } else {
+    _.set(data, path.join("."), val);
   }
-  return form;
+  field.form.setValues(data);
 }

package/src/components/PersonnelSelect/index.less

@@ -0,0 +1,21 @@
+.abt-user-item {
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+
+
+
+  .abt-user-item-info {
+    list-style: none;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    padding-left: 16px;
+
+    .abt-user-item-info__item {
+      & > span:last-of-type {
+        color: #666;
+      }
+    }
+  }
+}

package/src/components/PersonnelSelect/index.module.less

@@ -0,0 +1,33 @@
+.user-select {
+
+  &-option {
+    :global {
+      .ant-select-item-option-content {
+        display: flex;
+      }
+    }
+
+
+    &__avatar {
+      margin-right: 10px;
+    }
+
+    .user-item {
+      display: flex;
+      flex-direction: column;
+
+      &-name {
+        margin-bottom: 4px;
+        color: #000000d9;
+        font-size: 14px;
+        display: flex;
+        align-items: center;
+      }
+
+      &__idCard {
+        color: #00000073;
+        font-size: 14px;
+      }
+    }
+  }
+}

package/src/components/PersonnelSelect/index.tsx

@@ -0,0 +1,248 @@
+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 "./index.less";
+
+const defaultListItemConfigs = [
+  { 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 = {},
+  disabledStyle,
+  customItemNode,
+  ...selectProps
+}) => {
+  const [search, setSearch] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [list, setList] = useState<Person[]>([]);
+  const [pagination, setPagination] = useState<ScrollPagination>({
+    pageNum: 1,
+    pageSize: 10,
+    ...initialPagination,
+  });
+  const selectInstance = useRef<any>(null);
+  const total = useRef(0);
+
+  const debounceLoadData = debounce(async (isScrollLoad = false) => {
+    try {
+      isScrollLoad ? setLoadingMore(true) : setLoading(true);
+
+      const result = await loadOptions(search, {
+        ...pagination,
+        pageNum: isScrollLoad ? pagination.pageNum + 1 : 1,
+      });
+      const { list, pagination: resPagination } = result;
+
+      total.current = resPagination.total;
+
+      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 && list.length <= total.current) {
+      await loadData(true);
+      setPagination((pre) => ({ ...pre, pageNum: pagination.pageNum + 1 }));
+    }
+  };
+
+  const loadData = useCallback(debounceLoadData, [search, pagination, loadOptions]);
+
+  // 处理滚动加载
+  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);
+
+  useEffect(() => {
+    loadData();
+  }, [search]);
+
+  // 处理选项点击事件
+  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;
+  }, [listItemConfigs]);
+
+  // 默认渲染项（增加选中状态和点击处理）
+  const defaultRenderItem = useCallback(
+    (item: Person) => {
+      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={userId} onClick={() => !isDisabled && handleItemClick(item)} style={generateStyle(isDisabled)}>
+          {customItemNode || (
+            <div className="abt-user-item">
+              <div className="abt-user-item-avatar">{avatarComponent}</div>
+              {userInfoContent}
+            </div>
+          )}
+        </List.Item>
+      );
+    },
+    [selectProps.value],
+  );
+
+  // 自定义下拉内容
+  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}
+      showSearch
+      labelInValue
+      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 };

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

package/src/components/RichEditor/index.tsx

@@ -5,8 +5,8 @@ import { IDomEditor, IEditorConfig, IToolbarConfig } from "@wangeditor/editor";
 import { getOssUploadRequest, getOfflineUploadRequest } from "../Upload/common/customRequest";
 import { handlePreviewUrls } from "../Upload/common/OfflineUpload";
 import "./index.less";
-import { Spin, message } from 'antd';
-import { connect, mapProps, observer } from "@formily/react";
+import { Spin, message } from "antd";
+import { connect, mapProps, observer, useField } from "@formily/react";
 
 interface AnyObject {
   [key: string]: any;
@@ -15,18 +15,18 @@ interface AnyObject {
 interface PropsType {
   toolbarConfig?: Partial<IToolbarConfig>;
   editorConfig?: Partial<IEditorConfig>;
-  ossOpt: AnyObject,
-  uploadParams: AnyObject,
-  height: string,
-  ossServerUrl: string,
-  ossUrl: string,
-  offlinePreviewUrl: string,
-  offlineServerUrl: string,
-  value: string,
-  onChange: any,
-  customRequest: any,
-  uploadMode: string,
-  zIndex: number
+  ossOpt: AnyObject;
+  uploadParams: AnyObject;
+  height: string;
+  ossServerUrl: string;
+  ossUrl: string;
+  offlinePreviewUrl: string;
+  offlineServerUrl: string;
+  value: string;
+  onChange: any;
+  customRequest: any;
+  uploadMode: string;
+  zIndex: number;
 }
 
 export const RichEditor = observer(function (props: PropsType, parentRef) {
@@ -44,7 +44,7 @@ export const RichEditor = observer(function (props: PropsType, parentRef) {
     // ossUrl = "https://test-abt.hzabjt.com:18091/api/v1/user/oss/getWebOssConfig",
     ossServerUrl = "/api/v1/user/oss/getWebOssConfig",
     ossUrl = "/api/v1/user/oss/getWebOssConfig",
-    zIndex = 9999
+    zIndex = 9999,
   } = props;
   const isPrivateStore =
     props.uploadParams?.fileAcl === "private" || props.ossOpt?.signatureParams?.fileAcl === "private";
@@ -54,15 +54,16 @@ export const RichEditor = observer(function (props: PropsType, parentRef) {
     getEditorContent,
   }));
 
+  const field = useField<any>();
+
   // editor 实例
   const [editor, setEditor] = useState<IDomEditor | null>(null); // TS 语法
 
   // 编辑器内容
-  const [html, setHtml] = useState<string>('');
+  const [html, setHtml] = useState<string>("");
 
   const [isLoading, setIsLoading] = useState<boolean>(false);
 
-
   const setEditorContent = (content) => {
     setHtml(content);
   };
@@ -71,7 +72,6 @@ export const RichEditor = observer(function (props: PropsType, parentRef) {
     return html;
   };
 
-
   const customUpload = async (file: File, insertFn) => {
     let customRequest = props.customRequest;
     if (uploadMode === "oss") {
@@ -95,15 +95,15 @@ export const RichEditor = observer(function (props: PropsType, parentRef) {
       file,
       onSuccess: (res) => {
         setIsLoading(false);
-        console.log(res)
-        insertFn(res.url, '', '');
+        console.log(res);
+        insertFn(res.url, "", "");
       },
       onError: () => {
         setIsLoading(false);
         message.error(`${file.name} 上传失败`);
-      }
-    })
-  }
+      },
+    });
+  };
 
   const config: Partial<IEditorConfig> = {
     // TS 语法
@@ -111,13 +111,13 @@ export const RichEditor = observer(function (props: PropsType, parentRef) {
     MENU_CONF: {
       uploadImage: {
         // form-data fieldName ，默认值 'wangeditor-uploaded-image'
-        fieldName: 'wangeditor-uploaded-image',
+        fieldName: "wangeditor-uploaded-image",
         // 单个文件的最大体积限制，默认为 2M
         maxFileSize: 1 * 1024 * 1024, // 1M
         // 最多可上传几个文件，默认为 100
         maxNumberOfFiles: 1,
         // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
-        allowedFileTypes: ['image/*'],
+        allowedFileTypes: ["image/*"],
         // 跨域是否传递 cookie ，默认为 false
         withCredentials: false,
         // 超时时间，默认为 10 秒
@@ -126,11 +126,11 @@ export const RichEditor = observer(function (props: PropsType, parentRef) {
       },
       uploadVideo: {
         // form-data fieldName ，默认值 'wangeditor-uploaded-image'
-        fieldName: 'wangeditor-uploaded-video',
+        fieldName: "wangeditor-uploaded-video",
         // 最多可上传几个文件，默认为 100
         maxNumberOfFiles: 1,
         // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
-        allowedFileTypes: ['video/*'],
+        allowedFileTypes: ["video/*"],
         // 跨域是否传递 cookie ，默认为 false
         withCredentials: false,
         customUpload,
@@ -139,12 +139,11 @@ export const RichEditor = observer(function (props: PropsType, parentRef) {
     ...editorConfig,
   };
 
-
   const onEditorChange = (e) => {
     const content = e.getHtml();
     setHtml(content);
     onChange && onChange(content);
-  }
+  };
 
   // 及时销毁 editor ，重要！
   useEffect(() => {
@@ -156,15 +155,17 @@ export const RichEditor = observer(function (props: PropsType, parentRef) {
   }, [editor]);
 
   useEffect(() => {
-    setEditorContent(value)
+    setEditorContent(value);
   }, [value]);
 
   return (
     <>
       <div className="wang-editor-warpper" style={{ zIndex }}>
-        {isLoading && <div className="spin-content">
-          <Spin tip="Loading..." />
-        </div>}
+        {isLoading && (
+          <div className="spin-content">
+            <Spin tip="Loading..." />
+          </div>
+        )}
         <Toolbar
           editor={editor}
           defaultConfig={toolbarConfig}
@@ -174,7 +175,10 @@ export const RichEditor = observer(function (props: PropsType, parentRef) {
         <WangEditor
           defaultConfig={config}
           value={html}
-          onCreated={setEditor}
+          onCreated={(e) => {
+            setEditor(e);
+            field.editor = e;
+          }}
           onChange={(e) => onEditorChange(e)}
           mode="default"
           style={{ height }}
@@ -204,4 +208,3 @@ export default connect(
 );
 
 export const Editor = WangEditor;
-

package/src/components/index.tsx

@@ -5,6 +5,7 @@ export * from "./ArrayTable";
 export * from "./Upload";
 
 export * from "./UserSelect";
+export * from "./PersonnelSelect"
 
 export * from "./TreeCheckbox";
 export * from "./DatePicker";