diff --git a/src/pages/componentDevelopment/componentList/addApiModal.tsx b/src/pages/componentDevelopment/componentList/addApiModal.tsx
index 8e628d4..7ad81bc 100644
--- a/src/pages/componentDevelopment/componentList/addApiModal.tsx
+++ b/src/pages/componentDevelopment/componentList/addApiModal.tsx
@@ -6,7 +6,15 @@ import { updateComponentDesign } from '@/api/componentDevelopProcess';
const FormItem = Form.Item;
const TextArea = Input.TextArea;
-const AddApiModal = ({ visible, baseInfo, componentDesignProgress, componentDesignData, onUpdateComponentDesign, onCancel, onOk }) => {
+const AddApiModal = ({
+ visible,
+ baseInfo,
+ componentDesignProgress,
+ componentDesignData,
+ onUpdateComponentDesign,
+ onCancel,
+ onOk
+ }) => {
const [form] = Form.useForm();
const [parametersData, setParametersData] = useState([]);
const [responsesData, setResponsesData] = useState([]);
@@ -27,6 +35,9 @@ const AddApiModal = ({ visible, baseInfo, componentDesignProgress, componentDesi
...param
})));
}
+ else {
+ setParametersData([]);
+ }
// 设置响应表格数据
if (componentDesignProgress.responses && Array.isArray(componentDesignProgress.responses)) {
@@ -35,6 +46,9 @@ const AddApiModal = ({ visible, baseInfo, componentDesignProgress, componentDesi
...response
})));
}
+ else {
+ setResponsesData([]);
+ }
}
else if (visible) {
// 重置表单和表格数据
@@ -48,7 +62,7 @@ const AddApiModal = ({ visible, baseInfo, componentDesignProgress, componentDesi
try {
await form.validate();
const formData = form.getFields();
-
+
// 构造要提交的数据
const params = {
baseInfo
@@ -69,9 +83,10 @@ const AddApiModal = ({ visible, baseInfo, componentDesignProgress, componentDesi
}
return item;
});
-
+
params['operates'] = updatedOperates;
- } else if (componentDesignData && Array.isArray(componentDesignData)) {
+ }
+ else if (componentDesignData && Array.isArray(componentDesignData)) {
// 新增模式,将新记录添加到现有数据中
const newOperate = {
...formData,
@@ -79,9 +94,10 @@ const AddApiModal = ({ visible, baseInfo, componentDesignProgress, componentDesi
parameters: parametersData,
responses: responsesData
};
-
+
params['operates'] = [...componentDesignData, newOperate];
- } else {
+ }
+ else {
// 没有现有数据时,创建包含单个元素的数组
params['operates'] = [{
...formData,
@@ -90,7 +106,7 @@ const AddApiModal = ({ visible, baseInfo, componentDesignProgress, componentDesi
responses: responsesData
}];
}
-
+
const res: any = await updateComponentDesign(params);
if (res.code === 200) {
@@ -137,10 +153,16 @@ const AddApiModal = ({ visible, baseInfo, componentDesignProgress, componentDesi
-
+
-
+
diff --git a/src/pages/componentDevelopment/componentList/addComponentModal.tsx b/src/pages/componentDevelopment/componentList/addComponentModal.tsx
index 1c0377e..d01eb2d 100644
--- a/src/pages/componentDevelopment/componentList/addComponentModal.tsx
+++ b/src/pages/componentDevelopment/componentList/addComponentModal.tsx
@@ -88,7 +88,7 @@ const AddComponentModal = ({ visible, baseInfo, setVisible, onReFresh }) => {
title: '确认删除',
content: `确定要删除接口 "${record.ident}" 吗?此操作不可恢复。`,
okButtonProps: { status: 'danger' },
- onOk: () => {
+ onOk: async () => {
// 从 componentDesignData 中过滤掉要删除的记录
const updatedData = componentDesignData.filter(item => item.ident !== record.ident);
@@ -99,7 +99,7 @@ const AddComponentModal = ({ visible, baseInfo, setVisible, onReFresh }) => {
};
// 调用接口更新数据
- const res: any = updateComponentDesign(params);
+ const res: any = await updateComponentDesign(params);
try {
if (res.code === 200) {
Message.success('删除成功');
@@ -191,6 +191,8 @@ const AddComponentModal = ({ visible, baseInfo, setVisible, onReFresh }) => {
await form.validate();
const formData = form.getFields();
const params: any = {
+ ...componentData,
+ ...baseInfo,
name: formData.name,
projectId: formData.projectId,
logoUrl: selectedImage,
@@ -213,10 +215,17 @@ const AddComponentModal = ({ visible, baseInfo, setVisible, onReFresh }) => {
Message.success(baseInfo ? '组件信息更新成功' : '组件信息提交完成,可继续组件接口设计');
onReFresh();
+ // 最终保存成功后关闭弹窗
+ if (showSaveBtn) {
+ setVisible(false);
+ return;
+ }
+
// 提交成功后获取组件设计数据
if (res.data && res.data.id) {
getComponentDesignData(res.data.id);
}
+
}
else {
Message.error(baseInfo ? '组件信息更新失败' : '组件信息提交失败');
@@ -263,6 +272,7 @@ const AddComponentModal = ({ visible, baseInfo, setVisible, onReFresh }) => {
});
// 设置其他状态
+
setSelectedImage(baseInfo.logoUrl || '');
setDescription(baseInfo.desc || '');
setShowSaveBtn(true);
@@ -277,6 +287,7 @@ const AddComponentModal = ({ visible, baseInfo, setVisible, onReFresh }) => {
setDescription('');
setShowSaveBtn(false);
setComponentDesignData([]); // 清空接口设计数据
+ setComponentData(null);
}
}, [baseInfo, visible, form]);
diff --git a/src/pages/componentDevelopment/componentList/editableTable.tsx b/src/pages/componentDevelopment/componentList/editableTable.tsx
index dca2ed8..e50093a 100644
--- a/src/pages/componentDevelopment/componentList/editableTable.tsx
+++ b/src/pages/componentDevelopment/componentList/editableTable.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
import { Button, Table, Input, Select, Modal, Message } from '@arco-design/web-react';
// 定义数据类型选项
@@ -66,9 +66,21 @@ function EditableCell({ value, onChange, columnType, record, dataIndex }) {
return {value};
}
-function EditableTable({ onDataUpdate }) {
+function EditableTable({ onDataUpdate, initialData = [] }) {
const [data, setData] = useState([]);
+ // 当初始数据变化时,更新表格数据
+ useEffect(() => {
+ if (initialData && Array.isArray(initialData) && initialData.length > 0) {
+ // 为每个数据项添加唯一的 key
+ const dataWithKeys = initialData.map((item, index) => ({
+ key: item.key || item.id || `key_${index}`,
+ ...item
+ }));
+ setData(dataWithKeys);
+ }
+ }, [initialData]);
+
const handleValueChange = (key, dataIndex, value) => {
const newData = data.map(item => {
if (item.key === key) {