fix(detail): change detail
This commit is contained in:
zhangheng
335
app/management/project/detail/TaskTableContainer.tsx
Normal file
335
app/management/project/detail/TaskTableContainer.tsx
Normal file
@@ -0,0 +1,335 @@
|
||||
"use client"
|
||||
|
||||
import { ProjectDetail } from "@/components/label/api/project/typing"
|
||||
import { getTaskList } from "@/components/label/api/task"
|
||||
import { Task } from "@/components/label/api/task/typing"
|
||||
import {
|
||||
useAllTaskStore,
|
||||
usePermissionStore,
|
||||
} from "@/components/label/store/auth"
|
||||
import { TaskStatusOpts } from "@/components/label/utils/constants"
|
||||
import {
|
||||
ActionIcon,
|
||||
Button,
|
||||
Group,
|
||||
Paper,
|
||||
Select,
|
||||
Stack,
|
||||
TextInput,
|
||||
} from "@mantine/core"
|
||||
import { notifications } from "@mantine/notifications"
|
||||
import {
|
||||
IconArrowsShuffle,
|
||||
IconRefresh,
|
||||
IconRoute,
|
||||
IconTrashX,
|
||||
} from "@tabler/icons-react"
|
||||
import { DataTable, DataTableColumn } from "mantine-datatable"
|
||||
import { useSearchParams } from "next/navigation"
|
||||
import { JSX, useCallback, useEffect, useMemo, useState } from "react"
|
||||
import DispatchModal from "./components/DispatchModal"
|
||||
import ReleaseModal from "./components/ReleaseModal"
|
||||
import TaskStatusTag from "./components/TaskStatusTag"
|
||||
import WorkflowModal from "./components/WorkflowModal"
|
||||
|
||||
export default function TaskTableContainer(props: {
|
||||
info: ProjectDetail.DataProps | undefined
|
||||
menuAction?: () => JSX.Element
|
||||
userEnums: {
|
||||
allEnum: Map<any, any>
|
||||
labelEnum: Map<any, any>
|
||||
review1Enum: Map<any, any>
|
||||
review2Enum: Map<any, any>
|
||||
}
|
||||
}) {
|
||||
const { info, menuAction, userEnums } = props
|
||||
false && console.log(info)
|
||||
|
||||
const urlParams = useSearchParams()
|
||||
const id = urlParams.get("id")
|
||||
const projectId =
|
||||
typeof id === "string" && !isNaN(Number(id)) ? Number(id) : -1
|
||||
|
||||
const currentUid = usePermissionStore((s) => s.user_id)
|
||||
false && console.log(currentUid)
|
||||
|
||||
const { params, total, setPagination, resetParams, setTotal } =
|
||||
useAllTaskStore()
|
||||
|
||||
const [form, setForm] = useState<{
|
||||
search_id: string
|
||||
search_status: string
|
||||
}>({
|
||||
search_id: "",
|
||||
search_status: "0",
|
||||
})
|
||||
|
||||
const [records, setRecords] = useState<Task.DataProps[]>([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [queryTrigger, setQueryTrigger] = useState(0)
|
||||
|
||||
const [workflowTaskId, setWorkflowTaskId] = useState<number | null>(null)
|
||||
const [dispatchRecord, setDispatchRecord] = useState<Task.DataProps | null>(
|
||||
null
|
||||
)
|
||||
const [releaseRecord, setReleaseRecord] = useState<Task.DataProps | null>(
|
||||
null
|
||||
)
|
||||
|
||||
const userOptions = useMemo(() => {
|
||||
const arr: Array<{ label: string; value: string }> = []
|
||||
userEnums.allEnum?.forEach((label, value) => {
|
||||
arr.push({ label: String(label), value: String(value) })
|
||||
})
|
||||
return arr
|
||||
}, [userEnums.allEnum])
|
||||
|
||||
const appliedParams = useMemo(() => {
|
||||
const obj: Task.ListRequest = {
|
||||
...params,
|
||||
page_number: params.page_number ?? 1,
|
||||
page_size: params.page_size ?? 20,
|
||||
project_id: projectId !== -1 ? [projectId] : undefined,
|
||||
get_data: false,
|
||||
}
|
||||
if (form.search_id) {
|
||||
const idValue = Number(form.search_id)
|
||||
if (Number.isFinite(idValue)) obj.id = [idValue]
|
||||
}
|
||||
if (form.search_status !== "0") {
|
||||
const statusValue = Number(form.search_status)
|
||||
if (Number.isFinite(statusValue)) obj.label_status = [statusValue]
|
||||
} else {
|
||||
delete obj.label_status
|
||||
}
|
||||
return obj
|
||||
}, [form.search_id, form.search_status, params, projectId])
|
||||
|
||||
const load = useCallback(async () => {
|
||||
if (!queryTrigger) return
|
||||
if (projectId === -1) return
|
||||
setLoading(true)
|
||||
try {
|
||||
const res = await getTaskList(appliedParams)
|
||||
setRecords(res?.task_list ?? [])
|
||||
setTotal(res?.total_items ?? 0)
|
||||
} catch (e) {
|
||||
setRecords([])
|
||||
setTotal(0)
|
||||
notifications.show({
|
||||
color: "red",
|
||||
title: "加载失败",
|
||||
message: e instanceof Error ? e.message : "请求失败",
|
||||
})
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [appliedParams, projectId, queryTrigger, setTotal])
|
||||
|
||||
useEffect(() => {
|
||||
load()
|
||||
}, [load])
|
||||
|
||||
const columns = useMemo(() => {
|
||||
const cols: DataTableColumn<Task.DataProps>[] = [
|
||||
{ accessor: "id", title: "任务ID", width: 90 },
|
||||
{
|
||||
accessor: "label_status",
|
||||
title: "状态",
|
||||
width: 130,
|
||||
render: (record) => (
|
||||
<TaskStatusTag
|
||||
status={record.label_status}
|
||||
rejected={record.rejected}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessor: "current_username",
|
||||
title: "当前处理人",
|
||||
width: 120,
|
||||
render: (record) => record.current_username ?? "-",
|
||||
},
|
||||
{
|
||||
accessor: "label_username",
|
||||
title: "标注员",
|
||||
width: 120,
|
||||
render: (record) => record.label_username ?? "-",
|
||||
},
|
||||
{
|
||||
accessor: "review1_username",
|
||||
title: "审核员",
|
||||
width: 120,
|
||||
render: (record) => record.review1_username ?? "-",
|
||||
},
|
||||
{
|
||||
accessor: "review2_username",
|
||||
title: "复审员",
|
||||
width: 120,
|
||||
render: (record) => record.review2_username ?? "-",
|
||||
},
|
||||
{
|
||||
accessor: "label_object_size.object_size",
|
||||
title: "对象总数",
|
||||
width: 110,
|
||||
render: (record) => record.label_object_size?.object_size ?? "-",
|
||||
},
|
||||
{
|
||||
accessor: "operation",
|
||||
title: "操作",
|
||||
width: 140,
|
||||
textAlign: "center",
|
||||
render: (record) => (
|
||||
<Group gap={6} justify="center" wrap="nowrap">
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
color="blue"
|
||||
onClick={() => setWorkflowTaskId(record.id)}
|
||||
title="工作流">
|
||||
<IconRoute size={16} />
|
||||
</ActionIcon>
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
color="violet"
|
||||
onClick={() => setDispatchRecord(record)}
|
||||
title="调度">
|
||||
<IconArrowsShuffle size={16} />
|
||||
</ActionIcon>
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
color="red"
|
||||
onClick={() => setReleaseRecord(record)}
|
||||
title="释放">
|
||||
<IconTrashX size={16} />
|
||||
</ActionIcon>
|
||||
</Group>
|
||||
),
|
||||
},
|
||||
]
|
||||
return cols
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
<Stack gap="sm" style={{ flex: 1, minHeight: 0 }}>
|
||||
<Paper
|
||||
withBorder
|
||||
p="sm"
|
||||
radius="md"
|
||||
style={{ borderColor: "rgba(0,0,0,0.06)" }}>
|
||||
<Stack gap="sm">
|
||||
{menuAction ? <div>{menuAction()}</div> : null}
|
||||
<Group justify="space-between" wrap="wrap" gap="sm">
|
||||
<Group gap="sm" wrap="wrap">
|
||||
<TextInput
|
||||
size="xs"
|
||||
label="任务ID"
|
||||
value={form.search_id}
|
||||
onChange={(e) =>
|
||||
setForm((s) => ({ ...s, search_id: e.currentTarget.value }))
|
||||
}
|
||||
style={{ width: 160 }}
|
||||
/>
|
||||
<Select
|
||||
size="xs"
|
||||
label="状态"
|
||||
data={Object.entries(TaskStatusOpts).map(
|
||||
([value, label]) => ({
|
||||
value,
|
||||
label,
|
||||
})
|
||||
)}
|
||||
value={form.search_status}
|
||||
onChange={(v) =>
|
||||
setForm((s) => ({ ...s, search_status: v ?? "0" }))
|
||||
}
|
||||
allowDeselect={false}
|
||||
style={{ width: 160 }}
|
||||
/>
|
||||
<Button
|
||||
size="xs"
|
||||
leftSection={<IconRefresh size={16} />}
|
||||
loading={loading}
|
||||
onClick={() => setQueryTrigger((v) => v + 1)}>
|
||||
刷新
|
||||
</Button>
|
||||
</Group>
|
||||
|
||||
<Group gap="xs" wrap="wrap">
|
||||
<Button
|
||||
size="xs"
|
||||
variant="default"
|
||||
onClick={() => {
|
||||
resetParams()
|
||||
setForm({ search_id: "", search_status: "0" })
|
||||
setQueryTrigger((v) => v + 1)
|
||||
}}>
|
||||
重置
|
||||
</Button>
|
||||
<Button
|
||||
size="xs"
|
||||
onClick={() => {
|
||||
setPagination(1, params.page_size ?? 20)
|
||||
setQueryTrigger((v) => v + 1)
|
||||
}}>
|
||||
查询
|
||||
</Button>
|
||||
</Group>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
<Group gap={0} align="stretch" style={{ flex: 1, minHeight: 0 }}>
|
||||
<DataTable<Task.DataProps>
|
||||
width="100%"
|
||||
style={{ width: "100%" }}
|
||||
withTableBorder
|
||||
withRowBorders
|
||||
pinFirstColumn
|
||||
pinLastColumn
|
||||
scrollAreaProps={{ type: "auto" }}
|
||||
fetching={loading}
|
||||
records={records}
|
||||
columns={columns}
|
||||
totalRecords={total}
|
||||
recordsPerPage={params.page_size ?? 20}
|
||||
page={params.page_number ?? 1}
|
||||
onPageChange={(p) => {
|
||||
setPagination(p, params.page_size ?? 20)
|
||||
setQueryTrigger((v) => v + 1)
|
||||
}}
|
||||
onRecordsPerPageChange={(s) => {
|
||||
setPagination(1, s)
|
||||
setQueryTrigger((v) => v + 1)
|
||||
}}
|
||||
recordsPerPageOptions={[10, 20, 50, 100]}
|
||||
noRecordsText="暂无数据"
|
||||
/>
|
||||
</Group>
|
||||
</Stack>
|
||||
|
||||
<WorkflowModal
|
||||
opened={workflowTaskId !== null}
|
||||
taskId={workflowTaskId}
|
||||
onCloseAction={() => setWorkflowTaskId(null)}
|
||||
/>
|
||||
<DispatchModal
|
||||
opened={dispatchRecord !== null}
|
||||
record={dispatchRecord}
|
||||
userOptions={userOptions}
|
||||
onCloseAction={(refresh) => {
|
||||
setDispatchRecord(null)
|
||||
if (refresh) setQueryTrigger((v) => v + 1)
|
||||
}}
|
||||
/>
|
||||
<ReleaseModal
|
||||
opened={releaseRecord !== null}
|
||||
record={releaseRecord}
|
||||
onCloseAction={(refresh) => {
|
||||
setReleaseRecord(null)
|
||||
if (refresh) setQueryTrigger((v) => v + 1)
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user