ngskcloud
/
flow-playform-react
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(component): 添加组件代码初始化功能

Browse Source 
- 引入 codeInit API 并实现代码初始化逻辑
- 新增组件语言和类型选项配置
- 合并组件信息状态以统一管理
- 更新表单提交逻辑以支持新字段
- 禁用代码初始化按钮直到满足条件
- 移除旧的组件编码按钮入口
- 优化组件列表获取与状态同步逻辑
- 修复编辑模式下 logoUrl 的引用问题
- 调整 API 导入顺序并清理无用代码
- 改进消息提示逻辑与加载状态控制
master
钟良源 3 months ago
parent 8b2ca9083d
commit 1ab8b13299
3 changed files with 96 additions and 52 deletions
Show Stats Download Patch File Download Diff File

5
src/api/componentDevelopProcess.ts
Unescape Escape View File

@ -16,4 +16,9 @@ export function updateComponentDesign(params) {
// 获取组件基本信息
export function getComponentBaseInfo(componentBaseId) {
return axios.get(`${urlPrefix}/componentDevelopProcess/baseInfo?componentBaseId=${componentBaseId}`);
}
// 代码初始化
export function codeInit(componentBaseId) {
return axios.post(`${urlPrefix}/componentDevelopProcess/generate?componentBaseId=${componentBaseId}`);
}

133
src/pages/componentDevelopment/componentList/addComponentModal.tsx
Unescape Escape View File

@ -20,9 +20,16 @@ import EditorSection from '@/components/EditorSection';
import AddApiModal from '@/pages/componentDevelopment/componentList/addApiModal';
import CompReview from '@/pages/componentDevelopment/componentList/compReview';
import { getComponentClassify } from '@/api/componentClassify';
import { compProjectValidate, compSubmit, getTagList, copyAll } from '@/api/componentBase';
import {
compProjectValidate,
compSubmit,
getTagList,
copyAll,
getMyComponentList,
getCooperationComponentList
} from '@/api/componentBase';
import { copyDesign } from '@/api/componentMarket';
import { getComponentDesign, updateComponentDesign } from '@/api/componentDevelopProcess';
import { codeInit, getComponentDesign, updateComponentDesign } from '@/api/componentDevelopProcess';
const FormItem = Form.Item;
const Option = Select.Option;
@ -36,14 +43,27 @@ const AddComponentModal = ({ visible, baseInfo, setVisible, onReFresh, mode = 'c
const [classifyList, setClassifyList] = useState([]);
const [showSaveBtn, setShowSaveBtn] = useState(false);
const [tagsList, setTagsList] = useState([]);
const [componentData, setComponentData] = useState(null);
const [componentInfo, setComponentInfo] = useState(null); // 合并后的组件信息状态
const [componentDesignData, setComponentDesignData] = useState([]); // 新增状态用于存储接口设计数据
const [selectedApiData, setSelectedApiData] = useState(null); // 新增状态用于存储选中的API数据
const [showApiModal, setShowApiModal] = useState(false);
const [created, setCreated] = useState(false); // 是否提交了组件信息
const [codeInitLoading, setCodeInitLoading] = useState(false); // 代码初始化按钮 loading
const [file, setFile] = useState(null);
const [form] = Form.useForm();
// 组件语言选项
const codeLanguageOptions = [
{ label: 'Java:8', value: 'Java' },
{ label: 'Python:3.10.12', value: 'Python' }
];
// 组件类型选项
const componentTypeOptions = [
{ label: '普通组件', value: 'normal' },
{ label: '监听组件', value: 'loop' }
];
const cs = `arco-upload-list-item${file && file.status === 'error' ? ' is-error' : ''}`;
// 判断是否为复制模式
@ -91,14 +111,14 @@ const AddComponentModal = ({ visible, baseInfo, setVisible, onReFresh, mode = 'c
setSelectedApiData(record);
setShowApiModal(true);
}}
disabled={isCopyMode || (baseInfo && !['DEFAULT', 'DESIGN'].includes(baseInfo.componentStatus))}
disabled={isCopyMode || (componentInfo && !['DEFAULT', 'DESIGN'].includes(componentInfo.componentStatus))}
>
编辑
</Button>
<Button
type="text"
status="danger"
disabled={isCopyMode || (baseInfo && !['DEFAULT', 'DESIGN'].includes(baseInfo.componentStatus))}
disabled={isCopyMode || (componentInfo && !['DEFAULT', 'DESIGN'].includes(componentInfo.componentStatus))}
onClick={async () => {
// 显示删除确认框
Modal.confirm({
@ -111,7 +131,7 @@ const AddComponentModal = ({ visible, baseInfo, setVisible, onReFresh, mode = 'c
// 构造要提交的数据
const params = {
baseInfo: componentData || baseInfo,
baseInfo: componentInfo,
operates: updatedData // 保持数组格式
};
@ -202,37 +222,36 @@ const AddComponentModal = ({ visible, baseInfo, setVisible, onReFresh, mode = 'c
}
};
const onSubmit = async () => {
const onSubmit = async (showMessage = true) => {
try {
await form.validate();
const formData = form.getFields();
const params: any = {
...componentData,
...baseInfo,
...componentInfo,
name: formData.name,
projectId: formData.projectId,
logoUrl: selectedImage,
desc: description,
componentClassify: formData.componentClassify,
codeLanguage: formData.codeLanguage === 'Java:8' ? 'Java' : 'Python',
type: formData.type === '普通组件' ? 'normal' : 'loop',
codeLanguage: formData.codeLanguage, // 直接使用value值
type: formData.type, // 直接使用value值
tags: formData.tags
};
// 如果是编辑模式（baseInfo存在），则传递id
if (baseInfo && baseInfo.id) {
params.id = baseInfo.id;
// 如果是编辑模式（componentInfo存在），则传递id
if (componentInfo && componentInfo.id) {
params.id = componentInfo.id;
}
const res: any = await compSubmit(params);
if (res.code === 200) {
setComponentData(res.data);
setComponentInfo(res.data);
setShowSaveBtn(true);
Message.success(isEditMode ? '组件信息更新成功' : isCopyMode ? '组件复制成功' : '组件信息提交完成，可继续组件接口设计');
showMessage && Message.success(isEditMode ? '组件信息更新成功' : isCopyMode ? '组件复制成功' : '组件信息提交完成，可继续组件接口设计');
onReFresh();
// 最终保存成功后关闭弹窗
if (showSaveBtn) {
if (showSaveBtn && showMessage) {
setVisible(false);
return;
}
@ -245,13 +264,32 @@ const AddComponentModal = ({ visible, baseInfo, setVisible, onReFresh, mode = 'c
}
else {
Message.error(isEditMode ? '组件信息更新失败' : isCopyMode ? '组件复制失败' : '组件信息提交失败');
showMessage && Message.error(isEditMode ? '组件信息更新失败' : isCopyMode ? '组件复制失败' : '组件信息提交失败');
}
} catch (error) {
console.error('提交/更新失败:', error);
}
};
const fetchComponentData = async (extraParams: any = {}) => {
try {
const params = {
currPage: 1,
pageSize: 99,
...extraParams
};
const res: any = await getMyComponentList(params);
if (res.code === 200 && res.data.list.length > 0) {
setComponentInfo(res.data.list[0]);
getComponentDesignData(res.data.list[0].id);
}
} catch (error) {
console.error('获取组件列表失败:', error);
Message.error('获取组件列表失败');
}
};
const getComponentDesignData = async (componentBaseId) => {
try {
const res = await getComponentDesign(componentBaseId);
@ -279,14 +317,14 @@ const AddComponentModal = ({ visible, baseInfo, setVisible, onReFresh, mode = 'c
// 构造要提交的数据
const params = {
...baseInfo,
...componentInfo,
name: formData.name,
projectId: formData.projectId,
logoUrl: selectedImage,
desc: description,
componentClassify: formData.componentClassify,
codeLanguage: formData.codeLanguage === 'Java:8' ? 'Java' : 'Python',
type: formData.type === '普通组件' ? 'normal' : 'loop',
codeLanguage: formData.codeLanguage, // 直接使用value值
type: formData.type, // 直例使用value值
tags: formData.tags
};
@ -313,14 +351,14 @@ const AddComponentModal = ({ visible, baseInfo, setVisible, onReFresh, mode = 'c
// 构造要提交的数据
const params = {
...baseInfo,
...componentInfo,
name: formData.name,
projectId: formData.projectId,
logoUrl: selectedImage,
desc: description,
componentClassify: formData.componentClassify,
codeLanguage: formData.codeLanguage === 'Java:8' ? 'Java' : 'Python',
type: formData.type === '普通组件' ? 'normal' : 'loop',
codeLanguage: formData.codeLanguage, // 直接使用value值
type: formData.type, // 直接使用value값
tags: formData.tags
};
@ -339,6 +377,18 @@ const AddComponentModal = ({ visible, baseInfo, setVisible, onReFresh, mode = 'c
}
};
const handleCodeInit = async () => {
setCodeInitLoading(true);
Message.warning('代码初始化中');
const res: any = await codeInit(componentInfo?.id);
setCodeInitLoading(false);
if (res.code === 200) {
Message.success('代码初始化完成');
fetchComponentData({ id: componentInfo?.id });
}
else Message.error(res.message || '代码初始化失败');
};
useEffect(() => {
getComponentClassifyList();
getTageList();
@ -361,6 +411,7 @@ const AddComponentModal = ({ visible, baseInfo, setVisible, onReFresh, mode = 'c
setSelectedImage(baseInfo.logoUrl || '');
setDescription(baseInfo.desc || '');
setShowSaveBtn(true);
setComponentInfo(baseInfo);
// 获取组件设计数据
if (isEditMode || isCopyMode) {
@ -378,7 +429,7 @@ const AddComponentModal = ({ visible, baseInfo, setVisible, onReFresh, mode = 'c
setDescription('');
setShowSaveBtn(false);
setComponentDesignData([]); // 清空接口设计数据
setComponentData(null);
setComponentInfo(null);
}
}, [baseInfo, visible, form, isEditMode, isCopyMode, isCreateMode]);
@ -419,8 +470,8 @@ const AddComponentModal = ({ visible, baseInfo, setVisible, onReFresh, mode = 'c
};
const UploadImage = () => {
// 如果是编辑模式且有baseInfo.logoUrl，则使用baseInfo中的logoUrl
const initialImageUrl = baseInfo && baseInfo.logoUrl ? baseInfo.logoUrl : null;
// 如果是编辑模式且有componentInfo.logoUrl，则使用componentInfo中的logoUrl
const initialImageUrl = componentInfo && componentInfo.logoUrl ? componentInfo.logoUrl : null;
return (
<Upload
@ -589,9 +640,9 @@ const AddComponentModal = ({ visible, baseInfo, setVisible, onReFresh, mode = 'c
style={{ width: '90%' }}
disabled={created || isEditMode || isCopyMode}
>
{['Java:8', 'Python:3.10.12'].map((option, index) => (
<Option key={option} disabled={index === 3} value={option}>
{option}
{codeLanguageOptions.map((option) => (
<Option key={option.value} value={option.value}>
{option.label}
</Option>
))}
</Select>
@ -632,9 +683,9 @@ const AddComponentModal = ({ visible, baseInfo, setVisible, onReFresh, mode = 'c
style={{ width: '90%' }}
disabled={created || isEditMode}
>
{['普通组件', '监听组件'].map((option, index) => (
<Option key={option} value={option}>
{option}
{componentTypeOptions.map((option) => (
<Option key={option.value} value={option.value}>
{option.label}
</Option>
))}
</Select>
@ -657,11 +708,9 @@ const AddComponentModal = ({ visible, baseInfo, setVisible, onReFresh, mode = 'c
size="small"
type="secondary"
style={{ borderRadius: 5 }}
disabled={!componentDesignData || componentDesignData.length === 0}
onClick={() => {
// TODO: 实现代码初始化逻辑
console.log('代码初始化');
}}
loading={codeInitLoading}
disabled={(!componentDesignData || componentDesignData.length === 0) || componentInfo && !['DEFAULT', 'DESIGN'].includes(componentInfo.componentStatus)}
onClick={() => handleCodeInit()}
>
代码初始化
</Button>
@ -673,7 +722,7 @@ const AddComponentModal = ({ visible, baseInfo, setVisible, onReFresh, mode = 'c
setSelectedApiData(null); // 确保新增时清空选中的API数据
setShowApiModal(true);
}}
disabled={baseInfo && !['DEFAULT', 'DESIGN'].includes(baseInfo.componentStatus)}
disabled={componentInfo && !['DEFAULT', 'DESIGN'].includes(componentInfo.componentStatus)}
>
+ 新增接口
</Button>
@ -684,13 +733,13 @@ const AddComponentModal = ({ visible, baseInfo, setVisible, onReFresh, mode = 'c
<AddApiModal
visible={showApiModal}
baseInfo={componentData || baseInfo}
baseInfo={componentInfo}
componentDesignProgress={selectedApiData} // 添加这一行
componentDesignData={componentDesignData}
onUpdateComponentDesign={(params) => {
// 更新成功后重新获取组件设计数据
if ((componentData && componentData.id) || (baseInfo && baseInfo.id)) {
getComponentDesignData(componentData?.id || baseInfo.id);
if (componentInfo && componentInfo.id) {
getComponentDesignData(componentInfo.id);
}
}}
onCancel={() => {

10
src/pages/componentDevelopment/componentList/handleButtonGroup.tsx
Unescape Escape View File

@ -132,16 +132,6 @@ const HandleButtonGroup: React.FC<HandleButtonGroupProps> = ({
</Button>
)}
{/* 组件编码 */}
{isEligible([componentStatusConstant.CODING], row.componentStatus) ? (
<Button
type="text"
onClick={() => onNavTo(row.id, '逻辑编码')}
>
组件编码
</Button>
) : null}
{/* 查看源码 */}
{isEligible(
[componentStatusConstant.CODING, componentStatusConstant.DEPLOYED, componentStatusConstant.PUBLISHED],

Write Preview
Loading…
Cancel
Save