✨ 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 { ref, computed } from 'vue'
|
||||||
import { Input, Select } from 'tdesign-vue-next'
|
import { Input, Select } from 'tdesign-vue-next'
|
||||||
import { useRoute } from 'vue-router'
|
import { useRoute } from 'vue-router'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
import dayjs from 'dayjs'
|
import dayjs from 'dayjs'
|
||||||
|
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
console.log(route.query)
|
const router = useRouter()
|
||||||
|
|
||||||
const initData = new Array(1).fill(null).map((_, i) => ({
|
const initData = new Array(1).fill(null).map((_, i) => ({
|
||||||
key: String(i + 1),
|
key: String(i + 1),
|
||||||
//学生姓名
|
//学生姓名
|
||||||
|
|
@ -188,6 +188,10 @@ const columns = computed(() => [
|
||||||
}
|
}
|
||||||
])
|
])
|
||||||
const handleEdit = row => {
|
const handleEdit = row => {
|
||||||
|
router.push({
|
||||||
|
path: 'bill-bill',
|
||||||
|
query: row
|
||||||
|
})
|
||||||
console.log(row)
|
console.log(row)
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -20,6 +20,12 @@ const ReceivablesManagement = [
|
||||||
name: "BillCollected",
|
name: "BillCollected",
|
||||||
component: () => import("@/pages/receivables-management/billCollected.vue"),
|
component: () => import("@/pages/receivables-management/billCollected.vue"),
|
||||||
meta: { title: "票据收款", hidden: false },
|
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