zartui 2.1.20 → 2.1.21

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()
             }
           });
@@ -698,18 +729,18 @@ var _default2 = exports.default = createComponent({
       }
     },
     onDelete: function onDelete(media, index) {
-      var _this6 = this;
+      var _this7 = this;
       return (0, _asyncToGenerator2.default)(/*#__PURE__*/_regenerator.default.mark(function _callee2() {
         var response;
         return _regenerator.default.wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
-              if (!_this6.beforeDelete) {
+              if (!_this7.beforeDelete) {
                 _context2.next = 6;
                 break;
               }
               _context2.next = 3;
-              return _this6.beforeDelete(media);
+              return _this7.beforeDelete(media);
             case 3:
               response = _context2.sent;
               if (response) {
@@ -718,7 +749,7 @@ var _default2 = exports.default = createComponent({
               }
               return _context2.abrupt("return");
             case 6:
-              _this6.deleteMedia(media, index);
+              _this7.deleteMedia(media, index);
             case 7:
             case "end":
               return _context2.stop();
@@ -733,7 +764,7 @@ var _default2 = exports.default = createComponent({
       this.$emit('delete', media, index);
     },
     hiddenInput: function hiddenInput() {
-      var _this7 = this;
+      var _this8 = this;
       var h = this.$createElement;
       return [h("input", {
         "attrs": {
@@ -746,7 +777,7 @@ var _default2 = exports.default = createComponent({
         "on": {
           "change": this.handleInputFiles,
           "click": function click() {
-            return _this7.resetInput(_type.MediaType.PHOTO, _type.MediaAddType.TAKE);
+            return _this8.resetInput(_type.MediaType.PHOTO, _type.MediaAddType.TAKE);
           }
         },
         "class": bem('hidden')
@@ -760,7 +791,7 @@ var _default2 = exports.default = createComponent({
         "on": {
           "change": this.handleInputFiles,
           "click": function click() {
-            return _this7.resetInput(_type.MediaType.PHOTO, _type.MediaAddType.PICK);
+            return _this8.resetInput(_type.MediaType.PHOTO, _type.MediaAddType.PICK);
           }
         },
         "class": bem('hidden')
@@ -774,7 +805,7 @@ var _default2 = exports.default = createComponent({
         "on": {
           "change": this.handleInputFiles,
           "click": function click() {
-            return _this7.resetInput(_type.MediaType.VIDEO, _type.MediaAddType.TAKE);
+            return _this8.resetInput(_type.MediaType.VIDEO, _type.MediaAddType.TAKE);
           }
         },
         "class": bem('hidden')
@@ -787,7 +818,7 @@ var _default2 = exports.default = createComponent({
         "on": {
           "change": this.handleInputFiles,
           "click": function click() {
-            return _this7.resetInput(_type.MediaType.VIDEO, _type.MediaAddType.PICK);
+            return _this8.resetInput(_type.MediaType.VIDEO, _type.MediaAddType.PICK);
           }
         },
         "class": bem('hidden')
@@ -801,7 +832,7 @@ var _default2 = exports.default = createComponent({
         "on": {
           "change": this.handleInputFiles,
           "click": function click() {
-            return _this7.resetInput(_type.MediaType.AUDIO, _type.MediaAddType.TAKE);
+            return _this8.resetInput(_type.MediaType.AUDIO, _type.MediaAddType.TAKE);
           }
         },
         "class": bem('hidden')
@@ -814,7 +845,7 @@ var _default2 = exports.default = createComponent({
         "on": {
           "change": this.handleInputFiles,
           "click": function click() {
-            return _this7.resetInput(_type.MediaType.AUDIO, _type.MediaAddType.PICK);
+            return _this8.resetInput(_type.MediaType.AUDIO, _type.MediaAddType.PICK);
           }
         },
         "class": bem('hidden')
@@ -827,14 +858,14 @@ var _default2 = exports.default = createComponent({
         "on": {
           "change": this.handleInputFiles,
           "click": function click() {
-            return _this7.resetInput(_type.MediaType.FILE, _type.MediaAddType.PICK);
+            return _this8.resetInput(_type.MediaType.FILE, _type.MediaAddType.PICK);
           }
         },
         "class": bem('hidden')
       })];
     },
     renderIcon: function renderIcon(mediaType, mediaAddType) {
-      var _this8 = this;
+      var _this9 = this;
       var h = this.$createElement;
       if (mediaType === _type.MediaType.PHOTO) {
         if (mediaAddType === _type.MediaAddType.TAKE) {
@@ -842,7 +873,7 @@ var _default2 = exports.default = createComponent({
             "class": bem('button'),
             "on": {
               "click": function click() {
-                return _this8.mediaPick(mediaType, mediaAddType);
+                return _this9.mediaPick(mediaType, mediaAddType);
               }
             }
           });
@@ -851,7 +882,7 @@ var _default2 = exports.default = createComponent({
             "class": bem('button'),
             "on": {
               "click": function click() {
-                return _this8.mediaPick(mediaType, mediaAddType);
+                return _this9.mediaPick(mediaType, mediaAddType);
               }
             }
           });
@@ -861,7 +892,7 @@ var _default2 = exports.default = createComponent({
           "class": bem('button'),
           "on": {
             "click": function click() {
-              return _this8.mediaPick(mediaType, mediaAddType);
+              return _this9.mediaPick(mediaType, mediaAddType);
             }
           }
         });
@@ -870,7 +901,7 @@ var _default2 = exports.default = createComponent({
           "class": bem('button'),
           "on": {
             "click": function click() {
-              return _this8.mediaPick(mediaType, mediaAddType);
+              return _this9.mediaPick(mediaType, mediaAddType);
             }
           }
         });
@@ -879,7 +910,7 @@ var _default2 = exports.default = createComponent({
           "class": bem('button'),
           "on": {
             "click": function click() {
-              return _this8.mediaPick(mediaType, mediaAddType);
+              return _this9.mediaPick(mediaType, mediaAddType);
             }
           }
         });
@@ -920,7 +951,7 @@ var _default2 = exports.default = createComponent({
       }
     },
     renderCertificates: function renderCertificates() {
-      var _this9 = this;
+      var _this10 = this;
       var h = this.$createElement;
       if (this.mediaList && this.mediaList.length) {
         var media = this.mediaList[0];
@@ -930,8 +961,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);
+              _this10.onDelete(media, 0);
+              _this10.mediaPick(_type.MediaType.PHOTO, _type.MediaAddType.PICK);
             }
           }
         }, [h(_ReUpload.default, {
@@ -949,7 +980,7 @@ var _default2 = exports.default = createComponent({
             "click": function click(event) {
               event.stopPropagation();
               // 证件照模式只有一张图片
-              _this9.previewMedia(media, 0);
+              _this10.previewMedia(media, 0);
             }
           }
         }, [reUpload]);
@@ -1084,7 +1115,7 @@ var _default2 = exports.default = createComponent({
       }
     },
     renderMediaList: function renderMediaList() {
-      var _this10 = this;
+      var _this11 = this;
       var h = this.$createElement;
       return this.mediaList.map(function (media, index) {
         var showDelete = media.deletable && media.status !== _type.MediaUploadStatus.UPLOADING;
@@ -1093,7 +1124,7 @@ var _default2 = exports.default = createComponent({
           "on": {
             "click": function click(event) {
               event.stopPropagation();
-              _this10.onDelete(media, index);
+              _this11.onDelete(media, index);
             }
           }
         });
@@ -1102,10 +1133,10 @@ var _default2 = exports.default = createComponent({
           "on": {
             "click": function click(event) {
               event.stopPropagation();
-              _this10.previewMedia(media, index);
+              _this11.previewMedia(media, index);
             }
           }
-        }, [_this10.renderMediaBox(media), _this10.genThumbnailMask(media), deleteIcon]);
+        }, [_this11.renderMediaBox(media), _this11.genThumbnailMask(media), deleteIcon]);
       });
     },
     selectAction: function selectAction(action) {
@@ -1114,7 +1145,7 @@ var _default2 = exports.default = createComponent({
     }
   },
   render: function render() {
-    var _this11 = this;
+    var _this12 = this;
     var h = arguments[0];
     var title = this.showTitle && h("div", {
       "class": bem('title')
@@ -1127,9 +1158,9 @@ var _default2 = exports.default = createComponent({
         "mediaUrl": this.mediaUrlToPlay
       }, this.mediaPlayerProps),
       "model": {
-        value: _this11.mediaPlayerVisible,
+        value: _this12.mediaPlayerVisible,
         callback: function callback($$v) {
-          _this11.mediaPlayerVisible = $$v;
+          _this12.mediaPlayerVisible = $$v;
         }
       }
     }), h(_actionSheet.default, {
@@ -1143,9 +1174,9 @@ var _default2 = exports.default = createComponent({
         "select": this.selectAction
       },
       "model": {
-        value: _this11.actionVisible,
+        value: _this12.actionVisible,
         callback: function callback($$v) {
-          _this11.actionVisible = $$v;
+          _this12.actionVisible = $$v;
         }
       }
     }), this.pickerMode === "certificate" ? h("div", {
@@ -1156,9 +1187,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',