537 lines
15 KiB
TypeScript
537 lines
15 KiB
TypeScript
"use client"
|
|
|
|
import {
|
|
getProjectList,
|
|
getProjectTypeList,
|
|
projectCollect,
|
|
} from "@/components/label/api/project"
|
|
import { Project } from "@/components/label/api/project/typing"
|
|
import {
|
|
initAllParams,
|
|
initCollectParams,
|
|
initDynamicParams,
|
|
useAllUserStore,
|
|
useProjectStore,
|
|
} from "@/components/label/store/auth"
|
|
import {
|
|
projectLabelTypeOpts,
|
|
projectStatusOpts,
|
|
STATUS_CODE,
|
|
} from "@/components/label/utils/constants"
|
|
import {
|
|
ActionIcon,
|
|
Badge,
|
|
Button,
|
|
Collapse,
|
|
Group,
|
|
Paper,
|
|
Select,
|
|
SimpleGrid,
|
|
Stack,
|
|
Text,
|
|
TextInput,
|
|
} from "@mantine/core"
|
|
import { notifications } from "@mantine/notifications"
|
|
import {
|
|
IconChevronDown,
|
|
IconChevronUp,
|
|
IconRefresh,
|
|
IconSearch,
|
|
IconStar,
|
|
IconStarFilled,
|
|
} from "@tabler/icons-react"
|
|
import dayjs from "dayjs"
|
|
import { DataTable, DataTableColumn } from "mantine-datatable"
|
|
import { useRouter, useSearchParams } from "next/navigation"
|
|
import { useCallback, useEffect, useMemo, useState } from "react"
|
|
|
|
type PageType = "all" | "collect" | "dynamic"
|
|
|
|
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
|
|
}
|
|
|
|
export default function CollectionPage() {
|
|
const router = useRouter()
|
|
const urlParams = useSearchParams()
|
|
const type = (urlParams.get("type") as PageType | null) ?? "collect"
|
|
|
|
const { userOpts } = useAllUserStore()
|
|
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 columns = useMemo(() => {
|
|
const cols: DataTableColumn<Project.DataProps>[] = [
|
|
{
|
|
accessor: "id",
|
|
title: "项目ID",
|
|
width: 90,
|
|
},
|
|
{
|
|
accessor: "name",
|
|
title: "项目名称",
|
|
width: 220,
|
|
render: (record) => (
|
|
<Button
|
|
variant="subtle"
|
|
size="xs"
|
|
style={{
|
|
paddingLeft: 6,
|
|
paddingRight: 6,
|
|
maxWidth: 220,
|
|
}}
|
|
onClick={() => {
|
|
const url = type
|
|
? `/management/person/collection/detail?id=${record.id}&type=${type}`
|
|
: `/management/person/collection/detail?id=${record.id}`
|
|
router.push(url)
|
|
}}>
|
|
<Text
|
|
size="sm"
|
|
style={{
|
|
maxWidth: 200,
|
|
overflow: "hidden",
|
|
textOverflow: "ellipsis",
|
|
whiteSpace: "nowrap",
|
|
}}>
|
|
{record.name}
|
|
</Text>
|
|
</Button>
|
|
),
|
|
},
|
|
{
|
|
accessor: "project_type",
|
|
title: "所属业务",
|
|
width: 140,
|
|
render: (record) => record.project_type ?? "-",
|
|
},
|
|
{
|
|
accessor: "status",
|
|
title: "状态",
|
|
width: 110,
|
|
render: (record) => (
|
|
<Badge color={statusBadgeColor(record.status)}>
|
|
{STATUS_CODE.get(record.status) ?? record.status}
|
|
</Badge>
|
|
),
|
|
},
|
|
{
|
|
accessor: "owner",
|
|
title: "负责人",
|
|
width: 120,
|
|
render: (record) => record.owner ?? "-",
|
|
},
|
|
{
|
|
accessor: "label_schema_name",
|
|
title: "标注方案",
|
|
width: 160,
|
|
render: (record) => record.label_schema_name ?? "-",
|
|
},
|
|
{
|
|
accessor: "update_at",
|
|
title: "更新时间",
|
|
width: 160,
|
|
render: (record) => record.update_at ?? record.create_at ?? "-",
|
|
},
|
|
{
|
|
accessor: "operation",
|
|
title: "操作",
|
|
width: 80,
|
|
textAlign: "center",
|
|
render: (record) => (
|
|
<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 ? "已取消收藏" : "已收藏",
|
|
})
|
|
load()
|
|
} catch (e) {
|
|
notifications.show({
|
|
color: "red",
|
|
title: "操作失败",
|
|
message: e instanceof Error ? e.message : "请求失败",
|
|
})
|
|
}
|
|
}}>
|
|
{record.is_collect ? (
|
|
<IconStarFilled size={16} />
|
|
) : (
|
|
<IconStar size={16} />
|
|
)}
|
|
</ActionIcon>
|
|
),
|
|
},
|
|
]
|
|
return cols
|
|
}, [load, router, type])
|
|
|
|
return (
|
|
<Stack w="100%" h="calc(100vh - 56px)" p="md" gap="md">
|
|
<Paper
|
|
withBorder
|
|
p="md"
|
|
radius="md"
|
|
style={{ borderColor: "rgba(0,0,0,0.06)" }}>
|
|
<Group justify="space-between" wrap="wrap" gap="sm">
|
|
{/* <SegmentedControl
|
|
value={type}
|
|
data={[
|
|
{ label: "全部项目", value: "all" },
|
|
{ label: "我的收藏", value: "collect" },
|
|
{ label: "动态项目", value: "dynamic" },
|
|
]}
|
|
onChange={(v) => {
|
|
const next = v as PageType
|
|
router.replace(`/management/person/collection?type=${next}`)
|
|
}}
|
|
/> */}
|
|
<Group gap="xs">
|
|
<Text fw={700}>我的收藏</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: "rgba(0,0,0,0.06)",
|
|
flex: 1,
|
|
minHeight: 0,
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
}}>
|
|
<Group gap={0} align="stretch" style={{ flex: 1, minHeight: 0 }}>
|
|
<DataTable<Project.DataProps>
|
|
width="100%"
|
|
style={{ width: "100%" }}
|
|
withTableBorder
|
|
withRowBorders
|
|
pinFirstColumn
|
|
pinLastColumn
|
|
scrollAreaProps={{ type: "auto" }}
|
|
fetching={loading}
|
|
records={records}
|
|
columns={columns}
|
|
totalRecords={total}
|
|
recordsPerPage={storeParams.page_size ?? 15}
|
|
page={storeParams.page_number ?? 1}
|
|
onPageChange={(p) => {
|
|
setSearchParams({ ...storeParams, page_number: p }, type)
|
|
setQueryTrigger((v) => v + 1)
|
|
}}
|
|
onRecordsPerPageChange={(s) => {
|
|
setSearchParams(
|
|
{ ...storeParams, page_number: 1, page_size: s },
|
|
type
|
|
)
|
|
setQueryTrigger((v) => v + 1)
|
|
}}
|
|
recordsPerPageOptions={[10, 15, 20, 50]}
|
|
noRecordsText="暂无数据"
|
|
/>
|
|
</Group>
|
|
</Paper>
|
|
</Stack>
|
|
)
|
|
}
|