✨ feat:完成了可以添加学生收费金额的管理

src/layout/components/LayoutAside.vue

@@ -1,6 +1,14 @@
 <template>
   <div style="height: 100%">
     <t-menu>
+      <t-submenu value="3" title="首页">
+        <template #icon>
+          <t-icon name="home" />
+        </template>
+        <t-menu-item value="3-1" to="/home">
+          <span>首页</span>
+        </t-menu-item>
+      </t-submenu>
       <t-submenu value="1" title="财务票据管理">
         <template #icon>
           <t-icon name="application" />
@@ -22,6 +30,9 @@
         <t-menu-item value="2-1" to="/accounts">
           <span>应收款管理</span>
         </t-menu-item>
+        <t-menu-item value="2-2" to="/billCollected">
+          <span>学生收款</span>
+        </t-menu-item>
       </t-submenu>
     </t-menu>
   </div>

src/pages/home/index.vue

@@ -0,0 +1,7 @@
+<template>
+  <div></div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped></style>

src/pages/receivables-management/Bill.vue

@@ -168,7 +168,7 @@ const InvoiceData = ref({
   //备注
   xremark: '',
   // 应收费(小写)
-  xcharge: Route.query.letters[0],
+  xcharge: Route.query.letters ? Route.query.letters[0] : 0,
   // 应收费(大写)
   xchargebig: '',
   //收款人

src/pages/receivables-management/accountReceivable.vue

@@ -79,9 +79,13 @@
           <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
+            v-if="row.tuition === '未缴学费'"
+            theme="danger"
+            @click="handleTicket(row)"
             >清缴学费</t-button
           >
+          <t-button v-else @click="hreturn(row)">退还学费</t-button>
         </template>
       </t-table>
     </div>
@@ -254,6 +258,12 @@ const handleTicket = row => {
     query: row
   })
 }
+//退还学费
+const hreturn = row => {
+  router.push({
+    path: 'bill-bill'
+  })
+}
 onMounted(() => {
   ReceivablesList()
 })

src/pages/receivables-management/billCollected.vue

@@ -1,25 +1,98 @@
 <template>
   <div class="back-color">
-    <t-table
+    <div>
-      ref="tableRef"
+      <t-table
-      row-key="key"
+        ref="tableRef"
-      :columns="columns"
+        row-key="key"
-      :data="data"
+        :columns="columns"
-      :editable-cell-state="editableCellState"
+        :data="data"
-      bordered
+        :editable-cell-state="editableCellState"
-      lazy-load
+        bordered
-    >
+        lazy-load
-      <template #operation="{ row }">
+      >
-        <t-button theme="default" variant="text" @click="handleEdit(row)"
+        <template #operation="{ row }">
-          >填写电子票据</t-button
+          <t-button theme="default" variant="text" @click="handleEdit(row)"
+            >填写电子票据</t-button
+          >
+        </template>
+      </t-table>
+    </div>
+    <div v-if="judge()">
+      <div
+        style="
+          font-size: 2rem;
+          height: 5rem;
+          line-height: 5rem;
+          text-align: center;
+        "
+      >
+        管理学生收费
+      </div>
+      <div>
+        <div>
+          <t-row justify="end">
+            <t-col span="2">
+              <t-button theme="default" variant="text" @click="onClick"
+                >添加收费标准</t-button
+              >
+            </t-col>
+          </t-row>
+        </div>
+        <t-base-table
+          row-key="index"
+          :data="RATES_OPTIONS"
+          :columns="ratesColumns"
+          @page-change="onPageChange"
+          :pagination="pagination"
         >
-      </template>
+          <template #operation="{ row }">
-    </t-table>
+            <t-button theme="default" variant="text" @click="Role(row)"
+              >编辑</t-button
+            >
+            <t-button theme="default" variant="text" @click="DeleteRole(row)"
+              >删除</t-button
+            >
+          </template>
+        </t-base-table>
+      </div>
+    </div>
+    <div>
+      <t-space>
+        <t-dialog
+          v-model:visible="visible"
+          header="添加学生收费标准"
+          width="30%"
+          :on-cancel="onCancel"
+          :on-close-btn-click="onCloseBtnClick"
+          :on-confirm="onConfirmAnother"
+          :close-on-overlay-click="false"
+        >
+          <t-space direction="vertical" style="width: 100%">
+            <t-space direction="vertical" size="large">
+              <t-form
+                ref="form"
+                :data="formData"
+                reset-type="initial"
+                colon
+                @reset="onReset"
+              >
+                <t-form-item label="学生状态" name="name">
+                  <t-input v-model="formData.name"></t-input>
+                </t-form-item>
+                <t-form-item label="应收金额" name="RoutingAddress">
+                  <t-input v-model="formData.RoutingAddress"></t-input>
+                </t-form-item>
+              </t-form>
+            </t-space>
+          </t-space>
+        </t-dialog>
+      </t-space>
+    </div>
   </div>
 </template>
 
 <script setup lang="jsx">
-import { ref, computed } from 'vue'
+import { ref, computed, reactive, watchEffect } from 'vue'
 import { Input, Select } from 'tdesign-vue-next'
 import { useRoute } from 'vue-router'
 import { useRouter } from 'vue-router'
@@ -27,17 +100,19 @@ import dayjs from 'dayjs'
 
 const route = useRoute()
 const router = useRouter()
-const initData = new Array(1).fill(null).map((_, i) => ({
+const initData = reactive(
-  key: String(i + 1),
+  new Array(1).fill(null).map((_, i) => ({
-  //学生姓名
+    key: String(i + 1),
-  firstName: route.query.name,
+    //学生姓名
-  //学生部门
+    firstName: route.query.name,
-  status: route.query.department,
+    //学生部门
-  //学生班级
+    status: route.query.department,
-  classname: route.query.grade,
+    //学生班级
-  letters: [],
+    classname: route.query.grade,
-  createTime: dayjs().format('YYYY-MM-DD')
+    letters: [],
-}))
+    createTime: dayjs().format('YYYY-MM-DD')
+  }))
+)
 //学生部门
 const STATUS_OPTIONS = [
   { label: '机电工程系', value: '机电工程系' },
@@ -54,6 +129,40 @@ const CLASS_NAME = [
   { label: '建筑1班', value: '建筑1班' },
   { label: '护理1班', value: '护理1班' }
 ]
+//学生收费标准
+let RATES_OPTIONS = reactive([
+  { label: '初级学生', value: '2000元' },
+  { label: '中级学生', value: '3000元' },
+  { label: '高级学生', value: '4000元' },
+  { label: '老年学生', value: '5000元' },
+  { label: '神级学生', value: '6000元' }
+])
+//学生收费标准表头
+const ratesColumns = [
+  { title: '学生收费标准', colKey: 'label' },
+  {
+    title: '学生应收费',
+    colKey: 'value'
+  },
+  {
+    title: '操作',
+    colKey: 'operation',
+    width: 200,
+    align: 'center'
+  }
+]
+// 弹窗表单数据
+const formData = ref({
+  name: '',
+  RoutingAddress: ''
+})
+// 表格分页
+const pagination = ref({
+  defaultPageSize: 5,
+  total: 5,
+  defaultCurrent: 1
+})
+const visible = ref(false)
 const align = ref('left')
 const data = ref([...initData])
 const editableCellState = cellParams => {
@@ -146,13 +255,9 @@ const columns = computed(() => [
         return {
           multiple: true,
           minCollapsedNum: 1,
-          options: [
+          options: RATES_OPTIONS.filter(t =>
-            { label: '初级学生', value: '2000元' },
+            t.show === undefined ? true : t.show()
-            { label: '中级学生', value: '3000元' },
+          )
-            { label: '高级学生', value: '4000元' },
-            { label: '老年学生', value: '5000元' },
-            { label: '神级学生', value: '6000元' }
-          ].filter(t => (t.show === undefined ? true : t.show()))
         }
       },
       onEdited: context => {
@@ -192,7 +297,55 @@ const handleEdit = row => {
     path: 'bill-bill',
     query: row
   })
-  console.log(row)
+}
+// 添加学生收费标准
+const onClick = context => {
+  console.log('点击了确认按钮，弹出弹窗', context)
+  visible.value = true
+}
+const onConfirmAnother = context => {
+  console.log('点击了确认按钮', context)
+  visible.value = false
+  const arr = {
+    label: formData.value.name,
+    value: formData.value.RoutingAddress
+  }
+  RATES_OPTIONS.push(arr)
+}
+const onCancel = context => {
+  console.log('点击了取消按钮', context)
+}
+const onCloseBtnClick = context => {
+  console.log('点击了关闭按钮', context)
+}
+// 编辑学生收费标准
+const Role = row => {
+  visible.value = true
+  formData.value = {
+    name: row.label,
+    RoutingAddress: row.value
+  }
+}
+// 删除学生收费标准
+const DeleteRole = row => {
+  console.log('删除学生收费标准', row)
+  RATES_OPTIONS.splice(RATES_OPTIONS.indexOf(row), 1)
+}
+// 监听分页变化事件
+const onPageChange = () => {
+  isLoading.value = true
+  const timerId = setTimeout(() => {
+    isLoading.value = false
+    clearInterval(timerId)
+  }, 300)
+}
+// 判断表格是否显示
+const judge = () => {
+  if (!route.query.name) {
+    return true
+  } else {
+    return false
+  }
 }
 </script>
 <style scoped lang="less"></style>

src/router/index.js

@@ -9,7 +9,22 @@ import Layout from "@/layout/index.vue";
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
-
+    {
+      path: "/",
+      redirect: "/home",
+      meta: { title: "首页", name: "home" },
+      component: Layout,
+      children: [
+        {
+          path: "/home",
+          name: "home",
+          component: () => import("@/pages/home/index.vue"),
+          meta: {
+            title: "首页",
+          },
+        },
+      ],
+    },
     {
       path: "/login",
       name: "login",
@@ -27,7 +42,7 @@ const router = createRouter({
     },
     ...FinanceBillManage,
     ...ReceivablesManagement
-  ],
+  ]
 });
 
 export default router;

src/router/modules/receivables-management.js

@@ -2,8 +2,7 @@ import Layout from "@/layout/index.vue";
 
 const ReceivablesManagement = [
   {
-    path: "/",
+    path: "/accounts",
-    redirect: "/accounts",
     meta: { title: "应收款管理", name: "accounts" },
     component: Layout,
     children: [
@@ -19,7 +18,7 @@ const ReceivablesManagement = [
         path: "/billCollected",
         name: "BillCollected",
         component: () => import("@/pages/receivables-management/billCollected.vue"),
-        meta: { title: "票据收款", hidden: false },
+        meta: { title: "票据收款", },
       },
       {
         path: "/bill-bill",