Skip to content

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

修改打印收款单UI

parent 369bc5f8
Show whitespace changes
Inline Side-by-side
Showing with 66 additions and 55 deletions
src/views/ecw/financial/printVoucher.vue
View file @ 65154a1c
<template> <template>
<div class="app-container" > <div class="app-container" >
<div id="print" class="card"> <div id="print" style="font-size: 18px;">
<div class="card-title">收款单</div> <div style="text-align: center;font-weight: bold;font-size: 20px;">收款单</div>
<div class="card"> <div style="margin-top: 20px;">
<el-descriptions :column="2"> <div style="display: flex;width: 80%;align-items: center;margin-bottom: 10px;">
<el-descriptions-item label="部门" > <div style="flex:1"><span style="width: 120px;text-align: right;">部门：</span><span>{{form?form.departmentName:'无'}}</span></div>
{{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> </div>
<el-table v-loading="loadings" :data="list" border class="card" :header-cell-style="{background:'#fff'}"> <div style="display: flex;width: 80%;align-items: center;margin-bottom: 10px;">
<el-table-column label="序号" align="center" min-width="80"> <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>
<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"> <template slot-scope="scope">
<span>{{scope.$index + 1}}</span> <span>{{scope.$index + 1}}</span>
</template> </template>
...@@ -60,18 +73,14 @@ ...@@ -60,18 +73,14 @@
<div style="min-width: 200px;width: 20%;">价税合计</div> <div style="min-width: 200px;width: 20%;">价税合计</div>
<div style="min-width: 200px;width: 20%;">444</div> <div style="min-width: 200px;width: 20%;">444</div>
</div> </div>
</el-table> </el-table> -->
<div class="card"> <div style="margin-top: 20px;">
<el-descriptions :column="4"> <div style="display: flex;width: 100%;align-items: center;">
<el-descriptions-item label="主管"> <div style="flex:1"><span style="width: 120px;">主管：</span></div>
</el-descriptions-item> <div style="flex:1"><span style="width: 120px;">会计：</span></div>
<el-descriptions-item label="会计" > <div style="flex:1"><span style="width: 120px;">出纳：</span></div>
</el-descriptions-item> <div style="flex:1"><span style="width: 120px;">经手人：</span></div>
<el-descriptions-item label="出纳"> </div>
</el-descriptions-item>
<el-descriptions-item label="经手人" >
</el-descriptions-item>
</el-descriptions>
</div> </div>
</div> </div>
<div slot="footer" class="card"> <div slot="footer" class="card">
...@@ -149,11 +158,13 @@ ...@@ -149,11 +158,13 @@
}, },
print(){ print(){
lodop().then(LODOP => { lodop().then(LODOP => {
LODOP.PRINT_INIT(this.title); LODOP.PRINT_INIT();
LODOP.SET_PRINT_STYLE("FontSize",18); LODOP.SET_PRINT_STYLE("FontSize",18);
LODOP.SET_PRINT_STYLE("Bold",1); LODOP.SET_PRINT_STYLE("Bold",1);
// LODOP.ADD_PRINT_TEXT(50,231,260,39,"打印页面部分内容"); // 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(); LODOP.PRINT();
// this.$alert('已发起打印任务'); // this.$alert('已发起打印任务');
// LODOP.PREVIEW(); // 预览 // LODOP.PREVIEW(); // 预览
...@@ -170,7 +181,7 @@ ...@@ -170,7 +181,7 @@
} }
</script> </script>
<style scoped> <style scoped id="printStyle">
.card{ .card{
margin-top: 20px; 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