From c986114e750f7b90e097fa25e8c4cfff5517543f Mon Sep 17 00:00:00 2001 From: ZLY Date: Fri, 7 Nov 2025 17:34:41 +0800 Subject: [PATCH] =?UTF-8?q?feat(component):=20=E6=96=B0=E5=A2=9E=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E8=A1=A8=E5=8D=95=E4=B8=8E=E6=8F=90=E4=BA=A4=E5=8A=9F?= =?UTF-8?q?=E8=83=BD(=E6=8E=A5=E5=8F=A3=E8=AE=BE=E8=AE=A1=E6=9C=AA?= =?UTF-8?q?=E5=AE=8C=E6=88=90)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/componentBase.ts | 12 + .../componentList/addComponentModal.tsx | 331 ++++++++++++++++-- .../componentList/index.tsx | 11 +- .../style/addComponentModal.module.less | 12 + 4 files changed, 325 insertions(+), 41 deletions(-) diff --git a/src/api/componentBase.ts b/src/api/componentBase.ts index 1710f92..ea7ad53 100644 --- a/src/api/componentBase.ts +++ b/src/api/componentBase.ts @@ -6,4 +6,16 @@ const urlPrefix = '/api/v1/bpms-workbench'; // 我的组件 export function getMyComponentList(params) { return axios.get(`${urlPrefix}/componentBase/list`, { params }); +} + +export function getTagList() { + return axios.get(`${urlPrefix}/componentBase/tags`); +} + +export function compProjectValidate(projectId) { + return axios.post(`${urlPrefix}/componentBase/validate?projectId=${projectId}`); +} + +export function compSubmit(params) { + return axios.post(`${urlPrefix}/componentBase/submit`, params); } \ No newline at end of file diff --git a/src/pages/componentDevelopment/componentList/addComponentModal.tsx b/src/pages/componentDevelopment/componentList/addComponentModal.tsx index 7bb2a94..4ddb90f 100644 --- a/src/pages/componentDevelopment/componentList/addComponentModal.tsx +++ b/src/pages/componentDevelopment/componentList/addComponentModal.tsx @@ -1,9 +1,29 @@ -import React, { useState } from 'react'; -import { Modal, Form, Input, Grid, Space, Divider, Button, Table, TableColumnProps } from '@arco-design/web-react'; +import React, { useEffect, useState } from 'react'; +import { + Modal, + Form, + Input, + Grid, + Space, + Divider, + Button, + Table, + TableColumnProps, + Select, + Message, + Upload, + Progress +} from '@arco-design/web-react'; +import { IconPlus, IconEdit } from '@arco-design/web-react/icon'; import styles from './style/addComponentModal.module.less'; import Cover from '@/pages/scene/cover'; +import EditorSection from '@/components/EditorSection'; +import { getComponentClassify } from '@/api/componentClassify'; +import { compProjectValidate, compSubmit, getTagList } from '@/api/componentBase'; const FormItem = Form.Item; +const Option = Select.Option; + const columns: TableColumnProps[] = [ { @@ -34,32 +54,177 @@ const data = [ ]; -const AddComponentModal = ({ visible, setVisible }) => { +const AddComponentModal = ({ visible, setVisible, onReFresh }) => { const [selectedImage, setSelectedImage] = useState(''); + const [description, setDescription] = useState(''); + const [classifyList, setClassifyList] = useState([]); + const [showSaveBtn, setShowSaveBtn] = useState(false); + const [tagsList, setTagsList] = useState([]); + const [componentData, setComponentData] = useState({}); + const [file, setFile] = useState(null); const [form] = Form.useForm(); - const transformImageUrl = (image: string) => { - if (!image) return; - if (image.includes('/')) setSelectedImage(image.split('/')[image.split('/').length - 1]); - else setSelectedImage(image); + const cs = `arco-upload-list-item${file && file.status === 'error' ? ' is-error' : ''}`; + + + const getComponentClassifyList = async () => { + const res: any = await getComponentClassify('component'); + if (res.code === 200) { + const data = []; + res.data.forEach((item) => { + data.push({ + label: item.classifyName, + value: item.id + }); + }); + setClassifyList(data); + } + }; + + const getTageList = async () => { + const res: any = await getTagList(); + if (res.code === 200) setTagsList(res.data); + }; + + const validateProjectId = async (projectId: string) => { + if (!projectId) return; + + try { + const res = await compProjectValidate(projectId); + if (res.data === false) { + // 项目标识已存在，设置表单字段错误 + form.setFields({ + projectId: { + value: projectId, + error: { + message: '项目标识已存在' + } + } + }); + } + else { + // 项目标识可用，清除错误 + form.setFields({ + projectId: { + value: projectId, + error: null + } + }); + } + } catch (error) { + // API调用出错 + form.setFields({ + projectId: { + value: projectId, + error: { + message: '验证项目标识时发生错误' + } + } + }); + } + }; + + const onSubmit = async () => { + try { + await form.validate(); + const formData = form.getFields(); + const params = { + 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', + tags: formData.tags + }; + const res: any = await compSubmit(params); + if (res.code === 200) { + setComponentData(res.data); + setShowSaveBtn(true); + Message.success('组件信息提交完成，可继续组件接口设计'); + onReFresh(); + } + else { + Message.error('组件信息提交失败'); + } + } catch (error) { + + } }; + useEffect(() => { + getComponentClassifyList(); + getTageList(); + }, []); + const modalFooter = () => { return ( - - - + + {showSaveBtn && + } + {!showSaveBtn && } ); }; + + const UploadImage = () => { + return ( + { + setFile({ + ...currentFile, + url: URL.createObjectURL(currentFile.originFile) + }); + if (currentFile.status === 'done') setSelectedImage(currentFile.response.data.link); + }} + onProgress={(currentFile) => { + setFile(currentFile); + }} + > +
+ {file && file.url ? ( +
+ +
+ +
+ {file.status === 'uploading' && file.percent < 100 && ( + + )} +
+ ) : ( +
+
+ +
+
+ )} +
+ + ); + }; + return ( setVisible(false)} - onCancel={() => setVisible(false)} autoFocus={false} focusLock={true} style={{ width: '60%' }} @@ -68,12 +233,8 @@ const AddComponentModal = ({ visible, setVisible }) => {
- - transformImageUrl(selectedImage)} - /> + +
{ border: '1px solid #dcdfe6', borderRadius: 5 }} - >组件外壳
@@ -91,53 +251,152 @@ const AddComponentModal = ({ visible, setVisible }) => {
- + - - + + validateProjectId(e)} + /> - - + + - - + + - - + + - - + + - - 富文本编辑器 - + +
+
描述：
+ +
-
+ + {showSaveBtn &&

组件接口

- + }> + + +
- + } ); diff --git a/src/pages/componentDevelopment/componentList/index.tsx b/src/pages/componentDevelopment/componentList/index.tsx index 520b443..88dc77b 100644 --- a/src/pages/componentDevelopment/componentList/index.tsx +++ b/src/pages/componentDevelopment/componentList/index.tsx @@ -93,12 +93,12 @@ const GlobalVarContainer = () => { pageSize: pagination.pageSize }); - setComponentData(res.list); + setComponentData(res.data.list); setPagination({ - totalCount: res.totalCount, - pageSize: res.pageSize, - totalPage: res.totalPage, - currPage: res.currPage + totalCount: res.data.totalCount, + pageSize: res.data.pageSize, + totalPage: res.data.totalPage, + currPage: res.data.currPage }); } catch (error) { console.error('获取组件列表失败:', error); @@ -201,6 +201,7 @@ const GlobalVarContainer = () => { ); diff --git a/src/pages/componentDevelopment/componentList/style/addComponentModal.module.less b/src/pages/componentDevelopment/componentList/style/addComponentModal.module.less index 4ef4d57..a884c5c 100644 --- a/src/pages/componentDevelopment/componentList/style/addComponentModal.module.less +++ b/src/pages/componentDevelopment/componentList/style/addComponentModal.module.less @@ -31,6 +31,18 @@ border: 1px solid transparent; border-top-left-radius: 5px; border-bottom-left-radius: 5px; + + .markdown-label { + font-size: 14px; + white-space: normal; + color: var(--color-text-2); + margin-bottom: 6px; + } + + .markdown-editor { + padding-left: 50px; + padding-right: 40px; + } } }