feat(project): init

app/management/person/dashboard/components/PersonalTaskTable.tsx

@@ -0,0 +1,181 @@
+"use client"
+
+import { getUserTaskList } from "@/components/label/api/task"
+import {
+  useBackUrlStore,
+  usePermissionStore,
+} from "@/components/label/store/auth"
+import { TaskStatusEnum } from "@/components/label/utils/constants"
+import {
+  Anchor,
+  Badge,
+  Button,
+  Group,
+  Pagination,
+  ScrollArea,
+  Select,
+  Table,
+  Text,
+} from "@mantine/core"
+import { IconRefresh } from "@tabler/icons-react"
+import { useRouter } from "next/navigation"
+import { useCallback, useEffect, useMemo, useState } from "react"
+
+const pageSizeOptions = [50, 100, 200]
+
+function getStatusColor(status?: number | null) {
+  switch (status) {
+    case 2:
+      return "blue"
+    case 4:
+      return "yellow"
+    case 6:
+      return "orange"
+    case 7:
+      return "green"
+    case 8:
+      return "red"
+    default:
+      return "gray"
+  }
+}
+
+export default function PersonalTaskTable() {
+  const router = useRouter()
+  const user_name = usePermissionStore((s) => s.user_name)
+  const user_password = usePermissionStore((s) => s.user_password)
+  const setBackProps = useBackUrlStore((s) => s.setBackProps)
+
+  const [page, setPage] = useState(1)
+  const [pageSize, setPageSize] = useState(50)
+  const [totalItems, setTotalItems] = useState(0)
+  const [records, setRecords] = useState<any[]>([])
+  const [loading, setLoading] = useState(false)
+
+  const totalPages = useMemo(() => {
+    return Math.max(1, Math.ceil(totalItems / pageSize))
+  }, [pageSize, totalItems])
+
+  const load = useCallback(async () => {
+    if (!user_name) return
+    setLoading(true)
+    try {
+      const res = await getUserTaskList({
+        page_number: page,
+        page_size: pageSize,
+      })
+      setRecords(res?.simple_task_list ?? [])
+      setTotalItems(res?.total_items ?? 0)
+    } finally {
+      setLoading(false)
+    }
+  }, [page, pageSize, user_name])
+
+  useEffect(() => {
+    load()
+  }, [load])
+
+  useEffect(() => {
+    if (page > totalPages) setPage(totalPages)
+  }, [page, totalPages])
+
+  const resetData = () => {
+    if (page === 1) load()
+    else setPage(1)
+  }
+
+  return (
+    <Group
+      gap="sm"
+      h="100%"
+      align="stretch"
+      style={{ flexDirection: "column" }}>
+      <Group justify="flex-end">
+        <Button
+          variant="filled"
+          onClick={resetData}
+          loading={loading}
+          leftSection={<IconRefresh size={16} />}>
+          更新
+        </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: 260 }}>项目名称</Table.Th>
+                <Table.Th style={{ width: 110 }}>任务ID</Table.Th>
+                <Table.Th style={{ width: 160 }}>状态</Table.Th>
+                <Table.Th style={{ width: 90 }}>标注员</Table.Th>
+                <Table.Th style={{ width: 90 }}>审核员</Table.Th>
+                <Table.Th style={{ width: 90 }}>复审员</Table.Th>
+              </Table.Tr>
+            </Table.Thead>
+            <Table.Tbody>
+              {records.map((record) => (
+                <Table.Tr key={record.id}>
+                  <Table.Td>
+                    <Text lineClamp={1}>{record.project_name ?? "-"}</Text>
+                  </Table.Td>
+                  <Table.Td>
+                    <Anchor
+                      onClick={async (e) => {
+                        e.preventDefault()
+                        const labelType = record.label_type
+                        if ([4, 5, 6].includes(labelType)) {
+                          setBackProps("/management/person/dashboard")
+                          router.push(
+                            `/label?project_id=${record.project_id}&task_id=${record.id}`
+                          )
+                          return
+                        }
+                        if (user_name && user_password) {
+                          setBackProps("/management/person/dashboard")
+                          router.push(
+                            `/label?project_id=${record.project_id}&task_id=${record.id}`
+                          )
+                        }
+                      }}
+                      style={{ cursor: "pointer" }}>
+                      {record.id ?? "-"}
+                    </Anchor>
+                  </Table.Td>
+                  <Table.Td>
+                    <Badge
+                      color={getStatusColor(record.label_status)}
+                      variant="light">
+                      {`${TaskStatusEnum.get(record.label_status) ?? "-"}${
+                        record.rejected ? "返工" : ""
+                      }`}
+                    </Badge>
+                  </Table.Td>
+                  <Table.Td>{record.label_username ?? "-"}</Table.Td>
+                  <Table.Td>{record.review1_username ?? "-"}</Table.Td>
+                  <Table.Td>{record.review2_username ?? "-"}</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>
+    </Group>
+  )
+}