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/api/client.ts
+2 -1
View File
@@ -14,7 +14,8 @@ export type ApiResponse<T> = {
export type QueryParams = Record<string, string | number | boolean | undefined>;
// 获取 API 基础 URL
const API_BASE_URL = '172.16.0.119:9000/admin';
const API_BASE_URL = '172.18.0.100:3000';
// const API_BASE_URL = '172.16.0.119:9000/admin';
// 是否使用模拟数据（开发环境使用）
const USE_MOCK_DATA = false; // 设置为true使用模拟数据，避免API连接问题
app/api/evaluation_points/rules.ts
+411 -84
View File
@@ -7,8 +7,8 @@ import dayjs from 'dayjs';
export interface RulesQueryParams {
page?: number;
pageSize?: number;
ruleType?: string;
groupId?: string;
ruleType?: string; // 评查点类型ID
groupId?: string; // 规则组ID
isActive?: boolean;
keyword?: string;
orderBy?: string;
@@ -30,12 +30,13 @@ export interface ApiRule {
id: number;
code: string;
name: string;
evaluation_point_groups_id: number;
evaluation_point_groups_id: number | null;
risk: string;
description: string;
is_enabled: boolean;
evaluation_point_groups?: {
name: string;
first_name: string;
second_name: string;
};
references_laws: Record<string, unknown>;
extraction_config: {
@@ -94,23 +95,32 @@ function mapApiRuleToFrontendModel(apiRule: ApiRule): Rule {
'低': 'low'
};
// 规则类型映射（这里根据实际业务逻辑设置一个默认值）
const ruleType = 'essential'; // 实际应用中可能需要从其他字段推断
//评查点类型映射
// 优先使用关联查询获取的分组名称，如果不存在则使用默认值
const groupName = apiRule.evaluation_point_groups?.name || `${apiRule.evaluation_point_groups_id}`;
// 规则类型映射（这里根据实际业务逻辑设置一个默认值）
// const ruleType = 'essential'; // 实际应用中可能需要从其他字段推断
// console.log("apiRule.evaluation_point_groups",apiRule);
// 如果evaluation_point_groups_id为null或空，则不显示ruleType和groupName
const isGroupIdEmpty = !apiRule.evaluation_point_groups_id;
// 规则类型只在有分组ID时才显示
const ruleType = isGroupIdEmpty ? '' : (apiRule.evaluation_point_groups?.first_name || '');
// 规则组名称只在有分组ID时才显示
const groupName = isGroupIdEmpty ? '' : (apiRule.evaluation_point_groups?.second_name || `${apiRule.evaluation_point_groups_id}`);
return {
id: apiRule.id.toString(),
code: apiRule.code,
name: apiRule.name,
id: apiRule.id ? apiRule.id.toString() : '', // 添加空值检查
code: apiRule.code || '',
name: apiRule.name || '',
ruleType: ruleType,
groupId: apiRule.evaluation_point_groups_id.toString(),
groupId: isGroupIdEmpty ? '' : apiRule.evaluation_point_groups_id?.toString() || '',
groupName: groupName,
priority: priorityMap[apiRule.risk] || 'medium',
description: apiRule.description,
isActive: apiRule.is_enabled,
createdAt: apiRule.created_at,
description: apiRule.description || '',
isActive: apiRule.is_enabled === undefined ? false : apiRule.is_enabled,
createdAt: apiRule.created_at ,
updatedAt: apiRule.updated_at
};
}
@@ -141,14 +151,12 @@ export async function getRulesList(params: RulesQueryParams): Promise<{data: Rul
// 构建PostgrestParams参数
const postgrestParams: PostgrestParams = {
// 使用PostgREST资源嵌入语法获取关联数据
// 这里使用外键关系自动关联evaluation_point_groups表
// 修改select语句，不使用嵌入查询语法
select: `
id,
code,
name,
evaluation_point_groups_id,
evaluation_point_groups(name),
risk,
description,
is_enabled,
@@ -171,7 +179,7 @@ export async function getRulesList(params: RulesQueryParams): Promise<{data: Rul
}
};
// 添加精确匹配过滤
// 添加精确匹配过滤：规则组ID
if (groupId) {
postgrestParams.filter!['evaluation_point_groups_id'] = `eq.${groupId}`;
}
@@ -180,6 +188,47 @@ export async function getRulesList(params: RulesQueryParams): Promise<{data: Rul
postgrestParams.filter!['is_enabled'] = `eq.${isActive}`;
}
// 如果指定了评查点类型ID，需要先查询该类型下的所有规则组ID
if (ruleType) {
try {
// 先获取该类型下的所有规则组
const groupsParams: PostgrestParams = {
select: 'id',
filter: {
'pid': `eq.${ruleType}`
}
};
const groupsResponse = await postgrestGet<{code: number; msg: string; data: Array<{id: number}>}>('evaluation_point_groups', groupsParams);
if (groupsResponse.error) {
console.error('获取规则组列表失败:', groupsResponse.error);
} else {
let groupIds: number[] = [];
// 处理不同API响应格式
if (groupsResponse.data && 'code' in groupsResponse.data && groupsResponse.data.data) {
if (Array.isArray(groupsResponse.data.data) && groupsResponse.data.data.length > 0) {
groupIds = groupsResponse.data.data.map(group => group.id);
}
} else if (Array.isArray(groupsResponse.data) && groupsResponse.data.length > 0) {
groupIds = groupsResponse.data.map(group => group.id);
}
// 使用in过滤条件，如果找到规则组
if (groupIds.length > 0) {
postgrestParams.filter!['evaluation_point_groups_id'] = `in.(${groupIds.join(',')})`;
}
if (groupId) {
postgrestParams.filter!['evaluation_point_groups_id'] = `eq.${groupId}`;
}
}
} catch (error) {
console.error('获取规则组ID出错:', error);
// 错误不中断流程，继续使用其他筛选条件
}
}
// 添加模糊搜索
if (keyword) {
// 使用PostgREST的or条件查询
@@ -198,66 +247,90 @@ export async function getRulesList(params: RulesQueryParams): Promise<{data: Rul
return { error: response.error, status: response.status };
}
// 确保响应数据存在且符合预期格式
if (!response.data || !response.data.data || !Array.isArray(response.data.data)) {
// 处理不同的API响应格式
let apiRules: ApiRule[] = [];
let totalCount = 0;
// 9000端口格式 {code: number, msg: string, data: ApiRule[]}
if (response.data && 'code' in response.data && response.data.data) {
if (Array.isArray(response.data.data)) {
apiRules = response.data.data;
} else {
return { error: '接口返回数据格式不正确', status: 500 };
}
}
// 3000端口格式 ApiRule[]
else if (Array.isArray(response.data)) {
apiRules = response.data;
}
// 不支持的格式
else {
return { error: '接口返回数据格式不正确', status: 500 };
}
// 获取API返回的所有评查点
const apiRules = response.data.data;
// 从响应头中获取总记录数（如果存在）
// 注意：这里假设总记录数会在接口响应的某个位置返回
// 实际使用时，需要根据 PostgREST 的响应格式进行调整
let totalCount = 0;
// 尝试从响应中获取总数
if (response.headers && response.headers['content-range']) {
let rangeHeader = '';
// 安全地检查头信息是否存在
if (response && 'headers' in response && response.headers && typeof response.headers === 'object') {
rangeHeader = (response.headers as Record<string, string>)['content-range'] || '';
}
if (rangeHeader) {
// 例如 Content-Range: 0-9/42 表示总共有 42 条记录
const range = response.headers['content-range'];
const total = range.split('/')[1];
const total = rangeHeader.split('/')[1];
if (total !== '*') { // '*' 表示未知总数
totalCount = parseInt(total, 10);
}
} else {
// 如果没有响应头，则使用当前返回的数据长度作为默认值
// 这种情况下分页可能不准确
totalCount = apiRules.length;
console.warn('未能从响应中获取总记录数，使用当前页数据长度作为默认值');
}
// 打印第一个数据项来查看结构（仅用于调试）
if (apiRules.length > 0) {
console.log('评查点数据示例:', JSON.stringify(apiRules[0], null, 2));
}
// if (apiRules.length > 0) {
// console.log('评查点数据示例:', JSON.stringify(apiRules[0], null, 2));
// }
// 收集所有分组ID (多进行一步查找表的操作)
// 收集所有规则分组ID（实际上是二级分组） (多进行一步查找表的操作)
const groupIds = [...new Set(apiRules.map(rule => rule.evaluation_point_groups_id))];
// 如果有分组ID，查询分组信息
const groupsMap: Record<string, string> = {};
// 如果有分组ID，查询分组信息 - 更新类型定义
const groupsMap: Record<string, {first_name: string; second_name: string}> = {};
if (groupIds.length > 0) {
try {
// 构建查询参数
const groupsParams: PostgrestParams = {
select: 'id,name',
filter: {
'id': `in.(${groupIds.join(',')})`
}
};
// 过滤null和空值
const validGroupIds = groupIds.filter(id => id != null && id.toString().trim() !== '');
// 查询评查点分组表
const groupsResponse = await postgrestGet<{code: number; msg: string; data: {id: number; name: string}[]}>('evaluation_point_groups', groupsParams);
if (groupsResponse.data?.data) {
// 创建ID到名称的映射
groupsResponse.data.data.forEach(group => {
groupsMap[group.id.toString()] = group.name;
});
if (validGroupIds.length > 0) {
// 使用Promise.all并行查询所有分组信息 - 使用正确的函数名
const groupPromises = validGroupIds.map(id =>
postgrestGet<{code: number; msg: string; data: {id: number; pid: number; name: string; first_name: string; second_name: string}[]}>(
`rpc/get_evaluation_point_group_with_pid?input_id=${id}`
)
);
// 打印分组数据（仅用于调试）
console.log('分组数据:', groupsMap);
const groupResponses = await Promise.all(groupPromises);
// console.log("groupResponsesdddddddddddddddddd",groupResponses);
// 处理响应，填充groupsMap
groupResponses.forEach((response) => {
if (!response.error && response.data) {
// 处理不同API响应格式
if (Array.isArray(response.data.data) && response.data.data.length > 0) {
const groupid = response.data.data[1]?.id || "";
groupsMap[groupid] = {
first_name: response.data.data[0]?.name || "",
second_name: response.data.data[1]?.name || ""
};
}else if(Array.isArray(response.data) && response.data.length > 0){
const groupid = response.data[1]?.id || "";
groupsMap[groupid] = {
first_name: response.data[0]?.name || "",
second_name: response.data[1]?.name || ""
};
}
}
});
}
} catch (error) {
console.error('获取分组数据失败:', error);
@@ -265,33 +338,26 @@ export async function getRulesList(params: RulesQueryParams): Promise<{data: Rul
}
}
// 应用本地过滤 - 只在API不支持的情况下使用
let filteredRules = [...apiRules];
// 如果有ruleType过滤（API暂不支持），在本地过滤
if (ruleType) {
// 注意：这是本地过滤，实际情况下最好在API层面支持
filteredRules = filteredRules.filter(() => {
// 实现一个映射逻辑，比如根据其他字段推导ruleType
const derivedType = 'essential'; // 此处应为实际推导逻辑
return derivedType === ruleType;
});
}
const filteredRules = [...apiRules];
// 不再需要本地过滤，因为已经在API层面添加了评查点类型过滤
// 如果进行了本地过滤，则需要调整总记录数
if (ruleType) {
totalCount = filteredRules.length;
}
// if (ruleType) {
// totalCount = filteredRules.length;
// }
// 将API返回的数据映射到前端模型，并附加分组名称
console.log("groupsMap",groupsMap);
const mappedRules = filteredRules.map(apiRule => {
// 创建修改版的apiRule，添加从分组映射获取的名称
const enhancedApiRule = {
...apiRule,
// 从映射中获取分组名称，如果不存在则使用默认值
evaluation_point_groups: {
name: groupsMap[apiRule.evaluation_point_groups_id.toString()] || `${apiRule.evaluation_point_groups_id}`
// name: apiRule.evaluation_point_groups?.name || `${apiRule.evaluation_point_groups_id}`
first_name: groupsMap[apiRule.evaluation_point_groups_id?.toString() || '']?.first_name || `${apiRule.evaluation_point_groups_id}`,
second_name: groupsMap[apiRule.evaluation_point_groups_id?.toString() || '']?.second_name || `${apiRule.evaluation_point_groups_id}`
}
};
@@ -383,7 +449,10 @@ export async function getRule(id: string): Promise<{data: Rule; error?: never} |
if (groupResponse.data?.data && groupResponse.data.data.length > 0) {
// 将分组信息添加到评查点数据中
const group = groupResponse.data.data[0];
apiRule.evaluation_point_groups = { name: group.name };
apiRule.evaluation_point_groups = {
first_name: group.name,
second_name: group.name
};
}
}
} catch (error) {
@@ -535,23 +604,103 @@ export async function updateRule(id: string, ruleData: Partial<Omit<Rule, 'id' |
*/
export async function deleteRule(id: string): Promise<{data: Rule; error?: never} | {data?: never; error: string; status?: number}> {
try {
console.log(`开始删除评查点, ID: ${id}`);
// 使用 PostgREST 语法，通过查询参数指定要删除的行
const postgrestParams: PostgrestParams = {
filter: {
'id': `eq.${id}`
},
headers: {
'Prefer': 'return=representation' // 请求返回被删除的记录
}
};
// 使用postgrestDelete删除评查点
const response = await postgrestDelete<{code: number; msg: string; data: ApiRule}>(`evaluation_points/${id}`);
const response = await postgrestDelete('evaluation_points', postgrestParams);
console.log('删除请求响应:', JSON.stringify(response, null, 2));
// 检查是否有错误响应
if (response.error) {
console.error('删除评查点API返回错误:', response.error);
return { error: response.error, status: response.status };
}
// 确保响应数据存在且符合预期格式
if (!response.data || !response.data.data) {
return { error: '接口返回数据格式不正确', status: 500 };
// 确保响应数据存在
if (!response.data) {
console.error('API响应缺少数据字段');
return { error: 'API返回数据为空', status: 500 };
}
// 将API返回的数据映射到前端模型
const rule = mapApiRuleToFrontendModel(response.data.data);
// 创建一个模拟的成功删除结果
const createMockSuccessRule = (): Rule => {
return {
id: id,
code: '',
name: '',
ruleType: '',
groupId: '',
groupName: '',
priority: 'medium',
description: '',
isActive: false,
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString()
};
};
return { data: rule };
// 处理9000端口响应格式
if (typeof response.data === 'object' && response.data !== null && 'code' in response.data) {
const apiResponse = response.data as {code: number; msg: string; data?: ApiRule | ApiRule[]};
// 检查响应的code - 如果code为0则表示操作成功
if (apiResponse.code === 0) {
// 如果data不存在或是空数组，返回模拟数据
if (!apiResponse.data || (Array.isArray(apiResponse.data) && apiResponse.data.length === 0)) {
return { data: createMockSuccessRule() };
}
// 处理存在的data
let apiRule: ApiRule;
if (Array.isArray(apiResponse.data)) {
apiRule = apiResponse.data[0];
} else {
apiRule = apiResponse.data;
}
// 将API返回的数据映射到前端模型
const rule = mapApiRuleToFrontendModel(apiRule);
return { data: rule };
}
// 如果code不为0，则返回错误信息
return {
error: apiResponse.msg || '删除失败，服务器返回错误',
status: 500
};
}
// 处理3000端口响应格式 (直接返回数据)
else {
// 处理数组响应
if (Array.isArray(response.data)) {
if (response.data.length === 0) {
// 空数组表示成功但没有返回数据
return { data: createMockSuccessRule() };
} else {
// 返回数组中的第一个元素
const apiRule = response.data[0] as ApiRule;
const rule = mapApiRuleToFrontendModel(apiRule);
return { data: rule };
}
}
// 处理单一对象响应
else {
const apiRule = response.data as ApiRule;
const rule = mapApiRuleToFrontendModel(apiRule);
return { data: rule };
}
}
} catch (error) {
console.error('删除评查点出错:', error);
return {
@@ -600,4 +749,182 @@ export async function duplicateRule(id: string): Promise<{data: Rule; error?: ne
status: 500
};
}
}
/**
* 评查点类型
*/
export interface RuleType {
id: string;
name: string;
description?: string;
isEnabled: boolean;
}
/**
* 规则组
*/
export interface RuleGroup {
id: string;
name: string;
description?: string;
isEnabled: boolean;
typeId?: string; // 关联的评查点类型ID
}
/**
* 获取评查点类型列表
* @returns 评查点类型列表
*/
export async function getRuleTypes(): Promise<{data: RuleType[]; error?: never} | {data?: never; error: string; status?: number}> {
try {
// 构建PostgrestParams参数
const postgrestParams: PostgrestParams = {
select: `
id,
pid,
code,
name,
description,
is_enabled
`,
// 查询父ID为0的类型（顶级类型）
filter: {
'pid': 'eq.0'
}
};
// 发送请求获取评查点类型列表
const response = await postgrestGet<{code: number; msg: string; data: Array<{
id: number;
pid: number;
code: string;
name: string;
description: string;
is_enabled: boolean;
}>;
}>('evaluation_point_groups', postgrestParams);
// 检查是否有错误响应
if (response.error) {
return { error: response.error, status: response.status };
}
if(response.data && 'code' in response.data && response.data.data){
if(Array.isArray(response.data.data) && response.data.data.length > 0){
// 将API返回的数据映射到前端模型
const ruleTypes = response.data.data.map(item => ({
id: item.id.toString(),
pid: item.pid.toString(),
code: item.code,
name: item.name,
description: item.description,
isEnabled: item.is_enabled
}));
return { data: ruleTypes };
}else{
return { error: '9000接口返回数据格式不正确', status: 500 };
}
}else if(Array.isArray(response.data) && response.data.length > 0){
console.log("评查点类型列表",response.data);
const ruleTypes = response.data.map(item => ({
id: item.id.toString(),
pid: item.pid.toString(),
code: item.code,
name: item.name,
description: item.description,
isEnabled: item.is_enabled
}));
return { data: ruleTypes };
}else{
return { error: '3000接口返回数据格式不正确', status: 500 };
}
} catch (error) {
console.error('获取评查点类型出错:', error);
return {
error: error instanceof Error ? error.message : '获取评查点类型失败',
status: 500
};
}
}
/**
* 根据评查点类型ID获取规则组列表
* @param typeId 评查点类型ID
* @returns 规则组列表
*/
export async function getRuleGroupsByType(typeId: string): Promise<{data: RuleGroup[]; error?: never} | {data?: never; error: string; status?: number}> {
try {
// 如果typeId为空或为"全部"，则返回空数组
if (!typeId || typeId === 'all') {
return { data: [] };
}
// 构建PostgrestParams参数
const postgrestParams: PostgrestParams = {
select: `
id,
pid,
code,
name,
description,
is_enabled
`,
// 查询指定类型ID的规则组
filter: {
'pid': `eq.${typeId}`
}
};
// 发送请求获取规则组列表
const response = await postgrestGet<{code: number; msg: string; data: Array<{
id: number;
pid: number;
code: string;
name: string;
description: string;
is_enabled: boolean;
}>;
}>('evaluation_point_groups', postgrestParams);
// 检查是否有错误响应
if (response.error) {
return { error: response.error, status: response.status };
}
// 确保响应数据存在且符合预期格式
if(response.data && 'code' in response.data && response.data.data){
if(Array.isArray(response.data.data) && response.data.data.length > 0){
// 将API返回的数据映射到前端模型
const ruleGroups = response.data.data.map(item => ({
id: item.id.toString(),
name: item.name,
description: item.description,
isEnabled: item.is_enabled,
code: item.code
}));
return { data: ruleGroups };
}else{
return { error: '9000接口返回数据格式不正确', status: 500 };
}
}else if(Array.isArray(response.data) && response.data.length > 0){
console.log("评查点类型列表",response.data);
const ruleGroups = response.data.map(item => ({
id: item.id.toString(),
name: item.name,
description: item.description,
isEnabled: item.is_enabled,
code: item.code
}));
return { data: ruleGroups };
}else{
return { error: '3000接口返回数据格式不正确', status: 500 };
}
} catch (error) {
console.error('获取规则组出错:', error);
return {
error: error instanceof Error ? error.message : '获取规则组失败',
status: 500
};
}
}
app/api/postgrest-client.ts
+23 -8
View File
@@ -24,7 +24,8 @@ export interface PostgrestParams {
*/
function logPostgrestQuery(endpoint: string, params?: QueryParams): void {
if (process.env.NODE_ENV !== 'production') {
const baseUrl = 'http://172.16.0.119:9000/admin';
// const baseUrl = 'http://172.16.0.119:9000/admin';
const baseUrl = 'http://172.18.0.100:3000';
console.log('\n📦 PostgREST 查询日志 ========================');
console.log(`📦 API 端点: ${baseUrl}/${endpoint}`);
@@ -355,24 +356,38 @@ export async function postgrestPut<T, D = Record<string, unknown>>(endpoint: str
/**
* 发送 DELETE 请求到 PostgresREST 接口
* @param endpoint 端点
* @param params 查询参数，用于指定要删除的记录
* @returns 响应数据
*/
export async function postgrestDelete<T>(endpoint: string): Promise<{data: T; error?: never} | {data?: never; error: string; status?: number}> {
export async function postgrestDelete<T>(endpoint: string, params?: PostgrestParams): Promise<{data: T; error?: never} | {data?: never; error: string; status?: number}> {
try {
// 确保端点没有前导斜杠
const apiEndpoint = endpoint.startsWith('/') ? endpoint.substring(1) : endpoint;
// 打印查询信息（DELETE请求只打印端点）
logPostgrestQuery(apiEndpoint);
// 转换查询参数
const queryParams = params ? transformParams(params) : {};
// 提取并移除自定义头部参数
const headers: Record<string, string> = {
'Prefer': 'return=representation', // 默认请求返回被删除的记录
...(params?.headers || {})
};
// 清除查询参数中的headers属性，避免将其作为URL参数
if (queryParams.headers) {
delete queryParams.headers;
}
// 打印查询信息
logPostgrestQuery(apiEndpoint, queryParams);
const response = await apiRequest<T>(
apiEndpoint,
{
method: 'DELETE',
headers: {
'Prefer': 'return=representation'
}
}
headers
},
queryParams
);
if (response.error) {
app/routes/files.upload.tsx
+383 -195
View File
@@ -1,5 +1,6 @@
import { useState, useEffect, useRef, useCallback } from "react";
import { MetaFunction, ActionFunctionArgs } from "@remix-run/node";
import { MetaFunction, ActionFunctionArgs, json } from "@remix-run/node";
import { Form } from "@remix-run/react";
import { Card } from "~/components/ui/Card";
import { Button } from "~/components/ui/Button";
import { Table } from "~/components/ui/Table";
@@ -82,27 +83,132 @@ export interface UploadedFile {
};
}
// 文件上传响应接口
interface FileUploadResponse {
success: boolean;
fileId?: string;
message?: string;
error?: string;
}
// 将文件转换为二进制数据
async function uploadFileToBinary(file: File): Promise<ArrayBuffer> {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => {
if (reader.result instanceof ArrayBuffer) {
resolve(reader.result);
} else {
reject(new Error('无法将文件转换为二进制格式'));
}
};
reader.onerror = () => {
reject(new Error('读取文件失败'));
};
// 读取文件为 ArrayBuffer (二进制格式)
reader.readAsArrayBuffer(file);
});
}
// 模拟上传文件到服务器的API
async function uploadFileToServer(
binaryData: ArrayBuffer,
fileName: string,
fileType: string,
documentType: FileType,
priority: Priority
): Promise<FileUploadResponse> {
// 在实际应用中，这里会使用fetch或axios发送请求到后端API
console.log(`[模拟API] 上传文件: ${fileName}, 大小: ${binaryData.byteLength} 字节`);
// 模拟网络延迟
await new Promise(resolve => setTimeout(resolve, 500));
try {
// 创建HTTP请求的参数（实际环境中会使用这些参数发送请求）
const requestParams = {
method: 'POST',
url: 'http://172.16.0.55:8000/admin/documents/upload',
headers: {
'Content-Type': 'application/octet-stream',
'X-File-Name': encodeURIComponent(fileName),
'X-File-Type': fileType,
'X-Document-Type': documentType,
'X-Priority': priority
},
body: binaryData // 二进制数据作为请求体
};
console.log('[模拟API] 请求参数:', {
url: requestParams.url,
headers: requestParams.headers,
bodySize: binaryData.byteLength
});
// 实际API调用 - 在生产环境中实现
const response = await fetch(requestParams.url, {
method: requestParams.method,
headers: requestParams.headers,
body: binaryData
});
if (!response.ok) {
throw new Error(`上传失败: ${response.status} ${response.statusText}`);
}
const data = await response.json();
return data;
// 模拟成功响应 (实际应用中这是服务器返回的)
return {
success: true,
fileId: `file_${Date.now()}`,
message: '文件上传成功'
};
} catch (error) {
console.error('[模拟API] 上传错误:', error);
return {
success: false,
error: error instanceof Error ? error.message : '上传失败'
};
}
}
// action处理文件上传请求
export async function action({ request }: ActionFunctionArgs) {
try {
const formData = await request.formData();
// 由于无法直接从Remix的action中处理文件上传，
// 实际环境中应使用FormData将文件发送到后端API
// 这里我们模拟处理过程，创建一个响应对象
// 获取文件和其他字段
const fileUpload = formData.get("file") as File | null;
const fileType = formData.get("fileType") as FileType;
const priority = formData.get("priority") as Priority;
if (!fileType) {
return Response.json(
return json(
{ success: false, error: "请选择文件类型" },
{ status: 400 }
);
}
if (!fileUpload) {
return json(
{ success: false, error: "未找到上传的文件" },
{ status: 400 }
);
}
// 获取文件信息
console.log(`接收到文件: ${fileUpload.name}, 大小: ${fileUpload.size}, 类型: ${fileUpload.type}`);
// 注意: 在实际的Remix action中，我们无法直接处理文件内容
// 这里的代码仅用于模拟。在前端组件中，我们将实现实际的文件处理逻辑。
// 模拟文件上传成功响应
return Response.json({
return json({
success: true,
message: "文件上传请求已接收",
fileId: `file_${Date.now()}`,
@@ -111,7 +217,7 @@ export async function action({ request }: ActionFunctionArgs) {
});
} catch (error) {
console.error("文件上传失败:", error);
return Response.json(
return json(
{ success: false, error: "文件上传失败，请重试" },
{ status: 500 }
);
@@ -186,6 +292,9 @@ export default function FilesUpload() {
// UploadArea组件引用
const uploadAreaRef = useRef<UploadAreaRef>(null);
// 表单提交引用
const formRef = useRef<HTMLFormElement>(null);
// 清理定时器
useEffect(() => {
return () => {
@@ -198,6 +307,28 @@ export default function FilesUpload() {
};
}, []);
// 处理表单提交
const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
if (!currentFile || !fileType) {
alert('请选择文件和文件类型');
return;
}
try {
// 设置上传状态
setUploadStage('uploading');
// 实际上传 - 通过我们自定义的二进制上传方法
await startUpload(currentFile);
} catch (error) {
console.error('提交表单错误:', error);
alert(`提交表单失败: ${error instanceof Error ? error.message : '未知错误'}`);
}
};
// 处理文件选择
const handleFilesSelected = useCallback((selectedFiles: FileList) => {
console.log("selectedFiles", selectedFiles);
@@ -213,46 +344,91 @@ export default function FilesUpload() {
}
setCurrentFile(selectedFiles[0]);
startUpload(selectedFiles[0]);
}, [fileType, currentFile]);
// 不再立即上传，而是等待表单提交
}, [fileType]);
// 开始上传文件
const startUpload = (file: File) => {
setUploadStage("uploading");
setUploadProgress(0);
// 更新步骤状态
const updatedSteps = [...processingSteps];
updatedSteps[0].status = "active";
updatedSteps[0].description = `正在上传文件"${file.name}"到服务器...`;
setProcessingSteps(updatedSteps);
// 模拟上传进度
if (progressIntervalRef.current) {
clearInterval(progressIntervalRef.current);
}
progressIntervalRef.current = setInterval(() => {
setUploadProgress(prev => {
const newProgress = prev + 5;
// 根据文件大小调整上传速度
const speedFactor = Math.min(file.size / (1024 * 1024) + 1, 5);
setUploadSpeed(`${Math.floor(Math.random() * 100 * speedFactor) + 50}KB/s`);
if (newProgress >= 100) {
if (progressIntervalRef.current) {
clearInterval(progressIntervalRef.current);
setUploadSpeed("完成");
// 完成上传后开始处理流程
startProcessing(file);
const startUpload = async (file: File) => {
try {
setUploadStage("uploading");
setUploadProgress(0);
// 更新步骤状态
const updatedSteps = [...processingSteps];
updatedSteps[0].status = "active";
updatedSteps[0].description = `正在上传文件"${file.name}"到服务器...`;
setProcessingSteps(updatedSteps);
// 转换文件为二进制格式
console.log("开始转换文件到二进制格式...");
// 模拟上传进度
if (progressIntervalRef.current) {
clearInterval(progressIntervalRef.current);
}
progressIntervalRef.current = setInterval(() => {
setUploadProgress(prev => {
const newProgress = prev + 2;
// 根据文件大小调整上传速度
const speedFactor = Math.min(file.size / (1024 * 1024) + 1, 5);
setUploadSpeed(`${Math.floor(Math.random() * 100 * speedFactor) + 50}KB/s`);
if (newProgress >= 50) { // 只模拟到50%，剩下的50%留给实际上传
if (progressIntervalRef.current) {
clearInterval(progressIntervalRef.current);
}
return 50;
}
return 100;
}
return newProgress;
});
}, 200);
return newProgress;
});
}, 100);
// 实际执行二进制转换
const binaryData = await uploadFileToBinary(file);
console.log(`文件转换为二进制完成，大小: ${binaryData.byteLength} 字节`);
// 模拟实际上传
setUploadProgress(60); // 转换完成，进度到60%
setUploadSpeed(`${Math.floor(Math.random() * 200) + 100}KB/s`);
console.log("开始上传文件到服务器...");
const response = await uploadFileToServer(
binaryData,
file.name,
file.type,
fileType as FileType,
priority
);
if (!response.success) {
throw new Error(response.error || "上传失败");
}
console.log("文件上传成功:", response);
setUploadProgress(100);
setUploadSpeed("完成");
// 完成上传后开始处理流程
startProcessing(file);
} catch (error) {
console.error("文件上传错误:", error);
// 更新步骤状态为错误
const errorSteps = [...processingSteps];
errorSteps[0].status = "error";
errorSteps[0].description = `上传文件"${file.name}"失败: ${error instanceof Error ? error.message : '未知错误'}`;
setProcessingSteps(errorSteps);
// 清除进度定时器
if (progressIntervalRef.current) {
clearInterval(progressIntervalRef.current);
}
alert(`文件上传失败: ${error instanceof Error ? error.message : '未知错误'}`);
resetUpload();
}
};
// 开始处理文件
@@ -308,13 +484,6 @@ export default function FilesUpload() {
setProcessingSteps(nextUpdatedSteps);
currentStepIndex++;
// 如果这是最后一个步骤，确保完成
// if (currentStepIndex >= processingSteps.length) {
// setTimeout(() => {
// completeProcessing();
// }, 1000);
// }
}, 2000);
}, 2500);
@@ -514,157 +683,176 @@ export default function FilesUpload() {
<h2 className="page-title">待审核文件上传</h2>
</div>
{/* 文件类型选择 */}
<Card title={<h3>选择文件类型</h3>} className="mb-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="form-group">
<label htmlFor="file-type-select" className="form-label">文件类型 <span className="text-red-500">*</span></label>
<select
id="file-type-select"
className="form-select"
value={fileType}
onChange={(e) => setFileType(e.target.value as FileType)}
disabled={uploadStage !== "idle"}
>
<option value="">请选择文件类型</option>
<option value={FileType.CONTRACT}>合同文档</option>
<option value={FileType.LICENSE}>专卖许可证</option>
<option value={FileType.PUNISHMENT}>行政处罚决定书</option>
<option value={FileType.OTHER}>其他文档</option>
</select>
<div className="form-tip">不同类型的文档将应用不同的审核规则</div>
</div>
<div className="form-group">
<label htmlFor="priority-select" className="form-label">审核优先级</label>
<select
id="priority-select"
className="form-select"
value={priority}
onChange={(e) => setPriority(e.target.value as Priority)}
disabled={uploadStage !== "idle"}
>
<option value={Priority.NORMAL}>普通</option>
<option value={Priority.HIGH}>优先</option>
<option value={Priority.URGENT}>紧急</option>
</select>
<div className="form-tip">优先级影响文档在队列中的处理顺序</div>
</div>
</div>
</Card>
{/* 文件上传区域 */}
<Card title={<h3>文件上传</h3>} className="mb-4">
{/* 初始上传区域 */}
{uploadStage === "idle" && (
<UploadArea
ref={uploadAreaRef}
onFilesSelected={handleFilesSelected}
multiple={false}
accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png"
tipText="支持单个或批量上传，文件格式：PDF、Word、Excel、图片"
/>
)}
{/* 上传进度显示 */}
{uploadStage !== "completed" && currentFile && (
<FileProgress
fileName={currentFile.name}
fileSize={formatFileSize(currentFile.size)}
progress={uploadProgress}
speed={uploadSpeed}
/>
)}
{/* 处理步骤显示 */}
{(uploadStage === "processing" || uploadStage === "completed") && (
<div className="mt-4 mb-4">
<ProcessingSteps steps={processingSteps} />
</div>
)}
{/* 完成后的文件信息 */}
{uploadStage === "completed" && completedFile && (
<div className="mt-6">
<div className="bg-green-50 p-4 rounded-md mb-4 border border-green-100">
<div className="flex items-center text-green-800 mb-2">
<i className="ri-checkbox-circle-line text-xl mr-2"></i>
<span className="font-medium">评查成功</span>
</div>
<p className="text-sm text-green-700">文件已成功上传并评查完成，请查看结果</p>
{/* 文件类型选择和上传表单 */}
<Form method="post" encType="multipart/form-data" onSubmit={handleSubmit} ref={formRef}>
{/* 文件类型选择 */}
<Card title={<h3>选择文件类型</h3>} className="mb-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="form-group">
<label htmlFor="file-type-select" className="form-label">文件类型 <span className="text-red-500">*</span></label>
<select
id="file-type-select"
name="fileType"
className="form-select"
value={fileType}
onChange={(e) => setFileType(e.target.value as FileType)}
disabled={uploadStage !== "idle"}
>
<option value="">请选择文件类型</option>
<option value={FileType.CONTRACT}>合同文档</option>
<option value={FileType.LICENSE}>专卖许可证</option>
<option value={FileType.PUNISHMENT}>行政处罚决定书</option>
<option value={FileType.OTHER}>其他文档</option>
</select>
<div className="form-tip">不同类型的文档将应用不同的审核规则</div>
</div>
<div className="file-info-grid">
<div>
<h4 className="font-medium mb-3">文件信息</h4>
<ul className="file-info-list">
<li className="file-info-item">
<span className="file-info-label">文件名：</span>
<span className="file-info-value">{completedFile.name}</span>
</li>
<li className="file-info-item">
<span className="file-info-label">文件大小：</span>
<span className="file-info-value">{formatFileSize(completedFile.size)}</span>
</li>
<li className="file-info-item">
<span className="file-info-label">上传时间：</span>
<span className="file-info-value">{completedFile.uploadTime}</span>
</li>
<li className="file-info-item">
<span className="file-info-label">文件类型：</span>
<span className="file-info-value">{FILE_TYPE_LABELS[completedFile.fileType]}</span>
</li>
<li className="file-info-item">
<span className="file-info-label">审核规则：</span>
<span className="file-info-value">系统自动选择</span>
</li>
</ul>
<div className="form-group">
<label htmlFor="priority-select" className="form-label">审核优先级</label>
<select
id="priority-select"
name="priority"
className="form-select"
value={priority}
onChange={(e) => setPriority(e.target.value as Priority)}
disabled={uploadStage !== "idle"}
>
<option value={Priority.NORMAL}>普通</option>
<option value={Priority.HIGH}>优先</option>
<option value={Priority.URGENT}>紧急</option>
</select>
<div className="form-tip">优先级影响文档在队列中的处理顺序</div>
</div>
</div>
</Card>
{/* 文件上传区域 */}
<Card title={<h3>文件上传</h3>} className="mb-4">
{/* 初始上传区域 */}
{uploadStage === "idle" && (
<>
<UploadArea
ref={uploadAreaRef}
onFilesSelected={handleFilesSelected}
multiple={false}
accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png"
tipText="支持单个或批量上传，文件格式：PDF、Word、Excel、图片"
/>
{currentFile && (
<div className="mt-4 flex justify-end">
<Button
type="primary"
disabled={!currentFile || !fileType}
onClick={() => formRef.current?.requestSubmit()}
>
开始上传
</Button>
</div>
)}
</>
)}
{/* 上传进度显示 */}
{uploadStage !== "completed" && currentFile && (
<FileProgress
fileName={currentFile.name}
fileSize={formatFileSize(currentFile.size)}
progress={uploadProgress}
speed={uploadSpeed}
/>
)}
{/* 处理步骤显示 */}
{(uploadStage === "processing" || uploadStage === "completed") && (
<div className="mt-4 mb-4">
<ProcessingSteps steps={processingSteps} />
</div>
)}
{/* 完成后的文件信息 */}
{uploadStage === "completed" && completedFile && (
<div className="mt-6">
<div className="bg-green-50 p-4 rounded-md mb-4 border border-green-100">
<div className="flex items-center text-green-800 mb-2">
<i className="ri-checkbox-circle-line text-xl mr-2"></i>
<span className="font-medium">评查成功</span>
</div>
<p className="text-sm text-green-700">文件已成功上传并评查完成，请查看结果</p>
</div>
<div>
<h4 className="font-medium mb-3">解析结果预览</h4>
<div className="bg-gray-50 p-3 rounded-md border border-gray-200">
<div className="mb-2">
<span className="text-gray-500 text-sm">合同编号：</span>
<span className="pulse-animation">XS-2023-1025-001</span>
</div>
<div className="mb-2">
<span className="text-gray-500 text-sm">合同名称：</span>
<span className="pulse-animation">烟草制品销售合同</span>
</div>
<div className="mb-2">
<span className="text-gray-500 text-sm">签约日期：</span>
<span className="pulse-animation">2023年10月20日</span>
</div>
<div className="mb-2">
<span className="text-gray-500 text-sm">合同金额：</span>
<span className="pulse-animation">¥ 1,580,000.00</span>
</div>
<div>
<span className="text-gray-500 text-sm">当事人：</span>
<span className="pulse-animation">甲方：XX烟草公司，乙方：YY贸易有限公司</span>
</div>
<div className="file-info-grid">
<div>
<h4 className="font-medium mb-3">文件信息</h4>
<ul className="file-info-list">
<li className="file-info-item">
<span className="file-info-label">文件名：</span>
<span className="file-info-value">{completedFile.name}</span>
</li>
<li className="file-info-item">
<span className="file-info-label">文件大小：</span>
<span className="file-info-value">{formatFileSize(completedFile.size)}</span>
</li>
<li className="file-info-item">
<span className="file-info-label">上传时间：</span>
<span className="file-info-value">{completedFile.uploadTime}</span>
</li>
<li className="file-info-item">
<span className="file-info-label">文件类型：</span>
<span className="file-info-value">{FILE_TYPE_LABELS[completedFile.fileType]}</span>
</li>
<li className="file-info-item">
<span className="file-info-label">审核规则：</span>
<span className="file-info-value">系统自动选择</span>
</li>
</ul>
</div>
<div className="mt-4 flex justify-between">
<Button
type="default"
icon="ri-refresh-line"
onClick={resetUpload}
>
上传新文件
</Button>
<Button
type="primary"
icon="ri-file-search-line"
>
查看详情并审核
</Button>
<div>
<h4 className="font-medium mb-3">解析结果预览</h4>
<div className="bg-gray-50 p-3 rounded-md border border-gray-200">
<div className="mb-2">
<span className="text-gray-500 text-sm">合同编号：</span>
<span className="pulse-animation">XS-2023-1025-001</span>
</div>
<div className="mb-2">
<span className="text-gray-500 text-sm">合同名称：</span>
<span className="pulse-animation">烟草制品销售合同</span>
</div>
<div className="mb-2">
<span className="text-gray-500 text-sm">签约日期：</span>
<span className="pulse-animation">2023年10月20日</span>
</div>
<div className="mb-2">
<span className="text-gray-500 text-sm">合同金额：</span>
<span className="pulse-animation">¥ 1,580,000.00</span>
</div>
<div>
<span className="text-gray-500 text-sm">当事人：</span>
<span className="pulse-animation">甲方：XX烟草公司，乙方：YY贸易有限公司</span>
</div>
</div>
<div className="mt-4 flex justify-between">
<Button
type="default"
icon="ri-refresh-line"
onClick={resetUpload}
>
上传新文件
</Button>
<Button
type="primary"
icon="ri-file-search-line"
>
查看详情并审核
</Button>
</div>
</div>
</div>
</div>
</div>
)}
</Card>
)}
</Card>
</Form>
{/* 上传队列 */}
<Card
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