TanWenyan/leaudit-platform-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完成文档列表页面ui，封装部分上传文件的公共组件，封装请求接口

Browse Source
This commit is contained in:
yorn
2025-04-01 22:14:43 +08:00
parent 8fe88c1d15
commit 706cea8705
37 changed files with 4512 additions and 1459 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/routes/rules._index.tsx
+206 -174
View File
@@ -1,6 +1,6 @@
import React, { useState } from 'react';
import { json, type MetaFunction, type LoaderFunctionArgs, redirect } from "@remix-run/node";
import { useLoaderData, useSearchParams, useSubmit } from "@remix-run/react";
import { useLoaderData, useSearchParams, useSubmit,Link } from "@remix-run/react";
import { Button } from '~/components/ui/Button';
import { Card } from '~/components/ui/Card';
import { Tag } from '~/components/ui/Tag';
@@ -9,219 +9,245 @@ import rulesStyles from "~/styles/pages/rules_index.css?url";
import type { Rule } from '~/models/rule';
import { RULE_TYPE_LABELS, RULE_TYPE_COLORS, RULE_PRIORITY_LABELS, RULE_PRIORITY_COLORS } from '~/models/rule';
import type { TagColor } from '~/components/ui/Tag';
import { Link } from '@remix-run/react';
import { Table } from '~/components/ui/Table';
import { FilterPanel, FilterSelect, SearchFilter } from '~/components/ui/FilterPanel';
import { Pagination } from '~/components/ui/Pagination';
// import { getRulesList } from '~/api/evaluation_points/rules';
export const links = () => [
{ rel: "stylesheet", href: rulesStyles }
];
// export const handle = {
// breadcrumb: "评查点列表"
// };
export const meta: MetaFunction = () => {
return [
{ title: "中国烟草AI合同及卷宗审核系统 - 评查点列表" },
{ name: "description", content: "管理评查点规则，支持根据类型、规则组和状态进行筛选" },
{ name: "rules", content: "管理评查点规则，支持根据类型、规则组和状态进行筛选" },
{ name: "keywords", content: "评查点,合同审核,规则管理,中国烟草" }
];
};
interface LoaderData {
rules: Rule[];
groups: {
id: string;
name: string;
}[];
totalCount: number;
currentPage: number;
pageSize: number;
totalPages: number;
}
// 模拟数据 - 用于开发阶段展示UI
const mockRules: Rule[] = [
{
id: '1',
code: 'EP001',
name: '合同名称要素检查',
ruleType: 'essential',
ruleGroupId: '1',
groupName: '合同基本要素类检查',
priority: 'high',
description: '检查合同是否包含清晰的合同名称',
checkMethod: 'automatic',
prompt: '查找文档中的合同名称',
isActive: true,
createdAt: '2024-03-15T08:30:00Z',
updatedAt: '2024-03-15T08:30:00Z'
},
{
id: '2',
code: 'EP002',
name: '合同编号要素检查',
ruleType: 'essential',
ruleGroupId: '1',
groupName: '合同基本要素类检查',
priority: 'high',
description: '检查合同是否包含唯一的合同编号',
checkMethod: 'automatic',
prompt: '查找文档中的合同编号',
isActive: true,
createdAt: '2024-03-15T09:15:00Z',
updatedAt: '2024-03-15T09:15:00Z'
},
{
id: '3',
code: 'EP003',
name: '合同主体资格检查',
ruleType: 'legal',
ruleGroupId: '2',
groupName: '销售合同专项检查',
priority: 'medium',
description: '检查合同签署方是否具有合法的主体资格',
checkMethod: 'manual',
prompt: '确认合同签署方的法律主体资格',
isActive: true,
createdAt: '2024-03-16T10:20:00Z',
updatedAt: '2024-03-16T10:20:00Z'
},
{
id: '4',
code: 'EP004',
name: '付款条件检查',
ruleType: 'content',
ruleGroupId: '2',
groupName: '销售合同专项检查',
priority: 'medium',
description: '检查合同中的付款条件是否明确',
checkMethod: 'automatic',
prompt: '提取文档中的付款条件相关内容',
isActive: true,
createdAt: '2024-03-17T11:30:00Z',
updatedAt: '2024-03-17T11:30:00Z'
},
{
id: '5',
code: 'EP005',
name: '违约责任条款检查',
ruleType: 'legal',
ruleGroupId: '3',
groupName: '采购合同专项检查',
priority: 'high',
description: '检查合同是否包含违约责任条款',
checkMethod: 'mixed',
prompt: '提取文档中的违约责任相关条款',
isActive: true,
createdAt: '2024-03-18T13:45:00Z',
updatedAt: '2024-03-18T13:45:00Z'
},
{
id: '6',
code: 'EP006',
name: '合同文本格式检查',
ruleType: 'format',
ruleGroupId: '1',
groupName: '合同基本要素类检查',
priority: 'low',
description: '检查合同文本格式是否符合规范',
checkMethod: 'automatic',
prompt: '检查文档的整体格式规范性',
isActive: false,
createdAt: '2024-03-19T14:50:00Z',
updatedAt: '2024-03-19T14:50:00Z'
},
{
id: '7',
code: 'EP007',
name: '专卖许可证有效性检查',
ruleType: 'legal',
ruleGroupId: '4',
groupName: '专卖许可证审核规则',
priority: 'high',
description: '检查专卖许可证是否在有效期内',
checkMethod: 'automatic',
prompt: '提取专卖许可证有效期信息并判断有效性',
isActive: true,
createdAt: '2024-03-20T15:55:00Z',
updatedAt: '2024-03-20T15:55:00Z'
},
{
id: '8',
code: 'EP008',
name: '处罚决定书格式检查',
ruleType: 'format',
ruleGroupId: '5',
groupName: '行政处罚规范性检查',
priority: 'medium',
description: '检查行政处罚决定书格式是否规范',
checkMethod: 'automatic',
prompt: '检查处罚决定书的格式规范性',
isActive: true,
createdAt: '2024-03-21T16:00:00Z',
updatedAt: '2024-03-21T16:00:00Z'
},
{
id: '9',
code: 'EP009',
name: '处罚依据合法性检查',
ruleType: 'legal',
ruleGroupId: '5',
groupName: '行政处罚规范性检查',
priority: 'high',
description: '检查行政处罚依据是否合法',
checkMethod: 'manual',
prompt: '审核处罚依据的法律合法性',
isActive: true,
createdAt: '2024-03-22T09:10:00Z',
updatedAt: '2024-03-22T09:10:00Z'
},
{
id: '10',
code: 'EP010',
name: '业务特殊条款检查',
ruleType: 'business',
ruleGroupId: '3',
groupName: '采购合同专项检查',
priority: 'medium',
description: '检查合同是否包含烟草行业特殊条款',
checkMethod: 'mixed',
prompt: '识别文档中的烟草行业特殊要求条款',
isActive: true,
createdAt: '2024-03-23T10:15:00Z',
updatedAt: '2024-03-23T10:15:00Z'
}
];
export async function loader({ request }: LoaderFunctionArgs) {
const url = new URL(request.url);
const ruleType = url.searchParams.get("ruleType") || "";
const groupId = url.searchParams.get("groupId") || "";
const isActive = url.searchParams.get("isActive") || "";
const keyword = url.searchParams.get("keyword") || "";
const currentPage = parseInt(url.searchParams.get("page") || "1", 10);
const pageSize = parseInt(url.searchParams.get("pageSize") || "10", 10);
// 从 URL 参数中提取查询条件
const params = {
ruleType: url.searchParams.get("ruleType") || undefined,
groupId: url.searchParams.get("groupId") || undefined,
isActive: url.searchParams.get("isActive") ? url.searchParams.get("isActive") === "true" : undefined,
keyword: url.searchParams.get("keyword") || undefined,
page: parseInt(url.searchParams.get("page") || "1", 10),
pageSize: parseInt(url.searchParams.get("pageSize") || "10", 10)
};
try {
// 模拟数据，实际项目中应从API获取
const rules: Rule[] = [
{
id: "1",
code: "CP001",
name: "合同主体信息完整性检查",
ruleGroupId: "1",
groupName: "合同基本要素检查",
ruleType: "essential",
priority: "high",
description: "检查合同中是否完整包含签约方的基本信息，包括名称、地址、法定代表人等",
checkMethod: "automatic",
prompt: "检查合同主体双方信息是否完整，包括企业名称、注册地址、法定代表人或授权代表、联系方式等",
isActive: true,
createdAt: "2023-06-15 10:30",
updatedAt: "2023-06-15 10:30"
},
{
id: "2",
code: "CP002",
name: "合同金额一致性校验",
ruleGroupId: "1",
groupName: "合同基本要素检查",
ruleType: "content",
priority: "high",
description: "检查合同大小写金额是否一致",
checkMethod: "automatic",
prompt: "检查合同中的金额大写和小写表示是否一致，如￥10,000.00(壹万元整)",
isActive: true,
createdAt: "2023-06-20 14:15",
updatedAt: "2023-06-20 14:15"
},
{
id: "3",
code: "CP003",
name: "保密条款合规性审核",
ruleGroupId: "1",
groupName: "合同基本要素检查",
ruleType: "legal",
priority: "medium",
description: "检查合同是否包含保密条款并符合行业要求",
checkMethod: "mixed",
prompt: "检查合同中的保密条款是否完整、清晰，包含保密范围、期限、违约责任等",
isActive: true,
createdAt: "2023-07-05 09:45",
updatedAt: "2023-07-05 09:45"
},
{
id: "4",
code: "CP004",
name: "合同签约日期格式检查",
ruleGroupId: "1",
groupName: "合同基本要素检查",
ruleType: "format",
priority: "low",
description: "检查合同签约日期格式是否规范",
checkMethod: "automatic",
prompt: "检查合同签约日期格式是否符合YYYY年MM月DD日的规范格式",
isActive: false,
createdAt: "2023-07-10 16:20",
updatedAt: "2023-07-10 16:20"
},
{
id: "5",
code: "CP005",
name: "违约责任条款完整性检查",
ruleGroupId: "2",
groupName: "销售合同专项检查",
ruleType: "legal",
priority: "high",
description: "检查合同违约责任条款是否明确、完整",
checkMethod: "mixed",
prompt: "检查合同中的违约责任条款是否包含违约情形、违约金计算方式、责任承担方式等内容",
isActive: true,
createdAt: "2023-07-15 11:30",
updatedAt: "2023-07-15 11:30"
},
{
id: "6",
code: "CP006",
name: "交货期限有效性检查",
ruleGroupId: "2",
groupName: "销售合同专项检查",
ruleType: "business",
priority: "medium",
description: "检查合同中交货期限是否明确、合理",
checkMethod: "automatic",
prompt: "检查合同中是否明确约定了交货期限，并且期限设置是否合理",
isActive: true,
createdAt: "2023-08-01 14:40",
updatedAt: "2023-08-01 14:40"
},
{
id: "7",
code: "CP007",
name: "合同条款矛盾性检查",
ruleGroupId: "3",
groupName: "采购合同专项检查",
ruleType: "legal",
priority: "high",
description: "检查合同条款之间是否存在矛盾或冲突",
checkMethod: "mixed",
prompt: "分析合同各条款，检查是否存在相互矛盾或冲突的内容",
isActive: true,
createdAt: "2023-08-10 09:15",
updatedAt: "2023-08-10 09:15"
}
];
// 使用模拟数据而不是API调用
// const response = await getRulesList(params);
const groups = [
{ id: "1", name: "合同基本要素检查" },
{ id: "2", name: "销售合同专项检查" },
{ id: "3", name: "采购合同专项检查" },
{ id: "4", name: "专卖许可证审核规则" },
{ id: "5", name: "行政处罚规范性检查" }
];
// 过滤模拟数据
let filteredRules = [...mockRules];
// 过滤数据
let filteredRules = [...rules];
if (ruleType) {
filteredRules = filteredRules.filter(rule => rule.ruleType === ruleType);
if (params.ruleType) {
filteredRules = filteredRules.filter(rule => rule.ruleType === params.ruleType);
}
if (groupId) {
filteredRules = filteredRules.filter(rule => rule.ruleGroupId === groupId);
if (params.groupId) {
filteredRules = filteredRules.filter(rule => rule.ruleGroupId === params.groupId);
}
if (isActive) {
const activeValue = isActive === 'true';
filteredRules = filteredRules.filter(rule => rule.isActive === activeValue);
if (params.isActive !== undefined) {
filteredRules = filteredRules.filter(rule => rule.isActive === params.isActive);
}
if (keyword) {
const lowerKeyword = keyword.toLowerCase();
filteredRules = filteredRules.filter(rule =>
rule.name.toLowerCase().includes(lowerKeyword) ||
rule.code.toLowerCase().includes(lowerKeyword)
if (params.keyword) {
const keyword = params.keyword.toLowerCase();
filteredRules = filteredRules.filter(
rule => rule.name.toLowerCase().includes(keyword) ||
rule.code.toLowerCase().includes(keyword)
);
}
// 计算分页信息
// 计算总记录数
const totalCount = filteredRules.length;
const totalPages = Math.ceil(totalCount / pageSize);
const totalPages = Math.ceil(totalCount / params.pageSize);
// 验证页码范围
if (currentPage < 1 || (totalCount > 0 && currentPage > totalPages)) {
// 如果页码超出范围，重定向到第一页
if (params.page < 1 || (totalCount > 0 && params.page > totalPages)) {
const newUrl = new URL(request.url);
newUrl.searchParams.set('page', '1');
return redirect(newUrl.pathname + newUrl.search);
}
// 分页截取
const startIndex = (currentPage - 1) * pageSize;
const endIndex = startIndex + pageSize;
const paginatedRules = filteredRules.slice(startIndex, endIndex);
// 分页
const offset = (params.page - 1) * params.pageSize;
const paginatedRules = filteredRules.slice(offset, offset + params.pageSize);
return json<LoaderData>({
return json({
rules: paginatedRules,
groups,
totalCount,
currentPage,
pageSize,
currentPage: params.page,
pageSize: params.pageSize,
totalPages
}, {
headers: {
// 添加缓存控制，在生产环境中可以调整
"Cache-Control": "max-age=60, s-maxage=180"
}
});
} catch (error) {
console.error('加载评查点列表失败:', error);
throw new Response('加载评查点列表失败', { status: 500 });
@@ -303,7 +329,7 @@ const priorityLabels = {
};
export default function RulesIndex() {
const { rules, groups, totalCount, currentPage, pageSize } = useLoaderData<typeof loader>();
const { rules, totalCount, currentPage, pageSize } = useLoaderData<typeof loader>();
const [searchParams, setSearchParams] = useSearchParams();
const submit = useSubmit();
@@ -380,9 +406,9 @@ export default function RulesIndex() {
};
// 处理重置筛选
const handleReset = () => {
setSearchParams(new URLSearchParams());
};
// const handleReset = () => {
// setSearchParams(new URLSearchParams());
// };
// 定义表格列配置
const columns = [
@@ -489,16 +515,22 @@ export default function RulesIndex() {
{ value: "business", label: "业务专项类" }
]}
onChange={handleFilterChange}
className="mr-3 w-80 "
className="mr-3 w-60 "
/>
<FilterSelect
label="所属规则组"
name="groupId"
value={searchParams.get('groupId') || ''}
options={groups.map(group => ({ value: group.id, label: group.name }))}
options={[
{ value: "1", label: "合同基本要素类检查" },
{ value: "2", label: "销售合同专项检查" },
{ value: "3", label: "采购合同专项检查" },
{ value: "4", label: "专卖许可证审核规则" },
{ value: "5", label: "行政处罚规范性检查" }
]}
onChange={handleFilterChange}
className="mr-3 w-80"
className="mr-3 w-60"
/>
<FilterSelect
@@ -510,7 +542,7 @@ export default function RulesIndex() {
{ value: "false", label: "禁用" }
]}
onChange={handleFilterChange}
className="mr-3 w-80"
className="mr-3 w-60"
/>
<SearchFilter