Commit e360af3c authored by Maofei94's avatar Maofei94

perf: web4菜单拖拽

parent fe99d275
...@@ -7,6 +7,7 @@ import VersionPublish from './menuconfig/VersionPublish'; ...@@ -7,6 +7,7 @@ import VersionPublish from './menuconfig/VersionPublish';
import { import {
getMiniAppModuleTree, getMiniAppModuleTree,
deleteWebsite, deleteWebsite,
deleteMiniMenu,
} from '@/services/mobileConfig/api'; } from '@/services/mobileConfig/api';
import SiteConfig from './SiteConfig'; import SiteConfig from './SiteConfig';
import MenuConfig from './menuconfig/MenuConfig'; import MenuConfig from './menuconfig/MenuConfig';
...@@ -83,6 +84,7 @@ const MobileConfigPage = props => { ...@@ -83,6 +84,7 @@ const MobileConfigPage = props => {
setLoading(false); setLoading(false);
if (res.success) { if (res.success) {
setFlag(flag + 1); setFlag(flag + 1);
deleteMiniMenu({ visible: 'miniapp' });
notification.success({ notification.success({
message: '提示', message: '提示',
duration: 3, duration: 3,
......
...@@ -18,6 +18,7 @@ import { ...@@ -18,6 +18,7 @@ import {
deleteWebMenu, // 删 deleteWebMenu, // 删
editWebMenu, // 改 editWebMenu, // 改
getWebMenuInfo, // 查 getWebMenuInfo, // 查
dragMenu, // 菜单拖拽
} from '@/services/webConfig/api'; } from '@/services/webConfig/api';
const MiniMenu = props => { const MiniMenu = props => {
...@@ -36,6 +37,7 @@ const MiniMenu = props => { ...@@ -36,6 +37,7 @@ const MiniMenu = props => {
const [roleList, setRoleList] = useState([]); // 复选框选中的值 const [roleList, setRoleList] = useState([]); // 复选框选中的值
const [modalLoading, setModalLoading] = useState(false); const [modalLoading, setModalLoading] = useState(false);
const [submitLoading, setSubmitLoading] = useState(false); const [submitLoading, setSubmitLoading] = useState(false);
const [newTreeList, setNewTreeList] = useState([]);
/* ***************************************************** */ /* ***************************************************** */
const [curMenuType, setCurMenuType] = useState(''); const [curMenuType, setCurMenuType] = useState('');
...@@ -45,6 +47,11 @@ const MiniMenu = props => { ...@@ -45,6 +47,11 @@ const MiniMenu = props => {
getInfo(); getInfo();
}, [menuID]); }, [menuID]);
useEffect(() => {
console.log(menu, 'menu');
setNewTreeList(menu.children || []);
}, [menu]);
// 处理数据 // 处理数据
const mapTree = val => { const mapTree = val => {
const obj = { ...val }; const obj = { ...val };
...@@ -278,6 +285,93 @@ const MiniMenu = props => { ...@@ -278,6 +285,93 @@ const MiniMenu = props => {
}); });
setRoleList(arr2); setRoleList(arr2);
}; };
// 树的拖动
const handleDrop = infos => {
console.log(infos, 'newTree');
const { pos } = infos.node.props;
const dragKey = infos.dragNode.props.eventKey;
const dragPos = infos.dragNode.props.pos.split('-'); // 拖动的节点
const dropKey = infos.node.props.eventKey;
const dropPos = infos.node.props.pos.split('-'); // 拖动结束的节点
const endIndex = Number(dropPos[dropPos.length - 1]);
const dropPosition =
infos.dropPosition - Number(dropPos[dropPos.length - 1]);
// let obj = findNum(newTreeList, dragKey, getArrList);
let obj;
findNum(newTreeList, dragKey, (arr, id, parentId, index) => {
obj = { arr, id, parentId, index };
return { arr, id, parentId, index };
});
console.log(obj, 'obj');
let arrList = [];
if (
dragPos.length !== dropPos.length ||
dragPos[dragPos.length - 2] !== dropPos[dropPos.length - 2]
) {
notification.warning({
message: '提示',
duration: 3,
description: '操作失败',
});
return null;
}
let idIndex;
obj.arr.map((item, index) => {
if (item.menuID === obj.id) {
idIndex = index;
return;
}
arrList.push(item.menuID);
});
if (idIndex > endIndex) {
if (dropPosition === -1) {
arrList.splice(endIndex, 0, obj.id);
} else if (dropPosition === 1) {
arrList.splice(endIndex + 1, 0, obj.id);
}
} else if (idIndex < endIndex) {
if (dropPosition === -1) {
arrList.splice(endIndex - 1, 0, obj.id);
} else if (dropPosition === 1) {
arrList.splice(endIndex, 0, obj.id);
}
}
dragMenu({
menuID: obj.id,
newParentID: obj.parentId || -1,
menuList: String(arrList) || '',
_version: 9999,
_dc: Date.now(),
}).then(res => {
console.log(res);
if (res.success) {
updateMenuTree();
// setFlag(flag + 1);
} else {
notification.error({
message: '提示',
duration: 3,
description: res.message || '操作失败',
});
}
});
};
const findNum = (array, id, callback, parentId = '') => {
let ptId = parentId;
let arrFlag = true;
array.map((item, index) => {
if (item.menuID === id) {
callback(array, id, parentId, index);
arrFlag = false;
return;
}
if (arrFlag && item.children && item.children.length > 0) {
ptId = item.menuID;
findNum(item.children, id, callback, ptId);
}
});
};
return ( return (
<Spin spinning={loading} tip="loading..."> <Spin spinning={loading} tip="loading...">
<div <div
...@@ -317,8 +411,10 @@ const MiniMenu = props => { ...@@ -317,8 +411,10 @@ const MiniMenu = props => {
onSelect={handleSelect} onSelect={handleSelect}
treeData={menu.children.map(item => mapTree(item))} treeData={menu.children.map(item => mapTree(item))}
blockNode blockNode
draggable
autoExpandParent autoExpandParent
selectedKeys={[menuID]} selectedKeys={[menuID]}
onDrop={handleDrop}
// expandedKeys={[menuID]} // expandedKeys={[menuID]}
/> />
)} )}
......
.box{ .box{
min-height: calc( 100vh - 198px); min-height: calc( 100vh - 198px);
display: flex; display: flex;
overflow-x: hidden;
} }
.left{ .left{
min-width: 300px; min-width: 300px;
...@@ -79,8 +80,8 @@ ...@@ -79,8 +80,8 @@
border: 1px solid #eee; border: 1px solid #eee;
padding: 10px; padding: 10px;
} }
.modal{ // .modal{
.ant-modal-body{ // .ant-modal-body{
padding: 0 !important; // padding: 0 !important;
} // }
} // }
\ No newline at end of file \ No newline at end of file
...@@ -105,3 +105,6 @@ export const addWebsite = (params, options) => { ...@@ -105,3 +105,6 @@ export const addWebsite = (params, options) => {
// 菜单拖拽 // 菜单拖拽
export const dragMenu = params => export const dragMenu = params =>
get(`${CITY_SERVICE}/OMS.svc/P_DragMenu`, params); get(`${CITY_SERVICE}/OMS.svc/P_DragMenu`, params);
export const deleteMiniMenu = params =>
get(`${PUBLISH_SERVICE}/PlatformCenter/DeleteMiniMenu`, params);
...@@ -107,3 +107,7 @@ export const getConfigContent = name => ...@@ -107,3 +107,7 @@ export const getConfigContent = name =>
get(`${CITY_SERVICE}/OMS.svc/W4_GetConfigContent?_version=9999`, { get(`${CITY_SERVICE}/OMS.svc/W4_GetConfigContent?_version=9999`, {
fileName: name, fileName: name,
}); });
// 菜单拖拽
export const dragMenu = params =>
get(`${CITY_SERVICE}/OMS.svc/P_DragMenu`, params);
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