vxe-table 3.12.14 → 3.12.16

package/lib/table/module/edit/mixin.js

@@ -16,6 +16,58 @@ const {
   renderer,
   getI18n
 } = _ui.VxeUI;
+function getEditColumnModel(row, column) {
+  const {
+    model,
+    editRender
+  } = column;
+  if (editRender) {
+    model.value = (0, _util.getCellValue)(row, column);
+    model.update = false;
+  }
+}
+function setEditColumnModel(row, column) {
+  const {
+    model,
+    editRender
+  } = column;
+  if (editRender && model.update) {
+    (0, _util.setCellValue)(row, column, model.value);
+    model.update = false;
+    model.value = null;
+  }
+}
+function removeCellSelectedClass($xeTable) {
+  const el = $xeTable.$refs.refElem;
+  if (el) {
+    const cell = el.querySelector('.col--selected');
+    if (cell) {
+      (0, _dom.removeClass)(cell, 'col--selected');
+    }
+  }
+}
+function syncActivedCell($xeTable) {
+  const reactData = $xeTable;
+  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, newRecords, isAppend) {
   const {
     tableFullTreeData,
@@ -370,6 +422,214 @@ function handleInsertChildRowAt($xeTable, records, parentRow, targetRow, isInser
     rows: []
   });
 }
+function handleClearEdit($xeTable, evnt, targetRow) {
+  const props = $xeTable;
+  const reactData = $xeTable;
+  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 && (0, _util.getRowid)($xeTable, targetRow) !== (0, _util.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, params, evnt, isFocus) {
+  const props = $xeTable;
+  const reactData = $xeTable;
+  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 && (0, _utils.isEnableConf)(editConfig) && (0, _utils.isEnableConf)(editRender)) {
+    // 激活编辑
+    if (!$xeTable.isPendingByRow(row)) {
+      if (actived.row !== row || (mode === 'cell' ? actived.column !== column : false)) {
+        // 判断是否禁用编辑
+        let type = 'edit-disabled';
+        if (!beforeEditMethod || beforeEditMethod(Object.assign(Object.assign({}, 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 => getEditColumnModel(row, column));
+          } else {
+            getEditColumnModel(row, column);
+          }
+          const afterEditMethod = editOpts.afterEditMethod;
+          $xeTable.$nextTick(() => {
+            if (isFocus) {
+              $xeTable.handleFocus(params, evnt);
+            }
+            if (afterEditMethod) {
+              afterEditMethod(Object.assign(Object.assign({}, 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) {
+            (0, _util.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, row, fieldOrColumn, isPos) {
+  const props = $xeTable;
+  const internalData = $xeTable;
+  const {
+    editConfig
+  } = props;
+  const column = _xeUtils.default.isString(fieldOrColumn) ? $xeTable.getColumnByField(fieldOrColumn) : fieldOrColumn;
+  if (row && column && (0, _utils.isEnableConf)(editConfig) && (0, _utils.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();
+}
 var _default = exports.default = {
   methods: {
     /**
@@ -437,7 +697,7 @@ var _default = exports.default = {
       const childrenField = treeOpts.children || treeOpts.childrenField;
       const {
         actived,
-        removeList,
+        removeMaps,
         insertMaps
       } = editStore;
       const {
@@ -452,7 +712,8 @@ var _default = exports.default = {
       // 如果是新增，则保存记录
       rows.forEach(row => {
         if (!$xeTable.isInsertByRow(row)) {
-          removeList.push(row);
+          const rowid = (0, _util.getRowid)($xeTable, row);
+          removeMaps[rowid] = row;
         }
       });
       // 如果绑定了多选属性，则更新状态
@@ -627,7 +888,19 @@ var _default = exports.default = {
      * 获取已删除的数据
      */
     _getRemoveRecords() {
-      return this.editStore.removeList;
+      const $xeTable = this;
+      const reactData = $xeTable;
+      const {
+        editStore
+      } = reactData;
+      const {
+        removeMaps
+      } = editStore;
+      const removeRecords = [];
+      _xeUtils.default.each(removeMaps, row => {
+        removeRecords.push(row);
+      });
+      return removeRecords;
     },
     /**
      * 获取更新数据
@@ -635,6 +908,7 @@ var _default = exports.default = {
      * 如果是树表格，子节点更改状态不会影响父节点的更新状态
      */
     _getUpdateRecords() {
+      const $xeTable = this;
       const {
         keepSource,
         tableFullData,
@@ -652,7 +926,7 @@ var _default = exports.default = {
           column
         } = actived;
         if (row || column) {
-          this._syncActivedCell();
+          syncActivedCell($xeTable);
         }
         if (treeConfig) {
           return _xeUtils.default.filterTree(tableFullData, row => isUpdateByRow(row), treeOpts);
@@ -665,105 +939,8 @@ var _default = exports.default = {
      * 处理激活编辑
      */
     handleEdit(params, evnt) {
-      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 && (0, _utils.isEnableConf)(editConfig) && (0, _utils.isEnableConf)(editRender)) {
-        // 激活编辑
-        if (!this.hasPendingByRow(row)) {
-          if (actived.row !== row || (mode === 'cell' ? actived.column !== column : false)) {
-            // 判断是否禁用编辑
-            let type = 'edit-disabled';
-            if (!beforeEditMethod || beforeEditMethod(Object.assign(Object.assign({}, 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 => this._getColumnModel(row, column));
-              } else {
-                this._getColumnModel(row, column);
-              }
-              const afterEditMethod = editOpts.afterEditMethod;
-              this.$nextTick(() => {
-                this.handleFocus(params, evnt);
-                if (afterEditMethod) {
-                  afterEditMethod(Object.assign(Object.assign({}, params), {
-                    $table: this,
-                    $grid: this.$xegrid
-                  }));
-                }
-              });
-            }
-            this.emitEvent(type, params, evnt);
-            // 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) {
-                (0, _util.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();
+      const $xeTable = this;
+      return handleEditActive($xeTable, params, evnt, true);
     },
     /**
      * @deprecated
@@ -772,46 +949,14 @@ var _default = exports.default = {
       return this.handleEdit(params, evnt);
     },
     _getColumnModel(row, column) {
-      const {
-        model,
-        editRender
-      } = column;
-      if (editRender) {
-        model.value = (0, _util.getCellValue)(row, column);
-        model.update = false;
-      }
+      getEditColumnModel(row, column);
     },
     _setColumnModel(row, column) {
-      const {
-        model,
-        editRender
-      } = column;
-      if (editRender && model.update) {
-        (0, _util.setCellValue)(row, column, model.value);
-        model.update = false;
-        model.value = null;
-      }
+      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 => this._setColumnModel(row, column));
-        } else {
-          this._setColumnModel(row, column);
-        }
-      }
+      const $xeTable = this;
+      syncActivedCell($xeTable);
     },
     _clearActived(row) {
       if (process.env.NODE_ENV === 'development') {
@@ -824,63 +969,15 @@ var _default = exports.default = {
      * 清除激活的编辑
      */
     _clearEdit(row) {
-      return this.handleClearEdit(null, row);
+      const $xeTable = this;
+      return handleClearEdit($xeTable, null, row);
     },
     /**
      * 取消编辑
      */
     handleClearEdit(evnt, targetRow) {
       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 && (0, _util.getRowid)($xeTable, targetRow) !== (0, _util.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.NODE_ENV === 'development') {
@@ -997,11 +1094,12 @@ var _default = exports.default = {
      * 激活行编辑
      */
     _setEditRow(row, fieldOrColumn) {
+      const $xeTable = this;
       let column = _xeUtils.default.find(this.visibleColumn, column => (0, _utils.isEnableConf)(column.editRender));
       if (fieldOrColumn) {
         column = _xeUtils.default.isString(fieldOrColumn) ? this.getColumnByField(fieldOrColumn) : fieldOrColumn;
       }
-      return this.setEditCell(row, column);
+      return handleEditCell($xeTable, row, column, false);
     },
     _setActiveCell(row, fieldOrColumn) {
       if (process.env.NODE_ENV === 'development') {
@@ -1014,27 +1112,8 @@ var _default = exports.default = {
      * 激活单元格编辑
      */
     _setEditCell(row, fieldOrColumn) {
-      const {
-        editConfig
-      } = this;
-      const column = _xeUtils.default.isString(fieldOrColumn) ? this.getColumnByField(fieldOrColumn) : fieldOrColumn;
-      if (row && column && (0, _utils.isEnableConf)(editConfig) && (0, _utils.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 有效，选中单元格
@@ -1066,6 +1145,7 @@ var _default = exports.default = {
      * 处理选中源
      */
     handleSelected(params, evnt) {
+      const $xeTable = this;
       const {
         mouseConfig,
         mouseOpts,
@@ -1084,7 +1164,7 @@ var _default = exports.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);
@@ -1092,7 +1172,7 @@ var _default = exports.default = {
             selected.row = row;
             selected.column = column;
             if (isMouseSelected) {
-              this.addColSdCls();
+              this.addCellSelectedClass();
             }
             this.focus();
             if (evnt) {
@@ -1121,13 +1201,14 @@ var _default = exports.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() {
@@ -1136,23 +1217,22 @@ var _default = exports.default = {
         _xeUtils.default.arrayEach(headerElem.querySelectorAll('.col--title-selected'), elem => (0, _dom.removeClass)(elem, 'col--title-selected'));
       }
     },
-    reColSdCls() {
-      const cell = this.$el.querySelector('.col--selected');
-      if (cell) {
-        (0, _dom.removeClass)(cell, 'col--selected');
-      }
-    },
-    addColSdCls() {
+    addCellSelectedClass() {
+      const $xeTable = this;
+      const reactData = $xeTable;
+      const {
+        editStore
+      } = reactData;
       const {
         selected
-      } = this.editStore;
+      } = 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) {
           (0, _dom.addClass)(cell, 'col--selected');
         }