@lingxiteam/ebe-utils 0.0.10 → 0.0.12

package/lib/pcpublic/src/components/common/PreviewFile/utils.ts

@@ -0,0 +1,90 @@
+export const PREVIEW_MODE = {
+  PPT: 'IMG_PPT',
+  IMG: 'IMG',
+  PDF: 'PDF',
+  ZIP: 'ZIP',
+  VIDEO: 'VIDEO',
+  TXT: 'TXT',
+  IFRAME: 'IFRAME',
+  HTML: 'HTML',
+};
+// 是否可以放大缩小
+export const CAN_SCALE = [
+  PREVIEW_MODE.PPT,
+  PREVIEW_MODE.IMG,
+  PREVIEW_MODE.PDF,
+  PREVIEW_MODE.ZIP,
+];
+// 先判断是否可以进行本地预览，若不可以则调用后端接口判断
+// 部分格式后端可能不支持预览，或者本地可以直接预览的，不调用查询接口，直接转换预览
+export const LOCAL_PREVIEW = [
+  {
+    previewMode: PREVIEW_MODE.VIDEO,
+    mimeTypeReg: /^video\/(mp4|webm|ogg|x-ms-wmv|quicktime)$/i,
+    suffix: /\.(mp4|mov)$/i,
+    // 平台定制预览是否支持跨域地址
+    cors: true,
+  },
+  {
+    previewMode: PREVIEW_MODE.IMG,
+    mimeTypeReg: /^image\/(bmp|gif|jpeg|jpg|png|svg\+xml|tiff|webp|x-icon)$/i,
+    suffix: /\.(jpg|jpeg|png|svg|heic|ico|bmp|tiff|tif)$/i,
+    cors: true,
+  },
+  {
+    previewMode: PREVIEW_MODE.PDF,
+    mimeTypeReg: /^application\/pdf$/i,
+    suffix: /\.pdf$/i,
+  },
+  {
+    previewMode: PREVIEW_MODE.TXT,
+    mimeTypeReg:
+      /^(application|text)\/(json|javascript|x-javascript|plain|x-sh)$/i,
+    suffix: /\.(less|scss|lock|ts|txt|js|jsx)$/i,
+  },
+  {
+    previewMode: PREVIEW_MODE.ZIP,
+    mimeTypeReg: /^(application\/zip)$/i,
+    suffix: /\.zip$/i,
+    cors: true,
+  },
+];
+
+export const parseFileInfo = (
+  fileInfo: {
+    fileId?: string;
+    [key: string]: any;
+  },
+  serverFileInfo: {
+    previewMode: string;
+    fileId?: string;
+    [key: string]: any;
+  },
+) => {
+  if (!fileInfo) return fileInfo;
+  const { previewMode } = serverFileInfo || {};
+  const newFileInfo = { ...(serverFileInfo || {}), ...fileInfo };
+  switch (previewMode) {
+    case PREVIEW_MODE.PPT: {
+      if (
+        newFileInfo?.previewMode === PREVIEW_MODE.PPT &&
+        newFileInfo?.fileIdList.length > 0
+      ) {
+        newFileInfo.totalPage = newFileInfo?.fileIdList.length;
+      }
+      break;
+    }
+    default: {
+      // 部分类型如doc，docx，服务端处理后会返回转换后的文件ID
+      if (!serverFileInfo?.serverFileId && serverFileInfo?.fileId) {
+        newFileInfo.serverFileId = serverFileInfo?.fileId;
+      }
+      break;
+    }
+  }
+  return newFileInfo;
+};
+
+// 判断是否是网络地址，是的话不调用后端接口预览
+export const isUrlFormat = (id: string) =>
+  /^https?:\/\/[^\s/$.?#].[^\s]*$/i.test(id);

package/lib/pcpublic/src/components/pcfactory/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "@lingxiteam/pcfactory",
+  "version": "3.7.1"
+}

package/lib/pcpublic/src/components/pcfactory/src/Audio/index.tsx

@@ -146,16 +146,16 @@ const Audio: React.FC<MyAudioProps> = forwardRef((props, ref) => {
     if (streamType === 'fileCode') {
       // 选择的文件资源
       if (fileCode) {
-        try {
-          (async () => {
+        (async () => {
+          try {
             const url = await engineApis?.service?.getAppFileUrlByFileCode(
               fileCode,
             );
             setAudioUrl(url);
-          })();
-        } catch (e) {
-          console.error(`${getLocale?.('Audio.warning')}:${e}`);
-        }
+          } catch (e) {
+            console.error(`${getLocale?.('Audio.warning')}:${e}`);
+          }
+        })();
       } else {
         setAudioUrl('');
       }

package/lib/pcpublic/src/components/pcfactory/src/Cascader/index.tsx

@@ -7,6 +7,8 @@ import {
   useCommonImperativeHandle,
   useListenProps,
 } from '../utils';
+import EmptyComp from '../utils/Empty';
+import { useLocale } from '../utils/hooks/useLocale';
 import { renderCommonList } from '../utils/renderReadOnly';
 
 const CASCADER_WRAPPER_CLASSNAME = 'ued-cascader-wrap';
@@ -74,6 +76,7 @@ export interface MyCascaderProps {
   tipSize?: string; // 文字提示
   tipWidth?: string; // 提示自定义的宽度
   tipHeight?: string; // 提示自定义的高度
+  getEngineApis?: any;
 }
 
 const prefixCls = 'cascader';
@@ -153,8 +156,13 @@ const MyCascader: React.FC<MyCascaderProps> = forwardRef((props, ref) => {
     tipSize,
     tipWidth,
     tipHeight,
+    getEngineApis,
     ...restProps
   } = props;
+  const engineApis = getEngineApis?.() || {};
+
+  const { dataState } = engineApis;
+  const { getLocale } = useLocale(engineApis);
 
   const customStyle = restProps.style || {};
   const dropdownClassName = `dropdownClassName_${compId}`;
@@ -342,6 +350,13 @@ const MyCascader: React.FC<MyCascaderProps> = forwardRef((props, ref) => {
         style={restCusStyles}
         multiple={multiple}
         displayRender={renderDisplay}
+        notFoundContent={
+          <EmptyComp
+            getLocale={getLocale}
+            dataState={dataState}
+            clsName="pcfactory-empty-small"
+          />
+        }
         showSearch={
           showSearch
             ? {

package/lib/pcpublic/src/components/pcfactory/src/Checkbox/index.tsx

@@ -119,7 +119,7 @@ const MyCheckbox = React.forwardRef<any, MyCheckboxProps>((props, ref) => {
       ref={formFieldsRef}
       rules={finalRules}
       handleFormValue={(value) => {
-        if (value === 'false') {
+        if (String(value).trim() === 'false') {
           return false;
         }
         return value;
@@ -127,7 +127,7 @@ const MyCheckbox = React.forwardRef<any, MyCheckboxProps>((props, ref) => {
     >
       <CheckboxItem
         {...rProps}
-        value={value === 'false' ? false : value}
+        value={String(value).trim() === 'false' ? false : value}
         onChange={(e) => {
           if (onChange) {
             onChange(e.target.checked);

package/lib/pcpublic/src/components/pcfactory/src/DynamicDataContainer/index.tsx

@@ -0,0 +1,301 @@
+import {
+  DynamicDataFieldItem,
+  DynamicDataType,
+  LingxiForwardRef,
+} from '@lingxiteam/types';
+import { Form, FormInstance, Spin } from 'antd';
+import {
+  CSSProperties,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { DynamicDataContext, DynamicDataProvider } from '../utils';
+import { useDynamicDataContainer } from './useDynamicDataContainer';
+
+type RuleParameter = {
+  paramId: string;
+  valueCode?: string;
+  originValueCode?: string;
+};
+export interface DynamicDataContainerProps {
+  className: string;
+  style: CSSProperties;
+  'data-compid'?: string;
+  engineRule?: Array<Array<RuleParameter>>;
+  name: string;
+  scene?: 'edit' | 'readonly';
+  visible?: boolean;
+  boxSpace?: string;
+
+  /**
+   * 编码
+   */
+  dynamicCode: string;
+  onValuesChange?: (
+    formCode: string,
+    changedFieldName: string,
+    changedFieldValue: any,
+    allValues: Record<string, Record<string, any>>,
+  ) => void;
+}
+
+const DynamicDataContainer = LingxiForwardRef<any, DynamicDataContainerProps>(
+  (props, ref) => {
+    const {
+      className,
+      getEngineApis,
+      style = {},
+      engineRule,
+      $$componentItem,
+      name,
+      onValuesChange,
+      dynamicCode,
+      boxSpace,
+    } = props || {};
+    const engineApis = getEngineApis?.() || {};
+    const [loading, setLoading] = useState<boolean>(false);
+    const { service, dynamicDataUtils, renderDynamicPage } = engineApis;
+    const { dynamicData2DSL, diffChange } = dynamicDataUtils || {};
+    const formsRef = useRef<
+      Record<
+        string,
+        {
+          form: FormInstance;
+          validateFormAndScroll?: () => Promise<any>;
+          getFieldsValue?: FormInstance['getFieldsValue'];
+          setFieldsValue?: (values: any, refs: Record<string, any>) => void;
+          resetFields?: FormInstance['resetFields'];
+          setDisabled?: (v: boolean) => void;
+          setReadOnly?: (v: boolean) => void;
+        }
+      >
+    >({});
+    const [pageData, setPageData] = useState<any>();
+    const dynamicHelperRef = useRef<ReturnType<typeof dynamicData2DSL>>();
+
+    const { dynamicPageRef, staticAttrKeys } = useDynamicDataContainer({
+      dynamicHelper: dynamicHelperRef.current,
+    });
+
+    const getDynamicData = async (
+      rules: DynamicDataContainerProps['engineRule'],
+    ) => {
+      try {
+        setLoading(true);
+        if (rules && rules?.length) {
+          const res = await service.batchMatchDynamicData({
+            terminalType: 'pc',
+            findDataDetail: true,
+            paramGroupList: rules,
+          });
+          if (res && typeof dynamicData2DSL === 'function') {
+            const dataHelper = dynamicData2DSL(
+              res as DynamicDataType[],
+              { uid: $$componentItem.uid, name },
+              (
+                DSLCore,
+                dynamicData: DynamicDataType | DynamicDataFieldItem,
+              ) => {
+                if ('dataId' in dynamicData) {
+                  const node = DSLCore?.query?.(`Card_${dynamicData.dataId}`);
+                  if (node && boxSpace) {
+                    node?.setStyle?.({
+                      margin: `0 0 ${boxSpace} 0`,
+                    });
+                  }
+                }
+              },
+            );
+            setPageData(dataHelper.pageDSL);
+            dynamicHelperRef.current = dataHelper;
+          }
+        }
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    useEffect(() => {
+      getDynamicData(engineRule);
+    }, [engineRule]);
+
+    const getDynamicFormValue = () => {
+      const allValues: Record<string, any> = {};
+      if (formsRef.current) {
+        Object.keys(formsRef.current).forEach((formCode) => {
+          const form = formsRef.current[formCode] || {};
+          allValues[formCode] = form?.getFieldsValue?.();
+        });
+      }
+      return allValues;
+    };
+
+    const resetFields = () => {
+      if (formsRef.current) {
+        const beforeData = getDynamicFormValue();
+        Object.keys(formsRef.current).forEach((formCode) => {
+          const form = formsRef.current[formCode] || {};
+          form?.resetFields?.();
+        });
+        const updateData = getDynamicFormValue();
+        const { event } = dynamicHelperRef.current || {};
+        diffChange(beforeData, updateData, (diff) => {
+          // 执行事件处理变更联动
+          event?.eval(diff.formCode, diff.changeFieldName);
+        });
+      }
+    };
+
+    const setFieldsValue = (
+      assignData: Record<string, unknown>,
+      format: boolean = true,
+    ) => {
+      let formalFormData = assignData;
+      const { assign2FormData } = dynamicHelperRef.current || {};
+      if (format) {
+        // 解析赋值数据
+        formalFormData = assign2FormData?.(assignData) || {};
+      }
+
+      const beforeData = getDynamicFormValue();
+      if (formsRef.current) {
+        Object.keys(formsRef.current).forEach((formCode) => {
+          const form = formsRef.current[formCode] || {};
+          form?.setFieldsValue?.(
+            formalFormData[formCode] || {},
+            dynamicPageRef?.current?.sandboxContext?.refs,
+          );
+        });
+      }
+      const updateData = getDynamicFormValue();
+      const { event } = dynamicHelperRef.current || {};
+
+      diffChange(beforeData, updateData, (diff) => {
+        // 执行事件处理变更联动
+        event?.eval(diff.formCode, diff.changeFieldName);
+      });
+    };
+
+    useImperativeHandle(ref, () => ({
+      formCode: dynamicCode,
+      // 加载动态数据
+      setRules: (newRules: DynamicDataContainerProps['engineRule']) => {
+        return getDynamicData(newRules);
+      },
+      // 获取动态数据表单转换协议后的值
+      getFieldsValue: () => {
+        const allValues = getDynamicFormValue();
+        const { formData2Retrieve } = dynamicHelperRef.current || {};
+        return formData2Retrieve?.(allValues) || allValues;
+      },
+      // 获取动态数据表单原始值
+      getOriginValue: () => {
+        return getDynamicFormValue();
+      },
+
+      resetFields,
+      // 校验表单并取值
+      validateFormAndScroll: async () => {
+        const allValues: Record<string, any> = {};
+        if (formsRef.current) {
+          const validatePromiseList = Object.keys(formsRef.current).map(
+            (formCode) => {
+              const form = formsRef.current[formCode] || {};
+              return form?.validateFormAndScroll?.().then((res: any) => {
+                allValues[formCode] = res;
+              });
+            },
+          );
+          await Promise.all(validatePromiseList);
+          const { formData2Retrieve } = dynamicHelperRef.current || {};
+          return formData2Retrieve?.(allValues) || allValues;
+        }
+        return undefined;
+      },
+      setFieldsValue: (assignData: Record<string, unknown>) => {
+        return setFieldsValue(assignData, true);
+      },
+    }));
+
+    useEffect(() => {
+      if (formsRef.current) {
+        Object.keys(formsRef.current).forEach((key) => {
+          const form = formsRef.current[key];
+          if (form?.setReadOnly) {
+            form.setReadOnly(props.scene === 'readonly');
+          }
+        });
+      }
+    }, [props.scene]);
+
+    const providerValue: DynamicDataContext = useMemo(() => {
+      return {
+        onFormChange: (formName, changedFieldName, changedFieldValue) => {
+          const { formData2Retrieve, event } = dynamicHelperRef.current || {};
+          const allValues = getDynamicFormValue();
+          event?.eval(formName, changedFieldName);
+          if (typeof onValuesChange === 'function') {
+            onValuesChange(
+              formName,
+              changedFieldName,
+              changedFieldValue,
+              formData2Retrieve?.(allValues) || allValues,
+            );
+          }
+        },
+        _innerDynamicDataContainer: true,
+        get formsRefMap() {
+          return formsRef.current;
+        },
+        updateFormChildRef: (formCode, formRef) => {
+          if (props.scene === 'readonly') {
+            // 只读时每次上报设置表单控件为只读状态
+            formRef?.setReadOnly(props?.scene === 'readonly');
+          }
+          formsRef.current[formCode] = formRef;
+        },
+
+        form: {
+          getFieldsValue: () => getDynamicFormValue(),
+          resetFields,
+          setFieldsValue: (assignData: Record<string, unknown>) => {
+            return setFieldsValue(assignData, false);
+          },
+
+          useWatch: (formCode: string, fieldCode: string) => {
+            return Form.useWatch(fieldCode, formsRef.current[formCode]?.form);
+          },
+        },
+      };
+    }, [props.scene]);
+
+    const dynamicStyle = {
+      ...(style || {}),
+      display: props?.visible ? undefined : 'none',
+    };
+
+    return (
+      <div
+        className={className}
+        data-compid={props?.['data-compid']}
+        style={dynamicStyle}
+      >
+        <Spin spinning={loading}>
+          <DynamicDataProvider value={providerValue}>
+            {pageData &&
+              renderDynamicPage(
+                pageData,
+                { uid: $$componentItem.uid },
+                { ref: dynamicPageRef, staticAttrKeys },
+              )}
+          </DynamicDataProvider>
+        </Spin>
+      </div>
+    );
+  },
+);
+
+export default DynamicDataContainer;

package/lib/pcpublic/src/components/pcfactory/src/DynamicDataContainer/useDynamicDataContainer.ts

@@ -0,0 +1,27 @@
+import { useEffect, useMemo, useRef } from 'react';
+
+export const useDynamicDataContainer = ({
+  dynamicHelper,
+}: {
+  dynamicHelper?: any;
+}) => {
+  const dynamicPageRef = useRef<any>(null);
+
+  useEffect(() => {
+    dynamicHelper?.updateSandboxContext(
+      () => dynamicPageRef.current?.sandboxContext,
+    );
+  }, [dynamicHelper, dynamicPageRef.current]);
+
+  const staticAttrKeys = useMemo(() => {
+    if (dynamicHelper?.event) {
+      return dynamicHelper?.event?.staticAttrKeys || [];
+    }
+    return [];
+  }, [dynamicHelper]);
+
+  return {
+    dynamicPageRef,
+    staticAttrKeys,
+  };
+};

package/lib/pcpublic/src/components/pcfactory/src/Form/Form.tsx

@@ -481,6 +481,7 @@ const Form = LingxiForwardRef<any, FormProps>((props, ref) => {
       uploadChildRelation,
       preproccessSetFormValues,
       colSpace,
+      formCode: formCode || $$componentItem?.id,
     }),
     [
       form,

package/lib/pcpublic/src/components/pcfactory/src/GridView/GridView.tsx

@@ -10,8 +10,8 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { IconCheckSvg, IconNormalCheckSvg } from '../../../../utils/svgImage';
 import { useListenProps } from '../utils';
+import { IconCheckSvg, IconNormalCheckSvg } from '../utils/common';
 
 const basicStyle = { backgroundColor: '#fff' };
 

package/lib/pcpublic/src/components/pcfactory/src/Input/index.tsx

@@ -90,7 +90,7 @@ const INPUT_WRAPPER_CLASSNAME = 'ued-input-wrap';
 
 const WrapperInput: React.FC<WrapperInputProps> = ({ children }) =>
   React.cloneElement(children, {
-    className: `${INPUT_WRAPPER_CLASSNAME}`,
+    className: `${INPUT_WRAPPER_CLASSNAME} ${children?.props?.className || ''}`,
   });
 const Input = LingxiForwardRef<any, MyInputProps>((props, ref) => {
   const {

package/lib/pcpublic/src/components/pcfactory/src/LoopList/index.tsx

@@ -7,7 +7,7 @@ import React, {
   useImperativeHandle,
   useMemo,
 } from 'react';
-import { IconCheckSvg, IconNormalCheckSvg } from '../../../../utils/svgImage';
+import { IconCheckSvg, IconNormalCheckSvg } from '../utils/common';
 import useBackgroundStyle from '../View/useBackgroundStyle';
 
 const basicStyle = { backgroundColor: '#fff' };

package/lib/pcpublic/src/components/pcfactory/src/ModalSelect/index.tsx

@@ -375,7 +375,7 @@ const ModalSelect = LingxiForwardRef<any, MyModalSelectProps>((props, ref) => {
   };
   const lastValue: any = useMemo(() => {
     if (options?.length) {
-      return options[options?.length - 1] && options[options?.length - 1];
+      return options[options?.length - 1];
     }
     return {};
   }, [options]);

package/lib/pcpublic/src/components/pcfactory/src/PictureVerifyCode/index.tsx

@@ -26,18 +26,18 @@ const PictureVerifyCode: React.FC<PictureVerifyCodeProps> = forwardRef(
     const getPicVerifyCode = () => {
       const newTimestamp = new Date().getTime();
       if (digit && newTimestamp) {
-        try {
-          (async () => {
+        (async () => {
+          try {
             const params = {
               validateCodeCount: `${digit}`,
               t: `${newTimestamp}`,
             };
             const url = await engineApis.getValidateCodePicture(params);
             setImgSrc(url);
-          })();
-        } catch (e) {
-          console.log(e);
-        }
+          } catch (e) {
+            console.log(e);
+          }
+        })();
       }
     };
     useEffect(() => {

package/lib/pcpublic/src/components/pcfactory/src/QuillEditor/index.tsx

@@ -1,6 +1,7 @@
 import { LingxiForwardRef } from '@lingxiteam/types';
 import { useRef } from 'react';
 import {
+  filterHtmlNode,
   FormFields,
   getFieldsProps,
   useCommonImperativeHandle,
@@ -21,6 +22,16 @@ const QuillEditor = LingxiForwardRef<unknown, any>((props, ref) => {
       disabled={disabled as any}
       readOnly={readOnly}
       rules={finalRules}
+      render={(val: string) => {
+        const newVal = filterHtmlNode(val);
+        return (
+          <span
+            className="ued-input-readonly"
+            // eslint-disable-next-line react/no-danger
+            dangerouslySetInnerHTML={{ __html: newVal ?? '--' }}
+          />
+        );
+      }}
     >
       <QuillEditorLoad
         {...props}

package/lib/pcpublic/src/components/pcfactory/src/RemoteComponent/components/ReactRender.tsx

@@ -3,6 +3,7 @@ import { createRequires } from '@paciolan/remote-component/dist/createRequires';
 import { createUseRemoteComponent } from '@paciolan/remote-component/dist/hooks/useRemoteComponent';
 import { Empty, Spin } from 'antd';
 import { useDynamicData } from '../../utils';
+import { useForm } from '../../utils/formUtils/FormContext';
 import RemoteCompConfig from '../remote-component.config';
 
 export const getUseRemoteComponent = (config: any) => {
@@ -14,6 +15,7 @@ export interface MyRemoteComponentProps {
   url?: string;
   customProps: any;
   useRemoteComponent?: any; // 自定义组件调用依赖的模块，可由调用方传入
+  forwardRef?: any;
 }
 
 // const prefixCls = 'remoteComponent';
@@ -25,6 +27,7 @@ const RemoteComponent: LingXiFC<MyRemoteComponentProps> = (props) => {
   const useRemoteComponentInst = props.useRemoteComponent || useRemoteComponent;
 
   const dynamicDataContext = useDynamicData();
+  const formContext = useForm();
 
   const [loading, err, Component] = useRemoteComponentInst(url);
 
@@ -47,7 +50,8 @@ const RemoteComponent: LingXiFC<MyRemoteComponentProps> = (props) => {
     <Component
       {...restProps}
       {...customProps}
-      $lxApi={{ form: dynamicDataContext.form }}
+      $lxApi={{ form: dynamicDataContext.form, formCode: formContext.formCode }}
+      ref={props.forwardRef}
     />
   );
 };