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

封装评查点列表的接口，完成删除和查找

Browse Source
This commit is contained in:
yorn
2025-04-03 19:59:57 +08:00
parent 2bde2bd76e
commit 145aec6aa6
5 changed files with 959 additions and 342 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/routes/rules._index.tsx
+140 -54
View File
@@ -1,18 +1,26 @@
import React, { useState } from 'react';
import { json, type MetaFunction, type LoaderFunctionArgs, redirect } from "@remix-run/node";
import { useLoaderData, useSearchParams, useSubmit,Link } from "@remix-run/react";
import React, { useState, useEffect } from 'react';
import { type MetaFunction, type LoaderFunctionArgs, redirect } from "@remix-run/node";
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';
import { StatusDot } from '~/components/ui/StatusDot';
import rulesStyles from "~/styles/pages/rules_index.css?url";
import type { Rule, RuleType, RulePriority } from '~/models/rule';
import { RULE_TYPE_LABELS, RULE_TYPE_COLORS, RULE_PRIORITY_LABELS, RULE_PRIORITY_COLORS } from '~/models/rule';
import { RULE_TYPE_COLORS, RULE_PRIORITY_LABELS, RULE_PRIORITY_COLORS } from '~/models/rule';
import type { TagColor } from '~/components/ui/Tag';
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';
import {
getRulesList,
deleteRule,
duplicateRule,
getRuleTypes,
getRuleGroupsByType,
type RuleType as ApiRuleType,
type RuleGroup
} from '~/api/evaluation_points/rules';
export const links = () => [
{ rel: "stylesheet", href: rulesStyles }
@@ -34,6 +42,7 @@ export type LoaderData = {
currentPage: number;
pageSize: number;
totalPages: number;
ruleTypes: ApiRuleType[]; // 添加评查点类型
};
// API返回的数据映射到前端模型
@@ -83,6 +92,15 @@ export async function loader({ request }: LoaderFunctionArgs) {
};
try {
// 获取评查点类型列表
const typeResponse = await getRuleTypes();
if (typeResponse.error) {
console.error('获取评查点类型失败:', typeResponse.error);
}
const ruleTypes = typeResponse.error ? [] : typeResponse.data;
// 使用API调用获取数据
const response = await getRulesList(params);
@@ -114,7 +132,8 @@ export async function loader({ request }: LoaderFunctionArgs) {
totalCount,
currentPage: params.page,
pageSize: params.pageSize,
totalPages
totalPages,
ruleTypes
}, {
headers: {
"Cache-Control": "max-age=60, s-maxage=180"
@@ -138,41 +157,57 @@ export async function action({ request }: LoaderFunctionArgs) {
try {
if (_action === 'delete') {
// 实际项目中应调用API删除评查点
// 调用API删除评查点
console.log(`删除评查点 ${ruleId}`);
// 模拟API调用
// const response = await fetch(`/api/rules/${ruleId}`, {
// method: 'DELETE',
// });
// if (!response.ok) {
// throw new Error(`删除失败: ${response.status}`);
// }
return json({ success: true });
try {
const deleteResponse = await deleteRule(ruleId as string);
if (deleteResponse.error) {
throw new Error(deleteResponse.error);
}
// 删除成功，获取当前URL
const url = new URL(request.url);
// 返回重定向响应，以刷新页面数据
return redirect(`${url.pathname}${url.search}`);
} catch (error) {
console.error('删除评查点失败:', error);
return Response.json({
success: false,
error: error instanceof Error ? error.message : "删除失败"
}, { status: 500 });
}
}
if (_action === 'duplicate') {
// 实际项目中应调用API复制评查点
// 复制评查点
console.log(`复制评查点 ${ruleId}`);
// 模拟API调用
// const response = await fetch(`/api/rules/${ruleId}/duplicate`, {
// method: 'POST',
// });
// if (!response.ok) {
// throw new Error(`复制失败: ${response.status}`);
// }
return json({ success: true });
try {
const duplicateResponse = await duplicateRule(ruleId as string);
if (duplicateResponse.error) {
throw new Error(duplicateResponse.error);
}
// 复制成功，获取当前URL
const url = new URL(request.url);
// 返回重定向响应，以刷新页面数据
return redirect(`${url.pathname}${url.search}`);
} catch (error) {
console.error('复制评查点失败:', error);
return Response.json({
success: false,
error: error instanceof Error ? error.message : "复制失败"
}, { status: 500 });
}
}
return json({ success: false, error: "未知操作" }, { status: 400 });
return Response.json({ success: false, error: "未知操作" }, { status: 400 });
} catch (error) {
console.error('操作评查点失败:', error);
return json({ success: false, error: "操作失败" }, { status: 500 });
return Response.json({ success: false, error: "操作失败" }, { status: 500 });
}
}
@@ -186,15 +221,7 @@ export function ErrorBoundary() {
);
}
// 规则类型和优先级的描述标签映射
const typeLabels = {
'essential': '基本要素类',
'content': '内容合规类',
'legal': '法律风险类',
'format': '格式规范类',
'business': '业务专项类'
};
// 规则优先级的描述标签映射
const priorityLabels = {
'high': '高',
'medium': '中',
@@ -202,22 +229,81 @@ const priorityLabels = {
};
export default function RulesIndex() {
const { rules, totalCount, currentPage, pageSize } = useLoaderData<typeof loader>();
const loaderData = useLoaderData<typeof loader>();
const { rules, totalCount, currentPage, pageSize } = loaderData;
const ruleTypes = loaderData.ruleTypes || []; // 添加默认空数组避免undefined
const [searchParams, setSearchParams] = useSearchParams();
const submit = useSubmit();
// 状态管理
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
const [ruleToDelete, setRuleToDelete] = useState<Rule | null>(null);
const [ruleGroups, setRuleGroups] = useState<RuleGroup[]>([]);
const [loadingGroups, setLoadingGroups] = useState(false);
// 判断是否禁用规则组选择
const isRuleGroupSelectDisabled = loadingGroups || !searchParams.get('ruleType') || ruleGroups.length === 0;
// 当评查点类型变化时，加载对应的规则组
useEffect(() => {
const selectedType = searchParams.get('ruleType');
// 如果选择了"全部"或未选择，则清空规则组
if (!selectedType || selectedType === 'all') {
setRuleGroups([]);
return;
}
// 加载当前类型的规则组
const loadRuleGroups = async () => {
setLoadingGroups(true);
try {
const response = await getRuleGroupsByType(selectedType);
if (response.data) {
setRuleGroups(response.data);
} else if (response.error) {
console.error('加载规则组失败:', response.error);
setRuleGroups([]);
}
} catch (error) {
console.error('加载规则组出错:', error);
setRuleGroups([]);
} finally {
setLoadingGroups(false);
}
};
loadRuleGroups();
}, [searchParams.get('ruleType')]);
const handleFilterChange = (e: React.ChangeEvent<HTMLSelectElement | HTMLInputElement>) => {
const { name, value } = e.target;
const newParams = new URLSearchParams(searchParams);
// 如果是规则组选择，但是当前应该被禁用，则不处理
if (name === 'groupId' && isRuleGroupSelectDisabled) {
return;
}
if (value) {
newParams.set(name, value);
// 如果是评查点类型变更，清空规则组选择
if (name === 'ruleType') {
newParams.delete('groupId');
// 如果选择了"全部"或空值，也清空规则组选择
if (value === '' || value === 'all') {
setRuleGroups([]);
}
}
} else {
newParams.delete(name);
// 如果清除评查点类型，也清除规则组
if (name === 'ruleType') {
newParams.delete('groupId');
setRuleGroups([]);
}
}
// 切换筛选条件时，重置到第一页
@@ -241,6 +327,7 @@ export default function RulesIndex() {
};
const handleDeleteClick = (rule: Rule) => {
console.log("handleDELETEclick",rule)
setRuleToDelete(rule);
setShowDeleteConfirm(true);
};
@@ -311,9 +398,9 @@ export default function RulesIndex() {
render: (_: unknown, record: Rule) => {
const typeColor = RULE_TYPE_COLORS[record.ruleType] as TagColor;
return (
<Tag color={typeColor}>
{typeLabels[record.ruleType as keyof typeof typeLabels] || RULE_TYPE_LABELS[record.ruleType]}
</Tag>
record.ruleType ? <Tag color={typeColor}>
{record.ruleType}
</Tag> : null
);
}
},
@@ -393,11 +480,10 @@ export default function RulesIndex() {
name="ruleType"
value={searchParams.get('ruleType') || ''}
options={[
{ value: "essential", label: "基本要素类" },
{ value: "content", label: "内容合规类" },
{ value: "format", label: "格式规范类" },
{ value: "legal", label: "法律风险类" },
{ value: "business", label: "业务专项类" }
...ruleTypes.map((type: ApiRuleType) => ({
value: type.id,
label: type.name
}))
]}
onChange={handleFilterChange}
className="mr-3 w-60 "
@@ -408,14 +494,14 @@ export default function RulesIndex() {
name="groupId"
value={searchParams.get('groupId') || ''}
options={[
{ value: "1", label: "合同基本要素类检查" },
{ value: "2", label: "销售合同专项检查" },
{ value: "3", label: "采购合同专项检查" },
{ value: "4", label: "专卖许可证审核规则" },
{ value: "5", label: "行政处罚规范性检查" }
...(isRuleGroupSelectDisabled ? [{ value: "", label: "请先选择评查点类型" }] : []),
...ruleGroups.map(group => ({
value: group.id,
label: group.name
}))
]}
onChange={handleFilterChange}
className="mr-3 w-60"
className={`mr-3 w-60 ${isRuleGroupSelectDisabled ? 'opacity-50' : ''}`}
/>
<FilterSelect