Skip to content

J
jiedao-app-operator-master
Commit 65154a1c authored by 我在何方's avatar 我在何方
Browse files
Options

修改打印收款单UI

parent 369bc5f8
Hide whitespace changes
Inline Side-by-side
Showing with 66 additions and 55 deletions
src/views/ecw/financial/printVoucher.vue
View file @ 65154a1c
<template>
<div class="app-container" >
<div id="print" class="card">
<div class="card-title">收款单</div>
<div class="card">
<el-descriptions :column="2">
<el-descriptions-item label="部门" >
{{form?form.departmentName:'无'}}
</el-descriptions-item>
</el-descriptions>
<el-descriptions :column="2">
<el-descriptions-item label="收款单号">
{{form?form.receiptNo:'无'}}
</el-descriptions-item>
<el-descriptions-item label="收款日期">
{{form?form.payedAt:'无'}}
</el-descriptions-item>
<el-descriptions-item label="客户名称">
{{form?form.customerName:'无'}}
</el-descriptions-item>
<el-descriptions-item label="收款户名" >
{{form?form.platformAccount:'无'}}
</el-descriptions-item>
<el-descriptions-item label="银行名称">
{{form?form.accountBank:'无'}}
</el-descriptions-item>
<el-descriptions-item label="银行账号" >
{{form?form.salesmanName:'无'}}
</el-descriptions-item>
<el-descriptions-item label="水单号">
{{form?form.customerName:'无'}}
</el-descriptions-item>
<el-descriptions-item label="手续费" >
{{form?form.salesmanName:'无'}}
</el-descriptions-item>
<el-descriptions-item label="备注" >
{{form?form.remark:'无'}}
</el-descriptions-item>
</el-descriptions>
<div id="print" style="font-size: 18px;">
<div style="text-align: center;font-weight: bold;font-size: 20px;">收款单</div>
<div style="margin-top: 20px;">
<div style="display: flex;width: 80%;align-items: center;margin-bottom: 10px;">
<div style="flex:1"><span style="width: 120px;text-align: right;">部门：</span><span>{{form?form.departmentName:'无'}}</span></div>
</div>
<div style="display: flex;width: 80%;align-items: center;margin-bottom: 10px;">
<div style="flex:1"><span style="width: 120px;text-align: right;">收款单号：</span><span>{{form?form.receiptNo:'无'}}</span></div>
<div style="flex:1"><span style="width: 120px;text-align: right;">收款日期：</span><span>{{form?form.payedAt:'无'}}</span></div>
</div>
<div style="display: flex;width: 80%;align-items: center;margin-bottom: 10px;">
<div style="flex:1"><span style="width: 120px;text-align: right;">客户名称：</span><span>{{form?form.customerName:'无'}}</span></div>
<div style="flex:1"><span style="width: 120px;text-align: right;">收款户名：</span><span>{{form?form.platformAccount:'无'}}</span></div>
</div>
<div style="display: flex;width: 80%;align-items: center;margin-bottom: 10px;">
<div style="flex:1"><span style="width: 120px;text-align: right;">银行名称：</span><span>{{form?form.accountBank:'无'}}</span></div>
<div style="flex:1"><span style="width: 120px;text-align: right;">银行账号：</span><span>{{form?form.accountBank:'无'}}</span></div>
</div>
<div style="display: flex;width: 80%;align-items: center;margin-bottom: 10px;">
<div style="flex:1"><span style="width: 120px;text-align: right;">水单号：</span><span>{{form?form.accountBank:'无'}}</span></div>
<div style="flex:1"><span style="width: 120px;text-align: right;">手续费：</span><span>{{form?form.accountBank:'无'}}</span></div>
</div>
<div style="display: flex;width: 80%;align-items: center;">
<div style="flex:1"><span style="width: 120px;text-align: right;">备注：</span><span>{{form?form.accountBank:'无'}}</span></div>
</div>
</div>
<el-table v-loading="loadings" :data="list" border class="card" :header-cell-style="{background:'#fff'}">
<el-table-column label="序号" align="center" min-width="80">
<table border="1" style="margin-top: 20px;width: 100%;text-align: center;border-collapse: collapse; ">
<tr>
<th style="width: 8%;">序号</th>
<th style="width: 12%;">订单号</th>
<th style="width: 18%;">收入类型</th>
<th style="width: 22%;">品名</th>
<th style="width: 8%;">汇率</th>
<th style="width: 12%;">总金额</th>
<th style="width: 20%;">实收金额</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td colspan="2">合计(大写)</td>
<td colspan="2">$80</td>
<td colspan="2">价税合计</td>
<td>$80</td>
</tr>
</table>
<!-- <el-table-column label="序号" align="center" min-width="80">
<template slot-scope="scope">
<span>{{scope.$index + 1}}</span>
</template>
......@@ -60,18 +73,14 @@
<div style="min-width: 200px;width: 20%;">价税合计</div>
<div style="min-width: 200px;width: 20%;">444</div>
</div>
</el-table>
<div class="card">
<el-descriptions :column="4">
<el-descriptions-item label="主管">
</el-descriptions-item>
<el-descriptions-item label="会计" >
</el-descriptions-item>
<el-descriptions-item label="出纳">
</el-descriptions-item>
<el-descriptions-item label="经手人" >
</el-descriptions-item>
</el-descriptions>
</el-table> -->
<div style="margin-top: 20px;">
<div style="display: flex;width: 100%;align-items: center;">
<div style="flex:1"><span style="width: 120px;">主管：</span></div>
<div style="flex:1"><span style="width: 120px;">会计：</span></div>
<div style="flex:1"><span style="width: 120px;">出纳：</span></div>
<div style="flex:1"><span style="width: 120px;">经手人：</span></div>
</div>
</div>
</div>
<div slot="footer" class="card">
......@@ -149,11 +158,13 @@
},
print(){
lodop().then(LODOP => {
LODOP.PRINT_INIT(this.title);
LODOP.PRINT_INIT();
LODOP.SET_PRINT_STYLE("FontSize",18);
LODOP.SET_PRINT_STYLE("Bold",1);
// LODOP.ADD_PRINT_TEXT(50,231,260,39,"打印页面部分内容");
LODOP.ADD_PRINT_HTM("10mm", "10mm", "RightMargin:10mm", "BottomMargin:10mm", document.getElementById("print").innerHTML);
// var stylePrint = "<style>table th,td{padding:0;margin:0;border:1px solid #000000;border-collapse:collapse;}</style>"
var htmlContent = "<body>"+document.getElementById("print").innerHTML+"</body>"
LODOP.ADD_PRINT_HTM("6mm", "6mm", "RightMargin:6mm", "BottomMargin:6mm", htmlContent);
LODOP.PRINT();
// this.$alert('已发起打印任务');
// LODOP.PREVIEW(); // 预览
......@@ -170,7 +181,7 @@
}
</script>
<style scoped>
<style scoped id="printStyle">
.card{
margin-top: 20px;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment