表格编辑

src/components/nursing-dashboard/dashboard-editor/index.vue

@@ -26,6 +26,8 @@ type TableChildren = {
   type: "tablerow" | "tablecell";
   id: string;
   display: boolean;
+  mergeids?: { row: number; col: number };
+  check?: boolean;
   data: any[];
   rowspan: number | null;
   colspan: number | null;
@@ -52,12 +54,57 @@ function getMinCell(endRow: number, endCol: number) {
   const startRow = store.startCell!.row;
   const startCol = store.startCell!.col;
 
-  return {
+  const data = {
     startRow: Math.min(startRow, endRow),
     startCol: Math.min(endCol, startCol),
     endRow: Math.max(startRow, endRow),
     endCol: Math.max(endCol, startCol),
   };
+
+  return 循环包裹的单元格(data);
+}
+
+function 循环包裹的单元格({ startRow, startCol, endRow, endCol }, check = []) {
+  console.log("循环包裹的单元格", startRow, startCol, endRow, endCol);
+  for (let i = startRow; i <= endRow; i++) {
+    for (let j = startCol; j <= endCol; j++) {
+      const cell = getData(i, j);
+      if (check.includes(`${i}-${j}`)) {
+        continue;
+      }
+      // 这个是处理被覆盖的单元格
+      if (cell.mergeids) {
+        check.push(`${i}-${j}`);
+        return 循环包裹的单元格(
+          {
+            startRow: Math.min(startRow, cell.mergeids.row),
+            startCol: Math.min(startCol, cell.mergeids.col),
+            endRow: Math.max(endRow, cell.mergeids.row),
+            endCol: Math.max(endCol, cell.mergeids.col),
+          },
+          check
+        );
+      }
+
+      // 处理覆盖别人的单元个
+      if (
+        (cell.rowspan && cell.rowspan > 0) ||
+        (cell.rowspan && cell.rowspan > 0)
+      ) {
+        check.push(`${i}-${j}`);
+        return 循环包裹的单元格(
+          {
+            startRow: startRow,
+            startCol: startCol,
+            endRow: Math.max(endRow, i + (cell.rowspan ?? 0) - 1),
+            endCol: Math.max(endCol, j + (cell.colspan ?? 0) - 1),
+          },
+          check
+        );
+      }
+    }
+  }
+  return { startRow, startCol, endRow, endCol };
 }
 
 function onMouseMove(row: number, col: number, td) {
@@ -66,21 +113,15 @@ function onMouseMove(row: number, col: number, td) {
   }
 
   console.log("getMinCell", getMinCell(row, col));
-  const startRow = store.startCell!.row;
-  const startCol = store.startCell!.col;
 
-  const minRow = Math.min(startRow, row);
-  const maxRow = Math.max(startRow, row);
-  const minCol = Math.min(startCol, col);
-  const maxCol = Math.max(startCol, col);
-  console.log("startRow:", startRow, "startCol", startCol);
+  const { startRow, startCol, endRow, endCol } = getMinCell(row, col);
 
   store.selectedCells = [];
 
   const tmp = [];
 
-  for (let r = minRow; r <= maxRow; r++) {
-    for (let c = minCol; c <= maxCol; c++) {
+  for (let r = startRow; r <= endRow; r++) {
+    for (let c = startCol; c <= endCol; c++) {
       tmp.push({ row: r, col: c });
     }
   }
@@ -105,7 +146,6 @@ function mergeCells() {
   if (store.selectedCells.length < 2) return;
 
   const firstCell = store.selectedCells[0];
-  const mergedCells = store.selectedCells.slice(1);
 
   const minRow = Math.min(...store.selectedCells.map(cell => cell.row));
   const maxRow = Math.max(...store.selectedCells.map(cell => cell.row));
@@ -122,9 +162,15 @@ function mergeCells() {
     if (row !== firstCell.row || col !== firstCell.col) {
       const cell = getData(row, col);
       cell.display = false;
+      cell.mergeids = {
+        row: firstCell.row,
+        col: firstCell.col,
+      };
     }
   });
 
+  console.log(tableConfig.table);
+
   // 清空选区
   store.selectedCells = [];
   store.isDragging = false;