diff --git a/src/pages/ideContainer/sideBar.tsx b/src/pages/ideContainer/sideBar.tsx index 1f815f5..c96c285 100644 --- a/src/pages/ideContainer/sideBar.tsx +++ b/src/pages/ideContainer/sideBar.tsx @@ -1,21 +1,30 @@ import React, { useEffect, useState } from 'react'; import styles from './style/sideBar.module.less'; -import { IconApps } from '@arco-design/web-react/icon'; +import { + ResizeBox, + Tree, + Input, + Button, + Modal, + Form, + Message, + Dropdown, + Menu, + Popconfirm +} from '@arco-design/web-react'; +import { IconApps, IconMore } from '@arco-design/web-react/icon'; import { menuData1, menuData2 } from './config/menuData'; -import { ResizeBox, Tree, Input, Button, Modal, Form, Checkbox, Message } from '@arco-design/web-react'; import { IconSearch, IconPlus } from '@arco-design/web-react/icon'; import { Selected } from '@/pages/ideContainer/types'; import { useDispatch, useSelector } from 'react-redux'; import { updateMenuData, updateFlowData } from '@/store/ideContainer'; -import { addApp, getProjectEnv } from '@/api/apps'; +import { addApp, getProjectEnv, editApp, deleteApp } from '@/api/apps'; import _ from 'lodash'; -import Cover from '@/pages/scene/cover'; -import ConfigTable from '@/pages/scene/configTable'; -import { addScene, editScene } from '@/api/scene'; const TreeNode = Tree.Node; const FormItem = Form.Item; const TextArea = Input.TextArea; +const MenuItem = Menu.Item; interface MenuItemType { title: string; @@ -41,42 +50,54 @@ const compTypeMap = { }; -const AddModal = ({ visible, onChangeVisible, onClose, onRefresh }) => { +const AppHandleModal = ({ appInfo, visible, type, onChangeVisible, onClose, onRefresh }) => { const { info } = useSelector(state => state.ideContainer); const [form] = Form.useForm(); + if (appInfo) { + form.setFieldsValue({ + id: appInfo?.id, + name: appInfo?.name, + description: appInfo?.description, + published: appInfo?.published === 1, + logo: 'scene04.png', // 先写死 + sceneId: info.id + }); + } + const onOk = async () => { await form.validate(); const formData = form.getFields(); - // 新增应用的入参 - const params = { - description: formData.description, - name: formData.name, - logo: 'scene04.png', // 先写死 - published: 0, - sceneId: info.id - }; - - const res: any = await addApp(params); - console.log('res:', res); - if (res.code === 200) { - Message.success('创建成功'); - onClose(); - onRefresh(); + if (type === 'ADD') { + // 新增应用的入参 + const params = { + description: formData.description, + name: formData.name, + logo: 'scene04.png', // 先写死 + published: 0, + sceneId: info.id + }; + const res: any = await addApp(params); + if (res.code === 200) Message.success('创建成功'); + else Message.error(res.message); } else { - Message.error(res.message); + const res: any = await editApp(formData); + if (res.code === 200) Message.success('编辑成功'); + else Message.error(res.message); } // 清空表单数据和其他变量数据 form.resetFields(); + onClose(); + onRefresh(); }; return ( onOk()} onCancel={() => onChangeVisible(false)} @@ -138,6 +159,8 @@ const SideBar: React.FC = ({ selected, identity, subMenuData, onMe const [isSubMenuCollapsed, setIsSubMenuCollapsed] = useState(false); // 子菜单收起状态 const [activeKey, setActiveKey] = useState(0); const [showModal, setShowModal] = useState(false); + const [modalType, setModalType] = useState<'ADD' | 'EDIT'>('ADD'); + const [currentApp, setCurrentApp] = useState(null); const { menuData } = useSelector(state => state.ideContainer); const dispatch = useDispatch(); @@ -276,6 +299,63 @@ const SideBar: React.FC = ({ selected, identity, subMenuData, onMe Object.keys(subMenuData).length > 0 && setMenu(getMenuData()); }, [subMenuData, identity]); + // 渲染节点的额外操作按钮 + const renderNodeExtra = (node) => { + // 只有当 node.dataRef.id 存在时才渲染操作按钮 + if (!node.dataRef?.id) { + return null; + } + + const dropList = ( + + { + setCurrentApp(node.dataRef); + setModalType('EDIT'); + setShowModal(true); + }} + >编辑信息 + + { + // 使用Hook方式调用 + Modal.confirm({ + title: '请确认是否删除该应用?', + content: '应用删除后无法恢复,请谨慎删除!', + maskClosable: false, + cancelText: '取消', + simple: false, + closable: false, + onOk: async () => { + await deleteApp(node.dataRef.id); + onRefresh(); + } + }); + }} + > + 删除应用 + + + ); + + return ( + + + + ); + }; + return (
= ({ selected, identity, subMenuData, onMe style={{ marginLeft: 5 }} onClick={() => { setShowModal(true); + setModalType('ADD'); }} />
} @@ -340,20 +421,23 @@ const SideBar: React.FC = ({ selected, identity, subMenuData, onMe originalData.key && onMenuSelect?.({ ...originalData } as Selected); }} style={{ background: 'transparent' }} // 移除背景色 + renderExtra={renderNodeExtra} > {renderMenuItems(menu[activeKey]?.children)} - {/* 新增应用 */} + {/* 新增/编辑应用 */} {showModal && ( - setShowModal(value))} onClose={() => setShowModal(false)} onRefresh={onRefresh} - > + > )} );