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:
awen
2025-04-07 19:41:22 +08:00
parent 8885aec931
commit 046dd109e0
7 changed files with 1403 additions and 448 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/rules/new/BasicInfo.tsx
+147 -16
View File
@@ -2,7 +2,8 @@ import React, { useState, useEffect } from 'react';
interface BasicInfoProps {
onChange?: (data: Record<string, unknown>) => void;
initialData?: Record<string, any>;
initialData?: FormDataType;
evaluationPointGroups?: Array<{id: number, pid: number, code: string, name: string, is_enabled: boolean}>;
}
// 定义表单数据类型
@@ -18,10 +19,12 @@ interface FormDataType {
content: string;
};
evaluation_point_groups_id: number | null;
evaluation_point_groups_pid: number | null;
type: string;
id?: number;
}
export function BasicInfo({ onChange, initialData }: BasicInfoProps) {
export function BasicInfo({ onChange, initialData, evaluationPointGroups = [] }: BasicInfoProps) {
const [formData, setFormData] = useState<FormDataType>({
name: '',
code: '',
@@ -34,11 +37,13 @@ export function BasicInfo({ onChange, initialData }: BasicInfoProps) {
content: ''
},
evaluation_point_groups_id: null,
evaluation_point_groups_pid: null,
type: ''
});
const [isDescExpanded, setIsDescExpanded] = useState(false);
const [lawArticlesInput, setLawArticlesInput] = useState('');
const [filteredRuleGroups, setFilteredRuleGroups] = useState<Array<{id: number, pid: number, code: string, name: string, is_enabled: boolean}>>([]);
// 当initialData变化时更新表单数据
useEffect(() => {
@@ -55,6 +60,7 @@ export function BasicInfo({ onChange, initialData }: BasicInfoProps) {
content: ''
},
evaluation_point_groups_id: initialData.evaluation_point_groups_id || null,
evaluation_point_groups_pid: initialData.evaluation_point_groups_pid || null,
type: initialData.type || ''
};
@@ -76,6 +82,113 @@ export function BasicInfo({ onChange, initialData }: BasicInfoProps) {
}
}, [initialData]);
// 当评查点类型或评查点组数据变化时，过滤规则组列表
useEffect(() => {
if (evaluationPointGroups && evaluationPointGroups.length > 0) {
console.log("评查点组数据更新，当前类型:", formData.type);
console.log("评查点组数据:", evaluationPointGroups);
if (formData.type) {
// 获取所选评查点类型的组ID
const typeGroup = evaluationPointGroups.find(group =>
group.pid === 0 &&
group.code === formData.type
);
console.log("找到的类型组:", typeGroup);
if (typeGroup) {
// 更新评查点类型组ID
if (formData.evaluation_point_groups_pid !== typeGroup.id) {
const newData = {
...formData,
evaluation_point_groups_pid: typeGroup.id
};
setFormData(newData);
if (onChange) onChange(newData);
}
// 过滤出属于该类型的规则组（pid等于类型组ID的项）
const groups = evaluationPointGroups.filter(group =>
group.pid === typeGroup.id &&
group.is_enabled
);
console.log("过滤后的规则组:", groups);
setFilteredRuleGroups(groups);
// 如果当前选择的规则组不在过滤结果中，重置选择
if (formData.evaluation_point_groups_id &&
!groups.some(group => group.id === formData.evaluation_point_groups_id)) {
console.log("当前选择的规则组不在过滤结果中，重置选择");
const newData = {
...formData,
evaluation_point_groups_id: null
};
setFormData(newData);
if (onChange) onChange(newData);
}
} else {
console.log("未找到对应的类型组");
setFilteredRuleGroups([]);
// 重置评查点类型组ID
if (formData.evaluation_point_groups_pid !== null) {
const newData = {
...formData,
evaluation_point_groups_pid: null
};
setFormData(newData);
if (onChange) onChange(newData);
}
}
} else {
console.log("未选择评查点类型");
setFilteredRuleGroups([]);
// 重置评查点类型组ID
if (formData.evaluation_point_groups_pid !== null) {
const newData = {
...formData,
evaluation_point_groups_pid: null
};
setFormData(newData);
if (onChange) onChange(newData);
}
}
}
}, [formData.type, evaluationPointGroups, formData.evaluation_point_groups_id, formData.evaluation_point_groups_pid, onChange]);
// 获取评查点类型选项（pid=0的数据）
const getCheckpointTypeOptions = () => {
if (!evaluationPointGroups || evaluationPointGroups.length === 0) {
console.log("无评查点组数据，使用默认类型选项");
return (
<>
<option value="">请选择评查点类型</option>
<option value="essential">基本要素类</option>
<option value="content">内容合规类</option>
<option value="format">格式规范类</option>
<option value="legal">法律风险类</option>
<option value="business">业务专项类</option>
</>
);
}
const typeGroups = evaluationPointGroups.filter(group => group.pid === 0 && group.is_enabled);
console.log("可用的评查点类型:", typeGroups);
return (
<>
<option value="">请选择评查点类型</option>
{typeGroups.map(group => (
<option key={group.id} value={group.code}>
{group.name}
</option>
))}
</>
);
};
const handleToggleDescription = () => {
setIsDescExpanded(!isDescExpanded);
};
@@ -115,6 +228,19 @@ export function BasicInfo({ onChange, initialData }: BasicInfoProps) {
break;
case 'checkpoint-type':
newData.type = value;
// 重置规则组选择
newData.evaluation_point_groups_id = null;
// 设置评查点类型组ID
if (value) {
const typeGroup = evaluationPointGroups.find(group =>
group.pid === 0 &&
group.code === value
);
newData.evaluation_point_groups_pid = typeGroup ? typeGroup.id : null;
} else {
newData.evaluation_point_groups_pid = null;
}
break;
}
@@ -207,32 +333,37 @@ export function BasicInfo({ onChange, initialData }: BasicInfoProps) {
value={formData.type}
onChange={handleInputChange}
>
<option value="">请选择评查点类型</option>
<option value="essential">基本要素类</option>
<option value="content">内容合规类</option>
<option value="format">格式规范类</option>
<option value="legal">法律风险类</option>
<option value="business">业务专项类</option>
{getCheckpointTypeOptions()}
</select>
<div className="form-tip">评查点类型用于分类管理，便于规则统一调用</div>
</div>
<div>
<label className="form-label" htmlFor="evaluation-point-group">
所属规则组
所属规则组 <span className="required-mark">*</span>
</label>
<select
id="evaluation-point-group"
className="form-select"
className={`form-select ${!formData.type || filteredRuleGroups.length === 0 ? 'bg-gray-100 cursor-not-allowed' : ''}`}
value={formData.evaluation_point_groups_id?.toString() || ""}
onChange={handleInputChange}
disabled={!formData.type || filteredRuleGroups.length === 0}
>
<option value="">请选择规则组</option>
<option value="1">合同基本要素检查</option>
<option value="2">销售合同专项检查</option>
<option value="3">采购合同专项检查</option>
<option value="4">专卖许可证审核规则</option>
<option value="5">行政处罚规范性检查</option>
<option value="">
{!formData.type ? "请先选择评查点类型" :
filteredRuleGroups.length === 0 ? "该类型下暂无可用规则组" :
"请选择规则组"}
</option>
{filteredRuleGroups.map(group => (
<option key={group.id} value={group.id.toString()}>
{group.name}
</option>
))}
</select>
<div className="form-tip">
{!formData.type ? "请先选择评查点类型" :
filteredRuleGroups.length === 0 ? "该类型下暂无可用规则组" :
"选择评查点所属的规则组"}
</div>
</div>
<div>
<label className="form-label" htmlFor="is-enabled">是否启用</label>
app/components/rules/new/ExtractionSettings.tsx
+5 -17
View File
@@ -1,5 +1,6 @@
import { useState, KeyboardEvent, FormEvent, useContext, useEffect, useCallback, useRef } from 'react';
import { RuleContext } from './ReviewSettings';
import { RuleContext } from '~/contexts/RuleContext';
import { processFieldName } from '~/utils';
/**
* ExtractionSettings 组件
@@ -169,7 +170,7 @@ export function ExtractionSettings({ onChange, initialData }: ExtractionSettings
// 获取所有字段（不包括regexFields，这部分单独处理）
const llm_ocr_fields = fields.llm_ocr || [];
const llm_fields = (fields.llm || []).map((field) => field.split('_')[0]);
const llm_fields = (fields.llm || []).map(processFieldName);
// 检查是否在其他类型字段中存在
if (llm_ocr_fields.some(f => f.toLowerCase() === fieldNameLower) ||
@@ -202,7 +203,7 @@ export function ExtractionSettings({ onChange, initialData }: ExtractionSettings
// 收集所有字段名 - 不受当前标签页影响，始终收集所有类型的字段
const allFieldNamesList = [
...fields.llm_ocr,
...fields.llm.map(f => f.split('_')[0]),
...fields.llm.map(f => processFieldName(f)),
...validRegexFields.map(f => f.fieldName.trim())
].filter(name => name); // 过滤空值
@@ -250,20 +251,7 @@ export function ExtractionSettings({ onChange, initialData }: ExtractionSettings
});
}
// 分发自定义事件，确保更新到所有依赖此事件的组件
document.dispatchEvent(
new CustomEvent('extraction-fields-updated', {
detail: {
fields: allFields,
fieldsData: {
llm_ocr: fields.llm_ocr || [],
llm: fields.llm || [],
regex: validRegexFields.map(f => f.fieldName.trim())
},
timestamp: Date.now() // 添加时间戳确保事件能被识别为新事件
},
})
);
// 不再使用自定义事件，统一通过Context共享数据
// 更新上次发送的字段列表和时间
lastEventFieldsRef.current = [...allFields];
app/components/rules/new/ReviewSettings.tsx
+526 -213
View File
File diff suppressed because it is too large Load Diff
app/contexts/RuleContext.tsx
+26
View File
@@ -0,0 +1,26 @@
import { createContext } from 'react';
/**
* 规则上下文类型
* 用于在抽取设置和评查设置之间共享数据
*/
export interface RuleContextType {
/**
* 抽取的字段列表
*/
extractionFields: string[];
/**
* 更新字段列表的函数
*/
updateFields: (fields: string[]) => void;
}
/**
* 创建规则上下文
* 用于在抽取设置和评查设置组件之间共享字段数据
*/
export const RuleContext = createContext<RuleContextType>({
extractionFields: [],
updateFields: () => {}
});
app/entry.client.tsx
+2 -4
View File
@@ -5,14 +5,12 @@
*/
import { RemixBrowser } from "@remix-run/react";
import { startTransition, StrictMode } from "react";
import { startTransition } from "react";
import { hydrateRoot } from "react-dom/client";
startTransition(() => {
hydrateRoot(
document,
<StrictMode>
<RemixBrowser />
</StrictMode>
<RemixBrowser />
);
});
app/routes/rules.new.tsx
+629 -198
View File
File diff suppressed because it is too large Load Diff
app/utils.ts
+68
View File
@@ -0,0 +1,68 @@
/**
* 工具函数集合
* 包含字段处理、防抖等通用功能
*/
/**
* 处理字段名，去除类型后缀
* 例如: "字段名_类型" -> "字段名"
*/
export function processFieldName(field: string): string {
if (field.includes('_')) {
return field.split('_')[0]; // 只保留类型前面的字段名
}
return field;
}
/**
* 处理字段数组，去除类型后缀并去重
*/
export function processFieldNames(fields: string[]): string[] {
// 处理字段，去掉类型后缀
const processedFields = fields.map(processFieldName);
// 去重并返回
return [...new Set(processedFields)];
}
/**
* 创建防抖函数
* @param fn 要执行的函数
* @param delay 延迟时间（毫秒）
*/
export function debounce<T extends (...args: unknown[]) => unknown>(
fn: T,
delay: number
): (...args: Parameters<T>) => void {
let timer: NodeJS.Timeout | null = null;
return function(...args: Parameters<T>) {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
fn(...args);
timer = null;
}, delay);
};
}
/**
* 比较两个数组是否有实质性不同
* 用于避免不必要的状态更新
*/
export function areArraysDifferent<T>(arr1: T[], arr2: T[]): boolean {
return JSON.stringify(arr1) !== JSON.stringify(arr2);
}
/**
* 查找两个数组之间的差异项
* @returns 包含新增和删除项的对象
*/
export function getArrayDifference<T>(current: T[], previous: T[]): { added: T[], removed: T[] } {
const added = current.filter(item => !previous.includes(item));
const removed = previous.filter(item => !current.includes(item));
return { added, removed };
}