91 lines
2.5 KiB
Markdown
91 lines
2.5 KiB
Markdown
|
# ScoreEvaluationTable 评分表格组件
|
|||
|
|
|
|||
|
|
## 组件介绍
|
|||
|
|
|
|||
|
|
ScoreEvaluationTable 是一个用于展示和填写供应商评价得分的表格组件。该组件基于 EvaluateTemplateTable 组件扩展，在二级指标中添加了评分列和说明列，可用于评价结果的展示和评分录入。
|
|||
|
|
|
|||
|
|
## 功能特点
|
|||
|
|
|
|||
|
|
- 支持一级指标和二级指标的层级展示
|
|||
|
|
- 支持评分和评分说明的录入和展示
|
|||
|
|
- 支持详情模式（只读）和编辑模式
|
|||
|
|
- 支持数据格式的自动转换
|
|||
|
|
- 自动合并一级指标单元格
|
|||
|
|
|
|||
|
|
## 使用方法
|
|||
|
|
|
|||
|
|
```tsx
|
|||
|
|
import ScoreEvaluationTable from '@/components/ScoreEvaluationTable';
|
|||
|
|
|
|||
|
|
// 示例数据
|
|||
|
|
const evaluationData = [
|
|||
|
|
{
|
|||
|
|
id: '1',
|
|||
|
|
baseIndicator: '质量管理',
|
|||
|
|
descIndicator: '质量管理体系完善程度',
|
|||
|
|
score: '30',
|
|||
|
|
indicatorNdList: [
|
|||
|
|
{
|
|||
|
|
id: '1-1',
|
|||
|
|
subIndicator: '质量管理体系认证',
|
|||
|
|
score: '10',
|
|||
|
|
isStar: '0',
|
|||
|
|
actualScore: '8',
|
|||
|
|
remark: '已获得ISO9001认证'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: '1-2',
|
|||
|
|
subIndicator: '质量控制流程',
|
|||
|
|
score: '10',
|
|||
|
|
isStar: '1',
|
|||
|
|
actualScore: '9',
|
|||
|
|
remark: '质量控制流程完善'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
// 详情模式（只读）
|
|||
|
|
<ScoreEvaluationTable
|
|||
|
|
value={evaluationData}
|
|||
|
|
isDetail={true}
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
// 编辑模式
|
|||
|
|
<ScoreEvaluationTable
|
|||
|
|
value={evaluationData}
|
|||
|
|
onChange={(newData) => console.log(newData)}
|
|||
|
|
isDetail={false}
|
|||
|
|
/>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 属性说明
|
|||
|
|
|
|||
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|||
|
|
| --- | --- | --- | --- |
|
|||
|
|
| value | array | [] | 表格数据，应符合API返回的评价指标数据结构 |
|
|||
|
|
| onChange | function | - | 数据变更回调函数 |
|
|||
|
|
| isDetail | boolean | false | 是否为详情模式（只读） |
|
|||
|
|
| loading | boolean | false | 表格加载状态 |
|
|||
|
|
|
|||
|
|
## 数据格式
|
|||
|
|
|
|||
|
|
组件接受的数据格式应为一个数组，每个元素代表一个一级指标，包含以下字段：
|
|||
|
|
|
|||
|
|
```typescript
|
|||
|
|
interface IndicatorItem {
|
|||
|
|
id?: string; // 一级指标ID
|
|||
|
|
baseIndicator: string; // 一级指标名称
|
|||
|
|
descIndicator?: string; // 一级指标说明
|
|||
|
|
score: string; // 一级指标分值
|
|||
|
|
indicatorNdList: { // 二级指标列表
|
|||
|
|
id?: string; // 二级指标ID
|
|||
|
|
subIndicator: string; // 二级指标名称
|
|||
|
|
score: string; // 二级指标分值
|
|||
|
|
isStar?: string; // 是否为星号项
|
|||
|
|
actualScore?: string; // 实际评分
|
|||
|
|
remark?: string; // 评分说明
|
|||
|
|
}[];
|
|||
|
|
}
|
|||
|
|
```
|