zoukankan      html  css  js  c++  java
  • [转]VUE 记账凭证 模块组件

    https://my.oschina.net/nadonghua/blog/4526430 

    薛定谔的大鹿
    2020/08/24 14:23
    阅读数 3.4K

    <template>
    	<div class="voucher-container">
    		<div class="voucher_header">
    			<div class="voucher_header_title">记账凭证</div>
    			<div class="voucher_header_number">单据号: {{voucher.numberId}}</div>
    		</div>
    		<table class="voucher" cellpadding="0" cellspacing="0">
    			<thead>
    				<tr>
    					<th class="voucher_summary">摘要</th>
    					<th class="voucher_subject">会计科目</th>
    					<th class="voucher_money">
    						<strong class="voucher_title">借方金额</strong>
    						<div class="voucher_column voucher_unit">
    							<span>亿</span>
    							<span>千</span>
    							<span>百</span>
    							<span>十</span>
    							<span>万</span>
    							<span>千</span>
    							<span>百</span>
    							<span>十</span>
    							<span>元</span>
    							<span>角</span>
    							<span class="voucher_last">分</span>
    						</div>
    					</th>
    					<th class="voucher_money">
    						<strong class="voucher_title">贷方金额</strong>
    						<div class="voucher_column voucher_unit">
    							<span>亿</span>
    							<span>千</span>
    							<span>百</span>
    							<span>十</span>
    							<span>万</span>
    							<span>千</span>
    							<span>百</span>
    							<span>十</span>
    							<span>元</span>
    							<span>角</span>
    							<span class="voucher_last">分</span>
    						</div>
    					</th>
    				</tr>
    			</thead>
    			<tbody>
    				<tr class="voucher_item" v-for="(item) in voucher.items" :key="item.id">
    					<td class="voucher_summary">{{item.summart}}</td>
    					<td class="voucher_subject">{{item.subject}}</td>
    					<td class="voucher_debite">
    						<div class="voucher_number"><money-format :number="item.debite"></money-format></div>
    					</td>
    					<td class="voucher_credit">
    						<div class="voucher_number"><money-format :number="item.credit"></money-format></div>
    					</td>
    				</tr>
    			</tbody>
    			<tfoot>
    				<tr>
    					<td class="voucher_total" colspan="2">
    						合计:
    						<money-format :number="voucher.total" :chinese="true"></money-format>
    					</td>
    					<td class="voucher_debite">
    						<div class="voucher_number"><money-format :number="voucher.debite" :colour="true"></money-format></div>
    					</td>
    					<td class="voucher_credit">
    						<div class="voucher_number"><money-format :number="voucher.credit" :colour="true"></money-format></div>
    					</td>
    				</tr>
    			</tfoot>
    		</table>
    		<div class="voucher_footer">制单人:{{voucher.bookkeeper}}</div>
    	</div>
    </template>
    
    <script>
    import MoneyFormat from './MoneyFormat';
    export default {
    	name: 'Voucher',
    	props: {
    		voucher: {
    			type: Object,
    		}
    	},
    	components: {
    		MoneyFormat
    	}
    };
    </script>
    
    <style lang="less" rel="stylesheet/less">
    .voucher-container {
    	height: 100%;
    	 100%;
    	overflow: hidden;
    	margin: 0.625rem;
    	padding: 0;
    }
    .voucher_header {
    	padding-top: 20px;
    	margin-bottom: 10px;
    	overflow: hidden;
    }
    .voucher_header_title {
    	float: left;
    	display: inline;
    	margin: -20px 130px 0px 100px;
    	font: 28px/1.8 'Microsoft Yahei';
    	text-align: center;
    	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    }
    .voucher_header_number {
    	text-align: left;
    	float: left;
    	margin-left: 120px;
    }
    .voucher_footer {
    	margin: 10px;
    	overflow: hidden;
    	text-align: left;
    	font-weight: bold;
    }
    
    .voucher {
    	border-collapse: collapse;
    	th,
    	td {
    		border: 1px solid #ccc;
    	}
    	td {
    		height: 35px;
    	}
    	th {
    		height: 48px;
    		color: #555555;
    		font-size: 14px;
    		text-align: center;
    		font-weight: bold;
    		overflow: hidden;
    	}
    	.voucher_title {
    		display: block;
    		height: 25px;
    		line-height: 25px;
    	}
    	.voucher_last {
    		margin-right: 0;
    		 18px;
    	}
    	.voucher_money {
    		font-size: 12px;
    		min- 221px;
    		span {
    			float: left;
    			display: inline;
    			 19px;
    			height: 100%;
    			margin-right: 1px;
    		}
    	}
    	.voucher_column,
    	.voucher_credit,
    	.voucher_debite {
    		background-image: url(../assets/image/money_column.png);
    		background-repeat: repeat-y;
    	}
    	.voucher_summary {
    		min- 6.25rem;
    		word-break: break-all;
    		word-wrap: break-word;
    	}
    	.voucher_subject {
    		min- 6.25rem;
    		word-break: break-all;
    		word-wrap: break-word;
    	}
    	.voucher_unit {
    		height: 22px;
    		line-height: 22px;
    		font-weight: normal;
    		border-top: 1px solid #dadada;
    		text-align: center;
    	}
    	.voucher_total {
    		letter-spacing: 1px;
    	}
    	.voucher_number {
    		position: relative;
    		font-family: 'tahoma';
    		letter-spacing: 11px;
    		text-align: right;
    		font-weight: bold;
    		right: -5px;
    	}
    	.voucher_item {
    	}
    }
    </style>
  • 相关阅读:
    Java实现 蓝桥杯VIP 算法提高 阮小二买彩票
    Java实现 蓝桥杯VIP 算法提高 传染病控制
    Java实现 蓝桥杯VIP 算法提高 传染病控制
    Java实现 蓝桥杯VIP 算法提高 传染病控制
    Java实现 蓝桥杯VIP 算法提高 传染病控制
    Java实现 蓝桥杯VIP 算法提高 传染病控制
    Java实现 蓝桥杯VIP 算法提高 企业奖金发放
    Java实现 蓝桥杯VIP 算法提高 企业奖金发放
    让程序后台隐藏运行
    只要你喜欢,并且可以养家糊口,就是好的
  • 原文地址:https://www.cnblogs.com/2019gdiceboy/p/14469640.html
Copyright © 2011-2022 走看看