vxe-pc-ui 3.4.5 → 3.4.7

package/packages/date-picker/src/date-picker.ts

@@ -418,30 +418,35 @@ export default /* define-vxe-component start */ defineVxeComponent({
       }
       return years
     },
-    computeSelectDatePanelLabel () {
+    computeSelectDatePanelObj () {
       const $xeDatePicker = (this as any)
       const reactData = $xeDatePicker.reactData
 
       const isDatePickerType = $xeDatePicker.computeIsDatePickerType
+      let y = ''
+      let m = ''
       if (isDatePickerType) {
         const { datePanelType, selectMonth } = reactData
-        const yearList = $xeDatePicker.computeYearList as VxeDatePickerDefines.DateYearItem[]
+        const yearList = $xeDatePicker.computeYearList
         let year = ''
         let month
         if (selectMonth) {
           year = selectMonth.getFullYear()
           month = selectMonth.getMonth() + 1
         }
-        if (datePanelType === 'quarter') {
-          return getI18n('vxe.input.date.quarterLabel', [year])
-        } else if (datePanelType === 'month') {
-          return getI18n('vxe.input.date.monthLabel', [year])
+        if (datePanelType === 'quarter' || datePanelType === 'month') {
+          y = `${year}`
         } else if (datePanelType === 'year') {
-          return yearList.length ? `${yearList[0].year} - ${yearList[yearList.length - 1].year}` : ''
+          y = yearList.length ? `${yearList[0].year} - ${yearList[yearList.length - 1].year}` : ''
+        } else {
+          y = `${year}`
+          m = month ? getI18n(`vxe.input.date.m${month}`) : '-'
         }
-        return getI18n('vxe.input.date.dayLabel', [year, month ? getI18n(`vxe.input.date.m${month}`) : '-'])
       }
-      return ''
+      return {
+        y,
+        m
+      }
     },
     computeFirstDayOfWeek () {
       const $xeDatePicker = this
@@ -1173,7 +1178,13 @@ export default /* define-vxe-component start */ defineVxeComponent({
       reactData.currentDate = currentDate
       $xeDatePicker.dateMonthHandle(currentDate, 0)
     },
-    dateToggleTypeEvent  () {
+    dateToggleYearTypeEvent () {
+      const $xeDatePicker = this
+      const reactData = $xeDatePicker.reactData
+
+      reactData.datePanelType = 'year'
+    },
+    dateToggleMonthTypeEvent  () {
       const $xeDatePicker = this
       const reactData = $xeDatePicker.reactData
 
@@ -2205,7 +2216,8 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const { datePanelType } = reactData
       const isDisabledPrevDateBtn = $xeDatePicker.computeIsDisabledPrevDateBtn
       const isDisabledNextDateBtn = $xeDatePicker.computeIsDisabledNextDateBtn
-      const selectDatePanelLabel = $xeDatePicker.computeSelectDatePanelLabel
+      const selectDatePanelObj = $xeDatePicker.computeSelectDatePanelObj
+      const supportMultiples = $xeDatePicker.computeSupportMultiples
       return [
         h('div', {
           class: 'vxe-date-picker--date-picker-header'
@@ -2216,13 +2228,25 @@ export default /* define-vxe-component start */ defineVxeComponent({
             datePanelType === 'year'
               ? h('span', {
                 class: 'vxe-date-picker--date-picker-label'
-              }, selectDatePanelLabel)
+              }, selectDatePanelObj.y)
               : h('span', {
-                class: 'vxe-date-picker--date-picker-btn',
-                on: {
-                  click: $xeDatePicker.dateToggleTypeEvent
-                }
-              }, selectDatePanelLabel)
+                class: 'vxe-date-picker--date-picker-btns'
+              }, [
+                h('span', {
+                  class: 'vxe-date-picker--date-picker-btn',
+                  on: {
+                    click: $xeDatePicker.dateToggleYearTypeEvent
+                  }
+                }, selectDatePanelObj.y),
+                selectDatePanelObj.m
+                  ? h('span', {
+                    class: 'vxe-date-picker--date-picker-btn',
+                    on: {
+                      click: $xeDatePicker.dateToggleMonthTypeEvent
+                    }
+                  }, selectDatePanelObj.m)
+                  : renderEmptyElement($xeDatePicker)
+              ])
           ]),
           h('div', {
             class: 'vxe-date-picker--date-picker-btn-wrapper'
@@ -2261,7 +2285,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
                 class: 'vxe-icon-caret-right'
               })
             ]),
-            multiple && $xeDatePicker.computeSupportMultiples
+            multiple && supportMultiples
               ? h('span', {
                 class: 'vxe-date-picker--date-picker-btn vxe-date-picker--date-picker-confirm-btn'
               }, [

package/styles/components/date-picker.scss

@@ -325,7 +325,11 @@
   margin-right: 0.5em;
 }
 .vxe-date-picker--time-picker-btn {
+  display: flex;
   flex-shrink: 0;
+  &:active {
+    transform: scale(0.9);
+  }
 }
 .vxe-date-picker--time-picker-confirm,
 .vxe-date-picker--date-picker-confirm {
@@ -391,6 +395,7 @@
   &:not(.is--disabled) {
     cursor: pointer;
     &:hover {
+      color: var(--vxe-ui-font-primary-color);
       background-color: #fff;
     }
     &:active {
@@ -398,6 +403,14 @@
     }
   }
 }
+.vxe-date-picker--date-picker-btns {
+  .vxe-date-picker--date-picker-btn {
+    margin-left: 0.6em;
+    &:first-child {
+      margin-left: 0;
+    }
+  }
+}
 .vxe-date-picker--date-picker-body {
   border-radius: var(--vxe-ui-base-border-radius);
   border: 1px solid var(--vxe-ui-base-popup-border-color);
@@ -523,6 +536,8 @@
 
 .vxe-date-picker--date-label {
   position: relative;
+  font-size: 1.1em;
+  line-height: 1em;
   &.is-notice {
     &:before {
       content: "";
@@ -541,8 +556,8 @@
   position: absolute;
   right: 0.1em;
   top: -0.2em;
-  font-size: 0.86em;
-  transform: scale(0.85);
+  font-size: 12px;
+  transform: scale(0.9);
   color: var(--vxe-ui-input-date-extra-color);
   &.is-important {
     color: var(--vxe-ui-input-date-extra-important-color);
@@ -551,7 +566,8 @@
 
 .vxe-date-picker--date-festival {
   color: var(--vxe-ui-input-date-festival-color);
-  height: 14px;
+  height: 1.2em;
+  line-height: 1.1em;
   overflow: hidden;
   &.is-important {
     color: var(--vxe-ui-input-date-festival-important-color);
@@ -559,8 +575,8 @@
 }
 .vxe-date-picker--date-festival--label {
   display: block;
-  font-size: 0.86em;
-  transform: scale(0.9);
+  font-size: 1em;
+  transform: scale(0.8);
 }
 
 @keyframes festivalOverlap2 {
@@ -760,6 +776,9 @@
   .vxe-date-picker--date-picker-btn-wrapper {
     .vxe-date-picker--date-picker-btn {
       margin-left: 9px - $sizeIndex;
+      &:active {
+        transform: scale(0.9);
+      }
     }
     .vxe-date-picker--date-picker-prev-btn,
     .vxe-date-picker--date-picker-current-btn,
@@ -771,7 +790,7 @@
   }
   .vxe-date-picker--date-picker-type-wrapper {
     .vxe-date-picker--date-picker-label,
-    .vxe-date-picker--date-picker-btn {
+    .vxe-date-picker--date-picker-btns {
       padding: 0 10px - $sizeIndex;
     }
   }
@@ -831,9 +850,6 @@
   .vxe-date-picker--date-picker-confirm {
     height: 31px - $sizeIndex;
   }
-  .vxe-date-picker--date-label {
-    line-height: calc(list.nth($fontSizeList, $sizeIndex) + 1px);
-  }
 }
 
 .vxe-date-picker--panel {

package/styles/theme/base.scss

@@ -43,7 +43,7 @@
   /*input*/
   --vxe-ui-input-disabled-color: #dcdfe6;
   --vxe-ui-input-number-disabled-color: #e4e7ed;
-  --vxe-ui-input-date-festival-color: #999999;
+  --vxe-ui-input-date-festival-color: #abaaaa;
   --vxe-ui-input-date-festival-important-color: var(--vxe-ui-font-primary-color);
   --vxe-ui-input-date-notice-background-color: #FF0000;
   --vxe-ui-input-date-picker-hover-background-color: #f2f6fc;

package/types/components/grid.d.ts

@@ -267,6 +267,10 @@ export interface GridReactData<D = any> {
 
 export interface GridMethods<D = any> {
   dispatchEvent(type: ValueOf<VxeGridEmits>, params: Record<string, any>, evnt: Event | null): void
+  /**
+   * 获取根元素
+   */
+  getEl(): HTMLDivElement
   /**
    * 给数据代理提交指令
    * @param code 指令编码

package/types/components/table.d.ts

@@ -3335,6 +3335,10 @@ export interface TableInternalData<D = any> {
 
 export interface TableMethods<DT = any> {
   dispatchEvent(type: ValueOf<VxeTableEmits>, params: Record<string, any>, evnt: Event | null): void
+  /**
+   * 获取根元素
+   */
+  getEl(): HTMLDivElement
   /**
    * 手动清除表格所有条件，还原到初始状态
    * 对于增删改查的场景中可能会用到，比如在数据保存之后清除表格缓存
@@ -3546,6 +3550,50 @@ export interface TableMethods<DT = any> {
     visibleColumn: VxeTableDefines.ColumnInfo<DT>[]
     tableColumn: VxeTableDefines.ColumnInfo<DT>[]
   }
+  /**
+   * 移动列到指定列的位置
+   * @param fieldOrColumn
+   * @param targetFieldOrColumn 列对象、列字段、移动偏移量
+   * @param options
+   */
+  moveColumnTo(fieldOrColumn: VxeColumnPropTypes.Field | VxeTableDefines.ColumnInfo, targetFieldOrColumn: VxeColumnPropTypes.Field | VxeTableDefines.ColumnInfo | number, options?: {
+    /**
+     * 只对 row-drag-config.isCrossDrag 有效，允许跨层级移动
+     */
+    isCrossDrag?: boolean
+    /**
+     * 只对 column-drag-config.isToChildDrag 有效，移动成子级
+     */
+    dragToChild?: boolean
+    /**
+     * 移动到目标列的左边或右边位置
+     */
+    dragPos?: 'left' | 'right' | '' | null
+  }): Promise<{
+    status: boolean
+  }>
+  /**
+   * 移动行到指定行的位置
+   * @param rowidOrRow
+   * @param targetRowidOrRow 行对象、行主键、移动偏移量
+   * @param options
+   */
+  moveRowTo(rowidOrRow: any, targetRowidOrRow: any, options?: {
+    /**
+     * 只对 row-drag-config.isCrossDrag 有效，允许跨层级移动
+     */
+    isCrossDrag?: boolean
+    /**
+     * 只对 row-drag-config.isToChildDrag 有效，移动成子级
+     */
+    dragToChild?: boolean
+    /**
+     * 移动到目标行的上方或下方位置
+     */
+    dragPos?: 'top' | 'bottom' | '' | null
+  }): Promise<{
+    status: boolean
+  }>
   /**
    * 获取表格的全量列
    */
@@ -4213,7 +4261,7 @@ export interface TablePrivateMethods<D = any> {
   triggerCellMousedownEvent(evnt: MouseEvent, params: any): void
   triggerCellMousedownEvent(evnt: any, params: any): void
   triggerCellMouseupEvent(evnt: MouseEvent): void
-  handleRowDragSwapEvent (evnt: DragEvent, isSyncRow: boolean | undefined, dragRow: any, prevDragRow: any, prevDragPos: '' | 'top' | 'bottom' | 'left' | 'right' | undefined, prevDragToChild: boolean | undefined): Promise<void>
+  handleRowDragSwapEvent (evnt: DragEvent | null, isSyncRow: boolean | undefined, dragRow: any, prevDragRow: any, prevDragPos: '' | 'top' | 'bottom' | 'left' | 'right' | undefined, prevDragToChild: boolean | undefined): Promise<{ status: boolean }>
   handleRowDragDragstartEvent (evnt: DragEvent): void
   handleRowDragDragendEvent(evnt: DragEvent): void
   handleRowDragDragoverEvent(evnt: DragEvent,): void
@@ -4224,7 +4272,7 @@ export interface TablePrivateMethods<D = any> {
   handleCellDragMouseupEvent (evnt: MouseEvent): void
   handleHeaderCellDragDragstartEvent (evnt: DragEvent): void
   handleColDragSwapColumn(): void
-  handleColDragSwapEvent (evnt: DragEvent, isSyncColumn: boolean | undefined, dragCol: VxeTableDefines.ColumnInfo | null | undefined, prevDragCol: VxeTableDefines.ColumnInfo | undefined, prevDragPos: '' | 'top' | 'bottom' | 'left' | 'right' | undefined, prevDragToChild: boolean | undefined): Promise<void>
+  handleColDragSwapEvent (evnt: DragEvent | null, isSyncColumn: boolean | undefined, dragCol: VxeTableDefines.ColumnInfo | null | undefined, prevDragCol: VxeTableDefines.ColumnInfo | null | undefined, prevDragPos: '' | 'top' | 'bottom' | 'left' | 'right' | undefined, prevDragToChild: boolean | undefined): Promise<{ status: boolean }>
   handleHeaderCellDragDragendEvent(evnt: DragEvent): void
   handleHeaderCellDragDragoverEvent(evnt: DragEvent,): void
   handleHeaderCellDragMousedownEvent (evnt: MouseEvent, params: {