|
|
@@ -10,11 +10,11 @@
|
|
|
</div> -->
|
|
|
|
|
|
<!-- 打印预览区域 -->
|
|
|
- <div class="preview-container" v-if="isPreviewing" style="zoom: 65%;">
|
|
|
+ <div class="preview-container" v-if="isPreviewing">
|
|
|
<div class="preview-content" :style="previewStyle">
|
|
|
<div class="print-header">
|
|
|
<h2>{{ printTitle }}</h2>
|
|
|
- <div class="print-meta">打印时间: {{ new Date().toLocaleString() }}</div>
|
|
|
+ <!-- <div class="print-meta">打印时间: {{ new Date().toLocaleString() }}</div> -->
|
|
|
</div>
|
|
|
<div class="table-wrapper" ref="tableWrapper">
|
|
|
<table class="wide-table" ref="wideTable">
|
|
|
@@ -64,7 +64,7 @@
|
|
|
<div v-for="page in totalPages" :key="page" class="print-page" :style="printPageStyle">
|
|
|
<div class="print-header">
|
|
|
<h2>{{ printTitle }}</h2>
|
|
|
- <div class="print-meta">打印时间: {{ new Date().toLocaleString() }}</div>
|
|
|
+ <!-- <div class="print-meta">打印时间: {{ new Date().toLocaleString() }}</div> -->
|
|
|
</div>
|
|
|
<table class="wide-table">
|
|
|
<!-- <thead>
|
|
|
@@ -78,12 +78,13 @@
|
|
|
</thead> -->
|
|
|
<thead>
|
|
|
<tr v-for="(row, rowIndex) in headerRows" :key="'row-' + rowIndex">
|
|
|
+ <th style="width: 50px;">序号</th>
|
|
|
<th
|
|
|
v-for="(col, colIndex) in row"
|
|
|
:key="'col-' + colIndex"
|
|
|
:rowspan="col.rowspan"
|
|
|
:colspan="col.colspan"
|
|
|
- :style="{ width: col.width + 'px' }"
|
|
|
+ :style="{ width: col.width || col.minWidth + 'px' }"
|
|
|
>
|
|
|
{{ col.label }}
|
|
|
</th>
|
|
|
@@ -91,13 +92,14 @@
|
|
|
</thead>
|
|
|
<tbody>
|
|
|
<tr v-for="(row, rowIndex) in getPageData(page)" :key="rowIndex">
|
|
|
+ <td align="center">{{ rowIndex + 1 }}</td>
|
|
|
<td v-for="(col, colIndex) in tableFields" :key="colIndex"
|
|
|
- :style="getColumnStyle(col)"
|
|
|
- :class="{
|
|
|
- 'fixed-column': col.fixed,
|
|
|
- 'text-center': col.align === 'center',
|
|
|
- 'text-right': col.align === 'right'
|
|
|
- }">
|
|
|
+ :style="getColumnStyle(col)"
|
|
|
+ :class="{
|
|
|
+ 'fixed-column': col.fixed,
|
|
|
+ 'text-center': col.align === 'center',
|
|
|
+ 'text-right': col.align === 'right'
|
|
|
+ }">
|
|
|
<template v-if="col.formatter">
|
|
|
{{ col.formatter(row[col.prop], row) }}
|
|
|
</template>
|
|
|
@@ -117,9 +119,14 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+
|
|
|
export default {
|
|
|
name: 'WideTablePrinter',
|
|
|
props: {
|
|
|
+ zoom: {
|
|
|
+ type: Number,
|
|
|
+ default: 55
|
|
|
+ },
|
|
|
columns: {
|
|
|
type: Array,
|
|
|
required: true,
|
|
|
@@ -211,7 +218,8 @@ export default {
|
|
|
this.tableFields.push({
|
|
|
prop: item.prop,
|
|
|
label: item.label,
|
|
|
- width: item.width
|
|
|
+ width: item.width,
|
|
|
+ align: item.align
|
|
|
})
|
|
|
}
|
|
|
|
|
|
@@ -368,14 +376,14 @@ export default {
|
|
|
<meta charset="UTF-8">
|
|
|
<style>
|
|
|
@media print {
|
|
|
- body { zoom: 55%; }
|
|
|
+ body { zoom: ${this.zoom}%; }
|
|
|
}
|
|
|
body { margin: 0; padding: 0; font-family: Arial, sans-serif; }
|
|
|
.print-page {
|
|
|
page-break-after: always;
|
|
|
width: ${landscape ? '297mm' : '210mm'};
|
|
|
height: ${landscape ? '210mm' : '297mm'};
|
|
|
- padding: 10mm;
|
|
|
+ padding: 4mm;
|
|
|
box-sizing: border-box;
|
|
|
margin: 0 auto;
|
|
|
}
|
|
|
@@ -406,6 +414,7 @@ export default {
|
|
|
padding: 5px 8px;
|
|
|
word-break: break-word;
|
|
|
overflow-wrap: break-word;
|
|
|
+ font-size: 10px;
|
|
|
}
|
|
|
.wide-table th {
|
|
|
background-color: #f5f5f5;
|
|
|
@@ -428,7 +437,7 @@ export default {
|
|
|
}
|
|
|
@page {
|
|
|
size: ${landscape ? 'A4 landscape' : 'A4 portrait'};
|
|
|
- margin: 10mm;
|
|
|
+ margin: 4mm;
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
@@ -585,12 +594,12 @@ export default {
|
|
|
.wide-table {
|
|
|
width: 100%;
|
|
|
border-collapse: collapse;
|
|
|
- font-size: 12px;
|
|
|
}
|
|
|
|
|
|
.wide-table th, .wide-table td {
|
|
|
border: 1px solid #ddd;
|
|
|
padding: 8px 12px;
|
|
|
+ font-size: 10px;
|
|
|
}
|
|
|
|
|
|
.wide-table th {
|