From 220d9d4fd8d3420df180154b8ab176fe7d4fda9d Mon Sep 17 00:00:00 2001
From: sundongyu <2811054731@qq.com>
Date: Sun, 7 Apr 2024 22:15:44 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=E6=B7=BB=E5=8A=A0=E4=BA=86?=
 =?UTF-8?q?=E5=8F=91=E7=A5=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/receivables-management/Bill.vue     | 354 ++++++++++++++++++
 .../receivables-management/billCollected.vue  |   8 +-
 src/router/modules/receivables-management.js  |   6 +
 3 files changed, 366 insertions(+), 2 deletions(-)
 create mode 100644 src/pages/receivables-management/Bill.vue

diff --git a/src/pages/receivables-management/Bill.vue b/src/pages/receivables-management/Bill.vue
new file mode 100644
index 0000000..92c932d
--- /dev/null
+++ b/src/pages/receivables-management/Bill.vue
@@ -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>地址、&nbsp;&nbsp;&nbsp;电话：</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>
diff --git a/src/pages/receivables-management/billCollected.vue b/src/pages/receivables-management/billCollected.vue
index e5bf965..e6f4b67 100644
--- a/src/pages/receivables-management/billCollected.vue
+++ b/src/pages/receivables-management/billCollected.vue
@@ -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>
diff --git a/src/router/modules/receivables-management.js b/src/router/modules/receivables-management.js
index f6991c7..29290d8 100644
--- a/src/router/modules/receivables-management.js
+++ b/src/router/modules/receivables-management.js
@@ -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 },
       }
     ],
   },