fix(project/detail): fix own

app/management/project/detail/OwnTaskTableContainer.tsx

@@ -5,22 +5,44 @@ import { getTaskList, taskAcquire } from "@/components/label/api/task"
 import { Task } from "@/components/label/api/task/typing"
 import {
   useBackUrlStore,
-  useOwnTaskStore,
   usePermissionStore,
 } from "@/components/label/store/auth"
 import { OwnTaskStatusOpts } from "@/components/label/utils/constants"
-import { Button, Group, Paper, Select, Stack, TextInput } from "@mantine/core"
+import {
+  Text,
+  ActionIcon,
+  Button,
+  Collapse,
+  Flex,
+  Group,
+  Paper,
+  Select,
+  SimpleGrid,
+  Stack,
+  TextInput,
+} from "@mantine/core"
 import { notifications } from "@mantine/notifications"
-import { IconRefresh } from "@tabler/icons-react"
 import { DataTable, DataTableColumn } from "mantine-datatable"
 import { useRouter, useSearchParams } from "next/navigation"
-import { JSX, useCallback, useEffect, useMemo, useState } from "react"
+import { useCallback, useEffect, useMemo, useState } from "react"
 import TaskStatusTag from "./components/TaskStatusTag"
 import { runCommand } from "./util"
+import {
+  IconChevronDown,
+  IconChevronUp,
+  IconRefresh,
+  IconSearch,
+} from "@tabler/icons-react"
+
+function createInitialFilters() {
+  return {
+    search_id: "",
+    search_status: "0",
+  }
+}
 
 export default function OwnTaskTableContainer(props: {
   info: ProjectDetail.DataProps | undefined
-  menuAction?: () => JSX.Element
   userEnums: {
     allEnum: Map<any, any>
     labelEnum: Map<any, any>
@@ -28,7 +50,7 @@ export default function OwnTaskTableContainer(props: {
     review2Enum: Map<any, any>
   }
 }) {
-  const { info, menuAction, userEnums } = props
+  const { info, userEnums } = props
   const urlParams = useSearchParams()
   const id = urlParams.get("id")
   const type = urlParams.get("type")
@@ -41,16 +63,18 @@ export default function OwnTaskTableContainer(props: {
   const user_name = usePermissionStore((s) => s.user_name)
   const user_password = usePermissionStore((s) => s.user_password)
 
-  const { params, total, resetParams, setPagination, setTotal } =
-    useOwnTaskStore()
+  const [total, setTotal] = useState(0)
 
+  const [pageNumber, setPageNumber] = useState(1)
+  const [pageSize, setPageSize] = useState(15)
+
+  const [searchExpanded, setSearchExpanded] = useState(false)
+
+  const [filters, setFilters] = useState(() => createInitialFilters())
   const [form, setForm] = useState<{
     search_id: string
     search_status: string
-  }>({
-    search_id: "",
-    search_status: "0",
-  })
+  }>(createInitialFilters())
 
   const [records, setRecords] = useState<Task.DataProps[]>([])
   const [loading, setLoading] = useState(false)
@@ -68,9 +92,8 @@ export default function OwnTaskTableContainer(props: {
   const appliedParams = useMemo(() => {
     const uid = typeof user_id === "number" ? user_id : Number(user_id ?? 0)
     const next: Task.ListRequest = {
-      ...params,
-      page_number: params.page_number ?? 1,
-      page_size: params.page_size ?? 20,
+      page_number: pageNumber ?? 1,
+      page_size: pageSize ?? 20,
       current_uid: uid ? [uid] : undefined,
       project_id: projectId !== -1 ? [projectId] : undefined,
       get_data: false,
@@ -87,7 +110,15 @@ export default function OwnTaskTableContainer(props: {
       delete next.label_status
     }
     return next
-  }, [form.search_id, form.search_status, params, projectId, user_id])
+  }, [
+    ,
+    form.search_id,
+    form.search_status,
+    pageNumber,
+    pageSize,
+    projectId,
+    user_id,
+  ])
 
   const load = useCallback(async () => {
     if (!queryTrigger) return
@@ -114,6 +145,12 @@ export default function OwnTaskTableContainer(props: {
     load()
   }, [load])
 
+  useEffect(() => {
+    queueMicrotask(() => {
+      setQueryTrigger((v) => v + 1)
+    })
+  }, [])
+
   const handleAcquireTask = async (label_action: 1 | 2 | 3) => {
     const uid = typeof user_id === "number" ? user_id : Number(user_id ?? 0)
     if (!uid || projectId === -1) return
@@ -232,26 +269,73 @@ export default function OwnTaskTableContainer(props: {
 
   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">
+      <Paper withBorder p="sm" radius="sm">
+        <Group justify="space-between" wrap="wrap" gap="sm">
+          <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={() => {
+                const next = createInitialFilters()
+                setFilters(next)
+                setForm(next)
+                setPageNumber(1)
+              }}>
+              重置
+            </Button>
+            <Button
+              size="xs"
+              radius={"xs"}
+              leftSection={<IconSearch size={16} />}
+              onClick={() => {
+                setPageNumber(1)
+                setForm({ ...filters })
+              }}>
+              查询
+            </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
                 size="xs"
+                radius="xs"
                 label="任务ID"
-                value={form.search_id}
+                value={filters.search_id}
                 onChange={(e) =>
-                  setForm((s) => ({ ...s, search_id: e.currentTarget.value }))
+                  setFilters((s) => ({
+                    ...s,
+                    search_id: e.target.value,
+                  }))
                 }
                 style={{ width: 160 }}
               />
               <Select
                 size="xs"
+                radius="xs"
                 label="状态"
                 data={Object.entries(OwnTaskStatusOpts).map(
                   ([value, label]) => ({
@@ -259,28 +343,34 @@ export default function OwnTaskTableContainer(props: {
                     label,
                   })
                 )}
-                value={form.search_status}
+                value={filters.search_status}
                 onChange={(v) =>
-                  setForm((s) => ({ ...s, search_status: v ?? "0" }))
+                  setFilters((s) => ({ ...s, search_status: v ?? "0" }))
                 }
                 allowDeselect={false}
                 style={{ width: 160 }}
               />
-              <Button
-                size="xs"
-                leftSection={<IconRefresh size={16} />}
-                loading={loading}
-                onClick={() => {
-                  setPagination(1, params.page_size ?? 20)
-                  setQueryTrigger((v) => v + 1)
-                }}>
-                刷新
-              </Button>
-            </Group>
+            </SimpleGrid>
+          </Stack>
+        </Collapse>
+      </Paper>
 
-            <Group gap="xs" wrap="wrap">
+      <Paper
+        withBorder
+        p="md"
+        radius="sm"
+        style={{
+          flex: 1,
+          minHeight: 0,
+          display: "flex",
+          flexDirection: "column",
+        }}>
+        <Stack gap={12} align="stretch" style={{ flex: 1, minHeight: 0 }}>
+          <Flex justify={"space-between"} align="center" w="100%">
+            <Flex gap={12}>
               <Button
                 size="xs"
+                radius="xs"
                 variant="default"
                 disabled={!isLabel}
                 onClick={() => handleAcquireTask(1)}>
@@ -288,6 +378,7 @@ export default function OwnTaskTableContainer(props: {
               </Button>
               <Button
                 size="xs"
+                radius="xs"
                 variant="default"
                 disabled={!isReview1}
                 onClick={() => handleAcquireTask(2)}>
@@ -295,61 +386,42 @@ export default function OwnTaskTableContainer(props: {
               </Button>
               <Button
                 size="xs"
+                radius="xs"
                 variant="default"
                 disabled={!isReview2}
                 onClick={() => handleAcquireTask(3)}>
                 领取复审
               </Button>
-              <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>
+            </Flex>
+            <ActionIcon onClick={load} variant="transparent">
+              <IconRefresh size={16} />
+            </ActionIcon>
+          </Flex>
+          <DataTable<Task.DataProps>
+            width="100%"
+            style={{ width: "100%" }}
+            withTableBorder
+            withRowBorders
+            pinFirstColumn
+            pinLastColumn
+            scrollAreaProps={{ type: "auto" }}
+            fetching={loading}
+            records={records}
+            columns={columns}
+            totalRecords={total}
+            recordsPerPage={pageSize}
+            page={pageNumber}
+            onPageChange={(p) => setPageNumber(p)}
+            onRecordsPerPageChange={(s) => {
+              setPageSize(s)
+              setPageNumber(1)
+            }}
+            recordsPerPageOptions={[10, 15, 20]}
+            noRecordsText="暂无数据"
+            recordsPerPageLabel="当前页数"
+          />
         </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>
   )
 }