88 lines
2.4 KiB
TypeScript
88 lines
2.4 KiB
TypeScript
"use client"
|
|
|
|
import {
|
|
SettingPage,
|
|
settingSurfaceClassNames,
|
|
settingTabsClassNames,
|
|
settingTabsStyles,
|
|
} from "@/components/setting/PageSurface"
|
|
import { Stack, Tabs, Text } from "@mantine/core"
|
|
import { useState } from "react"
|
|
import LabelWorkloadTable from "./LabelWorkloadTable"
|
|
import Review1WorkloadTable from "./Review1WorkloadTable"
|
|
import Review2WorkloadTable from "./Review2WorkloadTable"
|
|
|
|
type WorkloadTab = "label" | "review1" | "review2"
|
|
|
|
function createVisitedTabs() {
|
|
return {
|
|
label: true,
|
|
review1: false,
|
|
review2: false,
|
|
task: false,
|
|
}
|
|
}
|
|
|
|
export default function TeamWorkloadPage() {
|
|
const moduleTitle = "个人中心"
|
|
const [activeTab, setActiveTab] = useState<WorkloadTab>("label")
|
|
const [visitedTabs, setVisitedTabs] = useState(createVisitedTabs)
|
|
|
|
const handleTabChange = (value: string | null) => {
|
|
if (!value) return
|
|
|
|
const nextTab = value as WorkloadTab
|
|
setActiveTab(nextTab)
|
|
setVisitedTabs((current) =>
|
|
current[nextTab] ? current : { ...current, [nextTab]: true }
|
|
)
|
|
}
|
|
|
|
return (
|
|
<SettingPage>
|
|
<Stack className={settingSurfaceClassNames.pageIntro}>
|
|
<Text className={settingSurfaceClassNames.breadcrumb}>
|
|
{moduleTitle} /{" "}
|
|
<span className={settingSurfaceClassNames.breadcrumbCurrent}>
|
|
工时列表
|
|
</span>
|
|
</Text>
|
|
</Stack>
|
|
<Tabs
|
|
value={activeTab}
|
|
onChange={handleTabChange}
|
|
variant="pills"
|
|
color="#1874FF"
|
|
autoContrast
|
|
radius="sm"
|
|
classNames={settingTabsClassNames}
|
|
styles={{
|
|
root: {
|
|
flex: 1,
|
|
minHeight: 0,
|
|
minWidth: 0,
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
},
|
|
...settingTabsStyles,
|
|
}}>
|
|
<Tabs.List>
|
|
<Tabs.Tab value="label">标注工时</Tabs.Tab>
|
|
<Tabs.Tab value="review1">审核工时</Tabs.Tab>
|
|
<Tabs.Tab value="review2">复审工时</Tabs.Tab>
|
|
</Tabs.List>
|
|
|
|
<Tabs.Panel value="label">
|
|
{visitedTabs.label ? <LabelWorkloadTable /> : null}
|
|
</Tabs.Panel>
|
|
<Tabs.Panel value="review1">
|
|
{visitedTabs.review1 ? <Review1WorkloadTable /> : null}
|
|
</Tabs.Panel>
|
|
<Tabs.Panel value="review2">
|
|
{visitedTabs.review2 ? <Review2WorkloadTable /> : null}
|
|
</Tabs.Panel>
|
|
</Tabs>
|
|
</SettingPage>
|
|
)
|
|
}
|