feat: 合同导出弹窗新增导出行配置(合计行/大写金额行/备注行可选)

- 新增 rowConfigs 配置,支持控制合计行、大写金额行、备注行显隐
- 新增全选/半选逻辑,与列配置交互风格一致
- 导出 HTML 模板根据行配置动态渲染
This commit is contained in:
2026-06-06 17:15:31 +08:00
parent dbeb99d9e5
commit cd3cc85c0a

View File

@@ -10,7 +10,12 @@
<el-checkbox v-model="col.checked" @change="onColumnChange">{{ col.label }}</el-checkbox>
</div>
<el-divider />
<div style="font-size: 12px; color: #909399;">勾选的列将显示在导出的产品表中</div>
<div style="font-weight: bold; margin-bottom: 10px; font-size: 14px;">附加行配置</div>
<el-checkbox v-model="selectAllRows" :indeterminate="rowIndeterminate" @change="handleSelectAllRows"
style="margin-bottom: 8px;">全选</el-checkbox>
<div v-for="rowCfg in rowConfigs" :key="rowCfg.key" style="margin-bottom: 6px;">
<el-checkbox v-model="rowCfg.checked" @change="onRowChange">{{ rowCfg.label }}</el-checkbox>
</div>
</div>
<div style="flex: 1; border: 1px solid #e4e7ed; border-radius: 4px; overflow: hidden; background: #f0f0f0;">
<iframe ref="previewFrame" style="width: 100%; height: 100%; border: none; background: #fff;"></iframe>
@@ -63,6 +68,13 @@ export default {
{ key: 'taxAmount', label: '税额(元)', checked: true },
{ key: 'remark', label: '备注', checked: true },
],
selectAllRows: true,
rowIndeterminate: false,
rowConfigs: [
{ key: 'totalRow', label: '合计行', checked: true },
{ key: 'amountWordsRow', label: '大写金额行', checked: true },
{ key: 'remarkRow', label: '备注行', checked: true },
],
};
},
computed: {
@@ -90,9 +102,22 @@ export default {
this.columnIndeterminate = checkedCount > 0 && checkedCount < this.columnConfigs.length;
this.generatePreviewHtml();
},
handleSelectAllRows(val) {
this.rowConfigs.forEach(row => { row.checked = val; });
this.rowIndeterminate = false;
this.generatePreviewHtml();
},
onRowChange() {
const checkedCount = this.rowConfigs.filter(r => r.checked).length;
this.selectAllRows = checkedCount === this.rowConfigs.length;
this.rowIndeterminate = checkedCount > 0 && checkedCount < this.rowConfigs.length;
this.generatePreviewHtml();
},
buildProductTableHtml(productData, products) {
const activeCols = this.columnConfigs.filter(c => c.checked);
const activeRows = this.rowConfigs.filter(r => r.checked);
const hasCol = (key) => activeCols.some(c => c.key === key);
const hasRow = (key) => activeRows.some(r => r.key === key);
let headerCells = '<th style="border:1px solid #000;padding:4px 4px;font-weight:bold;width:30px;">序号</th>';
if (hasCol('spec')) headerCells += '<th style="border:1px solid #000;padding:4px 4px;font-weight:bold;width:80px;">规格(mm)</th>';
@@ -155,11 +180,9 @@ export default {
</tr>
<tr>${headerCells}</tr>
${bodyRows}
<tr>${totalCells}</tr>
<tr>
<td colspan="${colCount}" style="border:1px solid #000;padding:4px 6px;font-weight:bold;text-align:left;">合计人民币(大写):${totalAmountInWords}</td>
</tr>
${productData.remark ? `<tr><td colspan="${colCount}" style="border:1px solid #000;padding:4px 6px;text-align:left;">备注:${productData.remark}</td></tr>` : ''}
${hasRow('totalRow') ? `<tr>${totalCells}</tr>` : ''}
${hasRow('amountWordsRow') ? `<tr><td colspan="${colCount}" style="border:1px solid #000;padding:4px 6px;font-weight:bold;text-align:left;">合计人民币(大写):${totalAmountInWords}</td></tr>` : ''}
${hasRow('remarkRow') && productData.remark ? `<tr><td colspan="${colCount}" style="border:1px solid #000;padding:4px 6px;text-align:left;">备注:${productData.remark}</td></tr>` : ''}
</table>`;
return html;
},