vue2+ant-design-vue 手写【付款凭证】与【收款凭证】
最新推荐文章于 2024-08-13 15:49:09 发布
zhongxiajiu
最新推荐文章于 2024-08-13 15:49:09 发布
阅读量861
收藏
5
点赞数
1
最新推荐文章于 2024-08-13 15:49:09 发布
阅读量861
收藏
5
点赞数
1
场景
项目上遇到需要动态生成【付款凭证】与【收款凭证】的需求，故手写一个并记录下来。
最终效果
基础数据
//基础数据
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: [],
},
],
代码
<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>
扫一扫
1728
暂无认证
到【灌水乐园】发言
weixin_42588516: 试了下 e.node.$el 显示是undefined
CSDN-Ada助手: 非常感谢您分享关于vue3+ts的经验和解决问题的方法。您的博客对于其他开发者来说非常有帮助。希望您能够继续分享您的经验和见解。除了您提到的方法，还有一些与vue3和ts相关的知识和技能，例如Vue3的Composition API、TypeScript的类型定义和泛型等等。期待您更多的分享！ 如何写出更高质量的博客，请看该博主的分享：https://blog.csdn.net/lmy_520/article/details/128686434?utm_source=csdn_ai_ada_blog_reply2
CSDN-Ada助手: 恭喜您写出了第四篇博客！看到您遇到的问题，我觉得您的经验很有价值，也很希望您能够分享更多的经验和心得。下一步的创作建议，可以考虑从实际应用场景中挑选一些比较典型的问题，分享您的解决方案和心得，这样能够更好地帮助到其他开发者。祝您写作愉快！ CSDN 会根据你创作的前四篇博客的质量，给予优秀的博主博客红包奖励。请关注 https://bbs.csdn.net/forums/csdnnews?typeId=116148&utm_source=csdn_ai_ada_blog_reply4 看奖励名单。
CSDN-Ada助手: 恭喜作者又写了一篇关于vue3+ts的博客，虽然题目中遇到了报错，但是作者能够积极解决问题并写出一篇博客分享经验，非常不错。建议作者在下一篇博客中可以分享一些vue3+ts的优化技巧或者更深入的应用场景，期待作者的更多精彩内容。 CSDN 正在通过评论红包奖励优秀博客，请看红包流：https://bbs.csdn.net/?type=4&header=0&utm_source=csdn_ai_ada_blog_reply3，我们会奖励持续创作和学习的博主，请看：https://bbs.csdn.net/forums/csdnnews?typeId=116148&utm_source=csdn_ai_ada_blog_reply3
CSDN-Ada助手: 恭喜您开始博客创作，这篇关于前端面试题的博客很有启发性。期待您未来更多的优秀作品。 推荐【每天值得看】：https://bbs.csdn.net/forums/csdnnews?typeId=21804&utm_source=csdn_ai_ada_blog_reply1