cannot sense inputTitle after undo

src/components/reportTemplate/ReportTemplate.vue

@@ -19,7 +19,6 @@
         <button @click="deleteCell()">删除列</button>
       </div>
       <div>
-
         <label>表头:</label><input type="text" v-model="inputTitle"><br>
         <label>宽度:</label><input type="number" v-model="inputColspan"><br>
         <label>高度:</label><input type="number" v-model="inputHeight"><br>
@@ -41,8 +40,8 @@
         <button @click="undoHandler">undo</button>
         <button @click="redoHandler">redo</button><br>
         <div>
+          <p>{{this.inputTitle}}</p>
           <p style="color: blue">以下功能用于测试使用</p>
-          <!-- <button @click="importTemplate">导入设计模板</button> -->
           <button @click="importTemplate">导入设计样式</button>
           <button @click="importData">导入数据</button><br>
           <label>单元ID:</label>
@@ -62,52 +61,76 @@ import initialTemplateData from '@/assets/templateInitialData'; // report templa
 import startUpRowColumn from '@/assets/startUpRowColumn'; // report template for testing
 import data from '@/assets/data'; //  userdata for testing use
 import reportCell from './reportCell.vue';
-const infosFormat: Array<{
+
-  rowId: number;
+let rowId = 29; // this figure is for testing use
-  cells: Array<{
+let cellId = 9025; // this figure is for testing use
-    cellId: number;
+let undoRodoPointer = -1;
-    title: string;
+let isundoOrRedoClick = false;
-    colspan: number;
+let isUpdateInfos = true;
-    height: number;
+export default Vue.extend({
+  components: { reportCell },
+  data(): {
+    infos: Array<{
+      rowId: number;
+      cells: Array<{
+        cellId: number;
+        title: string;
+        colspan: number;
+        height: number;
+        textAlign: string;
+        fontSize: number;
+        fontStyle: string;
+      }>;
+    }>;
+    selectedRow: number;
+    selectedCell: number;
+    inputTitle: string;
+    inputColspan: number;
+    inputHeight: number;
     textAlign: string;
     fontSize: number;
     fontStyle: string;
-  }>;
+    recordHistory: string[];
-}> = startUpRowColumn;
+    importedData: any;
-const selectedRowFormat: number = 0;
+    currentCell: {
-const selectedCellFormat: number = 9000;
+      cellId: number;
-const inputTitleFormat: string = '';
+      title: string;
-const inputColspanFormat: number = 0;
+      colspan: number;
-const recordHistoryFormat: string[] = [];
+      height: number;
-const textAlignFormat: string = '';
+      textAlign: string;
-const fontSizeFormat: number = 0;
+      fontSize: number;
-const fontStyleFormat: string = '';
+      fontStyle: string;
-const importedDataFormat: any = data;
+    };
-let rowId = 29;
+  } {
-let cellId = 9025;
-const initialInputColspan = 0;
-const initialInputHeight = 30;
-let undoRodoPointer = -1;
-let undoOrRedo = false;
-export default Vue.extend({
-  components: { reportCell },
-  data() {
     return {
-      infos: infosFormat,
+      infos: startUpRowColumn,
-      selectedRow: selectedRowFormat,
+      selectedRow: 0,
-      selectedCell: selectedCellFormat,
+      selectedCell: 9000,
-      inputTitle: inputTitleFormat,
+      inputTitle: '',
-      inputColspan: inputColspanFormat,
+      inputColspan: 0,
-      inputHeight: initialInputHeight,
+      inputHeight: 30,
-      textAlign: textAlignFormat,
+      textAlign: '',
-      fontSize: fontSizeFormat,
+      fontSize: 16,
-      fontStyle: fontStyleFormat,
+      fontStyle: 'normal',
-      recordHistory: recordHistoryFormat,
+      recordHistory: [],
-      importedData: importedDataFormat,
+      importedData: data,
+      currentCell: {
+        cellId: 0,
+        title: '',
+        colspan: 0,
+        height: 0,
+        textAlign: '',
+        fontSize: 0,
+        fontStyle: '',
+      },
     };
   },
   computed: {
     rows(): any {
+      if (!isUpdateInfos) {
+        isUpdateInfos = true;
+        return this.infos;
+      }
       for (const row of this.infos) {
         for (const cellKey in row.cells) {
           if (row.cells[cellKey].cellId === this.selectedCell) {
@@ -123,25 +146,19 @@ export default Vue.extend({
           }
         }
       }
-
+      // will not add to recordHistory if this.info is update by redo/undo button
       if (
-        undoOrRedo === false &&
+        isundoOrRedoClick === false &&
         this.recordHistory[this.recordHistory.length - 1] !==
           JSON.stringify(this.infos)
       ) {
         this.recordHistory.push(JSON.stringify(this.infos));
-
-        // console.log(
-        //   'computed 长度',
-        //   this.recordHistory,
-        //   '长度',
-        //   this.recordHistory.length,
-        // );
       }
 
       return this.infos;
     },
   },
+
   methods: {
     getCellFromChildren(cell: {
       cellId: number;
@@ -152,20 +169,21 @@ export default Vue.extend({
       fontSize: number;
       fontStyle: string;
     }): void {
-      this.selectedCell = cell.cellId;
+      this.currentCell = cell; // assign this cell to this.currentCell, due to other components may need this data.
-      this.inputTitle = cell.title;
+      this.selectedCell = this.currentCell.cellId;
-      this.inputColspan = cell.colspan;
+      this.inputTitle = this.currentCell.title;
-      this.inputHeight = cell.height;
+      this.inputColspan = this.currentCell.colspan;
-      this.textAlign = cell.textAlign;
+      this.inputHeight = this.currentCell.height;
-      this.fontSize = cell.fontSize;
+      this.textAlign = this.currentCell.textAlign;
-      this.fontStyle = cell.fontStyle;
+      this.fontSize = this.currentCell.fontSize;
+      this.fontStyle = this.currentCell.fontStyle;
     },
     addRow() {
       if (this.selectedRow) {
         for (const index in this.infos) {
           if (this.selectedRow === this.infos[index].rowId) {
             this.infos.splice(Number(index), 0, {
-              rowId: (this.selectedRow += 1),
+              rowId: (rowId += 1),
               cells: [],
             });
             this.selectedRow = 0;
@@ -184,6 +202,7 @@ export default Vue.extend({
         return alert('请选择要删除行');
       }
       this.infos = this.infos.filter((item) => item.rowId !== this.selectedRow);
+      this.selectedRow = 0;
     },
     addCell() {
       if (!this.selectedRow) {
@@ -194,8 +213,8 @@ export default Vue.extend({
           row.cells.push({
             cellId: (cellId += 1),
             title: '列' + cellId,
-            colspan: initialInputColspan,
+            colspan: 0,
-            height: initialInputHeight,
+            height: 30,
             textAlign: 'center',
             fontSize: 16,
             fontStyle: 'normal',
@@ -204,7 +223,8 @@ export default Vue.extend({
       }
     },
     deleteCell() {
-      if (!this.selectedCell) {
+      // 9000 is initial cell Id.
+      if (this.selectedCell === 9000) {
         return alert('请选择要删除的单元');
       }
       for (const row of this.infos) {
@@ -214,34 +234,39 @@ export default Vue.extend({
           }
         }
       }
+      this.selectedCell = 9000;
     },
     rowClickHandler(row: any): void {
       this.selectedRow = row.rowId;
     },
     undoHandler() {
-      if (undoRodoPointer < 0) {
+      if (undoRodoPointer === -1) {
         undoRodoPointer = this.recordHistory.length - 1;
       }
-      // console.log('总长度', this.recordHistory.length, '指针', undoRodoPointer);
+      // this is to avoid JSON error on console log
-      //  赋值不成功
+      if (undoRodoPointer === 0) {
-      this.infos = JSON.parse(this.recordHistory[undoRodoPointer - 1]);
+        return;
+      }
 
-      console.log(JSON.parse(this.recordHistory[undoRodoPointer - 1]));
+      this.infos = JSON.parse(this.recordHistory[(undoRodoPointer -= 1)]);
-
+      isundoOrRedoClick = true;
-      console.log(this.infos);
+      isUpdateInfos = false;
-
-      undoOrRedo = true;
     },
 
     redoHandler() {
-      if (undoRodoPointer < 0) {
+      if (undoRodoPointer === -1) {
         undoRodoPointer = this.recordHistory.length - 1;
       }
-      //  console.log('总长度', this.recordHistory.length, '指针', undoRodoPointer);
+      // this is to avoid JSON error on console log
 
+      if (undoRodoPointer === this.recordHistory.length - 1) {
+        return;
+      }
       this.infos = JSON.parse(this.recordHistory[(undoRodoPointer += 1)]);
-      undoOrRedo = true;
+      isundoOrRedoClick = true;
+      isUpdateInfos = false;
     },
+    // for testing use -----import data from other file
     importData() {
       for (const row of this.infos) {
         for (const cell of row.cells) {
@@ -262,7 +287,6 @@ export default Vue.extend({
       }
       for (const row of this.infos) {
         // get each cell
-
         const borderInfo: any = this.importedData.boards[0].boardInfos;
         for (const details of borderInfo) {
           const tem: any[] = [];
@@ -292,6 +316,7 @@ export default Vue.extend({
         }
       }
     },
+    // for testing use -----import data from other file
     importTemplate() {
       this.infos = initialTemplateData;
     },

src/components/reportTemplate/reportCell.vue

@@ -1,7 +1,6 @@
 <template>
   <td :style="'height:'+cell.height+'px;text-align:'+cell.textAlign+';font-size:'+cell.fontSize+'px;font-weight:'+cell.fontStyle" :colspan="cell.colspan" v-on:click="$emit('cellIdFromChild',cell)">
     <span>{{cell.title}}</span>
-
   </td>
 </template>
 <script lang="ts">

src/components/reportTemplate/reportRow.vue

@@ -1,40 +0,0 @@
-<template>
-  <tr @click="rowClickHandler" :class="{active:isActive}">
-    <reportCell></reportCell>
-  </tr>
-</template>
-<script lang="ts">
-import Vue from 'vue';
-import reportCell from './reportCell.vue';
-
-export default Vue.extend({
-  props: ['rowId'],
-  components: { reportCell },
-  data: function() {
-    return {
-      isActive: false,
-    };
-  },
-  methods: {
-    rowClickHandler: function() {
-      this.isActive = !this.isActive;
-      console.log(this.rowId);
-    },
-  },
-});
-</script>
-<style lang="scss" scoped>
-tr {
-  border: 1px black solid;
-}
-.active {
-  background-color: blue;
-}
-</style>
-
-
-
-/*
-
- @click="rowClickHandler(row.rowId,$event)" v-bind:class="{active:row.rowId==selectedRow}"
-*/