/**
* filekorolheader: 企业管理 - 企业信息管理与维护页面
* 功能:企业列表查询、详情查看、状态管理、分页筛选
* 路径:/central-config/tenant/enterprise-management
* 规范:遵循crop-x/docs/开发项目规范.md,使用useReducer状态管理,API集成,shadcn语义化样式
*/
'use client';
import { useEffect, useMemo, useState, useCallback } from 'react';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '@/components/ui/dialog';
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from '@/components/ui/alert-dialog';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { ScrollArea } from '@/components/ui/scroll-area';
import { Label } from '@/components/ui/label';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import { Building2, Eye, Power, PowerOff, Plus, FileText, CreditCard, User, Search } from 'lucide-react';
import { toast } from 'sonner';
import SearchFormPagination, {
type SearchFieldConfig,
type TableColumnConfig
} from '@/components/common/searchFormPagination';
import { fetchTenants, transformTenantData, enableTenant, disableTenant, createEnterprise, TenantsQueryParams, Enterprise } from './components/enterpriseApi';
import { CreateEnterpriseDialog } from './components/CreateEnterpriseDialog';
// Utility functions
const getStatusBadge = (status: 'active' | 'inactive') => {
if (status === 'active') {
return (
启用
);
}
return (
禁用
);
};
const getAuditStatusBadge = (auditStatus: Enterprise['auditStatus']) => {
switch (auditStatus) {
case 'draft':
return (
草稿
);
case 'pending':
return (
待审核
);
case 'approved':
return (
审核通过
);
case 'rejected':
return (
已拒绝
);
default:
return (
草稿
);
}
};
export default function EnterpriseManagement() {
// 对话框状态管理
const [dialogs, setDialogs] = useState({
showViewDialog: false,
showAddDialog: false,
showStatusDialog: false,
selectedEnterprise: null as Enterprise | null,
statusAction: 'enable' as 'enable' | 'disable'
});
const dispatch = (action: any) => {
switch (action.type) {
case 'SET_SELECTED_ENTERPRISE':
setDialogs(prev => ({ ...prev, selectedEnterprise: action.payload }));
break;
case 'TOGGLE_VIEW_DIALOG':
setDialogs(prev => ({ ...prev, showViewDialog: action.payload }));
break;
case 'TOGGLE_ADD_DIALOG':
setDialogs(prev => ({ ...prev, showAddDialog: action.payload }));
break;
case 'TOGGLE_STATUS_DIALOG':
setDialogs(prev => ({ ...prev, showStatusDialog: action.payload }));
break;
case 'SET_STATUS_ACTION':
setDialogs(prev => ({ ...prev, statusAction: action.payload }));
break;
case 'RESET_FORM_DATA':
setDialogs(prev => ({ ...prev, selectedEnterprise: null }));
break;
}
};
// 搜索字段配置
const searchFields: SearchFieldConfig[] = [
{
key: 'search',
label: '搜索',
type: 'text',
placeholder: '搜索企业名称、编码...',
},
{
key: 'audit_status',
label: '审核状态',
type: 'select',
placeholder: '审核状态',
defaultValue: 'all',
options: [
{ value: 'all', label: '全部状态' },
{ value: '草稿', label: '草稿' },
{ value: '待审核', label: '待审核' },
{ value: '已通过', label: '审核通过' },
{ value: '已拒绝', label: '已拒绝' },
],
},
];
// 表格列配置
const columns: TableColumnConfig[] = [
{
key: 'code',
label: '企业编码',
width: '120px',
},
{
key: 'name',
label: '企业名称',
render: (value: string) => (
{value}
),
},
{
key: 'type',
label: '企业类型',
render: (value: string) => (
{value}
),
},
{
key: 'registrant',
label: '登记人',
render: (value?: string) => value || '-',
},
{
key: 'contactPhone',
label: '联系电话',
render: (value?: string) => value || '-',
},
{
key: 'createdAt',
label: '创建时间',
width: '160px',
},
{
key: 'auditStatus',
label: '审核状态',
render: (value: Enterprise['auditStatus']) => getAuditStatusBadge(value),
},
{
key: 'status',
label: '状态',
render: (value: Enterprise['status']) => getStatusBadge(value),
},
{
key: 'actions',
label: '操作',
render: (_: any, row: Enterprise) => (
{row.status === 'active' ? (
) : (
)}
),
},
];
// 简化的状态管理 - 只需要存储数据和加载状态
const [enterprises, setEnterprises] = useState([]);
const [pagination, setPagination] = useState({
page: 1,
size: 10,
total: 0,
totalPages: 0,
hasNext: false,
hasPrev: false,
});
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
const [searchFilters, setSearchFilters] = useState>({
search: '',
audit_status: 'all'
});
// 数据加载函数 - 移除不必要的依赖避免重复调用
const loadEnterprises = useCallback(async (params?: {
filters?: Record;
pagination?: { page: number; size: number };
sort?: { sortBy?: string; sortOrder?: 'asc' | 'desc' };
}) => {
try {
console.log('调用了loadEnterprises')
setLoading(true);
setError(null);
const finalParams: TenantsQueryParams = {
search: (params?.filters?.search ?? searchFilters.search) || undefined,
audit_status: params?.filters?.audit_status ?? searchFilters.audit_status,
page: params?.pagination?.page || pagination.page,
size: params?.pagination?.size || pagination.size,
order_by: params?.sort?.sortBy,
sort_order: params?.sort?.sortOrder,
};
// 处理audit_status,如果为'all'则不传该参数
if (finalParams.audit_status === 'all') {
finalParams.audit_status = undefined;
}
const response = await fetchTenants(finalParams);
const transformedData = response.data.map(transformTenantData);
setEnterprises(transformedData);
setPagination({
page: response.page,
size: response.size,
total: response.total,
totalPages: response.total_pages,
hasNext: response.has_next,
hasPrev: response.has_prev,
});
} catch (err) {
const errorMessage = err instanceof Error ? err.message : '加载企业数据失败';
setError(errorMessage);
toast.error(errorMessage);
} finally {
setLoading(false);
}
}, []); // 移除所有依赖,使用参数传递状态变化
// 事件处理器
const handleSearch = useCallback((filters: Record) => {
setSearchFilters(filters);
// 搜索时重置到第一页
loadEnterprises({
filters,
pagination: { page: 1, size: pagination.size }
});
}, [loadEnterprises, pagination.size]);
const handleSort = useCallback((sortBy: string, sortOrder: 'asc' | 'desc') => {
// 排序时重置到第一页
loadEnterprises({
pagination: { page: 1, size: pagination.size },
sort: { sortBy, sortOrder }
});
}, [loadEnterprises, pagination.size]);
const handlePageChange = useCallback((page: number) => {
setPagination(prev => ({ ...prev, page }));
loadEnterprises({
pagination: { page, size: pagination.size }
});
}, [loadEnterprises, pagination.size]);
const handleSizeChange = useCallback((size: number) => {
setPagination(prev => ({ ...prev, size, page: 1 }));
loadEnterprises({
pagination: { page: 1, size }
});
}, [loadEnterprises]);
// 初始化数据加载
// useEffect(() => {
// loadEnterprises();
// }, []);
// 计算统计数据
const stats = useMemo(() => {
if (enterprises.length === 0) {
return { total: pagination.total, active: 0, inactive: 0 };
}
const active = enterprises.filter(e => e.status === 'active').length;
const inactive = enterprises.filter(e => e.status === 'inactive').length;
return { total: pagination.total, active, inactive };
}, [enterprises, pagination.total]);
// 业务事件处理器
const handleView = (enterprise: Enterprise) => {
dispatch({ type: 'SET_SELECTED_ENTERPRISE', payload: enterprise });
dispatch({ type: 'TOGGLE_VIEW_DIALOG', payload: true });
};
const handleStatusChange = (enterprise: Enterprise, action: 'enable' | 'disable') => {
dispatch({ type: 'SET_SELECTED_ENTERPRISE', payload: enterprise });
dispatch({ type: 'SET_STATUS_ACTION', payload: action });
dispatch({ type: 'TOGGLE_STATUS_DIALOG', payload: true });
};
const confirmStatusChange = async () => {
if (!dialogs.selectedEnterprise) return;
try {
setLoading(true);
const tenantId = dialogs.selectedEnterprise.id;
let updatedTenant;
if (dialogs.statusAction === 'enable') {
updatedTenant = await enableTenant(tenantId);
toast.success('企业已启用');
} else {
updatedTenant = await disableTenant(tenantId);
toast.success('企业已禁用');
}
// 状态更新成功后关闭对话框
dispatch({ type: 'TOGGLE_STATUS_DIALOG', payload: false });
// 重新加载数据来反映状态变化
const reloadParams: any = {
filters: searchFilters,
pagination: {
page: pagination.page,
size: pagination.size
}
};
loadEnterprises(reloadParams);
} catch (error) {
console.error('Status change failed:', error);
const errorMessage = error instanceof Error ? error.message : '状态更新失败';
toast.error(errorMessage);
} finally {
setLoading(false);
}
};
const handleCreateNew = () => {
dispatch({ type: 'RESET_FORM_DATA' });
dispatch({ type: 'TOGGLE_ADD_DIALOG', payload: true });
};
const handleCreateSuccess = () => {
// 创建成功后需要手动刷新页面数据
window.location.reload();
};
// 操作按钮配置
const actionButtons = (
);
return (
{/* Page Header - 自定义页面头部 */}
企业管理
管理平台所有企业信息,支持查询、查看详情、启用/禁用企业
{/* Statistics Cards - 保持原有统计功能 */}
{pagination.total}
全部企业数量
{/* 使用SearchFormPagination组件替换原有的企业列表 */}
}
emptyText="暂无企业数据"
/>
{/* View Enterprise Details Dialog */}
{/* Status Change Confirmation Dialog */}
dispatch({ type: 'TOGGLE_STATUS_DIALOG', payload: open })}>
确认{dialogs.statusAction === 'enable' ? '启用' : '禁用'}企业
{dialogs.statusAction === 'enable' ? (
<>
启用企业 {dialogs.selectedEnterprise?.name} 后,该企业用户将恢复正常登录和使用权限。
>
) : (
<>
禁用企业 {dialogs.selectedEnterprise?.name} 后,该企业所有用户将无法登录系统。此操作不会删除企业数据,可随时重新启用。
>
)}
取消
确认{dialogs.statusAction === 'enable' ? '启用' : '禁用'}
{/* Create Enterprise Dialog */}
dispatch({ type: 'TOGGLE_ADD_DIALOG', payload: open })}
onSuccess={handleCreateSuccess}
/>
);
}