vxe-table 3.5.4 → 3.5.6

package/lib/input/src/input.js

@@ -37,7 +37,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-var yearSize = 20;
+var yearSize = 12;
 var monthSize = 20;
 var quarterSize = 8;
 
@@ -117,7 +117,9 @@ function renderDateDayTable(h, _vm) {
       dateValue = _vm.dateValue,
       datePanelValue = _vm.datePanelValue,
       dateHeaders = _vm.dateHeaders,
-      dayDatas = _vm.dayDatas;
+      dayDatas = _vm.dayDatas,
+      multiple = _vm.multiple,
+      dateListValue = _vm.dateListValue;
   var matchFormat = 'yyyy-MM-dd';
   return [h('table', {
     class: "vxe-input--date-".concat(datePanelType, "-view"),
@@ -137,7 +139,9 @@ function renderDateDayTable(h, _vm) {
           'is--now': item.isNow,
           'is--next': item.isNext,
           'is--disabled': isDateDisabled(_vm, item),
-          'is--selected': _xeUtils.default.isDateSame(dateValue, item.date, matchFormat),
+          'is--selected': multiple ? dateListValue.some(function (val) {
+            return _xeUtils.default.isDateSame(val, item.date, matchFormat);
+          }) : _xeUtils.default.isDateSame(dateValue, item.date, matchFormat),
           'is--hover': _xeUtils.default.isDateSame(datePanelValue, item.date, matchFormat)
         },
         on: {
@@ -158,7 +162,9 @@ function renderDateWeekTable(h, _vm) {
       dateValue = _vm.dateValue,
       datePanelValue = _vm.datePanelValue,
       weekHeaders = _vm.weekHeaders,
-      weekDates = _vm.weekDates;
+      weekDates = _vm.weekDates,
+      multiple = _vm.multiple,
+      dateListValue = _vm.dateListValue;
   var matchFormat = 'yyyyMMdd';
   return [h('table', {
     class: "vxe-input--date-".concat(datePanelType, "-view"),
@@ -170,7 +176,11 @@ function renderDateWeekTable(h, _vm) {
   }, [h('thead', [h('tr', weekHeaders.map(function (item) {
     return h('th', item.label);
   }))]), h('tbody', weekDates.map(function (rows) {
-    var isSelected = rows.some(function (item) {
+    var isSelected = multiple ? rows.some(function (item) {
+      return dateListValue.some(function (val) {
+        return _xeUtils.default.isDateSame(val, item.date, matchFormat);
+      });
+    }) : rows.some(function (item) {
       return _xeUtils.default.isDateSame(dateValue, item.date, matchFormat);
     });
     var isHover = rows.some(function (item) {
@@ -204,7 +214,9 @@ function renderDateMonthTable(h, _vm) {
   var dateValue = _vm.dateValue,
       datePanelType = _vm.datePanelType,
       monthDatas = _vm.monthDatas,
-      datePanelValue = _vm.datePanelValue;
+      datePanelValue = _vm.datePanelValue,
+      multiple = _vm.multiple,
+      dateListValue = _vm.dateListValue;
   var matchFormat = 'yyyyMM';
   return [h('table', {
     class: "vxe-input--date-".concat(datePanelType, "-view"),
@@ -222,7 +234,9 @@ function renderDateMonthTable(h, _vm) {
           'is--now': item.isNow,
           'is--next': item.isNext,
           'is--disabled': isDateDisabled(_vm, item),
-          'is--selected': _xeUtils.default.isDateSame(dateValue, item.date, matchFormat),
+          'is--selected': multiple ? dateListValue.some(function (val) {
+            return _xeUtils.default.isDateSame(val, item.date, matchFormat);
+          }) : _xeUtils.default.isDateSame(dateValue, item.date, matchFormat),
           'is--hover': _xeUtils.default.isDateSame(datePanelValue, item.date, matchFormat)
         },
         on: {
@@ -242,7 +256,9 @@ function renderDateQuarterTable(h, _vm) {
   var dateValue = _vm.dateValue,
       datePanelType = _vm.datePanelType,
       quarterDatas = _vm.quarterDatas,
-      datePanelValue = _vm.datePanelValue;
+      datePanelValue = _vm.datePanelValue,
+      multiple = _vm.multiple,
+      dateListValue = _vm.dateListValue;
   var matchFormat = 'yyyyq';
   return [h('table', {
     class: "vxe-input--date-".concat(datePanelType, "-view"),
@@ -260,7 +276,9 @@ function renderDateQuarterTable(h, _vm) {
           'is--now': item.isNow,
           'is--next': item.isNext,
           'is--disabled': isDateDisabled(_vm, item),
-          'is--selected': _xeUtils.default.isDateSame(dateValue, item.date, matchFormat),
+          'is--selected': multiple ? dateListValue.some(function (val) {
+            return _xeUtils.default.isDateSame(val, item.date, matchFormat);
+          }) : _xeUtils.default.isDateSame(dateValue, item.date, matchFormat),
           'is--hover': _xeUtils.default.isDateSame(datePanelValue, item.date, matchFormat)
         },
         on: {
@@ -280,7 +298,9 @@ function renderDateYearTable(h, _vm) {
   var dateValue = _vm.dateValue,
       datePanelType = _vm.datePanelType,
       yearDatas = _vm.yearDatas,
-      datePanelValue = _vm.datePanelValue;
+      datePanelValue = _vm.datePanelValue,
+      multiple = _vm.multiple,
+      dateListValue = _vm.dateListValue;
   var matchFormat = 'yyyy';
   return [h('table', {
     class: "vxe-input--date-".concat(datePanelType, "-view"),
@@ -293,10 +313,14 @@ function renderDateYearTable(h, _vm) {
     return h('tr', rows.map(function (item) {
       return h('td', {
         class: {
-          'is--disabled': isDateDisabled(_vm, item),
+          'is--prev': item.isPrev,
           'is--current': item.isCurrent,
           'is--now': item.isNow,
-          'is--selected': _xeUtils.default.isDateSame(dateValue, item.date, matchFormat),
+          'is--next': item.isNext,
+          'is--disabled': isDateDisabled(item),
+          'is--selected': multiple ? dateListValue.some(function (val) {
+            return _xeUtils.default.isDateSame(val, item.date, matchFormat);
+          }) : _xeUtils.default.isDateSame(dateValue, item.date, matchFormat),
           'is--hover': _xeUtils.default.isDateSame(datePanelValue, item.date, matchFormat)
         },
         on: {
@@ -336,7 +360,9 @@ function renderDatePanel(h, _vm) {
   var datePanelType = _vm.datePanelType,
       selectDatePanelLabel = _vm.selectDatePanelLabel,
       isDisabledPrevDateBtn = _vm.isDisabledPrevDateBtn,
-      isDisabledNextDateBtn = _vm.isDisabledNextDateBtn;
+      isDisabledNextDateBtn = _vm.isDisabledNextDateBtn,
+      multiple = _vm.multiple,
+      supportMultiples = _vm.supportMultiples;
   return [h('div', {
     class: 'vxe-input--date-picker-header'
   }, [h('div', {
@@ -375,7 +401,17 @@ function renderDatePanel(h, _vm) {
     }
   }, [h('i', {
     class: 'vxe-icon--caret-right'
-  })])])]), h('div', {
+  })]), multiple && supportMultiples ? h('span', {
+    class: 'vxe-input--date-picker-btn vxe-input--date-picker-confirm-btn'
+  }, [h('button', {
+    class: 'vxe-input--date-picker-confirm',
+    attrs: {
+      type: 'button'
+    },
+    on: {
+      click: _vm.dateConfirmEvent
+    }
+  }, _conf.default.i18n('vxe.button.confirm'))]) : null])]), h('div', {
     class: 'vxe-input--date-picker-body'
   }, renderDateTable(h, _vm))];
 }
@@ -672,6 +708,7 @@ var _default2 = {
         return _conf.default.input.size || _conf.default.size;
       }
     },
+    multiple: Boolean,
     // number、integer、float
     min: {
       type: [String, Number],
@@ -792,9 +829,9 @@ var _default2 = {
       return ['number', 'integer', 'float'].indexOf(this.type) > -1;
     },
     isDatePickerType: function isDatePickerType() {
-      return this.hasTime || ['date', 'week', 'month', 'quarter', 'year'].indexOf(this.type) > -1;
+      return this.isDateTimeType || ['date', 'week', 'month', 'quarter', 'year'].indexOf(this.type) > -1;
     },
-    hasTime: function hasTime() {
+    isDateTimeType: function isDateTimeType() {
       var type = this.type;
       return type === 'time' || type === 'datetime';
     },
@@ -848,6 +885,45 @@ var _default2 = {
     dateMaxTime: function dateMaxTime() {
       return this.maxDate ? _xeUtils.default.toStringDate(this.maxDate) : null;
     },
+    supportMultiples: function supportMultiples() {
+      return ['date', 'week', 'month', 'quarter', 'year'].includes(this.type);
+    },
+    dateListValue: function dateListValue() {
+      var _this = this;
+
+      var value = this.value,
+          multiple = this.multiple,
+          isDatePickerType = this.isDatePickerType,
+          dateValueFormat = this.dateValueFormat;
+
+      if (multiple && value && isDatePickerType) {
+        return _xeUtils.default.toValueString(value).split(',').map(function (item) {
+          var date = _this.parseDate(item, dateValueFormat);
+
+          if (_xeUtils.default.isValidDate(date)) {
+            return date;
+          }
+
+          return null;
+        });
+      }
+
+      return [];
+    },
+    dateMultipleValue: function dateMultipleValue() {
+      var dateListValue = this.dateListValue,
+          dateValueFormat = this.dateValueFormat;
+      return dateListValue.map(function (date) {
+        return _xeUtils.default.toDateString(date, dateValueFormat);
+      });
+    },
+    dateMultipleLabel: function dateMultipleLabel() {
+      var dateListValue = this.dateListValue,
+          dateLabelFormat = this.dateLabelFormat;
+      return dateListValue.map(function (date) {
+        return _xeUtils.default.toDateString(date, dateLabelFormat);
+      }).join(', ');
+    },
     dateValue: function dateValue() {
       var value = this.value,
           isDatePickerType = this.isDatePickerType,
@@ -875,7 +951,7 @@ var _default2 = {
     },
     hmsTime: function hmsTime() {
       var dateValue = this.dateValue;
-      return dateValue && this.hasTime ? (dateValue.getHours() * 3600 + dateValue.getMinutes() * 60 + dateValue.getSeconds()) * 1000 : 0;
+      return dateValue && this.isDateTimeType ? (dateValue.getHours() * 3600 + dateValue.getMinutes() * 60 + dateValue.getSeconds()) * 1000 : 0;
     },
     dateLabelFormat: function dateLabelFormat() {
       if (this.isDatePickerType) {
@@ -967,16 +1043,19 @@ var _default2 = {
 
       if (selectMonth && currentDate) {
         var currFullYear = currentDate.getFullYear();
-        var startYear = new Date(('' + selectMonth.getFullYear()).replace(/\d{1}$/, '0'), 0, 1);
+        var selectFullYear = selectMonth.getFullYear();
+        var startYearDate = new Date(selectFullYear - selectFullYear % yearSize, 0, 1);
 
-        for (var index = -10; index < yearSize - 10; index++) {
-          var date = _xeUtils.default.getWhatYear(startYear, index, 'first');
+        for (var index = -4; index < yearSize + 4; index++) {
+          var date = _xeUtils.default.getWhatYear(startYearDate, index, 'first');
 
           var itemFullYear = date.getFullYear();
           months.push({
             date: date,
             isCurrent: true,
+            isPrev: index < 0,
             isNow: currFullYear === itemFullYear,
+            isNext: index >= yearSize,
             year: itemFullYear
           });
         }
@@ -1115,7 +1194,7 @@ var _default2 = {
     hourList: function hourList() {
       var list = [];
 
-      if (this.hasTime) {
+      if (this.isDateTimeType) {
         for (var index = 0; index < 24; index++) {
           list.push({
             value: index,
@@ -1129,7 +1208,7 @@ var _default2 = {
     minuteList: function minuteList() {
       var list = [];
 
-      if (this.hasTime) {
+      if (this.isDateTimeType) {
         for (var index = 0; index < 60; index++) {
           list.push({
             value: index,
@@ -1179,8 +1258,9 @@ var _default2 = {
     inpReadonly: function inpReadonly() {
       var type = this.type,
           readonly = this.readonly,
-          editable = this.editable;
-      return readonly || !editable || type === 'week' || type === 'quarter';
+          editable = this.editable,
+          multiple = this.multiple;
+      return readonly || multiple || !editable || type === 'week' || type === 'quarter';
     }
   },
   watch: {
@@ -1204,7 +1284,7 @@ var _default2 = {
     dateLabelFormat: function dateLabelFormat() {
       if (this.isDatePickerType) {
         this.dateParseValue(this.datePanelValue);
-        this.inputValue = this.datePanelLabel;
+        this.inputValue = this.multiple ? this.dateMultipleLabel : this.datePanelLabel;
       }
     }
   },
@@ -1545,7 +1625,7 @@ var _default2 = {
     changeValue: function changeValue() {
       if (this.isDatePickerType) {
         this.dateParseValue(this.inputValue);
-        this.inputValue = this.datePanelLabel;
+        this.inputValue = this.multiple ? this.dateMultipleLabel : this.datePanelLabel;
       }
     },
     afterCheckValue: function afterCheckValue() {
@@ -1669,21 +1749,21 @@ var _default2 = {
       clearTimeout(this.downbumTimeout);
     },
     numberDownPrevEvent: function numberDownPrevEvent(evnt) {
-      var _this = this;
+      var _this2 = this;
 
       this.downbumTimeout = setTimeout(function () {
-        _this.numberPrevEvent(evnt);
+        _this2.numberPrevEvent(evnt);
 
-        _this.numberDownPrevEvent(evnt);
+        _this2.numberDownPrevEvent(evnt);
       }, 60);
     },
     numberDownNextEvent: function numberDownNextEvent(evnt) {
-      var _this2 = this;
+      var _this3 = this;
 
       this.downbumTimeout = setTimeout(function () {
-        _this2.numberNextEvent(evnt);
+        _this3.numberNextEvent(evnt);
 
-        _this2.numberDownNextEvent(evnt);
+        _this3.numberDownNextEvent(evnt);
       }, 60);
     },
     numberKeydownEvent: function numberKeydownEvent(evnt) {
@@ -1702,7 +1782,7 @@ var _default2 = {
       }
     },
     numberMousedownEvent: function numberMousedownEvent(evnt) {
-      var _this3 = this;
+      var _this4 = this;
 
       this.numberStopDown();
 
@@ -1717,9 +1797,9 @@ var _default2 = {
 
         this.downbumTimeout = setTimeout(function () {
           if (isPrevNumber) {
-            _this3.numberDownPrevEvent(evnt);
+            _this4.numberDownPrevEvent(evnt);
           } else {
-            _this3.numberDownNextEvent(evnt);
+            _this4.numberDownNextEvent(evnt);
           }
         }, 500);
       }
@@ -1832,8 +1912,12 @@ var _default2 = {
     },
     dateTodayMonthEvent: function dateTodayMonthEvent(evnt) {
       this.dateNowHandle();
-      this.dateChange(this.currentDate);
-      this.hidePanel();
+
+      if (!this.multiple) {
+        this.dateChange(this.currentDate);
+        this.hidePanel();
+      }
+
       this.$emit('date-today', {
         type: this.type,
         $event: evnt
@@ -1876,7 +1960,8 @@ var _default2 = {
     },
     dateSelectItem: function dateSelectItem(date) {
       var type = this.type,
-          datePanelType = this.datePanelType;
+          datePanelType = this.datePanelType,
+          multiple = this.multiple;
       var isWeekType = type === 'week';
 
       if (type === 'month') {
@@ -1885,18 +1970,27 @@ var _default2 = {
           this.dateCheckMonth(date);
         } else {
           this.dateChange(date);
-          this.hidePanel();
+
+          if (!multiple) {
+            this.hidePanel();
+          }
         }
       } else if (type === 'year') {
-        this.hidePanel();
         this.dateChange(date);
+
+        if (!multiple) {
+          this.hidePanel();
+        }
       } else if (type === 'quarter') {
         if (datePanelType === 'year') {
           this.datePanelType = 'quarter';
           this.dateCheckMonth(date);
         } else {
           this.dateChange(date);
-          this.hidePanel();
+
+          if (!multiple) {
+            this.hidePanel();
+          }
         }
       } else {
         if (datePanelType === 'month') {
@@ -1907,7 +2001,10 @@ var _default2 = {
           this.dateCheckMonth(date);
         } else {
           this.dateChange(date);
-          this.hidePanel();
+
+          if (!multiple) {
+            this.hidePanel();
+          }
         }
       }
 
@@ -2138,13 +2235,15 @@ var _default2 = {
       var value = this.value,
           datetimePanelValue = this.datetimePanelValue,
           dateValueFormat = this.dateValueFormat,
-          firstDayOfWeek = this.firstDayOfWeek;
+          firstDayOfWeek = this.firstDayOfWeek,
+          isDateTimeType = this.isDateTimeType,
+          multiple = this.multiple;
 
       if (this.type === 'week') {
         var sWeek = _xeUtils.default.toNumber(this.selectDay);
 
         date = _xeUtils.default.getWhatWeek(date, 0, sWeek, firstDayOfWeek);
-      } else if (this.hasTime) {
+      } else if (isDateTimeType) {
         date.setHours(datetimePanelValue.getHours());
         date.setMinutes(datetimePanelValue.getMinutes());
         date.setSeconds(datetimePanelValue.getSeconds());
@@ -2156,10 +2255,51 @@ var _default2 = {
 
       this.dateCheckMonth(date);
 
-      if (!_xeUtils.default.isEqual(value, inpVal)) {
-        this.emitModel(inpVal, {
-          type: 'update'
-        });
+      if (multiple) {
+        // 如果为多选
+        var dateMultipleValue = this.dateMultipleValue;
+
+        if (isDateTimeType) {
+          // 如果是datetime特殊类型
+          var dateListValue = this.dateListValue;
+          var datetimeRest = [];
+          dateListValue.forEach(function (item) {
+            if (item && !_xeUtils.default.isDateSame(date, item, 'yyyyMMdd')) {
+              item.setHours(datetimePanelValue.getHours());
+              item.setMinutes(datetimePanelValue.getMinutes());
+              item.setSeconds(datetimePanelValue.getSeconds());
+              datetimeRest.push(item);
+            }
+          });
+          datetimeRest.push(date);
+          this.emitModel(datetimeRest.map(function (date) {
+            return _xeUtils.default.toDateString(date, dateValueFormat);
+          }).join(','), {
+            type: 'update'
+          });
+        } else {
+          // 如果是日期类型
+          if (dateMultipleValue.some(function (val) {
+            return _xeUtils.default.isEqual(val, inpVal);
+          })) {
+            this.emitModel(dateMultipleValue.filter(function (val) {
+              return !_xeUtils.default.isEqual(val, inpVal);
+            }).join(','), {
+              type: 'update'
+            });
+          } else {
+            this.emitModel(dateMultipleValue.concat([inpVal]).join(','), {
+              type: 'update'
+            });
+          }
+        }
+      } else {
+        // 如果为单选
+        if (!_xeUtils.default.isEqual(value, inpVal)) {
+          this.emitModel(inpVal, {
+            type: 'update'
+          });
+        }
       }
     },
     dateCheckMonth: function dateCheckMonth(date) {
@@ -2170,7 +2310,7 @@ var _default2 = {
       }
     },
     dateOpenPanel: function dateOpenPanel() {
-      var _this4 = this;
+      var _this5 = this;
 
       var type = this.type,
           dateValue = this.dateValue;
@@ -2190,15 +2330,15 @@ var _default2 = {
         this.dateNowHandle();
       }
 
-      if (this.hasTime) {
+      if (this.isDateTimeType) {
         this.datetimePanelValue = this.datePanelValue || _xeUtils.default.getWhatDay(Date.now(), 0, 'first');
         this.$nextTick(function () {
-          _xeUtils.default.arrayEach(_this4.$refs.timeBody.querySelectorAll('li.is--selected'), _this4.updateTimePos);
+          _xeUtils.default.arrayEach(_this5.$refs.timeBody.querySelectorAll('li.is--selected'), _this5.updateTimePos);
         });
       }
     },
     dateRevert: function dateRevert() {
-      this.inputValue = this.datePanelLabel;
+      this.inputValue = this.multiple ? this.dateMultipleLabel : this.datePanelLabel;
     },
     // 日期
     // 弹出面板
@@ -2208,7 +2348,7 @@ var _default2 = {
       }
     },
     showPanel: function showPanel() {
-      var _this5 = this;
+      var _this6 = this;
 
       var disabled = this.disabled,
           visiblePanel = this.visiblePanel,
@@ -2224,28 +2364,33 @@ var _default2 = {
         }
 
         setTimeout(function () {
-          _this5.visiblePanel = true;
+          _this6.visiblePanel = true;
         }, 10);
         this.updateZindex();
-        this.updatePlacement();
+        return this.updatePlacement();
       }
+
+      return this.$nextTick();
     },
     hidePanel: function hidePanel() {
-      var _this6 = this;
+      var _this7 = this;
 
-      this.visiblePanel = false;
-      this.hidePanelTimeout = setTimeout(function () {
-        _this6.animatVisible = false;
-      }, 350);
+      return new Promise(function (resolve) {
+        _this7.visiblePanel = false;
+        _this7.hidePanelTimeout = setTimeout(function () {
+          _this7.animatVisible = false;
+          resolve();
+        }, 350);
+      });
     },
     updatePlacement: function updatePlacement() {
-      var _this7 = this;
+      var _this8 = this;
 
       return this.$nextTick().then(function () {
-        var $refs = _this7.$refs,
-            transfer = _this7.transfer,
-            placement = _this7.placement,
-            panelIndex = _this7.panelIndex;
+        var $refs = _this8.$refs,
+            transfer = _this8.transfer,
+            placement = _this8.placement,
+            panelIndex = _this8.panelIndex;
         var targetElem = $refs.input;
         var panelElem = $refs.panel;
 
@@ -2319,9 +2464,9 @@ var _default2 = {
             }
           }
 
-          _this7.panelStyle = panelStyle;
-          _this7.panelPlacement = panelPlacement;
-          return _this7.$nextTick();
+          _this8.panelStyle = panelStyle;
+          _this8.panelPlacement = panelPlacement;
+          return _this8.$nextTick();
         }
       });
     },