dlt-for-react 1.1.16 → 1.1.18

package/lib/components/HqImage/index.js

@@ -0,0 +1,553 @@
+"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 _promise = require("babel-runtime/core-js/promise");
+
+var _promise2 = _interopRequireDefault(_promise);
+
+var _message2 = require("antd/lib/message");
+
+var _message3 = _interopRequireDefault(_message2);
+
+var _regenerator = require("babel-runtime/regenerator");
+
+var _regenerator2 = _interopRequireDefault(_regenerator);
+
+var _asyncToGenerator2 = require("babel-runtime/helpers/asyncToGenerator");
+
+var _asyncToGenerator3 = _interopRequireDefault(_asyncToGenerator2);
+
+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/HqImage/index.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 HqImage = function (_React$Component) {
+  (0, _inherits3.default)(HqImage, _React$Component);
+
+  function HqImage(props) {
+    var _this2 = this;
+
+    (0, _classCallCheck3.default)(this, HqImage);
+
+    var _this = (0, _possibleConstructorReturn3.default)(this, (HqImage.__proto__ || (0, _getPrototypeOf2.default)(HqImage)).call(this, props));
+
+    _this.handlePreview = function () {
+      var _ref = (0, _asyncToGenerator3.default)( /*#__PURE__*/_regenerator2.default.mark(function _callee(file) {
+        return _regenerator2.default.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                if (!(!file.url && !file.preview)) {
+                  _context.next = 4;
+                  break;
+                }
+
+                _context.next = 3;
+                return _this.getBase64(file.originFileObj);
+
+              case 3:
+                file.preview = _context.sent;
+
+              case 4:
+
+                _this.setState({
+                  previewImageUrl: file.url || file.preview,
+                  previewImageName: file.name,
+                  previewImageVisible: true
+                });
+
+              case 5:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee, _this2);
+      }));
+
+      return function (_x) {
+        return _ref.apply(this, arguments);
+      };
+    }();
+
+    _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.getBase64 = function (file) {
+      return new _promise2.default(function (resolve, reject) {
+        var reader = new FileReader();
+        reader.readAsDataURL(file);
+        reader.onload = function () {
+          return resolve(reader.result);
+        };
+        reader.onerror = function (error) {
+          return reject(error);
+        };
+      });
+    };
+
+    _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)(HqImage, [{
+    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 HqImage;
+}(_react2.default.Component);
+
+//属性检查
+
+
+HqImage.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上传图片路径
+};
+HqImage.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 = HqImage;