import templat and data for testing done

.prettierrc

@@ -1,4 +1,5 @@
 {
   "singleQuote": true,
-  "trailingComma": "all"
+  "trailingComma": "all",
+  "arrowParens": "always"
 }

src/assets/data.ts

@@ -1,8 +1,7 @@
-
 const data = {
   orderNo: '101808023922',
   clientName: 'SongQingyang3',
-  soldData: '2018-08-23',
+  soldDate: '2018-08-23',
   contactName: 'K01',
   contactNo: '12345678901',
   deliveryAddress: 'D01',
@@ -10,12 +9,12 @@ const data = {
   boards: [
     {
       id: 1234,
-      matierial: '颗粒板',
+      material: '颗粒板',
       color: '暖白',
       boardInfos: [
         {
           houseName: 'F01',
-          closetName: 'F01',
+          closetName: 'G01',
           boardNo: 'B1816478862',
           boardName: '背板',
           length: 944,
@@ -26,12 +25,12 @@ const data = {
           mutation: '',
           shape: '',
           direction: '1/1/1/1 ',
-          strip: '正纹',
+          stripe: '正纹',
-          addOn: '',
+          boardAddOn: '',
         },
         {
           houseName: 'F01',
-          closetName: 'F01',
+          closetName: 'G01',
           boardNo: 'B1816478862',
           boardName: '层板',
           length: 944,
@@ -42,12 +41,12 @@ const data = {
           mutation: '',
           shape: '造型',
           direction: '1/1/1/1 ',
-          strip: '正纹',
+          stripe: '正纹',
-          addOn: '',
+          boardAddOn: '',
         },
         {
           houseName: 'F01',
-          closetName: 'F01',
+          closetName: 'G01',
           boardNo: 'B1816478875',
           boardName: '右侧板',
           length: 1198,
@@ -58,19 +57,24 @@ const data = {
           mutation: '',
           shape: '造型',
           direction: '1/1/1/1 ',
-          strip: '正纹',
+          stripe: '正纹',
-          addOn: '',
+          boardAddOn: '',
         },
       ],
     },
-    {
+  ],
+};
+
+export default data;
+/*
+  {
       id: 1235,
       matierial: '生态板 ',
       color: '暖白',
       boardInfos: [
         {
           houseName: 'F01',
-          closetName: 'F01',
+          closetName: 'G01',
           boardNo: 'B1816478862',
           boardName: '背板',
           length: 944,
@@ -81,13 +85,14 @@ const data = {
           mutation: '',
           shape: '',
           direction: '1/1/1/1 ',
-          strip: '正纹',
+          stripe: '正纹',
-          addOn: '',
+          boardAddOn: '',
         },
         {
           houseName: 'F01',
-          closetName: 'F01',
+          closetName: 'G01',
           boardNo: 'B1816478861',
+
           boardName: '背板',
           length: 944,
           width: 598,
@@ -97,12 +102,10 @@ const data = {
           mutation: '',
           shape: '',
           direction: '1/1/1/1 ',
-          strip: '正纹',
+          stripe: '正纹',
-          addOn: '',
+          boardAddOn: '',
         },
       ],
     },
-  ],
-};
 
-export default data;
+*/

src/assets/startUpRowColumn.ts

@@ -0,0 +1,391 @@
+const startUpRowColumn = [
+  {
+    rowId: 0,
+    rowTitle: 0,
+    cells: [
+      {
+        cellId: 1,
+        title: '1',
+        colspan: 1,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 2,
+        title: '2',
+        colspan: 1,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 3,
+        title: '3',
+        colspan: 1,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 4,
+        title: '4',
+        colspan: 1,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 5,
+        title: '5',
+        colspan: 1,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 6,
+        title: '6',
+        colspan: 1,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 7,
+        title: '7',
+        colspan: 1,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 8,
+        title: '8',
+        colspan: 1,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 9,
+        title: '9',
+        colspan: 1,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 10,
+        title: '10',
+        colspan: 1,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 11,
+        title: '11',
+        colspan: 1,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 12,
+        title: '12',
+        colspan: 1,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 13,
+        title: '13',
+        colspan: 1,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 14,
+        title: '14',
+        colspan: 1,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 15,
+        title: '15',
+        colspan: 1,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 16,
+        title: '16',
+        colspan: 1,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 17,
+        title: '17',
+        colspan: 1,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 18,
+        title: '18',
+        colspan: 1,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 19,
+        title: '19',
+        colspan: 1,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 20,
+        title: '20',
+        colspan: 1,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 21,
+        title: '21',
+        colspan: 1,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 22,
+        title: '22',
+        colspan: 1,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 23,
+        title: '23',
+        colspan: 1,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 24,
+        title: '24',
+        colspan: 1,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+    ],
+  },
+  {
+    rowId: 1,
+
+    rowTitle: 1,
+    cells: [],
+  },
+  {
+    rowId: 2,
+
+    rowTitle: 2,
+    cells: [],
+  },
+  {
+    rowId: 3,
+
+    rowTitle: 3,
+    cells: [],
+  },
+  {
+    rowId: 4,
+
+    rowTitle: 4,
+    cells: [],
+  },
+  {
+    rowId: 6,
+
+    rowTitle: 6,
+    cells: [],
+  },
+  {
+    rowId: 8,
+
+    rowTitle: 8,
+    cells: [],
+  },
+  {
+    rowId: 9,
+    rowTitle: 9,
+    cells: [],
+  },
+  {
+    rowId: 10,
+    rowTitle: 10,
+    cells: [],
+  },
+  {
+    rowId: 11,
+    rowTitle: 11,
+    cells: [],
+  },
+  {
+    rowId: 12,
+    rowTitle: 12,
+    cells: [],
+  },
+  {
+    rowId: 13,
+    rowTitle: 13,
+    cells: [],
+  },
+  {
+    rowId: 14,
+    rowTitle: 14,
+    cells: [],
+  },
+  {
+    rowId: 15,
+    rowTitle: 15,
+    cells: [],
+  },
+  {
+    rowId: 16,
+    rowTitle: 16,
+    cells: [],
+  },
+  {
+    rowId: 17,
+    rowTitle: 17,
+    cells: [],
+  },
+  {
+    rowId: 18,
+    rowTitle: 18,
+    cells: [],
+  },
+  {
+    rowId: 19,
+    rowTitle: 19,
+    cells: [],
+  },
+  {
+    rowId: 20,
+    rowTitle: 20,
+    cells: [],
+  },
+  {
+    rowId: 21,
+    rowTitle: 21,
+    cells: [],
+  },
+  {
+    rowId: 22,
+    rowTitle: 22,
+    cells: [],
+  },
+  {
+    rowId: 23,
+    rowTitle: 23,
+    cells: [],
+  },
+  {
+    rowId: 24,
+    rowTitle: 24,
+    cells: [],
+  },
+  {
+    rowId: 25,
+    rowTitle: 25,
+    cells: [],
+  },
+  {
+    rowId: 26,
+    rowTitle: 26,
+    cells: [],
+  },
+  {
+    rowId: 27,
+    rowTitle: 27,
+    cells: [],
+  },
+  {
+    rowId: 28,
+    rowTitle: 28,
+    cells: [],
+  },
+  {
+    rowId: 29,
+    rowTitle: 29,
+    cells: [],
+  },
+];
+
+export default startUpRowColumn;

src/assets/templateInitialData.ts

@@ -0,0 +1,647 @@
+const initialTemplateData = [
+  {
+    rowId: 0,
+    rowTitle: 0,
+    cells: [
+      {
+        cellId: 1,
+        title: '1',
+        colspan: 1,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 2,
+        title: '2',
+        colspan: 1,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 3,
+        title: '3',
+        colspan: 1,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 4,
+        title: '4',
+        colspan: 1,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 5,
+        title: '5',
+        colspan: 1,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 6,
+        title: '6',
+        colspan: 1,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 7,
+        title: '7',
+        colspan: 1,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 8,
+        title: '8',
+        colspan: 1,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 9,
+        title: '9',
+        colspan: 1,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 10,
+        title: '10',
+        colspan: 1,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 11,
+        title: '11',
+        colspan: 1,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 12,
+        title: '12',
+        colspan: 1,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 13,
+        title: '13',
+        colspan: 1,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 14,
+        title: '14',
+        colspan: 1,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 15,
+        title: '15',
+        colspan: 1,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 16,
+        title: '16',
+        colspan: 1,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 17,
+        title: '17',
+        colspan: 1,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 18,
+        title: '18',
+        colspan: 1,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 19,
+        title: '19',
+        colspan: 1,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 20,
+        title: '20',
+        colspan: 1,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 21,
+        title: '21',
+        colspan: 1,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 22,
+        title: '22',
+        colspan: 1,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 23,
+        title: '23',
+        colspan: 1,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 24,
+        title: '24',
+        colspan: 1,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+    ],
+  },
+  {
+    rowId: 1,
+
+    rowTitle: 1,
+    cells: [
+      {
+        cellId: 9001,
+        title: '板材明细单',
+        colspan: 24,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'bold',
+      },
+    ],
+  },
+  {
+    rowId: 2,
+
+    rowTitle: 2,
+    cells: [
+      {
+        cellId: 9002,
+        title: 'orderNo:',
+        colspan: 8,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 9003,
+        title: 'clientName:',
+        colspan: 8,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 9004,
+        title: 'soldDate:',
+        colspan: 8,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+    ],
+  },
+  {
+    rowId: 3,
+
+    rowTitle: 3,
+    cells: [
+      {
+        cellId: 9005,
+        title: 'contactName:',
+        colspan: 8,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 9006,
+        title: 'contactNo:',
+        colspan: 8,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 9007,
+        title: 'deliveryAddress:',
+        colspan: 8,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+    ],
+  },
+  {
+    rowId: 4,
+
+    rowTitle: 4,
+    cells: [
+      {
+        cellId: 9008,
+        title: 'addOn:',
+        colspan: 8,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+    ],
+  },
+  {
+    rowId: 6,
+
+    rowTitle: 6,
+    cells: [
+      {
+        cellId: 9009,
+        title: 'material:',
+        colspan: 8,
+
+        height: 30,
+        textAlign: 'left',
+        fontSize: 16,
+        fontStyle: 'bold',
+      },
+      {
+        cellId: 9010,
+        title: 'color:',
+        colspan: 8,
+
+        height: 30,
+        textAlign: 'left',
+        fontSize: 16,
+        fontStyle: 'bold',
+      },
+      {
+        cellId: 9011,
+        title: '共15条记录',
+        colspan: 8,
+
+        height: 30,
+        textAlign: 'left',
+        fontSize: 16,
+        fontStyle: 'bold',
+      },
+    ],
+  },
+  {
+    rowId: 8,
+
+    rowTitle: 8,
+    cells: [
+      {
+        cellId: 9012,
+        title: 'houseName',
+        colspan: 2,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'bold',
+      },
+      {
+        cellId: 9013,
+        title: 'closetName',
+        colspan: 0,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'bold',
+      },
+      {
+        cellId: 9014,
+        title: 'boardNo',
+        colspan: 2,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'bold',
+      },
+      {
+        cellId: 9015,
+        title: 'boardName',
+        colspan: 2,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'bold',
+      },
+      {
+        cellId: 9016,
+        title: 'length',
+        colspan: 0,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'bold',
+      },
+      {
+        cellId: 9017,
+        title: 'width',
+        colspan: 0,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'bold',
+      },
+      {
+        cellId: 9018,
+        title: 'thickness',
+        colspan: 0,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'bold',
+      },
+      {
+        cellId: 9019,
+        title: 'quantity',
+        colspan: 0,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'bold',
+      },
+      {
+        cellId: 9020,
+        title: 'area',
+        colspan: 0,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'bold',
+      },
+      {
+        cellId: 9021,
+        title: 'mutation',
+        colspan: 0,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'bold',
+      },
+      {
+        cellId: 9022,
+        title: 'shape',
+        colspan: 0,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'bold',
+      },
+      {
+        cellId: 9023,
+        title: 'direction',
+        colspan: 3,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'bold',
+      },
+      {
+        cellId: 9024,
+        title: 'stripe',
+        colspan: 2,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'bold',
+      },
+      {
+        cellId: 9025,
+        title: 'boardAddOn',
+        colspan: 5,
+
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'bold',
+      },
+    ],
+  },
+  {
+    rowId: 9,
+    rowTitle: 9,
+    cells: [],
+  },
+  {
+    rowId: 10,
+    rowTitle: 10,
+    cells: [],
+  },
+  {
+    rowId: 11,
+    rowTitle: 11,
+    cells: [],
+  },
+  {
+    rowId: 12,
+    rowTitle: 12,
+    cells: [],
+  },
+  {
+    rowId: 13,
+    rowTitle: 13,
+    cells: [],
+  },
+  {
+    rowId: 14,
+    rowTitle: 14,
+    cells: [],
+  },
+  {
+    rowId: 15,
+    rowTitle: 15,
+    cells: [],
+  },
+  {
+    rowId: 16,
+    rowTitle: 16,
+    cells: [],
+  },
+  {
+    rowId: 17,
+    rowTitle: 17,
+    cells: [],
+  },
+  {
+    rowId: 18,
+    rowTitle: 18,
+    cells: [],
+  },
+  {
+    rowId: 19,
+    rowTitle: 19,
+    cells: [],
+  },
+  {
+    rowId: 20,
+    rowTitle: 20,
+    cells: [],
+  },
+  {
+    rowId: 21,
+    rowTitle: 21,
+    cells: [],
+  },
+  {
+    rowId: 22,
+    rowTitle: 22,
+    cells: [],
+  },
+  {
+    rowId: 23,
+    rowTitle: 23,
+    cells: [],
+  },
+  {
+    rowId: 24,
+    rowTitle: 24,
+    cells: [],
+  },
+  {
+    rowId: 25,
+    rowTitle: 25,
+    cells: [],
+  },
+  {
+    rowId: 26,
+    rowTitle: 26,
+    cells: [],
+  },
+  {
+    rowId: 27,
+    rowTitle: 27,
+    cells: [],
+  },
+  {
+    rowId: 28,
+    rowTitle: 28,
+    cells: [],
+  },
+  {
+    rowId: 29,
+    rowTitle: 29,
+    cells: [],
+  },
+];
+
+export default initialTemplateData;

src/components/reportTemplate/ReportTemplate.vue

@@ -2,39 +2,25 @@
   <div class='main'>
     <div class='empty'></div>
     <div class='content'>
-
       <table>
-        <tr>
+        <tr v-for="row in rows" :key="row.rowId" :cells="row.cells">
-          <input class='row-counter' type="button" value="行0">
-
-          <td class='cell-counter' v-for="cell in initialCells">{{cell.title}}</td>
-        </tr>
-        <tr v-for="row in rows" :key="row.rowId" :cells="row.cells" v-bind:class="{active:row.rowId===selectedRow}">
           <input class='row-counter' type="button" :value='row.rowId' @click="rowClickHandler(row)">
-
           <reportCell v-for="cell in row.cells" :cell="cell" v-on:cellIdFromChild="getCellFromChildren" :key="cell.cellId" v-bind:class="{active:cell.cellId===selectedCell}"></reportCell>
         </tr>
       </table>
     </div>
     <div class='side'>
-      <div>
-        <span>
-          <strong>现在列:</strong>
-        </span>{{selectedRow}}
-        <span>
-          <strong>现在行:</strong>
-        </span>{{selectedCell}}
 
-      </div>
       <div class='row-tool'>
         <button @click="addRow">添加行</button>
         <button @click="deleteRow">删除行</button>
       </div>
       <div class='td-tool'>
-        <button @click="addCell(selectedRow)">添加列</button>
+        <button @click="addCell()">添加列</button>
-        <button @click="deleteCell(selectedCell)">删除列</button>
+        <button @click="deleteCell()">删除列</button>
       </div>
       <div>
+
         <label>表头:</label><input type="text" v-model="inputTitle"><br>
 
         <label>宽度:</label><input type="number" v-model="inputColspan"><br>
@@ -60,54 +46,57 @@
         <label for="three">居右</label>
         <br>
         <button @click="undoHandler">undo</button>
+        <button @click="redoHandler">redo</button><br>
+        <div>
+          <p style="
+    color: blue">以下功能用于测试使用</p>
+          <!-- <button @click="importTemplate">导入设计模板</button> -->
+          <button @click="importTemplate">导入设计样式</button>
+          <button @click="importData">导入数据</button><br>
+          <label>单元ID:</label>
+          <span>{{selectedCell}}</span><br>
+          <label>行ID:</label>
+          <span>{{selectedRow}}</span><br>
+
+        </div>
+
       </div>
-      {{inputColspan}} {{infos}}
     </div>
   </div>
 
 </template>
 <script lang="ts">
 import Vue from 'vue';
+import initialTemplateData from '@/assets/templateInitialData'; // report template for testing
+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: string;
+  rowId: number;
-  cells: Array<{ cellId: number; title: string }>;
+  cells: Array<{
-}> = [];
+    cellId: number;
+    title: string;
+    colspan: number;
+    height: number;
+    textAlign: string;
+    fontSize: number;
+    fontStyle: string;
+  }>;
+}> = startUpRowColumn;
 const selectedRowFormat: number = 0;
 const selectedCellFormat: number = 9000;
 const inputTitleFormat: string = '';
 const inputColspanFormat: number = 0;
-const initialCellsFormat: Array<{ cellId: number; title: string }> = [
+const recordHistoryFormat: string[] = [];
-  { cellId: 1, title: '1' },
+const textAlignFormat: string = '';
-  { cellId: 2, title: '2' },
+const fontSizeFormat: number = 0;
-  { cellId: 3, title: '3' },
+const fontStyleFormat: string = '';
-  { cellId: 4, title: '4' },
+const importedDataFormat: any = data;
-  { cellId: 5, title: '5' },
+let rowId = 29;
-  { cellId: 6, title: '6' },
+let cellId = 9025;
-  { cellId: 7, title: '7' },
+const initialInputColspan = 0;
-  { cellId: 8, title: '8' },
+const initialInputHeight = 30;
-  { cellId: 9, title: '9' },
+let undoRodoPointer = -1;
-  { cellId: 10, title: '10' },
-  { cellId: 11, title: '11' },
-  { cellId: 12, title: '12' },
-  { cellId: 13, title: '13' },
-  { cellId: 14, title: '14' },
-  { cellId: 15, title: '15' },
-  { cellId: 16, title: '16' },
-  { cellId: 17, title: '17' },
-  { cellId: 18, title: '18' },
-  { cellId: 19, title: '19' },
-  { cellId: 20, title: '20' },
-  { cellId: 21, title: '21' },
-  { cellId: 22, title: '22' },
-  { cellId: 23, title: '23' },
-  { cellId: 24, title: '24' },
-];
-let rowId = 0;
-let cellId = 9000;
-let initialInputColspan = 0;
-let initialInputHeight = 30;
-let pointer = 0;
 export default Vue.extend({
   components: { reportCell },
   data() {
@@ -118,23 +107,22 @@ export default Vue.extend({
       inputTitle: inputTitleFormat,
       inputColspan: inputColspanFormat,
       inputHeight: initialInputHeight,
-      initialCells: initialCellsFormat,
+      textAlign: textAlignFormat,
-      textAlign: '',
+      fontSize: fontSizeFormat,
-      fontSize: '',
+      fontStyle: fontStyleFormat,
-      fontStyle: '',
+      recordHistory: recordHistoryFormat,
-      recordHistory: [],
+      importedData: importedDataFormat,
     };
   },
   computed: {
     rows(): any {
-      //  Array<{rowId: string;cells: Array<{ cellId: number; title: string }>;}>
       for (const row of this.infos) {
-        for (const cellIndex in row.cells) {
+        for (const cellKey in row.cells) {
-          if (row.cells[cellIndex].cellId === this.selectedCell) {
+          if (row.cells[cellKey].cellId === this.selectedCell) {
-            row.cells.splice(Number(cellIndex), 1, {
+            row.cells.splice(Number(cellKey), 1, {
+              cellId: this.selectedCell,
               title: this.inputTitle,
               colspan: this.inputColspan,
-              cellId: this.selectedCell,
               height: this.inputHeight,
               textAlign: this.textAlign,
               fontSize: this.fontSize,
@@ -144,12 +132,15 @@ export default Vue.extend({
         }
       }
 
-      this.recordHistory.push(JSON.parse(JSON.stringify(this.infos)));
+      if (
-      pointer += 1;
+        this.recordHistory[this.recordHistory.length - 1] !==
+        JSON.stringify(this.infos)
+      ) {
+        this.recordHistory.push(JSON.stringify(this.infos));
+      }
 
       return this.infos;
     },
-    styled() {},
   },
   methods: {
     getCellFromChildren(cell: {
@@ -157,6 +148,9 @@ export default Vue.extend({
       title: string;
       colspan: number;
       height: number;
+      textAlign: string;
+      fontSize: number;
+      fontStyle: string;
     }): void {
       this.selectedCell = cell.cellId;
       this.inputTitle = cell.title;
@@ -167,58 +161,131 @@ export default Vue.extend({
       this.fontStyle = cell.fontStyle;
     },
     addRow() {
-      this.infos.push({
+      if (this.selectedRow) {
-        rowId: '行' + (rowId += 1),
+        for (const index in this.infos) {
-        cells: [],
+          if (this.selectedRow === this.infos[index].rowId) {
-      });
+            this.infos.splice(Number(index), 0, {
+              rowId: (this.selectedRow += 0.1),
+              cells: [],
+            });
+            this.selectedRow = 0;
+            break;
+          }
+        }
+      } else {
+        this.infos.push({
+          rowId: (rowId += 1),
+          cells: [],
+        });
+      }
     },
     deleteRow() {
-      this.infos = this.infos.filter(item => item.rowId !== this.selectedRow);
+      if (!this.selectedRow) {
+        return alert('请选择要删除行');
+      }
+      this.infos = this.infos.filter((item) => item.rowId !== this.selectedRow);
     },
-    addCell(id: string) {
+    addCell() {
+      if (!this.selectedRow) {
+        return alert('请选择要添加单元的行');
+      }
       for (const row of this.infos) {
-        if (id === row.rowId) {
+        if (this.selectedRow === row.rowId) {
           row.cells.push({
             cellId: (cellId += 1),
             title: '列' + cellId,
             colspan: initialInputColspan,
             height: initialInputHeight,
             textAlign: 'center',
-            fontSize: '16',
+            fontSize: 16,
             fontStyle: 'normal',
           });
         }
       }
     },
-    deleteCell(id: number) {
+    deleteCell() {
+      if (!this.selectedCell) {
+        return alert('请选择要删除的单元');
+      }
       for (const row of this.infos) {
         for (const cell in row.cells) {
-          if (row.cells[cell].cellId === id) {
+          if (row.cells[cell].cellId === this.selectedCell) {
             row.cells.splice(Number(cell), 1);
           }
         }
       }
     },
-    //     <button @click="updateUserInput">更新</button>
+    rowClickHandler(row: any): void {
-    // updateUserInput() {
-    //   for (const row of this.infos) {
-    //     for (const cellIndex in row.cells) {
-    //       if (row.cells[cellIndex].cellId === this.selectedCell) {
-    //         row.cells.splice(Number(cellIndex), 1, {
-    //           title: this.inputTitle,
-    //           colspan: this.inputColspan,
-    //           cellId: this.selectedCell,
-    //           height: this.inputHeight,
-    //           textAlign: this.textAlign,
-    //         });
-    //       }
-    //     }
-    //   }
-    // },
-    rowClickHandler(row): void {
       this.selectedRow = row.rowId;
     },
-    undoHandler() {},
+    undoHandler() {
+      if (undoRodoPointer < 0) {
+        undoRodoPointer = this.recordHistory.length - 1;
+      }
+      this.infos = JSON.parse(this.recordHistory[undoRodoPointer - 1]);
+      undoRodoPointer -= 1;
+    },
+
+    redoHandler() {
+      if (undoRodoPointer < 0) {
+        undoRodoPointer = this.recordHistory.length - 1;
+      }
+      this.infos = JSON.parse(this.recordHistory[undoRodoPointer + 1]);
+      undoRodoPointer += 1;
+    },
+    importData() {
+      for (const row of this.infos) {
+        for (const cell of row.cells) {
+          // userdata for loop
+          for (const userData in this.importedData) {
+            if (userData + ':' === cell.title) {
+              cell.title += this.importedData[userData];
+            }
+          }
+          for (const boards of this.importedData.boards) {
+            for (const board in boards) {
+              if (board + ':' === cell.title) {
+                cell.title += boards[board];
+              }
+            }
+          }
+        }
+      }
+      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[] = [];
+          for (const each of Object.keys(details)) {
+            for (const cell of row.cells) {
+              if (each === cell.title) {
+                tem.push({
+                  cellId: (cellId += 1),
+                  title: details[each],
+                  colspan: cell.colspan,
+                  height: 30,
+                  textAlign: 'center',
+                  fontSize: 16,
+                  fontStyle: 'normal',
+                });
+              }
+            }
+          }
+          if (tem.length) {
+            for (const eachRow of this.infos) {
+              if (!eachRow.cells.length) {
+                eachRow.cells = eachRow.cells.concat(tem);
+                break;
+              }
+            }
+          }
+        }
+      }
+    },
+    importTemplate() {
+      this.infos = initialTemplateData;
+    },
   },
 });
 </script>
@@ -237,18 +304,15 @@ export default Vue.extend({
 
   .side {
     background-color: lightgray;
-    height: 300px;
+    height: 100hv;
     width: 20%;
   }
 }
 table {
   border-collapse: collapse;
-
-  margin-top: 22px;
   border: 1px black solid;
   width: 100%;
   table-layout: fixed;
-  // text-align: center;
   tr {
     border: 1px black solid;
   }
@@ -273,7 +337,6 @@ table {
 }
 
 .active {
-  width: 100%;
   background-color: lightgray;
 }
 </style>