From ac0270090cdab47c7e7f9d3afc2b5fb6df01b3d4 Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <1171051090@qq.com>
Date: Mon, 25 Jan 2021 23:57:56 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E8=A1=A8=E6=A0=BC=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E4=B8=8E=E6=A0=B7=E5=BC=8F=E5=B7=A5=E5=85=B7=E6=A0=8F?=
 =?UTF-8?q?=E7=9A=84=E6=95=B0=E6=8D=AE=E5=90=8C=E6=AD=A5=E6=96=B9=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/emitter.ts                          |  2 +-
 .../ElementStylePanel/TableStylePanel.vue     | 48 +++++++++++++++++--
 .../components/element/TableElement/index.vue | 16 ++-----
 3 files changed, 49 insertions(+), 17 deletions(-)

diff --git a/src/utils/emitter.ts b/src/utils/emitter.ts
index 54a212e..e70b8a1 100644
--- a/src/utils/emitter.ts
+++ b/src/utils/emitter.ts
@@ -3,7 +3,7 @@ import mitt, { Emitter } from 'mitt'
 export enum EmitterEvents {
   UPDATE_TEXT_STATE = 'UPDATE_TEXT_STATE',
   EXEC_TEXT_COMMAND = 'EXEC_TEXT_COMMAND',
-  UPDATE_TABLE_TEXT_STATE = 'UPDATE_TABLE_TEXT_STATE',
+  UPDATE_TABLE_SELECTED_CELL = 'UPDATE_TABLE_SELECTED_CELL',
   EXEC_TABLE_TEXT_COMMAND = 'EXEC_TABLE_TEXT_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 4366ef2..99bcd45 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue
@@ -108,6 +108,29 @@
 
     <Divider />
 
+    <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>
+    <div class="row">
+      <Button style="flex: 5;">合并单元格</Button>
+      <div style="flex: 1;"></div>
+      <Button style="flex: 5;">拆分单元格</Button>
+    </div>
+
+    <Divider />
+
     <div class="row theme-switch">
       <div style="flex: 2;">启用主题表格：</div>
       <div class="switch-wrapper" style="flex: 3;">
@@ -202,7 +225,20 @@ export default defineComponent({
       hasTheme.value = !!theme.value
     }, { deep: true, immediate: true })
 
-    const updateTextAttrs = (style?: Partial<TableCellStyle>) => {
+    const selectedCells = ref<string[]>([])
+
+    const updateTextAttrs = () => {
+      if(!handleElement.value) return
+
+      let rowIndex = 0
+      let colIndex = 0
+      if(selectedCells.value.length) {
+        const selectedCell = selectedCells.value[0]
+        rowIndex = +selectedCell.split('_')[0]
+        colIndex = +selectedCell.split('_')[1]
+      }
+      const style = handleElement.value.data[rowIndex][colIndex].style
+
       if(!style) {
         textAttrs.value = {
           bold: false,
@@ -231,9 +267,14 @@ export default defineComponent({
       }
     }
 
-    emitter.on(EmitterEvents.UPDATE_TABLE_TEXT_STATE, style => updateTextAttrs(style))
+    const updateSelectedCells = (cells: string[]) => {
+      selectedCells.value = cells
+      updateTextAttrs()
+    }
+
+    emitter.on(EmitterEvents.UPDATE_TABLE_SELECTED_CELL, cells => updateSelectedCells(cells))
     onUnmounted(() => {
-      emitter.off(EmitterEvents.UPDATE_TABLE_TEXT_STATE, style => updateTextAttrs(style))
+      emitter.off(EmitterEvents.UPDATE_TABLE_SELECTED_CELL, cells => updateSelectedCells(cells))
     })
 
     const availableFonts = computed(() => store.state.availableFonts)
@@ -245,6 +286,7 @@ export default defineComponent({
 
     const emitUpdateTextAttrCommand = (textAttrProp: Partial<TableCellStyle>) => {
       emitter.emit(EmitterEvents.EXEC_TABLE_TEXT_COMMAND, textAttrProp)
+      updateTextAttrs()
     }
 
     const updateTheme = (themeProp: Partial<TableTheme>) => {
diff --git a/src/views/components/element/TableElement/index.vue b/src/views/components/element/TableElement/index.vue
index a181045..3e78902 100644
--- a/src/views/components/element/TableElement/index.vue
+++ b/src/views/components/element/TableElement/index.vue
@@ -161,17 +161,6 @@ export default defineComponent({
 
     const selectedCells = ref<string[]>([])
 
-    const emitUpdateTextAttrsState = () => {
-      let rowIndex = 0
-      let colIndex = 0
-      if(selectedCells.value.length) {
-        const selectedCell = selectedCells.value[0]
-        rowIndex = +selectedCell.split('_')[0]
-        colIndex = +selectedCell.split('_')[1]
-      }
-      emitter.emit(EmitterEvents.UPDATE_TABLE_TEXT_STATE, props.elementInfo.data[rowIndex][colIndex].style)
-    }
-
     const updateTextAttrs = (textAttrProp: Partial<TableCellStyle>) => {
       const data: TableCell[][] = JSON.parse(JSON.stringify(props.elementInfo.data))
 
@@ -190,12 +179,13 @@ export default defineComponent({
       })
 
       addHistorySnapshot()
-      nextTick(emitUpdateTextAttrsState)
     }
 
     const updateSelectedCells = (cells: string[]) => {
       selectedCells.value = cells
-      nextTick(emitUpdateTextAttrsState)
+      nextTick(() => {
+        emitter.emit(EmitterEvents.UPDATE_TABLE_SELECTED_CELL, selectedCells.value)
+      })
     }
 
     emitter.on(EmitterEvents.EXEC_TABLE_TEXT_COMMAND, state => updateTextAttrs(state))