cloud-b2b 1.1.58 → 1.1.59

package/src/SuperUpload/SuperUpload.js

@@ -0,0 +1,137 @@
+import React, {useState, useEffect} from 'react';
+import PropTypes from 'prop-types';
+import {Upload, Button, Icon} from 'antd';
+import helper from '../helper';
+import Title from '../Title';
+import variables from '../variables';
+const FORMATS = ['image/jpeg', 'image/gif', 'image/bmp', 'image/jpg', 'image/png', 'image/tiff', 'image/gif', 'image/pcx', 'image/tga', 'image/exif', 'image/fpx', 'image/svg', 'image/psd', 'image/cdr', 'image/pcd', 'image/dxf', 'image/ufo', 'image/eps', 'image/ai', 'image/raw', 'image/WMF','video/mp4'];
+const FORMATS1 = ['.jpeg', '.gif', '.bmp', '.jpg', '.png', '.tiff', '.pcx', '.tga', '.exif', '.fpx', '.svg', '.psd', '.cdr', '.pcd', '.dxf', '.ufo', '.eps', '.ai', '.raw', '.WMF'];
+
+//组件属性定义
+const propTypes = {
+  fileList: PropTypes.array, //文件列表
+  fileDeleteList: PropTypes.array, //需要在页面关闭时删除的服务端文件
+  title: PropTypes.string, //附件组的标题
+  required: PropTypes.bool, //是否必须上传,默认false
+  listType: PropTypes.oneOf['text', 'picture', 'picture-card'], //上传列表的内建样式，支持三种,默认picture-card
+  readonly: PropTypes.bool, //所在页面是否只读,默认false
+  multiple: PropTypes.bool, //可否多选文件上传,默认true
+  limitNumber: PropTypes.number, //附件限制个数，默认10
+  limitText: PropTypes.any, //附件个数达到时的文本，或者设置为false则不显示，为true时显示默认文本，默认值true
+  limitSize: PropTypes.number, //单个附件限制大小，单位M,默认5
+  buttonTitle: PropTypes.string, //上传按钮的标题，默认‘上传’
+  onFileChange: PropTypes.func, //文件变更的回掉函数，func({fileList, fileDeleteList})
+};
+
+const convertFileList = (fileList) => {
+  return fileList.map(item => ({fileFormat: item.fileFormat || 'id', fileName: item.name, fileUrl: item.response ? item.response.result : ''}));
+};
+
+const getUploadProps = (props, onPreview, fileList, setFileList) => {
+  const {readonly = false, multiple=true, limitSize = 5, listType='picture-card', fileDeleteList=[], onFileChange} = props;
+  const onChange = ({file, fileList}) => {
+    const {limitNumber}=props
+    if (fileList.length>limitNumber)return  helper.showError(`文件最多可上传${limitNumber}个`);
+    if (!file) return; //过滤掉不符合条件的响应
+    let newList = [];
+    if (file.response && file.response.returnCode !== 0) { //检查是否上传到文件服务器成功
+      helper.showError(`上传失败，${file.response.returnMsg || ''}`);
+      newList = fileList.filter(item => item.uid !== file.uid);
+    }else {
+      newList = fileList.filter(item => item.status).map(item => (FORMATS.indexOf(item.type) === -1) ? {...item, thumbUrl: '/default.png'} : item);
+    }
+    file.response && onFileChange && onFileChange({
+      fileList: convertFileList(newList),
+      fileDeleteList
+    });
+    newList.fileName=newList.name
+    setFileList(newList);
+  };
+  const onRemove = async (fileRemove) => {
+    props.onRemove && props.onRemove(fileRemove, fileList, fileDeleteList);
+  };
+  return{
+    action: props.action || '/api/proxy/zuul/archiver-service/file/upload/document',
+    fileList,
+    listType,
+    multiple,
+    onChange,
+    onRemove,
+    onPreview: listType === 'text' ? undefined : onPreview,
+    beforeUpload:  (currentFile) => {
+      const isLt = currentFile.size / 1024 / 1024 < limitSize;      // 附件大小限制，单位M
+      if (!isLt) {
+        helper.showError(`附件大小不能超过${limitSize}M`);
+      }
+      return isLt;
+    },
+    showUploadList: {
+      showPreviewIcon: listType !== 'text',
+      showRemoveIcon: !readonly,
+      showDownloadIcon: true,
+    }
+  };
+};
+
+function UploadButton({buttonLabel='上传', title='附件', required=false, fileList=[], limitText=true, limitNumber=10, listType='picture-card', needText = false,remark='大小>=5M'}) {
+  const canUpload = fileList.length < limitNumber;
+  return canUpload ? (
+    listType === 'picture-card' ? (
+      <div>
+        <Icon type="plus" />
+        <div className="ant-upload-text">Upload</div>
+      </div>
+    ) : (
+      <Title title={title} required={required}>
+        <Button size='small' style={{marginLeft: '-10px'}}>{buttonLabel}</Button>
+      </Title>
+    )
+  ) : (
+    listType === 'picture-card' ? null : <Title title={title} required={required}>{!limitText ? null : <span>{limitText === true ? `附件个数若大于${limitNumber}个请压缩后上传` : limitText}</span>}</Title>
+  )
+}
+
+
+function SuperUpload(props) {
+  const [loading, setLoading] = useState(true);
+  const [fileList, setFileList] = useState( []);
+  let initFileList=[]
+  useEffect( () => {
+    async function fetchImgData() {
+      if (props.fileList.length>0 || fileList.length>0) {
+        for(let item of props.fileList) {
+          if (item.fileUrl=='') {
+             initFileList = props.getFileList ? await props.getFileList(fileList) : [];
+          }else{
+             initFileList = props.getFileList ? await props.getFileList(props.fileList) : [];
+          }
+        }
+        for(let item of fileList) {
+            initFileList = props.getFileList ? await props.getFileList(fileList) : [];
+        }
+      }
+      //const initFileList = props.getFileList ? await props.getFileList(props.fileList) : [];
+      setFileList(initFileList?initFileList:[]);
+      setLoading(false);
+    }
+    fetchImgData();
+  }, [props.fileList]);
+  const onPreview = async (file) => {
+    props.onPreview && props.onPreview(file, fileList);
+  };
+  const uploadProps = getUploadProps(props, onPreview, fileList, setFileList);
+  const {listType='picture-card', limitNumber=10, readonly, title} = props;
+  const className = listType === 'picture-card' && fileList?.length < limitNumber ? variables('SuperUpload') : variables('SuperUpload2');
+  const canUpload = fileList?.length >= limitNumber;
+  return loading ? <div>loading...</div> : (
+    <div className={className}>
+      {(listType === 'picture-card'  || readonly) && title ? <Title title={props.title || '附件'} required={props.required} /> : null}
+      <Upload {...uploadProps}>
+        {readonly || canUpload ? null : <UploadButton {...{...props, fileList}} />}
+      </Upload>
+      {props.needText ? <span>{props.remark}</span> : null}
+    </div>
+  );
+}
+
+export default SuperUpload;

package/src/Title/Title.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import variables from '../variables';
+import {Icon} from "antd";
+
+function Title({title, children, className, required=false, fold=false, isFold=false, noBorder=false, onFold, ...props}) {
+  return (
+    <div className={variables('title')} {...props}>
+      <span data-border={!noBorder} data-fold={fold} data-required={required}
+            onClick={fold && onFold ? onFold.bind(null, !isFold) : undefined}>
+        {title}
+        {fold ? <Icon type={isFold ? 'down' : 'up'} /> : null}
+      </span>
+      {isFold ? null : children}
+    </div>
+  );
+}
+
+export default Title;

package/src/Viewer/ImageViews.js

@@ -0,0 +1,220 @@
+import React from "react";
+import { Icon } from "antd";
+import variables from '../variables';
+
+const addEvent = (el, event, handler) => {
+  if (!el) return;
+  if (el.attachEvent) {
+    el.attachEvent('on' + event, handler);
+  } else if (el.addEventListener) {
+    el.addEventListener(event, handler, false);
+  } else {
+    el['on' + event] = handler;
+  }
+};
+
+const removeEvent = (el, event, handler) => {
+  if (!el) return;
+  if (el.detachEvent) {
+    el.detachEvent('on' + event, handler);
+  } else if (el.removeEventListener) {
+    el.removeEventListener(event, handler, false);
+  } else {
+    el['on' + event] = null;
+  }
+};
+
+const getCss = (o, key) => {
+  return o.currentStyle ? o.currentStyle[key] : document.defaultView.getComputedStyle(o)[key];
+};
+
+// 获取元素旋转的角度
+const getRotateDeg = (target) => {
+  const rotateMatrix = getCss(target, 'transform');
+  const [a, b] = rotateMatrix.split('(')[1].split(')')[0].split(',');
+  return Math.round(Math.atan2(b, a) * (180 / Math.PI));
+};
+
+class ImageViews extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = { zoom: 1, startTouch: {}};
+  }
+
+  _onwheel = (e) => {
+    const { zoom } = this.state;
+    /*事件兼容*/
+    const event = e || window.event;
+
+    const imageDOM = this.imgRef;
+
+    let delta;
+    if (event.nativeEvent.wheelDelta) {
+      delta = event.nativeEvent.wheelDelta / 1200;
+    } else if (event.nativeEvent.deltaY) {
+      delta = -event.nativeEvent.deltaY / 1200;
+    }
+
+    let zoomVal = zoom + delta;
+
+    if (zoomVal >= 0.2) {
+      imageDOM.style.transform = `translate(-50%,-50%) scale(${zoomVal})`;
+    } else {
+      zoomVal = 0.2;
+      imageDOM.style.transform = `translate(-50%,-50%) scale(${zoomVal})`;
+    }
+
+    this.setState({ zoom: zoomVal });
+
+  };
+
+  _onMouseDown = (e) => {
+    /*事件兼容*/
+    const event = e || window.event;
+    const imageDOM = this.imgRef;
+
+    event.preventDefault();//阻止浏览器的默认事件
+
+    const startTouch = {};
+    startTouch.initiated = true; //initiated为true表示开始滑动
+    /*获取鼠标按下的地方距离元素左侧和上侧的距离*/
+    startTouch.startX = event.nativeEvent.clientX - imageDOM.offsetLeft;
+    startTouch.startY = event.nativeEvent.clientY - imageDOM.offsetTop;
+
+    this.setState({ startTouch });
+    addEvent(document, 'mousemove', this._onMouseMove);
+    addEvent(document, 'mouseup', this._onMouseUp);
+  };
+
+  _onMouseMove = (e) => {
+    const event = e || window.event;
+    const imageDOM = this.imgRef;
+    const { startTouch } = this.state;
+    if (!startTouch.initiated) return;
+    //滑动距离
+    const deltaX = event.clientX - startTouch.startX;
+    const deltaY = event.clientY - startTouch.startY;
+
+    imageDOM.style.left = `${deltaX}px`;
+    imageDOM.style.top = `${deltaY}px`;
+  };
+
+  _onMouseUp = () => {
+    const { startTouch } = this.state;
+    if (!startTouch.initiated) return;
+    const endTouch = JSON.parse(JSON.stringify(startTouch));
+    endTouch.initiated = false;
+    this.setState({ startTouch });
+    removeEvent(document, 'mousemove', this._onMouseMove);
+    removeEvent(document, 'mouseup', this._onMouseDown);
+  };
+
+  _onPlus = (event) => {
+    const { zoom } = this.state;
+    const imageDOM = this.imgRef;
+    let zoomVal = zoom + 0.1;
+    const originDeg = getRotateDeg(imageDOM);
+    event.stopPropagation()
+    if (zoomVal >= 0.2) {
+      imageDOM.style.transform = `translate(-50%,-50%) scale(${zoomVal}) rotate(${originDeg}deg)`;
+    }
+    this.setState({ zoom: zoomVal })
+  };
+
+  _onMinus = () => {
+    const { zoom } = this.state;
+    const imageDOM = this.imgRef;
+    let zoomVal = zoom - 0.1;
+    const originDeg = getRotateDeg(imageDOM);
+
+    if (zoomVal < 0.2) {
+      zoomVal = 0.2
+    }
+    imageDOM.style.transform = `translate(-50%,-50%) scale(${zoomVal}) rotate(${originDeg}deg)`;
+    this.setState({ zoom: zoomVal })
+  };
+
+  _reload = () => {
+    const imageDOM = this.imgRef;
+    imageDOM.style.transform = `translate(-50%,-50%) scale(1) rotate(0deg)`;
+    imageDOM.style.left = `50%`;
+    imageDOM.style.top = `50%`;
+
+    this.setState({
+      zoom: 1,
+    })
+  };
+
+
+  _arrowLeft = () => {
+    const { onLeft } = this.props;
+    onLeft && onLeft();
+    const imageDOM = this.imgRef;
+    imageDOM.style.transform = `translate(-50%,-50%) scale(1) rotate(0deg)`;
+    imageDOM.style.left = `50%`;
+    imageDOM.style.top = `50%`;
+
+    this.setState({
+      zoom: 1,
+    })
+  };
+
+
+
+  _arrowRight = () => {
+    const { onRight } = this.props;
+    onRight && onRight();
+
+    const imageDOM = this.imgRef;
+    imageDOM.style.transform = `translate(-50%,-50%) scale(1) rotate(0deg)`;
+    imageDOM.style.left = `50%`;
+    imageDOM.style.top = `50%`;
+
+    this.setState({
+      zoom: 1,
+    })
+  };
+
+  rotate = (isLeft) =>  () => {
+    const imageDOM = this.imgRef;
+    const originDeg = getRotateDeg(imageDOM);
+    const {zoom} = this.state;
+    const rotateDeg = isLeft ? originDeg - 90 : originDeg + 90;
+    imageDOM.style.transform = `translate(-50%,-50%) rotate(${rotateDeg}deg) scale(${zoom})`;
+  };
+
+  render() {
+    const {image} = this.props;
+
+    return (
+      <div className={variables('ImageViews')}>
+        <div role={"imgWrapper"}>
+          <img src={image.src}
+               alt={image.alt}
+               ref={imgRef => {
+                 this.imgRef = imgRef
+               }}
+               onWheel={this._onwheel}//缩放事件
+               onMouseDown={this._onMouseDown} //拖拽事件
+          />
+        </div>
+        <div className={variables('ImageViews').footer}>
+          <div className={variables('ImageViews').toolBar}>
+            <ul>
+              <li title='放大' onClick={this._onPlus} onDoubleClick={event => event.preventDefault()}><Icon type="plus" /></li>
+              <li title='缩小' onClick={this._onMinus}><Icon type="minus" /></li>
+              <li title='上一张' onClick={this._arrowLeft}><Icon type="arrow-left" /></li>
+              <li title='下一张' onClick={this._arrowRight}><Icon type="arrow-right" /></li>
+              <li title='向左旋转' onClick={this.rotate(true)}><Icon type='pld-rotateleft' /></li>
+              <li title='向右旋转' onClick={this.rotate(false)}><Icon type='pld-rotateright' /></li>
+              <li title='复原' onClick={this._reload}><Icon type="delete" /></li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default ImageViews;

package/src/Viewer/Viewer.js

@@ -0,0 +1,97 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ImageViews from "./ImageViews";
+import { Icon } from "antd";
+import variables from '../variables';
+
+class Viewers extends React.Component {
+
+  static propTypes = {
+    /** viewer是否可见 */
+    visible: PropTypes.bool.isRequired,
+    /** 点击关闭按钮的回调 */
+    onCancel: PropTypes.func.isRequired,
+    /** 需要进行浏览的图片地址集合 */
+    images: PropTypes.array.isRequired,
+    /** 需要进行浏览的图片名称集合 */
+    titles: PropTypes.array.isRequired,
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      imageIndex: props.imageIndex
+    }
+  }
+
+  //修复Warning报错
+  componentWillUnmount = () => {
+    this.timeout = null
+  }
+
+  closeViewers = () => {
+    const { onCancel, onClose } = this.props;
+    this.containerRef.style['opacity'] = 0;
+    this.timeout = setTimeout(() => {
+      onCancel && onCancel(onClose)
+    }, 1000)
+
+  };
+
+  _onLeft = () => {
+    const { imageIndex } = this.state;
+    const { images } = this.props;
+    let index = imageIndex - 1;
+    if (index < 0) {
+      index = images.length - 1;
+    }
+    this.setState({ imageIndex: index })
+  };
+
+  _onRight = () => {
+    const { imageIndex } = this.state;
+    const { images } = this.props;
+    let index = imageIndex + 1;
+    if (index > images.length - 1) {
+      index = 0;
+    }
+    this.setState({ imageIndex: index })
+  };
+
+  _onSelect = (index) => {
+    this.setState({ imageIndex: index })
+  };
+
+  render() {
+    const { visible, images, titles } = this.props;
+    const { imageIndex } = this.state;
+    return (
+      <div>
+        {
+          visible ? (
+            <div
+              className={variables('Viewers')}
+              ref={container => {
+                this.containerRef = container
+              }}>
+              <div className={variables('Viewers').mask} />
+              <div className={variables('Viewers').title}>
+                {titles.map((item, index) => {
+                  return <div key={index} onClick={this._onSelect.bind(this, index)} className={index === imageIndex ? variables('Viewers').selectTitle : ''}>{item}</div>
+                })}
+              </div>
+              <ImageViews image={images[imageIndex]} onLeft={this._onLeft} onRight={this._onRight} />
+              <div className={variables('Viewers').close} onClick={() => this.closeViewers()}>
+                <Icon type="close" />
+              </div>
+            </div>
+          ) : null
+        }
+      </div>
+    )
+  }
+}
+
+
+
+export default Viewers;

package/src/WingBlank/WingBlank.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import variables from '../variables';
+
+function WingBlank({className, children, ...props}) {
+  return (
+    <div className={`${className} ${variables('WingBlank')}`} {...props}>
+      <div>
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export default WingBlank;

package/src/helper.js

@@ -0,0 +1,185 @@
+import message from 'antd/lib/message';
+
+/**
+ * 功能：从obj中取出不包含keys指定的属性，并组成一个新的子对象
+ */
+const getObjectExclude = (obj, keys) => {
+    const inKeys = key => keys.some(k => k === key);
+    return  Object.keys(obj).reduce((newObj, key) => {
+        !inKeys(key) && (newObj[key] = obj[key]);
+        return newObj;
+    }, {});
+};
+
+// 获取当前登录的用户名
+const getUsername = () => {
+    const username = 'username=';
+    const cookie = document.cookie;
+    const begin = cookie.indexOf(username) + username.length;
+    const end = cookie.indexOf(';', begin);
+    return unescape(cookie.substring(begin, end < 0 ? cookie.length : end));
+};
+
+/**
+ * 确保path为数组
+ */
+const makeArray = (path) => {
+    if (Array.isArray(path)) {
+        return path;
+    } else if (!path) {
+        return [];
+    } else {
+        return [path];
+    }
+};
+
+/**
+ * 功能：获取对象关键路径的值，不存在则返回undefined
+ * obj：对象
+ * path：字符串或字符串数组，指定关键路径
+ */
+const getPathValue = (obj, path) => {
+    if (!path) {
+        return undefined;
+    } else {
+        return makeArray(path).reduce((value, key) => typeof value !== 'object' ? undefined : value[key], obj);
+    }
+};
+
+/**
+ * 功能：判断一个值是否为空(null,undefined和''属于空)
+ */
+const isEmpty = (value) => {
+    const type = typeof value;
+    if (type === 'number' || type === 'boolean') {
+        return false;
+    } else {
+        return !value;
+    }
+};
+
+/**
+ * 功能：判断一个值是否为空(null,undefined,''和[]属于空)
+ */
+const isEmpty2 = (value) => {
+    const type = typeof value;
+    if (type === 'number' || type === 'boolean') {
+        return false;
+    } else if (Array.isArray(value)) {
+        return !value.length;
+    } else {
+        return !value;
+    }
+};
+const toThousands = (number, fractionDigits = 2, removeTrailingZeros = false) => {
+    if (!isNaN(Number(number))) {
+        let formattedNumber;
+        if (!Number.isInteger(parseFloat(number))) {
+            formattedNumber = Number(number).toFixed(fractionDigits);
+        }
+        if (removeTrailingZeros) {
+            //去除整数和小数部分末尾的零
+            formattedNumber = formattedNumber.replace(/(\.\d*?[1-9])0*$/, '$1').replace(/\.0*$/, '');
+        }
+        else {
+            formattedNumber = Number(number).toLocaleString(undefined, {
+                minimumFractionDigits: fractionDigits,
+                maximumFractionDigits: fractionDigits
+            });
+        }
+        return formattedNumber;
+    } else if (typeof number === 'string' && number.includes('~')) {
+        let numberList = number.split('~');
+        let formattedArr = numberList.map((num, index) => {
+            if (index === numberList.length - 1) {
+                return parseFloat(num).toFixed(fractionDigits);
+            } else {
+                return parseFloat(num).toFixed(fractionDigits);
+            }
+        });
+        let result = formattedArr.join('~');
+        return result;
+    }
+}
+
+const showError = (msg) => {
+    message.error(msg);
+};
+
+const showSuccessMsg = (msg) => {
+    message.success(msg);
+};
+const getObject = (obj, keys) => {
+    return keys.reduce((newObj, key) => {
+        newObj[key] = obj[key];
+        return newObj;
+    }, {});
+};
+
+export const fetchJson = async (url, option, cookie=true, jump=true) => {
+    if (cookie) {
+        if (typeof option === 'undefined') {
+            option = {credentials: 'include'};
+        } else if (typeof option === 'string') {
+            option = {method: option, credentials: 'include'};
+        } else if (!option.credentials) {
+            Object.assign(option, {credentials: 'include'});
+        }
+    } else {
+        if (typeof option === 'string') {
+            option = {method: option};
+        }
+    }
+
+    try {
+        const res = await fetch(url, option);
+        if (!res.ok) {
+            return {returnCode: res.status, returnMsg: `${res.status} - ${res.statusText}`};
+        } else {
+            const json = await res.json();
+            if (json.returnCode !== 0 && json.errorCode) {
+                json.returnCode = Number(json.errorCode) || 10001;
+            }
+            if (jump && (json.returnCode === 9998)) {
+                json.returnMsg = '登录超时，请重新登录';
+                window.localStorage.removeItem('login');
+                const roleKey = getRoleKey();
+                if(roleKey) {
+                    window.location.href = `/portal/${roleKey}_login`;
+                } else {
+                    window.location.href = `/`;
+                }
+            }
+            return json;
+        }
+    } catch (e) {
+        return {returnCode: 10000, returnMsg: '无法请求资源'};
+    }
+};
+const helper = {
+    getObjectExclude,
+    getUsername,
+    getPathValue,
+    isEmpty,
+    isEmpty2,
+    showError,
+    showSuccessMsg,
+    toThousands,
+    getObject,
+    fetchJson
+};
+
+export {
+    getObject,
+    getObjectExclude,
+    getUsername,
+    getPathValue,
+    isEmpty,
+    isEmpty2,
+    showError,
+    showSuccessMsg,
+    toThousands,
+
+};
+
+export default helper;

package/{es → src}/history.js

@@ -1,6 +1,6 @@
-// import createBrowserHistory from 'history/createBrowserHistory';
-import { createBrowserHistory } from 'history';
-
-// Navigation manager, e.g. history.push('/home')
-// https://github.com/mjackson/history
-export default process.env.BROWSER && createBrowserHistory();
+// import createBrowserHistory from 'history/createBrowserHistory';
+import {createBrowserHistory} from 'history';
+
+// Navigation manager, e.g. history.push('/home')
+// https://github.com/mjackson/history
+export default process.env.BROWSER && createBrowserHistory();