Skip to content

C
CivManage
Commit ded44389 authored by Maofei94's avatar Maofei94
Browse files
Options

feat: 小程序菜单管理

parent f9ace883
Hide whitespace changes
Inline Side-by-side
Showing with 201 additions and 173 deletions
src/pages/mobileConfig/index.js
View file @ ded44389
...@@ -7,7 +7,7 @@ import SiteConfig from './SiteConfig'; ...@@ -7,7 +7,7 @@ import SiteConfig from './SiteConfig';
import MenuConfig from './menuconfig/MenuConfig'; import MenuConfig from './menuconfig/MenuConfig';
const { TabPane } = Tabs; const { TabPane } = Tabs;
const MobileConfigPage = props => { const MobileConfigPage = props => {
const [activeKey, setActiveKey] = useState('0'); // tabs活动页 const [activeKey, setActiveKey] = useState('1'); // tabs活动页
const [miniTitle, setMiniTitle] = useState(''); const [miniTitle, setMiniTitle] = useState('');
const [flag, setFlag] = useState(1); const [flag, setFlag] = useState(1);
useEffect(() => { useEffect(() => {
......
src/pages/mobileConfig/menuconfig/LeftPart.jsx
View file @ ded44389
...@@ -22,6 +22,7 @@ import { ...@@ -22,6 +22,7 @@ import {
getTree, getTree,
addMenuApi, addMenuApi,
addMenuGroupApi, addMenuGroupApi,
submitMenuInfo,
getRoleList, getRoleList,
getMenuInfo, getMenuInfo,
deleteMenuApi, deleteMenuApi,
...@@ -34,6 +35,8 @@ const LeftPart = () => { ...@@ -34,6 +35,8 @@ const LeftPart = () => {
const [treeLoading, setTreeLoading] = useState(true); const [treeLoading, setTreeLoading] = useState(true);
const [treeData, setTreeData] = useState([]); // 菜单树 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 [rolelist, setRolelist] = useState([]);
const [roleValueList, setRoleValueList] = useState({}); const [roleValueList, setRoleValueList] = useState({});
...@@ -44,9 +47,10 @@ const LeftPart = () => { ...@@ -44,9 +47,10 @@ const LeftPart = () => {
const [addMenuVisible, setAddMenuVisible] = useState(false); const [addMenuVisible, setAddMenuVisible] = useState(false);
const [addMenuGroupVisible, setAddMenuGroupVisible] = useState(false); const [addMenuGroupVisible, setAddMenuGroupVisible] = useState(false);
const [tipVisible, setTipVisible] = useState(false); const [tipVisible, setTipVisible] = useState(false);
// const [editMenuVisible, setEditMenuVisible] = useState(false);
const [deleteMenuVisible, setDeleteMenuVisible] = useState(false); const [deleteMenuVisible, setDeleteMenuVisible] = useState(false);
const [addMenuForm] = Form.useForm(); const [addMenuForm] = Form.useForm();
const [editMenuForm] = Form.useForm();
const [addMenuGroupForm] = Form.useForm(); const [addMenuGroupForm] = Form.useForm();
const getRoleValueCallback = useCallback((value, index) => { const getRoleValueCallback = useCallback((value, index) => {
...@@ -65,8 +69,14 @@ const LeftPart = () => { ...@@ -65,8 +69,14 @@ const LeftPart = () => {
.then(res => { .then(res => {
if (res.length > 0) { if (res.length > 0) {
setTreeLoading(false); setTreeLoading(false);
setTreeData(res[0].children[0].children[2].children); const result = res[0].children[0].children[2].children;
console.log(res[0].children[0].children[2].children); setTreeData(result);
console.log(result);
// 第一次加载，默认选择第一个组织
if (treeState) {
onSelect([result[0].menuID], false);
setTreeState(false);
}
} }
}) })
.catch(err => { .catch(err => {
...@@ -109,11 +119,11 @@ const LeftPart = () => { ...@@ -109,11 +119,11 @@ const LeftPart = () => {
onClick={() => addMenuGroup(menu, '分组图标')} onClick={() => addMenuGroup(menu, '分组图标')}
/> />
</Tooltip> </Tooltip>
<Tooltip title="添加菜单组"> {/* <Tooltip title="添加菜单组">
<EditTwoTone <EditTwoTone
onClick={() => editMenuGroup(menu, '在线图标')} onClick={() => editMenuGroup(menu, '在线图标')}
/> />
</Tooltip> </Tooltip> */}
</> </>
)} )}
{menu.menuType === 'MiniAppMenuGroupTwo' && ( {menu.menuType === 'MiniAppMenuGroupTwo' && (
...@@ -121,20 +131,20 @@ const LeftPart = () => { ...@@ -121,20 +131,20 @@ const LeftPart = () => {
<Tooltip title="添加菜单"> <Tooltip title="添加菜单">
<FileAddTwoTone onClick={() => addMenu(menu)} /> <FileAddTwoTone onClick={() => addMenu(menu)} />
</Tooltip> </Tooltip>
<Tooltip title="编辑菜单组"> {/* <Tooltip title="编辑菜单组">
<EditTwoTone <EditTwoTone
onClick={() => editMenuGroup(menu, '分组图标')} onClick={() => editMenuGroup(menu, '分组图标')}
/> />
</Tooltip> </Tooltip> */}
</> </>
)} )}
{menu.menuType === 'MiniAppMenuThree' && ( {/* {menu.menuType === 'MiniAppMenuThree' && (
<> <>
<Tooltip title="编辑菜单"> <Tooltip title="编辑菜单">
<EditTwoTone onClick={() => editMenu(menu)} /> <EditTwoTone onClick={() => editMenu(menu)} />
</Tooltip> </Tooltip>
</> </>
)} )} */}
<Tooltip title="删除菜单"> <Tooltip title="删除菜单">
<DeleteTwoTone onClick={() => deleteMenu(menu)} /> <DeleteTwoTone onClick={() => deleteMenu(menu)} />
</Tooltip> </Tooltip>
...@@ -148,6 +158,38 @@ const LeftPart = () => { ...@@ -148,6 +158,38 @@ const LeftPart = () => {
}; };
}; };
// 获取当前菜单详细
const onSelect = (props, e) => {
// e.node.pos节点类型，根据这个渲染不同的编辑表单item,0-x一级菜单，0-0-x二级，0-0-0-x三级
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 => { const addMenu = menu => {
setAddMenuVisible(true); setAddMenuVisible(true);
...@@ -199,34 +241,35 @@ const LeftPart = () => { ...@@ -199,34 +241,35 @@ const LeftPart = () => {
message.error(err); message.error(err);
}); });
}; };
const editMenuGroup = (menu, label) => {
setAddMenuGroupVisible(true); // const editMenuGroup = (menu, label) => {
setMenuTitle(`编辑${menu.text}`); // setAddMenuGroupVisible(true);
setMenuID(menu.menuID); // setMenuTitle(`编辑${menu.text}`);
setMenuLabel(label); // setMenuID(menu.menuID);
getMenuInfo(menu.menuID) // setMenuLabel(label);
.then(res => { // getMenuInfo(menu.menuID)
if (res.success) { // .then(res => {
addMenuGroupForm.setFieldsValue({ // if (res.success) {
menuName: res.menuName, // addMenuGroupForm.setFieldsValue({
shortName: res.menuShortName, // menuName: res.menuName,
imageUrl: res.imageUrl, // shortName: res.menuShortName,
pageUrl: res.pageUrl, // imageUrl: res.imageUrl,
offlineImgUrl: res.offlineImgUrl, // pageUrl: res.pageUrl,
funParam: res.funParam, // offlineImgUrl: res.offlineImgUrl,
relatedRoleList: res.relatedRoleList || [], // funParam: res.funParam,
}); // relatedRoleList: res.relatedRoleList || [],
} else { // });
notification.error({ // } else {
message: '获取失败', // notification.error({
description: res.message, // message: '获取失败',
}); // description: res.message,
} // });
}) // }
.catch(err => { // })
message.error(err); // .catch(err => {
}); // message.error(err);
}; // });
// };
const deleteMenu = menu => { const deleteMenu = menu => {
setDeleteMenuVisible(true); setDeleteMenuVisible(true);
setMenuTitle(`删除菜单${menu.text}`); setMenuTitle(`删除菜单${menu.text}`);
...@@ -300,6 +343,65 @@ const LeftPart = () => { ...@@ -300,6 +343,65 @@ const LeftPart = () => {
setTipVisible(true); 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 = () => { const submitDeleteMenu = () => {
deleteMenuApi(menuID) deleteMenuApi(menuID)
...@@ -359,44 +461,18 @@ const LeftPart = () => { ...@@ -359,44 +461,18 @@ const LeftPart = () => {
showLine={{ showLeafIcon: false }} showLine={{ showLeafIcon: false }}
defaultExpandAll="true" defaultExpandAll="true"
// selectedKeys={[currentSelectMenu]} // selectedKeys={[currentSelectMenu]}
// onSelect={onSelect} onSelect={onSelect}
treeData={treeData.map(t => mapTree(t))} treeData={treeData.map(t => mapTree(t))}
/> />
</Spin> </Spin>
)} )}
</div> </div>
{/* 必填项提示 */} <div className={styles.editContainer}>
<Modal <Form
title="提示" form={editMenuForm}
visible={tipVisible} labelCol={{ span: 4 }}
onCancel={() => setTipVisible(false)} wrapperCol={{ span: 19 }}
width="300px" >
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 <Form.Item
name="menuName" name="menuName"
label="菜单名称" label="菜单名称"
...@@ -418,93 +494,46 @@ const LeftPart = () => { ...@@ -418,93 +494,46 @@ const LeftPart = () => {
> >
<Input placeholder="请输入菜单图标" /> <Input placeholder="请输入菜单图标" />
</Form.Item> </Form.Item>
<Form.Item
name="imageUrl"
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="图标预览"> <Form.Item label="图标预览">
<PicturesWall maxLen={3} /> <PicturesWall maxLen={3} />
</Form.Item> </Form.Item>
{/* 添加菜单组，label名称为在线图标才有离线图标 */} {nodeType === 1 && (
{menuLabel === '在线图标' && ( <>
<Form.Item <Form.Item
name="offlineImgUrl" name="offlineImgUrl"
label="离线图标" label="离线图标"
rules={[{ required: true, message: '不能为空' }]} rules={[{ required: true, message: '不能为空' }]}
> >
<Input placeholder="请输入离线图标" /> <Input placeholder="请输入离线图标" />
</Form.Item> </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 label="图标预览">
<PicturesWall maxLen={3} />
</Form.Item>
<Form.Item name="funParam" label="功能参数"> <Form.Item name="funParam" label="功能参数">
<Input placeholder="请输入功能参数" /> <Input placeholder="请输入功能参数" />
</Form.Item> </Form.Item>
<Form.Item wrapperCol={{ offset: 12 }}>
<Button key="back" type="primary" onClick={() => submitEditMenu()}>
提交
</Button>
</Form.Item>
</Form> </Form>
</Modal> </div>
{/* 删除菜单 */} <div className={styles.previewContainer}>关联角色</div>
<Modal {/* 必填项提示 */}
title={menuTitle}
visible={deleteMenuVisible}
onOk={submitDeleteMenu}
onCancel={() => setDeleteMenuVisible(false)}
okText="确认"
cancelText="取消"
centered
>
<span>确定删除？</span>
</Modal>
</div> </div>
); );
}; };
......
src/pages/mobileConfig/menuconfig/LeftPart.less
View file @ ded44389
.contentContainer{ .contentContainer{
min-height: calc(100vh - 300px); max-height: calc(100vh - 300px);
overflow-x: auto;
display: flex; display: flex;
.menuContainer{ .menuContainer{
min-width: 300px; min-width: 300px;
border:1px solid #abaeb1; border:1px solid #abaeb1;
min-height:calc(100vh - 300px); // min-height:calc(100vh - 300px);
overflow-y:auto; overflow-y:auto;
.ant-tree-list{ .ant-tree-list{
padding: 10px; padding: 10px;
height:calc(100vh - 300px); height:calc(100vh - 330px);
.ant-tree-switcher{ .ant-tree-switcher{
line-height: 1; line-height: 1;
color:#1890FF; color:#1890FF;
...@@ -19,11 +20,23 @@ ...@@ -19,11 +20,23 @@
} }
} }
} }
.previewContainer{ .editContainer{
margin-left: 12px; margin-left: 12px;
flex: 1; flex: 1;
padding: 16px;
float: left; float: left;
// background: white; min-width: 500px;
border:1px solid #abaeb1;
.ant-table-pagination-right{
padding-right: 12px;
}
}
.previewContainer{
margin-left: 12px;
// flex: 1;
float: left;
min-width: 400px;
border:1px solid #abaeb1;
.ant-table-pagination-right{ .ant-table-pagination-right{
padding-right: 12px; padding-right: 12px;
} }
...@@ -53,16 +66,4 @@ ...@@ -53,16 +66,4 @@
.redText{ .redText{
color: red; color: red;
cursor: pointer; cursor: pointer;
} }
// .ant-modal-root{ \ No newline at end of file
// .ant-tree-switcher{
// line-height: 1;
// color:#1890FF;
// }
// }
// .menuContainer{
// width: 300px;
// padding: 10px;
// background: #1890FF;
// }
\ No newline at end of file
src/pages/mobileConfig/menuconfig/MenuConfig.jsx
View file @ ded44389
...@@ -7,10 +7,8 @@ const MenuConfig = props => { ...@@ -7,10 +7,8 @@ const MenuConfig = props => {
const [flag, setFlag] = useState(1); const [flag, setFlag] = useState(1);
return ( return (
<ProCard split="vertical"> <ProCard split="vertical">
<ProCard colSpan="400px"> <LeftPart />
<LeftPart /> {/* <ProCard><AddForm /></ProCard> */}
</ProCard>
<ProCard>{/* <AddForm /> */}</ProCard>
</ProCard> </ProCard>
); );
}; };
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment