mqzheng/report-design
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

added excel and pdf function

Browse Source
This commit is contained in:
郑茂强 2018-10-10 11:55:36 +08:00
parent 475106f6a3
commit f9fede6b26
4 changed files with 89 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/assets/data.ts
View File

@ -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',

9
src/assets/methodTool.ts
View File

@ -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);

24
src/assets/templateInitialData.ts
View File

@ -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;

79
src/components/reportTemplate/ReportTemplate.vue
View File

@ -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;