146 lines
3.9 KiB
Markdown
146 lines
3.9 KiB
Markdown
# 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} />
|
||
```
|
||
|
||
## 接口对接指南
|
||
|
||
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的行会特殊处理，确保添加一级指标功能正常工作
|