From b9f5469734449e0225027f57d040505eb9256018 Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <1171051090@qq.com>
Date: Tue, 26 Jan 2021 17:57:31 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A1=A8=E6=A0=BC=E7=9B=B8=E5=85=B3=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/emitter.ts                          |  1 -
 .../ElementStylePanel/TableStylePanel.vue     | 33 ++++++++++---------
 .../element/TableElement/EditableTable.vue    | 32 ++++++++++++------
 3 files changed, 39 insertions(+), 27 deletions(-)

diff --git a/src/utils/emitter.ts b/src/utils/emitter.ts
index d12dbb2..2ff0c60 100644
--- a/src/utils/emitter.ts
+++ b/src/utils/emitter.ts
@@ -4,7 +4,6 @@ export enum EmitterEvents {
   UPDATE_TEXT_STATE = 'UPDATE_TEXT_STATE',
   EXEC_TEXT_COMMAND = 'EXEC_TEXT_COMMAND',
   UPDATE_TABLE_SELECTED_CELL = 'UPDATE_TABLE_SELECTED_CELL',
-  EXEC_TABLE_COMMAND = 'EXEC_TABLE_COMMAND',
   SCALE_ELEMENT_STATE = 'SCALE_ELEMENT_STATE',
 }
 
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue
index 1e6f0f8..d6eeac7 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue
@@ -109,24 +109,18 @@
     <Divider />
 
     <div class="row">
-      <Button style="flex: 5;">上方插入行</Button>
-      <div style="flex: 1;"></div>
-      <Button style="flex: 5;">下方插入行</Button>
+      <div style="flex: 2;">行数：</div>
+      <InputNumber 
+        :value="rowCount" 
+        style="flex: 3;" 
+      />
     </div>
     <div class="row">
-      <Button style="flex: 5;">左侧插入列</Button>
-      <div style="flex: 1;"></div>
-      <Button style="flex: 5;">右侧插入列</Button>
-    </div>
-    <div class="row">
-      <Button style="flex: 5;">删除行</Button>
-      <div style="flex: 1;"></div>
-      <Button style="flex: 5;">删除列</Button>
-    </div>
-    <div class="row">
-      <Button style="flex: 5;">合并单元格</Button>
-      <div style="flex: 1;"></div>
-      <Button style="flex: 5;">拆分单元格</Button>
+      <div style="flex: 2;">列数：</div>
+      <InputNumber 
+        :value="colCount" 
+        style="flex: 3;" 
+      />
     </div>
 
     <Divider />
@@ -217,12 +211,17 @@ export default defineComponent({
 
     const theme = ref<TableTheme>()
     const hasTheme = ref(false)
+    const rowCount = ref(0)
+    const colCount = ref(0)
 
     watch(handleElement, () => {
       if(!handleElement.value) return
       
       theme.value = handleElement.value.theme
       hasTheme.value = !!theme.value
+
+      rowCount.value = handleElement.value.data.length
+      colCount.value = handleElement.value.data[0].length
     }, { deep: true, immediate: true })
 
     const selectedCells = ref<string[]>([])
@@ -334,6 +333,8 @@ export default defineComponent({
       textAttrs,
       updateTextAttrs,
       theme,
+      rowCount,
+      colCount,
       hasTheme,
       toggleTheme,
       updateTheme,
diff --git a/src/views/components/element/TableElement/EditableTable.vue b/src/views/components/element/TableElement/EditableTable.vue
index 99a6caf..edc72d6 100644
--- a/src/views/components/element/TableElement/EditableTable.vue
+++ b/src/views/components/element/TableElement/EditableTable.vue
@@ -522,6 +522,24 @@ export default defineComponent({
       return effectiveTableCells
     }
 
+    const checkCanDeleteRowOrCol = () => {
+      const effectiveTableCells = getEffectiveTableCells()
+      const canDeleteRow = effectiveTableCells.length > 1
+      const canDeleteCol = effectiveTableCells[0].length > 1
+
+      return { canDeleteRow, canDeleteCol }
+    }
+
+    const checkCanMergeOrSplit = (rowIndex: number, colIndex: number) => {
+      const isMultiSelected = selectedCells.value.length > 1
+      const targetCell = tableCells.value[rowIndex][colIndex]
+
+      const canMerge = isMultiSelected
+      const canSplit = !isMultiSelected && (targetCell.rowspan > 1 || targetCell.colspan > 1)
+
+      return { canMerge, canSplit }
+    }
+
     const contextmenus = (el: HTMLElement): ContextmenuItem[] => {
       const cellIndex = el.dataset.cellIndex as string
       const rowIndex = +cellIndex.split('_')[0]
@@ -532,14 +550,8 @@ export default defineComponent({
         endCell.value = []
       }
 
-      const isMultiSelected = selectedCells.value.length > 1
-
-      const targetCell = tableCells.value[rowIndex][colIndex]
-      const canSplit = targetCell.rowspan > 1 || targetCell.colspan > 1
-
-      const effectiveTableCells = getEffectiveTableCells()
-      const canDeleteRow = effectiveTableCells.length > 1
-      const canDeleteCol = effectiveTableCells[0].length > 1
+      const { canMerge, canSplit } = checkCanMergeOrSplit(rowIndex, colIndex)
+      const { canDeleteRow, canDeleteCol } = checkCanDeleteRowOrCol()
 
       return [
         {
@@ -569,12 +581,12 @@ export default defineComponent({
         { divider: true },
         {
           text: '合并单元格',
-          disable: !isMultiSelected,
+          disable: !canMerge,
           handler: mergeCells,
         },
         {
           text: '取消合并单元格',
-          disable: isMultiSelected || !canSplit,
+          disable: !canSplit,
           handler: () => splitCells(rowIndex, colIndex),
         },
         { divider: true },