From 51cabf810709bc7e46c2b49c3283464a1a826665 Mon Sep 17 00:00:00 2001
From: sundongyu <2811054731@qq.com>
Date: Sat, 6 Apr 2024 19:00:30 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=E5=AE=8C=E6=88=90=E4=BA=86?=
 =?UTF-8?q?=E5=BA=94=E6=94=B6=E6=AC=BE=E7=AE=A1=E7=90=86=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 mock/modules/sdy.js                           |  20 +-
 src/api/receivables-management/management.js  |   5 +
 src/layout/components/LayoutContent.vue       |   2 +-
 .../account-receivable.vue                    | 196 +++++++++++++++---
 src/style/index.css                           |   2 +-
 src/style/index.less                          |   2 +-
 src/utils/request.js                          |   1 -
 7 files changed, 193 insertions(+), 35 deletions(-)
 create mode 100644 src/api/receivables-management/management.js

diff --git a/mock/modules/sdy.js b/mock/modules/sdy.js
index e785967..3319882 100644
--- a/mock/modules/sdy.js
+++ b/mock/modules/sdy.js
@@ -1,10 +1,26 @@
 import Mock from "mockjs"
 const data = Mock.mock({
-  "items|10": [
+  "list|200": [
     {
       "id|+1": 1,
       "name": "@cname",
+      "studentnumber": "@integer(1000000000,9999999999)",
+      "department": `@pick(['机电工程系', '护理分院','建筑系','材料科学与工程系','环境科学与工程系'])`,
+      "major": `@pick(['机械制造与自动化', '材料科学与工程', '环境科学与工程', '建筑工程', '护理学'])`,
+      "grade": `@pick(['机制1班', '材料1班', '环境1班', '建筑1班','护理1班'])`,
+      "tuition": `@pick(['已付学费', '未缴学费'])`,
     }
   ]
 })
-export default []
\ No newline at end of file
+export default [
+  {
+    url: '/get-sdy-managment-list',
+    method: 'get',
+    response: () => {
+      return {
+        code: 200,
+        data: data
+      }
+    }
+  }
+]
\ No newline at end of file
diff --git a/src/api/receivables-management/management.js b/src/api/receivables-management/management.js
new file mode 100644
index 0000000..e1e92c0
--- /dev/null
+++ b/src/api/receivables-management/management.js
@@ -0,0 +1,5 @@
+import request from '@/utils/request'
+
+export function APIReceivablesList() {
+  return request.get('/get-sdy-managment-list')
+}
\ No newline at end of file
diff --git a/src/layout/components/LayoutContent.vue b/src/layout/components/LayoutContent.vue
index 0259a35..cf001e2 100644
--- a/src/layout/components/LayoutContent.vue
+++ b/src/layout/components/LayoutContent.vue
@@ -4,7 +4,7 @@
       <t-content>
         <RouterView />
       </t-content>
-      <t-footer>Footer</t-footer>
+      <t-footer style="height: 2px">Footer</t-footer>
     </t-layout>
   </div>
 </template>
diff --git a/src/pages/receivables-management/account-receivable.vue b/src/pages/receivables-management/account-receivable.vue
index 5c8771d..aff3c1e 100644
--- a/src/pages/receivables-management/account-receivable.vue
+++ b/src/pages/receivables-management/account-receivable.vue
@@ -11,41 +11,93 @@
       >
         <t-row>
           <t-col :span="3">
-            <t-form-item label="部门" name="department">
-              <t-tree-select :data="DEPARTMENT" clearable />
+            <t-form-item label="姓名" name="name">
+              <t-input v-model="formData.name"></t-input>
+            </t-form-item>
+          </t-col>
+          <t-col :span="3">
+            <t-form-item label="学号" name="studentnumber">
+              <t-input v-model="formData.studentnumber"></t-input>
+            </t-form-item>
+          </t-col>
+          <t-col :span="3">
+            <t-form-item label="部门" name="studentnumber">
+              <t-tree-select
+                v-model="formData.department"
+                :data="DEPARTMENT"
+                clearable
+              />
             </t-form-item>
           </t-col>
           <t-col :span="3">
             <t-form-item label="专业" name="major">
-              <t-tree-select :data="MAJOR" clearable />
-            </t-form-item>
-          </t-col>
-          <t-col :span="3">
-            <t-form-item label="班级" name="grade">
-              <t-tree-select :data="GRADE" clearable />
-            </t-form-item>
-          </t-col>
-          <t-col :span="3">
-            <t-form-item label="其他条件" name="condition">
-              <t-tree-select :data="CONDITION" clearable />
+              <t-tree-select v-model="formData.major" :data="MAJOR" clearable />
             </t-form-item>
           </t-col>
         </t-row>
-        <t-row>
-          <t-col :push="10" :span="2" style="margin-top: 1rem">
-            <t-button class="button">搜索</t-button>
-            <t-button>重置</t-button>
+        <t-row style="margin-top: 0.5rem">
+          <t-col :span="3">
+            <t-form-item label="班级" name="grade">
+              <t-tree-select v-model="formData.grade" :data="GRADE" clearable />
+            </t-form-item>
+          </t-col>
+          <t-col :span="3">
+            <t-form-item label="其他条件" name="tuition">
+              <t-tree-select
+                v-model="formData.tuition"
+                :data="CONDITION"
+                clearable
+              />
+            </t-form-item>
+          </t-col>
+          <t-col :push="4" :span="2" style="margin-top: 0.2rem">
+            <t-button type="submit" class="button">搜索</t-button>
+            <t-button type="reset">重置</t-button>
           </t-col>
         </t-row>
       </t-form>
     </div>
+    <div class="table">
+      <t-table
+        row-key="id"
+        :data="tableData"
+        :columns="columns"
+        :hover="true"
+        table-layout="auto"
+        :pagination="pagination"
+        :show-header="true"
+        cell-empty-content="-"
+        lazy-load
+        @row-click="handleRowClick"
+        :loading="loading"
+      >
+        <template #tuition="{ row }">
+          <t-tag v-if="row.tuition === '未缴学费'" theme="danger">{{
+            row.tuition
+          }}</t-tag>
+          <t-tag v-else theme="success">{{ row.tuition }}</t-tag>
+        </template>
+      </t-table>
+    </div>
   </div>
 </template>
-
 <script setup>
-import { ref, reactive } from 'vue'
+import { ref, reactive, onMounted } from 'vue'
+import {
+  ErrorCircleFilledIcon,
+  CheckCircleFilledIcon,
+  CloseCircleFilledIcon
+} from 'tdesign-icons-vue-next'
+import { APIReceivablesList } from '@/api/receivables-management/management'
 //表单数据
-const formData = reactive({})
+const formData = reactive({
+  name: '',
+  studentnumber: '',
+  department: '',
+  major: '',
+  grade: '',
+  tuition: ''
+})
 //部门数据
 const DEPARTMENT = [
   {
@@ -53,48 +105,134 @@ const DEPARTMENT = [
     value: '机电工程系'
   },
   {
-    label: '护理系',
-    value: '护理系'
+    label: '护理分院',
+    value: '护理分院'
   },
   {
     label: '建筑系',
     value: '建筑系'
+  },
+  {
+    label: '材料科学与工程系',
+    value: '材料科学与工程系'
+  },
+  {
+    label: '环境科学与工程系',
+    value: '环境科学与工程系'
   }
 ]
 //专业数据
 const MAJOR = [
   {
-    label: '电子信息工程',
-    value: '电子信息工程'
+    label: '机械制造与自动化',
+    value: '机械制造与自动化'
+  },
+  {
+    label: '材料科学与工程',
+    value: '材料科学与工程'
+  },
+  {
+    label: '环境科学与工程',
+    value: '环境科学与工程'
+  },
+  {
+    label: '建筑工程',
+    value: '建筑工程'
+  },
+  {
+    label: '护理学',
+    value: '护理学'
   }
 ]
 //班级数据
 const GRADE = [
   {
-    label: '2019',
-    value: '2019'
+    label: '机制1班',
+    value: '机制1班'
+  },
+  {
+    label: '材料1班',
+    value: '材料1班'
+  },
+  {
+    label: '环境1班',
+    value: '环境1班'
+  },
+  {
+    label: '建筑1班',
+    value: '建筑1班'
+  },
+  {
+    label: '护理1班',
+    value: '护理1班'
   }
 ]
 //其他条件数据
 const CONDITION = [
   {
-    label: '已缴费',
-    value: '已缴费'
+    label: '已付学费',
+    value: '已付学费'
+  },
+  {
+    label: '未缴学费',
+    value: '未缴学费'
   }
 ]
 //表单提交
 const onSubmit = () => {
   console.log(formData)
 }
+//表单重置
+const onReset = () => {
+  console.log('重置成功')
+}
+// 表格数据
+const tableData = ref([])
+// 表格加载状态
+const loading = ref(false)
+// 表格点击事件
+const handleRowClick = e => {
+  console.log(e)
+}
+// 表格头数据
+const columns = ref([
+  { colKey: 'serial-number' },
+  { colKey: 'name', title: '姓名' },
+  { colKey: 'studentnumber', title: '学号' },
+  { colKey: 'department', title: '部门' },
+  { colKey: 'major', title: '专业' },
+  { colKey: 'grade', title: '班级' },
+  { colKey: 'tuition', title: '是否缴费' }
+])
+
+// 表格分页数据
+const pagination = {
+  defaultCurrent: 1,
+  defaultPageSize: 5,
+  total: 50
+}
+//获取表格数据
+const ReceivablesList = async () => {
+  const res = await APIReceivablesList()
+  tableData.value = res.data.list
+  console.log(res.data.list)
+  console.log(tableData)
+}
+onMounted(() => {
+  ReceivablesList()
+})
 </script>
 <style scoped lang="less">
 .form {
   background-color: #fff;
-  height: 3rem;
+  height: 6rem;
   padding-top: 0.5rem;
 }
 .button {
   margin-right: 1rem;
   margin-left: 3rem;
 }
+.table {
+  margin-top: 1rem;
+}
 </style>
diff --git a/src/style/index.css b/src/style/index.css
index cc0f0ff..e2a5cde 100644
--- a/src/style/index.css
+++ b/src/style/index.css
@@ -186,7 +186,7 @@ pre {
 .back-color {
   background-color: #f5f7fb;
   padding: 16px 24px;
-  height: calc(100vh - 128px);
+  height: calc(94vh - 64px);
   overflow-y: auto;
   overflow-x: hidden;
 }
diff --git a/src/style/index.less b/src/style/index.less
index 42f1256..ab04493 100644
--- a/src/style/index.less
+++ b/src/style/index.less
@@ -26,7 +26,7 @@
 .back-color {
     background-color: #f5f7fb;
     padding: 16px 24px;
-    height: calc(95vh - 64px);
+    height: calc(94vh - 64px);
     overflow-y: auto;
     overflow-x: hidden;
 }
diff --git a/src/utils/request.js b/src/utils/request.js
index 120ad9c..d1a4d35 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -1,7 +1,6 @@
 // 进行axios二次封装：使用请求与响应拦截器
 import axios from "axios";
 import { MessagePlugin } from "tdesign-vue-next";
-import { useRouter } from "vue-router";
 
 // import { refreshToken } from '@/apis/token'
 // import { useTokenStore } from '@/stores/index'