From f9fede6b2600af870865f5632c21cd882eb3fd9b Mon Sep 17 00:00:00 2001 From: Maoqiang Zheng Date: Wed, 10 Oct 2018 11:55:36 +0800 Subject: [PATCH] added excel and pdf function --- src/assets/data.ts | 41 +++------- src/assets/methodTool.ts | 9 +++ src/assets/templateInitialData.ts | 24 +++--- .../reportTemplate/ReportTemplate.vue | 79 ++++++++++++++----- 4 files changed, 89 insertions(+), 64 deletions(-) diff --git a/src/assets/data.ts b/src/assets/data.ts index f7e07b3..722f43a 100644 --- a/src/assets/data.ts +++ b/src/assets/data.ts @@ -103,9 +103,9 @@ const data = { ], }, { - id: 1234, - material: '颗粒板', - color: '暖白', + id: 1235, + material: '生态板 ', + 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', diff --git a/src/assets/methodTool.ts b/src/assets/methodTool.ts index 840cc6e..3d485c3 100644 --- a/src/assets/methodTool.ts +++ b/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); diff --git a/src/assets/templateInitialData.ts b/src/assets/templateInitialData.ts index 08e307b..cdf2767 100644 --- a/src/assets/templateInitialData.ts +++ b/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条记录', - colspan: '8', + title: '板材信息数量：', + colspan: '4', height: 30, - textAlign: 'center', + textAlign: 'right', fontSize: 16, fontStyle: 'bold', }, { - cellId: 39018, - title: '', - colspan: '0', + cellId: 9060, + title: 'bancaiinfoamount', + 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; diff --git a/src/components/reportTemplate/ReportTemplate.vue b/src/components/reportTemplate/ReportTemplate.vue index a32d670..ad8e0c9 100644 --- a/src/components/reportTemplate/ReportTemplate.vue +++ b/src/components/reportTemplate/ReportTemplate.vue @@ -2,9 +2,9 @@
- +
- +
@@ -47,7 +47,7 @@

以下功能用于测试使用

- 选择重用板材模板：
+ 选择复用板材模板：
开始：
结束： @@ -61,6 +61,10 @@
+
+ +
+
{{this.infos}}
@@ -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 = ''; - for (let i = 1; i < tab.rows.length; i++) { - tabText += tab.rows[i].innerHTML + ''; + const tds = tab.rows[i].getElementsByTagName('td'); + let tdText = ''; + for (const td of tds) { + tdText += td.outerHTML; + } + tabText += tdText + ''; + } + allElementText += tabText + '
'; + } + 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 = + ''; + 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 + ''; } allElementText += tabText + '
'; } 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;