vxe-table 3.8.2 → 3.8.3-beta.0

package/packages/custom/src/panel.js

@@ -1,26 +1,46 @@
 import UtilTools from '../../tools/utils'
+import DomTools from '../../tools/dom'
 import GlobalConfig from '../../v-x-e-table/src/conf'
 import XEUtils from 'xe-utils'
 
+const { formatText } = UtilTools
+const { addClass, removeClass } = DomTools
+
+function updateDropHint (_vm, evnt) {
+  const { $refs } = _vm
+  const dragHintEl = $refs.dragHintElemRef
+  const bodyEl = $refs.bodyElemRef
+  if (!bodyEl) {
+    return
+  }
+  if (dragHintEl) {
+    const warpperEl = bodyEl.parentNode
+    const warpperRect = warpperEl.getBoundingClientRect()
+    dragHintEl.style.display = 'block'
+    dragHintEl.style.top = `${Math.min(warpperEl.clientHeight - warpperEl.scrollTop - dragHintEl.clientHeight, evnt.clientY - warpperRect.y)}px`
+    dragHintEl.style.left = `${Math.min(warpperEl.clientWidth - warpperEl.scrollLeft - dragHintEl.clientWidth - 16, evnt.clientX - warpperRect.x)}px`
+  }
+}
+
 function renderSimplePanel (h, _vm) {
   const { $xetable, customStore } = _vm
-  const { customOpts, collectColumn, isMaxFixedColumn } = $xetable
+  const { customOpts, customColumnList, isMaxFixedColumn } = $xetable
   const { maxHeight } = customStore
   const { checkMethod, visibleMethod, trigger } = customOpts
   const colVNs = []
   const customWrapperOns = {}
   // hover 触发
   if (trigger === 'hover') {
-    customWrapperOns.onMouseenter = _vm.handleWrapperMouseenterEvent
-    customWrapperOns.onMouseleave = _vm.handleWrapperMouseleaveEvent
+    customWrapperOns.mouseenter = _vm.handleWrapperMouseenterEvent
+    customWrapperOns.mouseleave = _vm.handleWrapperMouseleaveEvent
   }
-  XEUtils.eachTree(collectColumn, (column, index, items, path, parent) => {
+  XEUtils.eachTree(customColumnList, (column, index, items, path, parent) => {
     const isVisible = visibleMethod ? visibleMethod({ column }) : true
     if (isVisible) {
       const isChecked = column.visible
       const isIndeterminate = column.halfVisible
-      const colTitle = UtilTools.formatText(column.getTitle(), 1)
       const isColGroup = column.children && column.children.length
+      const colTitle = formatText(column.getTitle(), 1)
       const isDisabled = checkMethod ? !checkMethod({ column }) : false
       colVNs.push(
         h('li', {
@@ -30,20 +50,19 @@ function renderSimplePanel (h, _vm) {
           }]
         }, [
           h('div', {
+            title: colTitle,
             class: ['vxe-table-custom--checkbox-option', {
               'is--checked': isChecked,
               'is--indeterminate': isIndeterminate,
               'is--disabled': isDisabled
             }],
-            attrs: {
-              title: colTitle
-            },
             on: {
               click: () => {
                 if (!isDisabled) {
                   _vm.changeCheckboxOption(column)
                 }
               }
+
             }
           }, [
             h('span', {
@@ -129,7 +148,7 @@ function renderSimplePanel (h, _vm) {
       style: maxHeight ? {
         maxHeight: `${maxHeight}px`
       } : {},
-      ...customWrapperOns
+      on: customWrapperOns
     }, colVNs),
     customOpts.showFooter ? h('div', {
       class: 'vxe-table-custom--footer'
@@ -150,28 +169,51 @@ function renderSimplePanel (h, _vm) {
   ])
 }
 
-const renderPopupPanel = (h, _vm) => {
+function renderPopupPanel (h, _vm) {
   const { $xetable, customStore } = _vm
-  const { customOpts, collectColumn, isMaxFixedColumn } = $xetable
+  const { customOpts, customColumnList, isMaxFixedColumn } = $xetable
   const { checkMethod, visibleMethod } = customOpts
   const trVNs = []
-  XEUtils.eachTree(collectColumn, (column, index, items, path, parent) => {
+  XEUtils.eachTree(customColumnList, (column, index, items, path, parent) => {
     const isVisible = visibleMethod ? visibleMethod({ column }) : true
     if (isVisible) {
       const isChecked = column.visible
       const isIndeterminate = column.halfVisible
-      const colTitle = UtilTools.formatText(column.getTitle(), 1)
+      const colTitle = formatText(column.getTitle(), 1)
       const isColGroup = column.children && column.children.length
       const isDisabled = checkMethod ? !checkMethod({ column }) : false
       trVNs.push(
         h('tr', {
           key: column.id,
-          class: [`vxe-table-custom-popup--row-level${column.level}`, {
+          class: [`vxe-table-custom-popup--row level--${column.level}`, {
             'is--group': isColGroup
-          }]
+          }],
+          attrs: {
+            colid: column.id
+          },
+          on: {
+            dragstart: _vm.sortDragstartEvent,
+            dragend: _vm.sortDragendEvent,
+            dragover: _vm.sortDragoverEvent
+          }
         }, [
           h('td', {
-            class: 'vxe-table-custom-popup--column-name'
+            class: 'vxe-table-custom-popup--column-item col--sort'
+          }, [
+            column.level === 1 ? h('span', {
+              class: 'vxe-table-custom-popup--column-sort-btn',
+              on: {
+                mousedown: _vm.sortMousedownEvent,
+                mouseup: _vm.sortMouseupEvent
+              }
+            }, [
+              h('i', {
+                class: 'vxe-icon-sort'
+              })
+            ]) : null
+          ]),
+          h('td', {
+            class: 'vxe-table-custom-popup--column-item col--name'
           }, [
             h('div', {
               class: 'vxe-table-custom-popup--name',
@@ -181,7 +223,7 @@ const renderPopupPanel = (h, _vm) => {
             }, colTitle)
           ]),
           h('td', {
-            class: 'vxe-table-custom-popup--column-visiblw'
+            class: 'vxe-table-custom-popup--column-item col--visible'
           }, [
             h('div', {
               class: ['vxe-table-custom--checkbox-option', {
@@ -203,18 +245,17 @@ const renderPopupPanel = (h, _vm) => {
             ])
           ]),
           h('td', {
-            class: 'vxe-table-custom-popup--column-fixed'
+            class: 'vxe-table-custom-popup--column-item col--fixed'
           }, [
             !parent && customOpts.allowFixed ? h('vxe-radio-group', {
               props: {
                 value: column.fixed || '',
-                disabled: isMaxFixedColumn,
                 type: 'button',
                 size: 'mini',
                 options: [
-                  { label: '左侧', value: 'left' },
-                  { label: '不固定', value: '' },
-                  { label: '右侧', value: 'right' }
+                  { label: GlobalConfig.i18n('vxe.custom.setting.fixedLeft'), value: 'left', disabled: isMaxFixedColumn },
+                  { label: GlobalConfig.i18n('vxe.custom.setting.fixedUnset'), value: '' },
+                  { label: GlobalConfig.i18n('vxe.custom.setting.fixedRight'), value: 'right', disabled: isMaxFixedColumn }
                 ]
               },
               on: {
@@ -234,15 +275,19 @@ const renderPopupPanel = (h, _vm) => {
   return h('vxe-modal', {
     key: 'popup',
     props: {
-      className: 'vxe-table-custom-popup-warpper vxe-table--ignore-clear',
       value: customStore.visible,
       title: GlobalConfig.i18n('vxe.custom.cstmTitle'),
-      width: 700,
-      maxHeight: 500,
+      className: 'vxe-table-custom-popup-warpper vxe-table--ignore-clear',
+      width: '40vw',
+      minWidth: 500,
+      height: '50vh',
+      minHeight: 300,
       mask: true,
       lockView: true,
       showFooter: true,
-      escClosable: true
+      resize: true,
+      escClosable: true,
+      destroyOnClose: true
     },
     on: {
       input (value) {
@@ -252,32 +297,52 @@ const renderPopupPanel = (h, _vm) => {
     scopedSlots: {
       default: () => {
         return h('div', {
+          ref: 'bodyElemRef',
           class: 'vxe-table-custom-popup--body'
         }, [
-          h('table', {
+          h('div', {
+            class: 'vxe-table-custom-popup--table-warpper'
           }, [
-            h('colgroup', {}, [
-              h('col'),
-              h('col', {
-                style: {
-                  width: '80px'
-                }
-              }),
-              h('col', {
-                style: {
-                  width: '200px'
+            h('table', {}, [
+              h('colgroup', {}, [
+                h('col', {
+                  style: {
+                    width: '60px'
+                  }
+                }),
+                h('col'),
+                h('col', {
+                  style: {
+                    width: '80px'
+                  }
+                }),
+                h('col', {
+                  style: {
+                    width: '200px'
+                  }
+                })
+              ]),
+              h('thead', {}, [
+                h('tr', {}, [
+                  h('th', {}, GlobalConfig.i18n('vxe.custom.setting.colSort')),
+                  h('th', {}, GlobalConfig.i18n('vxe.custom.setting.colTitle')),
+                  h('th', {}, GlobalConfig.i18n('vxe.custom.setting.colVisible')),
+                  h('th', {}, GlobalConfig.i18n('vxe.custom.setting.colFixed'))
+                ])
+              ]),
+              h('transition-group', {
+                class: 'vxe-table-custom--body',
+                props: {
+                  tag: 'tbody',
+                  name: 'vxe-table-custom--flip'
                 }
-              })
-            ]),
-            h('thead', {}, [
-              h('tr', {}, [
-                h('th', {}, '标题'),
-                h('th', {}, '是否显示'),
-                h('th', {}, '是否固定')
-              ])
-            ]),
-            h('tbody', {}, trVNs)
-          ])
+              }, trVNs)
+            ])
+          ]),
+          h('div', {
+            ref: 'dragHintElemRef',
+            class: 'vxe-table-custom-popup--drag-hint'
+          }, GlobalConfig.i18n('vxe.custom.cstmDragTarget', [_vm.dragColumn ? _vm.dragColumn.getTitle() : '']))
         ])
       },
       footer: () => {
@@ -328,6 +393,11 @@ export default {
       default: null
     }
   },
+  data () {
+    return {
+      dragColumn: null
+    }
+  },
   computed: {
   },
   render (h) {
@@ -374,8 +444,8 @@ export default {
     },
     handleOptionCheck (column) {
       const { $xetable } = this
-      const { collectColumn } = $xetable
-      const matchObj = XEUtils.findTree(collectColumn, item => item === column)
+      const { customColumnList } = $xetable
+      const matchObj = XEUtils.findTree(customColumnList, item => item === column)
       if (matchObj && matchObj.parent) {
         const { parent } = matchObj
         if (parent.children && parent.children.length) {
@@ -418,10 +488,11 @@ export default {
       }
     },
     allCustomEvent () {
-      const { $xetable, customStore, collectColumn, customOpts } = this
+      const { $xetable, customStore } = this
+      const { customOpts, customColumnList } = $xetable
       const { checkMethod } = customOpts
       const isAll = !customStore.isAll
-      XEUtils.eachTree(collectColumn, (column) => {
+      XEUtils.eachTree(customColumnList, (column) => {
         if (!checkMethod || checkMethod({ column })) {
           column.visible = isAll
           column.halfVisible = false
@@ -429,6 +500,97 @@ export default {
       })
       customStore.isAll = isAll
       $xetable.checkCustomStatus()
+    },
+    sortMousedownEvent (evnt) {
+      const { $xetable } = this
+      const btnEl = evnt.currentTarget
+      const tdEl = btnEl.parentNode
+      const trEl = tdEl.parentNode
+      const colid = trEl.getAttribute('colid')
+      const column = $xetable.getColumnById(colid)
+      trEl.draggable = true
+      this.dragColumn = column
+      addClass(trEl, 'active--drag-origin')
+    },
+    sortMouseupEvent  (evnt) {
+      const btnEl = evnt.currentTarget
+      const tdEl = btnEl.parentNode
+      const trEl = tdEl.parentNode
+      const dragHintEl = this.$refs.dragHintElemRef
+      trEl.draggable = false
+      this.dragColumn = null
+      removeClass(trEl, 'active--drag-origin')
+      if (dragHintEl) {
+        dragHintEl.style.display = ''
+      }
+    },
+    sortDragstartEvent (evnt) {
+      const img = new Image()
+      if (evnt.dataTransfer) {
+        evnt.dataTransfer.setDragImage(img, 0, 0)
+      }
+    },
+    sortDragendEvent (evnt) {
+      const { $xetable, prevDropTrEl } = this
+      const { customColumnList } = $xetable
+      const trEl = evnt.currentTarget
+      const dragHintEl = this.$refs.dragHintElemRef
+      if (prevDropTrEl) {
+        // 判断是否有拖动
+        if (prevDropTrEl !== trEl) {
+          const dragOffset = prevDropTrEl.getAttribute('dragoffset')
+          const colid = trEl.getAttribute('colid')
+          const column = $xetable.getColumnById(colid)
+          if (!column) {
+            return
+          }
+          const cIndex = XEUtils.findIndexOf(customColumnList, item => item.id === column.id)
+          const targetColid = prevDropTrEl.getAttribute('colid')
+          const targetColumn = $xetable.getColumnById(targetColid)
+          if (!targetColumn) {
+            return
+          }
+          // 移出源位置
+          customColumnList.splice(cIndex, 1)
+          const tcIndex = XEUtils.findIndexOf(customColumnList, item => item.id === targetColumn.id)
+          // 插新位置
+          customColumnList.splice(tcIndex + (dragOffset === 'bottom' ? 1 : 0), 0, column)
+        }
+        prevDropTrEl.draggable = false
+        prevDropTrEl.removeAttribute('dragoffset')
+        removeClass(prevDropTrEl, 'active--drag-target')
+      }
+      this.dragColumn = null
+      trEl.draggable = false
+      trEl.removeAttribute('dragoffset')
+      if (dragHintEl) {
+        dragHintEl.style.display = ''
+      }
+      removeClass(trEl, 'active--drag-target')
+      removeClass(trEl, 'active--drag-origin')
+      // 更新顺序
+      customColumnList.forEach((column, index) => {
+        column.renderSortNumber = index
+      })
+    },
+    sortDragoverEvent  (evnt) {
+      const { $xetable, prevDropTrEl } = this
+      const trEl = evnt.currentTarget
+      if (prevDropTrEl !== trEl) {
+        removeClass(prevDropTrEl, 'active--drag-target')
+      }
+      const colid = trEl.getAttribute('colid')
+      const column = $xetable.getColumnById(colid)
+      // 是否移入有效元行
+      if (column && column.level === 1) {
+        evnt.preventDefault()
+        const offsetY = evnt.clientY - trEl.getBoundingClientRect().y
+        const dragOffset = offsetY < trEl.clientHeight / 2 ? 'top' : 'bottom'
+        addClass(trEl, 'active--drag-target')
+        trEl.setAttribute('dragoffset', dragOffset)
+        this.prevDropTrEl = trEl
+      }
+      updateDropHint(this, evnt)
     }
   }
 }

package/packages/locale/lang/en-US.js

@@ -8,7 +8,7 @@ export default {
       text: 'Loading...'
     },
     error: {
-      groupFixed: 'If you use group headers, the fixed columns must be set by group.',
+      groupFixed: 'If you use group headers, the freeze columns must be set by group.',
       groupMouseRange: 'Grouping headers and "{0}" cannot be used at the same time, which may cause errors.',
       groupTag: 'Grouping column header should use "{0}" instead of "{1}", which may cause errors.',
       scrollErrProp: 'The parameter "{0}" is not supported when virtual scrolling is enabled.',
@@ -61,7 +61,7 @@ export default {
       customAll: 'All',
       customConfirm: 'Confirm',
       customRestore: 'Reset',
-      maxFixedCol: 'The maximum number of fixed columns cannot exceed {0}'
+      maxFixedCol: 'The maximum number of Freeze columns cannot exceed {0}'
     },
     grid: {
       selectOneRecord: 'Please choose at least one piece of record!',
@@ -96,7 +96,7 @@ export default {
       endPageTitle: 'End'
     },
     alert: {
-      title: 'Message notification'
+      title: 'System messages'
     },
     button: {
       confirm: 'Confirm',
@@ -109,7 +109,18 @@ export default {
       cstmTitle: 'Column Settings',
       cstmRestore: 'Restore default',
       cstmCancel: 'Cancelar',
-      cstmConfirm: 'Confirm'
+      cstmConfirm: 'Confirm',
+      cstmConfirmRestore: 'Please confirm whether to restore the default column configuration?',
+      cstmDragTarget: 'Moving target: {0}',
+      setting: {
+        colSort: 'Sort',
+        colTitle: 'Title',
+        colVisible: 'Visible',
+        colFixed: 'Freeze column',
+        fixedLeft: 'Left',
+        fixedUnset: 'Unset',
+        fixedRight: 'Right'
+      }
     },
     import: {
       modes: {
@@ -188,9 +199,9 @@ export default {
       customAll: 'All',
       customConfirm: 'Confirm',
       customRestore: 'Reset',
-      fixedLeft: 'Fixed on the left side',
-      fixedRight: 'Fixed on the right side',
-      cancelfixed: 'Unfixed'
+      fixedLeft: 'Freeze on the left',
+      fixedRight: 'Freeze on the right',
+      cancelfixed: 'Unfreeze column'
     },
     input: {
       date: {

package/packages/locale/lang/es-ES.js

@@ -8,7 +8,7 @@ export default {
       text: 'Cargando...'
     },
     error: {
-      groupFixed: 'Si se utilizan encabezados de grupo, las columnas fijas deben ser establecidas por grupo.',
+      groupFixed: 'If you use group headers, the freeze columns must be set by group.',
       groupMouseRange: 'Los encabezados de agrupación y "{0}" no pueden ser utilizados al mismo tiempo, lo que puede causar errores.',
       groupTag: 'El encabezado de columna de agrupación debería utilizar "{0}" en lugar de "{1}", lo que puede causar errores.',
       scrollErrProp: 'El parámetro "{0}" no es compatible cuando el desplazamiento virtual está habilitado.',
@@ -61,7 +61,7 @@ export default {
       customAll: 'Todo',
       customConfirm: 'Confirmar',
       customRestore: 'Restaurar',
-      maxFixedCol: '最大固定列的数量不能超过 {0} 个'
+      maxFixedCol: 'The maximum number of Freeze columns cannot exceed {0}'
     },
     grid: {
       selectOneRecord: '¡Seleccione al menos un registro!',
@@ -88,7 +88,7 @@ export default {
       nextJump: 'Saltar siguiente página'
     },
     alert: {
-      title: 'Notificación de mensaje'
+      title: 'System messages'
     },
     button: {
       confirm: 'Confirmar',
@@ -101,7 +101,18 @@ export default {
       cstmTitle: 'Column Settings',
       cstmRestore: 'Restore default',
       cstmCancel: 'Cancelar',
-      cstmConfirm: 'Confirm'
+      cstmConfirm: 'Confirm',
+      cstmConfirmRestore: 'Please confirm whether to restore the default column configuration?',
+      cstmDragTarget: 'Moving target: {0}',
+      setting: {
+        colSort: 'Sort',
+        colTitle: 'Title',
+        colVisible: 'Visible',
+        colFixed: 'Freeze column',
+        fixedLeft: 'Left',
+        fixedUnset: 'Unset',
+        fixedRight: 'Right'
+      }
     },
     import: {
       modes: {
@@ -180,9 +191,9 @@ export default {
       customAll: 'Todo',
       customConfirm: 'Confirmar',
       customRestore: 'Restaurar',
-      fixedLeft: '固定在左侧',
-      fixedRight: '固定在右侧',
-      cancelfixed: '取消固定'
+      fixedLeft: 'Freeze on the left',
+      fixedRight: 'Freeze on the right',
+      cancelfixed: 'Unfreeze column'
     },
     entrada: {
       fecha: {

package/packages/locale/lang/ja-JP.js

@@ -8,7 +8,7 @@ export default {
       text: 'Loading...'
     },
     error: {
-      groupFixed: 'グループのヘッダを使用すると、固定列はグループで設定しなければなりません',
+      groupFixed: 'If you use group headers, the freeze columns must be set by group.',
       groupMouseRange: 'グループ化ヘッダーと「{0}」は同時に使用できません。これによりエラーが発生する可能性があります',
       groupTag: '分组列头应该使用 "{0}" 而不是 "{1}"，这可能会出现错误',
       scrollErrProp: '启用虚拟滚动后不支持该参数 "{0}"',
@@ -61,7 +61,7 @@ export default {
       customAll: '全部',
       customConfirm: '确认',
       customRestore: 'リセット',
-      maxFixedCol: '最大固定列的数量不能超过 {0} 个'
+      maxFixedCol: 'The maximum number of Freeze columns cannot exceed {0}'
     },
     grid: {
       selectOneRecord: '少なくとも1つのレコードを選択してください',
@@ -96,7 +96,7 @@ export default {
       endPageTitle: 'End page'
     },
     alert: {
-      title: 'メッセージ'
+      title: 'System messages'
     },
     button: {
       confirm: '完了',
@@ -109,7 +109,18 @@ export default {
       cstmTitle: 'Column Settings',
       cstmRestore: 'Restore default',
       cstmCancel: 'Cancelar',
-      cstmConfirm: 'Confirm'
+      cstmConfirm: 'Confirm',
+      cstmConfirmRestore: 'Please confirm whether to restore the default column configuration?',
+      cstmDragTarget: 'Moving target: {0}',
+      setting: {
+        colSort: 'Sort',
+        colTitle: 'Title',
+        colVisible: 'Visible',
+        colFixed: 'Freeze column',
+        fixedLeft: 'Left',
+        fixedUnset: 'Unset',
+        fixedRight: 'Right'
+      }
     },
     import: {
       modes: {
@@ -188,8 +199,9 @@ export default {
       customAll: '全部',
       customConfirm: '確定',
       customRestore: 'リセット',
-      fixedLeft: '固定在左侧',
-      fixedRight: '固定在右侧'
+      fixedLeft: 'Freeze on the left',
+      fixedRight: 'Freeze on the right',
+      cancelfixed: 'Unfreeze column'
     },
     input: {
       date: {

package/packages/locale/lang/pt-BR.js

@@ -8,7 +8,7 @@ export default {
       text: 'Carregando...'
     },
     error: {
-      groupFixed: 'Se você estiver usando cabeçalhos de grupo, as colunas fixas devem ser definidas por grupo.',
+      groupFixed: 'If you use group headers, the freeze columns must be set by group.',
       groupMouseRange: 'Agrupar cabeçalhos e "{0}" não podem ser usados ao mesmo tempo, o que pode causar erros.',
       groupTag: 'O cabeçalho da coluna de agrupamento deve usar "{0}" em vez de "{1}", o que pode causar erros.',
       scrollErrProp: 'O parâmetro "{0}" não é suportado quando a rolagem virtual está habilitada.',
@@ -61,7 +61,7 @@ export default {
       customAll: 'Todos',
       customConfirm: 'Confirmar',
       customRestore: 'Redefinir',
-      maxFixedCol: 'O número máximo de colunas fixas não pode exceder {0}'
+      maxFixedCol: 'The maximum number of Freeze columns cannot exceed {0}'
     },
     grid: {
       selectOneRecord: 'Por favor, selecione pelo menos um registro!',
@@ -88,7 +88,7 @@ export default {
       nextJump: 'Saltar para próxima página'
     },
     alert: {
-      title: 'Notificação de Mensagem'
+      title: 'System messages'
     },
     button: {
       confirm: 'Confirmar',
@@ -101,7 +101,18 @@ export default {
       cstmTitle: 'Column Settings',
       cstmRestore: 'Restore default',
       cstmCancel: 'Cancelar',
-      cstmConfirm: 'Confirm'
+      cstmConfirm: 'Confirm',
+      cstmConfirmRestore: 'Please confirm whether to restore the default column configuration?',
+      cstmDragTarget: 'Moving target: {0}',
+      setting: {
+        colSort: 'Sort',
+        colTitle: 'Title',
+        colVisible: 'Visible',
+        colFixed: 'Freeze column',
+        fixedLeft: 'Left',
+        fixedUnset: 'Unset',
+        fixedRight: 'Right'
+      }
     },
     import: {
       modes: {
@@ -180,9 +191,9 @@ export default {
       customAll: 'Todos',
       customConfirm: 'Confirmar',
       customRestore: 'Redefinir',
-      fixedLeft: 'Fixar à esquerda',
-      fixedRight: 'Fixar à direita',
-      cancelfixed: 'Não fixar'
+      fixedLeft: 'Freeze on the left',
+      fixedRight: 'Freeze on the right',
+      cancelfixed: 'Unfreeze column'
     },
     input: {
       date: {