diff --git a/.prettierrc b/.prettierrc
index a20502b..6d058ca 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,4 +1,5 @@
 {
   "singleQuote": true,
-  "trailingComma": "all"
+  "trailingComma": "all",
+  "arrowParens": "always"
 }
diff --git a/src/assets/data.ts b/src/assets/data.ts
index be125c6..3899350 100644
--- a/src/assets/data.ts
+++ b/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: '正纹',
-          addOn: '',
+          stripe: '正纹',
+          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: '正纹',
-          addOn: '',
+          stripe: '正纹',
+          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: '正纹',
-          addOn: '',
+          stripe: '正纹',
+          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: '正纹',
-          addOn: '',
+          stripe: '正纹',
+          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: '正纹',
-          addOn: '',
+          stripe: '正纹',
+          boardAddOn: '',
         },
       ],
     },
-  ],
-};
 
-export default data;
+*/
diff --git a/src/assets/startUpRowColumn.ts b/src/assets/startUpRowColumn.ts
new file mode 100644
index 0000000..de822c1
--- /dev/null
+++ b/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;
diff --git a/src/assets/templateInitialData.ts b/src/assets/templateInitialData.ts
new file mode 100644
index 0000000..bf00bc3
--- /dev/null
+++ b/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;
diff --git a/src/components/reportTemplate/ReportTemplate.vue b/src/components/reportTemplate/ReportTemplate.vue
index 7b0ada8..467f829 100644
--- a/src/components/reportTemplate/ReportTemplate.vue
+++ b/src/components/reportTemplate/ReportTemplate.vue
@@ -2,39 +2,25 @@
   <div class='main'>
     <div class='empty'></div>
     <div class='content'>
-
       <table>
-        <tr>
-          <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}">
+        <tr v-for="row in rows" :key="row.rowId" :cells="row.cells">
           <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="deleteCell(selectedCell)">删除列</button>
+        <button @click="addCell()">添加列</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;
-  cells: Array<{ cellId: number; title: string }>;
-}> = [];
+  rowId: number;
+  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 }> = [
-  { cellId: 1, title: '1' },
-  { cellId: 2, title: '2' },
-  { cellId: 3, title: '3' },
-  { cellId: 4, title: '4' },
-  { cellId: 5, title: '5' },
-  { cellId: 6, title: '6' },
-  { cellId: 7, title: '7' },
-  { cellId: 8, title: '8' },
-  { cellId: 9, title: '9' },
-  { 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;
+const recordHistoryFormat: string[] = [];
+const textAlignFormat: string = '';
+const fontSizeFormat: number = 0;
+const fontStyleFormat: string = '';
+const importedDataFormat: any = data;
+let rowId = 29;
+let cellId = 9025;
+const initialInputColspan = 0;
+const initialInputHeight = 30;
+let undoRodoPointer = -1;
 export default Vue.extend({
   components: { reportCell },
   data() {
@@ -118,23 +107,22 @@ export default Vue.extend({
       inputTitle: inputTitleFormat,
       inputColspan: inputColspanFormat,
       inputHeight: initialInputHeight,
-      initialCells: initialCellsFormat,
-      textAlign: '',
-      fontSize: '',
-      fontStyle: '',
-      recordHistory: [],
+      textAlign: textAlignFormat,
+      fontSize: fontSizeFormat,
+      fontStyle: fontStyleFormat,
+      recordHistory: recordHistoryFormat,
+      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) {
-          if (row.cells[cellIndex].cellId === this.selectedCell) {
-            row.cells.splice(Number(cellIndex), 1, {
+        for (const cellKey in row.cells) {
+          if (row.cells[cellKey].cellId === this.selectedCell) {
+            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)));
-      pointer += 1;
+      if (
+        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({
-        rowId: '行' + (rowId += 1),
-        cells: [],
-      });
+      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 += 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>
-    // 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 {
+    rowClickHandler(row: any): 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>
diff --git a/temdata.txt b/temdata.txt
new file mode 100644
index 0000000..cd9d5bb
--- /dev/null
+++ b/temdata.txt
@@ -0,0 +1,256 @@
+ [ { "rowId": "行0", "cells": [ { "cellId": 1, "title": "1" }, { "cellId": 2, "title": "2" }, { "cellId": 3, "title": "3" }, { "cellId": 4, "title": "4" }, { "cellId": 5, "title": "5" }, { "cellId": 6, "title": "6" }, { "cellId": 7, "title": "7" }, { "cellId": 8, "title": "8" }, { "cellId": 9, "title": "9" }, { "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" } ] }, { "rowId": "1", "cells": [ { "title": "板材明细单", "colspan": "24", "cellId": 9001, "height": 30, "textAlign": "center", "fontSize": "49", "fontStyle": "bold" } ] }, { "rowId": "2", "cells": [ { "title": "订单号： 101808023922", "colspan": "8", "cellId": 9002, "height": 30, "textAlign": "center", "fontSize": "16", "fontStyle": "normal" }, { "title": "客户名称：SongQingyang3", "colspan": "8", "cellId": 9003, "height": 30, "textAlign": "center", "fontSize": "16", "fontStyle": "normal" }, { "title": "销售日期：2018-08-23", "colspan": "8", "cellId": 9004, "height": 30, "textAlign": "center", "fontSize": "16", "fontStyle": "normal" } ] }, { "rowId": "3", "cells": [ { "title": "联系人： K01", "colspan": "8", "cellId": 9005, "height": 30, "textAlign": "center", "fontSize": "16", "fontStyle": "normal" }, { "title": "联系电话：12345678901", "colspan": "8", "cellId": 9006, "height": 30, "textAlign": "center", "fontSize": "16", "fontStyle": "normal" }, { "title": "送货地址：D01", "colspan": "8", "cellId": 9007, "height": 30, "textAlign": "center", "fontSize": "16", "fontStyle": "normal" } ] }, { "rowId": "4", "cells": [ { "title": "备 注： 测试PTP-G刀偏置", "colspan": "8", "cellId": 9008, "height": 30, "textAlign": "center", "fontSize": "16", "fontStyle": "normal" } ] }, { "rowId": "6", "cells": [ { "title": "材料：颗粒板", "colspan": "8", "cellId": 9009, "height": 30, "textAlign": "left", "fontSize": "16", "fontStyle": "bold" }, { "title": "颜色：暖白", "colspan": "8", "cellId": 9010, "height": 30, "textAlign": "left", "fontSize": "16", "fontStyle": "bold" }, { "title": "共15条记录", "colspan": "8", "cellId": 9011, "height": 30, "textAlign": "left", "fontSize": "16", "fontStyle": "bold" } ] }, { "rowId": "8", "cells": [ { "title": "房名", "colspan": "2", "cellId": 9012, "height": 30, "textAlign": "center", "fontSize": "16", "fontStyle": "bold" }, { "title": "柜名", "colspan": 0, "cellId": 9013, "height": 30, "textAlign": "center", "fontSize": "16", "fontStyle": "bold" }, { "title": "板编号", "colspan": "2", "cellId": 9014, "height": 30, "textAlign": "center", "fontSize": "16", "fontStyle": "bold" }, { "title": "板名称", "colspan": "2", "cellId": 9015, "height": 30, "textAlign": "center", "fontSize": "16", "fontStyle": "bold" }, { "title": "开料长", "colspan": 0, "cellId": 9016, "height": 30, "textAlign": "center", "fontSize": "16", "fontStyle": "bold" }, { "title": "开料宽", "colspan": 0, "cellId": 9017, "height": 30, "textAlign": "center", "fontSize": "16", "fontStyle": "bold" }, { "title": "厚度", "colspan": 0, "cellId": 9018, "height": 30, "textAlign": "center", "fontSize": "16", "fontStyle": "bold" }, { "title": "数量", "colspan": 0, "cellId": 9019, "height": 30, "textAlign": "center", "fontSize": "16", "fontStyle": "bold" }, { "title": "面积", "colspan": 0, "cellId": 9020, "height": 30, "textAlign": "center", "fontSize": "16", "fontStyle": "bold" }, { "title": "异形", "colspan": 0, "cellId": 9021, "height": 30, "textAlign": "center", "fontSize": "16", "fontStyle": "bold" }, { "title": "造型", "colspan": 0, "cellId": 9022, "height": 30, "textAlign": "center", "fontSize": "16", "fontStyle": "bold" }, { "title": "左/右/上/下", "colspan": "3", "cellId": 9023, "height": 30, "textAlign": "center", "fontSize": "16", "fontStyle": "bold" }, { "title": "纹路", "colspan": "2", "cellId": 9024, "height": 30, "textAlign": "center", "fontSize": "16", "fontStyle": "bold" }, { "title": "备注", "colspan": "5", "cellId": 9025, "height": 30, "textAlign": "center", "fontSize": "16", "fontStyle": "bold" } ] }, { "rowId": "9", "cells": [] }, { "rowId": "10", "cells": [] }, { "rowId": "11", "cells": [] }, { "rowId": "12", "cells": [] }, { "rowId": "13", "cells": [] }, { "rowId": "14", "cells": [] }, { "rowId": "15", "cells": [] }, { "rowId": "16", "cells": [] }, { "rowId": "17", "cells": [] }, { "rowId": "18", "cells": [] }, { "rowId": "19", "cells": [] }, { "rowId": "20", "cells": [] }, { "rowId": "21", "cells": [] }, { "rowId": "22", "cells": [] }, { "rowId": "23", "cells": [] }, { "rowId": "24", "cells": [] }, { "rowId": "25", "cells": [] }, { "rowId": "26", "cells": [] }, { "rowId": "27", "cells": [] }, { "rowId": "28", "cells": [] }, { "rowId": "29", "cells": [] }, { "rowId": 30, "cells": [] } ]
+
+
+ /*[
+  {
+    rowId: 0,
+    cells: [
+      {
+        cellId: 1,
+        title: '1',
+        colspan: 0,
+        height: 30,
+        textAlign: 'left',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 2,
+        title: '2',
+        colspan: 0,
+        height: 30,
+        textAlign: 'left',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 3,
+        title: '3',
+        colspan: 0,
+        height: 30,
+        textAlign: 'left',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 4,
+        title: '4',
+        colspan: 0,
+        height: 30,
+        textAlign: 'left',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 5,
+        title: '5',
+        colspan: 0,
+        height: 30,
+        textAlign: 'left',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 6,
+        title: '6',
+        colspan: 0,
+        height: 30,
+        textAlign: 'left',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 7,
+        title: '7',
+        colspan: 0,
+        height: 30,
+        textAlign: 'left',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 8,
+        title: '8',
+        colspan: 0,
+        height: 30,
+        textAlign: 'left',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 9,
+        title: '9',
+        colspan: 0,
+        height: 30,
+        textAlign: 'left',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 10,
+        title: '10',
+        colspan: 0,
+        height: 30,
+        textAlign: 'left',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 11,
+        title: '11',
+        colspan: 0,
+        height: 30,
+        textAlign: 'left',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 12,
+        title: '12',
+        colspan: 0,
+        height: 30,
+        textAlign: 'left',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 13,
+        title: '13',
+        colspan: 0,
+        height: 30,
+        textAlign: 'left',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 14,
+        title: '14',
+        colspan: 0,
+        height: 30,
+        textAlign: 'left',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 15,
+        title: '15',
+        colspan: 0,
+        height: 30,
+        textAlign: 'left',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 16,
+        title: '16',
+        colspan: 0,
+        height: 30,
+        textAlign: 'left',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 17,
+        title: '17',
+        colspan: 0,
+        height: 30,
+        textAlign: 'left',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 18,
+        title: '18',
+        colspan: 0,
+        height: 30,
+        textAlign: 'left',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 19,
+        title: '19',
+        colspan: 0,
+        height: 30,
+        textAlign: 'left',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 20,
+        title: '20',
+        colspan: 0,
+        height: 30,
+        textAlign: 'left',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 21,
+        title: '21',
+        colspan: 0,
+        height: 30,
+        textAlign: 'left',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 22,
+        title: '22',
+        colspan: 0,
+        height: 30,
+        textAlign: 'left',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 23,
+        title: '23',
+        colspan: 0,
+        height: 30,
+        textAlign: 'left',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 24,
+        title: '24',
+        colspan: 0,
+        height: 30,
+        textAlign: 'left',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+    ],
+  },
+  { rowId: 1, cells: [] },
+  { rowId: 2, cells: [] },
+  { rowId: 3, cells: [] },
+  { rowId: 4, cells: [] },
+  { rowId: 5, cells: [] },
+  { rowId: 6, cells: [] },
+  { rowId: 7, cells: [] },
+  { rowId: 8, cells: [] },
+  { rowId: 9, cells: [] },
+  { rowId: 10, cells: [] },
+  { rowId: 11, cells: [] },
+  { rowId: 12, cells: [] },
+  { rowId: 13, cells: [] },
+  { rowId: 14, cells: [] },
+  { rowId: 15, cells: [] },
+  { rowId: 16, cells: [] },
+  { rowId: 17, cells: [] },
+  { rowId: 18, cells: [] },
+  { rowId: 19, cells: [] },
+  { rowId: 20, cells: [] },
+  { rowId: 21, cells: [] },
+  { rowId: 22, cells: [] },
+  { rowId: 23, cells: [] },
+  { rowId: 24, cells: [] },
+  { rowId: 25, cells: [] },
+  { rowId: 26, cells: [] },
+  { rowId: 27, cells: [] },
+  { rowId: 28, cells: [] },
+  { rowId: 29, cells: [] },
+];
+*/
\ No newline at end of file