@lingxiteam/ebe-utils 0.0.1

package/lib/public/src/utils/uid.ts

@@ -0,0 +1,33 @@
+// 循环容器id和当前id的分隔符
+export const idSeparator = '@@@';
+
+// 当前组件id和itemId的分隔符
+export const itemIdSeparator = '&&&';
+
+// 循环容器组件之间的分割区分
+export const fatherSeparator = '---';
+
+/**
+ * 获取uid
+ * @param loopId 循环容器的id
+ * @param itemId
+ * @param id
+ * @returns
+ */
+export const getUid = (loopId: string, itemId: string, id: string) => {
+  if (!loopId) {
+    return id;
+  }
+
+  // 查看父节点是否是已经包含在容器内了
+  const inLoop =
+    loopId.includes(idSeparator) && loopId.includes(itemIdSeparator);
+
+  let finialLoopId = loopId;
+  // 在循环容器内
+  if (inLoop) {
+    finialLoopId = `${loopId}${fatherSeparator}`;
+  }
+
+  return `${finialLoopId}${idSeparator}${id}${itemIdSeparator}${itemId}`;
+};

package/lib/public/src/utils/useComponentHoc.ts

@@ -0,0 +1,96 @@
+import type { Component } from '@lingxiteam/types';
+import { get, isEqual, throttle } from 'lodash';
+import { useEffect } from 'react';
+import { useSetState, useUpdateEffect } from './hooks/index';
+import { useUpdateDeepEffect } from './hooks/useUpdateDeepEffect';
+import { useStateListener } from './StateListener';
+
+const isFunction = (val: unknown): val is Function => typeof val === 'function';
+/**
+ * 同步inputValue数据
+ * @param e 新值
+ * @param preValue 旧值
+ * @param setValue 同步函数
+ */
+const syncInputValue = (
+  e: unknown,
+  preValue: unknown,
+  setValue: (v: unknown) => void,
+) => {
+  if (!isEqual(e, preValue)) {
+    setValue(e);
+    return true;
+  }
+  return false;
+};
+
+export const useComponentHoc = (
+  componentProps: Record<string, any>,
+  context: {
+    renderId: string;
+    config: Component;
+    fieldPropsChange: () => void;
+  },
+) => {
+  const { config, fieldPropsChange, renderId } = context;
+  const { fieldProps } = config;
+
+  const { visible = true, $$componentItem } = componentProps;
+  const propsValue = get(componentProps, fieldProps?.valuePropName || '');
+  const propsTrigger = get(componentProps, fieldProps?.trigger || '');
+
+  const [state, setState] = useSetState<{ visible: boolean; value?: unknown }>(
+    () => ({
+      visible,
+      value: propsValue,
+    }),
+  );
+
+  const compValue = state.value;
+
+  useUpdateEffect(() => {
+    setState({
+      visible,
+    });
+  }, [visible]);
+
+  useStateListener(renderId, $$componentItem?.uid, 'visible', state.visible);
+
+  // 1. 赋默认值
+  useUpdateDeepEffect(() => {
+    // 忽略首次渲染
+    syncInputValue(propsValue, state.value, (v) => setState({ value: v }));
+  }, propsValue);
+
+  // 2. 拦截onChange事件
+  const onChangeHandle = (() => {
+    if (!fieldProps?.trigger) {
+      return undefined;
+    }
+    return throttle((v, ...resetProps) => {
+      const val = v?.target?.[fieldProps?.valuePropName] ?? v;
+      const syncComplete = syncInputValue(val, state.value, (v) =>
+        setState({ value: v }),
+      );
+      if (syncComplete) {
+        if (isFunction(propsTrigger)) {
+          propsTrigger(v, ...resetProps);
+        }
+      }
+    }, 20);
+  })();
+
+  // 3. 每次value变化触发对应事件刷新
+  useEffect(() => {
+    if (fieldProps?.trigger) {
+      fieldPropsChange();
+    }
+  }, [compValue]);
+
+  return {
+    state,
+    setState,
+    onChangeHandle,
+    compValue,
+  };
+};

package/lib/public/src/utils/useSetState.ts

@@ -0,0 +1,26 @@
+import isFunction from 'lodash/isFunction';
+import { useCallback, useState } from 'react';
+
+export type SetState<S extends Record<string, any>> = <K extends keyof S>(
+  state?:
+    | Pick<S, K>
+    | null
+    | ((prevState: Readonly<S>) => Pick<S, K> | S | null),
+) => void;
+
+const useSetState = <S extends Record<string, any>>(
+  initialState?: S | (() => S) | undefined,
+): [S | undefined, SetState<S>] => {
+  const [state, setState] = useState<S | undefined>(initialState);
+
+  const setMergeState = useCallback((patch: any) => {
+    setState((prevState: any) => {
+      const newState = isFunction(patch) ? patch(prevState) : patch;
+      return newState ? { ...prevState, ...newState } : prevState;
+    });
+  }, []);
+
+  return [state, setMergeState];
+};
+
+export default useSetState;

package/lib/public/src/utils/useTool.ts

@@ -0,0 +1,428 @@
+import { useContext } from 'react';
+import { Context } from './Context/context';
+import {
+  getAllForm,
+  getBoframerOwnForms,
+  getBOFramerOwnFormValues,
+  getFieldsValue,
+  getFormByCompId,
+  getOwnFormValues,
+  updateNodeChildren,
+} from './formUtils';
+
+const toBool = (v: string | boolean, defaultValue?: any) => {
+  let val = v;
+  if ([null, undefined].includes(val) && defaultValue !== undefined) {
+    val = defaultValue;
+  }
+
+  if (val === 'true') {
+    return true;
+  }
+  if (val === 'false') {
+    return false;
+  }
+
+  return val;
+};
+
+export interface ToolsContext {
+  addToAwaitQueue: (
+    compId: string,
+    functionName: string,
+    ...args: any[]
+  ) => void;
+}
+
+export const useTool = (refs: Record<string, any>, context: ToolsContext) => {
+  const { refs: renderRefs } = useContext(Context);
+
+  const { addToAwaitQueue } = context;
+
+  const asyncGetValue = (id: string, stateName?: string) => {
+    if (stateName) {
+      return Promise.resolve(refs?.[id]?.[stateName]);
+      // return refs?.[id]?.[stateName];
+    }
+    // return refs?.[id]?.value;
+    return Promise.resolve(refs?.[id]?.value);
+  };
+
+  const getValue = (id: string, stateName?: string) => {
+    if (stateName) {
+      // @ts-ignore
+      return refs?.[id]?.[stateName];
+    }
+    return refs?.[id]?.value;
+  };
+  const setValue = (ids: Record<string, any> | string, value?: any) => {
+    if (Object.prototype.toString.call(ids) === '[object Object]') {
+      Object.keys(ids).forEach((id) => {
+        if (ids[id]) {
+          refs?.[id]?.setValue(ids[id]);
+        }
+      });
+    } else if (typeof ids === 'string' && value !== undefined) {
+      refs?.[ids]?.setValue(value);
+    } else {
+      console.error('传入的组件ID数据异常');
+    }
+  };
+  const getVisible = (id: string) => {
+    return refs?.[id]?.visible ?? true;
+  };
+
+  const setVisible = (
+    ids: Record<string, boolean | 'toggle'> | string,
+    value?: any,
+  ) => {
+    if (Object.prototype.toString.call(ids) === '[object Object]') {
+      Object.keys(ids).forEach((id) => {
+        // if ([undefined, null].includes(ids[id])) {
+        if (ids[id] === 'toggle') {
+          refs?.[id]?.setVisible(!getVisible(id));
+        } else {
+          refs?.[id]?.setVisible(toBool(ids[id], true));
+        }
+        // }
+      });
+    } else if (typeof ids === 'string' && value !== undefined) {
+      refs?.[ids]?.setVisible(value);
+    } else {
+      console.error('传入的组件ID数据异常');
+    }
+  };
+
+  const getRequired = (id: string) => {
+    return refs?.[id]?.required || false;
+  };
+
+  const setRequired = (
+    ids: Record<string, boolean | 'toggle'> | string,
+    value?: any,
+  ) => {
+    if (Object.prototype.toString.call(ids) === '[object Object]') {
+      Object.keys(ids).forEach((id) => {
+        // if (ids[id]) {
+        if (ids[id] === 'toggle') {
+          refs?.[id]?.setRequired(!getRequired(id));
+        } else {
+          refs?.[id]?.setRequired(toBool(ids[id], false));
+        }
+        // }
+      });
+    } else if (typeof ids === 'string' && value !== undefined) {
+      refs?.[ids]?.setRequired(value);
+    } else {
+      console.error('传入的组件ID数据异常');
+    }
+  };
+
+  const getDisabled = (id: string) => {
+    return refs?.[id]?.disabled || false;
+  };
+
+  const setDisabled = (
+    ids: Record<string, boolean | 'toggle' | 'false' | 'true'> | string,
+    value?: any,
+  ) => {
+    if (Object.prototype.toString.call(ids) === '[object Object]') {
+      Object.keys(ids).forEach((id) => {
+        // if (ids[id]) {
+        if (ids[id] === 'toggle') {
+          refs?.[id]?.setDisabled(!getDisabled(id));
+        } else {
+          refs?.[id]?.setDisabled(toBool(ids[id], false));
+        }
+        // }
+      });
+    } else if (typeof ids === 'string' && value !== undefined) {
+      refs?.[ids]?.setDisabled(value);
+    } else {
+      console.error('传入的组件ID数据异常');
+    }
+  };
+
+  /**
+   * 清空值
+   */
+  const clearValue = (compId: string) => {
+    if (!refs[compId]) {
+      console.warn(`当前组件ID=${compId}不存在，有可能已经删除或未初始化`);
+      return;
+    }
+
+    if (typeof refs[compId]?.clearValue === 'function') {
+      refs[compId]?.clearValue();
+      return;
+    }
+
+    if (typeof refs[compId]?.setValue === 'function') {
+      refs[compId]?.setValue(null);
+      return;
+    }
+    console.error(`当前组件ID=${compId}的clearValue方法不存在`);
+  };
+
+  /**
+   * 调用控件的内部方法
+   * @param comId  id
+   * @param methodName 方法名
+   * @param args 参数
+   */
+  const callComponentMethod = (
+    comId: string,
+    methodName: string,
+    ...args: any[]
+  ) => {
+    if (methodName === 'getValue') {
+      return refs?.[comId]?.value;
+    }
+    if (refs?.[comId]) {
+      return refs?.[comId]?.[methodName]?.(...args);
+    } else {
+      // console.error('组件' + comId + '不存在');
+      addToAwaitQueue(comId, methodName, ...args);
+    }
+  };
+
+  /**
+   * 调用控件的内部方法
+   * @param comId  id
+   * @param methodName 方法名
+   * @param args 参数
+   */
+  const asyncCallComponentMethod = (
+    comId: string,
+    methodName: string,
+    ...args: any[]
+  ) =>
+    new Promise((resolve, reject) => {
+      if (refs?.[comId]) {
+        resolve(refs?.[comId]?.[methodName]?.(...args));
+      } else {
+        // resolve(undefined);
+        resolve(addToAwaitQueue(comId, methodName, ...args));
+        // reject(new Error('组件' + comId + '不存在'));
+      }
+    });
+
+  /**
+   * 获取当前表单值
+   */
+  const getFormValue = async (compId: string): Promise<any> => {
+    // 为了兼容动态渲染引擎，表单不存在 就返回空对象
+    if (!refs[compId]) return Promise.resolve({});
+
+    // 表单的情况 可能是循环容器
+    if (refs[compId].compName === 'Form') {
+      const forms = getFormByCompId(compId, refs);
+      return getFieldsValue(forms, (form) => {
+        return form?.getFieldsValue?.();
+      });
+    }
+
+    if (refs[compId].compName === 'BOFramer') {
+      return getBOFramerOwnFormValues(
+        {
+          refs,
+          renderRefs,
+          compId,
+        },
+        (form) => form?.getFieldsValue?.(),
+      );
+    }
+
+    return Promise.reject(
+      new Error('该组件不支持使用getFormValues获取表单数据'),
+    );
+  };
+
+  /**
+   * 验证并取值
+   * @param compId
+   */
+  const validateForm = async (compId: string): Promise<any> => {
+    // 为了兼容动态渲染引擎，表单不存在 就返回空对象
+    if (!refs[compId]) return Promise.resolve({});
+
+    // 表单的情况 可能是循环容器
+    if (refs[compId].compName === 'Form') {
+      const forms = getFormByCompId(compId, refs);
+      return getFieldsValue(forms, (form) => {
+        return form?.validateFormAndScroll?.();
+      });
+    }
+
+    if (refs[compId].compName === 'BOFramer') {
+      return getBOFramerOwnFormValues(
+        {
+          refs,
+          renderRefs,
+          compId,
+        },
+        (form) => form?.validateFormAndScroll?.(),
+      );
+    }
+    return Promise.reject(
+      new Error('该组件不支持使用getFormValues获取表单数据'),
+    );
+  };
+
+  /**
+   * 重置表单值
+   * @param compId
+   */
+  const resetForm = (compId: string) => {
+    if (!refs[compId]) return;
+    const compName = refs[compId].compName;
+    if (compName === 'BOFramer') {
+      const forms = getBoframerOwnForms({
+        currentRefs: refs,
+        renderRefs,
+        compId,
+      });
+
+      forms.forEach((form) => {
+        form?.resetFields?.();
+      });
+    } else {
+      const forms = getFormByCompId(compId, refs);
+      // 支持循环容器中的表单重置
+      (Array.isArray(forms) ? forms : [forms]).forEach((form) =>
+        form?.resetFields(),
+      );
+    }
+  };
+
+  /**
+   * 设置表单值
+   * @param compId 组件id
+   * @param formValues 表单值
+   */
+  const setFormValues = (
+    compId: string,
+    formValues: Record<string, any> = {},
+  ) => {
+    if (!refs[compId]) return;
+    const compName = refs[compId].compName;
+
+    if (compName === 'BOFramer') {
+      const forms = getBoframerOwnForms({
+        currentRefs: refs,
+        renderRefs,
+        compId,
+      });
+
+      forms.forEach((form) => {
+        form?.setFieldsValue(formValues);
+      });
+    } else {
+      refs[compId]?.setFieldsValue?.(formValues);
+    }
+  };
+
+  /**
+   * 校验并获取所有表单值
+   * 获取页面下的所有表单，包含当前页面下的表单、页面容器下的表单、业务组件下的表单。
+   * 不包含所有弹窗类组件的表单数据
+   */
+  const validateAllForm = () =>
+    getOwnFormValues({ currentRefs: refs, renderRefs }, (form) =>
+      form.validateFormAndScroll?.(false),
+    );
+
+  /**
+   * 获取所有表单值 但不校验
+   * 获取页面下的所有表单，包含当前页面下的表单、页面容器下的表单、业务组件下的表单。
+   * 不包含所有弹窗类组件的表单数据
+   */
+  const getAllFormValues = () =>
+    getOwnFormValues({ currentRefs: refs, renderRefs }, (form) =>
+      form.getFieldsValue?.(),
+    );
+
+  /**
+   * 重置所有表单
+   * 获取页面下的所有表单，包含当前页面下的表单、页面容器下的表单、业务组件下的表单。
+   * 不包含所有弹窗类组件的表单数据
+   */
+  const resetAllForm = () => {
+    const forms = getAllForm({
+      currentRefs: refs,
+      renderRefs,
+    });
+
+    forms.forEach((form) => {
+      form.resetFields();
+    });
+  };
+
+  /**
+   * 获取联动数据值
+   * @param attrDataMap  静态数据
+   * @param aNbr a端值
+   * @param zNbr z端值
+   * @param targetValue 关联值
+   */
+  const getTriggerRelDataSource = (
+    attrDataMap: Record<string, any[]>,
+    aNbr: any,
+    zNbr: any,
+    targetValue?: any,
+  ) => {
+    if (attrDataMap) {
+      // 用于处理联动规则的工具方法
+      // 下拉清空，返回z端数据
+      if (
+        targetValue === undefined ||
+        (Array.isArray(targetValue) && targetValue.length === 0)
+      ) {
+        return attrDataMap?.[zNbr] || [];
+      }
+      const res = attrDataMap?.[aNbr]?.find((i) => {
+        const targetValueArr = Array.isArray(targetValue)
+          ? targetValue[0]
+          : targetValue;
+        return i.value === targetValueArr;
+      });
+      if (res && res.relatedAttrSpecList) {
+        const targetRelRule = res.relatedAttrSpecList.find(
+          (i: any) => i.zattrNbr === zNbr,
+        );
+        return targetRelRule
+          ? targetRelRule.zrelatedAttrValueList.map((o: any) => ({
+              label: o.zattrValueName,
+              value: o.zattrValue,
+            }))
+          : [];
+      }
+      return [];
+    }
+    return undefined;
+  };
+
+  return {
+    getValue,
+    asyncGetValue,
+    setValue,
+    getVisible,
+    setVisible,
+    getRequired,
+    setRequired,
+    callComponentMethod,
+    setDisabled,
+    getDisabled,
+    getFormValue,
+    validateForm,
+    resetForm,
+    clearValue,
+    setFormValues,
+    asyncCallComponentMethod,
+    validateAllForm,
+    getAllFormValues,
+    resetAllForm,
+    updateNodeChildren,
+    getTriggerRelDataSource,
+  };
+};

package/lib/public/tsconfig.json

@@ -0,0 +1,33 @@
+{
+  "extends": "./src/.umi/tsconfig.json",
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "moduleResolution": "node",
+    "importHelpers": false,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "esModuleInterop": true,
+    "sourceMap": true,
+    "baseUrl": "./",
+    "strict": true,
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "allowImportingTsExtensions": true,
+    "paths": {
+      "@/*": ["src/*"],
+      "@@/*": ["src/.umi/*"],
+      "alita/typings": ["src/.umi/typings"]
+    }
+  },
+  "include": [
+    "../../.umirc.ts",
+    "../../.umirc.*.ts",
+    "../../**/*.d.ts",
+    "../../**/*.ts",
+    "../../**/*.tsx"
+  ]
+}

package/lib/public/typings.d.ts

@@ -0,0 +1 @@
+import 'alita/typings';

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@lingxiteam/ebe-utils",
+  "version": "0.0.1",
+  "description": "",
+  "keywords": [],
+  "author": "",
+  "main": "es/index.js",
+  "types": "es/index.d.ts",
+  "bin": {
+    "ebe": "bin/ebe.js"
+  },
+  "files": [
+    "es",
+    "lib"
+  ],
+  "dependencies": {
+    "@babel/parser": "^7.12.12",
+    "@babel/traverse": "^7.12.12",
+    "@babel/types": "^7.12.12",
+    "cac": "^6.7.14",
+    "fs-extra": "9.x",
+    "@lingxiteam/ebe": "0.0.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "npx father build && esno ./scripts/build",
+    "dev": "npx father dev"
+  }
+}