264 lines
9.6 KiB
TypeScript
264 lines
9.6 KiB
TypeScript
/**
|
|
* 评查点管理页面 - 创建或编辑评查点规则
|
|
*
|
|
* 功能概述:
|
|
* - 支持创建新的评查点规则或编辑现有规则
|
|
* - 评查点包含基本信息、抽取设置和评查设置三大部分
|
|
* - 支持使用三种抽取方式: 大模型(LLM)抽取、多模态(VLM)抽取和正则表达式抽取
|
|
* - 支持配置各种类型的评查规则，如存在性检查、内容一致性检查等
|
|
* - 支持保存评查规则和保存草稿功能
|
|
*
|
|
* 组件结构:
|
|
* - PageHeader: 页面标题和保存按钮
|
|
* - BasicInfo: 评查点的基本信息设置，如名称、编码、风险级别等
|
|
* - ExtractionSettings: 抽取设置，配置从文档中抽取哪些字段及抽取方式
|
|
* - ReviewSettings: 评查设置，基于抽取字段配置评查规则、评查结果消息等
|
|
* - ActionButtons: 页面底部的操作按钮，包括保存、保存草稿和返回
|
|
*
|
|
* 数据流转:
|
|
* 1. 页面加载时检查URL参数，确定是新建还是编辑模式
|
|
* 2. 编辑模式下从API获取评查点数据并填充表单
|
|
* 3. ExtractionSettings通过RuleContext将抽取的字段传递给ReviewSettings
|
|
* 4. 各组件的onChange回调收集表单变更并更新formData状态
|
|
* 5. 保存时将formData转换为API需要的格式并提交
|
|
*
|
|
* @author 中国烟草AI合同及卷宗审核系统开发团队
|
|
*/
|
|
|
|
import { type MetaFunction } from "@remix-run/node";
|
|
import { useState, useEffect, useCallback } from "react";
|
|
import { BasicInfo } from "~/components/rules/new/BasicInfo";
|
|
import { ExtractionSettings } from "~/components/rules/new/ExtractionSettings";
|
|
import { ReviewSettings } from "~/components/rules/new/ReviewSettings";
|
|
import { ActionButtons } from "~/components/rules/new/ActionButtons";
|
|
import { PageHeader } from "~/components/rules/new/PageHeader";
|
|
import rulesStyles from "~/styles/rules.css?url";
|
|
import { useNavigate, useLocation } from "@remix-run/react";
|
|
// 导入评查点模型定义和常量
|
|
import type {
|
|
EvaluationPoint
|
|
} from "~/models/evaluation_points";
|
|
import { EVALUATION_OPTIONS } from "~/models/evaluation_points";
|
|
import type { EvaluationPointGroup } from "~/models/evaluation_point_groups";
|
|
export const meta: MetaFunction = () => {
|
|
return [
|
|
{ title: "评查点管理 - 中国烟草AI合同及卷宗审核系统" },
|
|
{
|
|
name: "description",
|
|
content: "创建或修改评查点，设置规则参数"
|
|
}
|
|
];
|
|
};
|
|
|
|
export function links() {
|
|
return [{ rel: "stylesheet", href: rulesStyles }];
|
|
}
|
|
|
|
export const handle = {
|
|
breadcrumb: "评查点管理"
|
|
};
|
|
|
|
|
|
export default function RuleNew() {
|
|
const navigate = useNavigate();
|
|
const location = useLocation();
|
|
const [isEditMode, setIsEditMode] = useState(false);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
|
|
const [formData, setFormData] = useState<EvaluationPoint>({});
|
|
const [evaluationPointGroups, setEvaluationPointGroups] = useState<EvaluationPointGroup[]>([]);
|
|
|
|
/**
|
|
* 获取评查点数据
|
|
* 编辑模式下从API获取指定ID的评查点数据
|
|
* @param id 评查点ID
|
|
*/
|
|
const fetchEvaluationPoint = useCallback(async (id: number) => {
|
|
try {
|
|
setIsLoading(true);
|
|
console.log(`获取评查点数据，ID: ${id}`);
|
|
const response = await fetch(`http://127.0.0.1:9000/admin/evaluation_points?id=eq.${id}`, {
|
|
method: 'GET',
|
|
headers: {
|
|
'Accept': 'application/json',
|
|
'Content-Type': 'application/json'
|
|
}
|
|
});
|
|
console.log(response);
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
setFormData(data.data[0]);
|
|
}
|
|
} catch (error) {
|
|
console.error('获取评查点数据失败:', error);
|
|
alert(`获取评查点数据失败: ${error instanceof Error ? error.message : '未知错误'}`);
|
|
// 获取数据失败时返回上一页
|
|
navigate(-1);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
}, [navigate]);
|
|
|
|
/**
|
|
* 获取评查点组数据
|
|
* 从API获取所有评查点组，用于基本信息表单中选择
|
|
*/
|
|
const fetchEvaluationPointGroups = useCallback(async () => {
|
|
try {
|
|
console.log("获取评查点组数据");
|
|
const response = await fetch("http://127.0.0.1:9000/admin/evaluation_point_groups", {
|
|
method: 'GET',
|
|
headers: {
|
|
'Accept': 'application/json',
|
|
'Content-Type': 'application/json'
|
|
}
|
|
});
|
|
console.log(response);
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
setEvaluationPointGroups(data.data);
|
|
}
|
|
} catch (error) {
|
|
console.error('获取评查点组数据失败:', error);
|
|
// 显示错误提示但不影响应用继续使用
|
|
alert(`获取评查点组数据失败: ${error instanceof Error ? error.message : '未知错误'}\n将使用默认数据`);
|
|
}
|
|
}, []);
|
|
|
|
const handleSave = () => {
|
|
console.log("保存评查点", formData);
|
|
}
|
|
|
|
const handleSaveDraft = () => {
|
|
console.log("保存草稿");
|
|
}
|
|
|
|
const handleBasicInfoChange = (data: Record<string, unknown>) => {
|
|
setFormData(prev => ({ ...prev, ...data }));
|
|
}
|
|
|
|
const handleExtractionSettingsChange = (data: Record<string, unknown>) => {
|
|
setFormData(prev => ({ ...prev, ...data }));
|
|
}
|
|
|
|
const handleReviewSettingsChange = (data: Record<string, unknown>) => {
|
|
setFormData(prev => ({ ...prev, ...data }));
|
|
}
|
|
|
|
/**
|
|
* 页面加载时初始化处理
|
|
* 1. 检查URL参数，判断是新建还是编辑模式
|
|
* 2. 编辑模式下获取评查点数据
|
|
* 3. 获取评查点组数据（用于表单选择项）
|
|
*/
|
|
useEffect(() => {
|
|
const searchParams = new URLSearchParams(location.search);
|
|
const id = searchParams.get('id');
|
|
|
|
// 设置编辑模式
|
|
setIsEditMode(!!id);
|
|
|
|
if (id) {
|
|
fetchEvaluationPoint(parseInt(id));
|
|
}
|
|
|
|
// 获取评查点组数据
|
|
fetchEvaluationPointGroups();
|
|
}, [location.search, fetchEvaluationPoint, fetchEvaluationPointGroups]);
|
|
|
|
// 渲染页面内容
|
|
return (
|
|
<div className="container">
|
|
{/* 页面标题和右上角保存按钮 */}
|
|
<PageHeader
|
|
title={isEditMode ? "编辑评查点" : "新增评查点"}
|
|
onSave={handleSave}
|
|
/>
|
|
|
|
{/* 加载状态显示 */}
|
|
{isLoading ? (
|
|
<div className="flex justify-center items-center p-12">
|
|
<div className="loading-spinner"></div>
|
|
<span className="ml-3">加载中...</span>
|
|
</div>
|
|
) : (
|
|
<>
|
|
{/* 评查点基本信息设置 */}
|
|
<div className="mb-8">
|
|
<BasicInfo
|
|
onChange={handleBasicInfoChange}
|
|
initialData={formData}
|
|
evaluationPointGroups={evaluationPointGroups}
|
|
riskOptions={EVALUATION_OPTIONS.riskLevelOptions}
|
|
/>
|
|
</div>
|
|
|
|
{/* 抽取设置 - 配置从文档中提取的字段 */}
|
|
<div className="mb-8">
|
|
<ExtractionSettings
|
|
onChange={handleExtractionSettingsChange}
|
|
initialData={{
|
|
llm: {
|
|
fields: formData.extraction_config?.llm?.fields,
|
|
prompt_setting: {
|
|
type: formData.extraction_config?.llm?.prompt_setting?.type,
|
|
template: formData.extraction_config?.llm?.prompt_setting?.template
|
|
}
|
|
},
|
|
vlm: {
|
|
fields: formData.extraction_config?.vlm?.fields,
|
|
prompt_setting: {
|
|
type: formData.extraction_config?.vlm?.prompt_setting?.type,
|
|
template: formData.extraction_config?.vlm?.prompt_setting?.template
|
|
}
|
|
},
|
|
regex: {
|
|
fields: formData.extraction_config?.regex?.fields
|
|
}
|
|
}}
|
|
promptTypeOptions={EVALUATION_OPTIONS.promptTypeOptions}
|
|
vlmFieldTypeOptions={EVALUATION_OPTIONS.vlmFieldTypeOptions}
|
|
/>
|
|
</div>
|
|
|
|
{/* 评查设置 - 配置评查规则、消息等 */}
|
|
<div className="mb-8">
|
|
<ReviewSettings
|
|
key={`review-settings-${isEditMode ? formData.id : 'new'}`}
|
|
onChange={handleReviewSettingsChange}
|
|
initialData={{
|
|
rules: formData.evaluation_config?.rules,
|
|
combinationLogic: formData.evaluation_config?.logicType,
|
|
customLogic: formData.evaluation_config?.customLogic,
|
|
pass_message: formData.pass_message,
|
|
fail_message: formData.fail_message,
|
|
suggestion_message: formData.suggestion_message,
|
|
suggestion_message_type: formData.suggestion_message_type,
|
|
post_action: formData.post_action,
|
|
action_config: formData.action_config,
|
|
score: formData.score
|
|
}}
|
|
ruleTypeOptions={EVALUATION_OPTIONS.ruleTypeOptions}
|
|
logicTypeOptions={EVALUATION_OPTIONS.logicTypeOptions}
|
|
logicOperatorOptions={EVALUATION_OPTIONS.logicOperatorOptions}
|
|
compareMethodOptions={EVALUATION_OPTIONS.compareMethodOptions}
|
|
formatTypeOptions={EVALUATION_OPTIONS.formatTypeOptions}
|
|
comparisonOperatorOptions={EVALUATION_OPTIONS.comparisonOperatorOptions}
|
|
matchTypeOptions={EVALUATION_OPTIONS.matchTypeOptions}
|
|
suggestionMessageTypeOptions={EVALUATION_OPTIONS.suggestionMessageTypeOptions}
|
|
postActionOptions={EVALUATION_OPTIONS.postActionOptions}
|
|
/>
|
|
</div>
|
|
|
|
{/* 底部操作按钮区域 */}
|
|
<ActionButtons
|
|
onSave={handleSave}
|
|
onSaveDraft={handleSaveDraft}
|
|
isEditMode={isEditMode}
|
|
/>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|