✨ feat:完成了日常报表

mock/modules/sdy.js

@@ -27,6 +27,22 @@ const loans = Mock.mock({
     }
   ]
 })
+const daily = Mock.mock({
+  'list|10': [
+    {
+      'date': '@date("yyyy-MM-dd")',
+      'tuiti': '@integer(10000,50000)',
+      'incidentals': '@integer(1000,5000)',
+      'materials': '@integer(1000,5000)',
+      'major': '@integer(1000,5000)',
+      'grade': '@integer(1000,5000)',
+      'tuit': '@integer(10000,50000)',
+      'cost': '@integer(10000,50000)',
+      'tuition': '@integer(10000,50000)',
+    }
+  ]
+})
+
 export default [
   {
     url: '/get-sdy-managment-list',
@@ -106,4 +122,14 @@ export default [
       }
     }
   },
+  {
+    url: '/post-sdy-daily-list',
+    method: 'get',
+    response: () => {
+      return {
+        code: 200,
+        data: daily
+      }
+    }
+  }
 ]

src/api/receivables-management/management.js

@@ -15,3 +15,7 @@ export function APILoansList() {
 export function APILoansAdd(data) {
   return request.post('/post-sdy-loan-add', data)
 }
+// 借款管理
+export function APIDailyList() {
+  return request.get('/post-sdy-daily-list')
+}

src/pages/receivables-management/accountReceivable.vue

@@ -67,6 +67,7 @@
         :pagination="pagination"
         :show-header="true"
         cell-empty-content="-"
+        max-height="500"
         lazy-load
         @row-click="handleRowClick"
         @page-change="onPageChange"

src/pages/receivables-management/billCollected.vue

@@ -47,6 +47,7 @@
           :columns="ratesColumns"
           @page-change="onPageChange"
           :pagination="pagination"
+          max-height="500"
         >
           <template #operation="{ row }">
             <t-button theme="default" variant="text" @click="Role(row)"

src/pages/receivables-management/daily.vue

@@ -1,7 +1,113 @@
 <template>
-  <div>1</div>
+  <div class="back-color">
+    <div class="linebox">
+      <lineChart
+        :categories="categories"
+        :seriesData="seriesData"
+        :titleP="title"
+        :legendList="legendList"
+        :height="'100%'"
+        :width="'60rem'"
+      />
+    </div>
+    <div class="table">
+      <div>1</div>
+      <t-table
+        row-key="id"
+        :data="tableData"
+        :columns="columns"
+        :hover="true"
+        table-layout="auto"
+        :pagination="pagination"
+        :show-header="true"
+        cell-empty-content="-"
+        max-height="500"
+        lazy-load
+        @row-click="handleRowClick"
+        @page-change="onPageChange"
+        :loading="loading"
+      >
+      </t-table>
+    </div>
+  </div>
 </template>
-
+<script setup>
-<script setup></script>
+import { ref, onMounted } from 'vue'
-
+import { APIDailyList } from '@/api/receivables-management/management'
-<style lang="less" scoped></style>
+import lineChart from '@/components/echarts/line.vue'
+// 表格数据
+const tableData = ref([])
+// 表格头数据
+const columns = ref([
+  { colKey: 'date', title: '日期' },
+  { colKey: 'tuiti', title: '学费' },
+  { colKey: 'incidentals', title: '杂费' },
+  { colKey: 'materials', title: '书本资料费' },
+  { colKey: 'major', title: '校服费' },
+  { colKey: 'grade', title: '餐饮费' },
+  { colKey: 'tuit', title: '住宿费' },
+  { colKey: 'cost', title: '其他费用' },
+  { colKey: 'tuition', title: '总计' }
+])
+// 表格分页数据
+let pagination = {
+  defaultCurrent: 1,
+  defaultPageSize: 10,
+  total: 50
+}
+// 表格加载状态
+const loading = ref(false)
+// 表格点击事件
+const handleRowClick = e => {
+  console.log(e)
+}
+// 监听分页变化事件
+const onPageChange = (Newpage, PreviousPagePrev) => {
+  loading.value = true
+  const timerId = setTimeout(() => {
+    loading.value = false
+    clearInterval(timerId)
+  }, 300)
+}
+//折线图数据
+const title = ref('收费日报表')
+const categories = ref([
+  '学费',
+  '杂费',
+  '书本资料费',
+  '住宿费',
+  '其他费用',
+  '总计'
+])
+const legendList = ref(['今日费用'])
+const seriesData = ref([
+  {
+    name: '今日费用',
+    data: [10, 20, 15, 20, 25, 105],
+    type: 'line'
+  }
+])
+// 获取数据
+const DailyList = async () => {
+  const res = await APIDailyList()
+  tableData.value = res.data.list
+  pagination.total = res.data.list.length
+}
+onMounted(() => {
+  DailyList()
+})
+</script>
+<style scoped lang="less">
+.linebox {
+  width: 100%;
+  height: 100%;
+}
+.button {
+  margin-right: 1rem;
+  margin-left: 3rem;
+}
+.table {
+  margin-top: 1rem;
+  background-color: #fff;
+}
+</style>