cloud-web-corejs 1.0.54-dev.81 → 1.0.54-dev.810

package/src/components/table/plugins/cell-area/index.js

@@ -0,0 +1,1055 @@
+/**
+ * vxe-table 区域选取 / 复制粘贴（自研，替代官方付费插件 vxe-table-extend-cell-area）
+ *
+ * 挂载方式走 vxe-table 3.x 开源版预留的官方扩展点 window.VXETableMixin
+ * （见 vxe-table/packages/table/index.js:7），Vue.use(VXETable) 时会被 push 进
+ * VxeTable.mixins 并随即 delete，因此本文件必须在 Vue.use(VXETable) 之前被求值。
+ *
+ * 只实现单块矩形区域：拖拽框选 / Shift 扩选 / 方向键移动 / 复制 / 剪切 / 粘贴 /
+ * Del 清空 / Esc 取消。不做多区域加选、填充柄、表头整列选中、区域合并、查找替换。
+ *
+ * 与 core 的对接点：
+ *   handleCellAreaEvent               <- keyboard/mixin.js 单元格 mousedown
+ *   handleKeyboardEvent               <- methods.js 整个 keydown（含 Esc 分支）
+ *   handleCopy/Cut/PasteCellAreaEvent <- methods.js document 上的 copy/cut/paste
+ *   handleUpdateCellAreas             <- methods.js resize/滚动/刷新后重绘
+ *   _xxx 方法                          <- methods.js 公共 API 代理
+ */
+import XEUtils from "xe-utils";
+import {
+  getAreaColumns,
+  getColumnField,
+  buildCellArea,
+  extendArea,
+  moveArea,
+  moveNextCell,
+  getIncrementRowSize,
+  encodeClipText,
+  encodeClipHtml,
+  decodeClipText,
+} from "./util.js";
+
+const AREA_CLS = "col--area";
+const ACTIVE_CLS = "col--area-active";
+const COPY_CLS = "col--copy-area";
+const EDGE_CLS = ["col--area-t", "col--area-b", "col--area-l", "col--area-r"];
+const ALL_CLS = [AREA_CLS, ACTIVE_CLS, COPY_CLS].concat(EDGE_CLS);
+
+const ARROW_OFFSET = {
+  37: [0, -1],
+  38: [-1, 0],
+  39: [0, 1],
+  40: [1, 0],
+};
+
+// 隐藏输入框里始终放一个占位符并选中它，保证浏览器认为"有东西可复制"
+const CLIP_PLACEHOLDER = " ";
+
+function getStore($table) {
+  if (!$table.$_cellAreaStore) {
+    // 故意不放进 data：选区变化非常频繁，进了响应式会带着整表 diff
+    $table.$_cellAreaStore = {
+      area: null,
+      copyArea: null,
+      copyMatrix: null,
+      isCut: false,
+      repaintId: null,
+      unbindDrag: null,
+    };
+  }
+  return $table.$_cellAreaStore;
+}
+
+function getRowkey($table) {
+  return $table.rowOpts.keyField || $table.rowId || "_X_ROW_KEY";
+}
+
+function getRowid($table, row) {
+  let rowid = XEUtils.get(row, getRowkey($table));
+  return XEUtils.eqNull(rowid) ? "" : encodeURIComponent(rowid);
+}
+
+function getAreaRows($table) {
+  return $table.afterFullData || [];
+}
+
+function getColumns($table) {
+  let areaOpts = $table.areaOpts || {};
+  return getAreaColumns($table.visibleColumn, areaOpts.excludeFields);
+}
+
+/** 同一个单元格在主体/左固定/右固定里可能有多份 DOM，一次全取出来 */
+function getCellElems($table, row, column) {
+  let $el = $table.$el;
+  if (!$el || !row || !column) return [];
+  let rowid = getRowid($table, row);
+  if (!rowid) return [];
+  let rowSelector = '.vxe-body--row[rowid="' + rowid + '"]';
+  let colSelector = '.vxe-body--column[colid="' + column.id + '"]';
+  return $el.querySelectorAll(rowSelector + " " + colSelector);
+}
+
+function removeAreaCls($table) {
+  let $el = $table.$el;
+  if (!$el) return;
+  let elems = $el.querySelectorAll("." + AREA_CLS + ", ." + COPY_CLS);
+  for (let i = 0; i < elems.length; i++) {
+    let classList = elems[i].classList;
+    for (let j = 0; j < ALL_CLS.length; j++) {
+      classList.remove(ALL_CLS[j]);
+    }
+  }
+}
+
+function paintArea($table) {
+  removeAreaCls($table);
+  let store = getStore($table);
+  let rows = getAreaRows($table);
+  let columns = getColumns($table);
+  let apply = function (area, isCopy) {
+    if (!area) return;
+    for (let r = area.startRow; r <= area.endRow; r++) {
+      let row = rows[r];
+      if (!row) continue;
+      for (let c = area.startCol; c <= area.endCol; c++) {
+        let column = columns[c];
+        if (!column) continue;
+        let elems = getCellElems($table, row, column);
+        for (let i = 0; i < elems.length; i++) {
+          let classList = elems[i].classList;
+          if (isCopy) {
+            classList.add(COPY_CLS);
+            continue;
+          }
+          classList.add(AREA_CLS);
+          if (r === area.startRow) classList.add(EDGE_CLS[0]);
+          if (r === area.endRow) classList.add(EDGE_CLS[1]);
+          if (c === area.startCol) classList.add(EDGE_CLS[2]);
+          if (c === area.endCol) classList.add(EDGE_CLS[3]);
+          if (r === area.anchorRow && c === area.anchorCol) {
+            classList.add(ACTIVE_CLS);
+          }
+        }
+      }
+    }
+  };
+  apply(store.copyArea, true);
+  apply(store.area, false);
+}
+
+/** 一次渲染爆发里只重绘一次 */
+function scheduleRepaint($table) {
+  let store = getStore($table);
+  if (!store.area && !store.copyArea) return;
+  if (store.repaintId) return;
+  store.repaintId = window.requestAnimationFrame(function () {
+    store.repaintId = null;
+    paintArea($table);
+  });
+}
+
+/**
+ * 浏览器只在"焦点落在可编辑元素上"或"文档里有非空选区"时才派发 copy/cut/paste。
+ * 光有选区高亮是不够的——焦点停在 body 上时按 Ctrl+C 连事件都不会发出来，
+ * core 的 handleGlobalCopyEvent 自然也就跑不到。所以这里自带一个隐藏 textarea，
+ * 只要有选区就让它持有焦点，剪贴板事件从它身上冒泡到 document 交给 core 分发。
+ */
+function ensureClipElem($table) {
+  let store = getStore($table);
+  if (store.clipElem && store.clipElem.parentNode) return store.clipElem;
+  let $el = $table.$el;
+  if (!$el) return null;
+  let elem = document.createElement("textarea");
+  elem.className = "vxe-table--cell-area-clip";
+  elem.setAttribute("tabindex", "-1");
+  elem.setAttribute("aria-hidden", "true");
+  // 不能用 display:none / visibility:hidden，那样就不可聚焦了；
+  // pointer-events:none 保证它不会挡住表头的鼠标事件
+  let hiddenStyle = "position:absolute;top:0;left:0;width:1px;height:1px;";
+  hiddenStyle += "padding:0;border:0;margin:0;opacity:0;resize:none;";
+  hiddenStyle += "overflow:hidden;pointer-events:none;";
+  elem.style.cssText = hiddenStyle;
+  elem.value = CLIP_PLACEHOLDER;
+  $el.appendChild(elem);
+  store.clipElem = elem;
+  return elem;
+}
+
+function focusClipElem($table) {
+  let elem = ensureClipElem($table);
+  if (!elem) return;
+  try {
+    if (elem.value !== CLIP_PLACEHOLDER) elem.value = CLIP_PLACEHOLDER;
+    elem.focus({ preventScroll: true });
+    elem.setSelectionRange(0, elem.value.length);
+  } catch (e) {
+    // 个别环境不支持 preventScroll / setSelectionRange，聚焦成功即可
+  }
+}
+
+function blurClipElem($table) {
+  let elem = getStore($table).clipElem;
+  if (elem && document.activeElement === elem) {
+    elem.blur();
+  }
+}
+
+function removeClipElem($table) {
+  let store = $table.$_cellAreaStore;
+  let elem = store && store.clipElem;
+  if (elem && elem.parentNode) {
+    elem.parentNode.removeChild(elem);
+  }
+  if (store) store.clipElem = null;
+}
+
+function setArea($table, area) {
+  getStore($table).area = area;
+  paintArea($table);
+  // 有选区就把焦点收到隐藏输入框，否则 Ctrl+C/V 根本不会触发剪贴板事件
+  focusClipElem($table);
+}
+
+function clearArea($table) {
+  getStore($table).area = null;
+  paintArea($table);
+  // 没选区了就把焦点还回去，别挡住单元格编辑器抢焦点
+  blurClipElem($table);
+}
+
+function toPublicArea($table, area) {
+  if (!area) return null;
+  let rows = getAreaRows($table);
+  let columns = getColumns($table);
+  return {
+    rows: rows.slice(area.startRow, area.endRow + 1),
+    cols: columns.slice(area.startCol, area.endCol + 1),
+    startRowIndex: area.startRow,
+    endRowIndex: area.endRow,
+    startColumnIndex: area.startCol,
+    endColumnIndex: area.endCol,
+  };
+}
+
+/** 由 row/column 反查在选区索引空间里的下标 */
+function getCellIndex($table, row, column) {
+  let rowIndex = getAreaRows($table).indexOf(row);
+  let colIndex = getColumns($table).indexOf(column);
+  if (rowIndex < 0 || colIndex < 0) return null;
+  return { rowIndex: rowIndex, colIndex: colIndex };
+}
+
+/**
+ * 解析 setCellAreas 的一项配置为选区下标。
+ *
+ * 官方签名（见 vxe-table/types/table.d.ts 的 CellAreaConfig）是
+ * `{ startRow, endRow, startColumn, endColumn }`，传的是行/列对象；
+ * 同时兼容 `{ rows, cols }`——那是 getCellAreas() 的返回形状，
+ * 支持它才能「取出来的选区直接塞回去」。
+ */
+function resolveAreaConfig($table, config) {
+  let rows = getAreaRows($table);
+  let columns = getColumns($table);
+  let startRowItem = config.startRow;
+  let endRowItem = config.endRow;
+  let startColItem = config.startColumn;
+  let endColItem = config.endColumn;
+  if (startRowItem === undefined && config.rows) {
+    let list = config.rows || [];
+    startRowItem = list[0];
+    endRowItem = list[list.length - 1];
+  }
+  if (startColItem === undefined && config.cols) {
+    let list = config.cols || [];
+    startColItem = list[0];
+    endColItem = list[list.length - 1];
+  }
+  let startRow = rows.indexOf(startRowItem);
+  let startCol = columns.indexOf(startColItem);
+  if (startRow < 0 || startCol < 0) return null;
+  // indexOf 的 -1 是"这行/列已经不在表里了"（数据刷新后拿旧引用还原选区很常见），
+  // 退化到起点格，绝不能当成下标 0——那会让选区朝反方向铺开
+  let endRow = endRowItem === undefined ? startRow : rows.indexOf(endRowItem);
+  let endCol = endColItem === undefined ? startCol : columns.indexOf(endColItem);
+  return {
+    startRow: startRow,
+    startCol: startCol,
+    endRow: endRow < 0 ? startRow : endRow,
+    endCol: endCol < 0 ? startCol : endCol,
+  };
+}
+
+const EDITOR_SELECTOR = [
+  "input:not([type=hidden]):not([disabled]):not([readonly])",
+  "textarea:not([disabled]):not([readonly])",
+  "select:not([disabled])",
+  '[contenteditable="true"]',
+].join(",");
+
+// 这些控件把文本当作特殊语义（日期解析、级联、下拉过滤），塞原始字符没意义甚至有害
+const NO_TYPE_THROUGH_SELECTOR = [
+  ".el-date-editor",
+  ".el-time-picker",
+  ".el-cascader",
+  ".el-select",
+  ".el-color-picker",
+].join(",");
+// 只有这些 input 类型接受直接键入
+const TEXT_INPUT_TYPES = ["", "text", "search", "tel", "url", "number"];
+
+/**
+ * 把触发编辑的那个字符补进编辑器。
+ *
+ * 焦点此刻在隐藏输入框上，keydown 必须 preventDefault（否则字符会污染占位符），
+ * 于是用户敲的字就丢了，得再敲一次。这里在编辑器渲染出来并聚焦后把它补回去，
+ * 凑齐 Excel 的「选中格直接打字＝覆盖着开始输入」。
+ */
+function applyTypedChar(input, char) {
+  let tagName = input.tagName.toUpperCase();
+  if (tagName === "INPUT") {
+    let type = (input.getAttribute("type") || "").toLowerCase();
+    if (TEXT_INPUT_TYPES.indexOf(type) < 0) return;
+  } else if (tagName !== "TEXTAREA") {
+    return;
+  }
+  if (input.closest && input.closest(NO_TYPE_THROUGH_SELECTOR)) return;
+  input.value = char;
+  // 必须派发 input 事件，v-model / element-ui 才收得到这次变更
+  input.dispatchEvent(new Event("input", { bubbles: true }));
+  if (typeof input.setSelectionRange === "function") {
+    try {
+      input.setSelectionRange(char.length, char.length);
+    } catch (e) {
+      // number 类型不支持 setSelectionRange，忽略
+    }
+  }
+}
+
+/**
+ * 进入编辑后把焦点落到单元格里的输入控件上。
+ *
+ * core 的 handleFocus 只认 editRender.autofocus 指定的选择器，内置 input 渲染器给的是
+ * `'input'`（renderer.js:522）。业务列普遍写 `editRender: { name: 'input' }` 再用自定义
+ * edit 插槽渲染 element-ui 控件——渲染出 <textarea> 的列（比如多行文本）就选不中，
+ * 结果是进了编辑态却没有焦点。这里兜底找第一个可输入控件。
+ */
+function focusCellEditor($table, row, column, typedChar) {
+  $table.$nextTick(function () {
+    let cell = $table.getCell(row, column);
+    if (!cell) return;
+    let input = cell.querySelector(EDITOR_SELECTOR);
+    // core 自己已经聚焦成功就别抢，但该补的字符还是要补
+    if (!cell.contains(document.activeElement)) {
+      if (!input) return;
+      try {
+        input.focus({ preventScroll: true });
+      } catch (e) {
+        input.focus();
+      }
+    }
+    if (typedChar) {
+      let target = cell.contains(document.activeElement) ? document.activeElement : input;
+      if (target) applyTypedChar(target, typedChar);
+    }
+  });
+}
+
+/** 让某个格进入编辑并聚焦（Backspace 与直接敲字都要用） */
+function activeCellEditor($table, row, column, evnt, typedChar) {
+  if (!row || !column || !isColumnWritable(column)) return;
+  let store = getStore($table);
+  // 键盘触发的编辑，起手就是「非聚焦式」：方向键切单元格而不是移光标（arrowCursorLock）
+  store.editSessionRow = row;
+  store.cursorLocked = true;
+  $table.handleActived(buildCellParams($table, row, column), evnt);
+  focusCellEditor($table, row, column, typedChar);
+}
+
+function activeAnchorCell($table, area, evnt) {
+  activeCellEditor(
+    $table,
+    getAreaRows($table)[area.anchorRow],
+    getColumns($table)[area.anchorCol],
+    evnt
+  );
+}
+
+function buildCellParams($table, row, column) {
+  return {
+    $table: $table,
+    row: row,
+    rowIndex: $table.getRowIndex(row),
+    column: column,
+    columnIndex: $table.getColumnIndex(column),
+    cell: $table.getCell(row, column),
+  };
+}
+
+/** 行级可编辑判定：沿用表格自己的 beforeEditMethod，不额外引入配置 */
+function isRowEditable($table, row, column) {
+  let editOpts = $table.editOpts || {};
+  let beforeEditMethod = editOpts.beforeEditMethod || editOpts.activeMethod;
+  if (!beforeEditMethod) return true;
+  return !!beforeEditMethod(buildCellParams($table, row, column));
+}
+
+function isClipExcluded($table, column) {
+  let clipOpts = $table.clipOpts || {};
+  let excludes = clipOpts.excludeFields || [];
+  return excludes.indexOf(getColumnField(column)) > -1;
+}
+
+/**
+ * 结构性可写判定：列上压根没有编辑器，说明这格用户永远改不了（单号、状态、序号、
+ * 创建时间这类纯展示列），Del / 剪切 / 默认粘贴就不该能改写它。
+ *
+ * 注意这只挡得住"整列只读"，挡不住随行状态变化的字段级权限
+ * （典型如本仓库 product_problem_record 的 getColumnAuth）——
+ * 那种要由页面通过 keyboardConfig.delMethod / clipConfig.pasteMethod 自己把关。
+ */
+function isColumnWritable(column) {
+  let editRender = column && column.editRender;
+  return !!editRender && editRender.enabled !== false;
+}
+
+/** 遍历选区内的每个单元格，回调拿到的是选区内的相对行列号 */
+function eachAreaCell($table, area, handler) {
+  let rows = getAreaRows($table);
+  let columns = getColumns($table);
+  for (let r = area.startRow; r <= area.endRow; r++) {
+    let row = rows[r];
+    if (!row) continue;
+    for (let c = area.startCol; c <= area.endCol; c++) {
+      let column = columns[c];
+      if (!column) continue;
+      handler(row, column, r - area.startRow, c - area.startCol);
+    }
+  }
+}
+
+function getAreaMatrix($table, area) {
+  let clipOpts = $table.clipOpts || {};
+  let matrix = [];
+  eachAreaCell($table, area, function (row, column, r, c) {
+    if (!matrix[r]) matrix[r] = [];
+    if (isClipExcluded($table, column)) {
+      matrix[r][c] = "";
+      return;
+    }
+    let cellValue = $table.getCellLabel(row, column);
+    let text = cellValue;
+    if (clipOpts.copyMethod) {
+      text = clipOpts.copyMethod(
+        Object.assign(buildCellParams($table, row, column), { cellValue: cellValue })
+      );
+    }
+    matrix[r][c] = text === null || text === undefined ? "" : text;
+  });
+  return matrix;
+}
+
+function clearAreaValues($table, area) {
+  let keyboardOpts = $table.keyboardOpts || {};
+  eachAreaCell($table, area, function (row, column) {
+    if (isClipExcluded($table, column)) return;
+    if (!isColumnWritable(column)) return;
+    if (!isRowEditable($table, row, column)) return;
+    if (keyboardOpts.delMethod) {
+      keyboardOpts.delMethod(buildCellParams($table, row, column));
+    } else {
+      XEUtils.set(row, getColumnField(column), null);
+    }
+  });
+  $table.updateFooter();
+}
+
+/**
+ * 粘贴落盘。必须整段同步执行：业务的 pasteMethod 里会读 window.event.clipboardData
+ * 取粘贴进来的图片文件，一旦跨出原生事件派发（setTimeout/await/$nextTick）就读不到了。
+ */
+function applyPaste($table, pasteCells, clipData) {
+  let store = getStore($table);
+  let area = store.area;
+  if (!area || !pasteCells.length) return;
+  let clipOpts = $table.clipOpts || {};
+  let columns = getColumns($table);
+
+  let beforeParams = {
+    $table: $table,
+    targetAreas: [toPublicArea($table, area)],
+    pasteCells: pasteCells,
+    clipData: clipData,
+  };
+  // 只有显式返回 false 才算取消；业务里常写成没有返回值的空函数
+  if (clipOpts.beforePasteMethod && clipOpts.beforePasteMethod(beforeParams) === false) {
+    return;
+  }
+
+  let startRowIndex = area.startRow;
+  let startColIndex = area.startCol;
+  let rows = getAreaRows($table);
+
+  if (clipOpts.isRowIncrement) {
+    let incrementSize = getIncrementRowSize(startRowIndex, pasteCells.length, rows.length);
+    if (incrementSize > 0) {
+      let insertRows = [];
+      for (let i = 0; i < incrementSize; i++) {
+        insertRows.push({});
+      }
+      let newRows = insertRows;
+      if (clipOpts.createRowsMethod) {
+        let created = clipOpts.createRowsMethod({
+          insertRows: insertRows,
+          pasteCells: pasteCells,
+        });
+        newRows = created || insertRows;
+      }
+      // insertAt 会把传入对象浅拷贝一份再入表，拿不到原引用；
+      // 但它是同步改 afterFullData 的（返回的 Promise 只是等渲染），
+      // 所以调用后直接重读 afterFullData 就能拿到真正入表的新行。
+      $table.insertAt(newRows, -1);
+      rows = getAreaRows($table);
+    }
+  }
+
+  let endRowIndex = startRowIndex;
+  let endColIndex = startColIndex;
+  for (let r = 0; r < pasteCells.length; r++) {
+    let row = rows[startRowIndex + r];
+    if (!row) break;
+    let clipRow = pasteCells[r] || [];
+    endRowIndex = startRowIndex + r;
+    for (let c = 0; c < clipRow.length; c++) {
+      let colIndex = startColIndex + c;
+      let column = columns[colIndex];
+      if (!column) break;
+      if (colIndex > endColIndex) endColIndex = colIndex;
+      if (isClipExcluded($table, column)) continue;
+      let params = Object.assign(buildCellParams($table, row, column), {
+        cellValue: clipRow[c],
+        clipData: clipData,
+      });
+      if (clipOpts.pasteMethod) {
+        // 有 pasteMethod 时由业务自行写值（含它自己的字段级权限判断），这里不再兜底赋值
+        clipOpts.pasteMethod(params);
+      } else if (isColumnWritable(column) && isRowEditable($table, row, column)) {
+        XEUtils.set(row, getColumnField(column), clipRow[c]);
+      }
+    }
+  }
+
+  let pastedArea = buildCellArea(startRowIndex, startColIndex);
+  pastedArea.focusRow = endRowIndex;
+  pastedArea.focusCol = endColIndex;
+  pastedArea.endRow = endRowIndex;
+  pastedArea.endCol = endColIndex;
+  setArea($table, pastedArea);
+  $table.updateFooter();
+
+  if (clipOpts.afterPasteMethod) {
+    clipOpts.afterPasteMethod({
+      $table: $table,
+      targetAreas: [toPublicArea($table, pastedArea)],
+      pasteCells: pasteCells,
+      clipData: clipData,
+    });
+  }
+}
+
+function stopDrag($table) {
+  let store = getStore($table);
+  if (store.unbindDrag) {
+    store.unbindDrag();
+    store.unbindDrag = null;
+  }
+}
+
+/** mousedown 落在输入控件上时不接管，交给控件自己处理 */
+function isFormElement(target) {
+  if (!target || !target.tagName) return false;
+  let tagName = target.tagName.toUpperCase();
+  if (tagName === "INPUT" || tagName === "TEXTAREA" || tagName === "SELECT") {
+    return true;
+  }
+  return !!(target.closest && target.closest(".vxe-cell--checkbox, .vxe-cell--radio"));
+}
+
+const cellAreaMixin = {
+  methods: {
+    /* -------------------------------- 鼠标 -------------------------------- */
+    handleCellAreaEvent(evnt, params) {
+      const $table = this;
+      const row = params.row;
+      const column = params.column;
+      if (evnt.button !== 0) return;
+      if (isFormElement(evnt.target)) {
+        // 鼠标点进输入框＝切成「聚焦式编辑」，方向键要交还给输入框移光标
+        const clickStore = getStore($table);
+        clickStore.editSessionRow = $table.editStore.actived.row;
+        clickStore.cursorLocked = false;
+        return;
+      }
+
+      const actived = $table.editStore.actived;
+      if (actived.row) {
+        const editOpts = $table.editOpts || {};
+        const sameCell = editOpts.mode === "row" || actived.column === column;
+        const inActivedCell = actived.row === row && sameCell;
+        // 点在正在编辑的那一行/那一格里，整片都是控件，交给编辑器，不算框选
+        if (inActivedCell) return;
+        // 点到别的行/格：自己把编辑态收掉。不能指望 core 的全局 mousedown——
+        // 本仓库 initVxeTable 在配了 editSaveUrl 时会塞 editConfig.autoClear:false
+        // （components/table/index.js:837），core 那整段清理逻辑直接被跳过（methods.js:2193）
+        $table.clearEdit(evnt);
+      }
+
+      const index = getCellIndex($table, row, column);
+      if (!index) {
+        clearArea($table);
+        return;
+      }
+      const store = getStore($table);
+      store.copyArea = null;
+
+      if (evnt.shiftKey && store.area) {
+        setArea($table, extendArea(store.area, index.rowIndex, index.colIndex));
+      } else {
+        setArea($table, buildCellArea(index.rowIndex, index.colIndex));
+      }
+      $table.emitEvent("cell-area-selection-start", params, evnt);
+
+      // 参照 core 的 handleCheckboxRangeEvent：整段接管 document 的 move/up 再还原。
+      // 必须先 stopDrag 再取快照：上一次拖拽如果没收到 mouseup（鼠标拖出窗口松开、
+      // 中途弹窗抢焦点），它装的 handler 还挂在 document 上，先取快照会把它当成
+      // “原始 handler”存起来，本次拖拽结束再还原回去，之后鼠标随便动都会一直框选。
+      stopDrag($table);
+      const domMousemove = document.onmousemove;
+      const domMouseup = document.onmouseup;
+      store.unbindDrag = function () {
+        document.onmousemove = domMousemove;
+        document.onmouseup = domMouseup;
+        if ($table.$el) $table.$el.classList.remove("drag--range");
+      };
+      if ($table.$el) $table.$el.classList.add("drag--range");
+
+      document.onmousemove = function (moveEvnt) {
+        const target = moveEvnt.target;
+        if (!target || !target.closest) return;
+        const cell = target.closest(".vxe-body--column");
+        if (!cell || !$table.$el || !$table.$el.contains(cell)) return;
+        const rowNode = $table.getRowNode(cell.parentNode);
+        const columnNode = $table.getColumnNode(cell);
+        if (!rowNode || !columnNode) return;
+        const moveIndex = getCellIndex($table, rowNode.item, columnNode.item);
+        if (!moveIndex) return;
+        const current = getStore($table).area;
+        if (
+          current
+          && current.focusRow === moveIndex.rowIndex
+          && current.focusCol === moveIndex.colIndex
+        ) {
+          return;
+        }
+        moveEvnt.preventDefault();
+        setArea($table, extendArea(current, moveIndex.rowIndex, moveIndex.colIndex));
+      };
+      document.onmouseup = function (upEvnt) {
+        stopDrag($table);
+        // mousedown 的默认行为会把焦点挪到 body，晚于我们的处理，
+        // 所以必须在 mouseup 再收一次焦点，否则 Ctrl+C 不会触发 copy 事件
+        if (getStore($table).area) focusClipElem($table);
+        $table.emitEvent("cell-area-selection-end", params, upEvnt);
+      };
+    },
+
+    /* -------------------------------- 重绘 -------------------------------- */
+    handleUpdateCellAreas() {
+      paintArea(this);
+    },
+
+    /* -------------------------------- 键盘 -------------------------------- */
+    handleKeyboardEvent(evnt) {
+      const $table = this;
+      const store = getStore($table);
+      const keyboardOpts = $table.keyboardOpts || {};
+      const editOpts = $table.editOpts || {};
+      const actived = $table.editStore.actived;
+      const keyCode = evnt.keyCode;
+      const isEsc = keyCode === 27;
+
+      // 编辑态默认只处理 Esc，其余按键留给编辑器本身
+      // （问题描述这类列是多行 textarea，Enter 必须能正常换行）
+      if (actived.row || actived.column) {
+        if (isEsc && keyboardOpts.isEsc) {
+          evnt.stopPropagation();
+          $table.clearEdit(evnt);
+          return;
+        }
+        if (!keyboardOpts.arrowCursorLock) return;
+        // 一次新的编辑默认是「非聚焦式」：方向键切单元格，不移光标
+        if (store.editSessionRow !== actived.row) {
+          store.editSessionRow = actived.row;
+          store.cursorLocked = true;
+        }
+        // F2 切成「聚焦式编辑」，之后方向键归输入框
+        if (keyCode === 113) {
+          store.cursorLocked = false;
+          return;
+        }
+        if (!store.cursorLocked || evnt.ctrlKey || evnt.metaKey) return;
+        const lockOffset = ARROW_OFFSET[keyCode];
+        if (!lockOffset) return;
+        const lockRows = getAreaRows($table);
+        const lockCols = getColumns($table);
+        const fromRow = lockRows.indexOf(actived.row);
+        const fromCol = lockCols.indexOf(actived.column);
+        if (fromRow < 0 || fromCol < 0) return;
+        evnt.preventDefault();
+        // 提交并关闭当前编辑，再把选区移到目标格（不再自动进编辑，与 Excel 一致）
+        $table.clearEdit(evnt);
+        const moved = moveArea(
+          buildCellArea(fromRow, fromCol),
+          lockOffset[0],
+          lockOffset[1],
+          lockRows.length,
+          lockCols.length,
+          false
+        );
+        setArea($table, moved);
+        $table.scrollToRow(lockRows[moved.anchorRow], lockCols[moved.anchorCol]);
+        return;
+      }
+
+      if (isEsc) {
+        $table.closeFilter();
+        $table.closeMenu();
+        store.copyArea = null;
+        clearArea($table);
+        return;
+      }
+
+      const area = store.area;
+      if (!area) return;
+
+      const rows = getAreaRows($table);
+      const columns = getColumns($table);
+      const rowSize = rows.length;
+      const colSize = columns.length;
+      const hasCtrlKey = evnt.ctrlKey || evnt.metaKey;
+      const hasShiftKey = evnt.shiftKey;
+
+      if (!hasCtrlKey && ARROW_OFFSET[keyCode] && keyboardOpts.isArrow !== false) {
+        const offset = ARROW_OFFSET[keyCode];
+        evnt.preventDefault();
+        // isShift 单独控制「按住方向键以活动区域为起点向指定方向扩展」，关掉就只是移动
+        const extend = hasShiftKey && keyboardOpts.isShift !== false;
+        const next = moveArea(area, offset[0], offset[1], rowSize, colSize, extend);
+        setArea($table, next);
+        $table.scrollToRow(rows[next.focusRow], columns[next.focusCol]);
+        return;
+      }
+
+      if (keyCode === 9 && keyboardOpts.isTab !== false) {
+        evnt.preventDefault();
+        const next = moveNextCell(area, true, hasShiftKey, rowSize, colSize);
+        setArea($table, next);
+        $table.scrollToRow(rows[next.anchorRow], columns[next.anchorCol]);
+        return;
+      }
+
+      if (keyCode === 13 && keyboardOpts.isEnter !== false) {
+        evnt.preventDefault();
+        const next = moveNextCell(area, false, hasShiftKey, rowSize, colSize);
+        setArea($table, next);
+        $table.scrollToRow(rows[next.anchorRow], columns[next.anchorCol]);
+        return;
+      }
+
+      // Del 与 Backspace 是两个开关、两种语义：
+      // Del 只清值；Backspace 清值后还要进编辑（沿用 core 的 isBack 语义）。
+      // isBack 是破坏性操作，默认关闭，必须显式打开。
+      if (keyCode === 46) {
+        if (keyboardOpts.isDel) {
+          evnt.preventDefault();
+          clearAreaValues($table, area);
+        }
+        return;
+      }
+      if (keyCode === 8) {
+        if (keyboardOpts.isBack) {
+          evnt.preventDefault();
+          clearAreaValues($table, area);
+          activeAnchorCell($table, area, evnt);
+        }
+        return;
+      }
+
+      const isPrintable
+        = keyCode === 32
+        || (keyCode >= 48 && keyCode <= 57)
+        || (keyCode >= 65 && keyCode <= 90)
+        || (keyCode >= 96 && keyCode <= 111)
+        || (keyCode >= 186 && keyCode <= 192)
+        || (keyCode >= 219 && keyCode <= 222);
+      const isF2 = keyCode === 113;
+      if (!hasCtrlKey && (isF2 || (keyboardOpts.isEdit && isPrintable))) {
+        // 焦点在隐藏输入框上，必须先拦下来再判断能不能进编辑：
+        // 列不可编辑时若提前 return，这个字符会被真的敲进隐藏框，污染占位符
+        evnt.preventDefault();
+        const row = rows[area.anchorRow];
+        const column = columns[area.anchorCol];
+        if (!row || !column || !isColumnWritable(column)) return;
+        let typedChar = "";
+        if (!isF2) {
+          // 直接敲字是「覆盖」不是「追加」（Excel 语义，core 默认路径也是先清空再进编辑）；
+          // F2 则是在原值上编辑，不清。清空复用 Del 那条通道，好继承 delMethod 里的字段级权限
+          clearAreaValues($table, buildCellArea(area.anchorRow, area.anchorCol));
+          // 清空被权限挡下了就别把字符补进去——那等于绕过 delMethod 改了这一格
+          if (XEUtils.eqNull(XEUtils.get(row, getColumnField(column)))) {
+            typedChar = evnt.key && evnt.key.length === 1 ? evnt.key : "";
+          }
+        }
+        if (keyboardOpts.editMethod) {
+          keyboardOpts.editMethod(buildCellParams($table, row, column));
+        } else if (editOpts.mode) {
+          // handleActived 内部自带 beforeEditMethod 判定，并会清掉选区
+          activeCellEditor($table, row, column, evnt, typedChar);
+        }
+      }
+    },
+
+    /* ------------------------------- 剪贴板 ------------------------------- */
+    /** 返回是否真的写了剪贴板，剪切要靠它决定敢不敢清源数据 */
+    handleCopyCellAreaEvent(evnt) {
+      const $table = this;
+      const store = getStore($table);
+      const clipOpts = $table.clipOpts || {};
+      if (clipOpts.isCopy === false) return false;
+      if (!store.area) return false;
+      const clipboardData = evnt.clipboardData || window.clipboardData;
+      if (!clipboardData) return false;
+      const matrix = getAreaMatrix($table, store.area);
+      evnt.preventDefault();
+      clipboardData.setData("text/plain", encodeClipText(matrix));
+      try {
+        // 同时写 HTML，粘进 Word/邮件/富文本才能保住表格结构；
+        // 个别环境只允许 text/plain，写不了就算了，不能让复制整个失败
+        clipboardData.setData("text/html", encodeClipHtml(matrix));
+      } catch (e) {
+        // ignore
+      }
+      store.copyMatrix = matrix;
+      store.copyArea = Object.assign({}, store.area);
+      store.isCut = false;
+      paintArea($table);
+      // 复原占位符与选中状态，保证下一次 Ctrl+C 还能触发
+      focusClipElem($table);
+      $table.emitEvent(
+        "cell-area-copy",
+        { targetAreas: [toPublicArea($table, store.area)] },
+        evnt
+      );
+      return true;
+    },
+
+    handleCutCellAreaEvent(evnt) {
+      const $table = this;
+      const store = getStore($table);
+      const clipOpts = $table.clipOpts || {};
+      if (clipOpts.isCut === false) return;
+      if (!store.area) return;
+      // 复制没成功就绝不清源，否则数据白丢
+      // （不能只看 store.copyArea 有没有值——那可能是上一次复制留下的）
+      if (!$table.handleCopyCellAreaEvent(evnt)) return;
+      store.isCut = true;
+      clearAreaValues($table, store.area);
+      $table.emitEvent(
+        "cell-area-cut",
+        { targetAreas: [toPublicArea($table, store.area)] },
+        evnt
+      );
+    },
+
+    handlePasteCellAreaEvent(evnt) {
+      const $table = this;
+      const store = getStore($table);
+      const clipOpts = $table.clipOpts || {};
+      if (clipOpts.isPaste === false) return;
+      if (!store.area) return;
+      const clipboardData = evnt.clipboardData || window.clipboardData;
+      if (!clipboardData) return;
+      const text = clipboardData.getData("text/plain") || "";
+      const html = clipboardData.getData("text/html") || "";
+      let pasteCells = decodeClipText(text);
+      if (!pasteCells.length) {
+        // 纯图片粘贴：没有文本内容，仍要把事件交给 pasteMethod 去处理附件列
+        if (!(clipboardData.files && clipboardData.files.length)) return;
+        pasteCells = [[""]];
+      }
+      evnt.preventDefault();
+      applyPaste($table, pasteCells, { text: text, html: html });
+      if (store.isCut) {
+        store.isCut = false;
+        store.copyArea = null;
+        paintArea($table);
+      }
+      // preventDefault 已经挡住了内容落进隐藏输入框，这里复原占位符与选中状态
+      focusClipElem($table);
+      $table.emitEvent("cell-area-paste", { pasteCells: pasteCells }, evnt);
+    },
+
+    /* ------------------------------ 公共 API ------------------------------ */
+    _getCellAreas() {
+      const area = getStore(this).area;
+      return area ? [toPublicArea(this, area)] : [];
+    },
+    _getActiveCellArea() {
+      const area = getStore(this).area;
+      if (!area) return null;
+      const row = getAreaRows(this)[area.anchorRow];
+      const column = getColumns(this)[area.anchorCol];
+      if (!row || !column) return null;
+      return buildCellParams(this, row, column);
+    },
+    _setActiveCellArea(params) {
+      const opts = params || {};
+      const index = getCellIndex(this, opts.row, opts.column);
+      if (index) {
+        setArea(this, buildCellArea(index.rowIndex, index.colIndex));
+      }
+      return this.$nextTick();
+    },
+    _setCellAreas(areas, activeArea) {
+      const first = (areas || [])[0];
+      const rect = first ? resolveAreaConfig(this, first) : null;
+      if (!rect) {
+        clearArea(this);
+        return this.$nextTick();
+      }
+      setArea(
+        this,
+        extendArea(buildCellArea(rect.startRow, rect.startCol), rect.endRow, rect.endCol)
+      );
+      if (activeArea) {
+        this._setActiveCellArea(activeArea);
+      }
+      return this.$nextTick();
+    },
+    _clearCellAreas() {
+      clearArea(this);
+      return this.$nextTick();
+    },
+    _getCopyCellArea() {
+      const copyArea = getStore(this).copyArea;
+      return copyArea ? toPublicArea(this, copyArea) : null;
+    },
+    _getCopyCellAreas() {
+      const copyArea = getStore(this).copyArea;
+      return copyArea ? [toPublicArea(this, copyArea)] : [];
+    },
+    _clearCopyCellArea() {
+      const store = getStore(this);
+      store.copyArea = null;
+      store.copyMatrix = null;
+      store.isCut = false;
+      paintArea(this);
+      return this.$nextTick();
+    },
+    // 下面三个也照样受 clipConfig 的开关约束：页面把 isCut 关掉是为了防丢数据，
+    // 显式调 cutCellArea() 就能绕过去的话，这个开关等于没有
+    // 官方签名：copyCellArea() / cutCellArea() 返回转换后的文本 { text, html }，
+    // 不是 Promise（见 types/table.d.ts）
+    _copyCellArea() {
+      const store = getStore(this);
+      const clipOpts = this.clipOpts || {};
+      if (!store.area || clipOpts.isCopy === false) {
+        return { text: "", html: "" };
+      }
+      const matrix = getAreaMatrix(this, store.area);
+      store.copyMatrix = matrix;
+      store.copyArea = Object.assign({}, store.area);
+      store.isCut = false;
+      paintArea(this);
+      // 程序化调用也要发事件：官方 demo 就是靠 cell-area-* 同步表尾合计之类的派生数据，
+      // 只在键盘路径发的话，走 API 的那次刷新就漏了
+      this.emitEvent("cell-area-copy", { targetAreas: [toPublicArea(this, store.area)] }, null);
+      return { text: encodeClipText(matrix), html: encodeClipHtml(matrix) };
+    },
+    _cutCellArea() {
+      const store = getStore(this);
+      const clipOpts = this.clipOpts || {};
+      if (!store.area || clipOpts.isCut === false || clipOpts.isCopy === false) {
+        return { text: "", html: "" };
+      }
+      const result = this._copyCellArea();
+      store.isCut = true;
+      clearAreaValues(this, store.area);
+      this.emitEvent("cell-area-cut", { targetAreas: [toPublicArea(this, store.area)] }, null);
+      return result;
+    },
+    /** 无事件入口的粘贴，落的是内部记录的复制内容，不读系统剪贴板 */
+    _pasteCellArea() {
+      const store = getStore(this);
+      const clipOpts = this.clipOpts || {};
+      if (clipOpts.isPaste === false) return this.$nextTick();
+      if (store.copyMatrix) {
+        applyPaste(this, store.copyMatrix, {
+          text: encodeClipText(store.copyMatrix),
+          html: "",
+        });
+        if (store.isCut) {
+          store.isCut = false;
+          store.copyArea = null;
+          paintArea(this);
+        }
+        this.emitEvent("cell-area-paste", { pasteCells: store.copyMatrix }, null);
+      }
+      return this.$nextTick();
+    },
+  },
+  created() {
+    // 只管开了区域选取的表格，不去动别的表格的编辑行为
+    if (!this.mouseConfig || !this.mouseOpts || !this.mouseOpts.area) return;
+    // 把 core 的 handleFocus 包一层，补一次兜底聚焦。
+    // 不能改成监听 edit-actived：mode=row 时 core 是在 checkValidate('blur').then() 里
+    // 异步调 handleActived 的，而且同一行换列走的是「不发事件、只 setTimeout(handleFocus)」
+    // 那条分支（edit/mixin.js:442）。包 handleFocus 才能覆盖双击/换列/API/键盘所有入口。
+    const rawHandleFocus = this.handleFocus;
+    const $table = this;
+    this.handleFocus = function (params, evnt) {
+      if (rawHandleFocus) rawHandleFocus.call($table, params, evnt);
+      if (params) focusCellEditor($table, params.row, params.column);
+    };
+  },
+  updated() {
+    // Vue 重渲染会把打在 td 上的高亮 class 冲掉，这里补回来
+    if (this.mouseConfig && this.mouseOpts && this.mouseOpts.area) {
+      scheduleRepaint(this);
+    }
+  },
+  beforeDestroy() {
+    stopDrag(this);
+    removeClipElem(this);
+    const store = this.$_cellAreaStore;
+    if (store && store.repaintId) {
+      window.cancelAnimationFrame(store.repaintId);
+      store.repaintId = null;
+    }
+  },
+};
+
+if (typeof window !== "undefined") {
+  // Vue.use(VXETable) 时 core 会读取并 delete 它；已有别的 mixin 时合并进去
+  const exist = window.VXETableMixin;
+  if (exist && exist !== cellAreaMixin) {
+    window.VXETableMixin = {
+      methods: Object.assign({}, exist.methods, cellAreaMixin.methods),
+      updated: cellAreaMixin.updated,
+      beforeDestroy: cellAreaMixin.beforeDestroy,
+    };
+  } else {
+    window.VXETableMixin = cellAreaMixin;
+  }
+}
+
+export default cellAreaMixin;