feat(component): 实现组件接口的增删改功能

src/pages/componentDevelopment/componentList/addApiModal.tsx

@@ -6,7 +6,7 @@ import { updateComponentDesign } from '@/api/componentDevelopProcess';
 const FormItem = Form.Item;
 const TextArea = Input.TextArea;
 
-const AddApiModal = ({ visible, baseInfo, componentDesignProgress, onCancel, onOk }) => {
+const AddApiModal = ({ visible, baseInfo, componentDesignProgress, componentDesignData, onUpdateComponentDesign, onCancel, onOk }) => {
   const [form] = Form.useForm();
   const [parametersData, setParametersData] = useState([]);
   const [responsesData, setResponsesData] = useState([]);
@@ -48,20 +48,45 @@ const AddApiModal = ({ visible, baseInfo, componentDesignProgress, onCancel, onO
     try {
       await form.validate();
       const formData = form.getFields();
+      
+      // 构造要提交的数据
       const params = {
         baseInfo
       };
 
-      params['operates'] = {
-        ...formData,
-        type: 'EVENT',
-        parameters: parametersData,
-        responses: responsesData
-      };
+      // 如果是编辑模式且有完整的组件设计数据，需要更新对应的记录
+      if (componentDesignProgress && componentDesignData && Array.isArray(componentDesignData)) {
+        // 更新对应的记录
+        const updatedOperates = componentDesignData.map(item => {
+          if (item.ident === componentDesignProgress.ident) {
+            // 更新记录
+            return {
+              ...formData,
+              type: 'EVENT',
+              parameters: parametersData,
+              responses: responsesData
+            };
+          }
+          return item;
+        });
+        
+        params['operates'] = updatedOperates;
+      } else {
+        // 新增模式或没有提供完整数据时，只提交当前表单数据
+        params['operates'] = {
+          ...formData,
+          type: 'EVENT',
+          parameters: parametersData,
+          responses: responsesData
+        };
+      }
+      
       const res: any = await updateComponentDesign(params);
 
       if (res.code === 200) {
-        Message.success('新增成功');
+        Message.success(componentDesignProgress ? '更新成功' : '新增成功');
+        // 调用父组件传递的 onUpdateComponentDesign 回调，用于更新父组件中的数据
+        onUpdateComponentDesign && onUpdateComponentDesign(params);
       }
       else {
         Message.error(res.message);

src/pages/componentDevelopment/componentList/addComponentModal.tsx

@@ -20,7 +20,7 @@ import EditorSection from '@/components/EditorSection';
 import AddApiModal from '@/pages/componentDevelopment/componentList/addApiModal';
 import { getComponentClassify } from '@/api/componentClassify';
 import { compProjectValidate, compSubmit, getTagList } from '@/api/componentBase';
-import { getComponentDesign } from '@/api/componentDevelopProcess';
+import { getComponentDesign, updateComponentDesign } from '@/api/componentDevelopProcess';
 
 const FormItem = Form.Item;
 const Option = Select.Option;
@@ -69,14 +69,63 @@ const AddComponentModal = ({ visible, baseInfo, setVisible, onReFresh }) => {
     {
       title: '操作',
       dataIndex: 'op',
+      width: 240,
       render: (_, record) => (
-        <Button type="text" onClick={() => {
-          // 设置选中的API数据，用于编辑时回显
-          setSelectedApiData(record);
-          setShowApiModal(true);
-        }}>
-          编辑
-        </Button>
+        <>
+          <Button type="text" onClick={() => {
+            // 设置选中的API数据，用于编辑时回显
+            setSelectedApiData(record);
+            setShowApiModal(true);
+          }}>
+            编辑
+          </Button>
+          <Button
+            type="text"
+            status="danger"
+            onClick={() => {
+              // 显示删除确认框
+              Modal.confirm({
+                title: '确认删除',
+                content: `确定要删除接口 "${record.ident}" 吗？此操作不可恢复。`,
+                okButtonProps: { status: 'danger' },
+                onOk: () => {
+                  // 从 componentDesignData 中过滤掉要删除的记录
+                  const updatedData = componentDesignData.filter(item => item.ident !== record.ident);
+                  setComponentDesignData(updatedData);
+
+                  // 构造要提交的数据
+                  const params = {
+                    baseInfo: componentData || baseInfo,
+                    operates: updatedData
+                  };
+
+                  // 调用接口更新数据
+                  updateComponentDesign(params).then((res: any) => {
+                    if (res.code === 200) {
+                      Message.success('删除成功');
+                      // 重新获取组件设计数据以更新表格
+                      if ((componentData && componentData.id) || (baseInfo && baseInfo.id)) {
+                        getComponentDesignData(componentData?.id || baseInfo.id);
+                      }
+                    }
+                    else {
+                      Message.error(res.message || '删除失败');
+                      // 删除失败时恢复数据
+                      setComponentDesignData(componentDesignData);
+                    }
+                  }).catch(error => {
+                    console.error('删除失败:', error);
+                    Message.error('删除失败');
+                    // 删除失败时恢复数据
+                    setComponentDesignData(componentDesignData);
+                  });
+                }
+              });
+            }}
+          >
+            删除
+          </Button>
+        </>
       )
     }
   ];
@@ -485,10 +534,10 @@ const AddComponentModal = ({ visible, baseInfo, setVisible, onReFresh }) => {
             <p> 组件接口</p>
             <Space split={<Divider type="vertical" />}>
               <Button size="small" type="secondary" style={{ borderRadius: 5 }} disabled={true}>代码初始化</Button>
-              <Button 
-                size="mini" 
-                type="primary" 
-                style={{ borderRadius: 5 }} 
+              <Button
+                size="mini"
+                type="primary"
+                style={{ borderRadius: 5 }}
                 onClick={() => {
                   setSelectedApiData(null); // 确保新增时清空选中的API数据
                   setShowApiModal(true);
@@ -505,6 +554,13 @@ const AddComponentModal = ({ visible, baseInfo, setVisible, onReFresh }) => {
             visible={showApiModal}
             baseInfo={componentData || baseInfo}
             componentDesignProgress={selectedApiData} // 添加这一行
+            componentDesignData={componentDesignData}
+            onUpdateComponentDesign={(params) => {
+              // 更新成功后重新获取组件设计数据
+              if ((componentData && componentData.id) || (baseInfo && baseInfo.id)) {
+                getComponentDesignData(componentData?.id || baseInfo.id);
+              }
+            }}
             onCancel={() => {
               setShowApiModal(false);
               setSelectedApiData(null); // 重置选中的API数据
@@ -512,10 +568,6 @@ const AddComponentModal = ({ visible, baseInfo, setVisible, onReFresh }) => {
             onOk={() => {
               setShowApiModal(false);
               setSelectedApiData(null); // 重置选中的API数据
-              // 重新获取组件设计数据以更新表格
-              if ((componentData && componentData.id) || (baseInfo && baseInfo.id)) {
-                getComponentDesignData(componentData?.id || baseInfo.id);
-              }
             }}
           />
         </div>}