senmesh-zc/src/routes/admin/user/index.tsx

import { createFileRoute } from "@tanstack/react-router";
import { ListPlus, Plus } from "lucide-react";
import { Button } from "@/components/ui/button";
import { DataTable } from "@/components/data-table";
import { useFetchList } from "./-hooks/useFetchList";
import { useState } from "react";
import { EditUserDialog } from "./-components/EditUserDialog";
import { BatchCreateUserDialog } from "./-components/BatchCreateUserDialog";
import { CancelUserConfirmDialog } from "./-components/CancelUserConfirmDialog";
import { Badge } from "@/components/ui/badge";
import { Pagination } from "@/components/pagination";
import { ResetUserPasswordDialog } from "@/components/reset-user-password-dialog";
import { useUserStatusActions } from "@/hooks/use-user-status-actions";

export const Route = createFileRoute("/admin/user/")({
  component: RouteComponent,
});

export function useColumns({
  handleCancelUser,
  handleEditUser,
  handleResetUserPassword,
  handleEnable,
  handleDisable,
}: any) {
  return [
    {
      accessorKey: "username",
      header: "用户名",
      cell: ({ row }: any) => <div>{row.getValue("username")}</div>,
    },
    {
      accessorKey: "realName",
      header: "姓名",
      cell: ({ row }: any) => <div>{row.getValue("realName")}</div>,
    },
    {
      accessorKey: "enabled",
      header: "启用状态",
      cell: ({ row }: any) =>
        Number(row.getValue("status")) === 3 ? (
          <Badge variant="secondary" className="text-red-600">
            -
          </Badge>
        ) : row.getValue("enabled") ? (
          <Badge className="bg-green-500/10 text-green-600">启用</Badge>
        ) : (
          <Badge className="bg-red-500/10 text-red-500">禁用</Badge>
        ),
    },
    {
      accessorKey: "status",
      header: "状态",
      cell: ({ row }: any) => (
        <div className="text-xs">
          {row.getValue("status") === 1 ? (
            <Badge variant="secondary">未激活</Badge>
          ) : row.getValue("status") === 2 ? (
            <Badge variant="secondary" className="text-green-600">
              已激活
            </Badge>
          ) : (
            <Badge variant="secondary" className="text-red-600">
              已注销
            </Badge>
          )}
        </div>
      ),
    },
    {
      accessorKey: "createTime",
      header: "创建日期",
      cell: ({ row }: any) => <div>{row.getValue("createTime")}</div>,
    },
    {
      id: "actions",
      enableHiding: false,
      header: "操作",
      cell: ({ row }: any) => {
        if (row.original.parentId === 0) {
          return null;
        }
        const record = row.original;
        return (
          <div className="space-x-2">
            <Button
              size="sm"
              variant="outline"
              onClick={() => handleEditUser(record)}
            >
              修改
            </Button>
            <Button
              size="sm"
              variant="outline"
              onClick={() => handleResetUserPassword(record)}
            >
              重置密码
            </Button>
            {Number(record.status) !== 3 && record.enabled && (
              <Button
                size="sm"
                variant="outline"
                onClick={() => handleDisable(record)}
              >
                禁用
              </Button>
            )}
            {Number(record.status) !== 3 && !record.enabled && (
              <Button
                size="sm"
                variant="outline"
                onClick={() => handleEnable(record)}
              >
                启用
              </Button>
            )}
            {Number(record.status) !== 3 && (
              <Button
                size="sm"
                variant="destructive"
                onClick={() => handleCancelUser(record)}
              >
                注销
              </Button>
            )}
          </div>
        );
      },
    },
  ];
}

function RouteComponent() {
  const [currentEntity, setCurrentEntity] = useState<any>(null);

  // 批量创建用户
  const [openBatchCreateUserDialog, setOpenBatchCreateUserDialog] =
    useState(false);

  // 修改用户
  const [openEditUserDialog, setOpenEditUserDialog] = useState(false);
  const handleEditUser = (record?: any) => {
    setCurrentEntity(record);
    setOpenEditUserDialog(true);
  };

  // 重置用户密码
  const [openResetUserPasswordDialog, setOpenResetUserPasswordDialog] =
    useState(false);
  const handleResetUserPassword = (record?: any) => {
    setCurrentEntity(record);
    setOpenResetUserPasswordDialog(true);
  };

  // 注销用户
  const [openCancelUserConfirmDialog, setOpenCancelUserConfirmDialog] =
    useState(false);
  const handleCancelUser = (record?: any) => {
    setCurrentEntity(record);
    setOpenCancelUserConfirmDialog(true);
  };

  // 启用/禁用（禁用走二次确认）
  const { enable, disable } = useUserStatusActions({
    onSuccess: () => query?.refetch(),
  });
  const handleEnable = (record: any) => {
    enable(record.id);
  };
  const handleDisable = (record: any) => {
    disable(record.id);
  };

  const { table, query } = useFetchList(() =>
    useColumns({
      handleCancelUser,
      handleEditUser,
      handleResetUserPassword,
      handleEnable,
      handleDisable,
    }),
  );

  return (
    <>
      <BatchCreateUserDialog
        open={openBatchCreateUserDialog}
        setOpen={setOpenBatchCreateUserDialog}
        refetch={query?.refetch}
      />
      <EditUserDialog
        open={openEditUserDialog}
        setOpen={setOpenEditUserDialog}
        data={currentEntity}
        refetch={query?.refetch}
      />
      <ResetUserPasswordDialog
        open={openResetUserPasswordDialog}
        setOpen={setOpenResetUserPasswordDialog}
        data={currentEntity}
      />
      <CancelUserConfirmDialog
        open={openCancelUserConfirmDialog}
        setOpen={setOpenCancelUserConfirmDialog}
        data={currentEntity}
        refetch={query?.refetch}
      />
      <div className="p-4 box-border min-h-full space-y-4">
        <div>
          <div className="text-lg">用户管理</div>
          <div className="text-xs text-black/50">管理单位用户信息</div>
        </div>
        <div className="p-4 rounded-lg border bg-white space-y-2">
          <div className="flex items-center gap-2">
            <Button onClick={() => handleEditUser()}>
              <Plus />
              新增
            </Button>
            <Button
              variant="outline"
              onClick={() => setOpenBatchCreateUserDialog(true)}
            >
              <ListPlus />
              批量创建
            </Button>
          </div>
          <div className="relative overflow-hidden">
            <DataTable table={table} query={query} />
            <Pagination
              table={table}
              className="justify-end p-2 sticky bottom-0 left-0 right-0 z-10 bg-white"
            />
          </div>
        </div>
      </div>
    </>
  );
}