feat(project): init
This commit is contained in:
@@ -0,0 +1,128 @@
|
||||
"use client"
|
||||
|
||||
import { getPersonProjectDashBoard } from "@/components/label/api/project"
|
||||
import {
|
||||
Button,
|
||||
Group,
|
||||
Pagination,
|
||||
ScrollArea,
|
||||
Select,
|
||||
Table,
|
||||
} from "@mantine/core"
|
||||
import { IconRefresh } from "@tabler/icons-react"
|
||||
import dayjs from "dayjs"
|
||||
import duration from "dayjs/plugin/duration"
|
||||
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 "-"
|
||||
const durationObj = dayjs.duration(value, "seconds")
|
||||
const hours = durationObj.hours()
|
||||
const minutes = durationObj.minutes()
|
||||
if (hours) return `${hours}小时${minutes}分钟`
|
||||
if (minutes) return `${minutes}分钟`
|
||||
return "-"
|
||||
}
|
||||
|
||||
export default function PersonalProjectTable() {
|
||||
const [records, setRecords] = useState<any[]>([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
|
||||
const [page, setPage] = useState(1)
|
||||
const [pageSize, setPageSize] = useState(50)
|
||||
|
||||
const totalPages = useMemo(() => {
|
||||
const totalItems = records.length
|
||||
return Math.max(1, Math.ceil(totalItems / pageSize))
|
||||
}, [pageSize, records.length])
|
||||
|
||||
const pageRecords = useMemo(() => {
|
||||
const start = (page - 1) * pageSize
|
||||
return records.slice(start, start + pageSize)
|
||||
}, [page, pageSize, records])
|
||||
|
||||
const load = useCallback(async () => {
|
||||
setLoading(true)
|
||||
try {
|
||||
const res = await getPersonProjectDashBoard()
|
||||
setRecords(res ?? [])
|
||||
setPage(1)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
load()
|
||||
}, [load])
|
||||
|
||||
useEffect(() => {
|
||||
if (page > totalPages) setPage(totalPages)
|
||||
}, [page, totalPages])
|
||||
|
||||
return (
|
||||
<Group
|
||||
gap="sm"
|
||||
h="100%"
|
||||
align="stretch"
|
||||
style={{ flexDirection: "column" }}>
|
||||
<Group justify="flex-end">
|
||||
<Button
|
||||
variant="filled"
|
||||
onClick={load}
|
||||
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: 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>
|
||||
</Group>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user