这是效果图
先创建子组件文件名为 InvoiceDialog.vue
<template>
<el-dialog :visible.sync="dialogVisible" width="60%" title="记账信息">
<div class="xian"></div>
<div class="content">
<p class="Invoicenumber">发票号:{{ invoice.invoice_no }}</p>
</div>
<div class="invoiceMain">
<div class="invoiceBody">
<div class="userInfo">
<div class="buy">购买方信息</div>
<ul>
<li>
<span>{{ invoice.hospital_district_name }}</span>
</li>
</ul>
<div class="sell">销售方信息</div>
<ul>
<li>
<span>{{ invoice.supplier_name }}</span>
</li>
</ul>
</div>
<div>
<table class="GoodsTable" cellpadding="0" cellspacing="0">
<thead>
<tr>
<td style="width: 24%; border-right: 1px solid #000">商品名称</td>
<td style="width: 10%; text-align: left; border-right: 1px solid #000">规格型号</td>
<td style="width: 7%; border-right: 1px solid #000">单位</td>
<td style="width: 10%; text-align: right; border-right: 1px solid #000">数 量</td>
<td style="width: 11%; text-align: right; border-right: 1px solid #000">单 价(无税)</td>
<td style="width: 16%; text-align: right; border-right: 1px solid #000">金 额</td>
<td style="width: 12%; border-right: 1px solid #000">税率</td>
<td style="width: 16%; text-align: right; border-right: none">税 额</td>
</tr>
</thead>
<tbody class="invoice-list" style="height: 126px">
<tr v-for="(item, index) in Processeddata.List" :key="index">
<td style="border-right: 1px solid #765954">{{ item.commodity_name }}</td>
<td style="border-right: 1px solid #765954">{{ item.specs }}</td>
<td style="border-right: 1px solid #765954">{{ item.unit }}</td>
<td style="border-right: 1px solid #765954">{{ item.check_qty }}</td>
<td style="border-right: 1px solid #765954">{{ item.unit_price_without_tax }}</td>
<td style="border-right: 1px solid #765954">{{ item.Taxfreea }}</td>
<td style="border-right: 1px solid #765954">{{ invoice.tax_rate * 100 }}%</td>
<td>{{ item.tax_amtzs }}</td>
</tr>
</tbody>
<tfoot>
<tr class="total">
<td style="border-right: 1px solid #765954">合 计</td>
<td style="border-right: 1px solid #765954"></td>
<td style="border-right: 1px solid #765954"></td>
<td style="border-right: 1px solid #765954"></td>
<td style="border-right: 1px solid #765954"></td>
<td style="border-right: 1px solid #765954">
<span class="rmb">¥</span>{{ totals.totalAmount.toFixed(4) }}
</td>
<td style="border-right: 1px solid #765954"></td>
<td>
<span class="rmb">¥</span>{{ totals.totalTax.toFixed(4) }}
</td>
</tr>
<tr class="GoodsTotal">
<td style="text-align: center; border-right: 1px solid #000">价税合计(大写)</td>
<td colspan="7">
<div style="width: 100%; display: flex">
<div type="text" style="width: 60%">
<span class="c-black">{{ totals.Capitalletters }}</span>
</div>
<div type="text" style="width: 30%">
(小写) <span class="c-black">
<span class="rmb">¥</span><span>{{ totals.hesum.toFixed(4) }}</span>
</span>
</div>
</div>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="handleConfirm">确认记账</el-button>
<el-button @click="handleCancel">取 消</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
props: {
dialogVisible: {
type: Boolean,
required: true
},
invoice: {
type: Object,
required: true
},
Processeddata: {
type: Object,
required: true
},
totals: {
type: Object,
required: true
}
},
methods: {
handleConfirm() {
this.$emit('confirm');
},
handleCancel() {
this.$emit('update:dialogVisible', false);
}
}
}
</script>
<style scoped>
.Product {
height: auto;
}
.companyflex {
width: 100%;
display: flex;
align-items: center;
}
.companyname {
flex: 1;
height: 30px;
border: #a4a4a4 2px solid;
line-height: 30px;
text-align: center;
}
.companyn {
width: 100px;
height: 30px;
border: #a4a4a4 2px solid;
line-height: 30px;
text-align: center;
}
.content {
padding: 20px;
}
.Invoicenumber {
text-align: right;
}
.xian {
width: 100%;
height: 1px;
border: 1px solid #a4a4a4;
}
.Accountinginformation {
font-style: 16px;
font-weight: 700;
}
.dialog-footer-flex {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background: #f5f5f5;
border-top: 1px solid #dcdfe6;
}
.dialog-footer-flex-left {
display: flex;
align-items: center;
}
</style>
<style scoped>
span {
font-size: 14px;
}
ul,
ul li {
list-style: none;
}
body {
font-family: "KaiTi";
font-weight: 500;
}
label {
color: #000;
}
.rmb {
font-family: Arial, Helvetica, sans-serif;
}
.c-red {
color: #ff3133;
}
.c-black {
color: #000;
}
.f-big {
font-size: 16px;
font-family: "Courier New", monospace;
}
.f-small {
font-size: 12px;
}
.invoiceMain {
box-sizing: border-box;
width: 100%;
margin: 0 auto;
font-size: 14px;
color: #000;
padding: 20px;
}
.invoiceHeader {
display: flex;
justify-content: space-between;
}
.headerLeft {
width: 300px;
display: flex;
}
.headerLeft div:nth-child(1) {
line-height: 26px;
}
.headerLeft div p {
line-height: 26px;
}
.headerLeft div:nth-child(2) p.c-red {
width: 170px;
height: 46px;
text-align: center;
line-height: 42px;
font-size: 24px;
letter-spacing: 2px;
}
.headerLeft div p.c span {
font-size: 18px;
letter-spacing: 1px;
}
.headerRight {
margin-top: 10px;
padding-left: 28px;
width: 316px;
}
.headerRight p {
text-align: left;
margin-bottom: 11px;
}
.headerMiddle {
text-align: center;
width: 350px;
}
.headerMiddle h1 {
font-size: 26px;
font-weight: 500;
color: #000;
padding-bottom: 10px;
}
.total .rmb {
font-size: 14px;
font-family: "Courier New", Courier, monospace;
}
.line {
height: 2px;
border-top: #5f3f3f 1px solid;
border-bottom: #000000 1px solid;
margin-bottom: 40px;
}
.invoiceBody {
border: 1px solid #000;
}
.userInfo {
width: 100%;
display: flex;
align-items: center;
height: 30px;
border-bottom: 1px solid #000;
}
.userInfo ul {
width: 50%;
margin: 0 5px;
padding: 0;
}
.userInfo ul li {
line-height: 24px;
}
.userInfo ul li:nth-child(2) .f-big {
letter-spacing: 2px;
}
.userInfo ul li:nth-child(3) {
position: relative;
}
.buy {
width: 120px;
border-right: 1px solid #000;
padding: 0 5px;
text-align: center;
height: 100%;
display: flex;
align-items: center;
color: #000;
line-height: 14px;
}
.sell {
width: 120px;
border-right: 1px solid #000;
border-left: 1px solid #000;
padding: 0 5px;
text-align: center;
height: 100%;
display: flex;
align-items: center;
color: #000;
line-height: 14px;
}
.GoodsTable {
height: 166px;
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
.GoodsTable td {
color: #000;
padding: 0 4px;
}
.invoice-list {
height: 126px;
overflow: hidden;
}
.invoice-list td {
color: #000;
vertical-align: middle;
border-radius: #000 1px solid;
}
.invoice-list td:nth-child(3) {
text-align: center;
}
.invoice-list td:nth-child(4),
.invoice-list td:nth-child(5),
.invoice-list td:nth-child(6),
.invoice-list td:nth-child(7),
.invoice-list td:nth-child(8),
.total td:nth-child(5),
.total td:nth-child(6),
.total td:nth-child(7),
.total td:nth-child(8) {
text-align: right;
}
.invoice-list tr td {
height: 21px;
}
.GoodsTable thead tr {
height: 24px;
text-align: center;
}
.GoodsTotal {
height: 34px;
}
.GoodsTotal {
border-top: 1px solid #000;
}
.total td {
color: #000;
}
.total td:nth-child(1) {
text-align: center;
color: #000;
}
.total td:nth-child(6),
.total td:nth-child(8) {
font-size: 18px;
}
.remark {
display: flex;
border-right: 1px solid #765954;
height: 75px;
}
.remark-title {
width: 20px;
height: 100%;
border-right: 1px solid #000;
padding: 0 5px;
text-align: center;
display: flex;
align-items: center;
color: #000;
line-height: 14px;
}
.remark-content {
padding: 10px;
word-break: break-all;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow-y: hidden;
}
.invoiceFooter {
padding-top: 20px;
padding-left: 60px;
display: flex;
justify-content: space-between;
}
.invoiceFooter li {
width: 25%;
}
</style>
父组件引用
<template>
<div>
<!-- 触发弹框的按钮 -->
<el-button @click="openDialog">查看发票</el-button>
<!-- 使用子组件 -->
<InvoiceDialog
:dialogVisible="dialogVisible"
:invoice="invoice"
:Processeddata="Processeddata"
:totals="totals"
@confirm="handleConfirm"
@update:dialogVisible="dialogVisible = false"
/>
</div>
</template>
<script>
import InvoiceDialog from './InvoiceDialog.vue'; // 引入子组件
export default {
components: {
InvoiceDialog // 注册子组件
},
data() {
return {
dialogVisible: false, // 控制弹框显示
invoice: {
invoice_no: '123456',
hospital_district_name: '医院名称',
supplier_name: '供应商名称',
tax_rate: 0.13
},
Processeddata: {
List: [
{
commodity_name: '商品1',
specs: '规格1',
unit: '单位1',
check_qty: 10,
unit_price_without_tax: 100,
Taxfreea: 1000,
tax_amtzs: 130
}
// 其他商品数据...
]
},
totals: {
totalAmount: 1000,
totalTax: 130,
Capitalletters: '壹仟贰佰叁拾元整',
hesum: 1130
}
};
},
methods: {
openDialog() {
this.dialogVisible = true; // 打开弹框
},
handleConfirm() {
console.log('确认记账');
// 处理确认逻辑
this.dialogVisible = false; // 关闭弹框
}
}
}
</script>
<style scoped>
/* 在这里添加父组件的样式 */
</style>