修复谷歌浏览器无法渲染数据问题
This commit is contained in:
+89
-65
@@ -237,25 +237,39 @@ export default function RuleNew() {
|
||||
setIsLoading(true);
|
||||
console.log(`获取评查点数据，ID: ${id}`);
|
||||
// 使用 postgrestGet 替代直接调用 fetch
|
||||
const postgrestParams = {
|
||||
filter: {
|
||||
'id': `eq.${id}`
|
||||
}
|
||||
};
|
||||
const postgrestParams = {
|
||||
filter: {
|
||||
'id': `eq.${id}`
|
||||
}
|
||||
};
|
||||
const response = await postgrestGet('evaluation_points', postgrestParams);
|
||||
|
||||
if (response.data && Array.isArray(response.data) && response.data[0]) {
|
||||
|
||||
if (response.data.length > 0) {
|
||||
const data = response.data[0]
|
||||
setFormData(data);
|
||||
|
||||
// 初始化extractionFields
|
||||
const extractedFields = extractFieldsFromFormData(data);
|
||||
setExtractionFields(extractedFields);
|
||||
|
||||
// 设置编辑模式的实例键
|
||||
setInstanceKey(`edit_${id}_${Date.now()}`);
|
||||
try {
|
||||
// 使用JSON序列化和反序列化来进行深拷贝，避免浏览器差异
|
||||
const originalData = response.data[0];
|
||||
const jsonString = JSON.stringify(originalData);
|
||||
const data = JSON.parse(jsonString);
|
||||
|
||||
console.log("数据已经过深拷贝处理，避免浏览器兼容性问题");
|
||||
|
||||
// 设置表单数据
|
||||
setFormData(data);
|
||||
|
||||
// 初始化extractionFields
|
||||
const extractedFields = extractFieldsFromFormData(data);
|
||||
setExtractionFields(extractedFields);
|
||||
|
||||
// 设置编辑模式的实例键
|
||||
setInstanceKey(`edit_${id}_${Date.now()}`);
|
||||
} catch (jsonError) {
|
||||
console.error('JSON处理错误:', jsonError);
|
||||
alert(`数据处理错误: ${jsonError instanceof Error ? jsonError.message : '未知错误'}`);
|
||||
resetFormData();
|
||||
navigate('/rules');
|
||||
}
|
||||
} else {
|
||||
console.error('获取数据失败: 返回数据为空');
|
||||
alert('获取数据失败: 返回数据为空');
|
||||
@@ -448,61 +462,71 @@ export default function RuleNew() {
|
||||
delete cleanedData.id;
|
||||
}
|
||||
|
||||
// 确保extraction_config和evaluation_config是有效的JSON对象
|
||||
// 通过先序列化再解析来验证
|
||||
try {
|
||||
JSON.parse(JSON.stringify(cleanedData.extraction_config));
|
||||
} catch (e) {
|
||||
throw new Error("extraction_config 格式无效");
|
||||
}
|
||||
|
||||
try {
|
||||
JSON.parse(JSON.stringify(cleanedData.evaluation_config));
|
||||
} catch (e) {
|
||||
throw new Error("evaluation_config 格式无效");
|
||||
}
|
||||
|
||||
// 检查JSON字符串长度，如果太长可能会被截断
|
||||
const jsonData = JSON.stringify(cleanedData);
|
||||
const maxLength = 65536; // 通常PostgreSQL的jsonb列可以存储的最大长度
|
||||
|
||||
if (jsonData.length > maxLength) {
|
||||
throw new Error(`数据大小超过限制 (${jsonData.length} > ${maxLength})`);
|
||||
}
|
||||
|
||||
console.log("准备提交到API的数据：", cleanedData);
|
||||
console.log("JSON数据长度:", jsonData.length);
|
||||
|
||||
let response;
|
||||
|
||||
if (isEditMode) {
|
||||
response = await postgrestPut('evaluation_points', cleanedData, {id: formData.id!});
|
||||
} else {
|
||||
response = await postgrestPost('evaluation_points', cleanedData);
|
||||
}
|
||||
|
||||
if (response.error) {
|
||||
alert(`系统繁忙: ${response.error}`);
|
||||
} else if (response.data && Array.isArray(response.data) && response.data.length > 0) {
|
||||
// 获取新创建或更新的评查点ID
|
||||
const savedPointId = response.data[0]?.id;
|
||||
// 使用JSON序列化和反序列化来进行深拷贝，避免浏览器差异
|
||||
const jsonString = JSON.stringify(cleanedData);
|
||||
const finalData = JSON.parse(jsonString);
|
||||
|
||||
if (savedPointId) {
|
||||
// 显示成功消息
|
||||
alert(`评查点${isEditMode ? '更新' : '创建'}成功!`);
|
||||
|
||||
// 保存成功后跳转到编辑页面并重新加载数据
|
||||
navigate(`/rules-new?id=${savedPointId}`, { replace: true });
|
||||
// 重新获取评查点数据
|
||||
await fetchEvaluationPoint(savedPointId);
|
||||
} else {
|
||||
// 无法获取ID的情况
|
||||
alert(`评查点${isEditMode ? '更新' : '创建'}成功，但无法获取ID。正在返回列表页面。`);
|
||||
navigate('/rules');
|
||||
// 确保extraction_config和evaluation_config是有效的JSON对象
|
||||
try {
|
||||
JSON.parse(JSON.stringify(finalData.extraction_config));
|
||||
} catch (e) {
|
||||
throw new Error("extraction_config 格式无效");
|
||||
}
|
||||
} else {
|
||||
alert(`系统繁忙`);
|
||||
|
||||
try {
|
||||
JSON.parse(JSON.stringify(finalData.evaluation_config));
|
||||
} catch (e) {
|
||||
throw new Error("evaluation_config 格式无效");
|
||||
}
|
||||
|
||||
// 检查JSON字符串长度，如果太长可能会被截断
|
||||
const dataLength = jsonString.length;
|
||||
const maxLength = 65536; // 通常PostgreSQL的jsonb列可以存储的最大长度
|
||||
|
||||
if (dataLength > maxLength) {
|
||||
throw new Error(`数据大小超过限制 (${dataLength} > ${maxLength})`);
|
||||
}
|
||||
|
||||
console.log("准备提交到API的数据（已经过深拷贝处理）:", finalData);
|
||||
console.log("JSON数据长度:", dataLength);
|
||||
|
||||
let response;
|
||||
if (isEditMode) {
|
||||
response = await postgrestPut('evaluation_points', finalData, {id: formData.id!});
|
||||
} else {
|
||||
response = await postgrestPost('evaluation_points', finalData);
|
||||
}
|
||||
|
||||
if (response.error) {
|
||||
alert(`系统繁忙: ${response.error}`);
|
||||
} else if (response.data && Array.isArray(response.data) && response.data.length > 0) {
|
||||
// 获取新创建或更新的评查点ID
|
||||
const savedPointId = response.data[0]?.id;
|
||||
|
||||
if (savedPointId) {
|
||||
// 显示成功消息
|
||||
alert(`评查点${isEditMode ? '更新' : '创建'}成功!`);
|
||||
|
||||
// 保存成功后跳转到编辑页面并重新加载数据
|
||||
navigate(`/rules-new?id=${savedPointId}`, { replace: true });
|
||||
// 重新获取评查点数据
|
||||
await fetchEvaluationPoint(savedPointId);
|
||||
} else {
|
||||
// 无法获取ID的情况
|
||||
alert(`评查点${isEditMode ? '更新' : '创建'}成功，但无法获取ID。正在返回列表页面。`);
|
||||
navigate('/rules');
|
||||
}
|
||||
} else {
|
||||
alert(`系统繁忙`);
|
||||
}
|
||||
} catch (jsonError) {
|
||||
console.error("JSON处理错误:", jsonError);
|
||||
alert(`数据处理错误: ${jsonError instanceof Error ? jsonError.message : '未知错误'}`);
|
||||
setIsLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error("数据处理错误:", error);
|
||||
alert(`数据处理错误: ${error instanceof Error ? error.message : '未知错误'}`);
|
||||
|
||||
Reference in New Issue
Block a user