import React, { useState, useEffect, useCallback } from 'react'; import { message, notification, Form, Spin, Tree, Tooltip, Modal, Input, Button, } from 'antd'; import { FileAddTwoTone, FolderAddTwoTone, EditTwoTone, DeleteTwoTone, FolderOpenOutlined, FileOutlined, } from '@ant-design/icons'; import { getTree, addMenuApi, addMenuGroupApi, submitMenuInfo, getRoleList, getMenuInfo, deleteMenuApi, } from '../../services/appConfig/api'; import ListCardItem from '../orgnazation/listCardItem'; import styles from './AppMenu.less'; import PicturesWall from '@/components/Upload/index'; const AppMenu = () => { const [treeLoading, setTreeLoading] = useState(true); const [treeData, setTreeData] = useState([]); // 菜单树 const [treeState, setTreeState] = useState(true); const [nodeType, setNodeType] = useState(1); // 根据节点类型渲染不同的编辑表单item,0-0一级菜单,0-0-0二级,0-0-0-0三级 const [rolelist, setRolelist] = useState([]); const [roleValueList, setRoleValueList] = useState({}); const [menuID, setMenuID] = useState(''); const [menuTitle, setMenuTitle] = useState('菜单管理'); const [menuLabel, setMenuLabel] = useState('在线图标'); const [addMenuVisible, setAddMenuVisible] = useState(false); const [addMenuGroupVisible, setAddMenuGroupVisible] = useState(false); const [tipVisible, setTipVisible] = useState(false); const [deleteMenuVisible, setDeleteMenuVisible] = useState(false); const [addMenuForm] = Form.useForm(); const [editMenuForm] = Form.useForm(); const [addMenuGroupForm] = Form.useForm(); const getRoleValueCallback = useCallback((value, index) => { roleValueList[index] = value; setRoleValueList({ ...roleValueList }); }, []); // 获取菜单树 useEffect(() => { updateTrees(); }, []); const updateTrees = () => { setTreeLoading(true); getTree() .then(res => { if (res.length > 0) { setTreeLoading(false); const result = res[0].children[0].children[2].children; setTreeData(result); console.log(result); // 第一次加载,默认选择第一个组织 if (treeState) { onSelect([result[0].menuID], false); setTreeState(false); } } }) .catch(err => { setTreeLoading(false); message.error(err); }); }; // 获取角色列表 useEffect(() => { getRoleList() .then(res => { if (res && res.list) { setRolelist(res.list); } else { notification.error({ message: '获取失败', description: res.message, }); } }) .catch(err => { message.error(err); }); }, []); // 渲染菜单树 const mapTree = menu => { const haveChildren = Array.isArray(menu.children) && menu.children.length > 0; return { title: ( <> <span>{menu.text}</span> <div className={styles.iconWraper1}> {menu.menuType === 'MiniAppMenuGroup' && ( <> <Tooltip title="添加菜单组"> <FolderAddTwoTone onClick={() => addMenuGroup(menu, '分组图标')} /> </Tooltip> {/* <Tooltip title="添加菜单组"> <EditTwoTone onClick={() => editMenuGroup(menu, '在线图标')} /> </Tooltip> */} </> )} {menu.menuType === 'MiniAppMenuGroupTwo' && ( <> <Tooltip title="添加菜单"> <FileAddTwoTone onClick={() => addMenu(menu)} /> </Tooltip> {/* <Tooltip title="编辑菜单组"> <EditTwoTone onClick={() => editMenuGroup(menu, '分组图标')} /> </Tooltip> */} </> )} {/* {menu.menuType === 'MiniAppMenuThree' && ( <> <Tooltip title="编辑菜单"> <EditTwoTone onClick={() => editMenu(menu)} /> </Tooltip> </> )} */} <Tooltip title="删除菜单"> <DeleteTwoTone onClick={() => deleteMenu(menu)} /> </Tooltip> </div> </> ), key: menu.menuID, // icon: menu.leaf ? <FileOutlined /> : <FolderOpenOutlined />, // 判断它是否存在子集,若果存在就进行再次进行遍历操作,知道不存在子集便对其他的元素进行操作 children: haveChildren ? menu.children.map(i => mapTree(i)) : [], }; }; // 获取当前菜单详细 const onSelect = (props, e) => { // e.node.pos节点类型,根据这个渲染不同的编辑表单item,0-x一级菜单,0-0-x二级,0-0-0-x三级 console.log(e); if (e) { if (e.node.pos.lastIndexOf('-') === 1) { setNodeType(1); } else if (e.node.pos.lastIndexOf('-') === 3) { setNodeType(2); } else { setNodeType(3); } } setMenuID(props[0]); getMenuInfo(props[0]) .then(res => { if (res.success) { editMenuForm.setFieldsValue({ menuName: res.menuName, shortName: res.menuShortName, imageUrl: res.imageUrl, pageUrl: res.pageUrl, offlineImgUrl: res.offlineImgUrl, funParam: res.funParam, relatedRoleList: res.relatedRoleList || '', }); } }) .catch(err => { message.error(err); }); }; // 左侧目录树相关操作 const addMenu = menu => { setAddMenuVisible(true); setMenuTitle(`在${menu.text}下添加菜单`); setMenuID(menu.menuID); addMenuForm.setFieldsValue({ menuName: '', shortName: '', imageUrl: '', pageUrl: '', funParam: '', }); }; const addMenuGroup = (menu, label) => { setAddMenuGroupVisible(true); setMenuTitle(`在${menu.text}下添加菜单组`); setMenuLabel(label); addMenuGroupForm.setFieldsValue({ menuName: '', shortName: '', imageUrl: '', offlineImgUrl: '', funParam: '', }); }; const editMenu = menu => { setAddMenuVisible(true); setMenuTitle(`编辑${menu.text}`); setMenuID(menu.menuID); getMenuInfo(menu.menuID) .then(res => { if (res.success) { addMenuForm.setFieldsValue({ menuName: res.menuName, shortName: res.menuShortName, imageUrl: res.imageUrl, pageUrl: res.pageUrl, funParam: res.funParam, relatedRoleList: res.relatedRoleList || [], }); } else { notification.error({ message: '获取失败', description: res.message, }); } }) .catch(err => { message.error(err); }); }; // const editMenuGroup = (menu, label) => { // setAddMenuGroupVisible(true); // setMenuTitle(`编辑${menu.text}`); // setMenuID(menu.menuID); // setMenuLabel(label); // getMenuInfo(menu.menuID) // .then(res => { // if (res.success) { // addMenuGroupForm.setFieldsValue({ // menuName: res.menuName, // shortName: res.menuShortName, // imageUrl: res.imageUrl, // pageUrl: res.pageUrl, // offlineImgUrl: res.offlineImgUrl, // funParam: res.funParam, // relatedRoleList: res.relatedRoleList || [], // }); // } else { // notification.error({ // message: '获取失败', // description: res.message, // }); // } // }) // .catch(err => { // message.error(err); // }); // }; const deleteMenu = menu => { setDeleteMenuVisible(true); setMenuTitle(`删除菜单${menu.text}`); setMenuID(menu.menuID); }; // 提交添加菜单 const submitAddMenu = () => { console.log(menuID); let menuName = addMenuForm.getFieldValue('menuName'); let shortName = addMenuForm.getFieldValue('shortName'); let imageUrl = addMenuForm.getFieldValue('imageUrl'); let pageUrl = addMenuForm.getFieldValue('pageUrl'); let funParam = addMenuForm.getFieldValue('funParam'); if (menuName && shortName && imageUrl && pageUrl) { addMenuApi(menuID, menuName, shortName, imageUrl, pageUrl, funParam) .then(res => { if (res.success) { setAddMenuVisible(false); notification.success({ message: '提交成功', }); updateTrees(); } else { notification.error({ message: '提交失败', description: res.message, }); } }) .catch(err => { message.error(err); }); } else { setTipVisible(true); } }; // 提交添加菜单组 const submitAddMenuGroup = () => { let menuName = addMenuGroupForm.getFieldValue('menuName'); let shortName = addMenuGroupForm.getFieldValue('shortName'); let imageUrl = addMenuGroupForm.getFieldValue('imageUrl'); let offlineImgUrl = addMenuGroupForm.getFieldValue('offlineImgUrl'); let funParam = addMenuGroupForm.getFieldValue('funParam'); if (menuName && shortName && imageUrl && offlineImgUrl) { addMenuGroupApi( menuID, menuName, shortName, imageUrl, offlineImgUrl, funParam, ) .then(res => { if (res.success) { setAddMenuGroupVisible(false); notification.success({ message: '提交成功', }); updateTrees(); } else { notification.error({ message: '提交失败', description: res.message, }); } }) .catch(err => { message.error(err); }); } else { setTipVisible(true); } }; // 提交-编辑菜单 const submitEditMenu = () => { let menuName = editMenuForm.getFieldValue('menuName'); let shortName = editMenuForm.getFieldValue('shortName'); let imageUrl = editMenuForm.getFieldValue('imageUrl'); let offlineImgUrl = editMenuForm.getFieldValue('offlineImgUrl') || ''; let pageUrl = editMenuForm.getFieldValue('pageUrl') || ''; let funParam = editMenuForm.getFieldValue('funParam') || ''; let relatedRoleList = editMenuForm.getFieldValue('funParam') || ''; const params = { menuID, menuName, shortName, imageUrl, offlineImgUrl, pageUrl, funParam, relatedRoleList, }; // 根据节点类型,加一层判断,必填项全部不为空时才能提交 if (nodeType === 1) { if (menuName && shortName && imageUrl && offlineImgUrl) { submitMenu(params); } else { setTipVisible(true); } } else if (nodeType === 2) { if (menuName && shortName && imageUrl) { submitMenu(params); } else { setTipVisible(true); } } else if (nodeType === 3) { if (menuName && shortName && imageUrl && pageUrl) { submitMenu(params); } else { setTipVisible(true); } } }; const submitMenu = params => { submitMenuInfo(params) .then(res => { if (res.success) { notification.success({ message: '提交成功', }); } else { notification.error({ message: '获取失败', description: res.message, }); } }) .catch(err => { message.error(err); }); }; // 提交删除菜单 const submitDeleteMenu = () => { deleteMenuApi(menuID) .then(res => { if (res.success) { setDeleteMenuVisible(false); notification.success({ message: '删除成功', }); updateTrees(); } else { notification.error({ message: '删除失败', description: res.message, }); } }) .catch(err => { setTreeLoading(false); message.error(err); }); }; return ( <div className={styles.contentContainer}> <div className={styles.menuContainer}> <div style={{ padding: '10px 10px 0 16px' }}> 菜单列表 <Tooltip title="添加菜单"> <FileAddTwoTone style={{ fontSize: '18px', float: 'right', margin: '4px 4px 0px 12px', color: '#1890FF', }} onClick={() => addMenu({ text: '根目录', menuID: -1 })} /> </Tooltip> <Tooltip title="添加菜单组"> <FolderAddTwoTone style={{ fontSize: '18px', float: 'right', marginTop: '4px', }} onClick={() => addMenuGroup({ text: '根目录', menuID: -1 }, '在线图标') } /> </Tooltip> </div> {treeData.length > 0 && ( <Spin spinning={treeLoading} tip="loading..."> <Tree showIcon="true" showLine={{ showLeafIcon: false }} defaultExpandAll="true" // selectedKeys={[currentSelectMenu]} onSelect={onSelect} treeData={treeData.map(t => mapTree(t))} /> </Spin> )} </div> <div className={styles.editContainer}> <Form form={editMenuForm} labelCol={{ span: 4 }} wrapperCol={{ span: 19 }} > <Form.Item name="menuName" label="菜单名称" rules={[{ required: true, message: '不能为空' }]} > <Input placeholder="请输入菜单名称" /> </Form.Item> <Form.Item name="shortName" label="菜单别名" rules={[{ required: true, message: '不能为空' }]} > <Input placeholder="请输入菜单别名" /> </Form.Item> <Form.Item name="imageUrl" label="菜单图标" rules={[{ required: true, message: '不能为空' }]} > <Input placeholder="请输入菜单图标" /> </Form.Item> <Form.Item label="图标预览"> <PicturesWall maxLen={3} /> </Form.Item> {nodeType === 1 && ( <> <Form.Item name="offlineImgUrl" label="离线图标" rules={[{ required: true, message: '不能为空' }]} > <Input placeholder="请输入离线图标" /> </Form.Item> <Form.Item label="图标预览"> <PicturesWall maxLen={3} /> </Form.Item> </> )} {nodeType === 3 && ( <> <Form.Item name="pageUrl" label="功能路径" rules={[{ required: true, message: '不能为空' }]} > <Input placeholder="请输入功能路径" /> </Form.Item> </> )} <Form.Item name="funParam" label="功能参数"> <Input placeholder="请输入功能参数" /> </Form.Item> <Form.Item wrapperCol={{ offset: 12 }}> <Button key="back" type="primary" onClick={() => submitEditMenu()}> 提交 </Button> </Form.Item> </Form> </div> <div className={styles.previewContainer}>界面预览</div> {/* 必填项提示 */} <Modal title="提示" visible={tipVisible} onCancel={() => setTipVisible(false)} width="300px" styles={{ zIndex: 999999 }} centered footer={[ <Button key="back" type="primary" onClick={() => setTipVisible(false)} > 关闭 </Button>, ]} > <p> 标记<span className={styles.redText}>*</span>的为必填项 </p> </Modal> {/* 添加菜单 */} <Modal title={menuTitle} visible={addMenuVisible} onOk={submitAddMenu} onCancel={() => setAddMenuVisible(false)} okText="确认" cancelText="取消" centered > <Form form={addMenuForm} labelCol={{ span: 4 }}> <Form.Item name="menuName" label="菜单名称" rules={[{ required: true, message: '不能为空' }]} > <Input placeholder="请输入菜单名称" /> </Form.Item> <Form.Item name="shortName" label="菜单别名" rules={[{ required: true, message: '不能为空' }]} > <Input placeholder="请输入菜单别名" /> </Form.Item> <Form.Item name="imageUrl" label="菜单图标" rules={[{ required: true, message: '不能为空' }]} > <Input placeholder="请输入菜单图标" /> </Form.Item> <Form.Item name="pageUrl" label="功能路径" rules={[{ required: true, message: '不能为空' }]} > <Input placeholder="请输入菜单图标" /> </Form.Item> <Form.Item label="图标预览"> <PicturesWall maxLen={3} /> </Form.Item> <Form.Item name="funParam" label="功能参数"> <Input placeholder="请输入功能参数" /> </Form.Item> </Form> <ListCardItem itemid="1" key="1" userList={rolelist} OUName="关联角色" getValueCallback={getRoleValueCallback} /> </Modal> {/* 添加菜单组 */} <Modal title={menuTitle} visible={addMenuGroupVisible} onOk={submitAddMenuGroup} onCancel={() => setAddMenuGroupVisible(false)} okText="确认" cancelText="取消" centered > <Form form={addMenuGroupForm} labelCol={{ span: 4 }}> <Form.Item name="menuName" label="分组名称" rules={[{ required: true, message: '不能为空' }]} > <Input placeholder="请输入分组名称" /> </Form.Item> <Form.Item name="shortName" label="分组别名" rules={[{ required: true, message: '不能为空' }]} > <Input placeholder="请输入分组别名" /> </Form.Item> <Form.Item name="imageUrl" label={menuLabel} rules={[{ required: true, message: '不能为空' }]} > <Input placeholder="请输入菜单图标" /> </Form.Item> <Form.Item label="图标预览"> <PicturesWall maxLen={3} /> </Form.Item> {/* 添加菜单组,label名称为在线图标才有离线图标 */} {menuLabel === '在线图标' && ( <Form.Item name="offlineImgUrl" label="离线图标" rules={[{ required: true, message: '不能为空' }]} > <Input placeholder="请输入离线图标" /> </Form.Item> )} <Form.Item label="图标预览"> <PicturesWall maxLen={3} /> </Form.Item> <Form.Item name="funParam" label="功能参数"> <Input placeholder="请输入功能参数" /> </Form.Item> </Form> </Modal> {/* 删除菜单 */} <Modal title={menuTitle} visible={deleteMenuVisible} onOk={submitDeleteMenu} onCancel={() => setDeleteMenuVisible(false)} okText="确认" cancelText="取消" centered > <span>确定删除?</span> </Modal> </div> ); }; export default AppMenu;