1116 lines
33 KiB
TypeScript
1116 lines
33 KiB
TypeScript
"use client"
|
||
|
||
import {
|
||
getProjectList,
|
||
getProjectTypeList,
|
||
projectAccept,
|
||
projectCollect,
|
||
projectDeliver,
|
||
projectEditById,
|
||
projectPreLabelReview,
|
||
} from "@/components/label/api/project"
|
||
import { Project } from "@/components/label/api/project/typing"
|
||
import {
|
||
initAllParams,
|
||
initCollectParams,
|
||
initDynamicParams,
|
||
useAllUserStore,
|
||
usePermissionStore,
|
||
useProjectStore,
|
||
} from "@/components/label/store/auth"
|
||
import {
|
||
projectLabelTypeOpts,
|
||
projectStatusOpts,
|
||
STATUS_CODE,
|
||
} from "@/components/label/utils/constants"
|
||
import {
|
||
ActionIcon,
|
||
Badge,
|
||
Button,
|
||
Collapse,
|
||
CopyButton,
|
||
Divider,
|
||
Flex,
|
||
Group,
|
||
Loader,
|
||
Modal,
|
||
Pagination,
|
||
Paper,
|
||
Select,
|
||
SimpleGrid,
|
||
Stack,
|
||
Text,
|
||
Textarea,
|
||
TextInput,
|
||
Tooltip,
|
||
UnstyledButton,
|
||
} from "@mantine/core"
|
||
import { useForm } from "@mantine/form"
|
||
import { notifications } from "@mantine/notifications"
|
||
import {
|
||
IconCalendar,
|
||
IconCheck,
|
||
IconChevronDown,
|
||
IconChevronUp,
|
||
IconCopy,
|
||
IconEdit,
|
||
IconFileUpload,
|
||
IconInfoCircle,
|
||
IconRefresh,
|
||
IconSearch,
|
||
IconStar,
|
||
IconStarFilled,
|
||
} from "@tabler/icons-react"
|
||
import dayjs from "dayjs"
|
||
import { User2 } from "lucide-react"
|
||
import { useRouter } from "next/navigation"
|
||
import {
|
||
useCallback,
|
||
useEffect,
|
||
useMemo,
|
||
useState,
|
||
type ReactNode,
|
||
} from "react"
|
||
import { CardCoverIcon } from "./components/ProjectIcon"
|
||
|
||
function statusBadgeColor(status?: number | null) {
|
||
if (!status) return "gray"
|
||
if ([191, 199, 700].includes(status)) return "red"
|
||
if ([580].includes(status)) return "yellow"
|
||
if ([600].includes(status)) return "green"
|
||
if ([201, 202, 203].includes(status)) return "cyan"
|
||
return "blue"
|
||
}
|
||
|
||
function parseStatusValue(value?: string) {
|
||
if (!value) return undefined
|
||
if (value.includes(",")) {
|
||
return value
|
||
.split(",")
|
||
.map((v) => Number(v))
|
||
.filter((n) => Number.isFinite(n))
|
||
}
|
||
const n = Number(value)
|
||
return Number.isFinite(n) ? [n] : undefined
|
||
}
|
||
|
||
function formatPercent(value?: number | null) {
|
||
if (value === 0) return "0.00%"
|
||
if (!value) return "-"
|
||
return `${(value * 100).toFixed(2)}%`
|
||
}
|
||
|
||
function getProcessText(record: any) {
|
||
const rateSpeed = record?.rate_speed
|
||
if (!rateSpeed || typeof rateSpeed !== "object") return "-"
|
||
const map = new Map([
|
||
["标注", "label_speed"],
|
||
["审核", "review1_speed"],
|
||
["复审", "review2_speed"],
|
||
])
|
||
const arr = ["标注", "审核", "复审"]
|
||
const parts = arr.map((process) => {
|
||
const key = map.get(process)
|
||
const staticKey = key ? `static_${key}` : ""
|
||
const dynamicKey = key ? `dynamic_${key}` : ""
|
||
const staticValue =
|
||
staticKey && (rateSpeed[staticKey] || rateSpeed[staticKey] === 0)
|
||
? rateSpeed[staticKey]
|
||
: "-"
|
||
const dynamicValue =
|
||
dynamicKey && (rateSpeed[dynamicKey] || rateSpeed[dynamicKey] === 0)
|
||
? rateSpeed[dynamicKey]
|
||
: "-"
|
||
return `${process}(${staticValue}/${dynamicValue})`
|
||
})
|
||
return parts.join("，")
|
||
}
|
||
|
||
export default function ProjectInfoPage({
|
||
type,
|
||
}: {
|
||
type: "dynamic" | "collect" | ""
|
||
}) {
|
||
const router = useRouter()
|
||
|
||
const { userOpts } = useAllUserStore()
|
||
const userName = usePermissionStore((s) => s.user_name)
|
||
const {
|
||
allParams,
|
||
allTotal,
|
||
collectParams,
|
||
collectTotal,
|
||
dynamicParams,
|
||
dynamicTotal,
|
||
resetParams,
|
||
setSearchParams,
|
||
setTotal,
|
||
}: any = useProjectStore()
|
||
|
||
const storeParams = useMemo(() => {
|
||
return type === "collect"
|
||
? collectParams
|
||
: type === "dynamic"
|
||
? dynamicParams
|
||
: allParams
|
||
}, [allParams, collectParams, dynamicParams, type])
|
||
|
||
const total = useMemo(() => {
|
||
return type === "collect"
|
||
? collectTotal
|
||
: type === "dynamic"
|
||
? dynamicTotal
|
||
: allTotal
|
||
}, [allTotal, collectTotal, dynamicTotal, type])
|
||
|
||
const [typeOpts, setTypeOpts] = useState<
|
||
Array<{ label: string; value: string }>
|
||
>([])
|
||
const [loading, setLoading] = useState(false)
|
||
const [records, setRecords] = useState<Project.DataProps[]>([])
|
||
|
||
const [searchExpanded, setSearchExpanded] = useState(false)
|
||
const [filters, setFilters] = useState(() => {
|
||
return {
|
||
project_name: "",
|
||
project_type: "",
|
||
status: "",
|
||
owner: "",
|
||
label_type: "",
|
||
admin_user: "",
|
||
start_date: dayjs().subtract(6, "day").format("YYYY-MM-DD"),
|
||
end_date: dayjs().format("YYYY-MM-DD"),
|
||
}
|
||
})
|
||
|
||
const [appliedFilters, setAppliedFilters] = useState(filters)
|
||
const [queryTrigger, setQueryTrigger] = useState(0)
|
||
|
||
useEffect(() => {
|
||
const initFormOpts = async () => {
|
||
const res = await getProjectTypeList()
|
||
setTypeOpts((res ?? []).map((name) => ({ label: name, value: name })))
|
||
}
|
||
initFormOpts()
|
||
}, [])
|
||
|
||
const queryParams = useMemo(() => {
|
||
const base =
|
||
type === "collect"
|
||
? { ...initCollectParams }
|
||
: type === "dynamic"
|
||
? { ...initDynamicParams }
|
||
: { ...initAllParams }
|
||
|
||
const params: Project.ListRequest & any = {
|
||
...base,
|
||
...storeParams,
|
||
page_number: storeParams.page_number ?? 1,
|
||
page_size: storeParams.page_size ?? 15,
|
||
project_name: appliedFilters.project_name || undefined,
|
||
project_type: appliedFilters.project_type || undefined,
|
||
owner: appliedFilters.owner || undefined,
|
||
admin_user: appliedFilters.admin_user || undefined,
|
||
start_date: appliedFilters.start_date || undefined,
|
||
end_date: appliedFilters.end_date || undefined,
|
||
label_type: appliedFilters.label_type
|
||
? Number(appliedFilters.label_type)
|
||
: undefined,
|
||
status: parseStatusValue(appliedFilters.status),
|
||
}
|
||
|
||
return params
|
||
}, [appliedFilters, storeParams, type])
|
||
|
||
const load = useCallback(async () => {
|
||
if (!queryTrigger) return
|
||
setLoading(true)
|
||
try {
|
||
const res = await getProjectList(queryParams)
|
||
setRecords(res?.project_list ?? [])
|
||
setTotal(res?.total_items ?? 0, type)
|
||
} catch (e) {
|
||
setRecords([])
|
||
setTotal(0, type)
|
||
notifications.show({
|
||
color: "red",
|
||
title: "加载失败",
|
||
message: e instanceof Error ? e.message : "请求失败",
|
||
})
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}, [queryParams, queryTrigger, setTotal, type])
|
||
|
||
useEffect(() => {
|
||
load()
|
||
}, [load])
|
||
|
||
useEffect(() => {
|
||
queueMicrotask(() => {
|
||
setQueryTrigger((v) => v + 1)
|
||
})
|
||
}, [])
|
||
|
||
const currentPage = storeParams.page_number ?? 1
|
||
const pageSize = storeParams.page_size ?? 15
|
||
|
||
const [infoModalRecord, setInfoModalRecord] =
|
||
useState<Project.DataProps | null>(null)
|
||
const [editModalRecord, setEditModalRecord] =
|
||
useState<Project.DataProps | null>(null)
|
||
const [confirmAction, setConfirmAction] = useState<{
|
||
record: Project.DataProps | null
|
||
action: "试标完成" | "试标通过" | "提交验收" | "验收通过" | null
|
||
}>({ record: null, action: null })
|
||
|
||
const editForm = useForm({
|
||
initialValues: {
|
||
project_name: "",
|
||
owner: "",
|
||
remarks: "",
|
||
},
|
||
})
|
||
|
||
const confirmActionTitle = useMemo(() => {
|
||
return confirmAction.action ?? ""
|
||
}, [confirmAction.action])
|
||
|
||
const runConfirmAction = useCallback(async () => {
|
||
const record = confirmAction.record
|
||
const action = confirmAction.action
|
||
if (!record || !action) return
|
||
try {
|
||
if (action === "试标完成") {
|
||
await projectPreLabelReview({
|
||
id: record.id,
|
||
review_user: userName ?? "",
|
||
action: 1,
|
||
})
|
||
} else if (action === "试标通过") {
|
||
await projectPreLabelReview({
|
||
id: record.id,
|
||
review_user: userName ?? "",
|
||
action: 2,
|
||
})
|
||
} else if (action === "提交验收") {
|
||
await projectDeliver({ project_id: record.id })
|
||
} else if (action === "验收通过") {
|
||
await projectAccept({ project_id: record.id, pass: true })
|
||
}
|
||
|
||
notifications.show({
|
||
color: "green",
|
||
title: "操作成功",
|
||
message: `${action} 已提交`,
|
||
})
|
||
setConfirmAction({ record: null, action: null })
|
||
setQueryTrigger((v) => v + 1)
|
||
} catch (e) {
|
||
notifications.show({
|
||
color: "red",
|
||
title: "操作失败",
|
||
message: e instanceof Error ? e.message : "请求失败",
|
||
})
|
||
}
|
||
}, [confirmAction.action, confirmAction.record, userName])
|
||
|
||
const ProjectCard = (record: Project.DataProps) => {
|
||
const status = record.status
|
||
const canEdit = status < 600
|
||
const actionKey =
|
||
status === 201
|
||
? "试标完成"
|
||
: status === 202
|
||
? "试标通过"
|
||
: status === 500
|
||
? "提交验收"
|
||
: status === 580
|
||
? "验收通过"
|
||
: null
|
||
const canDoAction = !!actionKey
|
||
|
||
return (
|
||
<Paper
|
||
key={record.id}
|
||
withBorder
|
||
radius="md"
|
||
shadow="sm"
|
||
style={{
|
||
height: 160,
|
||
padding: 14,
|
||
paddingBottom: 0,
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
justifyContent: "space-between",
|
||
}}>
|
||
<Group justify="space-between" wrap="nowrap" align="flex-start">
|
||
<Flex flex={1}>
|
||
<CardCoverIcon width={68} height={68} />
|
||
<Stack gap={0}>
|
||
<Flex align="center">
|
||
<UnstyledButton
|
||
variant="subtle"
|
||
size="sm"
|
||
style={{
|
||
paddingLeft: 6,
|
||
paddingRight: 6,
|
||
justifyContent: "flex-start",
|
||
width: "100%",
|
||
}}
|
||
onClick={() => {
|
||
const url = type
|
||
? `/management/project/detail?id=${record.id}&type=${type}`
|
||
: `/management/project/detail?id=${record.id}`
|
||
router.push(url)
|
||
}}>
|
||
<Text
|
||
fw={700}
|
||
c={"brand"}
|
||
style={{
|
||
maxWidth: "100%",
|
||
overflow: "hidden",
|
||
textOverflow: "ellipsis",
|
||
whiteSpace: "nowrap",
|
||
}}>
|
||
{record.name}
|
||
</Text>
|
||
</UnstyledButton>
|
||
<Badge
|
||
color={statusBadgeColor(record.status)}
|
||
style={{
|
||
width: "-webkit-fill-available",
|
||
}}>
|
||
{STATUS_CODE.get(record.status) ?? record.status}
|
||
</Badge>
|
||
</Flex>
|
||
<Flex align="center" px={6} gap={6}>
|
||
<User2
|
||
color="var(--mantine-color-dimmed)"
|
||
width={14}
|
||
height={14}
|
||
/>
|
||
<Text size="sm">{record.owner ?? "-"}</Text>
|
||
</Flex>
|
||
<Flex align="center" px={6} gap={6}>
|
||
<IconCalendar
|
||
color="var(--mantine-color-dimmed)"
|
||
width={14}
|
||
height={14}
|
||
/>
|
||
<Text size="sm">
|
||
{record.create_at ? record.create_at.split(" ")[0] : "-"}
|
||
</Text>
|
||
</Flex>
|
||
</Stack>
|
||
</Flex>
|
||
<ActionIcon
|
||
variant="subtle"
|
||
color={record.is_collect ? "yellow" : "gray"}
|
||
onClick={async () => {
|
||
try {
|
||
await projectCollect({
|
||
project_id: record.id,
|
||
is_collect: !record.is_collect,
|
||
})
|
||
notifications.show({
|
||
color: "green",
|
||
title: "操作成功",
|
||
message: record.is_collect ? "已取消收藏" : "已收藏",
|
||
})
|
||
setQueryTrigger((v) => v + 1)
|
||
} catch (e) {
|
||
notifications.show({
|
||
color: "red",
|
||
title: "操作失败",
|
||
message: e instanceof Error ? e.message : "请求失败",
|
||
})
|
||
}
|
||
}}>
|
||
{record.is_collect ? (
|
||
<IconStarFilled size={16} />
|
||
) : (
|
||
<IconStar size={16} />
|
||
)}
|
||
</ActionIcon>
|
||
</Group>
|
||
|
||
<Stack gap={0} style={{ flex: 1, minHeight: 0, marginTop: 8 }}>
|
||
<Text
|
||
size="sm"
|
||
c="dimmed"
|
||
style={{
|
||
overflow: "hidden",
|
||
display: "-webkit-box",
|
||
WebkitBoxOrient: "vertical",
|
||
WebkitLineClamp: 2,
|
||
}}>
|
||
备注：{record.remarks ? record.remarks : "暂无备注"}
|
||
</Text>
|
||
|
||
<Divider
|
||
style={{
|
||
marginTop: 4,
|
||
marginBottom: 4,
|
||
borderColor: "var(--mantine-color-brand-text)",
|
||
opacity: 0.3,
|
||
}}
|
||
/>
|
||
|
||
<div style={{ display: "flex", gap: 6, height: 32 }}>
|
||
<div style={{ flex: 1, display: "flex", justifyContent: "center" }}>
|
||
<Tooltip label="编辑">
|
||
<ActionIcon
|
||
variant="transparent"
|
||
radius="md"
|
||
disabled={!canEdit}
|
||
onClick={() => {
|
||
if (!canEdit) return
|
||
editForm.setValues({
|
||
project_name: record.name ?? "",
|
||
owner: record.owner ?? "",
|
||
remarks: record.remarks ?? "",
|
||
})
|
||
editForm.resetDirty()
|
||
setEditModalRecord(record)
|
||
}}>
|
||
<IconEdit size={16} color="var(--mantine-color-brand-text)" />
|
||
</ActionIcon>
|
||
</Tooltip>
|
||
</div>
|
||
|
||
<div
|
||
style={{
|
||
width: 1,
|
||
height: 32,
|
||
background: "var(--mantine-color-brand-text)",
|
||
opacity: 0.3,
|
||
}}
|
||
/>
|
||
|
||
<div style={{ flex: 1, display: "flex", justifyContent: "center" }}>
|
||
<Tooltip label={actionKey ?? "无可用操作"}>
|
||
<ActionIcon
|
||
variant="transparent"
|
||
radius="md"
|
||
disabled={!canDoAction}
|
||
onClick={() => {
|
||
if (!actionKey) return
|
||
setConfirmAction({ record, action: actionKey })
|
||
}}>
|
||
<IconFileUpload
|
||
size={16}
|
||
color="var(--mantine-color-brand-text)"
|
||
/>
|
||
</ActionIcon>
|
||
</Tooltip>
|
||
</div>
|
||
|
||
<div
|
||
style={{
|
||
width: 1,
|
||
height: 32,
|
||
background: "var(--mantine-color-brand-text)",
|
||
opacity: 0.3,
|
||
}}
|
||
/>
|
||
|
||
<div style={{ flex: 1, display: "flex", justifyContent: "center" }}>
|
||
<Tooltip label="项目信息">
|
||
<ActionIcon
|
||
variant="transparent"
|
||
radius="md"
|
||
onClick={() => setInfoModalRecord(record)}>
|
||
<IconInfoCircle
|
||
size={16}
|
||
color="var(--mantine-color-brand-text)"
|
||
/>
|
||
</ActionIcon>
|
||
</Tooltip>
|
||
</div>
|
||
</div>
|
||
</Stack>
|
||
</Paper>
|
||
)
|
||
}
|
||
|
||
const PaginationBar = (props: {
|
||
currentPage: number
|
||
pageSize: number
|
||
total: number
|
||
onChangePage: (page: number) => void
|
||
onChangePageSize: (size: number) => void
|
||
}) => {
|
||
const pageCount = Math.max(
|
||
1,
|
||
Math.ceil((props.total ?? 0) / props.pageSize)
|
||
)
|
||
return (
|
||
<div
|
||
style={{
|
||
height: 48,
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "flex-end",
|
||
gap: 12,
|
||
paddingLeft: 12,
|
||
paddingRight: 12,
|
||
}}>
|
||
<Select
|
||
size="xs"
|
||
value={String(props.pageSize)}
|
||
data={[15, 45, 99].map((n) => ({
|
||
label: `${n}/页`,
|
||
value: String(n),
|
||
}))}
|
||
onChange={(v) => {
|
||
const next = Number(v)
|
||
if (!Number.isFinite(next)) return
|
||
props.onChangePageSize(next)
|
||
}}
|
||
allowDeselect={false}
|
||
style={{ width: 92 }}
|
||
/>
|
||
<Pagination
|
||
size="sm"
|
||
withControls
|
||
total={pageCount}
|
||
value={Math.min(props.currentPage, pageCount)}
|
||
onChange={props.onChangePage}
|
||
/>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<Stack w="100%" h="calc(100vh - 56px)" p="md" gap="md">
|
||
<Paper
|
||
withBorder
|
||
p="md"
|
||
radius="md"
|
||
style={{ borderColor: "var(--mantine-color-brand-text)" }}>
|
||
<Group justify="space-between" wrap="wrap" gap="sm">
|
||
<Group gap="xs">
|
||
<Text fw={700}>
|
||
{type === "collect"
|
||
? "我的收藏"
|
||
: type === "dynamic"
|
||
? "动态项目"
|
||
: "全部项目"}
|
||
</Text>
|
||
<Button
|
||
size="xs"
|
||
variant="transparent"
|
||
rightSection={
|
||
searchExpanded ? (
|
||
<IconChevronUp size={16} />
|
||
) : (
|
||
<IconChevronDown size={16} />
|
||
)
|
||
}
|
||
onClick={() => setSearchExpanded((v) => !v)}>
|
||
{searchExpanded ? "收起筛选" : "展开筛选"}
|
||
</Button>
|
||
</Group>
|
||
<Group gap="xs">
|
||
<Button
|
||
size="xs"
|
||
radius="xs"
|
||
variant="default"
|
||
leftSection={<IconRefresh size={16} />}
|
||
onClick={() => {
|
||
resetParams(type)
|
||
const next = {
|
||
project_name: "",
|
||
project_type: "",
|
||
status: "",
|
||
owner: "",
|
||
label_type: "",
|
||
admin_user: "",
|
||
start_date: dayjs().subtract(6, "day").format("YYYY-MM-DD"),
|
||
end_date: dayjs().format("YYYY-MM-DD"),
|
||
}
|
||
setFilters(next)
|
||
setAppliedFilters(next)
|
||
setQueryTrigger((v) => v + 1)
|
||
}}>
|
||
重置
|
||
</Button>
|
||
<Button
|
||
size="xs"
|
||
radius="xs"
|
||
leftSection={<IconSearch size={16} />}
|
||
onClick={() => {
|
||
setSearchParams({ ...storeParams, page_number: 1 }, type)
|
||
setAppliedFilters(filters)
|
||
setQueryTrigger((v) => v + 1)
|
||
}}>
|
||
查询
|
||
</Button>
|
||
</Group>
|
||
</Group>
|
||
|
||
<Collapse
|
||
in={searchExpanded}
|
||
transitionDuration={250}
|
||
transitionTimingFunction="ease"
|
||
animateOpacity>
|
||
<Stack gap="sm" mt="sm">
|
||
<SimpleGrid cols={{ base: 1, sm: 2, md: 3, lg: 4 }} spacing="sm">
|
||
<TextInput
|
||
label="项目名称"
|
||
size="xs"
|
||
radius="xs"
|
||
value={filters.project_name}
|
||
onChange={(e) =>
|
||
setFilters((s) => ({
|
||
...s,
|
||
project_name: e.currentTarget.value,
|
||
}))
|
||
}
|
||
/>
|
||
<Select
|
||
label="所属业务"
|
||
size="xs"
|
||
radius="xs"
|
||
searchable
|
||
clearable
|
||
data={typeOpts}
|
||
value={filters.project_type || null}
|
||
onChange={(v) =>
|
||
setFilters((s) => ({ ...s, project_type: v ?? "" }))
|
||
}
|
||
/>
|
||
<Select
|
||
label="状态"
|
||
size="xs"
|
||
radius="xs"
|
||
searchable
|
||
data={projectStatusOpts.map((o) => ({
|
||
label: o.label,
|
||
value: o.label,
|
||
}))}
|
||
value={filters.status}
|
||
onChange={(v) => setFilters((s) => ({ ...s, status: v ?? "" }))}
|
||
/>
|
||
<TextInput
|
||
label="负责人"
|
||
size="xs"
|
||
radius="xs"
|
||
value={filters.owner}
|
||
onChange={(e) =>
|
||
setFilters((s) => ({ ...s, owner: e.currentTarget.value }))
|
||
}
|
||
/>
|
||
<Select
|
||
label="标注类型"
|
||
size="xs"
|
||
radius="xs"
|
||
searchable
|
||
clearable
|
||
data={projectLabelTypeOpts.map((o) => ({
|
||
label: o.label,
|
||
value: String(o.value),
|
||
}))}
|
||
value={filters.label_type || null}
|
||
onChange={(v) =>
|
||
setFilters((s) => ({ ...s, label_type: v ?? "" }))
|
||
}
|
||
/>
|
||
<Select
|
||
label="标注管理员"
|
||
size="xs"
|
||
radius="xs"
|
||
searchable
|
||
clearable
|
||
data={userOpts.map((o) => ({
|
||
label: o.label,
|
||
value: String(o.value),
|
||
}))}
|
||
value={filters.admin_user || null}
|
||
onChange={(v) =>
|
||
setFilters((s) => ({ ...s, admin_user: v ?? "" }))
|
||
}
|
||
/>
|
||
<TextInput
|
||
label="开始日期"
|
||
size="xs"
|
||
radius="xs"
|
||
type="date"
|
||
value={filters.start_date}
|
||
onChange={(e) =>
|
||
setFilters((s) => ({
|
||
...s,
|
||
start_date: e.currentTarget.value,
|
||
}))
|
||
}
|
||
/>
|
||
<TextInput
|
||
label="结束日期"
|
||
size="xs"
|
||
radius="xs"
|
||
type="date"
|
||
value={filters.end_date}
|
||
onChange={(e) =>
|
||
setFilters((s) => ({ ...s, end_date: e.currentTarget.value }))
|
||
}
|
||
/>
|
||
</SimpleGrid>
|
||
</Stack>
|
||
</Collapse>
|
||
</Paper>
|
||
|
||
<Paper
|
||
withBorder
|
||
p="md"
|
||
radius="md"
|
||
style={{
|
||
borderColor: "var(--mantine-color-brand-text)",
|
||
flex: 1,
|
||
minHeight: 0,
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
}}>
|
||
<div
|
||
style={{
|
||
flex: 1,
|
||
minHeight: 0,
|
||
overflowY: "auto",
|
||
paddingRight: 2,
|
||
}}>
|
||
{loading ? (
|
||
<div
|
||
style={{
|
||
height: "100%",
|
||
minHeight: 220,
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "center",
|
||
}}>
|
||
<Loader size="sm" />
|
||
</div>
|
||
) : records.length ? (
|
||
<div
|
||
style={{
|
||
display: "grid",
|
||
gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
|
||
gap: 16,
|
||
}}>
|
||
{records.map(ProjectCard)}
|
||
</div>
|
||
) : (
|
||
<div
|
||
style={{
|
||
height: "100%",
|
||
minHeight: 220,
|
||
border: "1px solid rgba(0,0,0,0.06)",
|
||
borderRadius: 12,
|
||
background: "rgba(0,0,0,0.02)",
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "center",
|
||
}}>
|
||
<Text size="lg" c="dimmed" fw={600}>
|
||
暂无数据
|
||
</Text>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<div style={{ height: 48, marginTop: 16 }}>
|
||
<PaginationBar
|
||
currentPage={currentPage}
|
||
pageSize={pageSize}
|
||
total={total ?? 0}
|
||
onChangePage={(p) => {
|
||
setSearchParams({ ...storeParams, page_number: p }, type)
|
||
setQueryTrigger((v) => v + 1)
|
||
}}
|
||
onChangePageSize={(s) => {
|
||
setSearchParams(
|
||
{ ...storeParams, page_number: 1, page_size: s },
|
||
type
|
||
)
|
||
setQueryTrigger((v) => v + 1)
|
||
}}
|
||
/>
|
||
</div>
|
||
</Paper>
|
||
|
||
<Modal
|
||
opened={infoModalRecord !== null}
|
||
onClose={() => setInfoModalRecord(null)}
|
||
title="项目信息"
|
||
centered
|
||
size={850}>
|
||
{(() => {
|
||
const record = infoModalRecord
|
||
const adminUsers =
|
||
record?.admin_user && Array.isArray(record.admin_user)
|
||
? record.admin_user
|
||
.map((uid) => userOpts.find((o) => o.value === uid)?.label)
|
||
.filter(Boolean)
|
||
: []
|
||
|
||
const labelSchemaText = record?.label_schema_name
|
||
? `${record.label_schema_name}${
|
||
record.label_schema_version
|
||
? ` - ${record.label_schema_version}`
|
||
: ""
|
||
}`
|
||
: "-"
|
||
|
||
const progressText = `${formatPercent(record?.labeled_scale)} / ${formatPercent(
|
||
record?.reviewed_scale
|
||
)}`
|
||
|
||
const processText = record ? getProcessText(record) : "-"
|
||
|
||
const Row = (props: { title: ReactNode; children: ReactNode }) => (
|
||
<div
|
||
style={{
|
||
display: "flex",
|
||
alignItems: "flex-center",
|
||
lineHeight: "24px",
|
||
}}>
|
||
<div style={{ width: 108, fontWeight: 600 }}>{props.title}</div>
|
||
<div
|
||
style={{
|
||
flex: 1,
|
||
minWidth: 0,
|
||
display: "flex",
|
||
alignItems: "center",
|
||
}}>
|
||
{props.children}
|
||
</div>
|
||
</div>
|
||
)
|
||
|
||
const EllipsisText = (props: {
|
||
value?: string | null
|
||
copyable?: boolean
|
||
}) => {
|
||
const value = props.value
|
||
if (!value) return <Text size="sm">-</Text>
|
||
const textNode = (
|
||
<Text
|
||
size="sm"
|
||
style={{
|
||
overflow: "hidden",
|
||
textOverflow: "ellipsis",
|
||
whiteSpace: "nowrap",
|
||
}}>
|
||
{value}
|
||
</Text>
|
||
)
|
||
return props.copyable ? (
|
||
<Group gap={6} wrap="nowrap">
|
||
<Tooltip label={value} withArrow>
|
||
<div style={{ flex: 1, minWidth: 0 }}>{textNode}</div>
|
||
</Tooltip>
|
||
<CopyButton value={value} timeout={1200}>
|
||
{({ copied, copy }) => (
|
||
<ActionIcon
|
||
variant="subtle"
|
||
color={copied ? "teal" : "gray"}
|
||
onClick={copy}>
|
||
{copied ? (
|
||
<IconCheck size={16} />
|
||
) : (
|
||
<IconCopy size={16} />
|
||
)}
|
||
</ActionIcon>
|
||
)}
|
||
</CopyButton>
|
||
</Group>
|
||
) : (
|
||
<Tooltip label={value} withArrow>
|
||
<div>{textNode}</div>
|
||
</Tooltip>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<div
|
||
style={{
|
||
maxHeight: "70vh",
|
||
overflowY: "auto",
|
||
paddingBottom: 8,
|
||
}}>
|
||
<Stack gap="sm">
|
||
<Row title="项目ID">
|
||
<Text size="sm">{record?.id ?? "-"}</Text>
|
||
</Row>
|
||
<Row title="项目名称">
|
||
<EllipsisText value={record?.name ?? null} />
|
||
</Row>
|
||
<Row title="所属业务">
|
||
<EllipsisText value={record?.project_type ?? null} />
|
||
</Row>
|
||
<Row title="标注方案">
|
||
<EllipsisText
|
||
value={labelSchemaText === "-" ? null : labelSchemaText}
|
||
/>
|
||
</Row>
|
||
<Row title="项目状态">
|
||
{record?.status ? (
|
||
<Badge
|
||
color={statusBadgeColor(record.status)}
|
||
variant="light">
|
||
{STATUS_CODE.get(record.status) ?? record.status}
|
||
</Badge>
|
||
) : (
|
||
<Text size="sm">-</Text>
|
||
)}
|
||
</Row>
|
||
<Row title="项目进度">
|
||
<Text size="sm">{progressText}</Text>
|
||
</Row>
|
||
<Row title="总数据量">
|
||
<Text size="sm">{record?.data_size ?? "-"}</Text>
|
||
</Row>
|
||
<Row title="项目负责人">
|
||
<Text size="sm">{record?.owner ?? "-"}</Text>
|
||
</Row>
|
||
<Row
|
||
title={
|
||
<Group gap={6} wrap="nowrap">
|
||
<Text size="sm" fw={600}>
|
||
工序
|
||
</Text>
|
||
<Tooltip label="(静态倍速/动态倍速)" withArrow>
|
||
<IconInfoCircle
|
||
size={14}
|
||
color="var(--mantine-color-dimmed)"
|
||
/>
|
||
</Tooltip>
|
||
</Group>
|
||
}>
|
||
<EllipsisText
|
||
value={processText === "-" ? null : processText}
|
||
/>
|
||
</Row>
|
||
<Row title="项目管理员">
|
||
<EllipsisText
|
||
value={adminUsers.length ? adminUsers.join("，") : null}
|
||
/>
|
||
</Row>
|
||
<Row title="数据源">
|
||
<EllipsisText value={record?.data_source ?? null} copyable />
|
||
</Row>
|
||
<Row title="备注">
|
||
<EllipsisText value={record?.remarks ?? null} />
|
||
</Row>
|
||
<Row title="创建时间">
|
||
<Text size="sm">{record?.create_at ?? "-"}</Text>
|
||
</Row>
|
||
<Row title="更新时间">
|
||
<Text size="sm">{record?.update_at ?? "-"}</Text>
|
||
</Row>
|
||
</Stack>
|
||
</div>
|
||
)
|
||
})()}
|
||
</Modal>
|
||
|
||
<Modal
|
||
opened={editModalRecord !== null}
|
||
onClose={() => setEditModalRecord(null)}
|
||
title="编辑项目"
|
||
centered
|
||
size={480}>
|
||
<form
|
||
onSubmit={editForm.onSubmit(async (values) => {
|
||
const record = editModalRecord
|
||
if (!record) return
|
||
try {
|
||
await projectEditById(
|
||
{
|
||
project_name: values.project_name,
|
||
owner: values.owner || undefined,
|
||
remarks: values.remarks || undefined,
|
||
},
|
||
record.id
|
||
)
|
||
notifications.show({
|
||
color: "green",
|
||
title: "编辑成功",
|
||
message: "已保存",
|
||
})
|
||
setEditModalRecord(null)
|
||
setQueryTrigger((v) => v + 1)
|
||
} catch (e) {
|
||
notifications.show({
|
||
color: "red",
|
||
title: "编辑失败",
|
||
message: e instanceof Error ? e.message : "请求失败",
|
||
})
|
||
}
|
||
})}>
|
||
<Stack gap="sm">
|
||
<TextInput
|
||
label="项目名称"
|
||
size="xs"
|
||
radius="xs"
|
||
{...editForm.getInputProps("project_name")}
|
||
/>
|
||
<TextInput
|
||
label="负责人"
|
||
size="xs"
|
||
radius="xs"
|
||
{...editForm.getInputProps("owner")}
|
||
/>
|
||
<Textarea
|
||
label="备注"
|
||
size="xs"
|
||
radius="xs"
|
||
minRows={3}
|
||
autosize
|
||
{...editForm.getInputProps("remarks")}
|
||
/>
|
||
|
||
<Group justify="flex-end" gap="sm">
|
||
<Button
|
||
variant="default"
|
||
size="xs"
|
||
radius="xs"
|
||
onClick={() => setEditModalRecord(null)}>
|
||
取消
|
||
</Button>
|
||
<Button type="submit" size="xs" radius="xs">
|
||
保存
|
||
</Button>
|
||
</Group>
|
||
</Stack>
|
||
</form>
|
||
</Modal>
|
||
|
||
<Modal
|
||
opened={confirmAction.record !== null && confirmAction.action !== null}
|
||
onClose={() => setConfirmAction({ record: null, action: null })}
|
||
title={confirmActionTitle}
|
||
centered
|
||
size={520}>
|
||
<Stack gap="sm">
|
||
<Text size="sm">
|
||
确认对项目「{confirmAction.record?.name ?? "-"}」执行「
|
||
{confirmAction.action ?? "-"}」？
|
||
</Text>
|
||
<Group justify="flex-end" gap="sm">
|
||
<Button
|
||
variant="default"
|
||
size="xs"
|
||
radius="xs"
|
||
onClick={() => setConfirmAction({ record: null, action: null })}>
|
||
取消
|
||
</Button>
|
||
<Button onClick={runConfirmAction} size="xs" radius="xs">
|
||
确认
|
||
</Button>
|
||
</Group>
|
||
</Stack>
|
||
</Modal>
|
||
</Stack>
|
||
)
|
||
}
|