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

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

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

Write Preview
Loading…
Cancel
Save