From 44569a0e5ae31bd60f865cfb8a2ea1709ed0b74f Mon Sep 17 00:00:00 2001 From: ZLY Date: Tue, 11 Nov 2025 16:46:11 +0800 Subject: [PATCH] =?UTF-8?q?feat(component):=20=E6=B7=BB=E5=8A=A0=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E5=A4=8D=E5=88=B6=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 引入 copyDesign 和 copyAll API 接口 - 新增组件模式类型定义 (create/edit/copy) - 实现仅复制设计和复制设计及代码功能 - 添加复制模式下表单初始化逻辑- 更新模态框标题和按钮状态判断 - 禁用复制模式下的部分表单字段 - 优化组件接口设计区域显示逻辑 -修复关闭模态框时未重置模式的问题 - 调整编辑和复制模式下的项目ID处理逻辑 --- src/api/componentBase.ts | 5 + src/api/componentMarket.ts | 5 + .../componentList/addComponentModal.tsx | 147 +++++++++++++++--- .../componentList/index.tsx | 16 +- 4 files changed, 147 insertions(+), 26 deletions(-) diff --git a/src/api/componentBase.ts b/src/api/componentBase.ts index bbedc32..3a7c0bf 100644 --- a/src/api/componentBase.ts +++ b/src/api/componentBase.ts @@ -36,4 +36,9 @@ export const remove = (ids) => { // 组件导出 export const exportComponent = (id) => { return axios.get(`${urlPrefix}/componentBase/export?id=${id}`); +}; + +// 复制代码和设计 +export const copyAll = (params) => { + return axios.post(`${urlPrefix}/componentBase/copy`, params); }; \ No newline at end of file diff --git a/src/api/componentMarket.ts b/src/api/componentMarket.ts index 446b4e9..423374a 100644 --- a/src/api/componentMarket.ts +++ b/src/api/componentMarket.ts @@ -7,4 +7,9 @@ const urlPrefix = '/api/v1/bpms-workbench'; // 组件审核列表 export function getReviewGroupByNew(params: ReviewGroup) { return axios.get(`${urlPrefix}/componentMarket/reviewGroupByNew`, { params }); +} + +// 复制组件设计 +export function copyDesign(params) { + return axios.post(`${urlPrefix}/componentMarket/copyDesign`, params); } \ No newline at end of file diff --git a/src/pages/componentDevelopment/componentList/addComponentModal.tsx b/src/pages/componentDevelopment/componentList/addComponentModal.tsx index d292f42..d89fe48 100644 --- a/src/pages/componentDevelopment/componentList/addComponentModal.tsx +++ b/src/pages/componentDevelopment/componentList/addComponentModal.tsx @@ -19,14 +19,17 @@ import styles from './style/addComponentModal.module.less'; 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 { compProjectValidate, compSubmit, getTagList, copyAll } from '@/api/componentBase'; +import { copyDesign } from '@/api/componentMarket'; import { getComponentDesign, updateComponentDesign } from '@/api/componentDevelopProcess'; const FormItem = Form.Item; const Option = Select.Option; +// 定义组件模式类型 +type ComponentMode = 'create' | 'edit' | 'copy'; -const AddComponentModal = ({ visible, baseInfo, setVisible, onReFresh }) => { +const AddComponentModal = ({ visible, baseInfo, setVisible, onReFresh, mode = 'create' }) => { const [selectedImage, setSelectedImage] = useState(''); const [description, setDescription] = useState(''); const [classifyList, setClassifyList] = useState([]); @@ -42,6 +45,13 @@ const AddComponentModal = ({ visible, baseInfo, setVisible, onReFresh }) => { const cs = `arco-upload-list-item${file && file.status === 'error' ? ' is-error' : ''}`; + // 判断是否为复制模式 + const isCopyMode = mode === 'copy'; + // 判断是否为编辑模式 + const isEditMode = mode === 'edit'; + // 判断是否为创建模式 + const isCreateMode = mode === 'create'; + const columns: TableColumnProps[] = [ { title: '接口名称', @@ -80,14 +90,14 @@ const AddComponentModal = ({ visible, baseInfo, setVisible, onReFresh }) => { setSelectedApiData(record); setShowApiModal(true); }} - disabled={baseInfo && !['DEFAULT', 'DESIGN'].includes(baseInfo.componentStatus)} + disabled={isCopyMode || (baseInfo && !['DEFAULT', 'DESIGN'].includes(baseInfo.componentStatus))} > 编辑 - {showSaveBtn ? ( + {isCopyMode ? ( + <> + + + + ) : showSaveBtn ? ( @@ -373,7 +473,7 @@ const AddComponentModal = ({ visible, baseInfo, setVisible, onReFresh }) => { return ( { setDescription(''); setShowSaveBtn(false); setFile(null); + setCreated(false); }} >
@@ -440,7 +541,7 @@ const AddComponentModal = ({ visible, baseInfo, setVisible, onReFresh }) => { style={{ width: '90%' }} allowClear placeholder="请输入代码标识" - disabled={created || baseInfo} + disabled={created || isEditMode} onChange={(e) => validateProjectId(e)} /> @@ -486,7 +587,7 @@ const AddComponentModal = ({ visible, baseInfo, setVisible, onReFresh }) => { {['普通组件', '监听组件'].map((option, index) => ( - ))} @@ -548,7 +649,7 @@ const AddComponentModal = ({ visible, baseInfo, setVisible, onReFresh }) => { - {showSaveBtn &&
+ {showSaveBtn && !isCopyMode &&

组件接口

}> diff --git a/src/pages/componentDevelopment/componentList/index.tsx b/src/pages/componentDevelopment/componentList/index.tsx index 8d3dca3..bdc440d 100644 --- a/src/pages/componentDevelopment/componentList/index.tsx +++ b/src/pages/componentDevelopment/componentList/index.tsx @@ -30,6 +30,7 @@ const GlobalVarContainer = () => { }); const [loading, setLoading] = useState(false); const [visible, setVisible] = useState(false); + const [mode, setMode] = useState<'create' | 'edit' | 'copy'>('create'); // 添加模式状态 const menuItems = [ { @@ -170,10 +171,12 @@ const GlobalVarContainer = () => { onShowEdit={(row, index) => { setSelectComponent(row); setVisible(true); + setMode('edit'); // 设置模式为复制 }} onCopyHandler={(row) => { - // TODO: 实现组件复制逻辑 - console.log('Copy handler', row); + setSelectComponent(row); + setVisible(true); + setMode('copy'); // 设置模式为复制 }} onShareCollaboration={(row) => { // TODO: 实现分享协作逻辑 @@ -356,8 +359,15 @@ const GlobalVarContainer = () => { { + setVisible(visible); + // 当关闭模态框时重置模式为create + if (!visible) { + setMode('create'); + } + }} onReFresh={fetchComponentData} + mode={mode} // 传递模式 /> );