vxe-pc-ui 3.6.25 → 3.6.27

package/es/button/src/button.js

@@ -276,7 +276,7 @@ export default {
                 }
                 internalData.showTime = setTimeout(() => {
                     if (panelElem.dataset.active === 'Y') {
-                        this.mouseenterDropdownEvent();
+                        $xeButton.mouseenterDropdownEvent();
                     }
                     else {
                         reactData.isAniVisible = false;
@@ -312,7 +312,7 @@ export default {
                 reactData.isAniVisible = false;
                 reactData.visiblePanel = false;
             }
-            return this.$nextTick();
+            return $xeButton.$nextTick();
         },
         focus() {
             const $xeButton = this;
@@ -328,7 +328,7 @@ export default {
             if (btnElem) {
                 btnElem.blur();
             }
-            return this.$nextTick();
+            return $xeButton.$nextTick();
         },
         //
         // privateMethods
@@ -365,11 +365,12 @@ export default {
         },
         clickEvent(evnt) {
             const $xeButton = this;
+            const props = $xeButton;
             const $xeButtonGroup = $xeButton.$xeButtonGroup;
             if ($xeButtonGroup) {
-                $xeButtonGroup.handleClick({ name: this.name }, evnt);
+                $xeButtonGroup.handleClick({ name: props.name }, evnt);
             }
-            this.dispatchEvent('click', { $event: evnt }, evnt);
+            $xeButton.dispatchEvent('click', { $event: evnt }, evnt);
         },
         downBtnClickEvent(params, option) {
             const $xeButton = this;
@@ -387,7 +388,7 @@ export default {
             const $xeButton = this;
             const reactData = $xeButton.reactData;
             const dropdownElem = evnt.currentTarget;
-            const panelElem = this.$refs.refBtnPanel;
+            const panelElem = $xeButton.$refs.refBtnPanel;
             const { flag, targetElem } = getEventTargetNode(evnt, dropdownElem, 'vxe-button');
             if (flag) {
                 if (panelElem) {
@@ -399,24 +400,24 @@ export default {
                         reactData.isAniVisible = false;
                     }
                 }, 350);
-                this.dispatchEvent('dropdown-click', { name: targetElem.getAttribute('name'), option: null, $event: evnt }, evnt);
+                $xeButton.dispatchEvent('dropdown-click', { name: targetElem.getAttribute('name'), option: null, $event: evnt }, evnt);
             }
         },
         mouseenterDropdownEvent() {
             const $xeButton = this;
             const reactData = $xeButton.reactData;
-            const panelElem = this.$refs.refBtnPanel;
+            const panelElem = $xeButton.$refs.refBtnPanel;
             if (panelElem) {
                 panelElem.dataset.active = 'Y';
                 reactData.isAniVisible = true;
                 setTimeout(() => {
                     if (panelElem.dataset.active === 'Y') {
                         reactData.visiblePanel = true;
-                        this.updateZindex();
-                        this.updatePlacement();
+                        $xeButton.updateZindex();
+                        $xeButton.updatePlacement();
                         setTimeout(() => {
                             if (reactData.visiblePanel) {
-                                this.updatePlacement();
+                                $xeButton.updatePlacement();
                             }
                         }, 50);
                     }
@@ -429,19 +430,22 @@ export default {
             const { loading } = props;
             const btnDisabled = $xeButton.computeBtnDisabled;
             if (!(btnDisabled || loading)) {
-                this.openPanel();
-                this.mouseenterEvent(evnt);
+                $xeButton.openPanel();
+                $xeButton.mouseenterEvent(evnt);
             }
         },
         mouseleaveTargetEvent(evnt) {
-            this.hidePanel();
-            this.mouseleaveEvent(evnt);
+            const $xeButton = this;
+            $xeButton.hidePanel();
+            $xeButton.mouseleaveEvent(evnt);
         },
         mouseenterEvent(evnt) {
-            this.dispatchEvent('mouseenter', {}, evnt);
+            const $xeButton = this;
+            $xeButton.dispatchEvent('mouseenter', {}, evnt);
         },
         mouseleaveEvent(evnt) {
-            this.dispatchEvent('mouseleave', {}, evnt);
+            const $xeButton = this;
+            $xeButton.dispatchEvent('mouseleave', {}, evnt);
         },
         clickTargetEvent(evnt) {
             const $xeButton = this;
@@ -453,40 +457,49 @@ export default {
                 const { trigger } = props;
                 if (trigger === 'click') {
                     if (reactData.visiblePanel) {
-                        this.hidePanel();
+                        $xeButton.hidePanel();
                     }
                     else {
-                        this.openPanel();
+                        $xeButton.openPanel();
                     }
                 }
-                this.clickEvent(evnt);
+                $xeButton.clickEvent(evnt);
             }
         },
         mouseleaveDropdownEvent() {
-            this.hidePanel();
+            const $xeButton = this;
+            $xeButton.hidePanel();
         },
         handleGlobalMousewheelEvent(evnt) {
             const $xeButton = this;
             const reactData = $xeButton.reactData;
-            const panelElem = this.$refs.refBtnPanel;
+            const panelElem = $xeButton.$refs.refBtnPanel;
             if (reactData.visiblePanel && !getEventTargetNode(evnt, panelElem).flag) {
-                this.hidePanel();
+                $xeButton.hidePanel();
             }
         },
         handleGlobalMousedownEvent(evnt) {
             const $xeButton = this;
             const reactData = $xeButton.reactData;
-            const btnDisabled = this.computeBtnDisabled;
+            const btnDisabled = $xeButton.computeBtnDisabled;
             const { visiblePanel } = reactData;
             if (!btnDisabled) {
-                const el = this.$refs.refElem;
-                const panelElem = this.$refs.refBtnPanel;
+                const el = $xeButton.$refs.refElem;
+                const panelElem = $xeButton.$refs.refBtnPanel;
                 reactData.isActivated = getEventTargetNode(evnt, el).flag || getEventTargetNode(evnt, panelElem).flag;
                 if (visiblePanel && !reactData.isActivated) {
-                    this.hidePanel();
+                    $xeButton.hidePanel();
                 }
             }
         },
+        handleGlobalResizeEvent() {
+            const $xeButton = this;
+            const reactData = $xeButton.reactData;
+            const { visiblePanel } = reactData;
+            if (visiblePanel) {
+                $xeButton.updatePlacement();
+            }
+        },
         //
         // Render
         //
@@ -752,6 +765,7 @@ export default {
         }
         globalEvents.on($xeButton, 'mousewheel', $xeButton.handleGlobalMousewheelEvent);
         globalEvents.on($xeButton, 'mousedown', $xeButton.handleGlobalMousedownEvent);
+        globalEvents.on($xeButton, 'resize', $xeButton.handleGlobalResizeEvent);
     },
     beforeDestroy() {
         const $xeButton = this;
@@ -764,6 +778,7 @@ export default {
         const $xeButton = this;
         globalEvents.off($xeButton, 'mousewheel');
         globalEvents.off($xeButton, 'mousedown');
+        globalEvents.off($xeButton, 'resize');
     },
     render(h) {
         return this.renderVN(h);

package/es/color-picker/src/color-picker.js

@@ -653,6 +653,14 @@ export default {
             const $xeColorPicker = this;
             $xeColorPicker.hideOptionPanel();
         },
+        handleGlobalResizeEvent() {
+            const $xeColorPicker = this;
+            const reactData = $xeColorPicker.reactData;
+            const { visiblePanel } = reactData;
+            if (visiblePanel) {
+                $xeColorPicker.updatePlacement();
+            }
+        },
         //
         // Render
         //
@@ -1063,6 +1071,7 @@ export default {
         globalEvents.on($xeColorPicker, 'mousewheel', $xeColorPicker.handleGlobalMousewheelEvent);
         globalEvents.on($xeColorPicker, 'mousedown', $xeColorPicker.handleGlobalMousedownEvent);
         globalEvents.on($xeColorPicker, 'blur', $xeColorPicker.handleGlobalBlurEvent);
+        globalEvents.on($xeColorPicker, 'resize', $xeColorPicker.handleGlobalResizeEvent);
     },
     beforeDestroy() {
         const $xeColorPicker = this;
@@ -1073,6 +1082,7 @@ export default {
         globalEvents.off($xeColorPicker, 'mousewheel');
         globalEvents.off($xeColorPicker, 'mousedown');
         globalEvents.off($xeColorPicker, 'blur');
+        globalEvents.off($xeColorPicker, 'resize');
     },
     render(h) {
         return this.renderVN(h);

package/es/date-panel/src/date-panel.js

@@ -1,7 +1,7 @@
 import { defineVxeComponent } from '../../ui/src/comp';
 import XEUtils from 'xe-utils';
 import { getConfig, getI18n, createEvent, globalMixins, renderEmptyElement } from '../../ui';
-import { toStringTimeDate, getDateQuarter, parseDateValue, parseDateObj } from './util';
+import { toStringTimeDate, getDateQuarter, parseDateValue, parseDateObj, handleValueFormat, hasDateValueType, hasTimestampValueType } from './util';
 export default {
     name: 'VxeDatePanel',
     mixins: [
@@ -45,6 +45,7 @@ export default {
         },
         labelFormat: String,
         valueFormat: String,
+        timeFormat: String,
         festivalMethod: {
             type: Function,
             default: () => getConfig().datePanel.festivalMethod
@@ -156,16 +157,7 @@ export default {
             const $xeDatePanel = this;
             const props = $xeDatePanel;
             const { type, valueFormat } = props;
-            if (valueFormat) {
-                return valueFormat;
-            }
-            if (type === 'time') {
-                return 'HH:mm:ss';
-            }
-            if (type === 'datetime') {
-                return 'yyyy-MM-dd HH:mm:ss';
-            }
-            return 'yyyy-MM-dd';
+            return handleValueFormat(type, valueFormat);
         },
         computeDateValue() {
             const $xeDatePanel = this;
@@ -493,13 +485,17 @@ export default {
         },
         computeHasTimeMinute() {
             const $xeDatePanel = this;
+            const props = $xeDatePanel;
+            const { timeFormat } = props;
             const dateValueFormat = $xeDatePanel.computeDateValueFormat;
-            return !/HH/.test(dateValueFormat) || /mm/.test(dateValueFormat);
+            return !/HH/.test(timeFormat || dateValueFormat) || /mm/.test(timeFormat || dateValueFormat);
         },
         computeHasTimeSecond() {
             const $xeDatePanel = this;
+            const props = $xeDatePanel;
+            const { timeFormat } = props;
             const dateValueFormat = $xeDatePanel.computeDateValueFormat;
-            return !/HH/.test(dateValueFormat) || /ss/.test(dateValueFormat);
+            return !/HH/.test(timeFormat || dateValueFormat) || /ss/.test(timeFormat || dateValueFormat);
         },
         computeSecondList() {
             const $xeDatePanel = this;
@@ -606,11 +602,29 @@ export default {
             const $xeDatePanel = this;
             const props = $xeDatePanel;
             const reactData = $xeDatePanel.reactData;
-            const { value: modelValue } = props;
+            const { type, value: modelValue, valueFormat } = props;
+            const dateValueFormat = $xeDatePanel.computeDateValueFormat;
             reactData.inputValue = value;
-            $xeDatePanel.emitModel(value);
-            if (XEUtils.toValueString(modelValue) !== value) {
-                $xeDatePanel.dispatchEvent('change', { value }, evnt);
+            if (hasTimestampValueType(valueFormat)) {
+                const dateVal = parseDateValue(value, type, { valueFormat: dateValueFormat });
+                const timeNum = dateVal ? dateVal.getTime() : null;
+                $xeDatePanel.emitModel(timeNum);
+                if (modelValue !== timeNum) {
+                    $xeDatePanel.dispatchEvent('change', { value: timeNum }, evnt);
+                }
+            }
+            else if (hasDateValueType(valueFormat)) {
+                const dateVal = parseDateValue(value, type, { valueFormat: dateValueFormat });
+                $xeDatePanel.emitModel(dateVal);
+                if (modelValue && dateVal ? XEUtils.toStringDate(modelValue).getTime() !== dateVal.getTime() : modelValue !== dateVal) {
+                    $xeDatePanel.dispatchEvent('change', { value: dateVal }, evnt);
+                }
+            }
+            else {
+                $xeDatePanel.emitModel(value);
+                if (XEUtils.toValueString(modelValue) !== value) {
+                    $xeDatePanel.dispatchEvent('change', { value }, evnt);
+                }
             }
         },
         hidePanel() {

package/es/date-panel/src/util.js

@@ -1,10 +1,33 @@
 import XEUtils from 'xe-utils';
+export function hasTimestampValueType(valueFormat) {
+    return valueFormat === 'timestamp';
+}
+export function hasDateValueType(valueFormat) {
+    return valueFormat === 'date';
+}
+export function handleValueFormat(type, valueFormat) {
+    if (valueFormat) {
+        if (!(hasDateValueType(valueFormat) || hasTimestampValueType(valueFormat))) {
+            return valueFormat;
+        }
+    }
+    if (type === 'time') {
+        return 'HH:mm:ss';
+    }
+    if (type === 'datetime') {
+        return 'yyyy-MM-dd HH:mm:ss';
+    }
+    return 'yyyy-MM-dd';
+}
 export function toStringTimeDate(str) {
+    const rest = new Date(2e3, 0, 1);
     if (str) {
-        const rest = new Date();
         let h = 0;
         let m = 0;
         let s = 0;
+        if (XEUtils.isNumber(str) || /^[0-9]{11,15}$/.test(`${str}`)) {
+            str = new Date(Number(str));
+        }
         if (XEUtils.isDate(str)) {
             h = str.getHours();
             m = str.getMinutes();
@@ -24,7 +47,7 @@ export function toStringTimeDate(str) {
         rest.setSeconds(s);
         return rest;
     }
-    return new Date('');
+    return rest;
 }
 export function getDateQuarter(date) {
     const month = date.getMonth();
@@ -45,7 +68,7 @@ export const parseDateValue = (val, type, options) => {
         if (type === 'time') {
             return toStringTimeDate(val);
         }
-        if (XEUtils.isNumber(val) || /^[0-9]{11,15}$/.test(`${val}`)) {
+        if (XEUtils.isNumber(val) || /^[0-9]{10,15}$/.test(`${val}`)) {
             return new Date(Number(val));
         }
         if (XEUtils.isString(val)) {

package/es/date-picker/src/date-picker.js

@@ -4,7 +4,7 @@ import { getConfig, getIcon, getI18n, commands, createEvent, globalEvents, globa
 import { getFuncText, getLastZIndex, nextZIndex, isEnableConf } from '../../ui/src/utils';
 import { updatePanelPlacement, getEventTargetNode } from '../../ui/src/dom';
 import { getSlotVNs } from '../../ui/src/vn';
-import { parseDateObj, getDateByCode } from '../../date-panel/src/util';
+import { parseDateObj, parseDateValue, getDateByCode, handleValueFormat, hasDateValueType, hasTimestampValueType } from '../../date-panel/src/util';
 import { errLog } from '../../ui/src/log';
 import VxeDatePanelComponent from '../../date-panel/src/date-panel';
 import VxeButtonComponent from '../../button/src/button';
@@ -75,6 +75,7 @@ export default {
         },
         labelFormat: String,
         valueFormat: String,
+        timeFormat: String,
         editable: {
             type: Boolean,
             default: true
@@ -277,16 +278,7 @@ export default {
             const $xeDatePicker = this;
             const props = $xeDatePicker;
             const { type, valueFormat } = props;
-            if (valueFormat) {
-                return valueFormat;
-            }
-            if (type === 'time') {
-                return 'HH:mm:ss';
-            }
-            if (type === 'datetime') {
-                return 'yyyy-MM-dd HH:mm:ss';
-            }
-            return 'yyyy-MM-dd';
+            return handleValueFormat(type, valueFormat);
         },
         computeFirstDayOfWeek() {
             const $xeDatePicker = this;
@@ -359,14 +351,40 @@ export default {
             const reactData = $xeDatePicker.reactData;
             const $xeForm = $xeDatePicker.$xeForm;
             const formItemInfo = $xeDatePicker.formItemInfo;
-            const { value: modelValue } = props;
+            const { type, value: modelValue, valueFormat } = props;
+            const dateValueFormat = $xeDatePicker.computeDateValueFormat;
             reactData.inputValue = value;
-            $xeDatePicker.emitModel(value);
-            if (XEUtils.toValueString(modelValue) !== value) {
-                $xeDatePicker.dispatchEvent('change', { value }, evnt);
-                // 自动更新校验状态
-                if ($xeForm && formItemInfo) {
-                    $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
+            if (hasTimestampValueType(valueFormat)) {
+                const dateVal = parseDateValue(value, type, { valueFormat: dateValueFormat });
+                const timeNum = dateVal ? dateVal.getTime() : null;
+                $xeDatePicker.emitModel(timeNum);
+                if (modelValue !== timeNum) {
+                    $xeDatePicker.dispatchEvent('change', { value: timeNum }, evnt);
+                    // 自动更新校验状态
+                    if ($xeForm && formItemInfo) {
+                        $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, timeNum);
+                    }
+                }
+            }
+            else if (hasDateValueType(valueFormat)) {
+                const dateVal = parseDateValue(value, type, { valueFormat: dateValueFormat });
+                $xeDatePicker.emitModel(dateVal);
+                if (modelValue && dateVal ? XEUtils.toStringDate(modelValue).getTime() !== dateVal.getTime() : modelValue !== dateVal) {
+                    $xeDatePicker.dispatchEvent('change', { value: dateVal }, evnt);
+                    // 自动更新校验状态
+                    if ($xeForm && formItemInfo) {
+                        $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, dateVal);
+                    }
+                }
+            }
+            else {
+                $xeDatePicker.emitModel(value);
+                if (XEUtils.toValueString(modelValue) !== value) {
+                    $xeDatePicker.dispatchEvent('change', { value }, evnt);
+                    // 自动更新校验状态
+                    if ($xeForm && formItemInfo) {
+                        $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
+                    }
                 }
             }
         },
@@ -448,9 +466,10 @@ export default {
             }
             if (!reactData.visiblePanel) {
                 reactData.isActivated = false;
-            }
-            if ($datePanel) {
-                $datePanel.checkValue(reactData.inputLabel);
+                // 未打开面板时才校验
+                if ($datePanel) {
+                    $datePanel.checkValue(reactData.inputLabel);
+                }
             }
             $xeDatePicker.dispatchEvent('blur', { value }, evnt);
             // 自动更新校验状态
@@ -542,6 +561,14 @@ export default {
                 }
             }
         },
+        handleGlobalResizeEvent() {
+            const $xeDatePicker = this;
+            const reactData = $xeDatePicker.reactData;
+            const { visiblePanel } = reactData;
+            if (visiblePanel) {
+                $xeDatePicker.updatePlacement();
+            }
+        },
         // 弹出面板
         updateZindex() {
             const $xeDatePicker = this;
@@ -821,6 +848,7 @@ export default {
                                             startDay: props.startDay,
                                             labelFormat: props.labelFormat,
                                             valueFormat: props.valueFormat,
+                                            timeFormat: props.timeFormat,
                                             festivalMethod: props.festivalMethod,
                                             disabledMethod: props.disabledMethod,
                                             selectDay: props.selectDay
@@ -1053,6 +1081,7 @@ export default {
         globalEvents.on($xeDatePicker, 'mousewheel', $xeDatePicker.handleGlobalMousewheelEvent);
         globalEvents.on($xeDatePicker, 'mousedown', $xeDatePicker.handleGlobalMousedownEvent);
         globalEvents.on($xeDatePicker, 'blur', $xeDatePicker.handleGlobalBlurEvent);
+        globalEvents.on($xeDatePicker, 'resize', $xeDatePicker.handleGlobalResizeEvent);
     },
     beforeDestroy() {
         const $xeDatePicker = this;
@@ -1063,6 +1092,7 @@ export default {
         globalEvents.off($xeDatePicker, 'mousewheel');
         globalEvents.off($xeDatePicker, 'mousedown');
         globalEvents.off($xeDatePicker, 'blur');
+        globalEvents.off($xeDatePicker, 'resize');
     },
     render(h) {
         return this.renderVN(h);

package/es/date-range-picker/src/date-range-picker.js

@@ -3,7 +3,7 @@ import XEUtils from 'xe-utils';
 import { getConfig, getIcon, getI18n, commands, globalEvents, createEvent, globalMixins, renderEmptyElement } from '../../ui';
 import { getFuncText, getLastZIndex, nextZIndex, isEnableConf } from '../../ui/src/utils';
 import { updatePanelPlacement, getEventTargetNode } from '../../ui/src/dom';
-import { parseDateString, parseDateObj, getRangeDateByCode } from '../../date-panel/src/util';
+import { parseDateString, parseDateObj, getRangeDateByCode, handleValueFormat } from '../../date-panel/src/util';
 import { getSlotVNs } from '../../ui/src/vn';
 import { errLog } from '../../ui/src/log';
 import VxeDatePanelComponent from '../../date-panel/src/date-panel';
@@ -63,6 +63,7 @@ export default {
         },
         labelFormat: String,
         valueFormat: String,
+        timeFormat: String,
         editable: {
             type: Boolean,
             default: true
@@ -266,16 +267,7 @@ export default {
             const $xeDateRangePicker = this;
             const props = $xeDateRangePicker;
             const { type, valueFormat } = props;
-            if (valueFormat) {
-                return valueFormat;
-            }
-            if (type === 'time') {
-                return 'HH:mm:ss';
-            }
-            if (type === 'datetime') {
-                return 'yyyy-MM-dd HH:mm:ss';
-            }
-            return 'yyyy-MM-dd';
+            return handleValueFormat(type, valueFormat);
         },
         computeFirstDayOfWeek() {
             const $xeDateRangePicker = this;
@@ -676,6 +668,14 @@ export default {
                 $xeDateRangePicker.hidePanel();
             }
         },
+        handleGlobalResizeEvent() {
+            const $xeDateRangePicker = this;
+            const reactData = $xeDateRangePicker.reactData;
+            const { visiblePanel } = reactData;
+            if (visiblePanel) {
+                $xeDateRangePicker.updatePlacement();
+            }
+        },
         // 弹出面板
         updateZindex() {
             const $xeDateRangePicker = this;
@@ -965,6 +965,7 @@ export default {
                                             endDate: endValue,
                                             labelFormat: props.labelFormat,
                                             valueFormat: props.valueFormat,
+                                            timeFormat: props.timeFormat,
                                             festivalMethod: props.festivalMethod,
                                             disabledMethod: props.disabledMethod,
                                             selectDay: props.selectDay
@@ -985,6 +986,7 @@ export default {
                                             startDate: startValue,
                                             labelFormat: props.labelFormat,
                                             valueFormat: props.valueFormat,
+                                            timeFormat: props.timeFormat,
                                             festivalMethod: props.festivalMethod,
                                             disabledMethod: props.disabledMethod,
                                             selectDay: props.selectDay
@@ -1221,6 +1223,7 @@ export default {
         globalEvents.on($xeDateRangePicker, 'mousewheel', $xeDateRangePicker.handleGlobalMousewheelEvent);
         globalEvents.on($xeDateRangePicker, 'mousedown', $xeDateRangePicker.handleGlobalMousedownEvent);
         globalEvents.on($xeDateRangePicker, 'blur', $xeDateRangePicker.handleGlobalBlurEvent);
+        globalEvents.on($xeDateRangePicker, 'resize', $xeDateRangePicker.handleGlobalResizeEvent);
     },
     deactivated() {
         const $xeDateRangePicker = this;
@@ -1236,6 +1239,7 @@ export default {
         globalEvents.off($xeDateRangePicker, 'mousewheel');
         globalEvents.off($xeDateRangePicker, 'mousedown');
         globalEvents.off($xeDateRangePicker, 'blur');
+        globalEvents.off($xeDateRangePicker, 'resize');
     },
     render(h) {
         return this.renderVN(h);