# EvaluateTemplateTable 组件使用指南 ## 组件简介 EvaluateTemplateTable 是一个用于管理供应商评价模板指标的表格组件,支持以下功能: - 添加/删除一级指标 - 添加/删除二级指标 - 设置指标类型、分值、星号项等 - 支持详情模式查看 ## 使用方式 ### 基本用法 ```jsx import EvaluateTemplateTable from '@/components/EvaluateTemplateTable'; import { Form } from 'antd'; const YourComponent = () => { const [form] = Form.useForm(); return (
); }; ``` ### 详情模式 ```jsx ``` ## 接口对接指南 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的行会特殊处理,确保添加一级指标功能正常工作