fix(/person/report): add /person/report

2026-02-04 17:19:03 +08:00
parent 7176174b9d
commit 0690dcbbb2
12 changed files with 1604 additions and 64 deletions
--- a/app/management/person/dashboard/components/PersonalProjectTable.tsx
+++ b/app/management/person/dashboard/components/PersonalProjectTable.tsx
@@ -1,24 +1,18 @@
 "use client"

 import { getPersonProjectDashBoard } from "@/components/label/api/project"
-import {
-  Button,
-  Group,
-  Pagination,
-  ScrollArea,
-  Select,
-  Table,
-} from "@mantine/core"
+import { Project } from "@/components/label/api/project/typing"
+import { Button, Group, Text, UnstyledButton } from "@mantine/core"

 import { IconRefresh } from "@tabler/icons-react"
 import dayjs from "dayjs"
 import duration from "dayjs/plugin/duration"
+import { DataTable, DataTableColumn } from "mantine-datatable"
+import { useRouter } from "next/navigation"
 import { useCallback, useEffect, useMemo, useState } from "react"

 dayjs.extend(duration)

-const pageSizeOptions = [50, 100, 200]
-
 function formatDurationSeconds(seconds?: number | null) {
  const value = seconds ?? 0
  if (!value) return "-"
@@ -31,11 +25,15 @@ function formatDurationSeconds(seconds?: number | null) {
 }

 export default function PersonalProjectTable() {
-  const [records, setRecords] = useState<any[]>([])
+  const router = useRouter()
+  const [records, setRecords] = useState<
+    Project.PersonProjectDashboardResponseItem[]
+  >([])
  const [loading, setLoading] = useState(false)

  const [page, setPage] = useState(1)
  const [pageSize, setPageSize] = useState(50)
+  const [totalItems, setTotalItems] = useState(0)

  const totalPages = useMemo(() => {
    const totalItems = records.length
@@ -52,6 +50,7 @@ export default function PersonalProjectTable() {
    try {
      const res = await getPersonProjectDashBoard()
      setRecords(res ?? [])
+      setTotalItems(res?.length ?? 0)
      setPage(1)
    } finally {
      setLoading(false)
@@ -66,13 +65,96 @@ export default function PersonalProjectTable() {
    if (page > totalPages) setPage(totalPages)
  }, [page, totalPages])

+  const [currentRowId, setCurrentRowId] = useState<number>(0)
+
+  const originColumn = useMemo(() => {
+    let column: DataTableColumn<Project.PersonProjectDashboardResponseItem>[] =
+      [
+        {
+          accessor: "project_id",
+          title: "项目ID",
+          width: 150,
+          render: (record: Project.PersonProjectDashboardResponseItem) => {
+            return (
+              <UnstyledButton
+                px={6}
+                variant="transparent"
+                onClick={async () => {
+                  setCurrentRowId(record.project_id)
+                  router.push(`/project/info/detail?id=${record.project_id}`)
+                }}
+                title={record.project_id.toString()}
+                c={"brand"}
+                style={{
+                  fontSize: "14px",
+                  maxWidth: "100%",
+                  whiteSpace: "nowrap",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                }}>
+                {record.project_id}
+              </UnstyledButton>
+            )
+          },
+        },
+        {
+          accessor: "project_name",
+          title: "项目名称",
+          width: 160,
+          render: (record: Project.PersonProjectDashboardResponseItem) => {
+            return record.project_name ?? "-"
+          },
+        },
+        {
+          accessor: "project_type",
+          title: "所属业务",
+          width: 160,
+          render: (record: Project.PersonProjectDashboardResponseItem) => {
+            return (
+              <Text
+                title={record.project_id.toString()}
+                style={{
+                  fontSize: "14px",
+                  maxWidth: "100%",
+                  whiteSpace: "nowrap",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                }}>
+                {record.project_type ?? "-"}
+              </Text>
+            )
+          },
+        },
+        {
+          accessor: "work_time",
+          title: "任务耗时",
+          width: 140,
+          render: (record: Project.PersonProjectDashboardResponseItem) => {
+            return formatDurationSeconds(record.work_time)
+          },
+        },
+        {
+          accessor: "project_label_type",
+          title: "标注类别",
+          width: 160,
+          render: (record: Project.PersonProjectDashboardResponseItem) => {
+            return record.project_label_type ?? "-"
+          },
+        },
+      ]
+    return column
+  }, [router])
+
  return (
    <Group
      gap="sm"
      h="100%"
      align="stretch"
      style={{ flexDirection: "column" }}>
-      <Group justify="flex-end">
+      <Group justify="space-between" align="center">
+        <Text fw={700} fz="lg" style={{ marginBottom: 8 }}>
+          参与项目
+        </Text>
        <Button
          size={"xs"}
          fz={"sm"}
@@ -84,48 +166,38 @@ export default function PersonalProjectTable() {
          更新
        </Button>
      </Group>
-      <Group gap={0} align="stretch" style={{ flex: 1, minHeight: 0 }}>
-        <ScrollArea style={{ flex: 1 }}>
-          <Table withTableBorder withColumnBorders striped highlightOnHover>
-            <Table.Thead>
-              <Table.Tr>
-                <Table.Th style={{ width: 96 }}>项目ID</Table.Th>
-                <Table.Th style={{ width: 160 }}>项目名称</Table.Th>
-                <Table.Th style={{ width: 160 }}>所属业务</Table.Th>
-                <Table.Th style={{ width: 140 }}>任务耗时</Table.Th>
-                <Table.Th style={{ width: 160 }}>标注类别</Table.Th>
-              </Table.Tr>
-            </Table.Thead>
-            <Table.Tbody>
-              {pageRecords.map((record) => (
-                <Table.Tr key={record.project_id}>
-                  <Table.Td>{record.project_id ?? "-"}</Table.Td>
-                  <Table.Td>{record.project_name ?? "-"}</Table.Td>
-                  <Table.Td>{record.project_type ?? "-"}</Table.Td>
-                  <Table.Td>{formatDurationSeconds(record.work_time)}</Table.Td>
-                  <Table.Td>{record.project_label_type ?? "-"}</Table.Td>
-                </Table.Tr>
-              ))}
-            </Table.Tbody>
-          </Table>
-        </ScrollArea>
-      </Group>
-      <Group justify="space-between">
-        <Group gap="xs">
-          <Select
-            w={120}
-            value={String(pageSize)}
-            data={pageSizeOptions.map((v) => String(v))}
-            allowDeselect={false}
-            onChange={(value) => {
-              const next = Number(value)
-              if (!Number.isFinite(next)) return
-              setPageSize(next)
-              setPage(1)
-            }}
-          />
-        </Group>
-        <Pagination value={page} onChange={setPage} total={totalPages} />
+      <Group
+        gap={0}
+        align="stretch"
+        style={{ flex: 1, minHeight: 0, width: "100%" }}>
+        <DataTable<Project.PersonProjectDashboardResponseItem>
+          width="100%"
+          style={{ width: "100%" }}
+          styles={{
+            header: {
+              color: "var(--mantine-color-grey-text)",
+              backgroundColor: "var(--mantine-datatable-striped-color)",
+            },
+          }}
+          withTableBorder
+          withRowBorders
+          pinFirstColumn
+          rowBackgroundColor={(record) => {
+            if (record.project_id === currentRowId)
+              return "var(--mantine-datatable-highlight-on-hover-color-light, var(--mantine-datatable-highlight-on-hover-color))"
+          }}
+          scrollAreaProps={{ type: "auto" }}
+          records={pageRecords}
+          onRecordsPerPageChange={setPageSize}
+          recordsPerPageOptions={[10, 15, 20]}
+          columns={originColumn}
+          totalRecords={totalItems}
+          recordsPerPage={pageSize}
+          page={page}
+          onPageChange={setPage}
+          noRecordsText="暂无数据"
+          recordsPerPageLabel="当前页数"
+        />
      </Group>
    </Group>
  )
--- a/app/management/person/dashboard/components/PersonalTaskTable.tsx
+++ b/app/management/person/dashboard/components/PersonalTaskTable.tsx
@@ -167,7 +167,10 @@ export default function PersonalTaskTable() {
      h="100%"
      align="stretch"
      style={{ flexDirection: "column" }}>
-      <Group justify="flex-end">
+      <Group justify="space-between" align="center">
+        <Text fw={700} fz="lg" style={{ marginBottom: 8 }}>
+          我的任务
+        </Text>
        <Button
          size={"xs"}
          fz={"sm"}
--- a/app/management/person/dashboard/page.tsx
+++ b/app/management/person/dashboard/page.tsx
@@ -256,9 +256,6 @@ export default function PersonDashboardPage() {
            flexDirection: "column",
            minHeight: 0,
          }}>
-          <Text fw={700} fz="lg" style={{ marginBottom: 8 }}>
-            我的任务
-          </Text>
          <div style={{ flex: 1, minHeight: 0 }}>
            <PersonalTaskTable />
          </div>
@@ -274,9 +271,6 @@ export default function PersonDashboardPage() {
            flexDirection: "column",
            minHeight: 0,
          }}>
-          <Text fw={700} fz="lg" style={{ marginBottom: 8 }}>
-            参与项目
-          </Text>
          <div style={{ flex: 1, minHeight: 0 }}>
            <PersonalProjectTable />
          </div>