feat(table): sum

app/person/report/components/DailyReportModal.tsx

@@ -21,8 +21,10 @@ import {
   Text,
   TextInput,
 } from "@mantine/core"
+import { DateInput } from "@mantine/dates"
 import { useForm } from "@mantine/form"
 import { notifications } from "@mantine/notifications"
+import "dayjs/locale/zh-cn"
 import { useEffect, useMemo } from "react"
 import {
   accountTypeOpts,
@@ -365,9 +367,9 @@ export default function DailyReportModal(props: {
           <Stack gap="md" className={classes.formPanel}>
             <SimpleGrid cols={{ base: 1, sm: 3 }} spacing="sm">
               <TextInput label="姓名" value={form.values.user_name} readOnly />
-              <TextInput
+              <DateInput
                 label="日期"
-                type="date"
+                locale="zh-cn"
                 withAsterisk
                 {...form.getInputProps("date")}
               />

app/person/report/page.tsx

@@ -15,7 +15,6 @@ import {
   SettingHeaderActions,
   SettingListHeader,
   SettingPage,
-  SettingPanel,
 } from "@/components/setting/PageSurface"
 import {
   ActionIcon,
@@ -43,7 +42,9 @@ import {
   IconTrash,
 } from "@tabler/icons-react"
 
+import { DateInput } from "@mantine/dates"
 import dayjs from "dayjs"
+import "dayjs/locale/zh-cn"
 import { DataTableColumn, DataTableSortStatus } from "mantine-datatable"
 import { useCallback, useEffect, useMemo, useState } from "react"
 import DailyReportModal from "./components/DailyReportModal"
@@ -154,7 +155,7 @@ export default function PersonReportPage() {
   const [totalItems, setTotalItems] = useState(0)
   const [loading, setLoading] = useState(false)
   const [records, setRecords] = useState<Daily.DailyWorkList[]>([])
-  const [summary, setSummary] = useState<Daily.Summary | null>(null)
+  //   const [summary, setSummary] = useState<Daily.Summary | null>(null)
 
   const [sortStatus, setSortStatus] = useState<DataTableSortStatus>({
     columnAccessor: "id",
@@ -218,11 +219,11 @@ export default function PersonReportPage() {
       const res = await getSelfDailyWorkList(queryParams)
       setRecords(res?.daily_work_list ?? [])
       setTotalItems(res?.total_items ?? 0)
-      setSummary(res?.total_summary ?? null)
+      //   setSummary(res?.total_summary ?? null)
     } catch (e) {
       setRecords([])
       setTotalItems(0)
-      setSummary(null)
+      //   setSummary(null)
       notifications.show({
         color: "red",
         title: "加载失败",
@@ -290,9 +291,21 @@ export default function PersonReportPage() {
     [handleAddCustomPageSize]
   )
 
+  const sum = (arr: number[]) =>
+    arr.reduce((accumulator, currentValue) => {
+      const value = Number(currentValue ?? 0)
+      return accumulator + (Number.isFinite(value) ? value : 0)
+    }, 0)
+
   const columns = useMemo(() => {
     const cols: DataTableColumn<Daily.DailyWorkList>[] = [
-      { accessor: "id", title: "ID", width: 80, sortable: true },
+      {
+        accessor: "id",
+        title: "ID",
+        width: 80,
+        // sortable: true,
+        footer: "总计",
+      },
       {
         accessor: "date",
         title: "日期",
@@ -315,7 +328,7 @@ export default function PersonReportPage() {
       },
       {
         accessor: "actual_type",
-        title: "实际类型",
+        title: "出勤类型",
         width: 120,
         render: (record) => record.actual_type ?? "-",
       },
@@ -368,6 +381,7 @@ export default function PersonReportPage() {
         title: "工时",
         width: 90,
         sortable: true,
+        footer: sum(records.map((r) => r.work_time ?? 0)),
       },
       { accessor: "rate", title: "额定倍率", width: 90 },
       {
@@ -375,24 +389,28 @@ export default function PersonReportPage() {
         title: "标准量",
         width: 90,
         sortable: true,
+        footer: sum(records.map((r) => r.standard_size ?? 0)),
       },
       {
         accessor: "completed_size",
         title: "完成量",
         width: 90,
         sortable: true,
+        footer: sum(records.map((r) => r.completed_size ?? 0)),
       },
       {
         accessor: "residual_size",
         title: "余量",
         width: 90,
         sortable: true,
+        footer: sum(records.map((r) => r.residual_size ?? 0)),
       },
       {
         accessor: "residual_work_time",
         title: "余量工时",
         width: 110,
         sortable: true,
+        footer: sum(records.map((r) => r.residual_work_time ?? 0)),
       },
       {
         accessor: "remarks",
@@ -466,17 +484,17 @@ export default function PersonReportPage() {
       },
     ]
     return cols
-  }, [load])
+  }, [load, records])
 
-  const summaryText = useMemo(() => {
+  //   const summaryText = useMemo(() => {
-    return {
+  //     return {
-      total_work_time: summary?.total_work_time ?? 0,
+  //       total_work_time: summary?.total_work_time ?? 0,
-      total_standard_size: summary?.total_standard_size ?? 0,
+  //       total_standard_size: summary?.total_standard_size ?? 0,
-      total_completed_size: summary?.total_completed_size ?? 0,
+  //       total_completed_size: summary?.total_completed_size ?? 0,
-      total_residual_size: summary?.total_residual_size ?? 0,
+  //       total_residual_size: summary?.total_residual_size ?? 0,
-      total_residual_work_time: summary?.total_residual_work_time ?? 0,
+  //       total_residual_work_time: summary?.total_residual_work_time ?? 0,
-    }
+  //     }
-  }, [summary])
+  //   }, [summary])
 
   const asyncGetSelfProjectList = useCallback(async () => {
     const res = await getSelfProjectList()
@@ -535,23 +553,26 @@ export default function PersonReportPage() {
           </Group>
           <Collapse in={searchExpanded} transitionDuration={150} animateOpacity>
             <SimpleGrid cols={{ base: 1, sm: 2, md: 3, lg: 4 }} spacing="sm">
-              <TextInput
+              <DateInput
                 label="开始日期"
-                type="date"
+                locale="zh-cn"
                 value={filters.date_start}
                 onChange={(e) =>
                   setFilters((s) => ({
                     ...s,
-                    date_start: e.target.value,
+                    date_start: dayjs(e).format("YYYY-MM-DD"),
                   }))
                 }
               />
-              <TextInput
+              <DateInput
                 label="结束日期"
-                type="date"
+                locale="zh-cn"
                 value={filters.date_end}
                 onChange={(e) => {
-                  setFilters((s) => ({ ...s, date_end: e.target.value }))
+                  setFilters((s) => ({
+                    ...s,
+                    date_end: dayjs(e).format("YYYY-MM-DD"),
+                  }))
                 }}
               />
               <MultiSelect
@@ -716,7 +737,7 @@ export default function PersonReportPage() {
               </Group>
             )}
           />
-          <SettingPanel radius="md" p="sm">
+          {/* <SettingPanel radius="md" p="sm">
             <Group justify="space-between" wrap="wrap">
               <Text size="sm" fw={700}>
                 当前页总计
@@ -733,7 +754,7 @@ export default function PersonReportPage() {
                 </Text>
               </Group>
             </Group>
-          </SettingPanel>
+          </SettingPanel> */}
         </Stack>
       </SettingContentPanel>