feat(team): add page

2026-02-27 09:51:33 +08:00
parent 5325ef7b95
commit 6cb8f98004
29 changed files with 4557 additions and 11 deletions
--- a/app/management/team/cost/page.tsx
+++ b/app/management/team/cost/page.tsx
@@ -0,0 +1,197 @@
+"use client"
+
+import {
+  downloadSettlementForm,
+  exportSettlementForm,
+  getDownloadLog,
+} from "@/components/label/api/workload"
+import useAuth from "@/components/label/hooks/useAuth"
+import {
+  ActionIcon,
+  Button,
+  Group,
+  Paper,
+  Stack,
+  Text,
+} from "@mantine/core"
+import { notifications } from "@mantine/notifications"
+import { IconDownload, IconFileExport, IconRefresh } from "@tabler/icons-react"
+import dayjs from "dayjs"
+import { DataTable, DataTableColumn } from "mantine-datatable"
+import { useCallback, useEffect, useMemo, useState } from "react"
+
+function triggerDownload(blob: Blob, fileName: string) {
+  const url = window.URL.createObjectURL(blob)
+  const link = document.createElement("a")
+  link.href = url
+  link.download = fileName
+  link.click()
+  window.URL.revokeObjectURL(url)
+}
+
+type LogRecord = {
+  id: number
+  create_at: string
+  file_name: string
+  create_user: string
+}
+
+export default function TeamCostPage() {
+  const { isShow } = useAuth()
+
+  const [records, setRecords] = useState<LogRecord[]>([])
+  const [loading, setLoading] = useState(false)
+  const [exporting, setExporting] = useState(false)
+
+  const load = useCallback(async () => {
+    try {
+      setLoading(true)
+      const res = await getDownloadLog()
+      const list = (res ?? []) as LogRecord[]
+      setRecords(list.sort((a, b) => (b.id ?? 0) - (a.id ?? 0)))
+    } catch (e) {
+      setRecords([])
+      notifications.show({
+        color: "red",
+        title: "加载失败",
+        message: e instanceof Error ? e.message : "请求失败",
+      })
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    load()
+  }, [load])
+
+  const handleExport = async () => {
+    try {
+      setExporting(true)
+      const time = dayjs().subtract(1, "month")
+      const year = time.year()
+      const month = time.month() + 1
+      const blob = await exportSettlementForm({ year, month })
+      const fileName = `结算表格_${year}_${String(month).padStart(2, "0")}.zip`
+      triggerDownload(blob, fileName)
+      notifications.show({
+        color: "green",
+        title: "导出成功",
+        message: "已开始下载结算表格",
+      })
+      load()
+    } catch (e) {
+      notifications.show({
+        color: "red",
+        title: "导出失败",
+        message: e instanceof Error ? e.message : "请求失败",
+      })
+    } finally {
+      setExporting(false)
+    }
+  }
+
+  const columns = useMemo(() => {
+    const cols: DataTableColumn<LogRecord>[] = [
+      { accessor: "id", title: "序号", width: 80 },
+      {
+        accessor: "create_at",
+        title: "导出时间",
+        width: 200,
+        render: (record) =>
+          record.create_at ? dayjs(record.create_at).format("YYYY-MM-DD HH:mm:ss") : "-",
+      },
+      { accessor: "file_name", title: "导出文件名", width: 280 },
+      { accessor: "create_user", title: "操作人", width: 160 },
+      {
+        accessor: "operation",
+        title: "操作",
+        width: 90,
+        textAlign: "center",
+        render: (record) => (
+          <ActionIcon
+            variant="subtle"
+            color="blue"
+            disabled={!isShow("download")}
+            onClick={async () => {
+              try {
+                const blob = await downloadSettlementForm({ id: record.id })
+                const fileName = record.file_name || `结算表格_${record.id}.zip`
+                triggerDownload(blob, fileName)
+                notifications.show({
+                  color: "green",
+                  title: "下载成功",
+                  message: "已开始下载文件",
+                })
+              } catch (e) {
+                notifications.show({
+                  color: "red",
+                  title: "下载失败",
+                  message: e instanceof Error ? e.message : "请求失败",
+                })
+              }
+            }}>
+            <IconDownload size={16} />
+          </ActionIcon>
+        ),
+      },
+    ]
+    return cols
+  }, [isShow])
+
+  return (
+    <Stack w="100%" h="calc(100vh - 56px)" p="md" gap="md">
+      <Paper
+        withBorder
+        p="md"
+        radius="md"
+        style={{
+          borderColor:
+            "light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-4))",
+        }}>
+        <Group justify="space-between" wrap="wrap">
+          <Group>
+            <Button
+              size="xs"
+              radius="xs"
+              leftSection={<IconFileExport size={16} />}
+              onClick={handleExport}
+              loading={exporting}
+              disabled={!isShow("export")}>
+              结算表格导出
+            </Button>
+            <ActionIcon onClick={load} variant="default" loading={loading}>
+              <IconRefresh size={16} />
+            </ActionIcon>
+          </Group>
+          <Text size="sm" c="dimmed">
+            导出记录
+          </Text>
+        </Group>
+      </Paper>
+
+      <Paper
+        withBorder
+        p="md"
+        radius="md"
+        style={{
+          borderColor:
+            "light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-4))",
+          flex: 1,
+          minHeight: 0,
+          display: "flex",
+        }}>
+        <DataTable<LogRecord>
+          withTableBorder
+          withRowBorders
+          fetching={loading}
+          records={records}
+          columns={columns}
+          noRecordsText="暂无数据"
+          scrollAreaProps={{ type: "auto" }}
+          style={{ width: "100%" }}
+        />
+      </Paper>
+    </Stack>
+  )
+}