fix(project): page
This commit is contained in:
zhangheng
@@ -19,6 +19,7 @@ import {
|
||||
useProjectStore,
|
||||
} from "@/components/label/store/auth"
|
||||
import {
|
||||
ALL_CODE,
|
||||
projectLabelTypeOpts,
|
||||
projectStatusOpts,
|
||||
STATUS_CODE,
|
||||
@@ -36,7 +37,6 @@ import {
|
||||
Modal,
|
||||
MultiSelect,
|
||||
Pagination,
|
||||
Paper,
|
||||
Select,
|
||||
SimpleGrid,
|
||||
Stack,
|
||||
@@ -46,6 +46,15 @@ import {
|
||||
Tooltip,
|
||||
UnstyledButton,
|
||||
} from "@mantine/core"
|
||||
import {
|
||||
SettingContentPanel,
|
||||
SettingFilterActions,
|
||||
SettingFilterPanel,
|
||||
SettingHeaderActions,
|
||||
SettingListHeader,
|
||||
SettingPage,
|
||||
SettingPanel,
|
||||
} from "@/components/setting/PageSurface"
|
||||
import { useForm } from "@mantine/form"
|
||||
import { notifications } from "@mantine/notifications"
|
||||
import {
|
||||
@@ -134,6 +143,7 @@ export default function ProjectInfoPage({
|
||||
type: "dynamic" | "collect" | ""
|
||||
}) {
|
||||
const router = useRouter()
|
||||
const storeType = type || "all"
|
||||
|
||||
const { userOpts } = useAllUserStore()
|
||||
const userName = usePermissionStore((s) => s.user_name)
|
||||
@@ -150,20 +160,20 @@ export default function ProjectInfoPage({
|
||||
}: any = useProjectStore()
|
||||
|
||||
const storeParams = useMemo(() => {
|
||||
return type === "collect"
|
||||
return storeType === "collect"
|
||||
? collectParams
|
||||
: type === "dynamic"
|
||||
: storeType === "dynamic"
|
||||
? dynamicParams
|
||||
: allParams
|
||||
}, [allParams, collectParams, dynamicParams, type])
|
||||
}, [allParams, collectParams, dynamicParams, storeType])
|
||||
|
||||
const total = useMemo(() => {
|
||||
return type === "collect"
|
||||
return storeType === "collect"
|
||||
? collectTotal
|
||||
: type === "dynamic"
|
||||
: storeType === "dynamic"
|
||||
? dynamicTotal
|
||||
: allTotal
|
||||
}, [allTotal, collectTotal, dynamicTotal, type])
|
||||
}, [allTotal, collectTotal, dynamicTotal, storeType])
|
||||
|
||||
const [typeOpts, setTypeOpts] = useState<
|
||||
Array<{ label: string; value: string }>
|
||||
@@ -179,7 +189,7 @@ export default function ProjectInfoPage({
|
||||
status: "",
|
||||
owner: "",
|
||||
label_type: "",
|
||||
admin_user: "",
|
||||
admin_user: [] as string[],
|
||||
start_date: dayjs().subtract(6, "day").format("YYYY-MM-DD"),
|
||||
end_date: dayjs().format("YYYY-MM-DD"),
|
||||
}
|
||||
@@ -200,9 +210,9 @@ export default function ProjectInfoPage({
|
||||
|
||||
const queryParams = useMemo(() => {
|
||||
const base =
|
||||
type === "collect"
|
||||
storeType === "collect"
|
||||
? { ...initCollectParams }
|
||||
: type === "dynamic"
|
||||
: storeType === "dynamic"
|
||||
? { ...initDynamicParams }
|
||||
: { ...initAllParams }
|
||||
|
||||
@@ -214,7 +224,9 @@ export default function ProjectInfoPage({
|
||||
project_name: appliedFilters.project_name || undefined,
|
||||
project_type: appliedFilters.project_type || undefined,
|
||||
owner: appliedFilters.owner || undefined,
|
||||
admin_user: appliedFilters.admin_user || undefined,
|
||||
admin_user: appliedFilters.admin_user?.length
|
||||
? appliedFilters.admin_user.map((n) => Number(n))
|
||||
: undefined,
|
||||
start_date: appliedFilters.start_date || undefined,
|
||||
end_date: appliedFilters.end_date || undefined,
|
||||
label_type: appliedFilters.label_type
|
||||
@@ -222,11 +234,11 @@ export default function ProjectInfoPage({
|
||||
: undefined,
|
||||
// 0: 图片标注 1: 点云标注 2: 视频标注
|
||||
project_data_type: 0,
|
||||
status: parseStatusValue(appliedFilters.status),
|
||||
status: parseStatusValue(appliedFilters.status) ?? [...ALL_CODE],
|
||||
}
|
||||
|
||||
return params
|
||||
}, [appliedFilters, storeParams, type])
|
||||
}, [appliedFilters, storeParams, storeType])
|
||||
|
||||
const load = useCallback(async () => {
|
||||
if (!queryTrigger) return
|
||||
@@ -234,10 +246,10 @@ export default function ProjectInfoPage({
|
||||
try {
|
||||
const res = await getProjectList(queryParams)
|
||||
setRecords(res?.project_list ?? [])
|
||||
setTotal(res?.total_items ?? 0, type)
|
||||
setTotal(res?.total_items ?? 0, storeType)
|
||||
} catch (e) {
|
||||
setRecords([])
|
||||
setTotal(0, type)
|
||||
setTotal(0, storeType)
|
||||
notifications.show({
|
||||
color: "red",
|
||||
title: "加载失败",
|
||||
@@ -246,7 +258,7 @@ export default function ProjectInfoPage({
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [queryParams, queryTrigger, setTotal, type])
|
||||
}, [queryParams, queryTrigger, setTotal, storeType])
|
||||
|
||||
useEffect(() => {
|
||||
load()
|
||||
@@ -345,11 +357,10 @@ export default function ProjectInfoPage({
|
||||
const canDoAction = !!actionKey
|
||||
|
||||
return (
|
||||
<Paper
|
||||
<SettingPanel
|
||||
key={record.id}
|
||||
withBorder
|
||||
radius="md"
|
||||
shadow="sm"
|
||||
shadow="xs"
|
||||
style={{
|
||||
height: 160,
|
||||
padding: 14,
|
||||
@@ -357,6 +368,9 @@ export default function ProjectInfoPage({
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
borderColor: "#E8EDF3",
|
||||
background:
|
||||
"linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(247,250,252,0.96) 100%)",
|
||||
}}>
|
||||
<Group justify="space-between" wrap="nowrap" align="flex-start">
|
||||
<Flex flex={1}>
|
||||
@@ -551,7 +565,7 @@ export default function ProjectInfoPage({
|
||||
</div>
|
||||
</div>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</SettingPanel>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -604,19 +618,12 @@ export default function ProjectInfoPage({
|
||||
}
|
||||
|
||||
return (
|
||||
<Stack w="100%" h="calc(100vh - 56px)" p="md" gap="md">
|
||||
<Paper withBorder p="md" radius="md">
|
||||
<SettingPage>
|
||||
<SettingFilterPanel>
|
||||
<Group justify="space-between" wrap="wrap" gap="sm">
|
||||
<Group gap="xs">
|
||||
<Text fw={700}>
|
||||
{type === "collect"
|
||||
? "我的收藏"
|
||||
: type === "dynamic"
|
||||
? "动态项目"
|
||||
: "我的项目"}
|
||||
</Text>
|
||||
<Text fw={700}>筛选条件</Text>
|
||||
<Button
|
||||
size="xs"
|
||||
variant="transparent"
|
||||
rightSection={
|
||||
searchExpanded ? (
|
||||
@@ -629,21 +636,19 @@ export default function ProjectInfoPage({
|
||||
{searchExpanded ? "收起筛选" : "展开筛选"}
|
||||
</Button>
|
||||
</Group>
|
||||
<Group gap="xs">
|
||||
<SettingFilterActions mt={0}>
|
||||
<Button
|
||||
size="xs"
|
||||
radius="xs"
|
||||
variant="default"
|
||||
leftSection={<IconRefresh size={16} />}
|
||||
onClick={() => {
|
||||
resetParams(type)
|
||||
resetParams(storeType)
|
||||
const next = {
|
||||
project_name: "",
|
||||
project_type: "",
|
||||
status: "",
|
||||
owner: "",
|
||||
label_type: "",
|
||||
admin_user: "",
|
||||
admin_user: [],
|
||||
start_date: dayjs().subtract(6, "day").format("YYYY-MM-DD"),
|
||||
end_date: dayjs().format("YYYY-MM-DD"),
|
||||
}
|
||||
@@ -654,17 +659,15 @@ export default function ProjectInfoPage({
|
||||
重置
|
||||
</Button>
|
||||
<Button
|
||||
size="xs"
|
||||
radius="xs"
|
||||
leftSection={<IconSearch size={16} />}
|
||||
onClick={() => {
|
||||
setSearchParams({ ...storeParams, page_number: 1 }, type)
|
||||
setSearchParams({ ...storeParams, page_number: 1 }, storeType)
|
||||
setAppliedFilters(filters)
|
||||
setQueryTrigger((v) => v + 1)
|
||||
}}>
|
||||
查询
|
||||
</Button>
|
||||
</Group>
|
||||
</SettingFilterActions>
|
||||
</Group>
|
||||
|
||||
<Collapse
|
||||
@@ -676,8 +679,6 @@ export default function ProjectInfoPage({
|
||||
<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) => ({
|
||||
@@ -688,8 +689,6 @@ export default function ProjectInfoPage({
|
||||
/>
|
||||
<Select
|
||||
label="所属业务"
|
||||
size="xs"
|
||||
radius="xs"
|
||||
searchable
|
||||
clearable
|
||||
data={typeOpts}
|
||||
@@ -700,20 +699,16 @@ export default function ProjectInfoPage({
|
||||
/>
|
||||
<Select
|
||||
label="状态"
|
||||
size="xs"
|
||||
radius="xs"
|
||||
searchable
|
||||
data={projectStatusOpts.map((o) => ({
|
||||
label: o.label,
|
||||
value: o.label,
|
||||
value: o.value.toString(),
|
||||
}))}
|
||||
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 }))
|
||||
@@ -721,8 +716,6 @@ export default function ProjectInfoPage({
|
||||
/>
|
||||
<Select
|
||||
label="标注类型"
|
||||
size="xs"
|
||||
radius="xs"
|
||||
searchable
|
||||
clearable
|
||||
data={projectLabelTypeOpts.map((o) => ({
|
||||
@@ -734,25 +727,19 @@ export default function ProjectInfoPage({
|
||||
setFilters((s) => ({ ...s, label_type: v ?? "" }))
|
||||
}
|
||||
/>
|
||||
<Select
|
||||
<MultiSelect
|
||||
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 ?? "" }))
|
||||
}
|
||||
value={filters.admin_user}
|
||||
onChange={(v) => setFilters((s) => ({ ...s, admin_user: v }))}
|
||||
searchable
|
||||
clearable
|
||||
/>
|
||||
<TextInput
|
||||
label="开始日期"
|
||||
size="xs"
|
||||
radius="xs"
|
||||
type="date"
|
||||
value={filters.start_date}
|
||||
onChange={(e) =>
|
||||
@@ -764,8 +751,6 @@ export default function ProjectInfoPage({
|
||||
/>
|
||||
<TextInput
|
||||
label="结束日期"
|
||||
size="xs"
|
||||
radius="xs"
|
||||
type="date"
|
||||
value={filters.end_date}
|
||||
onChange={(e) =>
|
||||
@@ -775,18 +760,36 @@ export default function ProjectInfoPage({
|
||||
</SimpleGrid>
|
||||
</Stack>
|
||||
</Collapse>
|
||||
</Paper>
|
||||
</SettingFilterPanel>
|
||||
|
||||
<Paper
|
||||
withBorder
|
||||
p="md"
|
||||
radius="md"
|
||||
<SettingContentPanel
|
||||
style={{
|
||||
flex: 1,
|
||||
minHeight: 0,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
}}>
|
||||
<SettingListHeader
|
||||
title={
|
||||
type === "collect"
|
||||
? "我的收藏"
|
||||
: type === "dynamic"
|
||||
? "动态项目"
|
||||
: "全部项目"
|
||||
}
|
||||
count={`${total ?? 0} 条`}
|
||||
actions={
|
||||
<SettingHeaderActions>
|
||||
<Button
|
||||
variant="default"
|
||||
leftSection={<IconRefresh size={16} />}
|
||||
onClick={() => setQueryTrigger((v) => v + 1)}
|
||||
loading={loading}>
|
||||
刷新
|
||||
</Button>
|
||||
</SettingHeaderActions>
|
||||
}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
@@ -839,19 +842,19 @@ export default function ProjectInfoPage({
|
||||
pageSize={pageSize}
|
||||
total={total ?? 0}
|
||||
onChangePage={(p) => {
|
||||
setSearchParams({ ...storeParams, page_number: p }, type)
|
||||
setSearchParams({ ...storeParams, page_number: p }, storeType)
|
||||
setQueryTrigger((v) => v + 1)
|
||||
}}
|
||||
onChangePageSize={(s) => {
|
||||
setSearchParams(
|
||||
{ ...storeParams, page_number: 1, page_size: s },
|
||||
type
|
||||
storeType
|
||||
)
|
||||
setQueryTrigger((v) => v + 1)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Paper>
|
||||
</SettingContentPanel>
|
||||
|
||||
<Modal
|
||||
opened={infoModalRecord !== null}
|
||||
@@ -1139,6 +1142,6 @@ export default function ProjectInfoPage({
|
||||
</Group>
|
||||
</Stack>
|
||||
</Modal>
|
||||
</Stack>
|
||||
</SettingPage>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user