✨ feat:添加了发票
This commit is contained in:
sundongyu
parent
2ef3ac7697
commit
220d9d4fd8
354
src/pages/receivables-management/Bill.vue
Normal file
354
src/pages/receivables-management/Bill.vue
Normal file
|
|
@ -0,0 +1,354 @@
|
|||
<template>
|
||||
<div class="back-color">
|
||||
<div>
|
||||
<div class="invoiceContainer">
|
||||
<div class="invoiceHeade">
|
||||
<div class="headeLeft"></div>
|
||||
<div class="headeMiddle">
|
||||
<span class="title">xxx增值税电子普通发票</span>
|
||||
<hr />
|
||||
<hr />
|
||||
</div>
|
||||
<div class="headeRight">
|
||||
<ul>
|
||||
<li><label> 发票代码： </label><span>1234</span></li>
|
||||
<li><label> 发票号码： </label><span>223</span></li>
|
||||
<li>
|
||||
<label> 开票日期： </label><span>{{ InvoiceData.xdate }}</span>
|
||||
</li>
|
||||
<li><label> 校验码： </label><span>111111</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="invoiceBody">
|
||||
<div class="userInfo">
|
||||
<div class="buy">缴费方</div>
|
||||
<div class="buyInfo">
|
||||
<ul>
|
||||
<li>
|
||||
<label>学生姓名：</label><span>{{ InvoiceData.xname }}</span>
|
||||
</li>
|
||||
<li>
|
||||
<label>学号：</label><span>{{ InvoiceData.xstudent }}</span>
|
||||
</li>
|
||||
<li style="display: flex">
|
||||
<label>电话：</label
|
||||
><t-input
|
||||
size="small"
|
||||
style="width: 300px"
|
||||
v-model="InvoiceData.xphone"
|
||||
/>
|
||||
</li>
|
||||
<li style="display: flex">
|
||||
<label>缴费方式：</label
|
||||
><t-input
|
||||
size="small"
|
||||
style="width: 300px"
|
||||
v-model="InvoiceData.xpayment"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="password">缴费方</div>
|
||||
<div class="department">
|
||||
<ul>
|
||||
<li>
|
||||
<label>学生部门：</label
|
||||
><span>{{ InvoiceData.xdepartment }}</span>
|
||||
</li>
|
||||
<li>
|
||||
<label>学生班级：</label><span>{{ InvoiceData.xgrade }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="Table">
|
||||
备入
|
||||
<div>
|
||||
<t-textarea
|
||||
placeholder="请输入内容"
|
||||
v-model="InvoiceData.xremark"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="saleInfo">
|
||||
<div class="total">价税合计(大写)</div>
|
||||
|
||||
<span class="max"
|
||||
><t-input
|
||||
size="small"
|
||||
style="width: 150px; padding-top: 0.2rem"
|
||||
v-model="InvoiceData.xchargebig"
|
||||
/></span>
|
||||
<div class="total2" style="display: flex">
|
||||
(小写)
|
||||
<span style="display: flex"
|
||||
>￥<t-input
|
||||
size="small"
|
||||
style="width: 150px; padding-top: 0.2rem"
|
||||
v-model="InvoiceData.xcharge"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="userInfo2">
|
||||
<div class="buy">收费方</div>
|
||||
<div class="buyInfo">
|
||||
<ul>
|
||||
<li><label>名称：</label><span>xxxxxxx学院</span></li>
|
||||
<li>
|
||||
<label>纳税人识别号：</label><span>12443536377484848</span>
|
||||
</li>
|
||||
<li>
|
||||
<label>地址、 电话：</label
|
||||
><span>11223443532</span>
|
||||
</li>
|
||||
<li><label>开户行及账号：</label><span>中国农业银行</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="remark">备注</div>
|
||||
</div>
|
||||
<div class="userInfo3">
|
||||
<ul class="invoicetFooter" style="display: flex">
|
||||
<li style="display: flex">
|
||||
<label>收款人:</label
|
||||
><t-input
|
||||
size="small"
|
||||
style="width: 100px"
|
||||
v-model="InvoiceData.xpayee"
|
||||
/>
|
||||
</li>
|
||||
<li style="display: flex">
|
||||
<label>复核:</label
|
||||
><t-input
|
||||
size="small"
|
||||
style="width: 100px"
|
||||
v-model="InvoiceData.xreviewer"
|
||||
/>
|
||||
</li>
|
||||
<li style="display: flex">
|
||||
<label>开票人:</label
|
||||
><t-input
|
||||
size="small"
|
||||
style="width: 100px"
|
||||
v-model="InvoiceData.xdrawer"
|
||||
/>
|
||||
</li>
|
||||
<li><label>销售方：（章）</label></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import dayjs from 'dayjs'
|
||||
|
||||
const Route = useRoute()
|
||||
//后端会返回发票的数据
|
||||
const InvoiceData = ref({
|
||||
//发票日期
|
||||
xdate: dayjs().format('YYYY-MM-DD'),
|
||||
//学生姓名
|
||||
xname: Route.query.firstName,
|
||||
//学号
|
||||
xstudent: 12346,
|
||||
//电话
|
||||
xphone: '',
|
||||
//缴费方式
|
||||
xpayment: '',
|
||||
// 学生部门
|
||||
xdepartment: Route.query.status,
|
||||
//学生班级
|
||||
xgrade: Route.query.classname,
|
||||
//备注
|
||||
xremark: '',
|
||||
// 应收费(小写)
|
||||
xcharge: Route.query.letters[0],
|
||||
// 应收费(大写)
|
||||
xchargebig: '',
|
||||
//收款人
|
||||
xpayee: '',
|
||||
//复核人
|
||||
xreviewer: '',
|
||||
//开票人
|
||||
xdrawer: ''
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.headeRight {
|
||||
width: 240px;
|
||||
height: 100%;
|
||||
font-size: 16px;
|
||||
line-height: 30px;
|
||||
text-align: left;
|
||||
float: left;
|
||||
}
|
||||
.headeRight > ul {
|
||||
display: inline-block;
|
||||
margin-left: 16px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.invoicetFooter > li {
|
||||
margin-top: 16px;
|
||||
margin-right: 100px;
|
||||
margin-left: 11px;
|
||||
display: inline-block;
|
||||
}
|
||||
.max {
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
.total {
|
||||
width: 270px;
|
||||
height: 100%;
|
||||
font-size: 17px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
border-right: 1px solid black;
|
||||
float: left;
|
||||
padding-top: 0.25rem;
|
||||
}
|
||||
.total2 {
|
||||
width: 270px;
|
||||
height: 100%;
|
||||
font-size: 17px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
margin-right: 130px;
|
||||
float: right;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
.buyer {
|
||||
width: 30px;
|
||||
height: 100%;
|
||||
font-size: 17px;
|
||||
text-align: center;
|
||||
border-right: 1px solid black;
|
||||
float: left;
|
||||
}
|
||||
.title {
|
||||
font-size: 33px;
|
||||
display: inline-block;
|
||||
margin-top: 50px;
|
||||
font-family: '仿宋';
|
||||
}
|
||||
.headeMiddle {
|
||||
width: 400px;
|
||||
height: 100%;
|
||||
font-size: 17px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
float: left;
|
||||
}
|
||||
.headeLeft {
|
||||
width: 300px;
|
||||
height: 100%;
|
||||
font-size: 17px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
float: left;
|
||||
}
|
||||
.buy {
|
||||
width: 30px;
|
||||
height: 100%;
|
||||
font-size: 17px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
border-right: 1px solid black;
|
||||
border-left: 1px solid black;
|
||||
float: left;
|
||||
}
|
||||
.buyInfo {
|
||||
width: 510px;
|
||||
height: 100%;
|
||||
font-size: 16px;
|
||||
line-height: 25px;
|
||||
text-align: left;
|
||||
border-right: 1px solid black;
|
||||
float: left;
|
||||
}
|
||||
.department {
|
||||
height: 100%;
|
||||
font-size: 16px;
|
||||
line-height: 25px;
|
||||
text-align: left;
|
||||
float: left;
|
||||
}
|
||||
.password {
|
||||
width: 30px;
|
||||
height: 100%;
|
||||
font-size: 17px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
border-right: 1px solid black;
|
||||
float: left;
|
||||
}
|
||||
.remark {
|
||||
width: 30px;
|
||||
height: 100%;
|
||||
font-size: 17px;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
border-right: 1px solid black;
|
||||
float: left;
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding-left: 5px;
|
||||
}
|
||||
.invoiceContainer {
|
||||
width: 1000px;
|
||||
margin: 0 auto;
|
||||
border-top: 1px solid black;
|
||||
}
|
||||
.invoiceHeade {
|
||||
width: 1000px;
|
||||
height: 140px;
|
||||
border-bottom: 1px solid black;
|
||||
border-left: 1px solid black;
|
||||
border-right: 1px solid black;
|
||||
}
|
||||
.userInfo {
|
||||
width: 1000px;
|
||||
height: 100px;
|
||||
border-bottom: 1px solid black;
|
||||
border-right: 1px solid black;
|
||||
}
|
||||
.userInfo2 {
|
||||
width: 1000px;
|
||||
height: 100px;
|
||||
border-right: 1px solid black;
|
||||
}
|
||||
.userInfo3 {
|
||||
width: 1000px;
|
||||
height: 100px;
|
||||
border-top: 1px solid black;
|
||||
}
|
||||
.Table {
|
||||
width: 999px;
|
||||
height: 400px;
|
||||
border-bottom: 1px solid black;
|
||||
border-left: 1px solid black;
|
||||
border-right: 1px solid black;
|
||||
}
|
||||
.sum {
|
||||
width: 1000px;
|
||||
height: 50px;
|
||||
border-bottom: 1px solid black;
|
||||
}
|
||||
.saleInfo {
|
||||
width: 999px;
|
||||
height: 40px;
|
||||
border-bottom: 1px solid black;
|
||||
border-right: 1px solid black;
|
||||
border-left: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -22,11 +22,11 @@
|
|||
import { ref, computed } from 'vue'
|
||||
import { Input, Select } from 'tdesign-vue-next'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useRouter } from 'vue-router'
|
||||
import dayjs from 'dayjs'
|
||||
|
||||
const route = useRoute()
|
||||
console.log(route.query)
|
||||
|
||||
const router = useRouter()
|
||||
const initData = new Array(1).fill(null).map((_, i) => ({
|
||||
key: String(i + 1),
|
||||
//学生姓名
|
||||
|
|
@ -188,6 +188,10 @@ const columns = computed(() => [
|
|||
}
|
||||
])
|
||||
const handleEdit = row => {
|
||||
router.push({
|
||||
path: 'bill-bill',
|
||||
query: row
|
||||
})
|
||||
console.log(row)
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -20,6 +20,12 @@ const ReceivablesManagement = [
|
|||
name: "BillCollected",
|
||||
component: () => import("@/pages/receivables-management/billCollected.vue"),
|
||||
meta: { title: "票据收款", hidden: false },
|
||||
},
|
||||
{
|
||||
path: "/bill-bill",
|
||||
name: "BillBill",
|
||||
component: () => import("@/pages/receivables-management/Bill.vue"),
|
||||
meta: { title: "票据", hidden: false },
|
||||
}
|
||||
],
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user