added excel and pdf function

src/assets/data.ts

@@ -103,9 +103,9 @@ const data = {
       ],
     },
     {
-      id: 1234,
+      id: 1235,
-      material: '颗粒板',
+      material: '生态板 ',
-      color: '暖白',
+      color: '暖黑',
       boardInfos: [
         {
           houseName: 'F01',
@@ -115,7 +115,7 @@ const data = {
           length: 944,
           width: 59,
           thickness: 18,
-          quantity: 1,
+          quantity: 10,
           area: 0.568,
           mutation: '',
           shape: '',
@@ -127,41 +127,18 @@ const data = {
           houseName: 'F01',
           closetName: 'G01',
           boardNo: 'B1816478862',
-          boardName: '层板',
+          boardName: '背板',
           length: 944,
-          width: 598,
+          width: 59,
           thickness: 18,
-          quantity: 1,
+          quantity: 10,
           area: 0.568,
           mutation: '',
-          shape: '造型',
+          shape: '',
           direction: '1/1/1/1 ',
           stripe: '正纹',
-          boardAddOn: '2',
+          boardAddOn: '1',
         },
-        {
-          houseName: 'F01',
-          closetName: 'G01',
-          boardNo: 'B1816478875',
-          boardName: '右侧板',
-          length: 1198,
-          width: 548,
-          thickness: 18,
-          quantity: 1,
-          area: 0.66,
-          mutation: '',
-          shape: '造型',
-          direction: '1/1/1/1 ',
-          stripe: '正纹',
-          boardAddOn: '3',
-        },
-      ],
-    },
-    {
-      id: 1235,
-      material: '生态板 ',
-      color: '暖黑',
-      boardInfos: [
         {
           houseName: 'F01',
           closetName: 'G01',

src/assets/methodTool.ts

@@ -128,6 +128,15 @@ const Tool = {
       return sub.toFixed(3);
     }
   },
+  addBoardInfoAmount: (that, board) => {
+    for (const row of that.infos) {
+      for (const cell of row.cells) {
+        if (cell.title === 'bancaiinfoamount') {
+          cell.title = board.boardInfos.length;
+        }
+      }
+    }
+  },
   copyBanCaiTemplate: (that: any) => {
     let temStartLineIndex = Number(that.banCaiHeadStartLineIndex);
 

src/assets/templateInitialData.ts

@@ -243,7 +243,7 @@ const initialTemplateData = [
       {
         cellId: 9002,
         title: '订单号',
-        colspan: '4',
+        colspan: '3',
         height: 30,
         textAlign: 'center',
         fontSize: 16,
@@ -279,7 +279,7 @@ const initialTemplateData = [
       {
         cellId: 9006,
         title: '出售日期',
-        colspan: '4',
+        colspan: '5',
         height: 30,
         textAlign: 'center',
         fontSize: 16,
@@ -303,7 +303,7 @@ const initialTemplateData = [
       {
         cellId: 9008,
         title: '联系人',
-        colspan: '4',
+        colspan: '3',
         height: 30,
         textAlign: 'center',
         fontSize: 16,
@@ -339,7 +339,7 @@ const initialTemplateData = [
       {
         cellId: 9012,
         title: '送货地址',
-        colspan: '4',
+        colspan: '5',
         height: 30,
         textAlign: 'center',
         fontSize: 16,
@@ -422,19 +422,19 @@ const initialTemplateData = [
       },
       {
         cellId: 29018,
-        title: '共15条记录',
+        title: '板材信息数量：',
-        colspan: '8',
+        colspan: '4',
         height: 30,
-        textAlign: 'center',
+        textAlign: 'right',
         fontSize: 16,
         fontStyle: 'bold',
       },
       {
-        cellId: 39018,
+        cellId: 9060,
-        title: '',
+        title: 'bancaiinfoamount',
-        colspan: '0',
+        colspan: '4',
         height: 30,
-        textAlign: 'center',
+        textAlign: 'left',
         fontSize: 16,
         fontStyle: 'normal',
       },
@@ -752,7 +752,6 @@ const initialTemplateData = [
       },
     ],
   },
-
   { rowId: 10, rowTitle: '10', cells: [] },
   { rowId: 11, rowTitle: '11', cells: [] },
   { rowId: 12, rowTitle: '12', cells: [] },
@@ -774,5 +773,4 @@ const initialTemplateData = [
   { rowId: 28, rowTitle: '28', cells: [] },
   { rowId: 29, rowTitle: '29', cells: [] },
 ];
-
 export default initialTemplateData;

src/components/reportTemplate/ReportTemplate.vue

@@ -2,9 +2,9 @@
   <div class='main'>
     <div class='empty'></div>
     <div class='content'>
-      <table>
+      <table id='printpdfhooker' class='table'>
         <tr v-for="(row,index) in rows" :key="row.rowId" :cells="row.cells">
-          <!-- <input class='row-counter' type="button" :value='index' @click="rowClickHandler(row)"> -->
+          <input class='row-counter' type="button" :value='index' @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>
@@ -47,7 +47,7 @@
           <p style="color: blue">以下功能用于测试使用</p>
 
           <div>
-            <span>选择重用板材模板：</span><br>
+            <span>选择复用板材模板：</span><br>
             <span>开始：</span><input type="number" v-model="banCaiHeadStartLineIndex"><br>
             <span>结束：</span><input type="number" v-model="banCaiHeadEndLineIndex">
             <button @click="copyBanCaiTemplate">确定板材头</button>
@@ -61,6 +61,10 @@
         </div>
           <button @click="exportAsExcel">输出excel格式</button>
         </div>
+        <div>
+          <button @click="printAsPdf">打印PDF文件</button>
+        </div>
+        <div>{{this.infos}}</div>
       </div>
     </div>
 
@@ -75,7 +79,7 @@ import { Tool } from '@/assets/methodTool';
 import { typeScriptDeclaration } from '@/assets/typeScriptDeclaration';
 
 let rowId = 30; // this figure is for testing use
-let cellId = 9050; // this figure is for testing use
+let cellId = 9060; // this figure is for testing use
 let copiedRowHolder: any;
 
 console.log(new typeScriptDeclaration());
@@ -232,6 +236,7 @@ export default Vue.extend({
     rowClickHandler(row: any): void {
       this.selectedRow = row.rowId;
     },
+
     addTotalAmount(query) {
       return Tool.addTotalAmount(query);
     },
@@ -239,16 +244,20 @@ export default Vue.extend({
       return Tool.addSubAmount(query, board);
     },
 
-    copyBanCaiTemplate(this) {
+    addBoardInfoAmount(board) {
+      Tool.addBoardInfoAmount(this, board);
+    },
+
+    copyBanCaiTemplate() {
       return Tool.copyBanCaiTemplate(this);
     },
-    copyRemainingForm(this) {
+    copyRemainingForm() {
       return Tool.copyRemainingForm(this);
     },
-    pasteRemainingForm(this, remainingFormHolder) {
+    pasteRemainingForm(remainingFormHolder) {
       Tool.pasteRemainingForm(this, remainingFormHolder);
     },
-    pasteBanCaiHeadTemplate(this, copyBanCaiTemplate: any) {
+    pasteBanCaiHeadTemplate(copyBanCaiTemplate: any) {
       Tool.pasteBanCaiHeadTemplate(this, copyBanCaiTemplate);
     },
     copyBanCaiBodyTemplate() {
@@ -268,19 +277,20 @@ export default Vue.extend({
     },
     importData() {
       // 复制完整板材的模板
-      const copyBanCaiTemplateArray = [];
+      const copiedBanCaiTemplateRows = [];
       for (const board of data.boards) {
-        copyBanCaiTemplateArray.push(this.copyBanCaiTemplate());
+        copiedBanCaiTemplateRows.push(this.copyBanCaiTemplate());
       }
       const copiedRemaingForm = this.copyRemainingForm(); // 复制板材之外的剩余表格
 
       Tool.addOrderDetails(this); // 添加表单头部信息
       for (let i = 0; i < data.boards.length; i++) {
         Tool.addBanCaiHeader(this, i); // 添加板材的头部信息
+        this.addBoardInfoAmount(data.boards[i]);
         this.pasteBanCaiBody(i); // 添加板材的身部信息
         Tool.addsubQuantity(this, data.boards[i]); // 添加小计信息
         if (i < data.boards.length - 1) {
-          this.pasteBanCaiHeadTemplate(copyBanCaiTemplateArray[i]); // 添加板材样板
+          this.pasteBanCaiHeadTemplate(copiedBanCaiTemplateRows[i]); // 添加板材样板
         }
       }
       this.pasteRemainingForm(copiedRemaingForm); // 粘贴剩余的表格
@@ -293,19 +303,51 @@ export default Vue.extend({
     },
     exportAsExcel() {
       const tabs = document.getElementsByTagName('table');
-      let allElementText: any;
+      let allElementText: any = '';
       for (const tab of tabs) {
         let tabText: string = '<table border="2px"><tr>';
-
         for (let i = 1; i < tab.rows.length; i++) {
-          tabText += tab.rows[i].innerHTML + '</tr>';
+          const tds = tab.rows[i].getElementsByTagName('td');
+          let tdText = '';
+          for (const td of tds) {
+            tdText += td.outerHTML;
+          }
+          tabText += tdText + '</tr>';
+        }
+        allElementText += tabText + '</table>';
+      }
+      window.open(
+        'data:application/vnd.ms-excel,' + encodeURIComponent(allElementText),
+      );
+    },
+    printAsPdf() {
+      const tabs = document.getElementsByTagName('table');
+      let allElementText: any = '';
+      for (const tab of tabs) {
+        let tabText: string =
+          '<table style="border-collapse: collapse;" border="2px"><tr>';
+        for (let i = 1; i < tab.rows.length; i++) {
+          const tds = tab.rows[i].getElementsByTagName('td');
+          let tdText = '';
+          for (const td of tds) {
+            tdText += td.outerHTML;
+          }
+          tabText += tdText + '</tr>';
         }
         allElementText += tabText + '</table>';
       }
       console.log(allElementText);
-      window.open(
+
-        'data:application/vnd.ms-excel,' + encodeURIComponent(allElementText),
+      const WinPrint = window.open(
+        '',
+        '',
+        'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0',
       );
+      WinPrint.document.write(allElementText);
+      WinPrint.document.close();
+      WinPrint.focus();
+      WinPrint.print();
+      WinPrint.close();
     },
   },
 });
@@ -335,22 +377,21 @@ table {
   width: 100%;
   table-layout: fixed;
   tr {
-    border: 1px black solid;
   }
   .row-counter {
     position: relative;
     left: -59px;
-    border: 1px black solid;
+
     background-color: lightblue;
     width: 58px;
     height: 30px;
   }
   .cell-counter {
-    border: 1px black solid;
     background-color: lightblue;
   }
 
   td {
+    border: 1px black solid;
     width: 8.3%;
     height: 30px;
     overflow: hidden;