feat(componentTest): 新增测试用例编辑和删除功能

- 添加删除测试用例的API接口和调用逻辑
- 在测试用例弹窗中增加编辑模式支持
- 实现测试用例数据回显功能
- 添加编辑和删除按钮及相应事件处理
- 更新弹窗标题以区分新增和编辑状态
- 优化表单重置逻辑，避免编辑时数据干扰

src/api/componentTestCase.ts

@@ -18,3 +18,8 @@ export function getComponentTestCaseList(params?: { componentBaseId: string, ide
 export function submitTestCase(params) {
   return axios.post(`${urlPrefix}/componentTestCase/submit`, params);
 }
+
+// 删除测试用例
+export function deleteTestCase(ids) {
+  return axios.post(`${urlPrefix}/componentTestCase/remove?ids=${ids}`);
+}

src/pages/componentDevelopment/componentTest/TestCaseModal.tsx

@@ -9,6 +9,7 @@ interface TestCaseModalProps {
   design: Record<string, any>;
   visible: boolean;
   operationIdent: string;
+  editingData?: any;
   onCancel: () => void;
   onOk: (values: any) => void;
 }
@@ -40,7 +41,7 @@ const dict = [
   }
 ];
 
-const TestCaseModal: React.FC<TestCaseModalProps> = ({ design, visible, operationIdent, onCancel, onOk }) => {
+const TestCaseModal: React.FC<TestCaseModalProps> = ({ design, visible, operationIdent, editingData, onCancel, onOk }) => {
   const [testCaseFunctions, setTestCaseFunctions] = useState(null);
   const [form] = Form.useForm();
 
@@ -50,6 +51,7 @@ const TestCaseModal: React.FC<TestCaseModalProps> = ({ design, visible, operatio
 
       // 构造完整的数据结构，包含原始字段信息和用户输入的值
       const result = {
+        ...(editingData?.id && { id: editingData.id }), // 如果是编辑模式，保留id
         testCaseName: formValues.testCaseName,
         operation: operationIdent,
         expectDataIns: testCaseFunctions.parameters.map((param, index) => ({
@@ -86,9 +88,32 @@ const TestCaseModal: React.FC<TestCaseModalProps> = ({ design, visible, operatio
     setTestCaseFunctions(design.find(item => item.ident === operationIdent));
   }, [visible, operationIdent, design]);
 
+  // 回显编辑数据
+  useEffect(() => {
+    if (editingData && testCaseFunctions) {
+      const formData: any = {
+        testCaseName: editingData.testCaseName
+      };
+
+      // 回显输入参数
+      editingData.expectDataIns?.forEach((param: any, index: number) => {
+        formData[`parameters_${index}`] = param.value;
+      });
+
+      // 回显输出参数
+      editingData.expectDataOuts?.forEach((resp: any, index: number) => {
+        formData[`responses_${index}`] = resp.value;
+      });
+
+      form.setFieldsValue(formData);
+    } else {
+      form.resetFields();
+    }
+  }, [editingData, testCaseFunctions, form]);
+
   return (
     <Modal
-      title="配置测试用例"
+      title={editingData ? "编辑测试用例" : "配置测试用例"}
       visible={visible}
       onCancel={handleCancel}
       autoFocus={false}

src/pages/componentDevelopment/componentTest/testInstance.tsx

@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from 'react';
-import { Button, Space, Tree, Collapse, Divider, Message } from '@arco-design/web-react';
+import { Button, Space, Tree, Collapse, Divider, Message, Modal } from '@arco-design/web-react';
 import { IconLeft, IconPlus, IconEdit, IconDelete, IconLink, IconSend } from '@arco-design/web-react/icon';
 import styles from './style/testInstance.module.less';
 import { getComponentDesign } from '@/api/componentDevelopProcess';
-import { getComponentTestCaseList, submitTestCase } from '@/api/componentTestCase';
+import { getComponentTestCaseList, submitTestCase, deleteTestCase } from '@/api/componentTestCase';
 import TestCaseModal from './TestCaseModal';
 
 const CollapseItem = Collapse.Item;
@@ -15,6 +15,7 @@ const TestInstance = ({ instance, parentId, onBack }: { instance: any; parentId:
   const [modalVisible, setModalVisible] = useState(false);
   const [selectedOperationIdent, setSelectedOperationIdent] = useState('');
   const [activeOperationIdent, setActiveOperationIdent] = useState('');
+  const [editingTestCase, setEditingTestCase] = useState(null);
 
   const getDesign = async () => {
     const res: any = await getComponentDesign(parentId);
@@ -39,9 +40,38 @@ const TestInstance = ({ instance, parentId, onBack }: { instance: any; parentId:
 
   const handleAddTestCase = (operationIdent: string) => {
     setSelectedOperationIdent(operationIdent);
+    setEditingTestCase(null);
     setModalVisible(true);
   };
 
+  const handleEditTestCase = (testCase: any, operationIdent: string) => {
+    setSelectedOperationIdent(operationIdent);
+    setEditingTestCase(testCase);
+    setModalVisible(true);
+  };
+
+  const handleDeleteTestCase = (testCase: any) => {
+    Modal.confirm({
+      title: '确认删除',
+      content: `确定要删除测试用例"${testCase.testCaseName}"吗？`,
+      okText: '确定',
+      cancelText: '取消',
+      onOk: async () => {
+        try {
+          const res: any = await deleteTestCase(testCase.id);
+          if (res.code === 200) {
+            Message.success('删除成功');
+            getTestCaseList();
+          } else {
+            Message.error(res.msg || '删除失败');
+          }
+        } catch (error) {
+          Message.error('删除失败');
+        }
+      }
+    });
+  };
+
   const handleModalOk = async (values: any) => {
     const params = {
       ...values,
@@ -59,6 +89,7 @@ const TestInstance = ({ instance, parentId, onBack }: { instance: any; parentId:
 
   const handleModalCancel = () => {
     setModalVisible(false);
+    setEditingTestCase(null);
   };
 
   return (
@@ -149,8 +180,18 @@ const TestInstance = ({ instance, parentId, onBack }: { instance: any; parentId:
                         <span className={styles['item-text']}>{child.testCaseName}</span>
                         <div className={styles['item-actions']}>
                           <IconSend />
-                          <IconEdit />
-                          <IconDelete />
+                          <IconEdit
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              handleEditTestCase(child, item.operationIdent);
+                            }}
+                          />
+                          <IconDelete
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              handleDeleteTestCase(child);
+                            }}
+                          />
                         </div>
                       </div>
                     ))}
@@ -273,6 +314,7 @@ const TestInstance = ({ instance, parentId, onBack }: { instance: any; parentId:
         design={design.operates}
         visible={modalVisible}
         operationIdent={selectedOperationIdent}
+        editingData={editingTestCase}
         onCancel={handleModalCancel}
         onOk={handleModalOk}
       />}