feat: 合同导出弹窗新增导出行配置(合计行/大写金额行/备注行可选)
- 新增 rowConfigs 配置,支持控制合计行、大写金额行、备注行显隐 - 新增全选/半选逻辑,与列配置交互风格一致 - 导出 HTML 模板根据行配置动态渲染
This commit is contained in:
@@ -10,7 +10,12 @@
|
|||||||
<el-checkbox v-model="col.checked" @change="onColumnChange">{{ col.label }}</el-checkbox>
|
<el-checkbox v-model="col.checked" @change="onColumnChange">{{ col.label }}</el-checkbox>
|
||||||
</div>
|
</div>
|
||||||
<el-divider />
|
<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>
|
||||||
<div style="flex: 1; border: 1px solid #e4e7ed; border-radius: 4px; overflow: hidden; background: #f0f0f0;">
|
<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>
|
<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: 'taxAmount', label: '税额(元)', checked: true },
|
||||||
{ key: 'remark', 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: {
|
computed: {
|
||||||
@@ -90,9 +102,22 @@ export default {
|
|||||||
this.columnIndeterminate = checkedCount > 0 && checkedCount < this.columnConfigs.length;
|
this.columnIndeterminate = checkedCount > 0 && checkedCount < this.columnConfigs.length;
|
||||||
this.generatePreviewHtml();
|
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) {
|
buildProductTableHtml(productData, products) {
|
||||||
const activeCols = this.columnConfigs.filter(c => c.checked);
|
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 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>';
|
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>';
|
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>
|
||||||
<tr>${headerCells}</tr>
|
<tr>${headerCells}</tr>
|
||||||
${bodyRows}
|
${bodyRows}
|
||||||
<tr>${totalCells}</tr>
|
${hasRow('totalRow') ? `<tr>${totalCells}</tr>` : ''}
|
||||||
<tr>
|
${hasRow('amountWordsRow') ? `<tr><td colspan="${colCount}" style="border:1px solid #000;padding:4px 6px;font-weight:bold;text-align:left;">合计人民币(大写):${totalAmountInWords}</td></tr>` : ''}
|
||||||
<td colspan="${colCount}" style="border:1px solid #000;padding:4px 6px;font-weight:bold;text-align:left;">合计人民币(大写):${totalAmountInWords}</td>
|
${hasRow('remarkRow') && productData.remark ? `<tr><td colspan="${colCount}" style="border:1px solid #000;padding:4px 6px;text-align:left;">备注:${productData.remark}</td></tr>` : ''}
|
||||||
</tr>
|
|
||||||
${productData.remark ? `<tr><td colspan="${colCount}" style="border:1px solid #000;padding:4px 6px;text-align:left;">备注:${productData.remark}</td></tr>` : ''}
|
|
||||||
</table>`;
|
</table>`;
|
||||||
return html;
|
return html;
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user