zartui 2.1.20 → 2.1.22

package/lib/media-picker/index.js

@@ -37,6 +37,7 @@ var _Img = require("./image/Img64");
 var _mediaUtil = require("./media-util");
 var _device = require("../utils/device");
 var _wxUtil = require("./wx-util");
+var _sortablejs = _interopRequireDefault(require("sortablejs"));
 // Utils
 
 // Types
@@ -188,6 +189,10 @@ var _default2 = exports.default = createComponent({
       default: function _default() {
         return {};
       }
+    },
+    sortable: {
+      type: Boolean,
+      default: false
     }
   },
   model: {
@@ -201,7 +206,8 @@ var _default2 = exports.default = createComponent({
       actionVisible: false,
       mediaPlayerVisible: false,
       mediaTypeToPlay: '',
-      mediaUrlToPlay: ''
+      mediaUrlToPlay: '',
+      sort: undefined
     };
   },
   computed: {
@@ -249,11 +255,36 @@ var _default2 = exports.default = createComponent({
           }
         }];
       }
+    },
+    showPreview: function showPreview() {
+      return this.mediaList.length > 0 && this.pickerMode !== "certificate";
+    }
+  },
+  watch: {
+    showPreview: function showPreview() {
+      var _this$$refs$grid,
+        _this2 = this;
+      if (this.sort || !this.sortable) return;
+      this.sort = _sortablejs.default.create((_this$$refs$grid = this.$refs.grid) == null ? void 0 : _this$$refs$grid.$el, {
+        animation: 200,
+        handle: ".zt2-grid-item",
+        onEnd: function onEnd(evt) {
+          var raws = _this2.exchangeArrayIndex(_this2.mediaList, evt.oldIndex, evt.newIndex);
+          _this2.$emit('input', raws);
+        }
+      });
     }
   },
   methods: {
+    exchangeArrayIndex: function exchangeArrayIndex(list, index, newIndex) {
+      var raws = [].concat(list);
+      var raw = raws[index];
+      raws.splice(index, 1);
+      raws.splice(newIndex, 0, raw);
+      return [].concat(raws);
+    },
     mediaPick: function mediaPick(mediaType, mediaAddType) {
-      var _this2 = this;
+      var _this3 = this;
       if (this.disabled) {
         return;
       }
@@ -275,7 +306,7 @@ var _default2 = exports.default = createComponent({
         if (this.useWx && (0, _device.isWeixin)() && window.wx) {
           var type = mediaAddType === _type.MediaAddType.TAKE ? 'camera' : 'album';
           (0, _wxUtil.wxUploadImage)(type).then(function (newMedias) {
-            _this2.$emit('input', [].concat(_this2.mediaList, newMedias));
+            _this3.$emit('input', [].concat(_this3.mediaList, newMedias));
           });
         } else {
           if (mediaAddType === _type.MediaAddType.TAKE) {
@@ -350,7 +381,7 @@ var _default2 = exports.default = createComponent({
       }
     },
     handleInputFiles: function handleInputFiles(event) {
-      var _this3 = this;
+      var _this4 = this;
       return (0, _asyncToGenerator2.default)(/*#__PURE__*/_regenerator.default.mark(function _callee() {
         var files, response, data;
         return _regenerator.default.wrap(function _callee$(_context) {
@@ -363,29 +394,29 @@ var _default2 = exports.default = createComponent({
               }
               return _context.abrupt("return");
             case 3:
-              if (_this3.pickerMode === "certificate") {
+              if (_this4.pickerMode === "certificate") {
                 files = [files[0]];
               }
-              files = _this3.filterValidFiles(files);
+              files = _this4.filterValidFiles(files);
               if (!(files.length === 0)) {
                 _context.next = 7;
                 break;
               }
               return _context.abrupt("return");
             case 7:
-              if (_this3.checkFileCountAfterAdd(files)) {
+              if (_this4.checkFileCountAfterAdd(files)) {
                 _context.next = 9;
                 break;
               }
               return _context.abrupt("return");
             case 9:
-              if (!_this3.beforeRead) {
+              if (!_this4.beforeRead) {
                 _context.next = 24;
                 break;
               }
               _context.prev = 10;
               _context.next = 13;
-              return _this3.beforeRead(files);
+              return _this4.beforeRead(files);
             case 13:
               response = _context.sent;
               if (response) {
@@ -398,9 +429,9 @@ var _default2 = exports.default = createComponent({
                 data = response.filter(function (item) {
                   return !!item;
                 });
-                _this3.readFiles(data);
+                _this4.readFiles(data);
               } else {
-                _this3.readFiles(files);
+                _this4.readFiles(files);
               }
               _context.next = 22;
               break;
@@ -412,7 +443,7 @@ var _default2 = exports.default = createComponent({
               _context.next = 25;
               break;
             case 24:
-              _this3.readFiles(files);
+              _this4.readFiles(files);
             case 25:
             case "end":
               return _context.stop();
@@ -421,12 +452,12 @@ var _default2 = exports.default = createComponent({
       }))();
     },
     readFiles: function readFiles(files) {
-      var _this4 = this;
+      var _this5 = this;
       // 处理非图片
       var notImages = files.filter(function (f) {
         return !(0, _mediaUtil.isImageType)(f);
       }).map(function (f) {
-        return _this4.transformNotImageFile(f);
+        return _this5.transformNotImageFile(f);
       });
       var newMedias = [];
       if (notImages.length > 0) {
@@ -447,13 +478,13 @@ var _default2 = exports.default = createComponent({
           newMedias = newMedias.concat(medias);
         }
       }).finally(function () {
-        if (_this4.pickerMode === "certificate") {
-          _this4.$emit('input', [].concat(newMedias));
+        if (_this5.pickerMode === "certificate") {
+          _this5.$emit('input', [].concat(newMedias));
         } else {
-          _this4.$emit('input', [].concat(_this4.mediaList, newMedias));
+          _this5.$emit('input', [].concat(_this5.mediaList, newMedias));
         }
-        if (_this4.afterRead) {
-          _this4.afterRead(newMedias);
+        if (_this5.afterRead) {
+          _this5.afterRead(newMedias);
         }
       });
     },
@@ -541,24 +572,24 @@ var _default2 = exports.default = createComponent({
      * @return {Promise<[Media]>}
      */
     transformImageFiles: function transformImageFiles(files) {
-      var _this5 = this;
+      var _this6 = this;
       var promisesTodo = [];
       var resizeOptions = new _appMediaUtils.ResizeOptions(this.maxImageSideLength);
       var compressOptions = new _appMediaUtils.CompressOptions(this.maxImageFileSize);
       var _loop = function _loop() {
         var inputFile = files[i];
-        var watermarkEnabled = _this5.watermarkOptions && _this5.watermarkOptions.watermarkConfigString && (0, _appMediaUtils.checkWatermarkConfigSupported)(_this5.watermarkOptions.watermarkConfigString);
+        var watermarkEnabled = _this6.watermarkOptions && _this6.watermarkOptions.watermarkConfigString && (0, _appMediaUtils.checkWatermarkConfigSupported)(_this6.watermarkOptions.watermarkConfigString);
         var watermarkOpt;
         if (watermarkEnabled) {
           watermarkOpt = new _appMediaUtils.WatermarkOptions({
             enabled: true,
-            watermarkConfigString: watermarkEnabled ? _this5.watermarkOptions.watermarkConfigString : '',
+            watermarkConfigString: watermarkEnabled ? _this6.watermarkOptions.watermarkConfigString : '',
             context: {
-              address: _this5.watermarkOptions.address || "",
-              humanName: _this5.watermarkOptions.humanName || _this5.watermarkOptions.humanname || "",
-              projectName: _this5.watermarkOptions.projectName || "",
-              logo: _this5.watermarkOptions.logo || "",
-              applicationName: _this5.watermarkOptions.applicationName || "",
+              address: _this6.watermarkOptions.address || "",
+              humanName: _this6.watermarkOptions.humanName || _this6.watermarkOptions.humanname || "",
+              projectName: _this6.watermarkOptions.projectName || "",
+              logo: _this6.watermarkOptions.logo || "",
+              applicationName: _this6.watermarkOptions.applicationName || "",
               watermarkTime: new Date()
             }
           });
@@ -670,62 +701,87 @@ var _default2 = exports.default = createComponent({
      * 点击预览
      */
     previewMedia: function previewMedia(media, index) {
-      if (this.preview && this.preview(media, index)) {
-        return;
-      }
-      if (media.type === _type.MediaType.PHOTO) {
-        var imageIndex = this.imageList.indexOf(media);
-        (0, _imagePreview.default)({
-          images: this.imageList.map(function (image) {
-            return {
-              url: image.showSrc
-            };
-          }),
-          startPosition: imageIndex,
-          closeable: true
-        });
-      } else if (media.type === _type.MediaType.AUDIO || media.type === _type.MediaType.VIDEO) {
-        if (!media.file && !media.url) {
-          (0, _toast.default)('文件参数缺失');
-        } else {
-          this.mediaTypeToPlay = media.type;
-          this.mediaUrlToPlay = media.url || (URL || webkitURL).createObjectURL(media.file);
-          // this.mediaUrlToPlay = 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'
-          this.mediaPlayerVisible = true;
-        }
-      } else {
-        (0, _toast.default)('暂不支持此类文件的预览');
-      }
-    },
-    onDelete: function onDelete(media, index) {
-      var _this6 = this;
+      var _this7 = this;
       return (0, _asyncToGenerator2.default)(/*#__PURE__*/_regenerator.default.mark(function _callee2() {
-        var response;
+        var imageIndex;
         return _regenerator.default.wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
-              if (!_this6.beforeDelete) {
-                _context2.next = 6;
+              _context2.t0 = _this7.preview;
+              if (!_context2.t0) {
+                _context2.next = 5;
                 break;
               }
-              _context2.next = 3;
-              return _this6.beforeDelete(media);
-            case 3:
-              response = _context2.sent;
-              if (response) {
-                _context2.next = 6;
+              _context2.next = 4;
+              return _this7.preview(media, index);
+            case 4:
+              _context2.t0 = _context2.sent;
+            case 5:
+              if (!_context2.t0) {
+                _context2.next = 7;
                 break;
               }
               return _context2.abrupt("return");
-            case 6:
-              _this6.deleteMedia(media, index);
             case 7:
+              if (media.type === _type.MediaType.PHOTO) {
+                imageIndex = _this7.imageList.indexOf(media);
+                (0, _imagePreview.default)({
+                  images: _this7.imageList.map(function (image) {
+                    return {
+                      url: image.showSrc
+                    };
+                  }),
+                  startPosition: imageIndex,
+                  closeable: true
+                });
+              } else if (media.type === _type.MediaType.AUDIO || media.type === _type.MediaType.VIDEO) {
+                if (!media.file && !media.url) {
+                  (0, _toast.default)('文件参数缺失');
+                } else {
+                  _this7.mediaTypeToPlay = media.type;
+                  _this7.mediaUrlToPlay = media.url || (URL || webkitURL).createObjectURL(media.file);
+                  // this.mediaUrlToPlay = 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'
+                  _this7.mediaPlayerVisible = true;
+                }
+              } else {
+                (0, _toast.default)('暂不支持此类文件的预览');
+              }
+            case 8:
             case "end":
               return _context2.stop();
           }
         }, _callee2);
       }))();
     },
+    onDelete: function onDelete(media, index) {
+      var _this8 = this;
+      return (0, _asyncToGenerator2.default)(/*#__PURE__*/_regenerator.default.mark(function _callee3() {
+        var response;
+        return _regenerator.default.wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
+            case 0:
+              if (!_this8.beforeDelete) {
+                _context3.next = 6;
+                break;
+              }
+              _context3.next = 3;
+              return _this8.beforeDelete(media);
+            case 3:
+              response = _context3.sent;
+              if (response) {
+                _context3.next = 6;
+                break;
+              }
+              return _context3.abrupt("return");
+            case 6:
+              _this8.deleteMedia(media, index);
+            case 7:
+            case "end":
+              return _context3.stop();
+          }
+        }, _callee3);
+      }))();
+    },
     deleteMedia: function deleteMedia(media, index) {
       var list = this.mediaList.slice(0);
       list.splice(index, 1);
@@ -733,7 +789,7 @@ var _default2 = exports.default = createComponent({
       this.$emit('delete', media, index);
     },
     hiddenInput: function hiddenInput() {
-      var _this7 = this;
+      var _this9 = this;
       var h = this.$createElement;
       return [h("input", {
         "attrs": {
@@ -746,7 +802,7 @@ var _default2 = exports.default = createComponent({
         "on": {
           "change": this.handleInputFiles,
           "click": function click() {
-            return _this7.resetInput(_type.MediaType.PHOTO, _type.MediaAddType.TAKE);
+            return _this9.resetInput(_type.MediaType.PHOTO, _type.MediaAddType.TAKE);
           }
         },
         "class": bem('hidden')
@@ -760,7 +816,7 @@ var _default2 = exports.default = createComponent({
         "on": {
           "change": this.handleInputFiles,
           "click": function click() {
-            return _this7.resetInput(_type.MediaType.PHOTO, _type.MediaAddType.PICK);
+            return _this9.resetInput(_type.MediaType.PHOTO, _type.MediaAddType.PICK);
           }
         },
         "class": bem('hidden')
@@ -774,7 +830,7 @@ var _default2 = exports.default = createComponent({
         "on": {
           "change": this.handleInputFiles,
           "click": function click() {
-            return _this7.resetInput(_type.MediaType.VIDEO, _type.MediaAddType.TAKE);
+            return _this9.resetInput(_type.MediaType.VIDEO, _type.MediaAddType.TAKE);
           }
         },
         "class": bem('hidden')
@@ -787,7 +843,7 @@ var _default2 = exports.default = createComponent({
         "on": {
           "change": this.handleInputFiles,
           "click": function click() {
-            return _this7.resetInput(_type.MediaType.VIDEO, _type.MediaAddType.PICK);
+            return _this9.resetInput(_type.MediaType.VIDEO, _type.MediaAddType.PICK);
           }
         },
         "class": bem('hidden')
@@ -801,7 +857,7 @@ var _default2 = exports.default = createComponent({
         "on": {
           "change": this.handleInputFiles,
           "click": function click() {
-            return _this7.resetInput(_type.MediaType.AUDIO, _type.MediaAddType.TAKE);
+            return _this9.resetInput(_type.MediaType.AUDIO, _type.MediaAddType.TAKE);
           }
         },
         "class": bem('hidden')
@@ -814,7 +870,7 @@ var _default2 = exports.default = createComponent({
         "on": {
           "change": this.handleInputFiles,
           "click": function click() {
-            return _this7.resetInput(_type.MediaType.AUDIO, _type.MediaAddType.PICK);
+            return _this9.resetInput(_type.MediaType.AUDIO, _type.MediaAddType.PICK);
           }
         },
         "class": bem('hidden')
@@ -827,14 +883,14 @@ var _default2 = exports.default = createComponent({
         "on": {
           "change": this.handleInputFiles,
           "click": function click() {
-            return _this7.resetInput(_type.MediaType.FILE, _type.MediaAddType.PICK);
+            return _this9.resetInput(_type.MediaType.FILE, _type.MediaAddType.PICK);
           }
         },
         "class": bem('hidden')
       })];
     },
     renderIcon: function renderIcon(mediaType, mediaAddType) {
-      var _this8 = this;
+      var _this10 = this;
       var h = this.$createElement;
       if (mediaType === _type.MediaType.PHOTO) {
         if (mediaAddType === _type.MediaAddType.TAKE) {
@@ -842,7 +898,7 @@ var _default2 = exports.default = createComponent({
             "class": bem('button'),
             "on": {
               "click": function click() {
-                return _this8.mediaPick(mediaType, mediaAddType);
+                return _this10.mediaPick(mediaType, mediaAddType);
               }
             }
           });
@@ -851,7 +907,7 @@ var _default2 = exports.default = createComponent({
             "class": bem('button'),
             "on": {
               "click": function click() {
-                return _this8.mediaPick(mediaType, mediaAddType);
+                return _this10.mediaPick(mediaType, mediaAddType);
               }
             }
           });
@@ -861,7 +917,7 @@ var _default2 = exports.default = createComponent({
           "class": bem('button'),
           "on": {
             "click": function click() {
-              return _this8.mediaPick(mediaType, mediaAddType);
+              return _this10.mediaPick(mediaType, mediaAddType);
             }
           }
         });
@@ -870,7 +926,7 @@ var _default2 = exports.default = createComponent({
           "class": bem('button'),
           "on": {
             "click": function click() {
-              return _this8.mediaPick(mediaType, mediaAddType);
+              return _this10.mediaPick(mediaType, mediaAddType);
             }
           }
         });
@@ -879,7 +935,7 @@ var _default2 = exports.default = createComponent({
           "class": bem('button'),
           "on": {
             "click": function click() {
-              return _this8.mediaPick(mediaType, mediaAddType);
+              return _this10.mediaPick(mediaType, mediaAddType);
             }
           }
         });
@@ -920,7 +976,7 @@ var _default2 = exports.default = createComponent({
       }
     },
     renderCertificates: function renderCertificates() {
-      var _this9 = this;
+      var _this11 = this;
       var h = this.$createElement;
       if (this.mediaList && this.mediaList.length) {
         var media = this.mediaList[0];
@@ -930,8 +986,8 @@ var _default2 = exports.default = createComponent({
           "on": {
             "click": function click(event) {
               event.stopPropagation();
-              _this9.onDelete(media, 0);
-              _this9.mediaPick(_type.MediaType.PHOTO, _type.MediaAddType.PICK);
+              _this11.onDelete(media, 0);
+              _this11.mediaPick(_type.MediaType.PHOTO, _type.MediaAddType.PICK);
             }
           }
         }, [h(_ReUpload.default, {
@@ -949,7 +1005,7 @@ var _default2 = exports.default = createComponent({
             "click": function click(event) {
               event.stopPropagation();
               // 证件照模式只有一张图片
-              _this9.previewMedia(media, 0);
+              _this11.previewMedia(media, 0);
             }
           }
         }, [reUpload]);
@@ -1041,6 +1097,11 @@ var _default2 = exports.default = createComponent({
      */
     renderMediaThumbnail: function renderMediaThumbnail(media) {
       var h = this.$createElement;
+      if (this.$scopedSlots['preview-media']) {
+        return this.slots('preview-media', {
+          file: media
+        });
+      }
       if (media.showSrc) {
         return h(_image.default, {
           "attrs": {
@@ -1084,7 +1145,7 @@ var _default2 = exports.default = createComponent({
       }
     },
     renderMediaList: function renderMediaList() {
-      var _this10 = this;
+      var _this12 = this;
       var h = this.$createElement;
       return this.mediaList.map(function (media, index) {
         var showDelete = media.deletable && media.status !== _type.MediaUploadStatus.UPLOADING;
@@ -1093,7 +1154,7 @@ var _default2 = exports.default = createComponent({
           "on": {
             "click": function click(event) {
               event.stopPropagation();
-              _this10.onDelete(media, index);
+              _this12.onDelete(media, index);
             }
           }
         });
@@ -1102,10 +1163,10 @@ var _default2 = exports.default = createComponent({
           "on": {
             "click": function click(event) {
               event.stopPropagation();
-              _this10.previewMedia(media, index);
+              _this12.previewMedia(media, index);
             }
           }
-        }, [_this10.renderMediaBox(media), _this10.genThumbnailMask(media), deleteIcon]);
+        }, [_this12.renderMediaBox(media), _this12.genThumbnailMask(media), deleteIcon]);
       });
     },
     selectAction: function selectAction(action) {
@@ -1114,7 +1175,7 @@ var _default2 = exports.default = createComponent({
     }
   },
   render: function render() {
-    var _this11 = this;
+    var _this13 = this;
     var h = arguments[0];
     var title = this.showTitle && h("div", {
       "class": bem('title')
@@ -1127,9 +1188,9 @@ var _default2 = exports.default = createComponent({
         "mediaUrl": this.mediaUrlToPlay
       }, this.mediaPlayerProps),
       "model": {
-        value: _this11.mediaPlayerVisible,
+        value: _this13.mediaPlayerVisible,
         callback: function callback($$v) {
-          _this11.mediaPlayerVisible = $$v;
+          _this13.mediaPlayerVisible = $$v;
         }
       }
     }), h(_actionSheet.default, {
@@ -1143,9 +1204,9 @@ var _default2 = exports.default = createComponent({
         "select": this.selectAction
       },
       "model": {
-        value: _this11.actionVisible,
+        value: _this13.actionVisible,
         callback: function callback($$v) {
-          _this11.actionVisible = $$v;
+          _this13.actionVisible = $$v;
         }
       }
     }), this.pickerMode === "certificate" ? h("div", {
@@ -1156,9 +1217,10 @@ var _default2 = exports.default = createComponent({
     }, [this.renderCertificates()]) : h("div", {
       "class": bem('line')
     }, [this.renderButtons(), this.slots('extend')]), h(_grid.default, {
+      "ref": "grid",
       "directives": [{
         name: "show",
-        value: this.mediaList.length && this.pickerMode !== "certificate"
+        value: this.showPreview
       }],
       "attrs": {
         "column-num": '3',