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

对接供应商评价任务新增

Browse Source
This commit is contained in:
linxd
2025-06-24 20:32:55 +08:00
parent d7df286214
commit a7271653a6
7 changed files with 450 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -27,6 +27,9 @@ interface EvaluateTemplateTableProps {
value?: any[];
onChange?: (value: any[]) => void;
isDetail?: boolean; // 是否详情展示用，如果为true则将input都改为text展示并且将操作列隐藏
isCheck?: boolean; // 是否显示勾选操作，如果为true则在表格最后一列增加勾选操作项
onSelect?: (selectedItems: any[]) => void; // 勾选回调函数
defaultSelectedIds?: string[]; // 默认选中的二级指标ID数组
}
// 内部使用的数据结构，扁平化后的行数据
@ -44,12 +47,16 @@ interface TableRowItem {
desc?: string;
orderBy?: number;
ndOrderBy?: number;
selected?: boolean; // 是否选中
}
const EvaluateTemplateTable: React.FC<EvaluateTemplateTableProps> = ({
value = [],
onChange,
isDetail = false,
isCheck = false,
onSelect,
defaultSelectedIds = [],
}) => {
const [dataSource, setDataSource] = useState<TableRowItem[]>([]);
const [form] = Form.useForm();
@ -86,7 +93,8 @@ const EvaluateTemplateTable: React.FC<EvaluateTemplateTableProps> = ({
ndScore: item.score || '0',
isStar: item.isStar || StarLevel.NO,
orderBy: typeof item.stOrderBy === 'string' ? parseInt(item.stOrderBy) : item.stOrderBy,
ndOrderBy: typeof item.orderBy === 'string' ? parseInt(item.orderBy) : item.orderBy
ndOrderBy: typeof item.orderBy === 'string' ? parseInt(item.orderBy) : item.orderBy,
selected: defaultSelectedIds.includes(item.id) // 根据defaultSelectedIds设置选中状态
}));
}
@ -109,7 +117,8 @@ const EvaluateTemplateTable: React.FC<EvaluateTemplateTableProps> = ({
isStar: ndItem.isStar || StarLevel.NO,
desc: ndItem.desc,
orderBy: typeof stItem.orderBy === 'string' ? parseInt(stItem.orderBy) : stItem.orderBy,
ndOrderBy: typeof ndItem.orderBy === 'string' ? parseInt(ndItem.orderBy) : ndItem.orderBy
ndOrderBy: typeof ndItem.orderBy === 'string' ? parseInt(ndItem.orderBy) : ndItem.orderBy,
selected: defaultSelectedIds.includes(ndItem.id) // 根据defaultSelectedIds设置选中状态
});
});
});
@ -208,9 +217,13 @@ const EvaluateTemplateTable: React.FC<EvaluateTemplateTableProps> = ({
(existing.baseIndicator === newItem.baseIndicator && existing.subIndicator === newItem.subIndicator)
);
// 如果找到现有项，保留其key
// 如果找到现有项，保留其key和selected状态
if (existingItem) {
return { ...newItem, key: existingItem.key };
return {
...newItem,
key: existingItem.key,
selected: defaultSelectedIds.includes(newItem.ndId || '') ? true : existingItem.selected
};
}
return newItem;
@ -229,6 +242,27 @@ const EvaluateTemplateTable: React.FC<EvaluateTemplateTableProps> = ({
}
}, [value]);
// 处理defaultSelectedIds变化
useEffect(() => {
if (defaultSelectedIds.length > 0 && dataSource.length > 0) {
const newData = dataSource.map(item => ({
...item,
selected: defaultSelectedIds.includes(item.ndId || '')
}));
console.log("newData",newData)
setDataSource(newData);
// 如果有onSelect回调，传递所有选中的项
if (onSelect) {
const selectedItems = newData.filter(item => item.selected);
// 转换为API格式再传递给父组件
const selectedApiData = convertTableDataToApiData(selectedItems);
onSelect(selectedApiData);
}
}
}, [defaultSelectedIds]);
// 更新数据源
const updateDataSource = (newData: TableRowItem[]) => {
// 确保每行都有唯一稳定的key
@ -242,6 +276,25 @@ const EvaluateTemplateTable: React.FC<EvaluateTemplateTableProps> = ({
}
};
// 处理勾选状态变化
const handleCheckChange = (record: TableRowItem, checked: boolean) => {
console.log("handleCheckChange")
const newData = [...dataSource];
const index = newData.findIndex((item) => item.key === record.key);
if (index > -1) {
newData[index] = { ...newData[index], selected: checked };
setDataSource(newData);
// 如果有onSelect回调，传递所有选中的项
if (onSelect) {
const selectedItems = newData.filter(item => item.selected);
// 转换为API格式再传递给父组件
const selectedApiData = convertTableDataToApiData(selectedItems);
onSelect(selectedApiData);
}
}
};
// 处理输入变化
const handleInputChange = (val: any, record: TableRowItem, field: string) => {
const newData = [...dataSource];
@ -311,7 +364,8 @@ const EvaluateTemplateTable: React.FC<EvaluateTemplateTableProps> = ({
isStar: StarLevel.NO,
desc: '',
orderBy: dataSource.length + 1, // 确保正确的排序
ndOrderBy: 1 // 设置二级指标初始排序
ndOrderBy: 1, // 设置二级指标初始排序
selected: false, // 默认未选中
};
// 制作数据源的副本，避免直接修改状态
@ -375,7 +429,8 @@ const EvaluateTemplateTable: React.FC<EvaluateTemplateTableProps> = ({
ndScore: '0',
isStar: StarLevel.NO,
desc: '',
ndOrderBy: dataSource.filter(item => item.baseIndicator === parent.baseIndicator).length + 1
ndOrderBy: dataSource.filter(item => item.baseIndicator === parent.baseIndicator).length + 1,
selected: false, // 默认未选中
};
// 找到当前记录所在的位置
@ -698,6 +753,20 @@ const EvaluateTemplateTable: React.FC<EvaluateTemplateTableProps> = ({
);
},
},
// 添加勾选列，只在isCheck为true时显示
...(isCheck ? [{
title: '勾选',
key: 'check',
align: 'center',
width: 80,
render: (_: any, record: TableRowItem) => (
<input
type="checkbox"
checked={record.selected}
onChange={(e) => handleCheckChange(record, e.target.checked)}
/>
),
}] : []),
].filter((col) => !(isDetail && col.key === 'level2Action')),
},
];

119
src/components/EvaluateTemplateTable/README.md
View File

@ -7,6 +7,8 @@ EvaluateTemplateTable 是一个用于管理供应商评价模板指标的表格
- 添加/删除二级指标
- 设置指标类型、分值、星号项等
- 支持详情模式查看
- 支持勾选模式选择指标
- 支持默认选中指定的指标
## 使用方式
@ -35,6 +37,119 @@ const YourComponent = () => {
<EvaluateTemplateTable value={detailData} isDetail={true} />
```
### 勾选模式
```jsx
const [selectedIndicators, setSelectedIndicators] = useState([]);
const handleIndicatorSelect = (selectedItems) => {
console.log('选中的指标:', selectedItems);
setSelectedIndicators(selectedItems);
};
return (
<EvaluateTemplateTable
value={templateData}
isDetail={true}
isCheck={true}
onSelect={handleIndicatorSelect}
/>
);
```
### 默认选中指定指标
```jsx
// 指定要默认选中的二级指标ID数组
const defaultSelectedIds = ['1001', '1002', '1003'];
return (
<EvaluateTemplateTable
value={templateData}
isDetail={true}
isCheck={true}
onSelect={handleIndicatorSelect}
defaultSelectedIds={defaultSelectedIds}
/>
);
```
## 属性说明
| 属性名 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| value | any[] | [] | 表格数据源，通常是指标列表 |
| onChange | (value: any[]) => void | - | 数据变更回调函数 |
| isDetail | boolean | false | 是否为详情模式，为true时隐藏编辑功能 |
| isCheck | boolean | false | 是否显示勾选功能，为true时在表格最后一列增加勾选框 |
| onSelect | (selectedItems: any[]) => void | - | 勾选变更回调函数，返回所有选中的项 |
| defaultSelectedIds | string[] | [] | 默认选中的二级指标ID数组 |
## 勾选功能使用场景
勾选功能主要用于以下场景：
1. **指标分配**：在评价任务中，为评价人员分配特定的评价指标
2. **指标筛选**：从模板中选择部分指标用于特定评价场景
3. **批量操作**：选择多个指标进行批量设置或操作
### 勾选功能实现细节
- 勾选状态存储在组件内部状态中
- 勾选变更时，通过`onSelect`回调将所有选中的项（已转换为API格式）传递给父组件
- 选中的项会保留完整的一级指标和二级指标层级结构
### 勾选功能最佳实践
```jsx
// 在评价分工设置中使用勾选功能
const DivisionStep = () => {
const [selectedIndicators, setSelectedIndicators] = useState([]);
const [evaluator, setEvaluator] = useState(null);
// 处理指标选择
const handleIndicatorSelect = (selectedItems) => {
setSelectedIndicators(selectedItems);
};
// 保存分配
const handleSaveAssignment = () => {
if (!evaluator) {
message.warning('请先选择评价人员');
return;
}
// 将选中的指标分配给评价人员
const assignment = {
userId: evaluator.id,
userName: evaluator.name,
indicatorIds: selectedIndicators.flatMap(item =>
item.indicatorNdList.map(nd => nd.id)
),
type: selectedIndicators.length > 0 ? 'INDICATOR' : 'ALL'
};
// 保存分配结果
saveAssignment(assignment);
};
return (
<>
<UserSelector onSelect={setEvaluator} />
<Modal title="选择评价指标" visible={modalVisible} onOk={handleSaveAssignment}>
<EvaluateTemplateTable
value={templateData}
isDetail={true}
isCheck={true}
onSelect={handleIndicatorSelect}
/>
</Modal>
</>
);
};
```
## 接口对接指南
EvaluateTemplateTable 组件使用了全局命名空间 SupplierEvaluate 中的类型定义，可以用于新增和修改操作。
@ -142,4 +257,6 @@ const fetchTemplateDetail = async (id) => {
1. 表格组件内部将值输出为标准的API格式，无需额外转换
2. 创建新模板时，需要设置Edit相关字段，这些在表格组件中没有UI界面
3. 修改操作需要保持ID字段以便后端识别哪些指标需要更新
4. 表格组件对空baseIndicator的行会特殊处理，确保添加一级指标功能正常工作
4. 表格组件对空baseIndicator的行会特殊处理，确保添加一级指标功能正常工作
5. 使用勾选功能时，建议在详情模式下使用，以避免编辑和勾选操作冲突
6. 勾选状态在组件内部维护，不会随着`value`属性的变化而重置，除非组件重新挂载

1
src/components/SupplierSelector/SupplierSelector.less
View File

@ -1,7 +1,6 @@
.supplier-selector {
.supplier-lists {
margin-top: 16px;
min-height: 450px;
.list-title {
font-weight: 500;