From dfdfbd2c5a71c9cdf39bdea0c9eae30435444253 Mon Sep 17 00:00:00 2001
From: sundongyu <2811054731@qq.com>
Date: Sun, 7 Apr 2024 21:41:06 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E2=9C=A8=20feat:=E5=AE=8C=E6=88=90?=
 =?UTF-8?q?=E5=BA=94=E6=94=B6=E7=AE=A1=E7=90=86=E7=9A=84=E5=AD=A6=E7=94=9F?=
 =?UTF-8?q?=E8=B4=B9=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 mock/modules/sdy.js                           |   1 +
 package-lock.json                             |   4 +-
 package.json                                  |   1 +
 src/layout/components/LayoutAside.vue         |   2 +-
 .../accountReceivable.vue                     |  65 ++++--
 .../receivables-management/billCollected.vue  | 194 ++++++++++++++++++
 src/router/modules/receivables-management.js  |   6 +
 7 files changed, 251 insertions(+), 22 deletions(-)
 create mode 100644 src/pages/receivables-management/billCollected.vue

diff --git a/mock/modules/sdy.js b/mock/modules/sdy.js
index 38331f9..f748914 100644
--- a/mock/modules/sdy.js
+++ b/mock/modules/sdy.js
@@ -9,6 +9,7 @@ const data = Mock.mock({
       "major": `@pick(['机械制造与自动化', '材料科学与工程', '环境科学与工程', '建筑工程', '护理学'])`,
       "grade": `@pick(['机制1班', '材料1班', '环境1班', '建筑1班','护理1班'])`,
       "tuition": `@pick(['已付学费', '未缴学费'])`,
+      "tu": 16800,
     }
   ]
 })
diff --git a/package-lock.json b/package-lock.json
index bc6aac9..dbf7f58 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "axios": "^1.6.8",
+        "dayjs": "^1.11.10",
         "less": "^4.2.0",
         "mockjs": "^1.1.0",
         "pinia": "^2.1.7",
@@ -998,7 +999,8 @@
     },
     "node_modules/dayjs": {
       "version": "1.11.10",
-      "license": "MIT"
+      "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.10.tgz",
+      "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
     },
     "node_modules/debug": {
       "version": "4.3.4",
diff --git a/package.json b/package.json
index c275677..98f0615 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "axios": "^1.6.8",
+    "dayjs": "^1.11.10",
     "less": "^4.2.0",
     "mockjs": "^1.1.0",
     "pinia": "^2.1.7",
diff --git a/src/layout/components/LayoutAside.vue b/src/layout/components/LayoutAside.vue
index aee43c0..d011cab 100644
--- a/src/layout/components/LayoutAside.vue
+++ b/src/layout/components/LayoutAside.vue
@@ -14,7 +14,7 @@
           <t-icon name="application" />
         </template>
         <t-menu-item value="2-1" to="/accounts">
-          <span>菜单二</span>
+          <span>应收款管理</span>
         </t-menu-item>
       </t-submenu>
     </t-menu>
diff --git a/src/pages/receivables-management/accountReceivable.vue b/src/pages/receivables-management/accountReceivable.vue
index 522ca63..05f5711 100644
--- a/src/pages/receivables-management/accountReceivable.vue
+++ b/src/pages/receivables-management/accountReceivable.vue
@@ -78,6 +78,11 @@
           }}</t-tag>
           <t-tag v-else theme="success">{{ row.tuition }}</t-tag>
         </template>
+        <template #action="{ row }">
+          <t-button v-if="row.tuition === '未缴学费'" @click="handleTicket(row)"
+            >清缴学费</t-button
+          >
+        </template>
       </t-table>
     </div>
   </div>
@@ -88,6 +93,8 @@ import {
   APIReceivablesList,
   APIReceivablesAdd
 } from '@/api/receivables-management/management'
+import { useRouter } from 'vue-router'
+const router = useRouter()
 //表单数据
 const formData = reactive({
   name: '',
@@ -179,23 +186,6 @@ const CONDITION = [
 ]
 // 表格数据
 const tableData = ref([])
-//表单提交
-const onSubmit = async () => {
-  const res = await APIReceivablesAdd(formData)
-  console.log(res)
-  tableData.value = res
-  pagination.total = res.length
-}
-// 表格加载状态
-const loading = ref(false)
-//表单重置
-const onReset = () => {
- ReceivablesList()
-}
-// 表格点击事件
-const handleRowClick = e => {
-  console.log(e)
-}
 // 表格头数据
 const columns = ref([
   { colKey: 'serial-number' },
@@ -204,15 +194,43 @@ const columns = ref([
   { colKey: 'department', title: '部门' },
   { colKey: 'major', title: '专业' },
   { colKey: 'grade', title: '班级' },
-  { colKey: 'tuition', title: '是否缴费' }
+  { colKey: 'tuition', title: '是否缴费' },
+  { colKey: 'action', title: '操作', align: 'center' }
 ])
-
 // 表格分页数据
 let pagination = {
   defaultCurrent: 1,
-  defaultPageSize: 5,
+  defaultPageSize: 10,
   total: 50
 }
+//表单提交
+const onSubmit = async () => {
+  if (
+    formData.name ||
+    formData.studentnumber ||
+    formData.department ||
+    formData.major ||
+    formData.grade ||
+    formData.tuition
+  ) {
+    const res = await APIReceivablesAdd(formData)
+    console.log(res)
+    tableData.value = Array.from(res)
+    pagination.total = res.length
+  } else {
+    alert('请填写完整信息')
+  }
+}
+// 表格加载状态
+const loading = ref(false)
+//表单重置
+const onReset = () => {
+  ReceivablesList()
+}
+// 表格点击事件
+const handleRowClick = e => {
+  console.log(e)
+}
 //获取表格数据
 const ReceivablesList = async () => {
   loading.value = true
@@ -229,6 +247,13 @@ const onPageChange = (Newpage, PreviousPagePrev) => {
     clearInterval(timerId)
   }, 300)
 }
+//跳转票据页面
+const handleTicket = row => {
+  router.push({
+    path: '/billCollected',
+    query: row
+  })
+}
 onMounted(() => {
   ReceivablesList()
 })
diff --git a/src/pages/receivables-management/billCollected.vue b/src/pages/receivables-management/billCollected.vue
new file mode 100644
index 0000000..e5bf965
--- /dev/null
+++ b/src/pages/receivables-management/billCollected.vue
@@ -0,0 +1,194 @@
+<template>
+  <div class="back-color">
+    <t-table
+      ref="tableRef"
+      row-key="key"
+      :columns="columns"
+      :data="data"
+      :editable-cell-state="editableCellState"
+      bordered
+      lazy-load
+    >
+      <template #operation="{ row }">
+        <t-button theme="default" variant="text" @click="handleEdit(row)"
+          >填写电子票据</t-button
+        >
+      </template>
+    </t-table>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import { ref, computed } from 'vue'
+import { Input, Select } from 'tdesign-vue-next'
+import { useRoute } from 'vue-router'
+import dayjs from 'dayjs'
+
+const route = useRoute()
+console.log(route.query)
+
+const initData = new Array(1).fill(null).map((_, i) => ({
+  key: String(i + 1),
+  //学生姓名
+  firstName: route.query.name,
+  //学生部门
+  status: route.query.department,
+  //学生班级
+  classname: route.query.grade,
+  letters: [],
+  createTime: dayjs().format('YYYY-MM-DD')
+}))
+//学生部门
+const STATUS_OPTIONS = [
+  { label: '机电工程系', value: '机电工程系' },
+  { label: '护理分院', value: '护理分院' },
+  { label: '建筑系', value: '建筑系' },
+  { label: '材料科学与工程系', value: '材料科学与工程系' },
+  { label: '审批环境科学与工程系过期', value: '审批环境科学与工程系过期' }
+]
+//学生班级
+const CLASS_NAME = [
+  { label: '机制1班', value: '机制1班' },
+  { label: '材料1班', value: '材料1班' },
+  { label: '环境1班', value: '环境1班' },
+  { label: '建筑1班', value: '建筑1班' },
+  { label: '护理1班', value: '护理1班' }
+]
+const align = ref('left')
+const data = ref([...initData])
+const editableCellState = cellParams => {
+  const { row } = cellParams
+  return row.status !== 2
+}
+const tableRef = ref()
+const columns = computed(() => [
+  {
+    title: '学生姓名',
+    colKey: 'firstName',
+    align: align.value,
+    edit: {
+      component: Input,
+      props: {
+        clearable: true,
+        autofocus: true
+      },
+      validateTrigger: 'change',
+      on: editContext => ({
+        onBlur: () => {
+          console.log('失去焦点', editContext)
+        },
+        onEnter: ctx => {
+          ctx?.e?.preventDefault()
+          console.log('onEnter', ctx)
+        }
+      }),
+      abortEditOnEvent: ['onEnter'],
+      onEdited: context => {
+        console.log(context)
+        const newData = [...data.value]
+        newData.splice(context.rowIndex, 1, context.newRowData)
+        data.value = newData
+        console.log('Edit firstName:', context)
+      },
+      defaultEditable: true
+    }
+  },
+  {
+    title: '学生部门',
+    colKey: 'status',
+    cell: (h, { row }) =>
+      STATUS_OPTIONS.find(t => t.value === row.status)?.label,
+    edit: {
+      component: Select,
+      props: {
+        clearable: true,
+        options: STATUS_OPTIONS
+      },
+      on: editContext => ({
+        onChange: params => {
+          console.log('status changed', editContext, params)
+        }
+      }),
+      onEdited: context => {
+        data.value.splice(context.rowIndex, 1, context.newRowData)
+      }
+    }
+  },
+  {
+    title: '学生班级',
+    colKey: 'classname',
+    cell: (h, { row }) =>
+      CLASS_NAME.find(t => t.value === row.classname)?.label,
+    edit: {
+      component: Select,
+      props: {
+        clearable: true,
+        options: CLASS_NAME
+      },
+      on: editContext => ({
+        onChange: params => {
+          console.log('status changed', editContext, params)
+        }
+      }),
+      onEdited: context => {
+        data.value.splice(context.rowIndex, 1, context.newRowData)
+      }
+    }
+  },
+  {
+    title: '学生状态',
+    colKey: 'letters',
+    cell: (h, { row }) => row.letters.join('、'),
+    edit: {
+      keepEditMode: true,
+      component: Select,
+      props: () => {
+        return {
+          multiple: true,
+          minCollapsedNum: 1,
+          options: [
+            { label: '初级学生', value: '2000元' },
+            { label: '中级学生', value: '3000元' },
+            { label: '高级学生', value: '4000元' },
+            { label: '老年学生', value: '5000元' },
+            { label: '神级学生', value: '6000元' }
+          ].filter(t => (t.show === undefined ? true : t.show()))
+        }
+      },
+      onEdited: context => {
+        data.value.splice(context.rowIndex, 1, context.newRowData)
+      }
+    }
+  },
+  {
+    title: '应缴金额',
+    colKey: 'letters',
+    cell: (h, { row }) => row.letters.join('、'),
+    edit: {
+      keepEditMode: true,
+      component: Select,
+      props: () => {
+        return {
+          multiple: true,
+          minCollapsedNum: 1
+        }
+      },
+      onEdited: context => {
+        data.value.splice(context.rowIndex, 1, context.newRowData)
+      }
+    }
+  },
+  {
+    title: '创建日期',
+    colKey: 'createTime'
+  },
+  {
+    title: '操作',
+    colKey: 'operation'
+  }
+])
+const handleEdit = row => {
+  console.log(row)
+}
+</script>
+<style scoped lang="less"></style>
diff --git a/src/router/modules/receivables-management.js b/src/router/modules/receivables-management.js
index f96f692..f6991c7 100644
--- a/src/router/modules/receivables-management.js
+++ b/src/router/modules/receivables-management.js
@@ -15,6 +15,12 @@ const ReceivablesManagement = [
           title: "应收款管理",
         },
       },
+      {
+        path: "/billCollected",
+        name: "BillCollected",
+        component: () => import("@/pages/receivables-management/billCollected.vue"),
+        meta: { title: "票据收款", hidden: false },
+      }
     ],
   },
 ];

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 2/2] =?UTF-8?q?=E2=9C=A8=20feat:=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E4=BA=86=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 },
       }
     ],
   },