liuc/fe_supplier_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

提交一下 换git仓库了

Browse Source
This commit is contained in:
linxd
2025-06-23 21:39:51 +08:00
parent 9eb1bed092
commit c74aefb93d
11 changed files with 741 additions and 672 deletions
Download Patch File Download Diff File Expand all files Collapse all files

194
src/components/EvaluateTemplateTable/EvaluateTemplateTable.tsx
View File

@ -7,15 +7,11 @@ import {
Select,
Form,
InputNumber,
Upload,
message,
Divider,
Switch,
} from 'antd';
import {
PlusOutlined,
MinusCircleOutlined,
UploadOutlined,
PlusCircleOutlined,
DeleteOutlined,
} from '@ant-design/icons';
@ -24,14 +20,9 @@ import { StarLevel, StarLevelText } from '@/dicts/supplierTemplateDict';
import { generateUUID } from '@/utils/utils';
import './EvaluateTemplateTable.less';
// 注意：这里我们使用SupplierEvaluate命名空间中的类型
// 类型定义已移动到 src/typings.d.ts 文件中
const { Option } = Select;
const { TextArea } = Input;
// 移除类型定义，使用全局命名空间中的类型
interface EvaluateTemplateTableProps {
value?: any[];
onChange?: (value: any[]) => void;
@ -133,7 +124,7 @@ const EvaluateTemplateTable: React.FC<EvaluateTemplateTableProps> = ({
const convertTableDataToApiData = (tableData: TableRowItem[]): any[] => {
// 按一级指标分组
const groupedByLevel1 = tableData.reduce((acc: Record<string, TableRowItem[]>, item: TableRowItem) => {
// 为空的baseIndicator也需要分组，使用特殊键标识 - 这是关键修复
// 为空的baseIndicator也需要分组，使用特殊键标识
const groupKey = item.baseIndicator || `empty-${item.key}`;
if (!acc[groupKey]) {
@ -151,7 +142,6 @@ const EvaluateTemplateTable: React.FC<EvaluateTemplateTableProps> = ({
// 生成唯一的临时ID
const tempStId = `temp-st-${generateUUID(16)}-${stIndex}`;
// 简化数据转换，使用可选链和短路评估
return {
id: firstItem.stId || tempStId,
baseIndicator: firstItem.baseIndicator || '',
@ -182,43 +172,36 @@ const EvaluateTemplateTable: React.FC<EvaluateTemplateTableProps> = ({
fetchIndicatorTypes();
}, []);
// 确保数据中没有重复的key
const ensureUniqueKeys = (data: TableRowItem[]): TableRowItem[] => {
const keyMap = new Map<string, boolean>();
return data.map((item, index) => {
if (!item.key || item.key.includes('undefined') || keyMap.has(item.key)) {
const newKey = `fixed-${generateUUID(32)}-${index}`;
return { ...item, key: newKey };
}
keyMap.set(item.key, true);
return item;
});
};
// 单独处理value变化
useEffect(() => {
// 初始化表格数据或value变化时更新
if (value && value.length > 0) {
console.log('useEffect中接收到的value:', value);
// 避免不必要的状态更新，比较新旧数据是否相同
const currentValueStr = JSON.stringify(value);
// 注意：当dataSource为空时，避免调用convertTableDataToApiData
const currentDataSourceApiStr = dataSource.length > 0 ?
JSON.stringify(convertTableDataToApiData(dataSource)) : '';
if (currentValueStr !== currentDataSourceApiStr) {
const tableData = convertApiDataToTableData(value);
console.log('转换后的tableData:', tableData);
console.log('转换后的tableData key列表:', tableData.map(item => item.key));
// 保留现有项的key，确保稳定性
if (dataSource && dataSource.length > 0) {
console.log('现有dataSource:', dataSource);
console.log('现有dataSource key列表:', dataSource.map(item => item.key));
// 检查现有dataSource中是否有重复的key
const existingKeyMap = new Map<string, boolean>();
const duplicateKeys = dataSource.filter(item => {
if (existingKeyMap.has(item.key)) {
return true;
}
existingKeyMap.set(item.key, true);
return false;
}).map(item => item.key);
if (duplicateKeys.length > 0) {
console.error('现有dataSource中发现重复的key:', duplicateKeys);
}
const updatedTableData = tableData.map((newItem, index) => {
const updatedTableData = tableData.map((newItem) => {
// 尝试查找对应的现有项，通过stId和ndId匹配
const existingItem = dataSource.find(existing =>
(existing.stId === newItem.stId && existing.ndId === newItem.ndId) ||
@ -227,62 +210,17 @@ const EvaluateTemplateTable: React.FC<EvaluateTemplateTableProps> = ({
// 如果找到现有项，保留其key
if (existingItem) {
console.log(`保留现有项的key: ${existingItem.key}`);
return { ...newItem, key: existingItem.key };
}
// 生成唯一的key
const uniqueKey = `init-${generateUUID(32)}-${index}`;
console.log(`为新项生成key: ${uniqueKey}`);
return { ...newItem, key: uniqueKey };
return newItem;
});
console.log('更新后的tableData:', updatedTableData);
console.log('更新后的tableData key列表:', updatedTableData.map(item => item.key));
// 再次检查是否有重复的key
const finalKeyMap = new Map<string, boolean>();
const finalData = updatedTableData.map((item, index) => {
if (finalKeyMap.has(item.key)) {
// 如果仍然有重复的key，强制生成新的key
console.warn(`useEffect中仍然发现重复的key: ${item.key}，强制重新生成`);
const forceNewKey = `force-${generateUUID(32)}-${index}-${Date.now()}`;
return {
...item,
key: forceNewKey
};
} else {
finalKeyMap.set(item.key, true);
return item;
}
});
console.log('最终的tableData:', finalData);
console.log('最终的tableData key列表:', finalData.map(item => item.key));
setDataSource(finalData);
// 确保所有key都是唯一的
setDataSource(ensureUniqueKeys(updatedTableData));
} else {
// 确保初始数据的每一项都有唯一的key
const keyMap = new Map<string, boolean>();
const dataWithUniqueKeys = tableData.map((item, index) => {
const key = item.key || `init-${generateUUID(32)}-${index}`;
if (keyMap.has(key)) {
// 如果key重复，生成新的key
const newKey = `unique-${generateUUID(32)}-${index}`;
console.log(`初始化时发现重复的key: ${key}，生成新key: ${newKey}`);
keyMap.set(newKey, true);
return { ...item, key: newKey };
} else {
keyMap.set(key, true);
return { ...item, key };
}
});
console.log('初始化的dataWithUniqueKeys:', dataWithUniqueKeys);
console.log('初始化的key列表:', dataWithUniqueKeys.map(item => item.key));
setDataSource(dataWithUniqueKeys);
setDataSource(ensureUniqueKeys(tableData));
}
}
} else if (value && value.length === 0 && dataSource.length > 0) {
@ -293,62 +231,8 @@ const EvaluateTemplateTable: React.FC<EvaluateTemplateTableProps> = ({
// 更新数据源
const updateDataSource = (newData: TableRowItem[]) => {
console.log('updateDataSource接收到的数据:', newData);
console.log('updateDataSource接收到的key列表:', newData.map(item => item.key));
// 检查是否有重复的key
const keyMap = new Map<string, number>();
newData.forEach(item => {
if (keyMap.has(item.key)) {
keyMap.set(item.key, keyMap.get(item.key)! + 1);
} else {
keyMap.set(item.key, 1);
}
});
// 打印重复的key
const duplicateKeys = Array.from(keyMap.entries())
.filter(([_, count]) => count > 1)
.map(([key]) => key);
if (duplicateKeys.length > 0) {
console.error('发现重复的key:', duplicateKeys);
console.error('重复key的详细信息:', newData.filter(item => duplicateKeys.includes(item.key)));
}
// 确保每行都有唯一稳定的key
const dataWithStableKeys = newData.map((item, index) => {
// 如果key不存在、包含undefined或者是重复的key，使用工具函数生成新key
if (!item.key || item.key.includes('undefined') || duplicateKeys.includes(item.key)) {
console.log(`为项 ${index} 重新生成key，原key: ${item.key}`);
const newKey = `fixed-${generateUUID(32)}-${index}`;
return {
...item,
key: newKey
};
}
return item;
});
// 再次检查是否有重复的key
const finalKeyMap = new Map<string, boolean>();
const finalData = dataWithStableKeys.map((item, index) => {
if (finalKeyMap.has(item.key)) {
// 如果仍然有重复的key，强制生成新的key
console.warn(`仍然发现重复的key: ${item.key}，强制重新生成`);
const forceNewKey = `force-${generateUUID(32)}-${index}-${Date.now()}`;
return {
...item,
key: forceNewKey
};
} else {
finalKeyMap.set(item.key, true);
return item;
}
});
console.log('最终的数据源:', finalData);
console.log('最终的key列表:', finalData.map(item => item.key));
const finalData = ensureUniqueKeys(newData);
setDataSource(finalData);
if (onChange) {
@ -413,10 +297,8 @@ const EvaluateTemplateTable: React.FC<EvaluateTemplateTableProps> = ({
// 添加一级指标
const addLevel1Indicator = (currentRecord?: TableRowItem) => {
// 使用改进后的工具函数生成唯一key，不再需要额外的时间戳和随机数
// 使用改进后的工具函数生成唯一key
const newKey = `level1-${generateUUID(32)}`;
console.log('添加一级指标，生成的key:', newKey);
console.log('当前数据源:', dataSource);
const newItem: TableRowItem = {
key: newKey,
@ -431,7 +313,6 @@ const EvaluateTemplateTable: React.FC<EvaluateTemplateTableProps> = ({
orderBy: dataSource.length + 1, // 确保正确的排序
ndOrderBy: 1 // 设置二级指标初始排序
};
console.log('新建的一级指标项:', newItem);
// 制作数据源的副本，避免直接修改状态
const newData = [...dataSource];
@ -443,11 +324,9 @@ const EvaluateTemplateTable: React.FC<EvaluateTemplateTableProps> = ({
const sameGroup = newData.filter((item) => item.baseIndicator === currentRecord.baseIndicator);
const lastOfGroup = sameGroup[sameGroup.length - 1];
insertIndex = newData.findIndex((item) => item.key === lastOfGroup.key);
console.log('插入位置(相同baseIndicator):', insertIndex);
} else if (currentRecord && currentRecord.key) {
// 如果是新增的空白行，直接在其后插入
insertIndex = newData.findIndex((item) => item.key === currentRecord.key);
console.log('插入位置(空白行后):', insertIndex);
}
// 如果找到了位置，在该位置后插入，否则添加到末尾
@ -456,8 +335,6 @@ const EvaluateTemplateTable: React.FC<EvaluateTemplateTableProps> = ({
} else {
newData.push(newItem);
}
console.log('插入后的数据源:', newData);
console.log('插入后的数据源中的key列表:', newData.map(item => item.key));
updateDataSource(newData);
};
@ -827,31 +704,6 @@ const EvaluateTemplateTable: React.FC<EvaluateTemplateTableProps> = ({
return (
<div className="evaluate-template-table">
{console.log('渲染Table前的dataSource:', dataSource)}
{console.log('渲染Table前的dataSource中的key列表:', dataSource.map(item => item.key))}
{(() => {
// 检查是否有重复的key
const keyMap = new Map<string, number>();
dataSource.forEach(item => {
if (keyMap.has(item.key)) {
keyMap.set(item.key, keyMap.get(item.key)! + 1);
} else {
keyMap.set(item.key, 1);
}
});
// 打印重复的key
const duplicateKeys = Array.from(keyMap.entries())
.filter(([_, count]) => count > 1)
.map(([key]) => key);
if (duplicateKeys.length > 0) {
console.error('渲染Table前发现重复的key:', duplicateKeys);
console.error('重复key的详细信息:', dataSource.filter(item => duplicateKeys.includes(item.key)));
}
return null;
})()}
<Table
columns={columns}
dataSource={dataSource}