✨ feat:完成应收管理的学生费用

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,
     }
   ]
 })

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",

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",

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>

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()
 })

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>

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 },
+      }
     ],
   },
 ];