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-02 18:13:12 +08:00
parent fb778c68ad
commit a7626d2f90
4 changed files with 467 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/rules/new/ReviewSettings.tsx
+264 -69
View File
@@ -14,6 +14,13 @@ interface ComparisonPair {
compareMethod: string;
}
// 添加逻辑条件接口
interface Condition {
field: string;
operator: string;
value: string;
}
interface ReviewSettingsProps {
onChange?: (data: Record<string, unknown>) => void;
}
@@ -59,12 +66,16 @@ export function ReviewSettings({ onChange }: ReviewSettingsProps) {
useEffect(() => {
// 当Context中的字段发生变化时，更新可用字段但保留已有配置
if (extractionFields.length > 0) {
console.log('extractionFields updated in ReviewSettings:', extractionFields);
// 检查是否有字段被删除
const deletedFields = availableFields.filter(field => !extractionFields.includes(field));
// 处理新增的字段
const newFields = extractionFields.filter((field: string) => !availableFields.includes(field));
console.log('New fields:', newFields);
console.log('Deleted fields:', deletedFields);
if (newFields.length > 0 || deletedFields.length > 0) {
// 设置最新的可用字段列表
setAvailableFields(extractionFields);
@@ -83,6 +94,7 @@ export function ReviewSettings({ onChange }: ReviewSettingsProps) {
const handleExtractionChange = (event: Event) => {
if (event instanceof CustomEvent && event.detail && Array.isArray(event.detail.fields)) {
const incomingFields = event.detail.fields;
console.log('Received extraction fields update:', incomingFields);
// 检查是否有字段被删除
const deletedFields = availableFields.filter(field => !incomingFields.includes(field));
@@ -90,6 +102,9 @@ export function ReviewSettings({ onChange }: ReviewSettingsProps) {
// 识别新增的字段
const newFields = incomingFields.filter((field: string) => !availableFields.includes(field));
console.log('Deleted fields:', deletedFields);
console.log('New fields:', newFields);
if (newFields.length > 0 || deletedFields.length > 0) {
// 设置最新的可用字段列表
setAvailableFields(incomingFields);
@@ -112,7 +127,36 @@ export function ReviewSettings({ onChange }: ReviewSettingsProps) {
return () => {
document.removeEventListener('extraction-fields-updated', handleExtractionChange);
};
}, [extractionFields, availableFields]);
}, [extractionFields]);
// 检查并更新字段（仍然保留此函数供需要时手动触发）
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const checkAndUpdateFields = () => {
if (extractionFields.length > 0) {
// 检查是否有字段被删除
const deletedFields = availableFields.filter(field => !extractionFields.includes(field));
// 处理新增的字段
const newFields = extractionFields.filter((field: string) => !availableFields.includes(field));
if (newFields.length > 0 || deletedFields.length > 0) {
console.log('Updating fields in checkAndUpdateFields - deleted:', deletedFields, 'new:', newFields);
// 设置最新的可用字段列表
setAvailableFields(extractionFields);
// 处理规则中已删除的字段
if (deletedFields.length > 0) {
handleDeletedFields(deletedFields);
}
// 使用最新的字段列表更新规则配置
updateRulesWithNewFields(extractionFields);
return true; // 表示字段已更新
}
}
return false; // 表示字段未更新
};
// 初始化评查配置
useEffect(() => {
@@ -453,9 +497,11 @@ export function ReviewSettings({ onChange }: ReviewSettingsProps) {
// 如果规则中的availableFields不是最新的，则更新它
if (type && config && (!config.availableFields ||
(Array.isArray(config.availableFields) &&
!availableFields.every((field) => (config.availableFields as string[]).includes(field))))) {
!availableFields.every((field) => (config.availableFields as string[]).includes(field)) ||
!(config.availableFields as string[]).every((field) => availableFields.includes(field))))) {
// 延迟更新以避免在渲染过程中修改状态
setTimeout(() => {
console.log('Updating rule config with new available fields:', availableFields);
const updatedConfig = { ...config, availableFields: availableFields };
handleRuleConfigChange(id, updatedConfig);
}, 0);
@@ -601,6 +647,7 @@ export function ReviewSettings({ onChange }: ReviewSettingsProps) {
id={`source-field-${id}-0`}
className="form-select"
onChange={(e) => {
// 直接初始化一个完整的比较对数组
const firstPair = { sourceField: e.target.value, targetField: '', compareMethod: '' };
handleRuleConfigChange(id, { pairs: [firstPair] });
}}
@@ -617,9 +664,12 @@ export function ReviewSettings({ onChange }: ReviewSettingsProps) {
id={`target-field-${id}-0`}
className="form-select"
onChange={(e) => {
const pairs = Array.isArray(config.pairs) ? [...config.pairs] : [{ sourceField: '', compareMethod: '' }];
pairs[0] = { ...pairs[0], targetField: e.target.value };
handleRuleConfigChange(id, { pairs });
// 获取sourceField的值
const sourceField = document.getElementById(`source-field-${id}-0`) ?
(document.getElementById(`source-field-${id}-0`) as HTMLSelectElement).value : '';
const firstPair = { sourceField, targetField: e.target.value, compareMethod: '' };
handleRuleConfigChange(id, { pairs: [firstPair] });
}}
>
<option value="">请选择目标字段</option>
@@ -634,9 +684,14 @@ export function ReviewSettings({ onChange }: ReviewSettingsProps) {
id={`compare-method-${id}-0`}
className="form-select"
onChange={(e) => {
const pairs = Array.isArray(config.pairs) ? [...config.pairs] : [{ sourceField: '', targetField: '' }];
pairs[0] = { ...pairs[0], compareMethod: e.target.value };
handleRuleConfigChange(id, { pairs });
// 获取sourceField和targetField的值
const sourceField = document.getElementById(`source-field-${id}-0`) ?
(document.getElementById(`source-field-${id}-0`) as HTMLSelectElement).value : '';
const targetField = document.getElementById(`target-field-${id}-0`) ?
(document.getElementById(`target-field-${id}-0`) as HTMLSelectElement).value : '';
const firstPair = { sourceField, targetField, compareMethod: e.target.value };
handleRuleConfigChange(id, { pairs: [firstPair] });
}}
>
<option value="">请选择比较方式</option>
@@ -655,9 +710,31 @@ export function ReviewSettings({ onChange }: ReviewSettingsProps) {
className="ant-btn ant-btn-default"
onClick={() => {
// 添加新的比较对
const currentPairs = Array.isArray(config.pairs) ? config.pairs : [];
// 直接获取当前的pairs数组，或初始化为空数组
const pairs = Array.isArray(config.pairs) ? [...(config.pairs as ComparisonPair[])] : [];
// 创建新的空白比较对
const newPair = { sourceField: '', targetField: '', compareMethod: '' };
handleRuleConfigChange(id, { pairs: [...currentPairs, newPair] });
// 如果数组为空，确保先初始化第一个条目
if (pairs.length === 0) {
// 如果界面上已有值，则添加两行：一行是当前值，一行是新的空行
const sourceField = document.getElementById(`source-field-${id}-0`) ?
(document.getElementById(`source-field-${id}-0`) as HTMLSelectElement).value : '';
const targetField = document.getElementById(`target-field-${id}-0`) ?
(document.getElementById(`target-field-${id}-0`) as HTMLSelectElement).value : '';
const compareMethod = document.getElementById(`compare-method-${id}-0`) ?
(document.getElementById(`compare-method-${id}-0`) as HTMLSelectElement).value : '';
// 将第一行设置为当前值（如果有）
pairs.push({ sourceField, targetField, compareMethod });
}
// 无论如何，都添加一个新的空白行
pairs.push(newPair);
// 更新配置
handleRuleConfigChange(id, { pairs });
}}
>
<i className="ri-add-line mr-1"></i> 添加比较对
@@ -701,76 +778,194 @@ export function ReviewSettings({ onChange }: ReviewSettingsProps) {
<div className="mb-4">
<label className="form-label" htmlFor={`conditions-container-${id}`}>条件设置 <span className="required-mark">*</span></label>
<div className="conditions-container" id={`conditions-container-${id}`}>
<div className="condition-row bg-gray-50 p-4 rounded-md mb-2">
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-2">
<div>
<label className="form-label text-sm" htmlFor={`field-${id}-0`}>字段</label>
<select
id={`field-${id}-0`}
className="form-select"
onChange={(e) => {
const currentConditions = Array.isArray(config.conditions) ? [...config.conditions] : [];
currentConditions[0] = { ...currentConditions[0], field: e.target.value };
handleRuleConfigChange(id, { conditions: currentConditions });
{Array.isArray(config.conditions) && config.conditions.length > 0 ? (
config.conditions.map((condition, conditionIndex) => (
<div key={`condition-${id}-${conditionIndex}`} className="condition-row bg-gray-50 p-4 rounded-md mb-2">
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-2">
<div>
<label className="form-label text-sm" htmlFor={`field-${id}-${conditionIndex}`}>字段</label>
<select
id={`field-${id}-${conditionIndex}`}
className="form-select"
value={condition.field || ''}
onChange={(e) => {
const currentConditions = Array.isArray(config.conditions) ? [...(config.conditions as Condition[])] : [];
currentConditions[conditionIndex] = { ...currentConditions[conditionIndex], field: e.target.value };
handleRuleConfigChange(id, { conditions: currentConditions });
}}
>
<option value="">请选择字段</option>
{availableFields.map((field, idx) => (
<option key={`field-${conditionIndex}-${idx}`} value={field}>{field}</option>
))}
</select>
</div>
<div>
<label className="form-label text-sm" htmlFor={`operator-${id}-${conditionIndex}`}>运算符</label>
<select
id={`operator-${id}-${conditionIndex}`}
className="form-select"
value={condition.operator || 'eq'}
onChange={(e) => {
const currentConditions = Array.isArray(config.conditions) ? [...(config.conditions as Condition[])] : [];
currentConditions[conditionIndex] = { ...currentConditions[conditionIndex], operator: e.target.value };
handleRuleConfigChange(id, { conditions: currentConditions });
}}
>
<option value="eq">等于 (=)</option>
<option value="neq">不等于 (≠)</option>
<option value="gt">大于 {`>`}</option>
<option value="gte">大于等于 {`≥`}</option>
<option value="lt">小于 {`<`}</option>
<option value="lte">小于等于 {`≤`}</option>
<option value="contains">包含</option>
<option value="not_contains">不包含</option>
</select>
</div>
<div>
<label className="form-label text-sm" htmlFor={`value-${id}-${conditionIndex}`}>值</label>
<input
type="text"
id={`value-${id}-${conditionIndex}`}
className="form-input"
value={condition.value || ''}
placeholder="请输入比较值"
onChange={(e) => {
const currentConditions = Array.isArray(config.conditions) ? [...(config.conditions as Condition[])] : [];
currentConditions[conditionIndex] = { ...currentConditions[conditionIndex], value: e.target.value };
handleRuleConfigChange(id, { conditions: currentConditions });
}}
/>
</div>
</div>
<div className="flex justify-end">
<button
type="button"
className="text-red-500 hover:text-red-700"
onClick={() => {
const currentConditions = Array.isArray(config.conditions) ? [...(config.conditions as Condition[])] : [];
currentConditions.splice(conditionIndex, 1);
handleRuleConfigChange(id, { conditions: currentConditions });
}}
>
<i className="ri-delete-bin-line"></i> 删除
</button>
</div>
</div>
))
) : (
<div className="condition-row bg-gray-50 p-4 rounded-md mb-2">
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-2">
<div>
<label className="form-label text-sm" htmlFor={`field-${id}-0`}>字段</label>
<select
id={`field-${id}-0`}
className="form-select"
onChange={(e) => {
// 直接初始化一个完整的条件对象
const firstCondition = { field: e.target.value, operator: 'eq', value: '' };
handleRuleConfigChange(id, { conditions: [firstCondition] });
}}
>
<option value="">请选择字段</option>
{availableFields.map((field, idx) => (
<option key={`field-${idx}`} value={field}>{field}</option>
))}
</select>
</div>
<div>
<label className="form-label text-sm" htmlFor={`operator-${id}-0`}>运算符</label>
<select
id={`operator-${id}-0`}
className="form-select"
onChange={(e) => {
// 获取field的值
const field = document.getElementById(`field-${id}-0`) ?
(document.getElementById(`field-${id}-0`) as HTMLSelectElement).value : '';
const firstCondition = { field, operator: e.target.value, value: '' };
handleRuleConfigChange(id, { conditions: [firstCondition] });
}}
>
<option value="eq">等于 (=)</option>
<option value="neq">不等于 (≠)</option>
<option value="gt">大于 {`>`}</option>
<option value="gte">大于等于 {`≥`}</option>
<option value="lt">小于 {`<`}</option>
<option value="lte">小于等于 {`≤`}</option>
<option value="contains">包含</option>
<option value="not_contains">不包含</option>
</select>
</div>
<div>
<label className="form-label text-sm" htmlFor={`value-${id}-0`}>值</label>
<input
type="text"
id={`value-${id}-0`}
className="form-input"
placeholder="请输入比较值"
onChange={(e) => {
// 获取field和operator的值
const field = document.getElementById(`field-${id}-0`) ?
(document.getElementById(`field-${id}-0`) as HTMLSelectElement).value : '';
const operator = document.getElementById(`operator-${id}-0`) ?
(document.getElementById(`operator-${id}-0`) as HTMLSelectElement).value : 'eq';
const firstCondition = { field, operator, value: e.target.value };
handleRuleConfigChange(id, { conditions: [firstCondition] });
}}
/>
</div>
</div>
<div className="flex justify-end">
<button
type="button"
className="text-red-500 hover:text-red-700"
onClick={() => {
const currentConditions = Array.isArray(config.conditions) ? [...(config.conditions as Condition[])] : [];
if (currentConditions.length > 1) {
currentConditions.splice(0, 1);
handleRuleConfigChange(id, { conditions: currentConditions });
}
}}
>
<option value="">请选择字段</option>
{availableFields.map((field, idx) => (
<option key={`field-${idx}`} value={field}>{field}</option>
))}
</select>
</div>
<div>
<label className="form-label text-sm" htmlFor={`operator-${id}-0`}>运算符</label>
<select
id={`operator-${id}-0`}
className="form-select"
onChange={(e) => {
const currentConditions = Array.isArray(config.conditions) ? [...config.conditions] : [];
currentConditions[0] = { ...currentConditions[0], operator: e.target.value };
handleRuleConfigChange(id, { conditions: currentConditions });
}}
>
<option value="eq">等于 (=)</option>
<option value="neq">不等于 (≠)</option>
<option value="gt">大于 {`>`}</option>
<option value="gte">大于等于 {`≥`}</option>
<option value="lt">小于 {`<`}</option>
<option value="lte">小于等于 {`≤`}</option>
<option value="contains">包含</option>
<option value="not_contains">不包含</option>
</select>
</div>
<div>
<label className="form-label text-sm" htmlFor={`value-${id}-0`}>值</label>
<input
type="text"
id={`value-${id}-0`}
className="form-input"
placeholder="请输入比较值"
onChange={(e) => {
const currentConditions = Array.isArray(config.conditions) ? [...config.conditions] : [];
currentConditions[0] = { ...currentConditions[0], value: e.target.value };
handleRuleConfigChange(id, { conditions: currentConditions });
}}
/>
<i className="ri-delete-bin-line"></i> 删除
</button>
</div>
</div>
<div className="flex justify-end">
<button className="text-red-500 hover:text-red-700">
<i className="ri-delete-bin-line"></i> 删除
</button>
</div>
</div>
)}
</div>
<div className="mt-2">
<button
type="button"
className="ant-btn ant-btn-default"
onClick={() => {
// 添加新的条件
const currentConditions = Array.isArray(config.conditions) ? [...config.conditions] : [];
// 直接获取当前的conditions数组，或初始化为空数组
const conditions = Array.isArray(config.conditions) ? [...(config.conditions as Condition[])] : [];
// 创建新的空白条件
const newCondition = { field: '', operator: 'eq', value: '' };
handleRuleConfigChange(id, { conditions: [...currentConditions, newCondition] });
// 如果数组为空，确保先初始化第一个条目
if (conditions.length === 0) {
// 如果界面上已有值，则添加两行：一行是当前值，一行是新的空行
const field = document.getElementById(`field-${id}-0`) ?
(document.getElementById(`field-${id}-0`) as HTMLSelectElement).value : '';
const operator = document.getElementById(`operator-${id}-0`) ?
(document.getElementById(`operator-${id}-0`) as HTMLSelectElement).value : 'eq';
const value = document.getElementById(`value-${id}-0`) ?
(document.getElementById(`value-${id}-0`) as HTMLInputElement).value : '';
// 将第一行设置为当前值（如果有）
conditions.push({ field, operator, value });
}
// 无论如何，都添加一个新的空白行
conditions.push(newCondition);
// 更新配置
handleRuleConfigChange(id, { conditions });
}}
>
<i className="ri-add-line mr-1"></i> 添加条件