feat: 合同导出弹窗新增导出行配置(合计行/大写金额行/备注行可选)
- 新增 rowConfigs 配置,支持控制合计行、大写金额行、备注行显隐 - 新增全选/半选逻辑,与列配置交互风格一致 - 导出 HTML 模板根据行配置动态渲染
This commit is contained in:
@@ -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;
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user