@cqsjjb/jjb-react-admin-component 3.1.4 → 3.2.0-beta.1

package/ImageCropper/index.d.ts

@@ -0,0 +1,55 @@
+import { ReactNode, Ref } from 'react';
+
+interface ImageCropperProps {
+  width?: number; // 宽度，默认400
+  height?: number; // 高度，默认400
+  locked?: boolean; // 是否锁定裁剪框大小，默认false
+  aspect?: number; // 裁剪框纵横比，默认16/9
+  resource: File | string; // 裁剪的资源
+}
+
+interface ToDataURLResult {
+  // md5
+  md5: string;
+  // base64
+  base64: string;
+}
+
+interface ToDataFileResult {
+  // file
+  file: File | null;
+  // md5
+  md5: string | null;
+}
+
+interface ToDataImageInstanceResult {
+  // 资源
+  src: string;
+  // 宽度
+  width: number;
+  // 高度
+  height: number;
+  // 实例
+  instance: HTMLImageElement;
+}
+
+export interface ImageCropperRef {
+  // 转换为dataURL
+  toDataURL: (quality?: number) => ToDataURLResult | null;
+  // 转换为dataFile
+  toDataFile: () => ToDataFileResult;
+  // 转换为blobURL
+  toBlobURL: () => string | null;
+  // 转换为dataImageText
+  toDataImageText: () => string | null;
+  // 转换为dataImageInstance
+  toDataImageInstance: () => Promise<ToDataImageInstanceResult>;
+}
+
+declare const ImageCropper: {
+  (props: ImageCropperProps & { ref?: Ref<ImageCropperRef> }): ReactNode;
+  defaultProps: Partial<ImageCropperProps>;
+  propTypes: any;
+};
+
+export default ImageCropper;

package/ImageCropper/index.js

@@ -0,0 +1,131 @@
+import MD5 from 'spark-md5';
+import React, { useEffect, useRef, useState, forwardRef, useImperativeHandle } from 'react';
+import Cropper from 'react-cropper';
+import PropTypes from 'prop-types';
+import 'cropperjs/dist/cropper.css';
+import { Empty } from 'antd';
+import { tools } from '@cqsjjb/jjb-common-lib';
+import { isHttpUrl } from '../tools/index.js';
+const ImageCropper = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    width,
+    height,
+    aspect,
+    locked,
+    resource
+  } = props;
+  const cropRef = useRef(null);
+  const [src, setSrc] = useState(undefined);
+  console.log('props', locked);
+
+  // 更新 src
+  const onUpdateSrc = () => {
+    if (resource instanceof File) {
+      tools.getFileToBase64(resource).then(setSrc);
+    } else if (/^data:image\/(png|jpg|jpeg);base64/.test(resource) || isHttpUrl(resource)) {
+      setSrc(resource);
+    }
+  };
+
+  // 初始化或资源变化时更新
+  useEffect(() => {
+    onUpdateSrc();
+  }, [resource]);
+
+  // 暴露给父组件的方法
+  useImperativeHandle(ref, () => ({
+    toDataURL: (quality = 1) => {
+      const md5 = new MD5();
+      try {
+        const base64 = cropRef.current.cropper.getCroppedCanvas().toDataURL('image/png', quality);
+        md5.appendBinary(base64);
+        return {
+          md5: md5.end(),
+          base64
+        };
+      } catch (e) {
+        return null;
+      }
+    },
+    toDataFile: () => {
+      try {
+        const {
+          md5,
+          base64
+        } = ref.current.toDataURL();
+        return {
+          md5,
+          file: tools.getBase64ToFile(base64, `${tools.createOnlyKey()}.png`)
+        };
+      } catch (e) {
+        return {
+          file: null,
+          md5: null
+        };
+      }
+    },
+    toBlobURL: () => {
+      try {
+        return window.URL.createObjectURL(ref.current.toDataFile().file);
+      } catch (e) {
+        return null;
+      }
+    },
+    toDataImageText: () => {
+      try {
+        return `<img alt="img" src="${ref.current.toDataURL().base64}"/>`;
+      } catch (e) {
+        return null;
+      }
+    },
+    toDataImageInstance: () => {
+      return new Promise(resolve => {
+        const image = new Image();
+        image.src = ref.current.toDataURL().base64;
+        image.onload = () => resolve({
+          src: image.src,
+          width: image.width,
+          height: image.height,
+          instance: image
+        });
+      });
+    }
+  }));
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      width,
+      height,
+      position: 'relative'
+    }
+  }, src ? /*#__PURE__*/React.createElement(Cropper, {
+    ref: cropRef,
+    src: src,
+    style: {
+      width,
+      height
+    },
+    aspectRatio: aspect,
+    cropBoxResizable: !locked
+  }) : /*#__PURE__*/React.createElement(Empty, {
+    image: Empty.PRESENTED_IMAGE_SIMPLE,
+    style: {
+      margin: 0,
+      paddingTop: (height - 70) / 2 - 40
+    },
+    description: "\u672A\u5BFC\u5165\u56FE\u7247\u8D44\u6E90\uFF0C\u65E0\u6CD5\u88C1\u526A"
+  }));
+});
+ImageCropper.defaultProps = {
+  width: 400,
+  height: 400,
+  aspect: 16 / 9,
+  locked: false
+};
+ImageCropper.propTypes = {
+  width: PropTypes.number,
+  height: PropTypes.number,
+  locked: PropTypes.bool,
+  aspect: PropTypes.number,
+  resource: PropTypes.any.isRequired
+};
+export default ImageCropper;

package/ImageUploader/index.d.ts

@@ -0,0 +1,79 @@
+import React from 'react';
+
+export interface ImageUploaderProps {
+  // 版本 v1-才俊java v2-杨飞java 默认-v2
+  version?: 'v1' | 'v2';
+  // 宽高 默认-50*50
+  wh?: string;
+  // 是否是svg 默认-false
+  svg?: boolean;
+  // 提示文本 默认-点击上传
+  tip?: string;
+  // 大小 单位：KB 默认-5120
+  size?: number;
+  // 额外的数据 默认-{}
+  data?: Record<string, any>;
+  // 值 默认-undefined
+  value?: any;
+  // 组件宽度 默认-120
+  width?: number;
+  // 组件高度 默认-120
+  height?: number;
+  // 请求地址 默认-undefined
+  action: string;
+  // 是否支持预览 默认-true
+  preview?: boolean;
+  // 是否支持裁剪 默认-false
+  cropper?: boolean;
+  // 额外的请求头 默认-{}
+  headers?: Record<string, any>;
+  // 是否禁用 默认-false
+  disabled?: boolean;
+  // 提交的字段名 默认-file
+  fieldName?: string;
+  // 边框样式 默认-dashed
+  borderStyle?: string;
+  // 边框颜色 默认:#d9d9d9
+  borderColor?: string;
+  // 边框宽度 默认-1
+  borderWidth?: number;
+  // 边框圆角 默认-2
+  borderRadius?: number;
+  // 裁剪配置，cropper为true时有效 默认:{}
+  cropperConfig?: {
+    // 宽度 默认-400
+    width?: number;
+    // 高度 默认-400
+    height?: number;
+    // 锁定不可缩放裁剪框 默认-false
+    locked?: boolean;
+    // 纵横比 默认-16 / 9, 若不知如何计算纵横比，可使用tools.calcAspectRadio函数
+    aspect?: number;
+    [key: string]: any;
+  };
+  // 背景颜色 默认-#fafafa
+  backgroundColor?: string;
+  // 自定义请求 默认-undefined
+  customRequest?: (res: {data: any}) => void | Promise<{fileId: string, fileUrl: string}>;
+  // 受控值改变回调 默认-undefined
+  onChange?: (value: any) => void;
+  // 是否支持压缩 默认-false
+  compression?: boolean;
+  // 压缩配置，compression为true时有效 默认-{}
+  compressionConfig?: {
+    // 压缩质量 默认-0.6
+    quality?: number;
+    // 压缩类型 默认-file
+    backType?: 'file' | 'base64';
+    [key: string]: any;
+  };
+  // 是否需要token 默认-true
+  needToken?: boolean;
+}
+
+declare const ImageUploader: React.FC<ImageUploaderProps>;
+
+export default ImageUploader;
+
+export function getValueProps(value: any): { value: { fileUrl: any } | undefined };
+export function getValueFromEvent(event: any): any;

package/ImageUploader/index.js

@@ -0,0 +1,362 @@
+import MD5 from 'spark-md5';
+import React, { useState, useRef, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { tools } from '@cqsjjb/jjb-common-lib';
+import { Button, Col, Image as ImageFunc, Modal, Row, message } from 'antd';
+import { PlusOutlined, EyeOutlined, DeleteOutlined, SyncOutlined, ScissorOutlined } from '@ant-design/icons';
+import ImageCropper from '../ImageCropper';
+import './index.less';
+import { getTenantCode, getToken, getViewAsp, isVersion1, isVersion2, getAppKey, isHttpUrl } from '../tools/index.js';
+const {
+  toObject,
+  isPromise,
+  isFunction,
+  parseObject
+} = tools;
+const prefixCls = window.process?.env?.app?.antd['ant-prefix'] || 'ant';
+const FILE_TYPE = ['image/png', 'image/jpg', 'image/jpeg'];
+const FILE_TYPE_POWER = [...FILE_TYPE, 'image/svg+xml'];
+const ImageUploader = props => {
+  const [loading, setLoading] = useState(false);
+  const [preview, setPreview] = useState(false);
+  const [visible, setVisible] = useState(false);
+  const [resource, setResource] = useState(undefined);
+  const cropperRef = useRef(null);
+  const fileInputRef = useRef(null);
+  const version = props.version;
+  const algorithm = (() => {
+    const value = document.documentElement.style.getPropertyValue('--saas-algorithm');
+    return value ? value === '#FFF' ? 'default' : 'dark' : 'default';
+  })();
+  const onLoadFile = useCallback(file => {
+    const md5 = new MD5();
+    const {
+      svg
+    } = props;
+    return new Promise(resolve => {
+      const reader = new FileReader();
+      reader.onload = e => {
+        if (version === 'v2') md5.appendBinary(e.target.result);
+        const isImage = (svg ? FILE_TYPE_POWER : FILE_TYPE).includes(file.type);
+        if (isImage) {
+          const image = new Image();
+          const base64 = e.target.result;
+          image.src = base64;
+          image.onload = () => {
+            resolve({
+              file,
+              base64,
+              md5: isVersion2(version) ? md5.end() : null,
+              size: file.size,
+              type: file.type,
+              name: file.name,
+              width: image.width,
+              height: image.height
+            });
+          };
+        } else {
+          resolve({
+            file,
+            md5: isVersion2(version) ? md5.end() : null,
+            size: file.size,
+            type: file.type,
+            name: file.name,
+            width: 0,
+            height: 0,
+            base64: undefined
+          });
+        }
+      };
+      reader.readAsDataURL(file);
+    });
+  }, [props, version]);
+  const onCompression = useCallback(data => {
+    const {
+      compressionConfig
+    } = props;
+    return new Promise(resolve => {
+      const URL = window.URL || window.webkitURL;
+      const {
+        quality = 0.8
+      } = toObject(compressionConfig);
+      const img = new Image();
+      const canvas = document.createElement('canvas');
+      const context = canvas.getContext('2d');
+      onLoadFile(data.file).then(res => {
+        img.width = res.width;
+        img.height = res.height;
+        img.src = URL.createObjectURL(data.file);
+        img.onload = () => {
+          img.onload = null;
+          canvas.width = img.width;
+          canvas.height = img.height;
+          context.drawImage(img, 0, 0, img.width, img.height);
+          canvas.toBlob(blob => {
+            const newFile = new File([blob], data.name, {
+              type: blob.type
+            });
+            resolve({
+              ...data,
+              file: newFile,
+              size: newFile.size
+            });
+          }, 'image/png', quality);
+        };
+      });
+    });
+  }, [onLoadFile, props]);
+  const onUploadHttp = useCallback(transfer => {
+    const {
+      API_HOST
+    } = window.process.env.app;
+    const {
+      data,
+      action,
+      headers: $headers,
+      needToken,
+      customRequest,
+      fieldName,
+      onChange
+    } = props;
+    const requestURL = isHttpUrl(action) ? action : `${API_HOST}${action}`;
+    const xhr = new XMLHttpRequest();
+    const form = new FormData();
+    const headers = toObject($headers);
+    headers.appKey = getAppKey();
+    if (needToken) headers.token = getToken();
+    if (isVersion1(version)) headers.tenantCode = getTenantCode();
+    if (isVersion2(version) && transfer.md5) form.append('md5', transfer.md5);
+    setLoading(true);
+    xhr.open('POST', requestURL);
+    Object.keys(headers).forEach(key => xhr.setRequestHeader(key, headers[key]));
+    xhr.onreadystatechange = () => {
+      if (xhr.readyState === 4 && xhr.status === 200) {
+        setLoading(false);
+        const res = parseObject(xhr.responseText);
+        if (isFunction(customRequest)) {
+          const fn = customRequest(res);
+          if (isPromise(fn)) fn.then(value => onChange && onChange(value));
+        } else {
+          const {
+            success,
+            respCode,
+            errMessage
+          } = res;
+          if (respCode === '0000' || success) {
+            const result = toObject(res.data);
+            if (typeof onChange === 'undefined') console.warn('ImageUploader警告:缺少必要的onChange回调,可能无法正确显示图片!');
+            onChange && onChange(isVersion1(version) ? result.url : {
+              fileId: result.fileId || result.url,
+              fileUrl: result.fileUrl || result.fileName
+            });
+            message.success('上传成功！');
+          } else {
+            message.error(errMessage || '未知错误，上传失败，请检查！');
+          }
+        }
+      }
+    };
+    form.append(fieldName, transfer.file);
+    Object.keys(data).forEach(key => form.append(key, data[key]));
+    xhr.send(form);
+  }, [props, version]);
+  const onUpload = useCallback(e => {
+    const target = e.target;
+    const files = target.files;
+    const file = files[0];
+    const {
+      wh,
+      svg,
+      size,
+      cropper,
+      compression
+    } = props;
+    onLoadFile(file).then(load => {
+      const [w, h] = getViewAsp(wh);
+      const fileSize = load.size;
+      const fileType = load.type;
+      if (!(svg ? FILE_TYPE_POWER : FILE_TYPE).includes(fileType)) {
+        message.error(`文件格式错误，不是图片类型，支持.PNG、.JPG、.JPEG${svg ? '、.SVG' : ''}`);
+        target.value = null;
+        return;
+      }
+      if (fileSize / 1024 > size) {
+        message.error(`图片大小超过最大值(${size}KB)，请重新选择`);
+        target.value = null;
+        return;
+      }
+      if (cropper) {
+        setResource(load.file);
+        setVisible(true);
+      } else {
+        if (load.width < w || load.height < h) {
+          message.error(`图片尺寸不能小于${w}x${h}`);
+          target.value = null;
+          return;
+        }
+        if (compression && fileSize / 1024 > 200) {
+          onCompression(load).then(res => onUploadHttp(res));
+          target.value = null;
+          return;
+        }
+        onUploadHttp(load);
+      }
+      target.value = null;
+    });
+  }, [props, onLoadFile, onCompression, onUploadHttp]);
+  const {
+    tip,
+    svg,
+    value,
+    disabled,
+    width,
+    height,
+    cropper,
+    borderStyle,
+    borderColor,
+    borderWidth,
+    borderRadius,
+    backgroundColor,
+    cropperConfig: $cropperConfig,
+    onChange
+  } = props;
+  const cropperConfig = toObject($cropperConfig);
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      width,
+      height,
+      borderStyle,
+      borderWidth,
+      borderColor,
+      borderRadius,
+      backgroundColor
+    },
+    className: `${prefixCls}_image-file-uploader_ ${prefixCls}_image-file-uploader-${algorithm}_`
+  }, value ? /*#__PURE__*/React.createElement("div", {
+    className: `${prefixCls}_image-file-uploader-preview_`
+  }, value && /*#__PURE__*/React.createElement(ImageFunc, {
+    src: version === 'v1' ? value : toObject(value).fileUrl,
+    preview: !disabled ? {
+      visible: preview,
+      onVisibleChange: () => setPreview(false)
+    } : true
+  }), !disabled && /*#__PURE__*/React.createElement("div", {
+    className: `${prefixCls}_image-file-uploader-preview-control_`
+  }, props.preview && /*#__PURE__*/React.createElement(EyeOutlined, {
+    title: "\u9884\u89C8",
+    onClick: () => setPreview(true)
+  }), /*#__PURE__*/React.createElement(DeleteOutlined, {
+    title: "\u5220\u9664",
+    onClick: () => onChange && onChange(undefined)
+  }))) : /*#__PURE__*/React.createElement("label", {
+    className: `${prefixCls}_image-file-uploader-select_`
+  }, loading ? /*#__PURE__*/React.createElement(SyncOutlined, {
+    spin: true
+  }) : /*#__PURE__*/React.createElement(PlusOutlined, null), /*#__PURE__*/React.createElement("div", {
+    style: {
+      maxWidth: width
+    },
+    className: `${prefixCls}_image-file-uploader-select-tip_`
+  }, loading ? '上传中...' : tip), !loading && !disabled && /*#__PURE__*/React.createElement("input", {
+    ref: fileInputRef,
+    type: "file",
+    style: {
+      display: 'none'
+    },
+    accept: `image/png,image/jpg,image/jpeg${svg ? ',image/svg+xml' : ''}`,
+    onChange: onUpload
+  })), cropper && visible && !svg && /*#__PURE__*/React.createElement(Modal, {
+    open: true,
+    title: "\u56FE\u7247\u88C1\u526A",
+    width: (cropperConfig.width || 400) + 48,
+    footer: /*#__PURE__*/React.createElement(Row, {
+      align: "middle",
+      justify: "space-between"
+    }, /*#__PURE__*/React.createElement(Col, {
+      style: {
+        color: 'red'
+      }
+    }, "\u5F53\u524D\u88C1\u526A\u7684\u7EB5\u6A2A\u6BD4\uFF1A16 / ", cropperConfig.aspect ? Math.floor(16 / cropperConfig.aspect) : 9), /*#__PURE__*/React.createElement(Col, null, /*#__PURE__*/React.createElement(Button, {
+      type: "primary",
+      icon: /*#__PURE__*/React.createElement(ScissorOutlined, null),
+      onClick: () => {
+        onUploadHttp(cropperRef.current.toDataFile());
+        setTimeout(() => setVisible(false), 300);
+      }
+    }, "\u786E\u5B9A"))),
+    maskClosable: false,
+    destroyOnClose: false,
+    onCancel: () => setVisible(false)
+  }, /*#__PURE__*/React.createElement(ImageCropper, {
+    ref: cropperRef,
+    width: cropperConfig.width || 400,
+    height: cropperConfig.height || 400,
+    locked: cropperConfig.locked,
+    aspect: cropperConfig.aspect,
+    resource: resource
+  })));
+};
+ImageUploader.defaultProps = {
+  wh: '50*50',
+  tip: '点击上传',
+  svg: false,
+  size: 5120,
+  data: {},
+  width: 120,
+  height: 120,
+  headers: {},
+  preview: true,
+  cropper: false,
+  version: 'v2',
+  disabled: false,
+  fieldName: 'file',
+  borderColor: '#d9d9d9',
+  borderWidth: 1,
+  borderStyle: 'dashed',
+  borderRadius: 2,
+  cropperConfig: {},
+  backgroundColor: '#fafafa',
+  compression: false,
+  compressionConfig: {
+    quality: 0.6,
+    backType: 'file'
+  },
+  needToken: true
+};
+ImageUploader.propTypes = {
+  version: PropTypes.string,
+  wh: PropTypes.string,
+  svg: PropTypes.bool,
+  tip: PropTypes.string,
+  size: PropTypes.number,
+  data: PropTypes.object,
+  value: PropTypes.any,
+  width: PropTypes.number,
+  height: PropTypes.number,
+  action: PropTypes.string.isRequired,
+  preview: PropTypes.bool,
+  cropper: PropTypes.bool,
+  headers: PropTypes.object,
+  disabled: PropTypes.bool,
+  fieldName: PropTypes.string,
+  borderStyle: PropTypes.string,
+  borderColor: PropTypes.string,
+  borderWidth: PropTypes.number,
+  borderRadius: PropTypes.number,
+  cropperConfig: PropTypes.object,
+  backgroundColor: PropTypes.string,
+  customRequest: PropTypes.func,
+  onChange: PropTypes.func,
+  compression: PropTypes.bool,
+  compressionConfig: PropTypes.object,
+  needToken: PropTypes.bool
+};
+export default ImageUploader;
+export const getValueProps = value => ({
+  value: value ? {
+    fileUrl: value
+  } : undefined
+});
+export const getValueFromEvent = file => {
+  return file?.fileUrl;
+};