dlt-for-react 1.0.1 → 1.0.2

package/lib/components/NHImage/index.js

@@ -1,486 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-
-var _modal = require('antd/lib/modal');
-
-var _modal2 = _interopRequireDefault(_modal);
-
-var _upload = require('antd/lib/upload');
-
-var _upload2 = _interopRequireDefault(_upload);
-
-var _icon = require('antd/lib/icon');
-
-var _icon2 = _interopRequireDefault(_icon);
-
-var _message2 = require('antd/lib/message');
-
-var _message3 = _interopRequireDefault(_message2);
-
-var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
-
-var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
-
-var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
-
-var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
-
-var _createClass2 = require('babel-runtime/helpers/createClass');
-
-var _createClass3 = _interopRequireDefault(_createClass2);
-
-var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
-
-var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
-
-var _inherits2 = require('babel-runtime/helpers/inherits');
-
-var _inherits3 = _interopRequireDefault(_inherits2);
-
-require('antd/lib/modal/style');
-
-require('antd/lib/upload/style');
-
-require('antd/lib/icon/style');
-
-require('antd/lib/message/style');
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _propTypes = require('prop-types');
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-var _NHCore = require('../../utils/NHCore');
-
-require('../../../assets/NHPicturesWall/NHPicturesWall.less');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var fileDocDownloadPath = 'zuul/docrepo/download?attachmentId=';
-var redisDownloadPath = window.baseUrl + '/proData/downloadRedisCacheImage?uuid=';
-
-/**
- * @author weishihuai
- * @date 2018/9/12
- * @time 9:52
- * @Description: 图片墙上传组件
- *
- *   图片墙使用说明：
- *   onRemove: this.onImageRemove.bind(this), 非必须, 图片删除之后回传删除图片给父组件的方法
- *   onChange: this.onChange.bind(this), 非必须, 值改变时执行的方法
- *   numberOfLimit: 2, 必须, 图片墙允许上传的图片张数，超过numberOfLimit上传按钮自动隐藏
- *   numberOfSize: 5,  必须, 图片墙允许上传图片大小的最大值，超过numberOfSize的话直接不上传
- *   saveType: 'file', 必须, 图片墙图片保存的格式，默认为‘file’保存在文档库，‘redis’为缓存在redis,‘base64’保存在内存中，如果需要永久保存文件，建议保存在文档库
- *   cacheTime: 30,  非必须, Redis缓存时长，单位：分钟  超过30分钟redis会删除缓存的图片信息
- *   imageList: ['0264a687-baa4-490f-92f5-e988dcd8d976','0264a687-baa4-490f-92f5-e988dcd8d976'] 非必须, 如果是编辑模式下，需要回显已经保存的图片信息，注意一下需要构造如下类型数据才能显示出来：
- */
-
-var NHPicturesWall = function (_React$Component) {
-    (0, _inherits3.default)(NHPicturesWall, _React$Component);
-
-    function NHPicturesWall(props) {
-        (0, _classCallCheck3.default)(this, NHPicturesWall);
-
-        var _this = (0, _possibleConstructorReturn3.default)(this, (NHPicturesWall.__proto__ || (0, _getPrototypeOf2.default)(NHPicturesWall)).call(this, props));
-
-        _this.handlePreview = function (file) {
-            _this.setState({
-                previewImageUrl: file.url || file.thumbUrl,
-                previewImageName: file.name,
-                previewImageVisible: true
-            });
-        };
-
-        _this.handlePreviewCancel = function () {
-            _this.setState({
-                previewImageVisible: false
-            });
-        };
-
-        _this.handleChange = function (e) {
-            var saveType = _this.props.saveType || 'file';
-            var fileList = e.fileList;
-            var fileStatus = e.file.status;
-
-            if (fileStatus === 'uploading') {//上传中
-            } else if (fileStatus === 'done') {
-                //上传成功
-                var response = e.file.response;
-                if (!response) {
-                    _message3.default.error("抱歉，文件由于未知原因上传失败!");
-                    return;
-                }
-                var responseMeta = response.meta;
-                if (saveType === 'file') {
-                    //上传到文档库
-                    //上传成功(success为true并且响应码为200)
-                    if (responseMeta && responseMeta.success && responseMeta.statusCode === 200) {
-                        fileList = fileList.map(function (file) {
-                            if (file.uid === e.file.uid) {
-                                // file.uuid = response.data.ssbh;
-                                file.uuid = response.data.bh;
-                            }
-                            return file;
-                        });
-
-                        _this.getUploadedImage(fileList, 'file');
-                    } else {
-                        _message3.default.error("抱歉，文件由于未知原因上传失败!");
-                        //过滤上传失败的图片
-                        fileList = _this.filterUploadFailFile(e.fileList, e.file);
-                    }
-                } else if (saveType === 'redis') {
-                    //缓存Redis
-                    //缓存成功(响应码为200)
-                    if (response.code === 200) {
-                        fileList = fileList.map(function (file) {
-                            if (file.uid === e.file.uid) {
-                                file.uuid = response.data;
-                            }
-                            return file;
-                        });
-                        _this.getUploadedImage(fileList, 'redis');
-                    } else {
-                        _message3.default.error("抱歉，文件由于未知原因上传失败!");
-                        //过滤上传失败的图片
-                        fileList = _this.filterUploadFailFile(e.fileList, e.file);
-                    }
-                } else if (saveType === 'base64') {
-                    //用于保存数据库
-                    _this.getImageBase64(e.file.originFileObj, function (imageUrl) {
-                        //上传成功
-                        if (response.code === 200) {
-                            fileList = fileList.map(function (file) {
-                                if (file.uid === e.file.uid) {
-                                    file.uuid = imageUrl;
-                                    file.base64Url = imageUrl;
-                                } else {
-                                    file.base64Url = file.thumbUrl || file.url;
-                                }
-                                return file;
-                            });
-                            _this.getUploadedImage(fileList, 'base64');
-                        } else {
-                            _message3.default.error("抱歉，文件由于未知原因上传失败!");
-                            //过滤上传失败的图片
-                            fileList = _this.filterUploadFailFile(e.fileList, e.file);
-                        }
-                    });
-                }
-            } else if (fileStatus === 'error') {
-                //上传出错
-                _message3.default.error("抱歉，文件由于未知原因上传失败!");
-                //过滤上传失败的图片
-                fileList = _this.filterUploadFailFile(e.fileList, e.file);
-            }
-            if (fileStatus) {
-                _this.setState({
-                    uploadedImageList: fileList
-                });
-            }
-        };
-
-        _this.getImageBase64 = function (img, callback) {
-            var reader = new FileReader();
-            reader.addEventListener('load', function () {
-                return callback(reader.result);
-            });
-            reader.readAsDataURL(img);
-        };
-
-        _this.filterUploadFailFile = function (list, failUploadedFile) {
-            return list.filter(function (file) {
-                return file.uid !== failUploadedFile.uid;
-            });
-        };
-
-        _this.getUploadedImage = function (fileList, saveType) {
-            if (saveType === 'base64') {
-                var uploadedImageList = [];
-                fileList.map(function (file) {
-                    var obj = {
-                        uuid: file.uuid,
-                        base64Url: file.base64Url
-                    };
-                    uploadedImageList.push(obj);
-                });
-
-                //父组件回调方法，在父组件可以拿到已经上传成功的图片信息
-                if (_this.props.onChange && typeof _this.props.onChange === "function") {
-                    _this.props.onChange(uploadedImageList);
-                }
-            } else {
-                var _uploadedImageList = [];
-                fileList.map(function (file) {
-                    var obj = {
-                        uuid: file.uuid
-                    };
-                    _uploadedImageList.push(obj);
-                });
-
-                //父组件回调方法，在父组件可以拿到已经上传成功的图片信息
-                if (_this.props.onChange && typeof _this.props.onChange === "function") {
-                    _this.props.onChange(_uploadedImageList);
-                }
-            }
-        };
-
-        _this.handelBeforeUpload = function (file) {
-            var fileType = file.type;
-            var fileName = file.name;
-            //判断是否支持该文件格式
-            var isInvalidFileType = !fileType || fileType.length < 1;
-            if (isInvalidFileType) {
-                _message3.default.error('抱歉，不支持上传该格式的文件！');
-                return !isInvalidFileType;
-            }
-
-            var availFileSuffix = ['.png', '.PNG', '.jpg', '.JPG', '.bpm', '.BPM', '.gif', '.GIF'];
-            var fileSuffixName = fileName.substring(file.name.lastIndexOf('.'));
-            var isAvailableSuffix = availFileSuffix.includes(fileSuffixName);
-            if (!isAvailableSuffix) {
-                var msg = '抱歉，只支持上传【' + availFileSuffix.join(' || ') + '】格式的文件！';
-                _message3.default.error(msg);
-                return isAvailableSuffix;
-            }
-
-            //限制上传文件大小(默认上传大小限制2MB)
-            var availSize = _this.props.numberOfSize || 2;
-            var fileSize = file.size / 1024 / 1024;
-            var isOverSize = fileSize > availSize;
-
-            if (isOverSize) {
-                var _msg = '抱歉，上传文件大小最大不能超过' + availSize + 'M！';
-                _message3.default.error(_msg);
-                return !isOverSize;
-            }
-            return true;
-        };
-
-        _this.handleRemove = function (file) {
-            var uploadedImageList = _this.state.uploadedImageList;
-            for (var index = 0, len = uploadedImageList.length; index < len; index++) {
-                if (uploadedImageList[index].uid === file.uid) {
-                    uploadedImageList.splice(index, 1);
-                    break;
-                }
-            }
-            _this.setState({
-                uploadedImageList: uploadedImageList
-            });
-
-            //组装数据返回给父组件，包含文档库的uuid以及文件名称
-            var imageList = [];
-            uploadedImageList.length > 0 && uploadedImageList.map(function (file) {
-                var obj = { uuid: file.uuid };
-                imageList.push(obj);
-            });
-
-            if (_this.props.onChange && typeof _this.props.onChange === 'function') {
-                _this.props.onChange(imageList);
-            }
-
-            //如果有需要对删除的图片做删除文档库等操作，回传给父组件进行处理
-            if (_this.props.onRemove && typeof _this.props.onRemove === 'function') {
-                _this.props.onRemove(file.uuid);
-            }
-        };
-
-        _this.state = {
-            uploadedImageList: [], //已上传图片
-            previewImageVisible: false, //是否预览图片标识
-            previewImageUrl: '', //预览图片的URL
-            previewImageName: '' //预览图片的名称
-        };
-        return _this;
-    }
-
-    //设置props默认值
-
-
-    (0, _createClass3.default)(NHPicturesWall, [{
-        key: 'componentWillMount',
-
-
-        //组件render之前组装已经上传成功的图片信息uploadedImageList,主要用于回显图片
-        value: function componentWillMount() {
-            var saveType = this.props.saveType || 'file';
-            if (saveType === 'base64') {
-                if (this.props.imageList.length > 0) {
-                    var uploadedImageList = [];
-                    this.props.imageList.map(function (base64Code) {
-                        uploadedImageList.push({
-                            uuid: base64Code,
-                            uid: base64Code,
-                            url: base64Code
-                        });
-                    });
-                    this.setState({
-                        uploadedImageList: uploadedImageList
-                    });
-
-                    var imageList = [];
-                    uploadedImageList.map(function (file) {
-                        var obj = {
-                            uuid: file.uuid,
-                            base64Url: file.url
-                        };
-                        imageList.push(obj);
-                    });
-
-                    if (this.props.onChange && typeof this.props.onChange === "function") {
-                        this.props.onChange(imageList);
-                    }
-                }
-            } else {
-                if (this.props.imageList.length > 0) {
-                    var _uploadedImageList2 = [];
-                    this.props.imageList.map(function (uuid) {
-                        _uploadedImageList2.push({
-                            uuid: uuid,
-                            uid: uuid,
-                            url: saveType === 'file' ? fileDocDownloadPath + uuid : redisDownloadPath + uuid
-                        });
-                    });
-                    this.setState({
-                        uploadedImageList: _uploadedImageList2
-                    });
-
-                    var _imageList = [];
-                    _uploadedImageList2.map(function (file) {
-                        var obj = { uuid: file.uuid };
-                        _imageList.push(obj);
-                    });
-
-                    if (this.props.onChange && typeof this.props.onChange === "function") {
-                        this.props.onChange(_imageList);
-                    }
-                }
-            }
-        }
-
-        //图片预览事件
-
-
-        //取消图片预览事件
-
-
-        //文件上传改变事件
-
-
-        //获取图片Base64
-
-
-        //过滤上传失败的图片
-
-
-        //获取上传成功的图片
-
-
-        //上传文件之前的钩子，参数为准备上传的文件，若返回 false 则停止上传
-        //一般在beforeUpload方法内限制文件上传的格式以及大小
-
-
-        //删除图片事件
-
-    }, {
-        key: 'render',
-        value: function render() {
-            var _state = this.state,
-                previewImageVisible = _state.previewImageVisible,
-                previewImageUrl = _state.previewImageUrl,
-                uploadedImageList = _state.uploadedImageList,
-                previewImageName = _state.previewImageName;
-
-            var numberOfLimit = this.props.numberOfLimit || 1; //默认最多上传一张图片
-            var saveType = this.props.saveType || 'file'; //默认上传到文档库
-            var redisCacheTime = this.props.cacheTime || 30; //Redis默认保存时长，单位：分钟
-
-            var uploadButton = _react2.default.createElement(
-                'div',
-                null,
-                _react2.default.createElement(_icon2.default, { type: 'plus' }),
-                _react2.default.createElement(
-                    'div',
-                    { className: 'xgui-picturewall-ant-upload-text' },
-                    'Upload'
-                )
-            );
-
-            //根据saveType构造上传的url
-            var action = saveType === 'file' ? 'zuul/docrepo/upload' : saveType === 'redis' ? window.baseUrl + '/proData/uploadRedis' : this.props.base64UploadUrl;
-            //请求发送的数据
-            var requestData = saveType === 'file' ? {
-                uuid: (0, _NHCore.createUuid)(),
-                type: '1'
-            } : saveType === 'redis' ? {
-                'redisData': redisCacheTime
-            } : {};
-
-            var params = {
-                name: 'file',
-                action: action, //图片上传路径
-                accept: 'image/*', //接受上传的文件类型,指定为image/**的话，弹出选择文件窗口的时候只会显示图片类型文件，过滤掉.txt、.xsl等非图片文件
-                listType: 'picture-card', //图片墙样式
-                multiple: false, //是否允许多选
-                fileList: uploadedImageList, //已上传的图片
-                data: requestData, //上传所需参数
-                onRemove: this.handleRemove, //删除执行的方法
-                beforeUpload: this.handelBeforeUpload, //图片上传前执行的方法
-                onPreview: this.handlePreview, //预览图片执行的方法
-                onChange: this.handleChange //值改变执行的方法
-            };
-
-            return _react2.default.createElement(
-                'div',
-                { className: 'clearfix' },
-                _react2.default.createElement(
-                    _upload2.default,
-                    params,
-                    uploadedImageList.length >= numberOfLimit ? null : uploadButton
-                ),
-                _react2.default.createElement(
-                    _modal2.default,
-                    { visible: previewImageVisible, footer: null, onCancel: this.handlePreviewCancel },
-                    _react2.default.createElement('img', { alt: previewImageName, style: { width: '100%' }, src: previewImageUrl })
-                )
-            );
-        }
-    }]);
-    return NHPicturesWall;
-}(_react2.default.Component);
-
-//属性检查
-
-
-NHPicturesWall.defaultProps = {
-    saveType: 'file', //保存的类型，默认为file文档库，可选的值: 'file'(上传文档库)、'base64'(保存数据库)、'redis'(缓存redis)
-    imageList: [], //设置默认上传的图片 格式:imageList: [{ uid: '对应文档库uuid', name: '图片名称',status: 'done', url: '图片url'}]
-    cacheTime: 30, //设置Redis缓存的时间，单位：分钟 表示Redis超过30分钟会删除缓存的信息
-    numberOfLimit: 1, //最多允许上传多少张图片 默认为1张
-    numberOfSize: 2, //默认上传大小限制2MB
-    disabled: false, //是否禁用
-    onRemove: function onRemove() {//删除成功回调
-    },
-    onChange: function onChange() {}, //值改变时的回调
-    base64UploadUrl: '' //base64上传图片路径
-};
-NHPicturesWall.PropTypes = {
-    saveType: _propTypes2.default.string, //保存的类型
-    imageList: _propTypes2.default.array, //初始化图片信息
-    cacheTime: _propTypes2.default.number, //Redis缓存时间
-    numberOfLimit: _propTypes2.default.number, //允许上传的图片张数
-    numberOfSize: _propTypes2.default.number, //允许上传的图片大小
-    disabled: _propTypes2.default.bool, //是否禁用
-    base64UploadUrl: _propTypes2.default.string, //base64图片上传路径
-    onRemove: _propTypes2.default.func, //删除成功回调
-    onChange: _propTypes2.default.func //值改变回调
-};
-
-exports.default = NHPicturesWall;