@cqsjjb/jjb-react-admin-component 3.3.1-beta.6 → 3.3.1-beta.7

package/FileUploader/index.js

@@ -0,0 +1,312 @@
+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 { Tooltip, Button, message } from 'antd';
+import { DeleteOutlined, PaperClipOutlined } from '@ant-design/icons';
+import { getAppKey, getToken, isHttpUrl } 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 = 'file'
+    } = this.props;
+    const {
+      API_HOST
+    } = window.process.env.app;
+    return {
+      url: isHttpUrl(action) ? action : `${API_HOST}${action}`,
+      data,
+      action,
+      headers: {
+        ...tools.toObject(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 = false,
+      maxCount = 99,
+      disabled = false
+    } = 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 发起上传请求
+   * @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);
+      });
+      const read = new FileReader();
+      read.onload = e => {
+        md5.appendBinary(e.target.result);
+        form.append('md5', md5.end());
+        fn();
+      };
+      read.readAsDataURL(file);
+    });
+  }
+
+  /**
+   * @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 = false,
+      size: maxSize = 5120
+    } = this.props;
+    this.verifyFileAccept(fileType, accept).then(() => this.verifyFileSize(fileSize, maxSize).then(() => this.onFormRequest(file).then(res => {
+      const data = {
+        fileId: res.fileId || res.url,
+        fileUrl: res.fileUrl || res.fileName
+      };
+      this.onChange(multiple ? [...this.value, data] : data);
+    })));
+    target.value = null;
+  }
+  render() {
+    const {
+      accept = '*',
+      preview = false,
+      showDelete = true,
+      buttonProps = {},
+      // ---------
+      children
+    } = this.props;
+    const {
+      loading
+    } = this.state;
+    return /*#__PURE__*/React.createElement("div", {
+      className: `${prefixCls}_file-uploader_`
+    }, /*#__PURE__*/React.createElement(Button, _extends({}, tools.toObject(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 = 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)
+      })))))));
+    }));
+  }
+}
+export default FileUploader;
+export const getValueProps = value => ({
+  value: value ? {
+    fileUrl: value
+  } : undefined
+});
+export const getValueFromEvent = file => {
+  return file?.fileUrl;
+};

package/FormilyDescriptions/index.js

@@ -0,0 +1,313 @@
+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 React, { useState, useEffect, Fragment } from 'react';
+import { tools } from '@cqsjjb/jjb-common-lib';
+import { FileOutlined, LinkOutlined } from '@ant-design/icons';
+import { Modal, Descriptions, Empty, Image, Tooltip, Spin, Table, Space, TreeSelect } from 'antd';
+const formilyItemMargin = new Map([['small', 8], ['middle', 12], ['default', 16]]);
+const IS_PDF_REG = /\.pdf$/;
+const IS_VIDEO_REG = /\.(mp4|ogg|mkv|webm)$/;
+export default function FormilyDescriptions({
+  schema,
+  values,
+  ...props
+}) {
+  const [regions, setRegions] = useState([]);
+  useEffect(() => {
+    fetch(`${window.process.env.app.API_HOST}/system/operation/regions`, {
+      headers: {
+        token: sessionStorage.token
+      }
+    }).then(res => res.json()).then(res => {
+      if (res.success) setRegions(res.data);
+    });
+  }, []);
+  const dataSource = tools.getDynamicFormilyFields(schema, values, {
+    regions
+  });
+  if (!dataSource.length) return /*#__PURE__*/React.createElement(Empty, {
+    image: Empty.PRESENTED_IMAGE_SIMPLE
+  });
+  return /*#__PURE__*/React.createElement(DescriptionsRender, _extends({
+    dataSource: dataSource
+  }, props));
+}
+export function DescriptionsRender({
+  dataSource,
+  size = 'default',
+  ...props
+}) {
+  return dataSource.map((item, index) => {
+    const isLast = index === dataSource.length - 1;
+    const marginBottom = isLast ? 0 : formilyItemMargin.get(size);
+    const items = item.fromComponentEnum === 'GRID_FORM' ? item.children.map((child, childIndex) => ({
+      key: childIndex,
+      span: child.formType === 'Table' ? props.column : 1,
+      label: child.name,
+      children: /*#__PURE__*/React.createElement(ItemRender, _extends({
+        data: child
+      }, props))
+    })) : [{
+      key: 1,
+      label: item.name,
+      children: /*#__PURE__*/React.createElement(ItemRender, _extends({
+        data: item
+      }, props))
+    }];
+    return /*#__PURE__*/React.createElement(Descriptions, {
+      key: index,
+      size: size,
+      style: {
+        marginBottom
+      },
+      items: items,
+      colon: props.colon,
+      title: props.title,
+      extra: props.extra,
+      layout: props.layout || 'vertical',
+      column: props.column,
+      labelStyle: props.labelStyle,
+      contentStyle: props.contentStyle
+    });
+  });
+}
+export function ItemRender({
+  data,
+  imageWidth,
+  imageHeight,
+  imagePreview,
+  extraFileLink,
+  ...props
+}) {
+  const [open, setOpen] = useState(false);
+  const [previewUrl, setPreviewUrl] = useState('');
+  const handlePreview = url => {
+    setPreviewUrl(url);
+    setOpen(true);
+  };
+  const renderContent = () => {
+    if (tools.isArray(data.value)) {
+      if (tools.isStringArray(data.value) || tools.isNumberArray(data.value)) {
+        return data.value.join('、');
+      }
+      if (tools.isObjectArray(data.value)) {
+        return data.formType === 'Table' ? /*#__PURE__*/React.createElement(RenderTable, {
+          columns: data.tableColumns,
+          dataSource: data.value,
+          imageWidth: imageWidth,
+          imageHeight: imageHeight,
+          imagePreview: imagePreview,
+          extraFileLink: extraFileLink,
+          onPreview: handlePreview
+        }) : data.value.map((file, index) => /*#__PURE__*/React.createElement(RenderFileItem, {
+          key: index,
+          url: file.url,
+          name: file.name,
+          isImage: file.isImage,
+          imageWidth: imageWidth,
+          imageHeight: imageHeight,
+          imagePreview: imagePreview,
+          extraFileLink: extraFileLink,
+          onPreview: () => handlePreview(file.url)
+        }));
+      }
+      return tools.textPlaceholder();
+    }
+    return /*#__PURE__*/React.createElement(RenderText, {
+      name: data.name,
+      value: data.value,
+      maxTagCount: props.maxTagCount,
+      renderItemText: props.renderItemText
+    });
+  };
+  return /*#__PURE__*/React.createElement(Fragment, null, renderContent(), /*#__PURE__*/React.createElement(Modal, {
+    destroyOnClose: true,
+    title: "\u67E5\u770B\u6587\u4EF6",
+    open: open,
+    width: 1100,
+    footer: null,
+    onCancel: () => setOpen(false)
+  }, IS_PDF_REG.test(previewUrl) && /*#__PURE__*/React.createElement("embed", {
+    src: previewUrl,
+    width: "100%",
+    height: 600
+  }), IS_VIDEO_REG.test(previewUrl) && /*#__PURE__*/React.createElement("video", {
+    controls: true,
+    src: previewUrl,
+    width: "100%",
+    height: 350
+  })));
+}
+export function RenderText({
+  value,
+  name,
+  maxTagCount = 1,
+  renderItemText
+}) {
+  const [text, setText] = useState();
+  const [options, setOptions] = useState([]);
+  const [loading, setLoading] = useState(false);
+  useEffect(() => {
+    if (!value) return;
+    if (value.load) {
+      setLoading(true);
+      value.load().then(res => res.json()).then(res => {
+        if (res.success) {
+          setOptions(res.data);
+          setText(value?.selected?.map(i => `${i.key}&${i.label}`));
+        }
+        setLoading(false);
+      });
+    } else {
+      setText(value);
+    }
+  }, [value]);
+  if (Array.isArray(text)) {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        gap: 6,
+        width: '100%',
+        display: 'flex',
+        minHeight: 22,
+        flexDirection: 'column'
+      }
+    }, /*#__PURE__*/React.createElement(Spin, {
+      spinning: loading
+    }, /*#__PURE__*/React.createElement(TreeSelect, {
+      treeCheckable: true,
+      treeDefaultExpandAll: true,
+      style: {
+        width: '100%'
+      },
+      value: text,
+      variant: "borderless",
+      treeData: options,
+      showSearch: false,
+      maxTagCount: maxTagCount
+    })));
+  }
+  return renderItemText ? renderItemText({
+    text,
+    name
+  }) : tools.textPlaceholder(text);
+}
+export function RenderFileItem(props) {
+  const {
+    isImage,
+    url,
+    name,
+    imageWidth,
+    imageHeight,
+    imagePreview,
+    extraFileLink,
+    onPreview
+  } = props;
+  return isImage ? /*#__PURE__*/React.createElement(RenderImage, {
+    url: url,
+    imageWidth: imageWidth,
+    imageHeight: imageHeight,
+    imagePreview: imagePreview,
+    extraFileLink: extraFileLink
+  }) : /*#__PURE__*/React.createElement(Tooltip, {
+    title: url
+  }, IS_PDF_REG.test(url) || IS_VIDEO_REG.test(url) ? /*#__PURE__*/React.createElement(RenderValidFile, {
+    url: url,
+    name: name,
+    onPreview: onPreview,
+    extraFileLink: extraFileLink
+  }) : /*#__PURE__*/React.createElement(RenderInvalidFile, {
+    url: url,
+    name: name
+  }));
+}
+export function RenderImage({
+  url,
+  imageWidth,
+  imageHeight,
+  imagePreview,
+  extraFileLink
+}) {
+  return /*#__PURE__*/React.createElement("span", {
+    style: {
+      display: 'inline-block',
+      marginRight: 4,
+      marginBottom: 4
+    }
+  }, /*#__PURE__*/React.createElement(Image, {
+    src: url,
+    width: imageWidth || 64,
+    height: imageHeight || 64,
+    preview: extraFileLink ? {
+      visible: false,
+      onVisibleChange: () => window.open(url)
+    } : imagePreview
+  }));
+}
+export function RenderValidFile({
+  url,
+  name,
+  extraFileLink,
+  onPreview
+}) {
+  const handleClick = () => extraFileLink ? window.open(url) : onPreview();
+  return /*#__PURE__*/React.createElement("a", {
+    style: {
+      gap: 4,
+      display: 'flex',
+      alignItems: 'center'
+    },
+    onClick: handleClick
+  }, /*#__PURE__*/React.createElement(FileOutlined, null), name);
+}
+export function RenderInvalidFile({
+  url,
+  name
+}) {
+  return /*#__PURE__*/React.createElement("a", {
+    href: url,
+    target: "_blank",
+    style: {
+      gap: 4,
+      display: 'flex',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(LinkOutlined, null), name);
+}
+export function RenderTable({
+  columns,
+  dataSource,
+  imageWidth,
+  imageHeight,
+  imagePreview,
+  extraFileLink,
+  onPreview
+}) {
+  const renderColumn = col => {
+    const originalRender = col.render;
+    col.render = row => {
+      if (tools.isNumberArray(row) || tools.isStringArray(row)) return row.join(',');
+      if (tools.isUploadFileListArray(row)) {
+        return /*#__PURE__*/React.createElement(Space, {
+          direction: "vertical"
+        }, tools.getDynamicUploadFileList(row).map((file, index) => /*#__PURE__*/React.createElement(RenderFileItem, {
+          key: index,
+          url: file.url,
+          name: file.name,
+          isImage: file.isImage,
+          imageWidth: imageWidth,
+          imageHeight: imageHeight,
+          imagePreview: imagePreview,
+          extraFileLink: extraFileLink,
+          onPreview: () => onPreview(file.url)
+        })));
+      }
+      if (tools.isObject(row)) return '数据错误';
+      return originalRender ? originalRender(row) : row;
+    };
+    return col;
+  };
+  return /*#__PURE__*/React.createElement(Table, {
+    rowKey: (record, index) => index,
+    columns: columns.map(renderColumn),
+    dataSource: dataSource
+  });
+}

package/FormilyRenderer/index.js

@@ -0,0 +1,58 @@
+import React, { useEffect, useRef, useState, forwardRef, useImperativeHandle } from 'react';
+import Renderer from '@cqsjjb-formily/renderer';
+import { http, tools } from '@cqsjjb/jjb-common-lib';
+const FormilyRenderer = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    code,
+    style,
+    initialValues = {},
+    disabledFields = [],
+    getRef
+  } = props;
+  const formRef = useRef(null);
+  const [schema, setSchema] = useState({});
+
+  // 暴露 formRef 给父组件
+  useImperativeHandle(ref, () => formRef.current);
+  useEffect(() => {
+    let isMounted = true;
+
+    // 获取设计配置
+    http.Get(`/design/designs/${code}`).then(res => {
+      if (isMounted && res.success) {
+        const {
+          config
+        } = res.data;
+        setSchema(tools.parseObject(config));
+      }
+    });
+    return () => {
+      isMounted = false;
+    };
+  }, [code]);
+  useEffect(() => {
+    if (!formRef.current || !Object.keys(schema).length) return;
+
+    // 设置初始值
+    formRef.current.setValues(initialValues);
+
+    // 禁用字段
+    tools.toArray(disabledFields).forEach(field => {
+      const f = formRef.current.fields[field];
+      if (f) {
+        f.required = false;
+        f.disabled = true;
+      }
+    });
+
+    // 返回 formRef 给父组件
+    getRef && getRef(formRef);
+  }, [schema, initialValues, disabledFields, getRef]);
+  return /*#__PURE__*/React.createElement("div", {
+    style: style
+  }, /*#__PURE__*/React.createElement(Renderer, {
+    ref: formRef,
+    schema: schema
+  }));
+});
+export default FormilyRenderer;