364 lines
11 KiB
TypeScript
364 lines
11 KiB
TypeScript
"use client"
|
|
|
|
import { getPersonProjectDashBoard } from "@/components/label/api/project"
|
|
import { Project } from "@/components/label/api/project/typing"
|
|
import {
|
|
SettingDataTable,
|
|
SettingListHeader,
|
|
} from "@/components/setting/PageSurface"
|
|
import { Button, Group, Modal, Stack, Text, TextInput } from "@mantine/core"
|
|
import { DatePickerInput, type DatesRangeValue } from "@mantine/dates"
|
|
import { notifications } from "@mantine/notifications"
|
|
|
|
import { IconRefresh, IconSearch } from "@tabler/icons-react"
|
|
import dayjs from "dayjs"
|
|
import "dayjs/locale/zh-cn"
|
|
import duration from "dayjs/plugin/duration"
|
|
import { DataTableColumn } from "mantine-datatable"
|
|
import { useCallback, useEffect, useMemo, useState } from "react"
|
|
import classes from "../page.module.css"
|
|
|
|
dayjs.extend(duration)
|
|
|
|
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 "-"
|
|
}
|
|
|
|
interface FilterFormRecord {
|
|
query_date: DatesRangeValue
|
|
}
|
|
|
|
function createInitialFilters(): FilterFormRecord {
|
|
return {
|
|
query_date: [
|
|
dayjs().subtract(1, "week").format("YYYY-MM-DD"),
|
|
dayjs().format("YYYY-MM-DD"),
|
|
],
|
|
}
|
|
}
|
|
|
|
const DEFAULT_RECORDS_PER_PAGE_OPTIONS = [10, 15, 20, 50]
|
|
|
|
export default function PersonalProjectTable() {
|
|
const [records, setRecords] = useState<
|
|
Project.PersonProjectDashboardResponseItem[]
|
|
>([])
|
|
const [loading, setLoading] = useState(false)
|
|
|
|
const [page, setPage] = useState(1)
|
|
const [pageSize, setPageSize] = useState(10)
|
|
const [recordsPerPageOptions, setRecordsPerPageOptions] = useState<number[]>(
|
|
() => [...DEFAULT_RECORDS_PER_PAGE_OPTIONS]
|
|
)
|
|
const [customPageSizeInput, setCustomPageSizeInput] = useState("")
|
|
const [customPageSizeModalOpened, setCustomPageSizeModalOpened] =
|
|
useState(false)
|
|
const [totalItems, setTotalItems] = useState(0)
|
|
|
|
const [filters, setFilters] = useState(() => createInitialFilters())
|
|
const [queryTrigger, setQueryTrigger] = useState(0)
|
|
const [form, setForm] = useState<FilterFormRecord>(createInitialFilters())
|
|
|
|
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 appliedParams = useMemo(() => {
|
|
const obj: Project.ReqPersonProjectDashBoard = {
|
|
start_date: dayjs().format("YYYY-MM-DD"),
|
|
end_date: dayjs().format("YYYY-MM-DD"),
|
|
}
|
|
if (form.query_date[0] && form.query_date[1]) {
|
|
obj.start_date = dayjs(form.query_date[0]).format("YYYY-MM-DD")
|
|
obj.end_date = dayjs(form.query_date[1]).format("YYYY-MM-DD")
|
|
}
|
|
|
|
return obj
|
|
}, [form.query_date])
|
|
|
|
const load = useCallback(async () => {
|
|
if (!queryTrigger) return
|
|
setLoading(true)
|
|
try {
|
|
const res = await getPersonProjectDashBoard(appliedParams)
|
|
setRecords(res ?? [])
|
|
setTotalItems(res?.length ?? 0)
|
|
setPage(1)
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}, [appliedParams, queryTrigger])
|
|
|
|
useEffect(() => {
|
|
load()
|
|
}, [load])
|
|
|
|
useEffect(() => {
|
|
queueMicrotask(() => {
|
|
setQueryTrigger((v) => v + 1)
|
|
})
|
|
}, [])
|
|
|
|
const handleSearch = () => {
|
|
setPage(1)
|
|
setForm({ ...filters })
|
|
setQueryTrigger((v) => v + 1)
|
|
}
|
|
|
|
const handleReset = useCallback(() => {
|
|
const next = createInitialFilters()
|
|
setFilters(next)
|
|
setForm(next)
|
|
setPage(1)
|
|
setQueryTrigger((v) => v + 1)
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
if (page > totalPages) setPage(totalPages)
|
|
}, [page, totalPages])
|
|
|
|
const openCustomPageSizeModal = useCallback(() => {
|
|
setCustomPageSizeModalOpened(true)
|
|
}, [])
|
|
|
|
const closeCustomPageSizeModal = useCallback(() => {
|
|
setCustomPageSizeModalOpened(false)
|
|
setCustomPageSizeInput("")
|
|
}, [])
|
|
|
|
const handleAddCustomPageSize = useCallback(() => {
|
|
const rawValue = customPageSizeInput.trim()
|
|
if (!rawValue) return
|
|
const size = Number(rawValue)
|
|
if (!Number.isInteger(size) || size <= 0) {
|
|
notifications.show({
|
|
color: "red",
|
|
title: "输入无效",
|
|
message: "请填写大于 0 的整数条数",
|
|
})
|
|
return
|
|
}
|
|
if (recordsPerPageOptions.includes(size)) {
|
|
notifications.show({
|
|
color: "blue",
|
|
title: "已存在",
|
|
message: `每页 ${size} 条已在可选项中`,
|
|
})
|
|
return
|
|
}
|
|
setRecordsPerPageOptions((prev) => [...prev, size].sort((a, b) => a - b))
|
|
closeCustomPageSizeModal()
|
|
notifications.show({
|
|
color: "green",
|
|
title: "添加成功",
|
|
message: `已新增每页 ${size} 条`,
|
|
})
|
|
}, [closeCustomPageSizeModal, customPageSizeInput, recordsPerPageOptions])
|
|
|
|
const handleCustomPageSizeEnter = useCallback(
|
|
(event: React.KeyboardEvent<HTMLInputElement>) => {
|
|
if (event.key !== "Enter") return
|
|
event.preventDefault()
|
|
handleAddCustomPageSize()
|
|
},
|
|
[handleAddCustomPageSize]
|
|
)
|
|
|
|
const originColumn = useMemo(() => {
|
|
let column: DataTableColumn<Project.PersonProjectDashboardResponseItem>[] =
|
|
[
|
|
{
|
|
accessor: "project_id",
|
|
title: "项目ID",
|
|
width: 150,
|
|
render: (record: Project.PersonProjectDashboardResponseItem) => {
|
|
return (
|
|
<Text
|
|
title={record.project_id.toString()}
|
|
className={classes.ellipsisText}>
|
|
{record.project_id}
|
|
</Text>
|
|
)
|
|
},
|
|
},
|
|
{
|
|
accessor: "project_name",
|
|
title: "项目名称",
|
|
width: 160,
|
|
render: (record: Project.PersonProjectDashboardResponseItem) => {
|
|
return (
|
|
<Text
|
|
title={record.project_name ?? "-"}
|
|
className={classes.ellipsisText}>
|
|
{record.project_name ?? "-"}
|
|
</Text>
|
|
)
|
|
},
|
|
},
|
|
{
|
|
accessor: "project_type",
|
|
title: "所属业务",
|
|
width: 160,
|
|
render: (record: Project.PersonProjectDashboardResponseItem) => {
|
|
return (
|
|
<Text
|
|
title={record.project_id.toString()}
|
|
className={classes.ellipsisText}>
|
|
{record.project_type ?? "-"}
|
|
</Text>
|
|
)
|
|
},
|
|
},
|
|
{
|
|
accessor: "work_time",
|
|
title: "任务耗时",
|
|
width: 140,
|
|
render: (record: Project.PersonProjectDashboardResponseItem) => {
|
|
return (
|
|
<Text className={classes.tableCellText}>
|
|
{formatDurationSeconds(record.work_time)}
|
|
</Text>
|
|
)
|
|
},
|
|
},
|
|
{
|
|
accessor: "project_label_type",
|
|
title: "标注类别",
|
|
width: 160,
|
|
render: (record: Project.PersonProjectDashboardResponseItem) => {
|
|
return (
|
|
<Text className={classes.tableCellText}>
|
|
{record.project_label_type ?? "-"}
|
|
</Text>
|
|
)
|
|
},
|
|
},
|
|
]
|
|
return column
|
|
}, [])
|
|
|
|
return (
|
|
<Stack className={classes.dashboardSection}>
|
|
<SettingListHeader title="参与项目" count={`共 ${totalItems} 条记录`} />
|
|
<div className={classes.dashboardFilterBar}>
|
|
<div className={classes.dashboardFilterField}>
|
|
<Text className={classes.dashboardFilterLabel}>统计周期</Text>
|
|
<div className={classes.dashboardFilterControl}>
|
|
<DatePickerInput
|
|
type="range"
|
|
placeholder="请选择时间范围，默认一周"
|
|
valueFormat="YYYY-MM-DD"
|
|
locale="zh-cn"
|
|
clearable
|
|
value={filters.query_date}
|
|
onChange={(value: DatesRangeValue) =>
|
|
setFilters((s) => ({
|
|
...s,
|
|
query_date: value,
|
|
}))
|
|
}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className={classes.dashboardFilterActions}>
|
|
<Button
|
|
variant="default"
|
|
leftSection={<IconRefresh size={16} />}
|
|
onClick={handleReset}>
|
|
重置
|
|
</Button>
|
|
<Button
|
|
color="#1874ff"
|
|
leftSection={<IconSearch size={16} />}
|
|
onClick={handleSearch}
|
|
disabled={loading}>
|
|
查询
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div className={classes.dashboardTableArea}>
|
|
<SettingDataTable<Project.PersonProjectDashboardResponseItem>
|
|
width="100%"
|
|
minHeight={0}
|
|
style={{ width: "100%", flex: 1 }}
|
|
pinFirstColumn
|
|
fetching={loading}
|
|
scrollAreaProps={{ type: "auto" }}
|
|
records={pageRecords}
|
|
onRecordsPerPageChange={setPageSize}
|
|
recordsPerPageOptions={recordsPerPageOptions}
|
|
columns={originColumn}
|
|
totalRecords={totalItems}
|
|
recordsPerPage={pageSize}
|
|
page={page}
|
|
onPageChange={setPage}
|
|
noRecordsText="暂无数据"
|
|
recordsPerPageLabel="每页条数"
|
|
paginationText={({ from, to, totalRecords }) =>
|
|
`显示 ${from}-${to} 条，共 ${totalRecords} 条记录`
|
|
}
|
|
renderPagination={({ Controls }) => (
|
|
<Group
|
|
justify="space-between"
|
|
align="center"
|
|
w="100%"
|
|
gap="sm"
|
|
wrap="wrap">
|
|
<Group gap="xs" align="center" wrap="wrap">
|
|
<Controls.Text />
|
|
<Controls.PageSizeSelector />
|
|
<Button
|
|
variant="default"
|
|
size="sm"
|
|
onClick={openCustomPageSizeModal}>
|
|
自定义每页条数
|
|
</Button>
|
|
</Group>
|
|
<Controls.Pagination />
|
|
</Group>
|
|
)}
|
|
/>
|
|
</div>
|
|
<Modal
|
|
opened={customPageSizeModalOpened}
|
|
onClose={closeCustomPageSizeModal}
|
|
title="添加每页条数"
|
|
centered>
|
|
<Stack gap="sm">
|
|
<TextInput
|
|
data-autofocus
|
|
label="每页条数"
|
|
placeholder="请输入大于 0 的整数，例如 99"
|
|
value={customPageSizeInput}
|
|
onChange={(event) =>
|
|
setCustomPageSizeInput(event.currentTarget.value)
|
|
}
|
|
onKeyDown={handleCustomPageSizeEnter}
|
|
/>
|
|
<Group justify="flex-end">
|
|
<Button variant="default" onClick={closeCustomPageSizeModal}>
|
|
取消
|
|
</Button>
|
|
<Button color="#1874ff" onClick={handleAddCustomPageSize}>
|
|
添加
|
|
</Button>
|
|
</Group>
|
|
</Stack>
|
|
</Modal>
|
|
</Stack>
|
|
)
|
|
}
|