vxe-table 3.12.14 → 3.12.16

package/packages/table/module/edit/mixin.ts

@@ -5,8 +5,53 @@ import { getCellValue, setCellValue, getRowid } from '../../src/util'
 import { browse, removeClass, addClass } from '../../../ui/src/dom'
 import { warnLog, errLog } from '../../../ui/src/log'
 
+import type { VxeTableConstructor, TableInternalData, VxeTableDefines, TableReactData, VxeTablePrivateMethods } from '../../../../types'
+
 const { getConfig, renderer, getI18n } = VxeUI
 
+function getEditColumnModel (row: any, column: VxeTableDefines.ColumnInfo) {
+  const { model, editRender } = column
+  if (editRender) {
+    model.value = getCellValue(row, column)
+    model.update = false
+  }
+}
+
+function setEditColumnModel (row: any, column: VxeTableDefines.ColumnInfo) {
+  const { model, editRender } = column
+  if (editRender && model.update) {
+    setCellValue(row, column, model.value)
+    model.update = false
+    model.value = null
+  }
+}
+
+function removeCellSelectedClass ($xeTable: VxeTableConstructor) {
+  const el = $xeTable.$refs.refElem as HTMLDivElement
+  if (el) {
+    const cell = el.querySelector('.col--selected')
+    if (cell) {
+      removeClass(cell, 'col--selected')
+    }
+  }
+}
+
+function syncActivedCell ($xeTable: VxeTableConstructor) {
+  const reactData = $xeTable as unknown as TableReactData
+
+  const { editStore, tableColumn } = reactData
+  const editOpts = $xeTable.computeEditOpts
+  const { actived } = editStore
+  const { row, column } = actived
+  if (row || column) {
+    if (editOpts.mode === 'row') {
+      tableColumn.forEach((column) => setEditColumnModel(row, column))
+    } else {
+      setEditColumnModel(row, column)
+    }
+  }
+}
+
 function insertTreeRow (_vm: any, newRecords: any[], isAppend: any) {
   const { tableFullTreeData, afterFullData, fullDataRowIdData, fullAllDataRowIdData, treeOpts } = _vm
   const { rowField, parentField, mapChildrenField } = treeOpts
@@ -221,7 +266,7 @@ function handleInsertRowAt ($xeTable: any, records: any[], targetRow: any, isIns
   })
 }
 
-function handleInsertChildRowAt ($xeTable: any, records: any, parentRow: any, targetRow: any, isInsertNextRow?: boolean) {
+function handleInsertChildRowAt ($xeTable: VxeTableConstructor, records: any, parentRow: any, targetRow: any, isInsertNextRow?: boolean) {
   const props = $xeTable
 
   const { treeConfig } = props
@@ -238,6 +283,183 @@ function handleInsertChildRowAt ($xeTable: any, records: any, parentRow: any, ta
   return Promise.resolve({ row: null, rows: [] })
 }
 
+function handleClearEdit ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, evnt: Event | null, targetRow?: any) {
+  const props = $xeTable
+  const reactData = $xeTable as unknown as TableReactData
+
+  const { mouseConfig } = props
+  const { editStore } = reactData
+  const { actived, focused } = editStore
+  const { row, column } = actived
+  const validOpts = $xeTable.computeValidOpts
+  const mouseOpts = $xeTable.computeMouseOpts
+  if (row || column) {
+    if (targetRow && getRowid($xeTable, targetRow) !== getRowid($xeTable, row)) {
+      return $xeTable.$nextTick()
+    }
+    syncActivedCell($xeTable)
+    actived.args = null
+    actived.row = null
+    actived.column = null
+    $xeTable.updateFooter()
+    $xeTable.dispatchEvent('edit-closed', {
+      row,
+      rowIndex: $xeTable.getRowIndex(row),
+      $rowIndex: $xeTable.getVMRowIndex(row),
+      column,
+      columnIndex: $xeTable.getColumnIndex(column),
+      $columnIndex: $xeTable.getVMColumnIndex(column)
+    }, evnt || null)
+  }
+  focused.row = null
+  focused.column = null
+  if (validOpts.autoClear) {
+    if (validOpts.msgMode !== 'full' || getConfig().cellVaildMode === 'obsolete') {
+      if ($xeTable.clearValidate) {
+        return $xeTable.clearValidate()
+      }
+    }
+  }
+  return $xeTable.$nextTick().then(() => {
+    if (mouseConfig && mouseOpts.area && $xeTable.handleRecalculateCellAreas) {
+      return $xeTable.handleRecalculateCellAreas()
+    }
+  })
+}
+
+function handleEditActive ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, params: any, evnt: Event | null, isFocus: boolean) {
+  const props = $xeTable
+  const reactData = $xeTable as unknown as TableReactData
+
+  const { editConfig, mouseConfig } = props
+  const { editStore, tableColumn } = reactData
+  const editOpts = $xeTable.computeEditOpts
+  const { mode } = editOpts
+  const { actived, focused } = editStore
+  const { row, column } = params
+  const { editRender } = column
+  const cell = (params.cell || $xeTable.getCellElement(row, column))
+  const beforeEditMethod = editOpts.beforeEditMethod || editOpts.activeMethod
+  params.cell = cell
+  if (cell && isEnableConf(editConfig) && isEnableConf(editRender)) {
+    // 激活编辑
+    if (!$xeTable.isPendingByRow(row)) {
+      if (actived.row !== row || (mode === 'cell' ? actived.column !== column : false)) {
+        // 判断是否禁用编辑
+        let type: 'edit-disabled' | 'edit-activated' = 'edit-disabled'
+        if (!beforeEditMethod || beforeEditMethod({ ...params, $table: $xeTable, $grid: $xeTable.xegrid })) {
+          if (mouseConfig) {
+            $xeTable.clearSelected()
+            if ($xeTable.clearCellAreas) {
+              $xeTable.clearCellAreas()
+              $xeTable.clearCopyCellArea()
+            }
+          }
+          $xeTable.closeTooltip()
+          if (actived.column) {
+            handleClearEdit($xeTable, evnt)
+          }
+          type = 'edit-activated'
+          column.renderHeight = cell.offsetHeight
+          actived.args = params
+          actived.row = row
+          actived.column = column
+          if (mode === 'row') {
+            tableColumn.forEach((column: any) => getEditColumnModel(row, column))
+          } else {
+            getEditColumnModel(row, column)
+          }
+          const afterEditMethod = editOpts.afterEditMethod
+          $xeTable.$nextTick(() => {
+            if (isFocus) {
+              $xeTable.handleFocus(params, evnt)
+            }
+            if (afterEditMethod) {
+              afterEditMethod({ ...params, $table: $xeTable, $grid: $xeTable.xegrid })
+            }
+          })
+        }
+        $xeTable.dispatchEvent(type, {
+          row,
+          rowIndex: $xeTable.getRowIndex(row),
+          $rowIndex: $xeTable.getVMRowIndex(row),
+          column,
+          columnIndex: $xeTable.getColumnIndex(column),
+          $columnIndex: $xeTable.getVMColumnIndex(column)
+        }, evnt)
+
+        // v4已废弃
+        if (type === 'edit-activated') {
+          $xeTable.dispatchEvent('edit-actived', {
+            row,
+            rowIndex: $xeTable.getRowIndex(row),
+            $rowIndex: $xeTable.getVMRowIndex(row),
+            column,
+            columnIndex: $xeTable.getColumnIndex(column),
+            $columnIndex: $xeTable.getVMColumnIndex(column)
+          }, evnt)
+        }
+      } else {
+        const { column: oldColumn } = actived
+        if (mouseConfig) {
+          $xeTable.clearSelected()
+          if ($xeTable.clearCellAreas) {
+            $xeTable.clearCellAreas()
+            $xeTable.clearCopyCellArea()
+          }
+        }
+        if (oldColumn !== column) {
+          const { model: oldModel } = oldColumn
+          if (oldModel.update) {
+            setCellValue(row, oldColumn, oldModel.value)
+          }
+          if ($xeTable.clearValidate) {
+            $xeTable.clearValidate(row, column)
+          }
+        }
+        column.renderHeight = cell.offsetHeight
+        actived.args = params
+        actived.column = column
+        if (isFocus) {
+          setTimeout(() => {
+            $xeTable.handleFocus(params, evnt)
+          })
+        }
+      }
+      focused.column = null
+      focused.row = null
+      $xeTable.focus()
+    }
+  }
+  return $xeTable.$nextTick()
+}
+
+function handleEditCell ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, row: any, fieldOrColumn: string | VxeTableDefines.ColumnInfo, isPos: boolean) {
+  const props = $xeTable
+  const internalData = $xeTable as unknown as TableInternalData
+
+  const { editConfig } = props
+  const column = XEUtils.isString(fieldOrColumn) ? $xeTable.getColumnByField(fieldOrColumn) : fieldOrColumn
+  if (row && column && isEnableConf(editConfig) && isEnableConf(column.editRender)) {
+    return Promise.resolve(isPos ? $xeTable.scrollToRow(row, column) : null).then(() => {
+      const cell = $xeTable.getCellElement(row, column)
+      if (cell) {
+        handleEditActive($xeTable, {
+          row,
+          rowIndex: $xeTable.getRowIndex(row),
+          column,
+          columnIndex: $xeTable.getColumnIndex(column),
+          cell,
+          $table: $xeTable
+        }, null, false)
+        internalData._lastCallTime = Date.now()
+      }
+      return $xeTable.$nextTick()
+    })
+  }
+  return $xeTable.$nextTick()
+}
+
 export default {
   methods: {
     /**
@@ -291,7 +513,7 @@ export default {
       const treeOpts = $xeTable.computeTreeOpts
       const { transform, mapChildrenField } = treeOpts
       const childrenField = treeOpts.children || treeOpts.childrenField
-      const { actived, removeList, insertMaps } = editStore
+      const { actived, removeMaps, insertMaps } = editStore
       const { checkField } = checkboxOpts
       let delList: any[] = []
       if (!rows) {
@@ -302,7 +524,8 @@ export default {
       // 如果是新增，则保存记录
       rows.forEach(row => {
         if (!$xeTable.isInsertByRow(row)) {
-          removeList.push(row)
+          const rowid = getRowid($xeTable, row)
+          removeMaps[rowid] = row
         }
       })
       // 如果绑定了多选属性，则更新状态
@@ -462,7 +685,16 @@ export default {
      * 获取已删除的数据
      */
     _getRemoveRecords () {
-      return this.editStore.removeList
+      const $xeTable = this
+      const reactData = $xeTable
+
+      const { editStore } = reactData
+      const { removeMaps } = editStore
+      const removeRecords: any[] = []
+      XEUtils.each(removeMaps, (row) => {
+        removeRecords.push(row)
+      })
+      return removeRecords
     },
     /**
      * 获取更新数据
@@ -470,12 +702,14 @@ export default {
      * 如果是树表格，子节点更改状态不会影响父节点的更新状态
      */
     _getUpdateRecords () {
+      const $xeTable = this
+
       const { keepSource, tableFullData, isUpdateByRow, treeConfig, treeOpts, editStore } = this
       if (keepSource) {
         const { actived } = editStore
         const { row, column } = actived
         if (row || column) {
-          this._syncActivedCell()
+          syncActivedCell($xeTable)
         }
         if (treeConfig) {
           return XEUtils.filterTree(tableFullData, row => isUpdateByRow(row), treeOpts)
@@ -488,80 +722,9 @@ export default {
      * 处理激活编辑
      */
     handleEdit (params: any, evnt: any) {
-      const { editStore, editOpts, tableColumn, editConfig, mouseConfig } = this
-      const { mode } = editOpts
-      const { actived, focused } = editStore
-      const { row, column } = params
-      const { editRender } = column
-      const cell = params.cell = (params.cell || this.getCellElement(row, column))
-      const beforeEditMethod = editOpts.beforeEditMethod || editOpts.activeMethod
-      if (cell && isEnableConf(editConfig) && isEnableConf(editRender)) {
-        // 激活编辑
-        if (!this.hasPendingByRow(row)) {
-          if (actived.row !== row || (mode === 'cell' ? actived.column !== column : false)) {
-            // 判断是否禁用编辑
-            let type = 'edit-disabled'
-            if (!beforeEditMethod || beforeEditMethod({ ...params, $table: this, $grid: this.$xegrid })) {
-              if (mouseConfig) {
-                this.clearSelected(evnt)
-                this.clearCellAreas(evnt)
-                this.clearCopyCellArea(evnt)
-              }
-              this.closeTooltip()
-              if (actived.column) {
-                this.handleClearEdit(evnt)
-              }
-              type = 'edit-activated'
-              column.renderHeight = cell.offsetHeight
-              actived.args = params
-              actived.row = row
-              actived.column = column
-              if (mode === 'row') {
-                tableColumn.forEach((column: any) => this._getColumnModel(row, column))
-              } else {
-                this._getColumnModel(row, column)
-              }
-              const afterEditMethod = editOpts.afterEditMethod
-              this.$nextTick(() => {
-                this.handleFocus(params, evnt)
-                if (afterEditMethod) {
-                  afterEditMethod({ ...params, $table: this, $grid: this.$xegrid })
-                }
-              })
-            }
-            this.emitEvent(type, params, evnt)
+      const $xeTable = this
 
-            // v4已废弃
-            if (type === 'edit-activated') {
-              this.emitEvent('edit-actived', params, evnt)
-            }
-          } else {
-            const { column: oldColumn } = actived
-            if (mouseConfig) {
-              this.clearSelected(evnt)
-              this.clearCellAreas(evnt)
-              this.clearCopyCellArea(evnt)
-            }
-            if (oldColumn !== column) {
-              const { model: oldModel } = oldColumn
-              if (oldModel.update) {
-                setCellValue(row, oldColumn, oldModel.value)
-              }
-              this.clearValidate()
-            }
-            column.renderHeight = cell.offsetHeight
-            actived.args = params
-            actived.column = column
-            setTimeout(() => {
-              this.handleFocus(params, evnt)
-            })
-          }
-          focused.column = null
-          focused.row = null
-          this.focus()
-        }
-      }
-      return this.$nextTick()
+      return handleEditActive($xeTable, params, evnt, true)
     },
     /**
      * @deprecated
@@ -569,32 +732,16 @@ export default {
     handleActived (params: any, evnt: any) {
       return this.handleEdit(params, evnt)
     },
-    _getColumnModel (row: any, column: any) {
-      const { model, editRender } = column
-      if (editRender) {
-        model.value = getCellValue(row, column)
-        model.update = false
-      }
+    _getColumnModel (row: any, column: VxeTableDefines.ColumnInfo) {
+      getEditColumnModel(row, column)
     },
-    _setColumnModel (row: any, column: any) {
-      const { model, editRender } = column
-      if (editRender && model.update) {
-        setCellValue(row, column, model.value)
-        model.update = false
-        model.value = null
-      }
+    _setColumnModel (row: any, column: VxeTableDefines.ColumnInfo) {
+      setEditColumnModel(row, column)
     },
     _syncActivedCell () {
-      const { tableColumn, editStore, editOpts } = this
-      const { actived } = editStore
-      const { row, column } = actived
-      if (row || column) {
-        if (editOpts.mode === 'row') {
-          tableColumn.forEach((column: any) => this._setColumnModel(row, column))
-        } else {
-          this._setColumnModel(row, column)
-        }
-      }
+      const $xeTable = this
+
+      syncActivedCell($xeTable)
     },
     _clearActived (row: any) {
       if (process.env.VUE_APP_VXE_ENV === 'development') {
@@ -607,54 +754,17 @@ export default {
      * 清除激活的编辑
      */
     _clearEdit (row: any) {
-      return this.handleClearEdit(null, row)
+      const $xeTable = this
+
+      return handleClearEdit($xeTable, null, row)
     },
     /**
      * 取消编辑
      */
     handleClearEdit (evnt: Event | null, targetRow?: any) {
       const $xeTable = this
-      const props = $xeTable
-      const reactData = $xeTable
 
-      const { mouseConfig } = props
-      const { editStore } = reactData
-      const { actived, focused } = editStore
-      const { row, column } = actived
-      const validOpts = $xeTable.validOpts
-      const mouseOpts = $xeTable.computeMouseOpts
-      if (row || column) {
-        if (targetRow && getRowid($xeTable, targetRow) !== getRowid($xeTable, row)) {
-          return $xeTable.$nextTick()
-        }
-        $xeTable._syncActivedCell()
-        actived.args = null
-        actived.row = null
-        actived.column = null
-        $xeTable.updateFooter()
-        $xeTable.emitEvent('edit-closed', {
-          row,
-          rowIndex: $xeTable.getRowIndex(row),
-          $rowIndex: $xeTable.getVMRowIndex(row),
-          column,
-          columnIndex: $xeTable.getColumnIndex(column),
-          $columnIndex: $xeTable.getVMColumnIndex(column)
-        }, evnt)
-      }
-      focused.row = null
-      focused.column = null
-      if (validOpts.autoClear) {
-        if (validOpts.msgMode !== 'full' || getConfig().cellVaildMode === 'obsolete') {
-          if ($xeTable.clearValidate) {
-            return $xeTable.clearValidate()
-          }
-        }
-      }
-      return $xeTable.$nextTick().then(() => {
-        if (mouseConfig && mouseOpts.area && $xeTable.handleRecalculateCellAreas) {
-          return $xeTable.handleRecalculateCellAreas()
-        }
-      })
+      return handleClearEdit($xeTable, evnt, targetRow)
     },
     _getActiveRecord () {
       if (process.env.VUE_APP_VXE_ENV === 'development') {
@@ -754,11 +864,13 @@ export default {
      * 激活行编辑
      */
     _setEditRow (row: any, fieldOrColumn: any) {
+      const $xeTable = this
+
       let column = XEUtils.find(this.visibleColumn, column => isEnableConf(column.editRender))
       if (fieldOrColumn) {
         column = XEUtils.isString(fieldOrColumn) ? this.getColumnByField(fieldOrColumn) : fieldOrColumn
       }
-      return this.setEditCell(row, column)
+      return handleEditCell($xeTable, row, column, false)
     },
     _setActiveCell (row: any, fieldOrColumn: any) {
       if (process.env.VUE_APP_VXE_ENV === 'development') {
@@ -771,18 +883,9 @@ export default {
      * 激活单元格编辑
      */
     _setEditCell (row: any, fieldOrColumn: any) {
-      const { editConfig } = this
-      const column = XEUtils.isString(fieldOrColumn) ? this.getColumnByField(fieldOrColumn) : fieldOrColumn
-      if (row && column && isEnableConf(editConfig) && isEnableConf(column.editRender)) {
-        return this.scrollToRow(row, true).then(() => {
-          const cell = this.getCellElement(row, column)
-          if (cell) {
-            this.handleEdit({ row, rowIndex: this.getRowIndex(row), column, columnIndex: this.getColumnIndex(column), cell, $table: this })
-            this.lastCallTime = Date.now()
-          }
-        })
-      }
-      return this.$nextTick()
+      const $xeTable = this
+
+      return handleEditCell($xeTable, row, fieldOrColumn, true)
     },
     /**
      * 只对 trigger=dblclick 有效，选中单元格
@@ -804,6 +907,8 @@ export default {
      * 处理选中源
      */
     handleSelected (params: any, evnt: any) {
+      const $xeTable = this
+
       const { mouseConfig, mouseOpts, editOpts, editStore } = this
       const { actived, selected } = editStore
       const { row, column } = params
@@ -811,7 +916,7 @@ export default {
       const selectMethod = () => {
         if (isMouseSelected && (selected.row !== row || selected.column !== column)) {
           if (actived.row !== row || (editOpts.mode === 'cell' ? actived.column !== column : false)) {
-            this.handleClearEdit(evnt)
+            handleClearEdit($xeTable, evnt)
             this.clearSelected(evnt)
             this.clearCellAreas(evnt)
             this.clearCopyCellArea(evnt)
@@ -819,7 +924,7 @@ export default {
             selected.row = row
             selected.column = column
             if (isMouseSelected) {
-              this.addColSdCls()
+              this.addCellSelectedClass()
             }
             this.focus()
             if (evnt) {
@@ -845,11 +950,13 @@ export default {
      * 清除所选中源状态
      */
     _clearSelected () {
+      const $xeTable = this
+
       const { selected } = this.editStore
       selected.row = null
       selected.column = null
       this.reColTitleSdCls()
-      this.reColSdCls()
+      removeCellSelectedClass($xeTable)
       return this.$nextTick()
     },
     reColTitleSdCls () {
@@ -858,18 +965,16 @@ export default {
         XEUtils.arrayEach(headerElem.querySelectorAll('.col--title-selected'), elem => removeClass(elem, 'col--title-selected'))
       }
     },
-    reColSdCls () {
-      const cell = this.$el.querySelector('.col--selected')
-      if (cell) {
-        removeClass(cell, 'col--selected')
-      }
-    },
-    addColSdCls () {
-      const { selected } = this.editStore
+    addCellSelectedClass () {
+      const $xeTable = this
+      const reactData = $xeTable as TableReactData
+
+      const { editStore } = reactData
+      const { selected } = editStore
       const { row, column } = selected
-      this.reColSdCls()
+      removeCellSelectedClass($xeTable)
       if (row && column) {
-        const cell = this.getCellElement(row, column)
+        const cell = $xeTable.getCellElement(row, column)
         if (cell) {
           addClass(cell, 'col--selected')
         }

package/packages/table/module/export/mixin.ts

@@ -2,6 +2,7 @@ import XEUtils from 'xe-utils'
 import { VxeUI } from '../../../ui'
 import { isColumnInfo, mergeBodyMethod, getCellValue } from '../../src/util'
 import { parseFile, formatText, eqEmptyValue } from '../../../ui/src/utils'
+import { hasClass } from '../../../ui/src/dom'
 import { createHtmlPage, getExportBlobByContent } from './util'
 import { warnLog, errLog } from '../../../ui/src/log'
 
@@ -132,7 +133,7 @@ function getBodyLabelData ($xeTable: VxeTableConstructor, opts: VxeTablePropType
                     cellValue = htmlCellElem.innerText.trim()
                   } else {
                     const cell = $xeTable.getCellElement(row, column)
-                    if (cell) {
+                    if (cell && !hasClass(cell, 'is--progress')) {
                       cellValue = cell.innerText.trim()
                     }
                   }
@@ -190,7 +191,7 @@ function getBodyLabelData ($xeTable: VxeTableConstructor, opts: VxeTablePropType
                 cellValue = htmlCellElem.innerText.trim()
               } else {
                 const cell = $xeTable.getCellElement(row, column)
-                if (cell) {
+                if (cell && !hasClass(cell, 'is--progress')) {
                   cellValue = cell.innerText.trim()
                 }
               }

package/packages/table/module/validator/mixin.ts

@@ -161,8 +161,9 @@ export default {
 
       const validRest: any = {}
       const { editRules, treeConfig } = props
-      const { pendingRowMaps } = reactData
+      const { editStore, pendingRowMaps } = reactData
       const { afterFullData } = internalData
+      const { removeMaps } = editStore
       const treeOpts = $xeTable.computeTreeOpts
       const childrenField = treeOpts.children || treeOpts.childrenField
       let validList
@@ -187,6 +188,10 @@ export default {
         const columns = cols && cols.length ? cols : this.getColumns()
         const handleVaild = (row: any) => {
           const rowid = getRowid($xeTable, row)
+          // 是否删除
+          if (removeMaps[rowid]) {
+            return
+          }
           // 是否标记删除
           if (pendingRowMaps[rowid]) {
             return

package/packages/table/src/body.ts

@@ -403,6 +403,7 @@ function renderTdColumn (
         'fixed--width': !isAutoCellWidth,
         'fixed--hidden': fixedHiddenColumn,
         'is--padding': isCellPadding,
+        'is--progress': (fixedHiddenColumn && isAllOverflow) || isVNPreEmptyStatus,
         'is--drag-cell': isRowDragCell && (isCrossDrag || isPeerDrag || !rowLevel),
         'is--drag-disabled': isDisabledDrag,
         'col--dirty': isDirty,