|
|
@@ -0,0 +1,342 @@
|
|
|
+import React, { useState, useEffect, useRef } from 'react';
|
|
|
+import { Search, Plus, RefreshCw, Edit2, Trash2, Download } from 'lucide-react';
|
|
|
+import { postApi, PostVO, PostStatus, PageParam } from '../api/Post';
|
|
|
+import { toast } from 'sonner';
|
|
|
+import { formatDateTimeFull } from '../utils/formatTime';
|
|
|
+import { Button } from './ui/button';
|
|
|
+import { Input } from './ui/input';
|
|
|
+import { Label } from './ui/label';
|
|
|
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './ui/table';
|
|
|
+import PostForm, { PostFormRef } from './PostForm';
|
|
|
+
|
|
|
+export default function PostManagement() {
|
|
|
+ const [loading, setLoading] = useState(true);
|
|
|
+ const [list, setList] = useState<PostVO[]>([]);
|
|
|
+ const [total, setTotal] = useState(0);
|
|
|
+ const [queryParams, setQueryParams] = useState<PageParam>({
|
|
|
+ pageNo: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ name: undefined,
|
|
|
+ code: undefined,
|
|
|
+ });
|
|
|
+ const [exportLoading, setExportLoading] = useState(false);
|
|
|
+ const formRef = useRef<PostFormRef>(null);
|
|
|
+
|
|
|
+ // 获取岗位列表
|
|
|
+ const getList = async (params?: PageParam) => {
|
|
|
+ const currentParams = params || queryParams;
|
|
|
+ setLoading(true);
|
|
|
+ try {
|
|
|
+ console.log('PostManagement: 开始获取岗位列表', currentParams);
|
|
|
+ const response = await postApi.getPostPage(currentParams);
|
|
|
+ console.log('PostManagement: API 响应', response);
|
|
|
+
|
|
|
+ // 处理响应数据
|
|
|
+ let data;
|
|
|
+ if (response && typeof response === 'object') {
|
|
|
+ // 如果响应有 data 属性,使用 data;否则直接使用 response
|
|
|
+ data = (response as any).data !== undefined ? (response as any).data : response;
|
|
|
+ } else {
|
|
|
+ data = response;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 确保 data 是对象
|
|
|
+ if (!data || typeof data !== 'object') {
|
|
|
+ console.warn('PostManagement: 响应数据格式异常', data);
|
|
|
+ setList([]);
|
|
|
+ setTotal(0);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ setList(data.list || []);
|
|
|
+ setTotal(data.total || 0);
|
|
|
+ console.log('PostManagement: 设置列表数据', data.list, '总数', data.total);
|
|
|
+ } catch (error: any) {
|
|
|
+ console.error('PostManagement: 获取岗位列表失败', error);
|
|
|
+ // 即使请求失败,也设置空列表,避免一直显示加载中
|
|
|
+ setList([]);
|
|
|
+ setTotal(0);
|
|
|
+
|
|
|
+ // 显示错误信息
|
|
|
+ const errorMessage = error?.response?.data?.message ||
|
|
|
+ error?.message ||
|
|
|
+ '获取岗位列表失败,请检查网络连接或联系管理员';
|
|
|
+ toast.error(errorMessage);
|
|
|
+ } finally {
|
|
|
+ setLoading(false);
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ // 组件挂载和分页参数变化时获取数据
|
|
|
+ useEffect(() => {
|
|
|
+ console.log('PostManagement: useEffect 触发,queryParams =', queryParams);
|
|
|
+ getList();
|
|
|
+ // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
|
+ }, [queryParams.pageNo, queryParams.pageSize]);
|
|
|
+
|
|
|
+ // 搜索
|
|
|
+ const handleQuery = () => {
|
|
|
+ const newParams = { ...queryParams, pageNo: 1 };
|
|
|
+ setQueryParams(newParams);
|
|
|
+ getList(newParams);
|
|
|
+ };
|
|
|
+
|
|
|
+ // 重置搜索
|
|
|
+ const resetQuery = () => {
|
|
|
+ const resetParams: PageParam = {
|
|
|
+ pageNo: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ name: undefined,
|
|
|
+ code: undefined,
|
|
|
+ };
|
|
|
+ setQueryParams(resetParams);
|
|
|
+ getList(resetParams);
|
|
|
+ };
|
|
|
+
|
|
|
+ // 打开表单
|
|
|
+ const openForm = (type: string, id?: number) => {
|
|
|
+ console.log('PostManagement: 打开表单', type, id, 'formRef.current =', formRef.current);
|
|
|
+ if (formRef.current) {
|
|
|
+ formRef.current.open(type, id);
|
|
|
+ } else {
|
|
|
+ console.error('PostManagement: formRef.current 为 null');
|
|
|
+ toast.error('表单组件未初始化,请刷新页面重试');
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ // 删除岗位
|
|
|
+ const handleDelete = async (id: number) => {
|
|
|
+ if (!confirm('确定要删除这个岗位吗?删除后无法恢复!')) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ try {
|
|
|
+ await postApi.deletePost(id);
|
|
|
+ toast.success('删除成功');
|
|
|
+ await getList();
|
|
|
+ } catch (error: any) {
|
|
|
+ toast.error(error.message || '删除失败');
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ // 导出岗位
|
|
|
+ const handleExport = async () => {
|
|
|
+ if (!confirm('确定要导出岗位数据吗?')) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ setExportLoading(true);
|
|
|
+ try {
|
|
|
+ const blob = await postApi.exportPost(queryParams);
|
|
|
+ const url = window.URL.createObjectURL(blob);
|
|
|
+ const link = document.createElement('a');
|
|
|
+ link.href = url;
|
|
|
+ link.download = '岗位列表.xls';
|
|
|
+ document.body.appendChild(link);
|
|
|
+ link.click();
|
|
|
+ document.body.removeChild(link);
|
|
|
+ window.URL.revokeObjectURL(url);
|
|
|
+ toast.success('导出成功');
|
|
|
+ } catch (error: any) {
|
|
|
+ toast.error(error.message || '导出失败');
|
|
|
+ } finally {
|
|
|
+ setExportLoading(false);
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+
|
|
|
+ // 获取状态标签
|
|
|
+ const getStatusLabel = (status: number) => {
|
|
|
+ return status === PostStatus.ENABLE ? '启用' : '禁用';
|
|
|
+ };
|
|
|
+
|
|
|
+ // 获取状态样式
|
|
|
+ const getStatusStyle = (status: number) => {
|
|
|
+ return status === PostStatus.ENABLE
|
|
|
+ ? 'bg-green-100 text-green-700'
|
|
|
+ : 'bg-gray-100 text-gray-700';
|
|
|
+ };
|
|
|
+
|
|
|
+ return (
|
|
|
+ <div className="space-y-4">
|
|
|
+ {/* 搜索栏 */}
|
|
|
+ <div className="bg-white rounded-xl border border-gray-200/50 shadow-sm p-5">
|
|
|
+ <div className="flex items-center justify-between gap-4 flex-wrap">
|
|
|
+ {/* 搜索输入框 */}
|
|
|
+ <div className="flex items-center gap-3 flex-wrap flex-1">
|
|
|
+ <div className="flex items-center gap-3">
|
|
|
+ <Label htmlFor="post-name-search" className="text-sm font-medium text-gray-700 whitespace-nowrap">
|
|
|
+ 岗位名称
|
|
|
+ </Label>
|
|
|
+ <Input
|
|
|
+ id="post-name-search"
|
|
|
+ placeholder="请输入岗位名称"
|
|
|
+ value={queryParams.name || ''}
|
|
|
+ onChange={(e) => setQueryParams(prev => ({ ...prev, name: e.target.value }))}
|
|
|
+ onKeyDown={(e) => e.key === 'Enter' && handleQuery()}
|
|
|
+ className="h-10 bg-gray-50 border-gray-200 focus:bg-white focus:border-blue-400 focus:ring-2 focus:ring-blue-100 transition-all w-60"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div className="flex items-center gap-3">
|
|
|
+ <Label htmlFor="post-code-search" className="text-sm font-medium text-gray-700 whitespace-nowrap">
|
|
|
+ 岗位编码
|
|
|
+ </Label>
|
|
|
+ <Input
|
|
|
+ id="post-code-search"
|
|
|
+ placeholder="请输入岗位编码"
|
|
|
+ value={queryParams.code || ''}
|
|
|
+ onChange={(e) => setQueryParams(prev => ({ ...prev, code: e.target.value }))}
|
|
|
+ onKeyDown={(e) => e.key === 'Enter' && handleQuery()}
|
|
|
+ className="h-10 bg-gray-50 border-gray-200 focus:bg-white focus:border-blue-400 focus:ring-2 focus:ring-blue-100 transition-all w-60"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {/* 操作按钮组 */}
|
|
|
+ <div className="flex items-center gap-3">
|
|
|
+ <button
|
|
|
+ onClick={handleQuery}
|
|
|
+ className="flex items-center gap-2 px-4 py-2.5 bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-xl hover:shadow-lg hover:shadow-blue-400/40 transition-all duration-300"
|
|
|
+ >
|
|
|
+ <Search className="w-4 h-4" strokeWidth={2.5} />
|
|
|
+ <span className="text-sm">搜索</span>
|
|
|
+ </button>
|
|
|
+
|
|
|
+ <button
|
|
|
+ onClick={resetQuery}
|
|
|
+ className="flex items-center gap-2 px-4 py-2.5 bg-white border border-gray-300 text-gray-700 rounded-xl hover:bg-gray-50 hover:border-gray-400 transition-all duration-300"
|
|
|
+ >
|
|
|
+ <RefreshCw className="w-4 h-4" strokeWidth={2.5} />
|
|
|
+ <span className="text-sm">重置</span>
|
|
|
+ </button>
|
|
|
+
|
|
|
+ <button
|
|
|
+ onClick={() => openForm('create')}
|
|
|
+ className="flex items-center gap-2 px-4 py-2.5 bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-xl hover:shadow-lg hover:shadow-blue-400/40 transition-all duration-300"
|
|
|
+ >
|
|
|
+ <Plus className="w-4 h-4" strokeWidth={2.5} />
|
|
|
+ <span className="text-sm">新增</span>
|
|
|
+ </button>
|
|
|
+
|
|
|
+ <button
|
|
|
+ onClick={handleExport}
|
|
|
+ disabled={exportLoading}
|
|
|
+ className="flex items-center gap-2 px-4 py-2.5 bg-white border border-gray-300 text-gray-700 rounded-xl hover:bg-gray-50 hover:border-gray-400 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
|
+ >
|
|
|
+ <Download className="w-4 h-4" strokeWidth={2.5} />
|
|
|
+ <span className="text-sm">{exportLoading ? '导出中...' : '导出'}</span>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {/* 表格 */}
|
|
|
+ <div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
|
|
|
+ <Table>
|
|
|
+ <TableHeader>
|
|
|
+ <TableRow>
|
|
|
+ <TableHead className="w-[80px] text-center">岗位编号</TableHead>
|
|
|
+ <TableHead className="w-[150px]">岗位名称</TableHead>
|
|
|
+ <TableHead className="w-[150px]">岗位编码</TableHead>
|
|
|
+ <TableHead className="w-[100px] text-center">岗位顺序</TableHead>
|
|
|
+ <TableHead>岗位备注</TableHead>
|
|
|
+ <TableHead className="w-[100px] text-center">状态</TableHead>
|
|
|
+ <TableHead className="w-[180px] text-center">创建时间</TableHead>
|
|
|
+ <TableHead className="w-[160px] text-center">操作</TableHead>
|
|
|
+ </TableRow>
|
|
|
+ </TableHeader>
|
|
|
+ <TableBody>
|
|
|
+ {loading ? (
|
|
|
+ <TableRow>
|
|
|
+ <TableCell colSpan={8} className="text-center py-8 text-gray-500">
|
|
|
+ 加载中...
|
|
|
+ </TableCell>
|
|
|
+ </TableRow>
|
|
|
+ ) : list.length === 0 ? (
|
|
|
+ <TableRow>
|
|
|
+ <TableCell colSpan={8} className="text-center py-8 text-gray-500">
|
|
|
+ 暂无数据
|
|
|
+ </TableCell>
|
|
|
+ </TableRow>
|
|
|
+ ) : (
|
|
|
+ list.map((row, index) => (
|
|
|
+ <TableRow key={row.id} className="hover:bg-gray-50">
|
|
|
+ <TableCell className="text-center">{row.id}</TableCell>
|
|
|
+ <TableCell className="font-medium">{row.name}</TableCell>
|
|
|
+ <TableCell>{row.code}</TableCell>
|
|
|
+ <TableCell className="text-center">{row.sort}</TableCell>
|
|
|
+ <TableCell className="text-sm text-gray-600">{row.remark || '-'}</TableCell>
|
|
|
+ <TableCell className="text-center">
|
|
|
+ <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getStatusStyle(row.status)}`}>
|
|
|
+ {getStatusLabel(row.status)}
|
|
|
+ </span>
|
|
|
+ </TableCell>
|
|
|
+ <TableCell className="text-center text-sm text-gray-600">
|
|
|
+ {formatDateTimeFull(row.createTime)}
|
|
|
+ </TableCell>
|
|
|
+ <TableCell>
|
|
|
+ <div className="flex items-center gap-2 justify-center">
|
|
|
+ <Button
|
|
|
+ variant="ghost"
|
|
|
+ size="sm"
|
|
|
+ onClick={() => openForm('update', row.id)}
|
|
|
+ className="h-8 px-2"
|
|
|
+ >
|
|
|
+ <Edit2 className="w-4 h-4" />
|
|
|
+ </Button>
|
|
|
+ <Button
|
|
|
+ variant="ghost"
|
|
|
+ size="sm"
|
|
|
+ onClick={() => handleDelete(row.id!)}
|
|
|
+ className="h-8 px-2 text-red-600 hover:text-red-700"
|
|
|
+ >
|
|
|
+ <Trash2 className="w-4 h-4" />
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+ </TableCell>
|
|
|
+ </TableRow>
|
|
|
+ ))
|
|
|
+ )}
|
|
|
+ </TableBody>
|
|
|
+ </Table>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {/* 分页 */}
|
|
|
+ {!loading && list.length > 0 && (
|
|
|
+ <div className="bg-white rounded-lg border border-gray-200 px-6 py-4">
|
|
|
+ <div className="flex items-center justify-between">
|
|
|
+ <div className="text-sm text-gray-600">
|
|
|
+ 共 <span className="text-blue-600 font-medium">{total}</span> 条记录
|
|
|
+ </div>
|
|
|
+ <div className="flex gap-2">
|
|
|
+ <Button
|
|
|
+ variant="outline"
|
|
|
+ size="sm"
|
|
|
+ onClick={() => setQueryParams({ ...queryParams, pageNo: queryParams.pageNo! - 1 })}
|
|
|
+ disabled={queryParams.pageNo! <= 1}
|
|
|
+ >
|
|
|
+ 上一页
|
|
|
+ </Button>
|
|
|
+ <span className="px-4 py-2 text-sm text-gray-600 flex items-center">
|
|
|
+ {queryParams.pageNo} / {Math.ceil(total / queryParams.pageSize!) || 1}
|
|
|
+ </span>
|
|
|
+ <Button
|
|
|
+ variant="outline"
|
|
|
+ size="sm"
|
|
|
+ onClick={() => setQueryParams({ ...queryParams, pageNo: queryParams.pageNo! + 1 })}
|
|
|
+ disabled={queryParams.pageNo! >= Math.ceil(total / queryParams.pageSize!)}
|
|
|
+ >
|
|
|
+ 下一页
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+
|
|
|
+ {/* 表单弹窗 */}
|
|
|
+ <PostForm ref={formRef} onSuccess={getList} />
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+}
|
|
|
+
|