Browse Source

✨ feat: 增加乐跑次数明细统计功能

Pchen0 1 month ago
parent
commit
9483c1f12e
2 changed files with 56 additions and 2 deletions
  1. 29 0
      src/pages/admin/lepaoCountLedger/index.vue
  2. 27 2
      src/pages/lepao/countLedger/index.vue

+ 29 - 0
src/pages/admin/lepaoCountLedger/index.vue

@@ -67,6 +67,7 @@
         :data="data"
         :loading="loading"
         :bordered="false"
+        :summary="tableSummary"
         :pagination="{
           showPageSize: true,
           showJumper: true,
@@ -125,6 +126,19 @@
           <!-- <a-table-column title="业务单号" data-index="biz_id" :width="220" ellipsis tooltip /> -->
           <a-table-column title="备注" data-index="remark" :width="220" ellipsis tooltip />
         </template>
+        <template #summary-cell="{ column }">
+          <template v-if="column.title === '时间'">
+            <strong>合计</strong>
+          </template>
+          <template v-else-if="column.title === '变动值'">
+            <a-tag :color="Number(summary.total_delta) >= 0 ? 'green' : 'red'">
+              {{ formatDelta(summary.total_delta) }}
+            </a-tag>
+          </template>
+          <template v-else-if="column.title === '备注'">
+            <span class="summary-muted">共 {{ summary.total_records }} 条</span>
+          </template>
+        </template>
       </a-table>
     </a-card>
   </div>
@@ -138,6 +152,15 @@ import { getSemesterTimestamps } from '@/utils/util'
 
 const loading = ref(false)
 const data = ref([])
+const summary = ref({
+  total_delta: 0,
+  total_records: 0
+})
+const tableSummary = () => [{}]
+const formatDelta = (value) => {
+  const num = Number(value) || 0
+  return num >= 0 ? `+${num}` : `${num}`
+}
 const pagination = reactive({
   total: 0,
   current: 1,
@@ -190,6 +213,7 @@ const fetchData = async () => {
       })
     }
     data.value = res.data || []
+    summary.value = res.summary || { total_delta: 0, total_records: 0 }
     pagination.total = res.pagination?.total || 0
   } catch (error) {
     Notification.error({
@@ -243,4 +267,9 @@ onMounted(() => {
 .queryForm {
   margin-bottom: 16px;
 }
+
+.summary-muted {
+  color: var(--color-text-3);
+  font-size: 13px;
+}
 </style>

+ 27 - 2
src/pages/lepao/countLedger/index.vue

@@ -51,6 +51,7 @@
         :data="data"
         :loading="loading"
         :bordered="false"
+        :summary="tableSummary"
         :pagination="{
           showPageSize: true,
           showJumper: true,
@@ -81,6 +82,19 @@
           <!-- <a-table-column title="业务单号" data-index="biz_id" :width="220" ellipsis tooltip /> -->
           <a-table-column title="备注" data-index="remark" :width="220" ellipsis tooltip />
         </template>
+        <template #summary-cell="{ column }">
+          <template v-if="column.title === '时间'">
+            <strong>合计</strong>
+          </template>
+          <template v-else-if="column.title === '变动值'">
+            <a-tag :color="Number(summary.total_delta) >= 0 ? 'green' : 'red'">
+              {{ formatDelta(summary.total_delta) }}
+            </a-tag>
+          </template>
+          <template v-else-if="column.title === '备注'">
+            <span class="summary-muted">共 {{ summary.total_records }} 条</span>
+          </template>
+        </template>
       </a-table>
     </a-card>
   </div>
@@ -98,8 +112,14 @@ import { getNotice, getSemesterTimestamps } from '@/utils/util'
 const loading = ref(false)
 const data = ref([])
 const summary = ref({
-  total_delta: 0
+  total_delta: 0,
+  total_records: 0
 })
+const tableSummary = () => [{}]
+const formatDelta = (value) => {
+  const num = Number(value) || 0
+  return num >= 0 ? `+${num}` : `${num}`
+}
 const pagination = reactive({
   total: 0,
   current: 1,
@@ -145,7 +165,7 @@ const fetchData = async () => {
       })
     }
     data.value = res.data || []
-    summary.value = res.summary || { total_delta: 0 }
+    summary.value = res.summary || { total_delta: 0, total_records: 0 }
     pagination.total = res.pagination?.total || 0
   } catch (error) {
     Notification.error({
@@ -202,4 +222,9 @@ onMounted(() => {
 .queryForm {
   margin-bottom: 16px;
 }
+
+.summary-muted {
+  color: var(--color-text-3);
+  font-size: 13px;
+}
 </style>