Scenes
项目上遇到需要动态生成【付款凭证】与【收款凭证】的需求，故手写一个并记录下来。
final effect
Basic data
//基础数据
baseData: {
certificateType: this.isPay ? 2 : 1, //2为付款凭证；1为收款凭证
subject: '', //借方科目/贷方科目
dateY: '', //日期年份
dateM: '', //日期月份
dateD: '', //日期天
genSymbol: '', //总 号
voucherSymbol: '', //第 号
attachments: '', //单据多少张
headOfAccounting: undefined, //会计主管
checked: undefined, //复核
bookkeeper: undefined, //记账
cashier: undefined, //出纳
prepared: undefined, //制单
receiver: undefined, //领款人
total: 0, //合计金额
},
// 列表详细数据
detailList: [
{
certificateType: this.isPay ? 2 : 1, //2为付款凭证；1为收款凭证
documenDetailCode: undefined, //明细单号
certificateAbstract: '', //摘要
subjectTotal: '', //总账科目
subjectDetail: '', //明细科目
lenderList: ['', '', '', '', '', '', '', '', '', '', ''], //金额列表
amount: '', //金额
ifKeepAccount: 'false', //是否记账
filterData: [],
},
],
the code
<template>
<div class="charge-container" id="chargeContainer">
<div class="charge">
<div class="charge-header">
<a-col :span="6" class="sortRow" style="justify-content: flex-start">
<a-col :span="10" class="sortCol">
<span>{
{ isPay ? '贷方科目' : '借方科目' }}</span>
<span>{
{ isPay ? 'CREDIT ACCOUNT' : 'DEBIT ACCOUNT' }} </span>
</a-col>
<span style="text-decoration: underline; word-break: break-word">{
{ baseData.subject }}</span>
</a-col>
<a-col :span="10" class="header-title">
<div class="sortCol title head">
<span style="font-size: 40px">{
{
isPay
? '付 款 凭 证'
: '收 款 凭 证'
}}</span>
<!-- <span style="font-size: 24px">PAYMENT VOCHER</span> -->
</div>
<a-divider class="divider" />
<a-divider class="divider" />
<div class="sortRow title date">
<div>日期:</div>
<div>{
{ baseData.dateY }}</div>
<div class="sortCol">
<span>年</span>
<span>Y</span>
</div>
<div>{
{ baseData.dateM }}</div>
<div class="sortCol">
<span>月</span>
<span>M</span>
</div>
<div>{
{ baseData.dateD }}</div>
<div class="sortCol">
<span>日</span>
<span>D</span>
</div>
</div>
</a-col>
<a-col :span="6">
<a-col :span="9"></a-col>
<a-col :span="15">
<div class="sortCol">
<div class="sortRow"><span>总</span>{
{ baseData.genSymbol }}<span>号</span></div>
<span>GEN NO.</span>
</div>
<div class="sortCol">
<div class="sortRow"><span>第</span>{
{ baseData.voucherSymbol }}<span>号</span></div>
<span>VOCHER NO.</span>
</div>
</a-col>
</a-col>
</div>
<table class="charge-table" border="1">
<tr>
<td width="51%" class="sortCol zhaiyao">
<span
>摘 要</span
>
<span>DESCRIPTION</span>
</td>
<td width="45%">
<table style="height: 100%">
<tr style="border-bottom: 1px solid #bab9b9">
<td width="50%" style="border-right: 1px solid #bab9b9">
{
{ isPay ? '借方科目 DEBIT ACCOUNT' : '贷方科目 CREDIT ACCOUNT' }}
</td>
<td width="50%">金 额 AMOUNT</td>
</tr>
<tr>
<td style="border-right: 1px solid #bab9b9; width: 60%">
<table class="debtor-lender-table" style="height: 100%">
<tr class="sortRow" style="height: 100%">
<td class="sortCol" style="width: 50%; height: 100%">
<span>总账科目</span><span>GEN.LED.A/C</span>
</td>
<td class="sortCol" style="width: 50%; height: 100%">
<span>明细科目</span><span>SUB.LED.A/C</span>
</td>
</tr>
</table>
</td>
<td style="width: 40%">
<table class="debtor-lender-table" style="height: 100%">
<tr>
<td>亿</td>
<td>千</td>
<td>百</td>
<td>十</td>
<td>万</td>
<td>千</td>
<td>百</td>
<td>十</td>
<td>元</td>
<td>角</td>
<td>分</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="100%" class="sortCol" style="border: 0"><span>记账</span><span>P.R</span><span>√</span></td>
</tr>
<tr v-for="(item, index) in detailList" :key="index">
<td style="word-break: break-all; padding: 4px" width="51%">
<p style="margin-bottom: 0; text-align: left">
{
{ item.certificateAbstract }}
</p>
</td>
<td width="45%">
<table>
<tr>
<td width="60%" style="border-right: 1px solid #bab9b9">
<table class="debtor-tbale debtor-lender-table">
<tr>
<td style="word-break: break-all; padding: 4px; width: 50%">
<p style="margin-bottom: 0; text-align: left">{
{ item.subjectTotal }}</p>
</td>
<td style="word-break: break-all; padding: 4px; width: 50%">
<p style="margin-bottom: 0; text-align: left">{
{ item.subjectDetail }}</p>
</td>
</tr>
</table>
</td>
<td width="40%">
<table class="lender-tbale debtor-lender-table">
<tr :class="item.lender * 1 < 0 ? 'tr-negative' : ''">
<td v-for="(lender, i) in item.lenderList" :key="i">{
{ lender }}</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td>{
{ item.ifKeepAccount == 'true' ? '√' : '' }}</td>
</tr>
<tr>
<td colspan="1" class="sortRow danju">
<span>附单据</span>{
{ baseData.attachments }}<span>张 ATTACHMENTS</span>
</td>
<td>
<table>
<tr>
<td width="60%" style="border-right: 1px solid #bab9b9">
<table class="debtor-tbale debtor-lender-table">
<tr>
<td><span>合 计</span> <span>TOTAL</span></td>
</tr>
</table>
</td>
<td width="40%">
<table class="lender-tbale debtor-lender-table">
<tr>
<td v-for="(lender, j) in baseData.lenderList" :key="j">{
{ lender }}</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td></td>
</tr>
</table>
<div class="sortRow" style="padding-right: 50px">
<div class="sortRow">
<div class="sortCol"><span>会计主管：</span><span>SUPERVISOR</span></div>
{
{ baseData.headOfAccounting }}
</div>
<div class="sortRow">
<div class="sortCol"><span>复核：</span><span>CHECKED</span></div>
{
{ baseData.checked }}
</div>
<div class="sortRow">
<div class="sortCol"><span>记帐：</span><span>ENTERED</span></div>
{
{ baseData.bookkeeper }}
</div>
<div class="sortRow">
<div class="sortCol"><span>出纳：</span><span>CASHIER</span></div>
{
{ baseData.cashier }}
</div>
<div class="sortRow">
<div class="sortCol"><span>制单：</span><span>PREPARED</span></div>
{
{ baseData.prepared }}
</div>
<div class="sortRow">
<div class="sortCol">
<span>{
{ isPay ? '领' : '付' }}款人：</span><span>RECEIVER</span>
</div>
{
{ baseData.receiver }}
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'vocherView',
props: ['id'],
data() {
return {
lenderTotalList: ['', '', '', '', '', '', '', '', '', '', ''], //合计金额
//列表基础数据
detailBaseData: {
certificateAbstract: '', //摘要
subjectTotal: '', //总账科目
subjectDetail: '', //明细科目
lenderList: ['', '', '', '', '', '', '', '', '', '', ''], //金额列表
amount: 0, //金额
ifKeepAccount: false, //是否记账
},
}
},
props: {
//是否为付款凭证
isPay: { type: Boolean, default: false },
//基础数据
baseData: {
type: Object,
default: () => {
return {}
},
},
// 列表详细数据
detailList: {
type: Array,
default: () => {
return []
},
},
},
created() {},
watch: {},
mounted() {},
updated() {},
methods: {},
}
</script>
<style scoped lang="less">
table {
width: 100%;
border-spacing: 0;
border-collapse: collapse;
padding: 0;
margin: 0;
}
table td {
text-align: center;
table-layout: fixed;
padding: 0px;
position: relative;
}
.charge-container {
padding: 10px;
font-size: 14px;
color: #444;
font-weight: 400;
background-color: white;
}
.charge {
width: 1124px;
margin: auto;
}
.charge-header {
margin-bottom: 10px;
}
.charge-header > div {
// display: inline-block;
margin-right: 15px;
}
.charge-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
.header-title {
.head {
width: 430px;
}
.date {
width: 430px;
}
}
.title {
align-items: center;
}
.divider {
width: 90%;
margin: 0 0 2px 0 !important;
}
}
.charge-table,
.tip-box-table {
border: 1px solid #bab9b9;
}
.charge-table,
.debtor-tbale,
.lender-tbale > tr {
height: 50px;
}
.charge-table > tr:first-child {
height: 50px;
}
.charge-table .zhaiyao {
font-size: 22px;
border: 0;
width: 100%;
height: 100%;
}
.charge-table-icon {
cursor: pointer;
display: inline-block;
}
.debtor-lender-table tr td {
width: 9%;
border-right: 1px solid #bab9b9;
}
.debtor-lender-table tr td:nth-child(3) {
border-right-color: rgba(74, 144, 226, 0.5);
}
.debtor-lender-table tr td:nth-child(6) {
border-right-color: rgba(74, 144, 226, 0.5);
}
.debtor-lender-table tr td:nth-child(9) {
border-right-color: rgba(226, 106, 74, 0.5);
}
.debtor-lender-table tr td:last-child {
border-right: none;
}
.tr-negative {
color: red;
}
.sortCol {
display: flex;
flex-direction: column;
justify-content: center;
}
.sortRow {
display: flex;
justify-content: space-between;
}
.danju {
border: 0;
height: 100%;
justify-content: space-around;
align-items: center;
}
</style>