@lingxiteam/ebe-utils 0.2.4 → 0.2.6

package/lib/h5public/src/components/factory/src/DformFile/FormFile.tsx

@@ -26,17 +26,7 @@ import zipIcon from './assets/zip.png';
 import './index.less';
 
 const prefixCls = 'lcdp-dformfile';
-const IMG_TYPE = [
-  'png',
-  'svg',
-  'jpeg',
-  'jpg',
-  'heic',
-  'ico',
-  'bmp',
-  'tiff',
-  'tif',
-];
+const IMG_TYPE = ['png', 'svg', 'jpeg', 'jpg', 'heic', 'ico', 'bmp', 'tiff', 'tif'];
 export interface FormFileProps extends UseFormItemProps {
   onUpload?: (file: any) => void;
   error?: any;
@@ -70,6 +60,8 @@ export interface FormFileProps extends UseFormItemProps {
   btnText?: string;
   iconPosition?: string;
   uploadBtnStyle?: string;
+  // 是否支持选择多张图片
+  multiple?: boolean;
 
   /**
    * @deprecated 不知道啥作用
@@ -85,6 +77,7 @@ export interface FormFileProps extends UseFormItemProps {
   upload: (values: any) => void;
 
   valueStyle: Record<string, string>;
+  synchronousDeletion?: boolean;
 }
 
 const FormFile = LingxiForwardRef<any, FormFileProps>((props, ref) => {
@@ -126,29 +119,16 @@ const FormFile = LingxiForwardRef<any, FormFileProps>((props, ref) => {
     // acceptExtension,
     getEngineApis,
     $$componentItem,
+    multiple = true,
+    synchronousDeletion = false,
     ...restProps
   } = props;
   const engineApis = getEngineApis?.() || {
-    getLocale: (_: string, place?: string, kv?: Record<string, string>) =>
-      place,
+    getLocale: (_: string, place?: string, kv?: Record<string, string>) => place,
   };
   const { getLocale } = engineApis;
-  const {
-    api = '/app/file/uploadSingleFile',
-    _source,
-    _serviceId,
-  } = columns || {};
-  const {
-    disabled,
-    val: defaultVal,
-    onInputChange,
-    getRules,
-    required,
-    readOnly,
-    visible,
-    isForm,
-    form,
-  } = useFormItem(ref, props);
+  const { api = '/app/file/uploadSingleFile', _source, _serviceId } = columns || {};
+  const { disabled, val: defaultVal, onInputChange, getRules, required, readOnly, visible, isForm, form } = useFormItem(ref, props);
   const galleryRef = useRef<any>();
   const uploadResultRef = React.useRef<any>();
   const [imgSrc, setImgSrc] = useState('');
@@ -163,7 +143,7 @@ const FormFile = LingxiForwardRef<any, FormFileProps>((props, ref) => {
         return defaultVal;
       },
     }),
-    [defaultVal, isForm, fieldProps, form],
+    [defaultVal, isForm, fieldProps, form]
   );
 
   useEffect(() => {
@@ -209,71 +189,23 @@ const FormFile = LingxiForwardRef<any, FormFileProps>((props, ref) => {
     });
   const isLimitSize = (currentSize: number) => {
     if (singleFileMinSize && convertToBytes(singleFileMinSize) > currentSize) {
-      return true;
+      return {
+        message: engineApis?.getLocale('DformFile.fileSizeLessThan', `小于文件设置上传大小:${singleFileMinSize}`, { size: singleFileMinSize }),
+      };
     }
     if (singleFileMaxSize && convertToBytes(singleFileMaxSize) < currentSize) {
-      return true;
+      return {
+        message: engineApis?.getLocale('DformFile.fileSizeExceeded', `超过文件设置上传大小:${singleFileMinSize}`, { size: singleFileMaxSize }),
+      };
     }
     return false;
   };
   const onUploadFile = async (files: any) => {
-    const acceptStr = fileProps?.accept || acceptData();
-    let acceptArray: string | any[] = [];
-    if (acceptStr) {
-      acceptArray = acceptStr.split(',')?.map((s: string) => s.toLowerCase());
-    }
-    let isLimit = false;
-    let isAccept = true;
-    let fileType = '';
-    files?.forEach((item: any) => {
-      if (isLimitSize(item?.size)) {
-        isLimit = true;
-        return;
-      }
-      if (acceptArray && acceptArray.length && item?.name) {
-        const { name } = item;
-        const lastPointPos = name.lastIndexOf('.');
-        if (lastPointPos !== -1) {
-          const start = lastPointPos;
-          const postFix = name?.slice(start)?.toLowerCase(); // 不区分大小
-          if (!acceptArray.includes(postFix)) {
-            isAccept = false;
-            fileType = postFix;
-          }
-        }
-      }
-    });
-    if (!isAccept) {
-      Toast.show({
-        icon: 'fail',
-        content: engineApis?.getLocale(
-          'DformFile.noAllow',
-          `不允许上传文件类型 ${fileType}`,
-          { type: fileType },
-        ),
-      });
-      return;
-    }
-    if (isLimit) {
-      Toast.show({
-        icon: 'fail',
-        content: engineApis?.getLocale(
-          'DformFile.fileSizeExceeded',
-          '超过文件设置上传大小!',
-        ),
-      });
-      return;
-    }
     const awaitAllPromise: ((file: any) => Promise<unknown>)[] = [];
     (files || []).forEach(() => {
       awaitAllPromise.push(onUpload);
     });
     try {
-      Toast.show({
-        icon: 'loading',
-        content: `${getLocale('loadingText', '加载中')}...`,
-        duration: 0,
-      });
       await uploadResultRef.current.queue(awaitAllPromise, files);
       const values = uploadResultRef.current.values();
 
@@ -287,9 +219,7 @@ const FormFile = LingxiForwardRef<any, FormFileProps>((props, ref) => {
       Toast.clear();
       Toast.show({
         icon: 'fail',
-        content:
-          error?.message ||
-          getLocale('DformFile.somePicFailed', '部分图片上传失败'),
+        content: error?.message || getLocale('DformFile.somePicFailed', '部分图片上传失败'),
       });
       console.log(error);
     }
@@ -301,6 +231,13 @@ const FormFile = LingxiForwardRef<any, FormFileProps>((props, ref) => {
       if (props.onDelete) {
         props.onDelete(value);
       }
+      if (synchronousDeletion && value?.fileId) {
+        try {
+          engineApis?.service?.deleteFileInfoById(value.fileId);
+        } catch (error) {
+          console.log(error);
+        }
+      }
     }
   };
   const transValue = (temValue: any) => {
@@ -323,12 +260,7 @@ const FormFile = LingxiForwardRef<any, FormFileProps>((props, ref) => {
         if (temValue.url.startsWith('http')) {
           return temValue.url;
         }
-        return join(
-          window.location.origin,
-          window.location.pathname,
-          '../',
-          temValue.url,
-        );
+        return join(window.location.origin, window.location.pathname, '../', temValue.url);
       }
     }
 
@@ -357,15 +289,9 @@ const FormFile = LingxiForwardRef<any, FormFileProps>((props, ref) => {
   const isImage = (item: any) => {
     if (
       item?.fileType?.startsWith('image') ||
-      IMG_TYPE.includes(
-        item?.file_path_in_server?.split('.')?.[1]?.toLocaleLowerCase() || '',
-      ) ||
-      IMG_TYPE.includes(
-        item.filePathInServer?.split('.')?.[1]?.toLocaleLowerCase() || '',
-      ) ||
-      IMG_TYPE.includes(
-        item.fileName?.split('.')?.[1]?.toLocaleLowerCase() || '',
-      ) ||
+      IMG_TYPE.includes(item?.file_path_in_server?.split('.')?.[1]?.toLocaleLowerCase() || '') ||
+      IMG_TYPE.includes(item.filePathInServer?.split('.')?.[1]?.toLocaleLowerCase() || '') ||
+      IMG_TYPE.includes(item.fileName?.split('.')?.[1]?.toLocaleLowerCase() || '') ||
       IMG_TYPE.includes(item.url?.split('.')?.[1]?.toLocaleLowerCase() || '')
     ) {
       return true;
@@ -425,13 +351,7 @@ const FormFile = LingxiForwardRef<any, FormFileProps>((props, ref) => {
       return (
         <span className={`${prefixCls}-card-icon`}>
           {/** @ts-ignore */}
-          <Icon
-            type="plus"
-            theme="outlined"
-            getEngineApis={getEngineApis}
-            name="card-icon"
-            $$componentItem={$$componentItem}
-          />
+          <Icon type="plus" theme="outlined" getEngineApis={getEngineApis} name="card-icon" $$componentItem={$$componentItem} />
         </span>
       );
     }
@@ -476,18 +396,10 @@ const FormFile = LingxiForwardRef<any, FormFileProps>((props, ref) => {
         icon = iconMap[suffix];
       }
     }
-    return (
-      <img
-        src={icon ?? defaultIcon}
-        alt=""
-        className={`${prefixCls}-list-style-img-item-file-icon`}
-      />
-    );
+    return <img src={icon ?? defaultIcon} alt="" className={`${prefixCls}-list-style-img-item-file-icon`} />;
   };
   const rightBtn = (btnList: any) => {
-    const showBtnList = (btnList || []).filter(
-      (btn: { checked: any }) => btn.checked,
-    );
+    const showBtnList = (btnList || []).filter((btn: { checked: any }) => btn.checked);
     if (showBtnList.length === 1) {
       const { checked, btnText, onButtonClick } = showBtnList[0];
       return checked ? (
@@ -513,15 +425,8 @@ const FormFile = LingxiForwardRef<any, FormFileProps>((props, ref) => {
       };
     });
     return (
-      <Popover.Menu
-        actions={actions}
-        placement="bottom"
-        trigger="click"
-        className={`${prefixCls}-popover`}
-      >
-        <span className={`${prefixCls}-list-style-img-item-more-btn`}>
-          {getLocale?.('more', '更多')}
-        </span>
+      <Popover.Menu actions={actions} placement="bottom" trigger="click" className={`${prefixCls}-popover`}>
+        <span className={`${prefixCls}-list-style-img-item-more-btn`}>{getLocale?.('more', '更多')}</span>
       </Popover.Menu>
     );
   };
@@ -595,11 +500,7 @@ const FormFile = LingxiForwardRef<any, FormFileProps>((props, ref) => {
         return (
           <div className={`${prefixCls}-list-style-text-item`}>
             <div className={`${prefixCls}-list-style-text-item-left-item`}>
-              <img
-                src={fileIcon}
-                alt=""
-                className={`${prefixCls}-list-style-text-item-file-icon`}
-              />
+              <img src={fileIcon} alt="" className={`${prefixCls}-list-style-text-item-file-icon`} />
               <Ellipsis
                 direction="middle"
                 content={fileNameField}
@@ -615,17 +516,11 @@ const FormFile = LingxiForwardRef<any, FormFileProps>((props, ref) => {
             </div>
             <div className={`${prefixCls}-list-style-text-item-right-icon`}>
               {btnList && btnList.length
-                ? btnList.map((item) => {
-                    const { checked, icon, onButtonClick } = item;
-                    const iconView = checked
-                      ? renderIcon(
-                          icon,
-                          `${prefixCls}-line-icon`,
-                          onButtonClick,
-                        )
-                      : null;
-                    return iconView;
-                  })
+                ? btnList.map(item => {
+                  const { checked, icon, onButtonClick } = item;
+                  const iconView = checked ? renderIcon(icon, `${prefixCls}-line-icon`, onButtonClick) : null;
+                  return iconView;
+                })
                 : null}
             </div>
           </div>
@@ -649,10 +544,7 @@ const FormFile = LingxiForwardRef<any, FormFileProps>((props, ref) => {
                   }}
                 />
                 <div className={`${prefixCls}-list-style-img-item-upload-time`}>
-                  {getLocale('DformFile.updateTime', '上传时间')}:{' '}
-                  <span>
-                    {dateToFormatter('YYYY-MM-DD HH:mm:ss', new Date())}
-                  </span>
+                  {getLocale('DformFile.updateTime', '上传时间')}: <span>{dateToFormatter('YYYY-MM-DD HH:mm:ss', new Date())}</span>
                 </div>
               </div>
             </div>
@@ -714,14 +606,7 @@ const FormFile = LingxiForwardRef<any, FormFileProps>((props, ref) => {
       );
     }
     return null;
-  }, [
-    props.btnText,
-    iconPosition,
-    uploadStyle,
-    showBtnIcon,
-    uploadBtnStyle,
-    btnIcon,
-  ]);
+  }, [props.btnText, iconPosition, uploadStyle, showBtnIcon, uploadBtnStyle, btnIcon]);
 
   const fileOtherProps: any = {};
   if (uploadStyle === 'button' && showBtnIcon) {
@@ -736,17 +621,70 @@ const FormFile = LingxiForwardRef<any, FormFileProps>((props, ref) => {
           uploadStyle={uploadStyle}
           {...fileOtherProps}
           extra={renderExtra}
-          titleExtension={
-            hasTitleIcon === 'hasIcon'
-              ? renderIcon(titleIcon, `${prefixCls}-icon`, null)
-              : null
-          }
+          titleExtension={hasTitleIcon === 'hasIcon' ? renderIcon(titleIcon, `${prefixCls}-icon`, null) : null}
           value={val}
           rules={getRules()}
           cardIcon={cardIcon}
           itemRender={itemRender}
           alias={alias}
           required={required}
+          beforeUpload={(files: any[]) => {
+            const currenLength = val?.length || 0;
+            if (typeof numberLimit === 'number' && numberLimit > 0 && files.length + currenLength > numberLimit) {
+              Toast.show(`最多选择 ${numberLimit} 个文件，你多选了 ${files.length + currenLength - numberLimit} 个`);
+              return null;
+            }
+            // 判断文件类型和是否超过大小
+            const acceptStr = fileProps?.accept || acceptData();
+            let acceptArray: string | any[] = [];
+            if (acceptStr) {
+              acceptArray = acceptStr.split(',')?.map((s: string) => s.toLowerCase());
+            }
+            let isLimit: boolean | { message: string } = false;
+            let isAccept = true;
+            let fileType = '';
+            Object.keys(files).forEach((index: any) => {
+              const item = files[index];
+              const temisLimit = isLimitSize(item?.size);
+              if (typeof temisLimit === 'object') {
+                isLimit = temisLimit;
+                return;
+              }
+              if (acceptArray && acceptArray.length && item?.name) {
+                const { name } = item;
+                const lastPointPos = name.lastIndexOf('.');
+                if (lastPointPos !== -1) {
+                  const start = lastPointPos;
+                  const postFix = name?.slice(start)?.toLowerCase(); // 不区分大小
+                  if (!acceptArray.includes(postFix)) {
+                    isAccept = false;
+                    fileType = postFix;
+                  }
+                }
+              }
+            });
+            if (!isAccept) {
+              Toast.show({
+                icon: 'fail',
+                content: engineApis?.getLocale('DformFile.noAllow', `不允许上传文件类型 ${fileType}`, { type: fileType }),
+              });
+              return null;
+            }
+            if (typeof isLimit === 'object') {
+              Toast.show({
+                icon: 'fail',
+                // @ts-ignore
+                content: isLimit.message,
+              });
+              return null;
+            }
+            Toast.show({
+              icon: 'loading',
+              content: `${getLocale('loadingText', '加载中')}...`,
+              duration: 0,
+            });
+            return true;
+          }}
           positionType="vertical"
           upload={onUploadFile}
           disabled={disabled}
@@ -758,21 +696,16 @@ const FormFile = LingxiForwardRef<any, FormFileProps>((props, ref) => {
           fileProps={{
             ...fileProps,
             accept: fileProps?.accept || acceptData(),
+            multiple,
           }}
           readonly={readOnly}
-          getLocale={(
-            t: string,
-            tempValue: Record<string, any> | undefined,
-          ) => {
+          getLocale={(t: string, tempValue: Record<string, any> | undefined) => {
             return engineApis?.getLocale(`DformFile.${t}`, '', tempValue);
           }}
         />
       </DFormWrapper>
       {imageVisible && (
-        <div
-          className={`${prefixCls}-img-close`}
-          onClick={() => setImageVisibleVisible(false)}
-        >
+        <div className={`${prefixCls}-img-close`} onClick={() => setImageVisibleVisible(false)}>
           <img src={closeIcon} />
         </div>
       )}

package/lib/h5public/src/components/factory/src/DformFile/index.tsx

@@ -25,11 +25,7 @@ const MyDformFile = LingxiForwardRef<any, MyDformFileProps>((props, ref) => {
   return (
     <FormItem>
       {/* 统一由AddressPicker组件的hidden校验 */}
-      <Form.DFormField
-        name={fieldProps || fieldName}
-        initialValue={defaultValue}
-        params={{ formFlag: true, hidden: true }}
-      >
+      <Form.DFormField name={fieldProps || fieldName} initialValue={defaultValue} params={{ formFlag: true, hidden: true }}>
         <FormFile {...props} ref={ref} />
       </Form.DFormField>
     </FormItem>

package/lib/h5public/src/components/factory/src/DformFile/transformProps.tsx

@@ -6,8 +6,7 @@ interface Props {
 }
 
 export default function transformProps(props: Props) {
-  const { basicStatus, fieldName, value, defaultValue, name, ...restProps } =
-    props;
+  const { basicStatus, fieldName, value, defaultValue, name, ...restProps } = props;
   const newProps: Record<string, any> = {
     ...(restProps as any),
     fieldProps: fieldName,