@cqsjjb/jjb-react-admin-component 3.1.3 → 3.2.0-beta.0

package/Editor/index.ts

@@ -0,0 +1,57 @@
+// @ts-ignore
+import * as React from 'react';
+
+interface EditorProps {
+  // 边框 默认-true 如果为false 则不显示边框
+  bordered?: boolean;
+  // 边框样式 默认-solid
+  borderStyle?: string;
+  // 边框颜色 默认-#e8e8e8
+  borderColor?: string;
+  // 边框宽度 默认-1
+  borderWidth?: number;
+  // 边框圆角 默认-2
+  borderRadius?: number;
+  // 内容
+  value: string;
+  // 模式 默认-default
+  mode?: 'default' | 'simple';
+  // 高度 默认-300px
+  height?: number;
+  // 是否禁用 默认-false
+  disabled?: boolean;
+  // 上传地址 默认-${window.process.env.app.API_HOST}/attachment/files/upload-speed-simple
+  uploadUrl?: string;
+  // 上传文件名 默认-file
+  uploadFileName?: string;
+  // 图片上传大小 默认-5MB 最大5MB
+  uploadImageFileSize?: number;
+  // 视频上传大小 默认-50MB 最大50MB
+  uploadVideoFileSize?: number;
+  // 上传头 默认-{}
+  uploadHeaders?: Record<string, string>;
+  // 自定义上传 默认-空
+  uploadCustomRequest?: (file: File) => Promise<string>;
+  // 占位符 默认-“请输入...”
+  placeholder?: string;
+  // 失去焦点 默认-空
+  onBlur?: () => void;
+  // 获得焦点 默认-空
+  onFocus?: () => void;
+  // 内容变化 默认-空
+  onChange?: (value: string) => void;
+}
+
+interface EditorFC extends React.FC<EditorProps> {
+    ref: React.RefObject<{
+        // 获取编辑器实例
+        getEditorInstance: () => any;
+        // 手动获取html
+        getHtml: () => string;
+        // 手动设置html
+        setHtml: (html: string) => void;
+    }>;
+}
+
+declare const Editor: EditorFC;
+export default Editor;

package/ErrorBoundary/index.d.ts

@@ -1,12 +1,9 @@
-// @ts-ignore
 import * as React from 'react';
-import { ComponentProps } from '../types';
 
-interface ErrorBoundaryProps extends ComponentProps {
+interface ErrorBoundaryProps {
+    children: React.ReactNode;
 }
 
-interface ErrorBoundaryFc extends React.FC<ErrorBoundaryProps> {
-}
+declare const ErrorBoundary: React.FC<ErrorBoundaryProps>;
 
-declare const ErrorBoundary: ErrorBoundaryFc;
 export default ErrorBoundary;

package/ErrorBoundary/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Result, Tooltip, Button } from 'antd';
+import { Result } from 'antd';
 export default class ErrorBoundary extends React.Component {
   state = {
     hasError: false,
@@ -17,7 +17,7 @@ export default class ErrorBoundary extends React.Component {
     if (this.state.hasError) {
       return /*#__PURE__*/React.createElement(Result, {
         status: "error",
-        title: "\u5E94\u7528\u8FD0\u884C\u5F02\u5E38",
+        title: "\u62B1\u6B49\uFF0C\u5E94\u7528\u5185\u90E8\u53D1\u751F\u5F02\u5E38\u9519\u8BEF\u3002",
         subTitle: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, this.state.errorInfo), /*#__PURE__*/React.createElement("div", {
           style: {
             width: 700,
@@ -27,13 +27,7 @@ export default class ErrorBoundary extends React.Component {
             textAlign: 'left',
             whiteSpace: 'pre-line'
           }
-        }, this.state.errorStack)),
-        extra: /*#__PURE__*/React.createElement(Tooltip, {
-          title: "\u82E5\u5237\u65B0\u4EFB\u7136\u65E0\u6CD5\u89E3\u51B3\uFF0C\u8BF7\u8054\u7CFB\u6280\u672F\u4EBA\u5458\u89E3\u51B3"
-        }, /*#__PURE__*/React.createElement(Button, {
-          type: "primary",
-          onClick: () => window.location.reload()
-        }, "\u5237\u65B0\u91CD\u8BD5"))
+        }, this.state.errorStack))
       });
     }
     return this.props.children;

package/FileUploader/index.d.ts

@@ -0,0 +1,56 @@
+// @ts-ignore
+import * as React from 'react';
+// @ts-ignore
+import { ButtonProps } from 'antd';
+// @ts-ignore
+import { AxiosResponse } from 'axios'
+
+export interface FileUploaderProps<T> {
+  // 上传文件大小 单位KB 默认-5120
+  size?: number;
+  // 版本 v1-才俊java v2-杨飞java 默认-v2
+  version?: 'v1' | 'v2';
+  // 组件内部按钮属性-Ant.Button
+  buttonProps?: ButtonProps;
+  // Http上传携带其他数据
+  data?: Record<string, any>;
+  // 输入数据
+  value?: T;
+  // 限制文件上传类型 参考MIME类型
+  accept?: string;
+  // 请求接口
+  action: string;
+  // 预览已上传的资源
+  preview?: boolean;
+  // 配置请求头
+  headers?: Record<string, any>;
+  // 最多上传数 multiple 为true 有效 默认-99
+  maxCount?: number;
+  // 启用文件多选 默认-false
+  multiple?: boolean;
+  // 启用/禁用 默认-false
+  disabled?: boolean;
+  // 自定义上传文件字段 默认-file
+  fieldName?: string;
+  // 显示删除图标 默认-true
+  showDelete?: boolean;
+  // 自定义请求 覆盖默认请求
+  customRequest?: (res: AxiosResponse) => void;
+  // 上传前验证文件大小 默认-空
+  onBeforeUploadVerifySize?: (fileSize: number, maxSize: number) => Promise<void>;
+  // 上传前验证文件类型
+  onBeforeUploadVerifyAccept?: (fileType: string, accept: string) => Promise<void>;
+  // 输出
+  onChange?: (e: T) => void;
+}
+
+export interface FileUploaderFC extends React.FC<FileUploaderProps<string | { readonly fileId: string; readonly fileUrl: string; }>> {
+    ref?: React.Ref<Record<string, any>>;
+    children?: React.ReactNode;
+}
+
+declare const FileUploader: FileUploaderFC;
+export default FileUploader;
+
+export function getValueProps(value: any): { value: { fileUrl: any } | undefined };
+export function getValueFromEvent(event: any): any;

package/FileUploader/index.js

@@ -0,0 +1,385 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import MD5 from 'spark-md5';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Tooltip, Button, message } from 'antd';
+import { DeleteOutlined, PaperClipOutlined } from '@ant-design/icons';
+import { getAppKey, getToken, isHttpUrl, isVersion1, isVersion2 } from '../tools/index.js';
+import { tools } from '@cqsjjb/jjb-common-lib';
+import './index.less';
+const {
+  toObject,
+  isPromise,
+  isFunction,
+  parseObject
+} = tools;
+const prefixCls = window.process?.env?.app?.antd['ant-prefix'] || 'ant';
+class FileUploader extends React.Component {
+  state = {
+    loading: false
+  };
+  inputFile = /*#__PURE__*/React.createRef();
+
+  /**
+   * @description http配置
+   * @returns {{headers: object, fieldName: string, data: object, action: string, url: string}}
+   */
+  get httpConfig() {
+    const {
+      data,
+      action,
+      headers,
+      fieldName
+    } = this.props;
+    const {
+      API_HOST
+    } = window.process.env.app;
+    return {
+      url: isHttpUrl(action) ? action : `${API_HOST}${action}`,
+      data,
+      action,
+      headers: {
+        ...headers,
+        token: getToken(),
+        appKey: getAppKey()
+      },
+      fieldName
+    };
+  }
+
+  /**
+   * @description 填充值
+   * @returns {string[]}
+   */
+  get value() {
+    const {
+      value
+    } = this.props;
+    return Array.isArray(value) ? value : value ? [value] : [];
+  }
+
+  /**
+   * @description 获取禁用状态
+   * @return {boolean}
+   */
+  get disabled() {
+    const {
+      multiple,
+      maxCount,
+      disabled
+    } = this.props;
+    if (disabled) {
+      return disabled;
+    }
+    if (!multiple && this.value.length) {
+      return true;
+    }
+    if (multiple && this.value.length === maxCount) {
+      return true;
+    }
+  }
+
+  /**
+   * @description 验证文件类型
+   * @param fileType {string}
+   * @param accept {string}
+   * @returns {Promise<never>|Promise<void>}
+   */
+  verifyFileAccept(fileType, accept) {
+    const {
+      onBeforeUploadVerifyAccept
+    } = this.props;
+    if (onBeforeUploadVerifyAccept) {
+      const fn = onBeforeUploadVerifyAccept(fileType, accept);
+      if (fn instanceof Promise) {
+        return fn;
+      } else {
+        return Promise.reject('onBeforeUploadVerifyAccept 应该返回Promise.');
+      }
+    } else {
+      if (accept !== '*') {
+        const acceptSplit = accept.split(',').filter(value => !!value);
+        if (!acceptSplit.includes(fileType)) {
+          message.error(`上传文件格式错误，支持${acceptSplit.join('、')}`);
+          return Promise.reject();
+        } else {
+          return Promise.resolve();
+        }
+      } else {
+        return Promise.resolve();
+      }
+    }
+  }
+
+  /**
+   * @description 验证文件大小
+   * @param fileSize {number}
+   * @param maxSize {number}
+   * @returns {Promise<never>|Promise<void>}
+   */
+  verifyFileSize(fileSize, maxSize) {
+    const {
+      onBeforeUploadVerifySize
+    } = this.props;
+    if (onBeforeUploadVerifySize) {
+      const fn = onBeforeUploadVerifySize(fileSize, maxSize);
+      if (fn instanceof Promise) {
+        return fn;
+      } else {
+        return Promise.reject('onBeforeUploadVerifySize 应该返回Promise.');
+      }
+    } else {
+      if (fileSize / 1024 > maxSize) {
+        message.error(`上传文件大小超过最大值(${maxSize / 1024}MB)，请重新选择`);
+        return Promise.reject();
+      } else {
+        return Promise.resolve();
+      }
+    }
+  }
+
+  /**
+   * @description 获取版本
+   * @return {string}
+   */
+  get version() {
+    return this.props.version;
+  }
+
+  /**
+   * @description 发起上传请求
+   * @param file {File}
+   * @returns {Promise<{url: string, fileName: string, respDesc: string}>}
+   */
+  onFormRequest(file) {
+    const {
+      customRequest
+    } = this.props;
+    return new Promise((resolve, reject) => {
+      const xhr = new XMLHttpRequest();
+      const md5 = new MD5();
+      const form = new FormData();
+      //
+      const fn = () => this.setState({
+        loading: true
+      }, () => {
+        xhr.open('POST', this.httpConfig.url);
+        Object.keys(this.httpConfig.headers).forEach(key => xhr.setRequestHeader(key, this.httpConfig.headers[key]));
+        xhr.onreadystatechange = () => {
+          if (xhr.readyState === 4 && xhr.status === 200) {
+            this.setState({
+              loading: false
+            }, () => {
+              const res = parseObject(xhr.responseText);
+              if (isFunction(customRequest)) {
+                const fn = customRequest(res);
+                if (isPromise(fn)) {
+                  fn.then(value => resolve({
+                    url: value
+                  }));
+                }
+              } else {
+                if (res.respCode && res.respCode === '0000' || res.success) {
+                  const result = toObject(res.data);
+                  message.success('上传成功！');
+                  resolve(result);
+                } else {
+                  message.error(res.respDesc || res.errMessage || '未知错误，上传失败，请检查！');
+                  reject(res);
+                }
+              }
+            });
+          }
+        };
+        form.append(this.httpConfig.fieldName, file);
+        Object.keys(this.httpConfig.data).forEach(key => form.append(key, this.httpConfig.data[key]));
+        xhr.send(form);
+      });
+      if (isVersion2(this.version)) {
+        const read = new FileReader();
+        read.onload = e => {
+          md5.appendBinary(e.target.result);
+          form.append('md5', md5.end());
+          fn();
+        };
+        read.readAsDataURL(file);
+      } else {
+        fn();
+      }
+    });
+  }
+
+  /**
+   * @description 回调
+   * @param value {string}
+   */
+  onChange(value) {
+    const {
+      onChange
+    } = this.props;
+    onChange && onChange(value || undefined);
+  }
+
+  /**
+   * @description 删除
+   * @param sup {number}
+   */
+  onDelete(sup) {
+    this.onChange(this.props.multiple ? this.value.filter((_, sub) => sub !== sup) : undefined);
+  }
+
+  /**
+   * @description 上传
+   * @param target {{files: FileList, value: any}}
+   */
+  onUpload({
+    target
+  }) {
+    const file = target.files[0];
+    const {
+      size: fileSize,
+      type: fileType
+    } = file;
+    const {
+      accept,
+      multiple,
+      size: maxSize
+    } = this.props;
+    this.verifyFileAccept(fileType, accept).then(() => this.verifyFileSize(fileSize, maxSize).then(() => this.onFormRequest(file).then(res => {
+      const data = isVersion1(this.version) ? res.url : {
+        fileId: res.fileId || res.url,
+        fileUrl: res.fileUrl || res.fileName
+      };
+      this.onChange(multiple ? [...this.value, data] : data);
+    })));
+    target.value = null;
+  }
+  render() {
+    const {
+      accept,
+      preview,
+      showDelete,
+      buttonProps,
+      // ---------
+      children
+    } = this.props;
+    const {
+      loading
+    } = this.state;
+    return /*#__PURE__*/React.createElement("div", {
+      className: `${prefixCls}_file-uploader_`
+    }, /*#__PURE__*/React.createElement(Button, _extends({}, buttonProps, {
+      loading: loading,
+      disabled: this.disabled,
+      className: `${prefixCls}_file-uploader-select_`,
+      onClick: () => this.inputFile.current.click()
+    }), /*#__PURE__*/React.createElement("input", {
+      ref: this.inputFile,
+      type: "file",
+      style: {
+        display: 'none'
+      },
+      accept: accept,
+      disabled: this.disabled,
+      onChange: e => this.onUpload(e)
+    }), /*#__PURE__*/React.createElement("span", null, children)), this.value.map((value, index) => {
+      const $value = this.version === 'v1' ? value : value.fileUrl;
+      return /*#__PURE__*/React.createElement("div", {
+        key: index,
+        className: `${prefixCls}-upload-list-text-container`
+      }, /*#__PURE__*/React.createElement("div", {
+        className: `${prefixCls}-upload-list-item ${prefixCls}-upload-list-item-list-type-text`
+      }, /*#__PURE__*/React.createElement("div", {
+        className: `${prefixCls}-upload-list-item-info`
+      }, /*#__PURE__*/React.createElement("span", {
+        className: `${prefixCls}-upload-span`
+      }, /*#__PURE__*/React.createElement("div", {
+        className: `${prefixCls}-upload-text-icon`
+      }, /*#__PURE__*/React.createElement(PaperClipOutlined, null)), /*#__PURE__*/React.createElement("span", {
+        style: {
+          paddingRight: 22
+        },
+        className: `${prefixCls}-upload-list-item-name`
+      }, preview ? /*#__PURE__*/React.createElement("a", {
+        href: $value,
+        target: "_blank"
+      }, $value) : $value), showDelete && /*#__PURE__*/React.createElement("span", {
+        className: `${prefixCls}-upload-list-item-card-actions`
+      }, /*#__PURE__*/React.createElement(Tooltip, {
+        title: "\u5220\u9664",
+        placement: "left"
+      }, /*#__PURE__*/React.createElement(DeleteOutlined, {
+        onClick: () => this.onDelete(index)
+      })))))));
+    }));
+  }
+}
+FileUploader.defaultProps = {
+  size: 5120,
+  data: {},
+  accept: '*',
+  headers: {},
+  version: 'v2',
+  preview: false,
+  maxCount: 99,
+  buttonProps: {
+    icon: undefined,
+    size: 'middle',
+    type: 'default',
+    block: false,
+    shape: 'default',
+    ghost: false,
+    danger: false
+  },
+  disabled: false,
+  multiple: false,
+  fieldName: 'file',
+  showDelete: true
+};
+FileUploader.propTypes = {
+  // 版本 v1旧版 / v2新版
+  version: PropTypes.string,
+  // 上传资源文件大小 默认5MB
+  size: PropTypes.number,
+  // 按钮图标
+  buttonProps: PropTypes.object,
+  // http上传携带的其他数据 默认{}
+  data: PropTypes.object,
+  // 填充值 默认undefined
+  value: PropTypes.any,
+  // 上传资源类型
+  accept: PropTypes.string,
+  // http上传接口
+  action: PropTypes.string.isRequired,
+  // 预览 默认false
+  preview: PropTypes.bool,
+  // http请求头配置 默认{}
+  headers: PropTypes.object,
+  // 最大上传数 multiple模式下有效 默认最大上传数99
+  maxCount: PropTypes.any,
+  // 开启多个文件上传 默认false
+  multiple: PropTypes.bool,
+  // 是否禁用上传 默认false
+  disabled: PropTypes.bool,
+  // 上传字段 默认ossFile
+  fieldName: PropTypes.string,
+  // 显示删除按钮 默认true
+  showDelete: PropTypes.bool,
+  // 数据回调
+  onChange: PropTypes.func,
+  // 上传之前验证资源大小回调
+  onBeforeUploadVerifySize: PropTypes.func,
+  // 上传之前验证资源类型回调
+  onBeforeUploadVerifyAccept: PropTypes.func,
+  // 可以自定义自己的上传实现
+  customRequest: PropTypes.func
+};
+export default FileUploader;
+export const getValueProps = value => ({
+  value: value ? {
+    fileUrl: value
+  } : undefined
+});
+export const getValueFromEvent = file => {
+  return file?.fileUrl;
+};