# EvaluateTemplateTable 组件使用指南

## 组件简介

EvaluateTemplateTable 是一个用于管理供应商评价模板指标的表格组件，支持以下功能：
- 添加/删除一级指标
- 添加/删除二级指标
- 设置指标类型、分值、星号项等
- 支持详情模式查看
- 支持勾选模式选择指标
- 支持默认选中指定的指标

## 使用方式

### 基本用法

```jsx
import EvaluateTemplateTable from '@/components/EvaluateTemplateTable';
import { Form } from 'antd';

const YourComponent = () => {
  const [form] = Form.useForm();

  return (
    <Form form={form}>
      <Form.Item name="indicatorList">
        <EvaluateTemplateTable />
      </Form.Item>
    </Form>
  );
};
```

### 详情模式

```jsx
<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 中的类型定义，可以用于新增和修改操作。

### 新增模板接口

#### 1. 引入类型

```typescript
import EvaluateTemplateTable from '@/components/EvaluateTemplateTable';
import { createTemplate } from '@/servers/api/supplierEvaluate'; // 假设这是API请求函数
```

#### 2. 表单提交示例

```typescript
const handleSubmit = async (values) => {
  // 这里的values.indicatorList就是EvaluateTemplateTable组件通过onChange输出的indicatorStList数据
  const requestData: SupplierEvaluate.TemplateCreateRequest = {
    categoryId: values.categoryId,
    categoryLimitation: values.categoryLimitation || '0',
    indicatorNdMore: values.indicatorNdMore || '0',
    indicatorStList: values.indicatorList,
    indicatorStMore: values.indicatorStMore || '0',
    indicatorTypeMore: values.indicatorTypeMore || '0',
    status: values.status,
    templateName: values.templateName,
    templateType: values.templateType,
  };

  try {
    const res = await createTemplate(requestData);
    if (res.success) {
      message.success('创建成功');
      // 其他操作...
    }
  } catch (error) {
    console.error('创建模板失败:', error);
    message.error('创建失败');
  }
};
```

### 修改模板接口

#### 1. 引入类型

```typescript
import EvaluateTemplateTable from '@/components/EvaluateTemplateTable';
import { updateTemplate } from '@/servers/api/supplierEvaluate'; // 假设这是API请求函数
```

#### 2. 表单提交示例

```typescript
const handleSubmit = async (values) => {
  const requestData: SupplierEvaluate.TemplateUpdateRequest = {
    id: values.id, // 模板ID
    categoryId: values.categoryId,
    categoryLimitation: values.categoryLimitation,
    indicatorStList: values.indicatorList,
    status: values.status,
    templateName: values.templateName,
    templateType: values.templateType,
  };

  try {
    const res = await updateTemplate(requestData);
    if (res.success) {
      message.success('修改成功');
      // 其他操作...
    }
  } catch (error) {
    console.error('修改模板失败:', error);
    message.error('修改失败');
  }
};
```

### 数据预处理

如果后端返回的数据格式与组件需要的格式不完全一致，可能需要进行预处理：

```typescript
// 加载详情数据示例
const fetchTemplateDetail = async (id) => {
  try {
    const res = await getTemplateDetail(id);
    if (res.success && res.data) {
      // 如果需要，这里可以对数据进行预处理
      form.setFieldsValue({
        ...res.data,
        indicatorList: res.data.indicatorStList, // 将indicatorStList映射到表单的indicatorList字段
      });
    }
  } catch (error) {
    console.error('获取模板详情失败:', error);
    message.error('获取详情失败');
  }
};
```

## 注意事项

1. 表格组件内部将值输出为标准的API格式，无需额外转换
2. 创建新模板时，需要设置Edit相关字段，这些在表格组件中没有UI界面
3. 修改操作需要保持ID字段以便后端识别哪些指标需要更新
4. 表格组件对空baseIndicator的行会特殊处理，确保添加一级指标功能正常工作
5. 使用勾选功能时，建议在详情模式下使用，以避免编辑和勾选操作冲突
6. 勾选状态在组件内部维护，不会随着`value`属性的变化而重置，除非组件重新挂载
