生产管理系统 - 企业管理和用户管理 列表重构
This commit is contained in:
19
AGENTS.md
Normal file
19
AGENTS.md
Normal file
@@ -0,0 +1,19 @@
|
||||
# Repository Guidelines
|
||||
|
||||
## Project Structure & Module Organization
|
||||
The primary Vite application lives in `src/`, with feature folders such as `components/ai`, `components/auth`, and `components/dashboard` grouping screens, while shared primitives stay in `components/ui` alongside the `cn` helper. Domain utilities and integrations sit in `lib/`, typed contracts in `types/`, and global styles in `styles/`. Reference notes, migration guides, and UX briefs belong in `docs/`. Build artifacts are staged in `build/` and `bundles/` - regenerate them instead of editing in place. The `crop-x/` workspace hosts the API-driven Next.js toolchain, and `nextjs-frontend/` contains a Jest-enabled prototype; treat each as an isolated package with its own dependencies.
|
||||
|
||||
## Build, Test, and Development Commands
|
||||
Install dependencies with `npm install` at the repository root before any work. Launch the Vite dev server via `npm run dev` and build production bundles with `npm run build`. When touching the Next.js workspace, switch into `crop-x/` (or `nextjs-frontend/`) and run the same `npm run dev` / `npm run build` loop; lint with `npm run lint` and regenerate OpenAPI clients through `npm run generate-client`. The Next.js prototype keeps Jest wired - execute `npm test` or `npm run coverage` from `nextjs-frontend/` to validate UI contracts.
|
||||
|
||||
## Coding Style & Naming Conventions
|
||||
Author components as TypeScript function components, export them with PascalCase names, and keep props camelCase. Align layout and spacing with Tailwind classes; reach for `components/ui` primitives before adding bespoke markup. Follow the established single-quote, semicolon-terminated formatting visible in `src/App.tsx`. In the Next.js packages, run Prettier (`npm run prettier`) when formatting cross-file changes and keep ESLint green before opening a review.
|
||||
|
||||
## Testing Guidelines
|
||||
Automated coverage is concentrated in `nextjs-frontend/__tests__` using Jest and Testing Library; mirror existing file naming (`*.test.tsx`) when adding scenarios. For the Vite app, smoke the key dashboards after significant UI changes: authentication, machinery, fields, operations, assets, AI models, and irrigation. Document manual steps or screenshots in the PR when you touch flows without automated tests.
|
||||
|
||||
## Commit & Pull Request Guidelines
|
||||
Commit messages currently follow the "<22><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ϵͳ - <summary>" prefix; keep that Chinese tag and supply a short, imperative summary. Group related changes per commit so reviewers can bisect easily. Pull requests should describe the user-visible impact, list any config or schema updates, and attach before/after captures for UI adjustments. Link tracking tickets where possible and flag required environment variables (`VITE_API_BASE_URL`, etc.) if they change.
|
||||
|
||||
## Security & Configuration Tips
|
||||
Never commit secrets - use `.env.local` entries for API hosts and credentials, and document new keys in `docs/` instead. When adding third-party scripts, load them through vetted helpers like `lib/mapLoader` to keep CSP compliance intact. Review generated OpenAPI clients before shipping to ensure endpoints line up with the deployed backend.
|
||||
@@ -234,6 +234,56 @@ import {
|
||||
getTenantAuditLogsApiV1TenantsAuditLogsGet,
|
||||
} from "@/lib/api/sdk.gen"; 这个引入和用法。
|
||||
|
||||
### 11.Next.js 文件命名规范原则
|
||||
|
||||
**规范要求：**
|
||||
所有文件名必须严格遵循 Next.js 的文件命名规范，确保路由系统和页面组件能够正确识别。
|
||||
|
||||
**规范标准：**
|
||||
|
||||
#### 页面文件命名规范
|
||||
- **页面文件**：必须使用 `page.tsx` 作为页面文件名
|
||||
- **布局文件**：必须使用 `layout.tsx` 作为布局文件名
|
||||
- **加载状态**：必须使用 `loading.tsx` 作为加载状态文件名
|
||||
- **错误处理**：必须使用 `error.tsx` 作为错误处理文件名
|
||||
- **未找到页面**：必须使用 `not-found.tsx` 作为404页面文件名
|
||||
|
||||
#### 路由参数文件命名规范
|
||||
- **动态路由**：使用 `[param].tsx` 格式，如 `[id].tsx`
|
||||
- **可选参数**：使用 `[[param]].tsx` 格式
|
||||
- **全部匹配**：使用 `[...param].tsx` 格式
|
||||
- **可选全部匹配**：使用 `[[...param]].tsx` 格式
|
||||
|
||||
#### 组件和工具文件命名规范
|
||||
- **React 组件**：使用 PascalCase 命名，如 `UserProfile.tsx`
|
||||
- **工具函数**：使用 camelCase 命名，如 `dateUtils.ts`
|
||||
- **类型定义**：使用 camelCase 命名，如 `userTypes.ts`
|
||||
- **常量文件**：使用 UPPER_SNAKE_CASE 命名，如 `API_CONSTANTS.ts`
|
||||
|
||||
**示例目录结构：**
|
||||
```
|
||||
src/app/(app)/land-information/
|
||||
├── layout.tsx # 布局文件
|
||||
├── page.tsx # 主页面
|
||||
├── loading.tsx # 加载状态
|
||||
├── error.tsx # 错误处理
|
||||
└── archive/
|
||||
├── page.tsx # 归档页面
|
||||
├── statistics/
|
||||
│ ├── page.tsx # 统计页面
|
||||
│ └── components/
|
||||
│ ├── FilterPanel.tsx # 组件：PascalCase
|
||||
│ └── statisticsReducer.tsx # 工具文件：camelCase
|
||||
└── [id]/
|
||||
└── page.tsx # 动态路由页面
|
||||
```
|
||||
|
||||
**实施要点：**
|
||||
- 严格遵循文件命名规范，不得随意修改文件名
|
||||
- 页面文件必须使用 `page.tsx`，不能使用其他名称
|
||||
- 动态路由参数必须使用方括号 `[param]` 格式
|
||||
- 组件和工具文件遵循通用的 JavaScript/TypeScript 命名规范
|
||||
|
||||
## path：land-information/archive/statistics，name：统计分析页面开发经验与问题解决
|
||||
|
||||
### 问题1：图表横轴显示不完整
|
||||
@@ -820,3 +870,608 @@ engine.addMarker(marker);
|
||||
- **接口标准化**：统一的接口设计，便于功能模块替换
|
||||
- **配置化开发**：支持通过配置文件调整功能和行为
|
||||
- 理解了复杂应用中的组件分层和职责划分
|
||||
|
||||
---
|
||||
|
||||
## path：src/components/common/searchFormPagination，name：搜索、表格、分页三合一组件使用心得
|
||||
|
||||
### 组件概述
|
||||
|
||||
SearchFormPagination 是一个高度可配置的复合组件，集成了搜索表单、数据表格和分页功能。该组件采用了现代React开发模式，通过配置驱动的方式实现复杂数据展示页面的快速开发。
|
||||
|
||||
### 架构设计
|
||||
|
||||
#### 1. 组件层次结构
|
||||
|
||||
```
|
||||
SearchFormPagination (主组件)
|
||||
├── SearchFormComponent (搜索表单)
|
||||
│ ├── Input (文本搜索框)
|
||||
│ └── Select (下拉选择框)
|
||||
├── Card (表格容器)
|
||||
│ ├── Table (数据表格)
|
||||
│ │ ├── TableHeader (表头)
|
||||
│ │ └── TableBody (表体)
|
||||
│ └── PaginationComponent (分页组件)
|
||||
└── LoadingOverlay (加载遮罩)
|
||||
```
|
||||
|
||||
#### 2. 核心文件结构
|
||||
|
||||
```
|
||||
src/components/common/searchFormPagination/
|
||||
├── index.ts # 主组件导出
|
||||
├── page.tsx # SearchFormPagination主组件
|
||||
├── components/
|
||||
│ ├── SearchFormComponent.tsx # 搜索表单组件
|
||||
│ ├── PaginationComponent.tsx # 分页组件
|
||||
│ └── searchFormPaginationReducer.tsx # 状态管理（可选）
|
||||
```
|
||||
|
||||
### 核心功能特性
|
||||
|
||||
#### 1. 搜索表单功能
|
||||
|
||||
**防抖搜索机制**：
|
||||
```tsx
|
||||
// 关键实现：300ms防抖，避免频繁API调用
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
onFiltersChangeRef.current(localFilters);
|
||||
}, 300);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [localFilters]);
|
||||
```
|
||||
|
||||
**多字段配置支持**：
|
||||
```tsx
|
||||
const searchFields: SearchFieldConfig[] = [
|
||||
{
|
||||
key: 'search',
|
||||
type: 'text',
|
||||
placeholder: '搜索企业名称、编码...',
|
||||
},
|
||||
{
|
||||
key: 'audit_status',
|
||||
type: 'select',
|
||||
defaultValue: 'all',
|
||||
options: [
|
||||
{ value: 'all', label: '全部状态' },
|
||||
{ value: 'draft', label: '草稿' },
|
||||
// ...更多选项
|
||||
],
|
||||
},
|
||||
];
|
||||
```
|
||||
|
||||
#### 2. 表格展示功能
|
||||
|
||||
**动态列配置**：
|
||||
```tsx
|
||||
const columns: TableColumnConfig[] = [
|
||||
{
|
||||
key: 'name',
|
||||
label: '企业名称',
|
||||
sortable: true, // 支持排序
|
||||
render: (value, row) => (
|
||||
<div className="font-medium">{value}</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'status',
|
||||
label: '状态',
|
||||
render: (value) => getStatusBadge(value), // 自定义渲染
|
||||
},
|
||||
];
|
||||
```
|
||||
|
||||
**加载状态处理**：
|
||||
```tsx
|
||||
// 表格加载遮罩 - 提升用户体验
|
||||
{loading && (
|
||||
<div className="absolute inset-0 bg-white/50 dark:bg-black/50 backdrop-blur-sm z-10">
|
||||
<div className="flex items-center justify-center">
|
||||
<RefreshCw className="w-6 h-6 animate-spin" />
|
||||
<span>加载中...</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
```
|
||||
|
||||
#### 3. 分页功能
|
||||
|
||||
**完整分页配置**：
|
||||
```tsx
|
||||
interface PaginationConfig {
|
||||
page: number;
|
||||
size: number;
|
||||
total: number;
|
||||
totalPages: number;
|
||||
hasNext: boolean;
|
||||
hasPrev: boolean;
|
||||
}
|
||||
|
||||
<PaginationComponent
|
||||
pagination={pagination}
|
||||
onPageChange={handlePageChange}
|
||||
onSizeChange={handleSizeChange}
|
||||
sizeOptions={[10, 30, 50, 100]} // 可配置每页条数
|
||||
showSizeSelector={true}
|
||||
showPageInfo={true}
|
||||
/>
|
||||
```
|
||||
|
||||
**智能分页逻辑**：
|
||||
- 当只有一页数据时，分页按钮隐藏但每页条数选择器仍显示
|
||||
- 支持页码跳转和快速导航
|
||||
- 分页操作时保持当前搜索条件
|
||||
|
||||
### 使用示例
|
||||
|
||||
#### 完整调用示例
|
||||
|
||||
```tsx
|
||||
import { SearchFormPagination } from '@/components/common/searchFormPagination';
|
||||
|
||||
export default function EnterpriseManagement() {
|
||||
const [enterprises, setEnterprises] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [pagination, setPagination] = useState({
|
||||
page: 1,
|
||||
size: 10,
|
||||
total: 0,
|
||||
totalPages: 0,
|
||||
hasNext: false,
|
||||
hasPrev: false,
|
||||
});
|
||||
|
||||
// 搜索字段配置
|
||||
const searchFields = [
|
||||
{
|
||||
key: 'search',
|
||||
label: '搜索',
|
||||
type: 'text',
|
||||
placeholder: '搜索企业名称、编码...',
|
||||
},
|
||||
{
|
||||
key: 'audit_status',
|
||||
label: '审核状态',
|
||||
type: 'select',
|
||||
defaultValue: 'all',
|
||||
options: [
|
||||
{ value: 'all', label: '全部状态' },
|
||||
{ value: 'draft', label: '草稿' },
|
||||
{ value: 'pending', label: '待审核' },
|
||||
{ value: 'approved', label: '审核通过' },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
// 表格列配置
|
||||
const columns = [
|
||||
{
|
||||
key: 'name',
|
||||
label: '企业名称',
|
||||
sortable: true,
|
||||
render: (value) => <div className="font-medium">{value}</div>,
|
||||
},
|
||||
{
|
||||
key: 'auditStatus',
|
||||
label: '审核状态',
|
||||
render: (value) => getAuditStatusBadge(value),
|
||||
},
|
||||
{
|
||||
key: 'actions',
|
||||
label: '操作',
|
||||
render: (_, row) => (
|
||||
<div className="flex gap-2">
|
||||
<Button size="sm" onClick={() => handleView(row)}>
|
||||
查看
|
||||
</Button>
|
||||
<Button size="sm" variant="outline" onClick={() => handleEdit(row)}>
|
||||
编辑
|
||||
</Button>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
// 数据加载函数
|
||||
const loadEnterprises = useCallback(async (params) => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await fetchTenants(params);
|
||||
setEnterprises(response.data);
|
||||
setPagination({
|
||||
page: response.page,
|
||||
size: response.size,
|
||||
total: response.total,
|
||||
totalPages: response.total_pages,
|
||||
hasNext: response.has_next,
|
||||
hasPrev: response.has_prev,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Failed to load enterprises:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// 搜索处理
|
||||
const handleSearch = useCallback((filters) => {
|
||||
loadEnterprises({
|
||||
filters,
|
||||
pagination: { page: 1, size: pagination.size },
|
||||
});
|
||||
}, [loadEnterprises, pagination.size]);
|
||||
|
||||
// 分页处理
|
||||
const handlePageChange = useCallback((page) => {
|
||||
setPagination(prev => ({ ...prev, page }));
|
||||
loadEnterprises({
|
||||
pagination: { page, size: pagination.size },
|
||||
filters: searchFilters,
|
||||
});
|
||||
}, [loadEnterprises, pagination.size]);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<SearchFormPagination
|
||||
formTitle="企业列表"
|
||||
formRightContent={<Button onClick={handleCreate}>新建企业</Button>}
|
||||
searchFields={searchFields}
|
||||
columns={columns}
|
||||
data={enterprises}
|
||||
loading={loading}
|
||||
error={null}
|
||||
pagination={pagination}
|
||||
onPageChange={handlePageChange}
|
||||
onSizeChange={handleSizeChange}
|
||||
onSearch={handleSearch}
|
||||
emptyIcon={<Building2 className="w-12 h-12" />}
|
||||
emptyText="暂无企业数据"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### 接口定义
|
||||
|
||||
#### SearchFieldConfig - 搜索字段配置
|
||||
|
||||
```tsx
|
||||
interface SearchFieldConfig {
|
||||
key: string; // 字段标识
|
||||
label: string; // 显示标签
|
||||
type: 'text' | 'select'; // 字段类型
|
||||
placeholder?: string; // 占位符文本
|
||||
options?: Array<{ value: string; label: string }>; // 下拉选项
|
||||
defaultValue?: string; // 默认值
|
||||
}
|
||||
```
|
||||
|
||||
#### TableColumnConfig - 表格列配置
|
||||
|
||||
```tsx
|
||||
interface TableColumnConfig {
|
||||
key: string; // 数据字段名
|
||||
label: string; // 表头显示文本
|
||||
sortable?: boolean; // 是否支持排序
|
||||
width?: string; // 列宽设置
|
||||
render?: (value: any, row: any, index: number) => React.ReactNode; // 自定义渲染
|
||||
}
|
||||
```
|
||||
|
||||
#### SearchFormPaginationProps - 主组件属性
|
||||
|
||||
```tsx
|
||||
interface SearchFormPaginationProps<T = any> {
|
||||
// 搜索配置
|
||||
searchFields: SearchFieldConfig[];
|
||||
onSearch?: (filters: Record<string, string>) => void;
|
||||
|
||||
// 表格配置
|
||||
columns: TableColumnConfig[];
|
||||
data?: T[];
|
||||
loading?: boolean;
|
||||
error?: string | null;
|
||||
|
||||
// 分页配置
|
||||
pagination?: PaginationConfig;
|
||||
onPageChange?: (page: number) => void;
|
||||
onSizeChange?: (size: number) => void;
|
||||
onSort?: (sortBy: string, sortOrder: 'asc' | 'desc') => void;
|
||||
|
||||
// UI配置
|
||||
formTitle?: string;
|
||||
formRightContent?: React.ReactNode;
|
||||
emptyIcon?: React.ReactNode;
|
||||
emptyText?: string;
|
||||
showSizeSelector?: boolean;
|
||||
showPageInfo?: boolean;
|
||||
}
|
||||
```
|
||||
|
||||
### 最佳实践
|
||||
|
||||
#### 1. 性能优化
|
||||
|
||||
**使用 useCallback 优化函数引用**：
|
||||
```tsx
|
||||
// ✅ 正确做法：使用 useCallback 避免重复渲染
|
||||
const handleSearch = useCallback((filters) => {
|
||||
loadEnterprises({ filters });
|
||||
}, [loadEnterprises]);
|
||||
|
||||
const handlePageChange = useCallback((page) => {
|
||||
loadEnterprises({ page, size: pagination.size });
|
||||
}, [loadEnterprises, pagination.size]);
|
||||
|
||||
// ❌ 错误做法：每次渲染都创建新函数
|
||||
const handleSearch = (filters) => {
|
||||
loadEnterprises({ filters });
|
||||
};
|
||||
```
|
||||
|
||||
**统一数据重载函数**：
|
||||
```tsx
|
||||
// ✅ 推荐：统一的数据重载逻辑，避免代码重复
|
||||
const reloadData = useCallback(() => {
|
||||
const reloadParams = {
|
||||
filters: searchFilters,
|
||||
pagination: {
|
||||
page: pagination.page,
|
||||
size: pagination.size
|
||||
}
|
||||
};
|
||||
loadEnterprises(reloadParams);
|
||||
}, [loadEnterprises, searchFilters, pagination]);
|
||||
|
||||
// 在多个地方使用
|
||||
const handleCreateSuccess = () => reloadData();
|
||||
const confirmStatusChange = async () => {
|
||||
await enableTenant(tenantId);
|
||||
reloadData();
|
||||
};
|
||||
```
|
||||
|
||||
#### 2. 状态管理
|
||||
|
||||
**合理的状态依赖**：
|
||||
```tsx
|
||||
// ✅ 正确：包含所有必要的依赖
|
||||
const handlePageChange = useCallback((page: number) => {
|
||||
loadEnterprises({
|
||||
filters: searchFilters, // 确保搜索条件不会丢失
|
||||
pagination: { page, size: pagination.size }
|
||||
});
|
||||
}, [loadEnterprises, searchFilters, pagination.size]);
|
||||
```
|
||||
|
||||
#### 3. 错误处理
|
||||
|
||||
**完善的错误状态处理**：
|
||||
```tsx
|
||||
<SearchFormPagination
|
||||
// ...
|
||||
error={error}
|
||||
// 组件会自动显示错误状态
|
||||
/>
|
||||
```
|
||||
|
||||
#### 4. 扩展性设计
|
||||
|
||||
**新增字段的简单步骤**：
|
||||
1. 在 `searchFields` 数组中添加新配置
|
||||
2. 确保后端API支持新的查询参数
|
||||
3. 无需修改任何组件逻辑
|
||||
|
||||
```tsx
|
||||
// 添加新的下拉框只需一行配置
|
||||
{
|
||||
key: 'enterprise_status',
|
||||
label: '企业状态',
|
||||
type: 'select',
|
||||
defaultValue: 'all',
|
||||
options: [
|
||||
{ value: 'all', label: '全部状态' },
|
||||
{ value: 'active', label: '启用' },
|
||||
{ value: 'inactive', label: '禁用' },
|
||||
],
|
||||
}
|
||||
```
|
||||
|
||||
### 技术特点
|
||||
|
||||
#### 1. 类型安全
|
||||
- 完整的 TypeScript 类型定义
|
||||
- 泛型支持，确保数据类型一致性
|
||||
- 严格的接口约束
|
||||
|
||||
#### 2. 用户体验优化
|
||||
- 防抖搜索，避免频繁请求
|
||||
- 加载状态遮罩，提供视觉反馈
|
||||
- 分页状态保持，避免搜索条件丢失
|
||||
- 响应式设计，适配不同屏幕尺寸
|
||||
|
||||
#### 3. 可维护性
|
||||
- 配置驱动，减少硬编码
|
||||
- 组件化设计，职责单一
|
||||
- 完善的错误处理机制
|
||||
|
||||
#### 4. 可扩展性
|
||||
- 插件化的字段配置
|
||||
- 自定义渲染函数支持
|
||||
- 多种配置选项
|
||||
|
||||
### 常见问题解决
|
||||
|
||||
#### 1. 分页后搜索条件丢失
|
||||
|
||||
**问题**：切换页码或每页条数时，搜索条件被重置
|
||||
|
||||
**解决方案**：
|
||||
```tsx
|
||||
const handlePageChange = useCallback((page) => {
|
||||
// 确保传递当前的搜索条件
|
||||
loadEnterprises({
|
||||
filters: searchFilters, // 关键：传递搜索条件
|
||||
pagination: { page, size: pagination.size }
|
||||
});
|
||||
}, [loadEnterprises, searchFilters, pagination.size]);
|
||||
```
|
||||
|
||||
#### 2. 频繁API调用问题
|
||||
|
||||
**问题**：用户快速输入时触发过多API请求
|
||||
|
||||
**解决方案**：组件内置300ms防抖机制，无需额外处理
|
||||
|
||||
#### 3. 加载状态处理
|
||||
|
||||
**问题**：数据加载时用户体验不佳
|
||||
|
||||
**解决方案**：
|
||||
```tsx
|
||||
<SearchFormPagination
|
||||
loading={loading} // 自动显示加载遮罩和状态
|
||||
// ...
|
||||
/>
|
||||
```
|
||||
|
||||
### 性能优化最佳实践
|
||||
|
||||
#### 1. 事件驱动模式
|
||||
|
||||
**原则**：避免使用setTimeout，尽可能减少useEffect，使用事件驱动来实现状态更新。
|
||||
|
||||
**最佳实践**：
|
||||
```tsx
|
||||
// ❌ 避免写法：使用setTimeout和过多useEffect
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
loadData();
|
||||
}, 300);
|
||||
return () => clearTimeout(timer);
|
||||
}, [filters]);
|
||||
|
||||
useEffect(() => {
|
||||
if (page > 1) {
|
||||
loadData();
|
||||
}
|
||||
}, [page]);
|
||||
|
||||
// ✅ 推荐写法：事件驱动，直接调用
|
||||
const handleSearch = useCallback((filters) => {
|
||||
setSearchFilters(filters);
|
||||
loadData({ filters, pagination: { page: 1, size: pagination.size } });
|
||||
}, [loadData, pagination.size]);
|
||||
|
||||
const handlePageChange = useCallback((page) => {
|
||||
setPagination(prev => ({ ...prev, page }));
|
||||
loadData({ filters: searchFilters, pagination: { page, size: pagination.size } });
|
||||
}, [loadData, searchFilters, pagination.size]);
|
||||
```
|
||||
|
||||
#### 2. 函数依赖优化
|
||||
|
||||
**原则**：减少useCallback和useMemo的依赖项，通过参数传递而非依赖外部状态。
|
||||
|
||||
**最佳实践**：
|
||||
```tsx
|
||||
// ❌ 避免写法：过多依赖项导致函数频繁重新创建
|
||||
const loadData = useCallback(async () => {
|
||||
// 依赖filters, pagination, sortBy等
|
||||
}, [filters, pagination, sortBy]);
|
||||
|
||||
// ✅ 推荐写法：无依赖项，通过参数传递
|
||||
const loadData = useCallback(async (params) => {
|
||||
// 使用params.filters, params.pagination等
|
||||
}, []); // 空依赖数组
|
||||
```
|
||||
|
||||
#### 3. 搜索防抖优化
|
||||
|
||||
**原则**：下拉框选择立即触发，文本输入使用防抖，避免不必要的延迟。
|
||||
|
||||
**实现方式**：
|
||||
```tsx
|
||||
// SearchFormComponent中的优化实现
|
||||
const handleInputChange = (key: string, value: string, fieldType: 'text' | 'select') => {
|
||||
const newFilters = { ...localFilters, [key]: value };
|
||||
setLocalFilters(newFilters);
|
||||
|
||||
// 下拉框选择立即触发查询，文本输入使用防抖
|
||||
if (fieldType === 'select') {
|
||||
onFiltersChangeRef.current(newFilters); // 立即执行
|
||||
}
|
||||
// 文本输入的防抖在useEffect中处理
|
||||
};
|
||||
```
|
||||
|
||||
### 组件设计原则
|
||||
|
||||
#### 1. 排序功能简化
|
||||
|
||||
**设计决策**：SearchFormPagination组件不再支持表头排序功能。
|
||||
|
||||
**原因**：
|
||||
- 简化组件复杂度，提高性能
|
||||
- 减少不必要的交互，专注核心功能（搜索、展示、分页）
|
||||
- 避免排序逻辑与业务逻辑耦合
|
||||
|
||||
**替代方案**：
|
||||
- 如需排序功能，在业务页面层面实现
|
||||
- 通过下拉框或其他UI控件提供排序选项
|
||||
|
||||
#### 2. 接口简化
|
||||
|
||||
**删除的排序相关接口**：
|
||||
```tsx
|
||||
// ❌ 已删除的接口
|
||||
interface TableColumnConfig {
|
||||
sortable?: boolean; // 删除
|
||||
// ...
|
||||
}
|
||||
|
||||
interface SearchFormPaginationProps {
|
||||
sortBy?: string; // 删除
|
||||
sortOrder?: 'asc' | 'desc'; // 删除
|
||||
onSort?: (sortBy: string, sortOrder: 'asc' | 'desc') => void; // 删除
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
#### 3. 表头渲染简化
|
||||
|
||||
**删除的排序交互**：
|
||||
- 删除了表头的点击事件处理
|
||||
- 删除了排序箭头图标显示
|
||||
- 删除了鼠标悬停样式效果
|
||||
|
||||
### 重构指南
|
||||
|
||||
如果要重构或基于此组件开发新功能，请遵循以下原则：
|
||||
|
||||
1. **保持接口兼容性**：不要破坏现有的props接口
|
||||
2. **扩展而非修改**：通过新的配置项而非修改现有逻辑来添加功能
|
||||
3. **类型安全**：确保所有新功能都有完整的TypeScript类型定义
|
||||
4. **测试覆盖**：新功能应该有相应的测试用例
|
||||
5. **文档更新**：及时更新使用文档和接口说明
|
||||
6. **性能优先**：采用事件驱动模式，避免不必要的useEffect和setTimeout
|
||||
7. **功能专注**：保持组件职责单一，避免功能过度复杂化
|
||||
|
||||
### 总结
|
||||
|
||||
SearchFormPagination 组件通过配置驱动的方式，极大地简化了复杂数据展示页面的开发工作。其核心优势在于：
|
||||
|
||||
- **高度可配置**：通过配置而非代码实现功能定制
|
||||
- **性能优化**：事件驱动模式，无setTimeout依赖，最小化useEffect使用
|
||||
- **用户体验**：下拉框立即响应，文本输入智能防抖
|
||||
- **易于扩展**：新增功能只需要修改配置，无需修改组件逻辑
|
||||
- **类型安全**：完整的 TypeScript 支持
|
||||
- **功能专注**：专注搜索、展示、分页核心功能，避免过度设计
|
||||
|
||||
该组件可以作为项目中所有数据展示页面的标准解决方案，显著提升开发效率和代码质量。
|
||||
@@ -2,20 +2,20 @@
|
||||
* filekorolheader: 企业审核页面 - 企业注册审核管理页面
|
||||
* 功能：企业审核列表、搜索筛选、审核操作、详情查看
|
||||
* 路径：/central-config/tenant/enterprise-audit
|
||||
* 规范：遵循crop-x/docs/开发项目规范.md，使用useReducer状态管理，API集成，模块化组件
|
||||
* 规范：遵循crop-x/docs/开发项目规范.md，使用useReducer状态管理，API集成，模块化组件，SearchFormPagination重构
|
||||
*/
|
||||
'use client';
|
||||
|
||||
import { useReducer, useEffect, useMemo, useRef } from 'react';
|
||||
import { useReducer, useEffect, useMemo, useRef, useCallback } from 'react';
|
||||
import { toast } from 'sonner';
|
||||
import { Building2, RefreshCw } from 'lucide-react';
|
||||
import { Building2, RefreshCw, Eye, Check, X } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
|
||||
import { SearchFormPagination, type SearchFieldConfig, type TableColumnConfig } from '@/components/common/searchFormPagination';
|
||||
import { fetchTenantsForAudit, auditTenant, transformTenantData, TenantsQueryParams, Enterprise } from './components/enterpriseAuditApi';
|
||||
import { AuditStatsCards } from './components/AuditStatsCards';
|
||||
import { AuditSearchAndFilter } from './components/AuditSearchAndFilter';
|
||||
import { EnterpriseAuditTable } from './components/EnterpriseAuditTable';
|
||||
import { EnterpriseDetailDialog } from './components/EnterpriseDetailDialog';
|
||||
import { AuditPagination } from './components/AuditPagination';
|
||||
|
||||
// 审核状态管理
|
||||
interface AuditState {
|
||||
@@ -119,21 +119,133 @@ export default function EnterpriseAuditPage() {
|
||||
const [state, dispatch] = useReducer(auditReducer, initialState);
|
||||
const isFirstLoad = useRef(true);
|
||||
|
||||
// 加载企业数据
|
||||
const loadEnterprises = async (resetPage = false) => {
|
||||
// 搜索字段配置
|
||||
const searchFields: SearchFieldConfig[] = [
|
||||
{
|
||||
key: 'search',
|
||||
label: '搜索',
|
||||
type: 'text',
|
||||
placeholder: '搜索企业名称、编码...',
|
||||
},
|
||||
{
|
||||
key: 'audit_status',
|
||||
label: '审核状态',
|
||||
type: 'select',
|
||||
defaultValue: 'all',
|
||||
options: [
|
||||
{ value: 'all', label: '全部状态' },
|
||||
{ value: '待审核', label: '待审核' },
|
||||
{ value: '已通过', label: '已通过' },
|
||||
{ value: '已驳回', label: '已驳回' },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
// 表格列配置
|
||||
const columns: TableColumnConfig[] = [
|
||||
{
|
||||
key: 'name',
|
||||
label: '企业名称',
|
||||
sortable: false, // 禁用排序
|
||||
render: (value: string) => (
|
||||
<div className="font-medium text-foreground">{value}</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'code',
|
||||
label: '企业编码',
|
||||
sortable: false, // 禁用排序
|
||||
render: (value: string) => (
|
||||
<div className="font-mono text-sm text-muted-foreground">{value}</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'auditStatus',
|
||||
label: '审核状态',
|
||||
sortable: false, // 禁用排序
|
||||
render: (value: string) => {
|
||||
const statusConfig = {
|
||||
'待审核': { label: '待审核', variant: 'default' as const, className: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200' },
|
||||
'已通过': { label: '已通过', variant: 'default' as const, className: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' },
|
||||
'已驳回': { label: '已驳回', variant: 'default' as const, className: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200' },
|
||||
};
|
||||
|
||||
const config = statusConfig[value as keyof typeof statusConfig] || statusConfig['待审核'];
|
||||
return (
|
||||
<Badge className={`font-light ${config.className}`}>
|
||||
{config.label}
|
||||
</Badge>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'contactPerson',
|
||||
label: '联系人',
|
||||
sortable: false, // 禁用排序
|
||||
},
|
||||
{
|
||||
key: 'contactPhone',
|
||||
label: '联系电话',
|
||||
sortable: false, // 禁用排序
|
||||
render: (value: string) => (
|
||||
<div className="font-mono text-sm">{value || '-'}</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'createdAt',
|
||||
label: '创建时间',
|
||||
sortable: false, // 禁用排序
|
||||
render: (value: string) => (
|
||||
<div className="text-sm text-muted-foreground">
|
||||
{value ? new Date(value).toLocaleDateString('zh-CN') : '-'}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'actions',
|
||||
label: '操作',
|
||||
sortable: false, // 操作列不能排序
|
||||
render: (_: any, row: Enterprise) => (
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => handleViewDetail(row)}
|
||||
className="h-8 px-2"
|
||||
>
|
||||
<Eye className="w-3 h-3 mr-1" />
|
||||
查看
|
||||
</Button>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
// 加载企业数据 - 移除依赖项，通过参数传递状态
|
||||
const loadEnterprises = useCallback(async (params?: {
|
||||
filters?: Record<string, string>;
|
||||
pagination?: { page: number; size: number };
|
||||
sort?: { sortBy?: string; sortOrder: 'asc' | 'desc' };
|
||||
resetPage?: boolean;
|
||||
}) => {
|
||||
try {
|
||||
dispatch({ type: 'SET_LOADING', payload: true });
|
||||
|
||||
const params: TenantsQueryParams = {
|
||||
search: state.filters.search || undefined,
|
||||
audit_status: state.filters.audit_status === 'all' ? undefined : state.filters.audit_status,
|
||||
page: resetPage ? 1 : state.pagination.page,
|
||||
size: state.pagination.size,
|
||||
order_by: state.sortBy,
|
||||
sort_order: state.sortOrder,
|
||||
const finalParams: TenantsQueryParams = {
|
||||
search: (params?.filters?.search ?? state.filters.search) || undefined,
|
||||
audit_status: params?.filters?.audit_status ?? state.filters.audit_status,
|
||||
page: params?.resetPage ? 1 : (params?.pagination?.page || state.pagination.page),
|
||||
size: params?.pagination?.size || state.pagination.size,
|
||||
order_by: params?.sort?.sortBy,
|
||||
sort_order: params?.sort?.sortOrder,
|
||||
};
|
||||
|
||||
const response = await fetchTenantsForAudit(params);
|
||||
// 处理audit_status，如果为'all'则不传该参数
|
||||
if (finalParams.audit_status === 'all') {
|
||||
finalParams.audit_status = undefined;
|
||||
}
|
||||
|
||||
const response = await fetchTenantsForAudit(finalParams);
|
||||
const transformedData = response.data.map(transformTenantData);
|
||||
|
||||
dispatch({
|
||||
@@ -156,56 +268,48 @@ export default function EnterpriseAuditPage() {
|
||||
dispatch({ type: 'SET_ERROR', payload: errorMessage });
|
||||
toast.error(errorMessage);
|
||||
}
|
||||
};
|
||||
}, []); // 移除所有依赖，使用参数传递状态变化
|
||||
|
||||
// 首次加载数据
|
||||
useEffect(() => {
|
||||
// 首次加载数据 - 使用事件驱动，避免useEffect
|
||||
const initializeData = useCallback(() => {
|
||||
if (isFirstLoad.current) {
|
||||
isFirstLoad.current = false;
|
||||
loadEnterprises(true);
|
||||
loadEnterprises({ resetPage: true });
|
||||
}
|
||||
}, []);
|
||||
}, [loadEnterprises]);
|
||||
|
||||
// 监听筛选和排序变化（排除首次加载）
|
||||
// 页面加载时初始化数据
|
||||
useEffect(() => {
|
||||
if (!isFirstLoad.current) {
|
||||
const timer = setTimeout(() => {
|
||||
loadEnterprises(true);
|
||||
}, 300);
|
||||
return () => clearTimeout(timer);
|
||||
}
|
||||
}, [state.filters.search, state.filters.audit_status, state.sortBy, state.sortOrder]);
|
||||
|
||||
// 分页加载
|
||||
useEffect(() => {
|
||||
if (!isFirstLoad.current && state.pagination.page > 1) {
|
||||
loadEnterprises(false);
|
||||
}
|
||||
}, [state.pagination.page]);
|
||||
initializeData();
|
||||
}, []); // 只在组件挂载时执行一次
|
||||
|
||||
// 计算统计数据
|
||||
const stats = useMemo(() => ({
|
||||
total: state.pagination.total,
|
||||
pending: state.enterprises.filter(e => e.auditStatus === 'pending').length,
|
||||
approved: state.enterprises.filter(e => e.auditStatus === 'approved').length,
|
||||
rejected: state.enterprises.filter(e => e.auditStatus === 'rejected').length,
|
||||
pending: state.enterprises.filter(e => e.auditStatus === '待审核').length,
|
||||
approved: state.enterprises.filter(e => e.auditStatus === '已通过').length,
|
||||
rejected: state.enterprises.filter(e => e.auditStatus === '已驳回').length,
|
||||
}), [state.enterprises, state.pagination.total]);
|
||||
|
||||
// 事件处理器
|
||||
const handleSearch = (value: string) => {
|
||||
dispatch({ type: 'SET_FILTERS', payload: { search: value } });
|
||||
};
|
||||
const handleSearch = useCallback((filters: Record<string, string>) => {
|
||||
dispatch({ type: 'SET_FILTERS', payload: filters });
|
||||
loadEnterprises({
|
||||
filters,
|
||||
pagination: { page: 1, size: state.pagination.size }
|
||||
});
|
||||
}, [loadEnterprises, state.pagination.size]);
|
||||
|
||||
const handleAuditStatusFilter = (value: string) => {
|
||||
dispatch({ type: 'SET_FILTERS', payload: { audit_status: value === 'all' ? 'all' : value } });
|
||||
};
|
||||
const handleSort = useCallback((sortBy: string, sortOrder: 'asc' | 'desc') => {
|
||||
dispatch({ type: 'SET_SORT', payload: { sortBy, sortOrder } });
|
||||
loadEnterprises({
|
||||
filters: state.filters,
|
||||
sort: { sortBy, sortOrder },
|
||||
resetPage: true
|
||||
});
|
||||
}, [loadEnterprises, state.filters]);
|
||||
|
||||
const handleSort = (sortBy?: string) => {
|
||||
const newSortOrder = state.sortBy === sortBy && state.sortOrder === 'desc' ? 'asc' : 'desc';
|
||||
dispatch({ type: 'SET_SORT', payload: { sortBy, sortOrder: newSortOrder } });
|
||||
};
|
||||
|
||||
const handlePageChange = (page: number) => {
|
||||
const handlePageChange = useCallback((page: number) => {
|
||||
// 边界检查，确保页码在有效范围内
|
||||
if (page < 1) {
|
||||
page = 1;
|
||||
@@ -213,13 +317,25 @@ export default function EnterpriseAuditPage() {
|
||||
page = state.pagination.totalPages;
|
||||
}
|
||||
dispatch({ type: 'SET_PAGINATION', payload: { page } });
|
||||
};
|
||||
loadEnterprises({
|
||||
filters: state.filters,
|
||||
pagination: { page, size: state.pagination.size }
|
||||
});
|
||||
}, [loadEnterprises, state.filters, state.pagination.size, state.pagination.totalPages]);
|
||||
|
||||
const handleRefresh = () => {
|
||||
const handleSizeChange = useCallback((size: number) => {
|
||||
dispatch({ type: 'SET_PAGINATION', payload: { size, page: 1 } });
|
||||
loadEnterprises({
|
||||
filters: state.filters,
|
||||
pagination: { page: 1, size }
|
||||
});
|
||||
}, [loadEnterprises, state.filters]);
|
||||
|
||||
const handleRefresh = useCallback(() => {
|
||||
dispatch({ type: 'REFRESH_DATA' });
|
||||
loadEnterprises(true);
|
||||
loadEnterprises({ resetPage: true });
|
||||
toast.success('数据已刷新');
|
||||
};
|
||||
}, [loadEnterprises]);
|
||||
|
||||
const handleViewDetail = (enterprise: Enterprise) => {
|
||||
dispatch({ type: 'SET_SELECTED_ENTERPRISE', payload: enterprise });
|
||||
@@ -257,10 +373,8 @@ export default function EnterpriseAuditPage() {
|
||||
dispatch({ type: 'TOGGLE_DETAIL_DIALOG', payload: false });
|
||||
toast.success('审核通过');
|
||||
|
||||
// 1秒后刷新列表
|
||||
setTimeout(() => {
|
||||
loadEnterprises(true);
|
||||
}, 1000);
|
||||
// 立即刷新列表，无需延迟
|
||||
loadEnterprises({ resetPage: true });
|
||||
} catch (error) {
|
||||
console.error('Approve failed:', error);
|
||||
const errorMessage = error instanceof Error ? error.message : '审核通过失败';
|
||||
@@ -300,10 +414,8 @@ export default function EnterpriseAuditPage() {
|
||||
dispatch({ type: 'TOGGLE_DETAIL_DIALOG', payload: false });
|
||||
toast.success('已驳回');
|
||||
|
||||
// 1秒后刷新列表
|
||||
setTimeout(() => {
|
||||
loadEnterprises(true);
|
||||
}, 1000);
|
||||
// 立即刷新列表，无需延迟
|
||||
loadEnterprises({ resetPage: true });
|
||||
} catch (error) {
|
||||
console.error('Reject failed:', error);
|
||||
const errorMessage = error instanceof Error ? error.message : '审核驳回失败';
|
||||
@@ -321,45 +433,47 @@ export default function EnterpriseAuditPage() {
|
||||
<p className="text-muted-foreground">管理企业注册与变更审核流程</p>
|
||||
</div>
|
||||
|
||||
{/* 统计卡片 */}
|
||||
{/* 统计卡片 - 保留原有功能 */}
|
||||
<AuditStatsCards
|
||||
enterprises={state.enterprises}
|
||||
loading={state.loading}
|
||||
/>
|
||||
|
||||
{/* 搜索和筛选 */}
|
||||
<AuditSearchAndFilter
|
||||
searchKeyword={state.filters.search}
|
||||
onSearchChange={(value) => dispatch({ type: 'SET_FILTERS', payload: { search: value } })}
|
||||
statusFilter={state.filters.audit_status}
|
||||
onStatusFilterChange={(value) => dispatch({ type: 'SET_FILTERS', payload: { audit_status: value } })}
|
||||
onRefresh={handleRefresh}
|
||||
{/* 搜索、表格和分页 - 使用重构后的组件 */}
|
||||
<SearchFormPagination
|
||||
formTitle="企业列表"
|
||||
formRightContent={
|
||||
<Button variant="outline" onClick={handleRefresh} disabled={state.loading}>
|
||||
<RefreshCw className={`w-4 h-4 mr-2 ${state.loading ? 'animate-spin' : ''}`} />
|
||||
刷新
|
||||
</Button>
|
||||
}
|
||||
searchFields={searchFields}
|
||||
columns={columns}
|
||||
data={state.enterprises}
|
||||
loading={state.loading}
|
||||
error={state.error}
|
||||
pagination={state.pagination}
|
||||
sortBy={state.sortBy}
|
||||
sortOrder={state.sortOrder}
|
||||
onPageChange={handlePageChange}
|
||||
onSizeChange={handleSizeChange}
|
||||
onSearch={handleSearch}
|
||||
onSort={handleSort}
|
||||
emptyIcon={<Building2 className="w-12 h-12" />}
|
||||
emptyText="暂无企业审核数据"
|
||||
showSizeSelector={true}
|
||||
showPageInfo={true}
|
||||
sizeOptions={[10, 20, 50, 100]}
|
||||
/>
|
||||
|
||||
{/* 企业列表 */}
|
||||
<EnterpriseAuditTable
|
||||
enterprises={state.enterprises}
|
||||
loading={state.loading}
|
||||
onViewDetails={handleViewDetail}
|
||||
/>
|
||||
|
||||
{/* 分页 */}
|
||||
{state.pagination.total > 0 && (
|
||||
<AuditPagination
|
||||
pagination={state.pagination}
|
||||
onPageChange={handlePageChange}
|
||||
loading={state.loading}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 企业详情对话框 */}
|
||||
{/* 企业详情对话框 - 保留原有功能 */}
|
||||
<EnterpriseDetailDialog
|
||||
open={state.showDetailDialog}
|
||||
onOpenChange={(open) => dispatch({ type: 'TOGGLE_DETAIL_DIALOG', payload: open })}
|
||||
enterprise={state.selectedEnterprise}
|
||||
auditReason={state.auditReason}
|
||||
onAuditReasonChange={(reason) => dispatch({ type: 'SET_AUDIT_REASON', payload: reason })}
|
||||
onAuditReasonChange={handleAuditReasonChange}
|
||||
onApprove={handleApprove}
|
||||
onReject={handleReject}
|
||||
loading={state.actionLoading}
|
||||
|
||||
@@ -304,19 +304,33 @@ export default function EnterpriseManagement() {
|
||||
});
|
||||
}, [loadEnterprises, pagination.size]);
|
||||
|
||||
// 统一的数据重载函数 - 避免重复代码
|
||||
const reloadData = useCallback(() => {
|
||||
const reloadParams = {
|
||||
filters: searchFilters,
|
||||
pagination: {
|
||||
page: pagination.page,
|
||||
size: pagination.size
|
||||
}
|
||||
};
|
||||
loadEnterprises(reloadParams);
|
||||
}, [loadEnterprises, searchFilters, pagination]);
|
||||
|
||||
const handlePageChange = useCallback((page: number) => {
|
||||
setPagination(prev => ({ ...prev, page }));
|
||||
loadEnterprises({
|
||||
filters: searchFilters,
|
||||
pagination: { page, size: pagination.size }
|
||||
});
|
||||
}, [loadEnterprises, pagination.size]);
|
||||
}, [loadEnterprises, searchFilters, pagination.size]);
|
||||
|
||||
const handleSizeChange = useCallback((size: number) => {
|
||||
setPagination(prev => ({ ...prev, size, page: 1 }));
|
||||
loadEnterprises({
|
||||
filters: searchFilters,
|
||||
pagination: { page: 1, size }
|
||||
});
|
||||
}, [loadEnterprises]);
|
||||
}, [loadEnterprises, searchFilters]);
|
||||
|
||||
// 初始化数据加载
|
||||
// useEffect(() => {
|
||||
@@ -366,15 +380,7 @@ export default function EnterpriseManagement() {
|
||||
dispatch({ type: 'TOGGLE_STATUS_DIALOG', payload: false });
|
||||
|
||||
// 重新加载数据来反映状态变化
|
||||
const reloadParams: any = {
|
||||
filters: searchFilters,
|
||||
pagination: {
|
||||
page: pagination.page,
|
||||
size: pagination.size
|
||||
}
|
||||
};
|
||||
|
||||
loadEnterprises(reloadParams);
|
||||
reloadData();
|
||||
} catch (error) {
|
||||
console.error('Status change failed:', error);
|
||||
const errorMessage = error instanceof Error ? error.message : '状态更新失败';
|
||||
@@ -391,13 +397,7 @@ export default function EnterpriseManagement() {
|
||||
|
||||
const handleCreateSuccess = () => {
|
||||
// 创建成功后重新加载数据，保持当前搜索条件和分页状态
|
||||
loadEnterprises({
|
||||
filters: searchFilters,
|
||||
pagination: {
|
||||
page: pagination.page,
|
||||
size: pagination.size
|
||||
}
|
||||
});
|
||||
reloadData();
|
||||
};
|
||||
|
||||
// 操作按钮配置
|
||||
|
||||
@@ -2,25 +2,27 @@
|
||||
* filekorolheader: 用户管理页面 - 用户查询和管理页面
|
||||
* 功能：用户列表查询、搜索筛选、详情查看、用户管理
|
||||
* 路径：/central-config/tenant/user-management
|
||||
* 规范：遵循crop-x/docs/开发项目规范.md，使用useReducer状态管理，API集成，shadcn语义化样式
|
||||
* 规范：遵循crop-x/docs/开发项目规范.md，使用SearchFormPagination公共组件，shadcn语义化样式
|
||||
*/
|
||||
'use client';
|
||||
|
||||
import { useReducer, useEffect } from 'react';
|
||||
import { useReducer, useEffect, useState, useCallback, useMemo } from 'react';
|
||||
import { toast } from 'sonner';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Eye, Edit, Lock, UserX, UserCheck } from 'lucide-react';
|
||||
import { UserDetailDialog } from './components/UserDetailDialog';
|
||||
import { SearchFormPagination, SearchFieldConfig, TableColumnConfig } from '@/components/common/searchFormPagination';
|
||||
|
||||
import { fetchUsers, transformUserData, UsersQueryParams, User, UsersApiResponse, PaginationState } from './components/userManagementApi';
|
||||
import { UserManagementHeader } from './components/UserManagementHeader';
|
||||
import { UserManagementStatsCards } from './components/UserManagementStatsCards';
|
||||
import { UserManagementFilters } from './components/UserManagementFilters';
|
||||
import { UserList } from './components/UserList';
|
||||
import { UserDetailDialog } from './components/UserDetailDialog';
|
||||
import { Enterprise, UserFilters } from './types';
|
||||
import { UserFilters } from './types';
|
||||
|
||||
// 移除了Enterprise的引用，因为新实现中不再需要
|
||||
|
||||
// 用户管理状态管理
|
||||
interface UserManagementState {
|
||||
users: User[];
|
||||
enterprises: Enterprise[];
|
||||
loading: boolean;
|
||||
error: string | null;
|
||||
pagination: PaginationState;
|
||||
@@ -38,7 +40,6 @@ type UserManagementAction =
|
||||
| { type: 'SET_FILTERS'; payload: Partial<UserFilters> }
|
||||
| { type: 'SET_SORT'; payload: { sortBy?: string; sortOrder: 'asc' | 'desc' } }
|
||||
| { type: 'SET_PAGINATION'; payload: Partial<PaginationState> }
|
||||
| { type: 'SET_ENTERPRISES'; payload: Enterprise[] }
|
||||
| { type: 'SET_SELECTED_USER'; payload: User | null }
|
||||
| { type: 'TOGGLE_DETAIL_DIALOG'; payload: boolean }
|
||||
| { type: 'REFRESH_DATA' };
|
||||
@@ -63,8 +64,6 @@ const userManagementReducer = (state: UserManagementState, action: UserManagemen
|
||||
return { ...state, sortBy: action.payload.sortBy, sortOrder: action.payload.sortOrder };
|
||||
case 'SET_PAGINATION':
|
||||
return { ...state, pagination: { ...state.pagination, ...action.payload } };
|
||||
case 'SET_ENTERPRISES':
|
||||
return { ...state, enterprises: action.payload };
|
||||
case 'SET_SELECTED_USER':
|
||||
return { ...state, selectedUser: action.payload };
|
||||
case 'TOGGLE_DETAIL_DIALOG':
|
||||
@@ -78,7 +77,6 @@ const userManagementReducer = (state: UserManagementState, action: UserManagemen
|
||||
|
||||
const initialState: UserManagementState = {
|
||||
users: [],
|
||||
enterprises: [],
|
||||
loading: false,
|
||||
error: null,
|
||||
pagination: {
|
||||
@@ -102,11 +100,178 @@ const initialState: UserManagementState = {
|
||||
|
||||
export default function TenantUserManagementPage() {
|
||||
const [state, dispatch] = useReducer(userManagementReducer, initialState);
|
||||
const [searchFilters, setSearchFilters] = useState<Record<string, string>>({});
|
||||
|
||||
// 搜索字段配置
|
||||
const searchFields: SearchFieldConfig[] = useMemo(() => [
|
||||
{
|
||||
key: 'search',
|
||||
label: '搜索',
|
||||
type: 'text',
|
||||
placeholder: '搜索用户名、姓名、邮箱...',
|
||||
},
|
||||
{
|
||||
key: 'status',
|
||||
label: '用户状态',
|
||||
type: 'select',
|
||||
defaultValue: 'all',
|
||||
options: [
|
||||
{ value: 'all', label: '全部状态' },
|
||||
{ value: 'active', label: '活跃' },
|
||||
{ value: 'inactive', label: '未激活' },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'type',
|
||||
label: '用户类型',
|
||||
type: 'select',
|
||||
defaultValue: 'all',
|
||||
options: [
|
||||
{ value: 'all', label: '全部类型' },
|
||||
{ value: 'admin', label: '管理员' },
|
||||
{ value: 'user', label: '普通用户' },
|
||||
{ value: 'staff', label: '员工' },
|
||||
],
|
||||
},
|
||||
], []);
|
||||
|
||||
// 表格列配置
|
||||
const columns: TableColumnConfig[] = useMemo(() => [
|
||||
{
|
||||
key: 'username',
|
||||
label: '用户名',
|
||||
sortable: true,
|
||||
render: (value: string, user: User) => (
|
||||
<div className="font-medium">{value}</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'fullName',
|
||||
label: '姓名',
|
||||
sortable: true,
|
||||
render: (value: string) => value || '-',
|
||||
},
|
||||
{
|
||||
key: 'email',
|
||||
label: '邮箱',
|
||||
sortable: true,
|
||||
render: (value: string) => value || '-',
|
||||
},
|
||||
{
|
||||
key: 'isActive',
|
||||
label: '状态',
|
||||
sortable: true,
|
||||
render: (value: boolean) => (
|
||||
<div className={`inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium ${
|
||||
value
|
||||
? 'bg-green-50 dark:bg-green-950 text-green-600 dark:text-green-400'
|
||||
: 'bg-red-50 dark:bg-red-950 text-red-600 dark:text-red-400'
|
||||
}`}>
|
||||
<div className={`w-2 h-2 rounded-full ${value ? 'bg-green-500' : 'bg-red-500'}`} />
|
||||
{value ? '活跃' : '未激活'}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'isSuperuser',
|
||||
label: '角色',
|
||||
sortable: true,
|
||||
render: (value: boolean, user: User) => {
|
||||
if (value) {
|
||||
return (
|
||||
<div className="inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium bg-purple-50 dark:bg-purple-950 text-purple-600 dark:text-purple-400">
|
||||
<div className="w-2 h-2 rounded-full bg-purple-500" />
|
||||
超级管理员
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div className="inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium bg-blue-50 dark:bg-blue-950 text-blue-600 dark:text-blue-400">
|
||||
<div className="w-2 h-2 rounded-full bg-blue-500" />
|
||||
普通用户
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'isVerified',
|
||||
label: '验证',
|
||||
sortable: true,
|
||||
render: (value: boolean) => (
|
||||
<div className={`inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium ${
|
||||
value
|
||||
? 'bg-orange-50 dark:bg-orange-950 text-orange-600 dark:text-orange-400'
|
||||
: 'bg-gray-50 dark:bg-gray-950 text-gray-600 dark:text-gray-400'
|
||||
}`}>
|
||||
{value ? '已验证' : '未验证'}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'lastLoginAt',
|
||||
label: '最后登录',
|
||||
sortable: true,
|
||||
render: (value: string) => {
|
||||
if (!value) return '-';
|
||||
try {
|
||||
const date = new Date(value);
|
||||
return date.toLocaleDateString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
});
|
||||
} catch {
|
||||
return value;
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'actions',
|
||||
label: '操作',
|
||||
render: (_, user: User) => (
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleViewDetail(user)}
|
||||
>
|
||||
<Eye className="w-4 h-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleEdit(user)}
|
||||
>
|
||||
<Edit className="w-4 h-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleToggleStatus(user)}
|
||||
>
|
||||
{user.isActive ? (
|
||||
<UserX className="w-4 h-4 text-orange-600" />
|
||||
) : (
|
||||
<UserCheck className="w-4 h-4 text-green-600" />
|
||||
)}
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleResetPassword(user)}
|
||||
>
|
||||
<Lock className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
], []);
|
||||
|
||||
// 加载用户数据
|
||||
const loadUsers = async (resetPage = false) => {
|
||||
const loadUsers = useCallback(async (resetPage = false) => {
|
||||
try {
|
||||
|
||||
dispatch({ type: 'SET_LOADING', payload: true });
|
||||
|
||||
const params: UsersQueryParams = {
|
||||
@@ -114,6 +279,26 @@ export default function TenantUserManagementPage() {
|
||||
size: state.pagination.size,
|
||||
is_active: true,
|
||||
};
|
||||
|
||||
// 添加搜索条件
|
||||
if (searchFilters.search) {
|
||||
params.search = searchFilters.search;
|
||||
}
|
||||
|
||||
if (searchFilters.status && searchFilters.status !== 'all') {
|
||||
params.is_active = searchFilters.status === 'active';
|
||||
}
|
||||
|
||||
if (searchFilters.type && searchFilters.type !== 'all') {
|
||||
// For user type filtering, we'll need to handle this differently based on the API
|
||||
// For now, we'll filter on the client side if needed
|
||||
}
|
||||
|
||||
if (state.sortBy) {
|
||||
params.order_by = state.sortBy;
|
||||
params.sort_order = state.sortOrder;
|
||||
}
|
||||
|
||||
const response: UsersApiResponse = await fetchUsers(params);
|
||||
const transformedUsers = response.data.map(transformUserData);
|
||||
|
||||
@@ -138,50 +323,33 @@ export default function TenantUserManagementPage() {
|
||||
payload: error instanceof Error ? error.message : '加载用户数据失败'
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 加载企业数据（这里暂时使用mock数据，后续可以添加企业API）
|
||||
// const loadEnterprises = () => {
|
||||
// // 这里可以添加企业API调用，现在使用mock数据
|
||||
// const mockEnterprises: Enterprise[] = [
|
||||
// { id: 'ent-1', name: '丰收现代农业集团' },
|
||||
// { id: 'ent-2', name: '绿色种植科技有限公司' },
|
||||
// { id: 'ent-3', name: '智慧农业示范区' },
|
||||
// ];
|
||||
// dispatch({ type: 'SET_ENTERPRISES', payload: mockEnterprises });
|
||||
// };
|
||||
}, [state.pagination.page, state.pagination.size, state.sortBy, state.sortOrder, searchFilters]);
|
||||
|
||||
// 搜索处理
|
||||
const handleSearch = (value: string) => {
|
||||
dispatch({ type: 'SET_FILTERS', payload: { searchKeyword: value } });
|
||||
};
|
||||
|
||||
// 状态筛选
|
||||
const handleStatusFilter = (value: string) => {
|
||||
dispatch({ type: 'SET_FILTERS', payload: { statusFilter: value } });
|
||||
};
|
||||
|
||||
// 类型筛选
|
||||
const handleTypeFilter = (value: string) => {
|
||||
dispatch({ type: 'SET_FILTERS', payload: { typeFilter: value } });
|
||||
};
|
||||
const handleSearch = useCallback((filters: Record<string, string>) => {
|
||||
setSearchFilters(filters);
|
||||
dispatch({ type: 'SET_PAGINATION', payload: { page: 1 } });
|
||||
}, []);
|
||||
|
||||
// 排序处理
|
||||
const handleSort = (sortBy: string) => {
|
||||
const newSortOrder = state.sortBy === sortBy && state.sortOrder === 'desc' ? 'asc' : 'desc';
|
||||
dispatch({ type: 'SET_SORT', payload: { sortBy, sortOrder: newSortOrder } });
|
||||
};
|
||||
const handleSort = useCallback((sortBy: string, sortOrder: 'asc' | 'desc') => {
|
||||
dispatch({ type: 'SET_SORT', payload: { sortBy, sortOrder } });
|
||||
}, []);
|
||||
|
||||
// 分页处理
|
||||
const handlePageChange = (page: number) => {
|
||||
// 边界检查，确保页码在有效范围内
|
||||
const handlePageChange = useCallback((page: number) => {
|
||||
if (page < 1) {
|
||||
page = 1;
|
||||
} else if (page > state.pagination.totalPages && state.pagination.totalPages > 0) {
|
||||
page = state.pagination.totalPages;
|
||||
}
|
||||
dispatch({ type: 'SET_PAGINATION', payload: { page } });
|
||||
};
|
||||
}, [state.pagination.totalPages]);
|
||||
|
||||
// 每页条数变化处理
|
||||
const handleSizeChange = useCallback((size: number) => {
|
||||
dispatch({ type: 'SET_PAGINATION', payload: { size, page: 1 } });
|
||||
}, []);
|
||||
|
||||
// 查看详情
|
||||
const handleViewDetail = (user: User) => {
|
||||
@@ -191,108 +359,86 @@ export default function TenantUserManagementPage() {
|
||||
|
||||
// 编辑用户
|
||||
const handleEdit = (user: User) => {
|
||||
// 这里可以添加编辑逻辑，比如打开编辑对话框
|
||||
toast.info('编辑功能开发中...');
|
||||
};
|
||||
|
||||
// 删除用户
|
||||
const handleDelete = (user: User) => {
|
||||
if (!confirm(`确定要删除用户 ${user.fullName || user.username} 吗？`)) return;
|
||||
// 这里可以添加删除逻辑，调用API删除用户
|
||||
toast.info('删除功能开发中...');
|
||||
};
|
||||
|
||||
// 切换用户状态
|
||||
const handleToggleStatus = (user: User) => {
|
||||
const newStatus = !user.isActive;
|
||||
const statusText = newStatus ? '激活' : '停用';
|
||||
if (!confirm(`确定要${statusText}用户 ${user.fullName || user.username} 吗？`)) return;
|
||||
// 这里可以添加状态切换逻辑，调用API更新用户状态
|
||||
toast.info(`${statusText}功能开发中...`);
|
||||
};
|
||||
|
||||
// 重置密码
|
||||
const handleResetPassword = (user: User) => {
|
||||
if (!confirm(`确定要重置用户 ${user.fullName || user.username} 的密码吗？`)) return;
|
||||
// 这里可以添加重置密码逻辑，调用API重置密码
|
||||
toast.info('重置密码功能开发中...');
|
||||
};
|
||||
|
||||
|
||||
// 统计数据计算
|
||||
const stats = [
|
||||
const stats = useMemo(() => [
|
||||
{
|
||||
label: '总用户数',
|
||||
value: state.pagination.total,
|
||||
color: 'text-blue-600',
|
||||
bg: 'bg-blue-100',
|
||||
color: 'text-blue-600 dark:text-blue-400',
|
||||
bg: 'bg-blue-50 dark:bg-blue-950',
|
||||
},
|
||||
{
|
||||
label: '活跃用户',
|
||||
value: state.users.filter(u => u.isActive).length,
|
||||
color: 'text-green-600',
|
||||
bg: 'bg-green-100',
|
||||
color: 'text-green-600 dark:text-green-400',
|
||||
bg: 'bg-green-50 dark:bg-green-950',
|
||||
},
|
||||
{
|
||||
label: '管理员',
|
||||
value: state.users.filter(u => u.isSuperuser).length,
|
||||
color: 'text-purple-600',
|
||||
bg: 'bg-purple-100',
|
||||
color: 'text-purple-600 dark:text-purple-400',
|
||||
bg: 'bg-purple-50 dark:bg-purple-950',
|
||||
},
|
||||
{
|
||||
label: '已验证',
|
||||
value: state.users.filter(u => u.isVerified).length,
|
||||
color: 'text-orange-600',
|
||||
bg: 'bg-orange-100',
|
||||
color: 'text-orange-600 dark:text-orange-400',
|
||||
bg: 'bg-orange-50 dark:bg-orange-950',
|
||||
},
|
||||
];
|
||||
], [state.users, state.pagination.total]);
|
||||
|
||||
// 加载数据
|
||||
useEffect(() => {
|
||||
loadUsers();
|
||||
}, [state.filters.searchKeyword, state.filters.statusFilter, state.filters.typeFilter, state.sortBy, state.sortOrder]);
|
||||
|
||||
useEffect(() => {
|
||||
if (state.pagination.page > 1) {
|
||||
loadUsers();
|
||||
}
|
||||
}, [state.pagination.page]);
|
||||
loadUsers();
|
||||
}, [loadUsers]);
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* 页面标题和统计 */}
|
||||
{/* 页面标题 */}
|
||||
<UserManagementHeader stats={stats} />
|
||||
|
||||
{/* 统计卡片 */}
|
||||
<UserManagementStatsCards stats={stats} />
|
||||
|
||||
{/* 搜索和筛选 */}
|
||||
<UserManagementFilters
|
||||
filters={state.filters}
|
||||
onSearchChange={handleSearch}
|
||||
onStatusFilterChange={handleStatusFilter}
|
||||
onTypeFilterChange={handleTypeFilter}
|
||||
/>
|
||||
|
||||
{/* 错误显示 */}
|
||||
{state.error && (
|
||||
<div className="p-4 bg-red-50 dark:bg-red-950 border border-red-200 dark:border-red-800 rounded-lg">
|
||||
<div className="flex items-center gap-2 text-red-600 dark:text-red-400">
|
||||
<span>{state.error}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 用户列表 */}
|
||||
<UserList
|
||||
users={state.users}
|
||||
{/* 搜索表单、数据表格和分页 */}
|
||||
<SearchFormPagination
|
||||
formTitle="用户列表"
|
||||
formRightContent={
|
||||
<Button onClick={() => toast.info('新建用户功能开发中...')}>
|
||||
新建用户
|
||||
</Button>
|
||||
}
|
||||
searchFields={searchFields}
|
||||
columns={columns}
|
||||
data={state.users}
|
||||
loading={state.loading}
|
||||
error={state.error}
|
||||
pagination={state.pagination}
|
||||
sortBy={state.sortBy}
|
||||
sortOrder={state.sortOrder}
|
||||
onPageChange={handlePageChange}
|
||||
onViewDetail={handleViewDetail}
|
||||
onEdit={handleEdit}
|
||||
onDelete={handleDelete}
|
||||
onToggleStatus={handleToggleStatus}
|
||||
onResetPassword={handleResetPassword}
|
||||
onSizeChange={handleSizeChange}
|
||||
onSearch={handleSearch}
|
||||
onSort={handleSort}
|
||||
emptyText="暂无用户数据"
|
||||
sizeOptions={[10, 20, 50, 100]}
|
||||
/>
|
||||
|
||||
{/* 用户详情对话框 */}
|
||||
|
||||
@@ -53,16 +53,22 @@ export function SearchFormComponent({
|
||||
setLocalFilters(filters);
|
||||
}, [filters]);
|
||||
|
||||
// 处理输入变化 - 防抖搜索避免频繁刷新导致失焦
|
||||
const handleInputChange = (key: string, value: string) => {
|
||||
// 处理输入变化 - 区分文本输入和下拉选择
|
||||
const handleInputChange = (key: string, value: string, fieldType: 'text' | 'select') => {
|
||||
const newFilters = {
|
||||
...localFilters,
|
||||
[key]: value,
|
||||
};
|
||||
setLocalFilters(newFilters);
|
||||
|
||||
// 下拉框选择立即触发查询，文本输入使用防抖
|
||||
if (fieldType === 'select') {
|
||||
onFiltersChangeRef.current(newFilters);
|
||||
}
|
||||
// 文本输入的防抖在useEffect中处理
|
||||
};
|
||||
|
||||
// 使用防抖来减少搜索频率，避免频繁刷新导致失焦
|
||||
// 使用防抖来减少搜索频率，仅针对文本输入
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
// 使用ref引用最新的onFiltersChange函数，避免依赖变化导致重复触发
|
||||
@@ -89,7 +95,7 @@ export function SearchFormComponent({
|
||||
<div key={field.key}>
|
||||
<Select
|
||||
value={value}
|
||||
onValueChange={(newValue) => handleInputChange(field.key, newValue)}
|
||||
onValueChange={(newValue) => handleInputChange(field.key, newValue, 'select')}
|
||||
disabled={false} // 始终允许选择，不因加载而禁用
|
||||
>
|
||||
<SelectTrigger className="w-40">
|
||||
@@ -114,7 +120,7 @@ export function SearchFormComponent({
|
||||
<Input
|
||||
placeholder={field.placeholder || placeholder}
|
||||
value={value}
|
||||
onChange={(e) => handleInputChange(field.key, e.target.value)}
|
||||
onChange={(e) => handleInputChange(field.key, e.target.value, 'text')}
|
||||
disabled={false} // 始终允许输入，不因加载而禁用
|
||||
className="pl-10 w-64"
|
||||
/>
|
||||
@@ -130,7 +136,7 @@ export function SearchFormComponent({
|
||||
<Input
|
||||
placeholder={placeholder}
|
||||
value={localFilters.search || ''}
|
||||
onChange={(e) => handleInputChange('search', e.target.value)}
|
||||
onChange={(e) => handleInputChange('search', e.target.value, 'text')}
|
||||
disabled={false} // 始终允许输入，不因加载而禁用
|
||||
className="pl-10"
|
||||
/>
|
||||
|
||||
@@ -1,248 +0,0 @@
|
||||
/**
|
||||
* filekorolheader: 搜索表单分页组件使用示例 - 展示如何使用该组件
|
||||
* 功能：使用示例、配置示例、最佳实践展示
|
||||
* 路径：/components/common/searchFormPagination/components/example
|
||||
* 规范：遵循crop-x/docs/开发项目规范.md，提供完整的使用示例
|
||||
*/
|
||||
'use client';
|
||||
|
||||
import { SearchFormPagination, SearchFieldConfig, TableColumnConfig } from '../index';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Building2, Eye, Power, PowerOff, Plus } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
// 模拟数据类型
|
||||
interface MockEnterprise {
|
||||
id: string;
|
||||
code: string;
|
||||
name: string;
|
||||
type: string;
|
||||
registrant?: string;
|
||||
contactPhone?: string;
|
||||
createdAt: string;
|
||||
auditStatus: 'draft' | 'pending' | 'approved' | 'rejected';
|
||||
status: 'active' | 'inactive';
|
||||
}
|
||||
|
||||
// 示例使用
|
||||
export function EnterpriseManagementExample() {
|
||||
// 搜索字段配置
|
||||
const searchFields: SearchFieldConfig[] = [
|
||||
{
|
||||
key: 'search',
|
||||
label: '企业搜索',
|
||||
type: 'text',
|
||||
placeholder: '搜索企业名称、编码...',
|
||||
},
|
||||
{
|
||||
key: 'audit_status',
|
||||
label: '审核状态',
|
||||
type: 'select',
|
||||
placeholder: '选择审核状态',
|
||||
options: [
|
||||
{ value: '', label: '全部状态' },
|
||||
{ value: '草稿', label: '草稿' },
|
||||
{ value: '待审核', label: '待审核' },
|
||||
{ value: '已通过', label: '审核通过' },
|
||||
{ value: '已拒绝', label: '已拒绝' },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
// 表格列配置
|
||||
const columns: TableColumnConfig[] = [
|
||||
{
|
||||
key: 'code',
|
||||
label: '企业编码',
|
||||
sortable: true,
|
||||
width: '120px',
|
||||
},
|
||||
{
|
||||
key: 'name',
|
||||
label: '企业名称',
|
||||
sortable: true,
|
||||
render: (value: string, row: MockEnterprise) => (
|
||||
<div className="flex items-center gap-2">
|
||||
<Building2 className="w-4 h-4 text-blue-500" />
|
||||
<span className="font-medium">{value}</span>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'type',
|
||||
label: '企业类型',
|
||||
render: (value: string) => (
|
||||
<Badge variant="outline" className="font-light">{value}</Badge>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'registrant',
|
||||
label: '登记人',
|
||||
render: (value?: string) => value || '-',
|
||||
},
|
||||
{
|
||||
key: 'contactPhone',
|
||||
label: '联系电话',
|
||||
render: (value?: string) => value || '-',
|
||||
},
|
||||
{
|
||||
key: 'createdAt',
|
||||
label: '创建时间',
|
||||
sortable: true,
|
||||
width: '160px',
|
||||
},
|
||||
{
|
||||
key: 'auditStatus',
|
||||
label: '审核状态',
|
||||
render: (value: MockEnterprise['auditStatus']) => {
|
||||
const getAuditStatusBadge = (status: MockEnterprise['auditStatus']) => {
|
||||
switch (status) {
|
||||
case 'draft':
|
||||
return <Badge className="bg-gray-50 dark:bg-gray-950 text-gray-600 dark:text-gray-400 border-gray-200 dark:border-gray-800 font-light">草稿</Badge>;
|
||||
case 'pending':
|
||||
return <Badge className="bg-yellow-50 dark:bg-yellow-950 text-yellow-600 dark:text-yellow-400 border-yellow-200 dark:border-yellow-800 font-light">待审核</Badge>;
|
||||
case 'approved':
|
||||
return <Badge className="bg-green-50 dark:bg-green-950 text-green-600 dark:text-green-400 border-green-200 dark:border-green-800 font-light">审核通过</Badge>;
|
||||
case 'rejected':
|
||||
return <Badge className="bg-red-50 dark:bg-red-950 text-red-600 dark:text-red-400 border-red-200 dark:border-red-800 font-light">已拒绝</Badge>;
|
||||
default:
|
||||
return <Badge className="bg-gray-50 dark:bg-gray-950 text-gray-600 dark:text-gray-400 border-gray-200 dark:border-gray-800 font-light">草稿</Badge>;
|
||||
}
|
||||
};
|
||||
return getAuditStatusBadge(value);
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'status',
|
||||
label: '状态',
|
||||
render: (value: MockEnterprise['status']) => {
|
||||
const getStatusBadge = (status: MockEnterprise['status']) => {
|
||||
if (status === 'active') {
|
||||
return <Badge className="bg-green-50 dark:bg-green-950 text-green-600 dark:text-green-400 border-green-200 dark:border-green-800 font-light">启用</Badge>;
|
||||
}
|
||||
return <Badge className="bg-gray-50 dark:bg-gray-950 text-gray-600 dark:text-gray-400 border-gray-200 dark:border-gray-800 font-light">禁用</Badge>;
|
||||
};
|
||||
return getStatusBadge(value);
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'actions',
|
||||
label: '操作',
|
||||
render: (_: any, row: MockEnterprise) => (
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => toast.success(`查看企业: ${row.name}`)}
|
||||
>
|
||||
<Eye className="w-3 h-3 mr-1" />
|
||||
查看
|
||||
</Button>
|
||||
{row.status === 'active' ? (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="text-gray-600 dark:text-gray-400 border-gray-300 dark:border-gray-600"
|
||||
onClick={() => toast.success(`禁用企业: ${row.name}`)}
|
||||
>
|
||||
<PowerOff className="w-3 h-3 mr-1" />
|
||||
禁用
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="text-green-600 dark:text-green-400 border-green-300 dark:border-green-600"
|
||||
onClick={() => toast.success(`启用企业: ${row.name}`)}
|
||||
>
|
||||
<Power className="w-3 h-3 mr-1" />
|
||||
启用
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
// 模拟数据
|
||||
const mockData: MockEnterprise[] = [
|
||||
{
|
||||
id: '1',
|
||||
code: 'ENT001',
|
||||
name: '示例科技有限公司',
|
||||
type: '科技有限公司',
|
||||
registrant: '张三',
|
||||
contactPhone: '13800138000',
|
||||
createdAt: '2024-01-15 10:30:00',
|
||||
auditStatus: 'approved',
|
||||
status: 'active',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
code: 'ENT002',
|
||||
name: '测试农业发展有限公司',
|
||||
type: '农业发展有限公司',
|
||||
registrant: '李四',
|
||||
contactPhone: '13900139000',
|
||||
createdAt: '2024-01-16 14:20:00',
|
||||
auditStatus: 'pending',
|
||||
status: 'active',
|
||||
},
|
||||
];
|
||||
|
||||
// 模拟分页配置
|
||||
const mockPagination = {
|
||||
page: 1,
|
||||
size: 10,
|
||||
total: 2,
|
||||
totalPages: 1,
|
||||
hasNext: false,
|
||||
hasPrev: false,
|
||||
};
|
||||
|
||||
// 处理搜索
|
||||
const handleSearch = (filters: Record<string, string>) => {
|
||||
console.log('搜索条件:', filters);
|
||||
toast.success('搜索条件已更新');
|
||||
};
|
||||
|
||||
// 处理排序
|
||||
const handleSort = (sortBy: string, sortOrder: 'asc' | 'desc') => {
|
||||
console.log('排序:', { sortBy, sortOrder });
|
||||
toast.success(`排序: ${sortBy} ${sortOrder}`);
|
||||
};
|
||||
|
||||
// 处理分页
|
||||
const handlePageChange = (page: number) => {
|
||||
console.log('切换到页面:', page);
|
||||
toast.success(`切换到第 ${page} 页`);
|
||||
};
|
||||
|
||||
// 操作按钮
|
||||
const actionButtons = (
|
||||
<Button onClick={() => toast.success('新建企业')}>
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
新建企业
|
||||
</Button>
|
||||
);
|
||||
|
||||
return (
|
||||
<SearchFormPagination
|
||||
title="企业管理"
|
||||
description="管理平台所有企业信息，支持查询、查看详情、启用/禁用企业"
|
||||
searchFields={searchFields}
|
||||
onSearch={handleSearch}
|
||||
columns={columns}
|
||||
data={mockData}
|
||||
pagination={mockPagination}
|
||||
onPageChange={handlePageChange}
|
||||
onSort={handleSort}
|
||||
actionButtons={actionButtons}
|
||||
emptyIcon={<Building2 className="w-12 h-12 mx-auto mb-4 opacity-20" />}
|
||||
emptyText="暂无企业数据"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default EnterpriseManagementExample;
|
||||
@@ -33,7 +33,6 @@ export interface SearchFieldConfig {
|
||||
export interface TableColumnConfig {
|
||||
key: string;
|
||||
label: string;
|
||||
sortable?: boolean;
|
||||
width?: string;
|
||||
render?: (value: any, row: any, index: number) => React.ReactNode;
|
||||
}
|
||||
@@ -68,11 +67,6 @@ export interface SearchFormPaginationProps<T = any> {
|
||||
onPageChange?: (page: number) => void;
|
||||
onSizeChange?: (size: number) => void;
|
||||
|
||||
// 排序配置
|
||||
sortBy?: string;
|
||||
sortOrder?: 'asc' | 'desc';
|
||||
onSort?: (sortBy: string, sortOrder: 'asc' | 'desc') => void;
|
||||
|
||||
// 空状态配置
|
||||
emptyIcon?: React.ReactNode;
|
||||
emptyText?: string;
|
||||
@@ -109,9 +103,6 @@ export function SearchFormPagination<T = any>({
|
||||
pagination,
|
||||
onPageChange,
|
||||
onSizeChange,
|
||||
sortBy,
|
||||
sortOrder,
|
||||
onSort,
|
||||
emptyIcon,
|
||||
emptyText = '暂无数据',
|
||||
showSizeSelector = true,
|
||||
@@ -130,12 +121,6 @@ export function SearchFormPagination<T = any>({
|
||||
}, {} as Record<string, string>)
|
||||
);
|
||||
|
||||
// 同步外部排序状态
|
||||
const [currentSort, setCurrentSort] = useState<{ sortBy?: string; sortOrder: 'asc' | 'desc' }>({
|
||||
sortBy,
|
||||
sortOrder: sortOrder || 'asc'
|
||||
});
|
||||
|
||||
// 数据更新回调 - 通知父组件数据变化
|
||||
useEffect(() => {
|
||||
onDataUpdate?.({
|
||||
@@ -159,23 +144,6 @@ export function SearchFormPagination<T = any>({
|
||||
onSearch?.(newFilters);
|
||||
}, [onSearch]);
|
||||
|
||||
const handleSort = useCallback((columnKey: string) => {
|
||||
const column = columns.find(col => col.key === columnKey);
|
||||
if (!column?.sortable) return;
|
||||
|
||||
// 计算新的排序状态
|
||||
let newSortOrder: 'asc' | 'desc';
|
||||
if (currentSort.sortBy === columnKey) {
|
||||
newSortOrder = currentSort.sortOrder === 'desc' ? 'asc' : 'desc';
|
||||
} else {
|
||||
newSortOrder = 'asc';
|
||||
}
|
||||
|
||||
const newSort = { sortBy: columnKey, sortOrder: newSortOrder };
|
||||
setCurrentSort(newSort);
|
||||
onSort?.(columnKey, newSortOrder);
|
||||
}, [columns, currentSort, onSort]);
|
||||
|
||||
const handlePageChange = useCallback((page: number) => {
|
||||
onPageChange?.(page);
|
||||
}, [onPageChange]);
|
||||
@@ -210,7 +178,6 @@ export function SearchFormPagination<T = any>({
|
||||
{columns.map((column) => (
|
||||
<TableHead
|
||||
key={column.key}
|
||||
className={column.sortable ? 'cursor-pointer hover:bg-muted' : ''}
|
||||
style={{
|
||||
width: getColumnWidth(column),
|
||||
minWidth: column.render ? '120px' : '100px',
|
||||
@@ -219,14 +186,10 @@ export function SearchFormPagination<T = any>({
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap'
|
||||
}}
|
||||
onClick={() => column.sortable && handleSort(column.key)}
|
||||
>
|
||||
<div className="truncate" title={column.label}>
|
||||
{column.label}
|
||||
</div>
|
||||
{column.sortable && currentSort.sortBy === column.key && (
|
||||
<span className="ml-1 flex-shrink-0">{currentSort.sortOrder === 'asc' ? '↑' : '↓'}</span>
|
||||
)}
|
||||
</TableHead>
|
||||
))}
|
||||
</TableRow>
|
||||
|
||||
Reference in New Issue
Block a user