fix(/management/person/dashboard): component change

app/management/person/dashboard/components/PersonalProjectTable.tsx

@@ -9,6 +9,7 @@ import {
   Select,
   Table,
 } from "@mantine/core"
+
 import { IconRefresh } from "@tabler/icons-react"
 import dayjs from "dayjs"
 import duration from "dayjs/plugin/duration"
@@ -73,7 +74,10 @@ export default function PersonalProjectTable() {
       style={{ flexDirection: "column" }}>
       <Group justify="flex-end">
         <Button
-          variant="filled"
+          size={"xs"}
+          fz={"sm"}
+          fw={500}
+          radius="sm"
           onClick={load}
           loading={loading}
           leftSection={<IconRefresh size={16} />}>

app/management/person/dashboard/components/PersonalTaskTable.tsx

@@ -1,27 +1,18 @@
 "use client"
 
 import { getUserTaskList } from "@/components/label/api/task"
+import { Task } from "@/components/label/api/task/typing"
 import {
   useBackUrlStore,
   usePermissionStore,
 } from "@/components/label/store/auth"
 import { TaskStatusEnum } from "@/components/label/utils/constants"
-import {
-  Anchor,
-  Badge,
-  Button,
-  Group,
-  Pagination,
-  ScrollArea,
-  Select,
-  Table,
-  Text,
-} from "@mantine/core"
+import { Badge, Button, Group, Text, UnstyledButton } from "@mantine/core"
 import { IconRefresh } from "@tabler/icons-react"
+import { DataTable, DataTableColumn } from "mantine-datatable"
 import { useRouter } from "next/navigation"
 import { useCallback, useEffect, useMemo, useState } from "react"
-
-const pageSizeOptions = [50, 100, 200]
+import { runCommand } from "./util"
 
 function getStatusColor(status?: number | null) {
   switch (status) {
@@ -49,7 +40,7 @@ export default function PersonalTaskTable() {
   const [page, setPage] = useState(1)
   const [pageSize, setPageSize] = useState(50)
   const [totalItems, setTotalItems] = useState(0)
-  const [records, setRecords] = useState<any[]>([])
+  const [records, setRecords] = useState<Task.SimpleTaskItem[]>([])
   const [loading, setLoading] = useState(false)
 
   const totalPages = useMemo(() => {
@@ -84,6 +75,92 @@ export default function PersonalTaskTable() {
     else setPage(1)
   }
 
+  const [currentRowId, setCurrentRowId] = useState<number>(0)
+
+  const originColumn = useMemo(() => {
+    let column: DataTableColumn<Task.SimpleTaskItem>[] = [
+      {
+        accessor: "project_name",
+        title: "项目名称",
+        width: 150,
+        render: (record: Task.SimpleTaskItem) => {
+          return <Text>{record.project_name}</Text>
+        },
+      },
+      {
+        accessor: "id",
+        title: "任务ID",
+        width: 150,
+        render: (record: Task.SimpleTaskItem) => {
+          return (
+            <UnstyledButton
+              px={6}
+              variant="transparent"
+              onClick={async () => {
+                setCurrentRowId(record.id)
+                if ([4, 5, 6].includes(record.label_type)) {
+                  setBackProps(`/project/person`)
+                  router.push(
+                    `/label?project_id=${record.project_id}&task_id=${record.id}`
+                  )
+                } else {
+                  await runCommand(
+                    record.id.toString(),
+                    user_name,
+                    user_password
+                  )
+                }
+              }}
+              title={record.id.toString()}
+              c={"brand"}
+              style={{
+                fontSize: "14px",
+                maxWidth: "100%",
+                whiteSpace: "nowrap",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+              }}>
+              {record.id}
+            </UnstyledButton>
+          )
+        },
+      },
+      {
+        accessor: "label_status",
+        title: "状态",
+        width: 80,
+        render: (record: Task.SimpleTaskItem) => {
+          return (
+            <Badge
+              color={getStatusColor(record.label_status)}
+              style={{
+                fontSize: "12px",
+                padding: "2px 6px",
+              }}>
+              {TaskStatusEnum.get(record.label_status)}
+            </Badge>
+          )
+        },
+      },
+      {
+        accessor: "label_username",
+        title: "标注员",
+        width: 80,
+      },
+      {
+        accessor: "review1_username",
+        title: "审核员",
+        width: 80,
+      },
+      {
+        accessor: "review2_username",
+        title: "复审员",
+        width: 80,
+      },
+    ]
+    return column
+  }, [router, setBackProps, user_name, user_password])
+
   return (
     <Group
       gap="sm"
@@ -92,89 +169,49 @@ export default function PersonalTaskTable() {
       style={{ flexDirection: "column" }}>
       <Group justify="flex-end">
         <Button
-          variant="filled"
+          size={"xs"}
+          fz={"sm"}
+          fw={500}
+          radius="sm"
           onClick={resetData}
           loading={loading}
           leftSection={<IconRefresh size={16} />}>
           更新
         </Button>
       </Group>
-      <Group gap={0} align="stretch" style={{ flex: 1, minHeight: 0 }}>
-        <ScrollArea style={{ flex: 1 }}>
-          <Table withTableBorder withColumnBorders striped highlightOnHover>
-            <Table.Thead>
-              <Table.Tr>
-                <Table.Th style={{ width: 260 }}>项目名称</Table.Th>
-                <Table.Th style={{ width: 110 }}>任务ID</Table.Th>
-                <Table.Th style={{ width: 160 }}>状态</Table.Th>
-                <Table.Th style={{ width: 90 }}>标注员</Table.Th>
-                <Table.Th style={{ width: 90 }}>审核员</Table.Th>
-                <Table.Th style={{ width: 90 }}>复审员</Table.Th>
-              </Table.Tr>
-            </Table.Thead>
-            <Table.Tbody>
-              {records.map((record) => (
-                <Table.Tr key={record.id}>
-                  <Table.Td>
-                    <Text lineClamp={1}>{record.project_name ?? "-"}</Text>
-                  </Table.Td>
-                  <Table.Td>
-                    <Anchor
-                      onClick={async (e) => {
-                        e.preventDefault()
-                        const labelType = record.label_type
-                        if ([4, 5, 6].includes(labelType)) {
-                          setBackProps("/management/person/dashboard")
-                          router.push(
-                            `/label?project_id=${record.project_id}&task_id=${record.id}`
-                          )
-                          return
-                        }
-                        if (user_name && user_password) {
-                          setBackProps("/management/person/dashboard")
-                          router.push(
-                            `/label?project_id=${record.project_id}&task_id=${record.id}`
-                          )
-                        }
-                      }}
-                      style={{ cursor: "pointer" }}>
-                      {record.id ?? "-"}
-                    </Anchor>
-                  </Table.Td>
-                  <Table.Td>
-                    <Badge
-                      color={getStatusColor(record.label_status)}
-                      variant="light">
-                      {`${TaskStatusEnum.get(record.label_status) ?? "-"}${
-                        record.rejected ? "返工" : ""
-                      }`}
-                    </Badge>
-                  </Table.Td>
-                  <Table.Td>{record.label_username ?? "-"}</Table.Td>
-                  <Table.Td>{record.review1_username ?? "-"}</Table.Td>
-                  <Table.Td>{record.review2_username ?? "-"}</Table.Td>
-                </Table.Tr>
-              ))}
-            </Table.Tbody>
-          </Table>
-        </ScrollArea>
-      </Group>
-      <Group justify="space-between">
-        <Group gap="xs">
-          <Select
-            w={120}
-            value={String(pageSize)}
-            data={pageSizeOptions.map((v) => String(v))}
-            allowDeselect={false}
-            onChange={(value) => {
-              const next = Number(value)
-              if (!Number.isFinite(next)) return
-              setPageSize(next)
-              setPage(1)
-            }}
-          />
-        </Group>
-        <Pagination value={page} onChange={setPage} total={totalPages} />
+      <Group
+        gap={0}
+        align="stretch"
+        style={{ flex: 1, minHeight: 0, width: "100%" }}>
+        <DataTable<Task.SimpleTaskItem>
+          width="100%"
+          style={{ width: "100%" }}
+          styles={{
+            header: {
+              color: "var(--mantine-color-grey-text)",
+              backgroundColor: "var(--mantine-datatable-striped-color)",
+            },
+          }}
+          withTableBorder
+          withRowBorders
+          pinFirstColumn
+          pinLastColumn
+          rowBackgroundColor={({ id }) => {
+            if (id === currentRowId)
+              return "var(--mantine-datatable-highlight-on-hover-color-light, var(--mantine-datatable-highlight-on-hover-color))"
+          }}
+          scrollAreaProps={{ type: "auto" }}
+          records={records}
+          onRecordsPerPageChange={setPageSize}
+          recordsPerPageOptions={[10, 15, 20]}
+          columns={originColumn}
+          totalRecords={totalItems}
+          recordsPerPage={pageSize}
+          page={page}
+          onPageChange={setPage}
+          noRecordsText="暂无数据"
+          recordsPerPageLabel="当前页数"
+        />
       </Group>
     </Group>
   )

app/management/person/dashboard/components/util.ts

@@ -0,0 +1,41 @@
+import { platform } from "@tauri-apps/plugin-os"
+import { Command } from "@tauri-apps/plugin-shell"
+
+export const runCommand = async (
+  taskId: string,
+  name: string,
+  password: string
+) => {
+  const platformName = platform()
+  const cmdStr = /^win/i.test(platformName)
+    ? "labeltool_windows"
+    : "labeltool_linux"
+
+  let dStr = process.env.NEXT_PUBLIC_URL || ""
+
+  const command = Command.create(cmdStr, [
+    "--t",
+    taskId,
+    "--u",
+    name,
+    "--p",
+    password,
+    "--d",
+    dStr,
+  ])
+  // command.on("close", (data) => {
+  //   console.log(
+  //     `command finished with code ${data.code} and signal ${data.signal}`
+  //   );
+  // });
+  // command.on("error", (error) => console.error(`command error: "${error}"`));
+  // command.stdout.on("data", (line) =>
+  //   console.log(`command stdout: "${line}"`)
+  // );
+  // command.stderr.on("data", (line) =>
+  //   console.log(`command stderr: "${line}"`)
+  // );
+
+  await command.execute()
+  // console.log("pid:", child);
+}