调整表格组件与样式工具栏的数据同步方式

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',
 }

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>) => {

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))