refactor: rewrite document-type management for new backend API
- API client: switch from /api/v3/document-types to /api/document-types, replace group_ids with ruleSetIds, add getEntryModules/getRuleSets - List page: simplified to code/name/entry_module/rule_sets/status columns - New/Edit page: code + name + description + entry_module dropdown + rule_set multi-select checklist - Fix DocumentType type import collision in documents.ts
This commit is contained in:
wren
@@ -1,502 +1,152 @@
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { useSearchParams, useNavigate, useLoaderData, useFetcher, useRevalidator } from "@remix-run/react";
|
||||
import { ActionFunctionArgs, LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
|
||||
import { Table } from "~/components/ui/Table";
|
||||
import { useState, useEffect } from "react";
|
||||
import { useNavigate, useLoaderData } from "@remix-run/react";
|
||||
import { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
|
||||
import { Card } from "~/components/ui/Card";
|
||||
import { Button } from "~/components/ui/Button";
|
||||
import { Pagination } from "~/components/ui/Pagination";
|
||||
import { FilterPanel, FilterSelect, SearchFilter } from "~/components/ui/FilterPanel";
|
||||
import { toastService } from "~/components/ui/Toast";
|
||||
import { messageService } from "~/components/ui/MessageModal";
|
||||
import { usePermission } from "~/hooks/usePermission";
|
||||
import {
|
||||
getDocumentTypes,
|
||||
deleteDocumentType,
|
||||
type DocumentTypeUI,
|
||||
type DocumentTypeSearchParams,
|
||||
type DocumentTypeGroup,
|
||||
getParentEvaluationPointGroups
|
||||
getEntryModules,
|
||||
type DocumentType,
|
||||
type EntryModuleOption,
|
||||
} from "~/api/document-types/document-types";
|
||||
import documentTypesStyles from "~/styles/pages/document-types_index.css?url";
|
||||
|
||||
|
||||
// 引入CSS样式
|
||||
export function links() {
|
||||
return [
|
||||
{ rel: "stylesheet", href: documentTypesStyles }
|
||||
];
|
||||
return [{ rel: "stylesheet", href: documentTypesStyles }];
|
||||
}
|
||||
|
||||
// 页面元数据
|
||||
export const meta: MetaFunction = () => {
|
||||
return [
|
||||
{ title: "文档类型管理 - 中国烟草AI合同及卷宗审核系统" },
|
||||
{ name: "description", content: "管理文档类型，包括查看、编辑和删除文档类型" },
|
||||
{ name: "description", content: "管理文档类型及其规则集绑定" },
|
||||
];
|
||||
};
|
||||
|
||||
// 定义加载器返回的数据类型
|
||||
interface LoaderData {
|
||||
types: DocumentTypeUI[];
|
||||
total: number;
|
||||
pageSize: number;
|
||||
currentPage: number;
|
||||
error?: string;
|
||||
parentGroups: DocumentTypeGroup[];
|
||||
types: DocumentType[];
|
||||
entryModules: EntryModuleOption[];
|
||||
frontendJWT?: string | null;
|
||||
}
|
||||
|
||||
// 定义 action 返回的数据类型
|
||||
interface ActionResponse {
|
||||
success?: boolean;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
// 加载函数 - 获取文档类型列表
|
||||
export async function loader({ request }: LoaderFunctionArgs) {
|
||||
try {
|
||||
// 获取用户会话信息
|
||||
const { getUserSession } = await import("~/api/login/auth.server");
|
||||
const { frontendJWT } = await getUserSession(request);
|
||||
|
||||
const url = new URL(request.url);
|
||||
const name = url.searchParams.get('name') || undefined;
|
||||
const groupId = url.searchParams.get('group_id') || undefined;
|
||||
const entryModuleId = url.searchParams.get('entry_module_id') || undefined;
|
||||
const page = parseInt(url.searchParams.get('page') || '1', 10);
|
||||
const pageSize = parseInt(url.searchParams.get('pageSize') || '10', 10);
|
||||
|
||||
// 构建搜索参数
|
||||
const searchParams: DocumentTypeSearchParams = {
|
||||
name,
|
||||
group_id: groupId ? parseInt(groupId, 10) : undefined,
|
||||
entry_module_id: entryModuleId ? parseInt(entryModuleId, 10) : undefined,
|
||||
page,
|
||||
pageSize
|
||||
};
|
||||
|
||||
// 并行获取文档类型数据和父级评查点分组
|
||||
const [parentGroupsResponse, typesResponse] = await Promise.all([
|
||||
getParentEvaluationPointGroups(frontendJWT),
|
||||
getDocumentTypes(searchParams, frontendJWT)
|
||||
const [typesRes, modulesRes] = await Promise.all([
|
||||
getDocumentTypes({}, frontendJWT),
|
||||
getEntryModules(frontendJWT),
|
||||
]);
|
||||
|
||||
// 如果获取父级评查点分组失败，返回空数组（不阻塞页面加载）
|
||||
if(parentGroupsResponse.error){
|
||||
console.error("获取父级评查点分组失败:", parentGroupsResponse.error);
|
||||
}
|
||||
const parentGroups = parentGroupsResponse.error ? [] : (parentGroupsResponse.data || []);
|
||||
|
||||
// 如果获取文档类型失败（如403无权限），返回空数组和错误信息
|
||||
if(typesResponse.error){
|
||||
console.error("获取文档类型失败:", typesResponse.error);
|
||||
return Response.json({
|
||||
types: [],
|
||||
total: 0,
|
||||
pageSize,
|
||||
currentPage: page,
|
||||
parentGroups: [],
|
||||
frontendJWT,
|
||||
error: typesResponse.error
|
||||
});
|
||||
}
|
||||
|
||||
const typesResult = typesResponse.data?.types || [];
|
||||
|
||||
return Response.json({
|
||||
types: typesResult,
|
||||
total: typesResponse.data?.total || typesResult.length,
|
||||
pageSize,
|
||||
currentPage: page,
|
||||
parentGroups,
|
||||
frontendJWT
|
||||
});
|
||||
return {
|
||||
types: typesRes.data?.types || [],
|
||||
entryModules: modulesRes.data || [],
|
||||
frontendJWT,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error("加载文档类型列表失败:", error);
|
||||
const errorMessage = error instanceof Error ? error.message : "加载文档类型列表失败";
|
||||
return Response.json({
|
||||
types: [],
|
||||
total: 0,
|
||||
pageSize: 10,
|
||||
currentPage: 1,
|
||||
parentGroups: [],
|
||||
frontendJWT: null,
|
||||
error: errorMessage
|
||||
});
|
||||
return { types: [], entryModules: [], error: "加载失败" };
|
||||
}
|
||||
}
|
||||
|
||||
// 动作函数 - 处理删除请求
|
||||
export async function action({ request }: ActionFunctionArgs) {
|
||||
// 获取表单数据
|
||||
const formData = await request.formData();
|
||||
const id = formData.get("id") as string;
|
||||
const intent = formData.get("intent") as string;
|
||||
const { getUserSession } = await import("~/api/login/auth.server");
|
||||
const { frontendJWT } = await getUserSession(request);
|
||||
|
||||
if (intent === "delete" && id) {
|
||||
try {
|
||||
const result = await deleteDocumentType(id, frontendJWT || undefined);
|
||||
|
||||
if (result.error) {
|
||||
return Response.json({ success: false, error: result.error }, { status: result.status || 500 });
|
||||
}
|
||||
|
||||
return Response.json({ success: true });
|
||||
} catch (error) {
|
||||
return Response.json(
|
||||
{ success: false, error: error instanceof Error ? error.message : "删除文档类型失败" },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return Response.json({ success: false, error: "无效的操作" }, { status: 400 });
|
||||
}
|
||||
|
||||
// 文档类型列表组件
|
||||
export default function DocumentTypesList() {
|
||||
export default function DocumentTypesIndex() {
|
||||
const navigate = useNavigate();
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const fetcher = useFetcher<ActionResponse>();
|
||||
const revalidator = useRevalidator();
|
||||
const processedResponseRef = useRef<string | null>(null);
|
||||
const loaderData = useLoaderData<LoaderData>();
|
||||
const [types, setTypes] = useState<DocumentType[]>(loaderData.types || []);
|
||||
const entryModules = loaderData.entryModules || [];
|
||||
|
||||
// 获取加载器数据
|
||||
const { types, total, error, parentGroups, frontendJWT } = useLoaderData<LoaderData>();
|
||||
|
||||
// 处理 fetcher 响应
|
||||
useEffect(() => {
|
||||
// 为每个响应生成唯一标识，避免重复处理
|
||||
const responseKey = fetcher.data ? JSON.stringify(fetcher.data) : null;
|
||||
setTypes(loaderData.types || []);
|
||||
}, [loaderData.types]);
|
||||
|
||||
if (responseKey && responseKey !== processedResponseRef.current) {
|
||||
if (fetcher.data?.success) {
|
||||
toastService.success('删除成功！');
|
||||
processedResponseRef.current = responseKey;
|
||||
// 只重新验证数据，不刷新整个页面
|
||||
revalidator.revalidate();
|
||||
} else if (fetcher.data?.error) {
|
||||
toastService.error(`删除失败: ${fetcher.data.error}`);
|
||||
processedResponseRef.current = responseKey;
|
||||
}
|
||||
}
|
||||
}, [fetcher.data, revalidator]);
|
||||
const getEntryModuleName = (id: number | null) => {
|
||||
if (!id) return "—";
|
||||
return entryModules.find((m) => m.id === id)?.name || `#${id}`;
|
||||
};
|
||||
|
||||
// 权限控制
|
||||
const { canCreate, canUpdate, canDelete, canView } = usePermission();
|
||||
const canCreateType = canCreate('document_type');
|
||||
const canUpdateType = canUpdate('document_type');
|
||||
const canDeleteType = canDelete('document_type');
|
||||
// console.log('document_type---canDeleteType',canDeleteType)
|
||||
const canViewType = canView('document_type');
|
||||
const handleDelete = async (type: DocumentType) => {
|
||||
const confirmed = window.confirm(`确定要删除文档类型「${type.name}」吗？`);
|
||||
if (!confirmed) return;
|
||||
|
||||
// 获取搜索参数
|
||||
const name = searchParams.get('name') || '';
|
||||
const currentPage = parseInt(searchParams.get('page') || String(1), 10);
|
||||
const pageSize = parseInt(searchParams.get('pageSize') || String(10), 10);
|
||||
|
||||
// 处理测试loader返回的信息
|
||||
useEffect(() => {
|
||||
// console.log('返回的父级评查点分组数据',parentGroups)
|
||||
}, [parentGroups])
|
||||
|
||||
// 处理loader加载数据的时候的错误
|
||||
useEffect(() => {
|
||||
if(error){
|
||||
// 如果是无权限错误，显示友好提示
|
||||
if(error.includes('Permission denied') || error.includes('无权限') || error.includes('权限不足')){
|
||||
toastService.error('无权限访问文档类型管理，请联系系统管理员');
|
||||
} else {
|
||||
toastService.error(error);
|
||||
}
|
||||
}
|
||||
}, [error]);
|
||||
|
||||
|
||||
// 处理名称搜索
|
||||
const handleNameSearch = (value: string) => {
|
||||
const newParams = new URLSearchParams(searchParams);
|
||||
if (value) {
|
||||
newParams.set('name', value);
|
||||
const result = await deleteDocumentType(type.id, loaderData.frontendJWT ?? undefined);
|
||||
if (result.success) {
|
||||
toastService.success("文档类型已删除");
|
||||
setTypes((prev) => prev.filter((t) => t.id !== type.id));
|
||||
} else {
|
||||
newParams.delete('name');
|
||||
toastService.error(result.error || "删除失败");
|
||||
}
|
||||
newParams.set('page', '1');
|
||||
setSearchParams(newParams);
|
||||
};
|
||||
|
||||
// 处理筛选变更
|
||||
const handleFilterChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
||||
const { name, value } = e.target;
|
||||
const newParams = new URLSearchParams(searchParams);
|
||||
|
||||
if (value) {
|
||||
newParams.set(name, value);
|
||||
} else {
|
||||
newParams.delete(name);
|
||||
}
|
||||
|
||||
// 切换筛选条件时，重置到第一页
|
||||
newParams.set('page', '1');
|
||||
|
||||
setSearchParams(newParams);
|
||||
};
|
||||
|
||||
// 处理重置筛选
|
||||
const handleReset = () => {
|
||||
const nameInput = document.querySelector('input[placeholder="请输入文档类型名称"]');
|
||||
if (nameInput) {
|
||||
(nameInput as HTMLInputElement).value = '';
|
||||
}
|
||||
|
||||
// 重置所有筛选条件
|
||||
setSearchParams(new URLSearchParams());
|
||||
};
|
||||
|
||||
// 处理删除文档类型
|
||||
const handleDelete = (id: number) => {
|
||||
// 权限检查
|
||||
if (!canDeleteType) {
|
||||
toastService.warning('您没有删除权限');
|
||||
return;
|
||||
}
|
||||
|
||||
// 检查是否正在加载
|
||||
if (fetcher.state === 'submitting') {
|
||||
return;
|
||||
}
|
||||
|
||||
messageService.show({
|
||||
title: "确认删除",
|
||||
message: "确定要删除该文档类型吗？此操作不会影响关联的评查点分组，但可能会影响使用该类型的文档评查。",
|
||||
type: "warning",
|
||||
confirmText: "删除",
|
||||
cancelText: "取消",
|
||||
confirmDelay: 4,
|
||||
onConfirm: () => {
|
||||
const formData = new FormData();
|
||||
formData.append('id', id.toString());
|
||||
formData.append('intent', 'delete');
|
||||
|
||||
// 使用 useFetcher 提交请求
|
||||
fetcher.submit(formData, { method: 'post' });
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 处理编辑文档类型
|
||||
const handleEdit = (id: number) => {
|
||||
navigate(`/document-types/new?id=${id}`);
|
||||
};
|
||||
|
||||
// 处理分页变更
|
||||
const handlePageChange = (page: number) => {
|
||||
const newParams = new URLSearchParams(searchParams);
|
||||
newParams.set('page', page.toString());
|
||||
setSearchParams(newParams);
|
||||
};
|
||||
|
||||
// 处理每页条数变更
|
||||
const handlePageSizeChange = (size: number) => {
|
||||
const newParams = new URLSearchParams(searchParams);
|
||||
newParams.set('pageSize', size.toString());
|
||||
newParams.set('page', '1');
|
||||
setSearchParams(newParams);
|
||||
};
|
||||
|
||||
// 定义表格列配置
|
||||
const columns = [
|
||||
{
|
||||
title: "文档类型名称",
|
||||
key: "name",
|
||||
width: "220px",
|
||||
render: (_: unknown, record: DocumentTypeUI) => (
|
||||
<div className="flex items-center">
|
||||
<i className="ri-file-text-line text-primary mr-2"></i>
|
||||
<span>{record.name}</span>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "描述",
|
||||
key: "description",
|
||||
width: "260px",
|
||||
render: (_: unknown, record: DocumentTypeUI) => (
|
||||
<div className="text-secondary text-sm truncate max-w-[300px]" title={record.description}>
|
||||
{record.description || '-'}
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "入口模块",
|
||||
key: "entry_module",
|
||||
width: "150px",
|
||||
render: (_: unknown, record: DocumentTypeUI) => (
|
||||
<div className="flex items-center">
|
||||
{record.entry_module ? (
|
||||
<span className="entry-module-badge">{record.entry_module.name}</span>
|
||||
) : (
|
||||
<span className="text-gray-400">-</span>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "关联的评查点分组",
|
||||
key: "groups",
|
||||
render: (_: unknown, record: DocumentTypeUI) => (
|
||||
<div className="groups-container">
|
||||
{record.groups && record.groups.length > 0 ? (
|
||||
record.groups.map(group => (
|
||||
<span key={group.id} className="type-badge">
|
||||
{group.name}
|
||||
</span>
|
||||
))
|
||||
) : (
|
||||
<span className="text-gray-400">-</span>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "创建时间",
|
||||
key: "created_at",
|
||||
width: "160px",
|
||||
render: (_: unknown, record: DocumentTypeUI) => record.created_at || '-'
|
||||
},
|
||||
{
|
||||
title: "更新时间",
|
||||
key: "updated_at",
|
||||
width: "160px",
|
||||
render: (_: unknown, record: DocumentTypeUI) => record.updated_at || '-'
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
key: "operation",
|
||||
width: "160px",
|
||||
render: (_: unknown, record: DocumentTypeUI) => (
|
||||
<div className="operations-cell">
|
||||
{canViewType && (
|
||||
<>
|
||||
<button
|
||||
className="operation-btn text-primary"
|
||||
onClick={() => handleEdit(record.id)}
|
||||
>
|
||||
<i className={canUpdateType ? "ri-edit-line" : "ri-eye-line"}></i>
|
||||
{canUpdateType ? '编辑' : '查看'}
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
{canDeleteType && (
|
||||
<button
|
||||
className="operation-btn text-error"
|
||||
onClick={() => handleDelete(record.id)}
|
||||
disabled={fetcher.state === 'submitting'}
|
||||
>
|
||||
<i className="ri-delete-bin-line"></i> 删除
|
||||
</button>
|
||||
)}
|
||||
{!canViewType && !canDeleteType && (
|
||||
<span className="text-gray-400">-</span>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="document-types-page">
|
||||
{error && (
|
||||
<div className="alert alert-error mb-4">
|
||||
<p>{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 页面头部 */}
|
||||
<div className="page-header">
|
||||
<h2 className="page-title">文档类型管理</h2>
|
||||
<div>
|
||||
{canCreateType && (
|
||||
<Button
|
||||
type="primary"
|
||||
icon="ri-add-line"
|
||||
onClick={() => navigate("/document-types/new")}
|
||||
>
|
||||
新增文档类型
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<h2 className="page-title">
|
||||
<i className="ri-file-list-3-line"></i>
|
||||
文档类型管理
|
||||
</h2>
|
||||
<Button type="primary" icon="ri-add-line" onClick={() => navigate("/document-types/new")}>
|
||||
新建文档类型
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 搜索栏 */}
|
||||
<FilterPanel
|
||||
className="mb-4"
|
||||
actions={
|
||||
<>
|
||||
<Button
|
||||
type="default"
|
||||
icon="ri-refresh-line"
|
||||
onClick={handleReset}
|
||||
className="mr-2"
|
||||
>
|
||||
重置
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
noActionDivider={true}
|
||||
>
|
||||
<FilterSelect
|
||||
label="评查点分组"
|
||||
name="group_id"
|
||||
value={searchParams.get('group_id') || ''}
|
||||
options={[
|
||||
...(parentGroups || []).map(group => ({
|
||||
value: group.id.toString(),
|
||||
label: group.name
|
||||
}))
|
||||
]}
|
||||
onChange={handleFilterChange}
|
||||
className="mr-3 w-[20%]"
|
||||
/>
|
||||
|
||||
<SearchFilter
|
||||
label="类型名称"
|
||||
placeholder="请输入文档类型名称"
|
||||
value={name}
|
||||
onSearch={handleNameSearch}
|
||||
className="min-w-[400px]"
|
||||
instantSearch={true}
|
||||
/>
|
||||
|
||||
</FilterPanel>
|
||||
|
||||
{/* 数据表格 */}
|
||||
<Card bodyClassName="px-0 py-0">
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={types}
|
||||
rowKey="id"
|
||||
emptyText="暂无文档类型数据"
|
||||
loading={false}
|
||||
/>
|
||||
|
||||
{/* 分页 */}
|
||||
<div className="px-4 py-3">
|
||||
<Pagination
|
||||
currentPage={currentPage}
|
||||
total={total}
|
||||
pageSize={pageSize}
|
||||
onChange={handlePageChange}
|
||||
onPageSizeChange={handlePageSizeChange}
|
||||
showTotal={true}
|
||||
showPageSizeChanger={true}
|
||||
pageSizeOptions={[10, 20, 50, 100]}
|
||||
/>
|
||||
</div>
|
||||
<Card>
|
||||
{types.length === 0 ? (
|
||||
<div className="empty-state">
|
||||
<i className="ri-inbox-line"></i>
|
||||
<p>暂无文档类型</p>
|
||||
</div>
|
||||
) : (
|
||||
<table className="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>编码</th>
|
||||
<th>名称</th>
|
||||
<th>入口模块</th>
|
||||
<th>规则集</th>
|
||||
<th>状态</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{types.map((type) => (
|
||||
<tr key={type.id}>
|
||||
<td><code>{type.code}</code></td>
|
||||
<td>{type.name}</td>
|
||||
<td>{getEntryModuleName(type.entryModuleId)}</td>
|
||||
<td>
|
||||
<span className="tag">{type.ruleSetIds?.length || 0} 个规则集</span>
|
||||
</td>
|
||||
<td>
|
||||
<span className={`status-badge ${type.isEnabled ? "enabled" : "disabled"}`}>
|
||||
{type.isEnabled ? "启用" : "禁用"}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div className="row-actions">
|
||||
<button
|
||||
className="btn-icon"
|
||||
title="编辑"
|
||||
onClick={() => navigate(`/document-types/new?id=${type.id}`)}
|
||||
>
|
||||
<i className="ri-edit-line"></i>
|
||||
</button>
|
||||
<button
|
||||
className="btn-icon text-error"
|
||||
title="删除"
|
||||
onClick={() => handleDelete(type)}
|
||||
>
|
||||
<i className="ri-delete-bin-line"></i>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
+173
-785
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user