fe_supplier_frontend/src/components/EvaluateTemplateTable

EvaluateTemplateTable 组件使用指南

组件简介

EvaluateTemplateTable 是一个用于管理供应商评价模板指标的表格组件，支持以下功能：

• 添加/删除一级指标
• 添加/删除二级指标
• 设置指标类型、分值、星号项等
• 支持详情模式查看

使用方式

基本用法

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>
  );
};

详情模式

<EvaluateTemplateTable value={detailData} isDetail={true} />

接口对接指南

EvaluateTemplateTable 组件使用了全局命名空间 SupplierEvaluate 中的类型定义，可以用于新增和修改操作。

新增模板接口

1. 引入类型

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

2. 表单提交示例

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. 引入类型

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

2. 表单提交示例

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('修改失败');
  }
};

数据预处理

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

// 加载详情数据示例
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的行会特殊处理，确保添加一级指标功能正常工作