miniMenu.jsx 26.6 KB
Newer Older
Maofei94's avatar
Maofei94 committed
1
import React, { useEffect, useState } from 'react';
2
import { message, notification, Tooltip, Modal, Input, Button, Spin, Empty } from 'antd';
Maofei94's avatar
Maofei94 committed
3 4 5 6 7 8
import {
  FileAddTwoTone,
  FolderAddTwoTone,
  FolderFilled,
  FileOutlined,
  DeleteTwoTone,
9
  DeliveredProcedureOutlined,
Maofei94's avatar
Maofei94 committed
10 11 12 13 14 15 16 17 18
} from '@ant-design/icons';
import classnames from 'classnames';
import {
  miniAppSiteTree,
  getMiniAppModuleTree,
  addMenu,
  getMenuInfo,
  deleteMenu,
  editMenu,
Maofei94's avatar
Maofei94 committed
19
  getRoleListPlain,
Maofei94's avatar
Maofei94 committed
20
  dragMenu,
Maofei94's avatar
Maofei94 committed
21
} from '@/services/mobileConfig/api';
22
import { setIn } from 'immutable';
23

Maofei94's avatar
Maofei94 committed
24
import { appConnector } from '@/containers/App/store';
张烨's avatar
张烨 committed
25
import Tree from '@/components/ExpendableTree';
Maofei94's avatar
Maofei94 committed
26 27
import AddForm from './AddForm';
import EditForm from './editForm';
28
import ImportOrExport from './ImportOrExport';
Maofei94's avatar
Maofei94 committed
29
import CheckList from './checkBox';
Maofei94's avatar
Maofei94 committed
30

31
import styles from './miniMenu.less';
Maofei94's avatar
Maofei94 committed
32
const MiniMenu = props => {
Maofei94's avatar
Maofei94 committed
33
  const { userMode, clientName, parentKey } = props;
Maofei94's avatar
Maofei94 committed
34
  const [flag, setFlag] = useState(1); // 刷新标志
Maofei94's avatar
Maofei94 committed
35
  const [treeFlag, setTreeFlag] = useState(true);
Maofei94's avatar
Maofei94 committed
36 37 38
  const [treeData, setTreeData] = useState([]); // 树的数据
  const [loading, setLoading] = useState(false); // 加载
  const [menuID, setMenuID] = useState(''); // 选中的树ID
39
  // const [saveID, setSaveID] = useState(''); // 保存选择的树id
Maofei94's avatar
Maofei94 committed
40 41 42 43
  const [nodeType, setNodeType] = useState(''); // 选中的节点类型
  const [info, setInfo] = useState({});
  const [addVisible, setAddVisible] = useState(false); // 新增弹窗
  const [addTwoVisible, setAddTwoVisible] = useState(false); // 编辑弹窗
Maofei94's avatar
Maofei94 committed
44
  const [delVisible, setDelVisible] = useState(false); // 删除弹窗
Maofei94's avatar
Maofei94 committed
45 46
  const [nodeObj, setNodeObj] = useState({});
  const [addType, setAddType] = useState(''); // 添加下级类型
Maofei94's avatar
Maofei94 committed
47
  const [modalTitle, setModalTitle] = useState('');
Maofei94's avatar
Maofei94 committed
48
  const [roleList, setRoleList] = useState([]); // 复选框选中的值
Maofei94's avatar
Maofei94 committed
49 50
  const [modalLoading, setModalLoading] = useState(false);
  const [submitLoading, setSubmitLoading] = useState(false);
Maofei94's avatar
Maofei94 committed
51
  const [addList, setAddList] = useState([]);
Maofei94's avatar
Maofei94 committed
52
  const [newTreeList, setNewTreeList] = useState([]);
53
  const [expendKey, setExpendKey] = useState(''); // 保存默认展开项
54 55 56
  const [keepId, setKeepId] = useState('');
  const [mapDataList, setMapDataList] = useState(new Set());
  const [keepType, setKeepType] = useState('');
57 58
  const [inf, setInf] = useState({});
  const [checkList, setCheckList] = useState([]);
59
  const [importOrExportVisible, setImportOrExportVisible] = useState(false); // 导入导出弹窗
60 61 62
  const [keywords, setKeywords] = useState('');

  const { Search } = Input;
Maofei94's avatar
Maofei94 committed
63

Maofei94's avatar
Maofei94 committed
64 65
  // 获取菜单树
  useEffect(() => {
Maofei94's avatar
Maofei94 committed
66
    console.log(props);
Maofei94's avatar
Maofei94 committed
67
    updateTrees();
68
  }, []);
Maofei94's avatar
Maofei94 committed
69
  // 获取角色列表
Maofei94's avatar
Maofei94 committed
70 71
  useEffect(() => {
    getRoleListPlain({
Maofei94's avatar
Maofei94 committed
72
      subSystemValue: clientName || 'miniapp',
Maofei94's avatar
Maofei94 committed
73 74 75
      _dc: Date.now(),
      _version: 9999,
    }).then(res => {
76
      if (res.code === 0) {
Maofei94's avatar
Maofei94 committed
77 78 79
        setAddList(res.list);
      }
    });
Maofei94's avatar
Maofei94 committed
80
  }, [flag, clientName]);
Maofei94's avatar
Maofei94 committed
81 82
  // 获取菜单信息
  useEffect(() => {
邓超's avatar
邓超 committed
83
    console.log(flag, 'flag');
84
    if (flag === 1) {
85 86
      setExpendKey(menuID);
    }
Maofei94's avatar
Maofei94 committed
87 88 89
    getInfo();
  }, [menuID]);

90 91 92 93 94 95 96 97
  const onChangeSearch = e => {
    setKeywords(e.target.value);
  };

  const onSearch = value => {
    updateTrees('', value);
  };

Maofei94's avatar
Maofei94 committed
98
  // 更新树
99
  const updateTrees = (e,keyword) => {
Maofei94's avatar
Maofei94 committed
100
    getMiniAppModuleTree({
Maofei94's avatar
Maofei94 committed
101
      userMode: userMode || 'super',
102
      keyword
Maofei94's avatar
Maofei94 committed
103 104
    })
      .then(res => {
105
        // console.log(res, 'res');
Maofei94's avatar
Maofei94 committed
106 107 108 109
        // const result1 = res[0].children[0].children[2].children;
        // setNewTreeList(JSON.parse(JSON.stringify(result1)));
        // setTreeData(result1);
        // setLoading(false);
Maofei94's avatar
Maofei94 committed
110 111
        if (res.code === 0) {
          const { data } = res;
Maofei94's avatar
Maofei94 committed
112
          let obj = data[0].children.find(item => item.id === parentKey);
Maofei94's avatar
Maofei94 committed
113
          const result = obj.children[1].children;
114
          console.log(result, 'result');
Maofei94's avatar
Maofei94 committed
115
          setTreeData(result);
116
          if (result.length > 0) {
117 118
            if (e) {
              result.map(item => mapData(item, e));
119
              let aa = [...mapDataList].find(i => i.menuID == e);
120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144
              console.log(aa);
              setMenuID(aa.menuID);
              setExpendKey(aa.menuID);
              switch (aa.menuType) {
                case 'MiniAppMenuGroup':
                  setNodeType(1);
                  setAddType(1);
                  break;
                case 'MiniAppMenuGroupTwo':
                  setNodeType(2);
                  setAddType(2);
                  break;
                case 'MiniAppMenu':
                  setNodeType(3);
                  setAddType(3);
                  break;
                case 'MiniAppMenuThree':
                  setNodeType(4);
                  setAddType(4);
                  break;
                default:
                  break;
              }
            }

邓超's avatar
邓超 committed
145 146 147 148 149
            if (flag === 1) {
              setMenuID(result[0].menuID);
              switch (result[0].menuType) {
                case 'MiniAppMenuGroup':
                  setNodeType(1);
150
                  setAddType(1);
邓超's avatar
邓超 committed
151 152 153
                  break;
                case 'MiniAppMenuGroupTwo':
                  setNodeType(2);
154
                  setAddType(2);
邓超's avatar
邓超 committed
155 156 157 158 159 160 161 162 163 164 165 166
                  break;
                case 'MiniAppMenu':
                  setNodeType(3);
                  setAddType(3);
                  break;
                case 'MiniAppMenuThree':
                  setNodeType(4);
                  setAddType(4);
                  break;
                default:
                  break;
              }
167
              setFlag(flag + 1);
168 169
            }
          }
170
          setLoading(false);
171
          setKeepId(result[0]);
Maofei94's avatar
Maofei94 committed
172
          // 第一次加载,默认选择第一个组织
Maofei94's avatar
Maofei94 committed
173
          // if (treeFlag) {
Maofei94's avatar
Maofei94 committed
174 175 176
          //   handleSelect([result[0].menuID], false);
          //   setTreeFlag(false);
          // }
Maofei94's avatar
Maofei94 committed
177 178 179 180 181 182
        } else {
          notification({
            message: '提示',
            duration: 10,
            description: '获取菜单失败',
          });
Maofei94's avatar
Maofei94 committed
183 184 185 186 187 188 189 190 191
        }
      })
      .catch(err => {
        setLoading(false);
        message.error(err);
      });
  };
  // 处理数据
  const mapTree = val => {
192
    const obj = JSON.parse(JSON.stringify(val));
Maofei94's avatar
Maofei94 committed
193 194 195 196 197 198
    const hasChild = obj.children.length > 0;
    return {
      title: (
        <div className={styles.title}>
          <div>{obj.text}</div>
          <div className={styles.tip}>
199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214
            {obj.menuType === 'MiniAppMenuGroup' && (
              <Tooltip title="导入导出菜单组" className={styles.fs}>
                <DeliveredProcedureOutlined
                  style={{ color: '#178BF7' }}
                  onClick={e => importAndExport(obj, e)}
                />
              </Tooltip>
            )}
            {obj.menuType === 'MiniAppMenuGroupTwo' && (
              <Tooltip title="导入导出菜单组" className={styles.fs}>
                <DeliveredProcedureOutlined
                  style={{ color: '#178BF7' }}
                  onClick={e => importAndExport(obj, e)}
                />
              </Tooltip>
            )}
Maofei94's avatar
Maofei94 committed
215
            {obj.menuType === 'MiniAppMenuGroup' && (
Maofei94's avatar
Maofei94 committed
216
              <Tooltip title="新增菜单组" className={styles.fsize}>
217
                <FolderAddTwoTone onClick={e => addMenuGroupTip(obj, e)} />
Maofei94's avatar
Maofei94 committed
218 219 220
              </Tooltip>
            )}
            {obj.menuType === 'MiniAppMenuGroupTwo' && (
Maofei94's avatar
Maofei94 committed
221
              <Tooltip title="新增功能菜单" className={styles.fsize}>
222
                <FileAddTwoTone onClick={e => addMenuTip(obj, e)} />
Maofei94's avatar
Maofei94 committed
223 224
              </Tooltip>
            )}
Maofei94's avatar
Maofei94 committed
225

Maofei94's avatar
Maofei94 committed
226
            <Tooltip title="删除菜单" className={styles.fsize}>
227
              <DeleteTwoTone onClick={e => deleteMenuTip(obj, e)} />
Maofei94's avatar
Maofei94 committed
228
            </Tooltip>
Maofei94's avatar
Maofei94 committed
229 230 231 232 233
          </div>
        </div>
      ),
      key: obj.menuID,
      icon:
234
        obj.menuType !== 'MiniAppMenuThree' && obj.menuType !== 'MiniAppMenu' ? (
235 236
          <FolderFilled />
        ) : (
237
          <FileOutlined />
238
        ),
239

Maofei94's avatar
Maofei94 committed
240 241 242 243
      menuType: obj.menuType,
      children: hasChild ? obj.children.map(i => mapTree(i)) : [],
    };
  };
244 245 246 247 248 249 250 251 252

  const mapData = (val, e) => {
    const obj = { ...val };
    const hasChild = obj.children.length > 0;
    if (hasChild) {
      obj.children.map(i => mapData(i));
    }
    mapDataList.add(obj);
  };
Maofei94's avatar
Maofei94 committed
253 254 255 256 257 258 259 260 261 262
  // 树的点击事件
  const handleSelect = (prop, treeNode) => {
    console.log(prop, treeNode);
    if (treeNode) {
      const {
        node,
        node: { menuType },
      } = treeNode;
      console.log(menuType);
      switch (menuType) {
263
        // 最上级菜单组
Maofei94's avatar
Maofei94 committed
264 265
        case 'MiniAppMenuGroup':
          setNodeType(1);
266
          setAddType(1);
Maofei94's avatar
Maofei94 committed
267
          break;
268
        // 第二级菜单组
Maofei94's avatar
Maofei94 committed
269 270
        case 'MiniAppMenuGroupTwo':
          setNodeType(2);
271
          setAddType(2);
Maofei94's avatar
Maofei94 committed
272
          break;
273
        // 最上级菜单
Maofei94's avatar
Maofei94 committed
274 275 276 277
        case 'MiniAppMenu':
          setNodeType(3);
          setAddType(3);
          break;
278
        // 第三季功能菜单
Maofei94's avatar
Maofei94 committed
279 280 281 282 283 284 285 286 287 288
        case 'MiniAppMenuThree':
          setNodeType(4);
          setAddType(4);
          break;
        default:
          break;
      }
    }
    if (prop[0]) {
      setMenuID(prop[0]);
289
      // setSaveID(prop[0]);
Maofei94's avatar
Maofei94 committed
290 291 292
    }
  };

293 294 295 296
  const handleExpand = (keys, { expanded, node }) => {
    console.log(keys);
  };

Maofei94's avatar
Maofei94 committed
297 298 299 300 301 302 303
  const getInfo = id => {
    if (!menuID) {
      return;
    }
    setLoading(true);
    getMenuInfo({
      menuID,
304
      isMobile: true,
Maofei94's avatar
Maofei94 committed
305 306 307
    })
      .then(res => {
        setLoading(false);
308
        if (res.code === 0) {
309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328
          let infoList = res.data.relatedRoleList.map(item => ({
            groupName: item.groupName,
            isChecked: item.isChecked,
            list: item.list,
            checkedList: new Set([]),
          }));
          setInf(infoList);
          setInfo({ ...res.data });
          let data = new Set();
          infoList.map(item => {
            if (item.isChecked == true) {
              data.add(item.groupName);
            }
            item.list.map(i => {
              if (i.related) {
                item.checkedList.add(i.relatedRoleCode);
              }
            });
          });
          setCheckList(data);
Maofei94's avatar
Maofei94 committed
329 330 331 332
        } else {
          notification.error({
            message: '提示',
            duration: 10,
333
            description: res.msg || '获取失败',
Maofei94's avatar
Maofei94 committed
334 335 336 337 338 339 340 341 342 343
          });
        }
        console.log(res, 'resss');
      })
      .catch(err => {
        setLoading(false);
        console.error(err);
      });
  };
  // 删除的回调
344 345
  const deleteMenuTip = (val, e) => {
    e.stopPropagation();
Maofei94's avatar
Maofei94 committed
346
    console.log(val, 'val');
Maofei94's avatar
Maofei94 committed
347 348 349 350 351 352
    setModalTitle(val.text);
    setNodeObj(val);
    setDelVisible(true);
  };
  const delMenu = () => {
    setModalLoading(true);
Maofei94's avatar
Maofei94 committed
353
    deleteMenu({
Maofei94's avatar
Maofei94 committed
354
      menuID: nodeObj.menuID,
Maofei94's avatar
Maofei94 committed
355 356
      _dc: Date.now(),
      _version: 9999,
Maofei94's avatar
Maofei94 committed
357 358 359
    })
      .then(res => {
        setModalLoading(false);
360
        if (res.code === 0) {
Maofei94's avatar
Maofei94 committed
361 362
          setDelVisible(false);
          setFlag(flag + 1);
363 364 365 366 367 368 369 370
          if (nodeObj.menuID == menuID) {
            updateTrees();
            setMenuID(keepId.menuID);
            setNodeType(1);
            setNodeObj(keepId);
          } else {
            updateTrees();
          }
Maofei94's avatar
Maofei94 committed
371 372 373 374 375 376 377 378 379
          notification.success({
            message: '提示',
            duration: 3,
            description: '删除成功',
          });
        } else {
          notification.error({
            message: '提示',
            duration: 10,
380
            description: res.msg || '删除失败',
Maofei94's avatar
Maofei94 committed
381 382 383 384 385 386 387
          });
        }
      })
      .catch(err => {
        setModalLoading(false);
        console.log(err);
      });
Maofei94's avatar
Maofei94 committed
388
  };
389 390 391 392 393 394
  // 导入导出菜单组
  const importAndExport = (val, e) => {
    e.stopPropagation();
    setNodeObj(val);
    setImportOrExportVisible(true);
  };
Maofei94's avatar
Maofei94 committed
395
  // 新增菜单组
396 397
  const addMenuGroupTip = (val, e) => {
    e.stopPropagation();
Maofei94's avatar
Maofei94 committed
398
    console.log(val, 'addgroup');
Maofei94's avatar
Maofei94 committed
399
    setModalTitle(`在${val.text}下新增菜单组`);
Maofei94's avatar
Maofei94 committed
400
    setNodeObj(val);
401
    setAddType(2);
Maofei94's avatar
Maofei94 committed
402
    setAddVisible(true);
403
    setKeepType('MiniAppMenuGroupTwo');
Maofei94's avatar
Maofei94 committed
404 405 406
  };
  const rootAddGroup = () => {
    setNodeObj('');
Maofei94's avatar
Maofei94 committed
407
    // setNodeType(1);
Maofei94's avatar
Maofei94 committed
408
    setModalTitle('新增最上级菜单组');
Maofei94's avatar
Maofei94 committed
409 410
    setAddType(1);
    setAddVisible(true);
411
    setKeepType('MiniAppMenuGroup');
Maofei94's avatar
Maofei94 committed
412 413
  };
  // 新增功能菜单
414 415
  const addMenuTip = (val, e) => {
    e.stopPropagation();
Maofei94's avatar
Maofei94 committed
416 417
    console.log(val, 'add');
    setNodeObj(val);
Maofei94's avatar
Maofei94 committed
418
    setModalTitle(`在${val.text}下新增功能菜单`);
419
    setAddType(4);
Maofei94's avatar
Maofei94 committed
420
    setAddTwoVisible(true);
421
    setKeepType('MiniAppMenuThree');
Maofei94's avatar
Maofei94 committed
422 423
  };
  const rootAdd = () => {
Maofei94's avatar
Maofei94 committed
424
    setModalTitle('新增最上级功能菜单');
Maofei94's avatar
Maofei94 committed
425
    setNodeObj('');
Maofei94's avatar
Maofei94 committed
426
    // setNodeType(3);
Maofei94's avatar
Maofei94 committed
427 428
    setAddType(3);
    setAddTwoVisible(true);
429
    setKeepType('MiniAppMenu');
Maofei94's avatar
Maofei94 committed
430
  };
431 432
  // 处理数据
  const getParams = prop => {
涂伟's avatar
涂伟 committed
433
    const typeArr = ['MobileGCK', 'civ_mobile', 'flutter'];
434
    let productType = prop.pageUrl?.split('/')[0] || '';
435
    if (productType === '' && prop.pageUrl?.indexOf('http') === -1) {
436 437
      productType = 'MobileGCK';
    }
438
    if (prop.pageUrl?.indexOf('/') === -1) {
439 440
      productType = 'flutter';
    }
441
    if (!typeArr.includes(productType)) {
442 443
      productType = '';
    }
444
    let pageUrl = productType ? prop.pageUrl?.replace(`${productType}`, '') : prop.pageUrl;
445
    if (productType === 'flutter') {
446
      pageUrl = pageUrl.replace('/', '');
447 448 449
    }
    return { productType, pageUrl };
  };
Maofei94's avatar
Maofei94 committed
450
  // 新增提交的回调
451
  const submitCallback = (prop, item, e) => {
Maofei94's avatar
Maofei94 committed
452
    setSubmitLoading(true);
453 454 455 456 457 458 459
    // const productType =
    //   prop.pageUrl.split('/')[1] === 'civ_mobile' ? prop.pageUrl.split('/')[1] : '';
    // const pageUrl = prop.pageUrl.includes('/civ_mobile')
    //   ? prop.pageUrl.replace('/civ_mobile', '')
    //   : prop.pageUrl;
    const params = getParams(prop);
    let obj = { ...prop, ...params };
Maofei94's avatar
Maofei94 committed
460 461 462
    // if (addType === 3 || addType === 4) {
    //   obj.relatedRoleList = String(roleList) || '';
    // }
463
    console.log(e);
皮倩雯's avatar
皮倩雯 committed
464
    const parentID = item.menuID ? item.menuID : '-1';
Maofei94's avatar
Maofei94 committed
465 466 467
    addMenu({
      _dc: Date.now(),
      parentID,
Maofei94's avatar
Maofei94 committed
468
      subSystemValue: clientName || 'miniapp',
Maofei94's avatar
Maofei94 committed
469 470 471 472
      _version: 9999,
      ...obj,
    })
      .then(res => {
Maofei94's avatar
Maofei94 committed
473
        setSubmitLoading(false);
474
        if (res.code === 0) {
Maofei94's avatar
Maofei94 committed
475 476 477
          setAddVisible(false);
          setAddTwoVisible(false);
          setFlag(flag + 1);
478 479
          console.log(prop);
          console.log(item);
480
          updateTrees(res.data);
Maofei94's avatar
Maofei94 committed
481 482 483 484 485 486 487 488
          notification.success({
            message: '提示',
            description: '新增成功',
            duration: 3,
          });
        } else {
          notification.error({
            message: '提示',
489
            description: res.msg || '新增失败',
Maofei94's avatar
Maofei94 committed
490 491 492 493 494
            duration: 10,
          });
        }
      })
      .catch(err => {
Maofei94's avatar
Maofei94 committed
495
        setSubmitLoading(false);
Maofei94's avatar
Maofei94 committed
496 497 498 499 500
        console.error(err);
      });
  };
  // 编辑的回调
  const editSubmitCallback = prop => {
501 502 503 504 505 506
    // const productType =
    //   prop.pageUrl.split('/')[1] === 'civ_mobile' ? prop.pageUrl.split('/')[1] : '';
    // const pageUrl = prop.pageUrl.includes('/civ_mobile')
    //   ? prop.pageUrl.replace('/civ_mobile', '')
    //   : prop.pageUrl;
    const params = getParams(prop);
Maofei94's avatar
Maofei94 committed
507 508
    setLoading(true);
    console.log(prop);
509
    let obj = { ...prop, ...params };
510 511 512
    // if (nodeType === 3 || nodeType === 4) {
    //   obj.relatedRoleList = String(roleList) || '';
    // }
Maofei94's avatar
Maofei94 committed
513 514 515
    editMenu({
      _dc: Date.now(),
      menuID,
Maofei94's avatar
Maofei94 committed
516
      subSystemValue: clientName || 'miniapp',
Maofei94's avatar
Maofei94 committed
517 518 519 520 521 522
      _version: 9999,
      ...obj,
    })
      .then(res => {
        setLoading(false);

523
        if (res.code === 0) {
Maofei94's avatar
Maofei94 committed
524
          setFlag(flag + 1);
525
          updateTrees();
Maofei94's avatar
Maofei94 committed
526 527 528 529 530 531 532 533 534
          notification.success({
            message: '提示',
            duration: 3,
            description: '编辑成功',
          });
        } else {
          notification.error({
            message: '提示',
            duration: 3,
535
            description: res.msg || '编辑失败',
Maofei94's avatar
Maofei94 committed
536 537 538 539 540 541 542 543 544
          });
        }
        console.log(res, 'resres');
      })
      .catch(err => {
        console.error(err);
        setLoading(false);
      });
  };
Maofei94's avatar
Maofei94 committed
545
  // 复选框选中值
Maofei94's avatar
Maofei94 committed
546
  const valueCallback = val => {
Maofei94's avatar
Maofei94 committed
547 548
    console.log(val, 'val');
    // relatedRoleCode
Maofei94's avatar
Maofei94 committed
549 550 551 552 553 554 555 556 557
    let arr = [...val];
    let arr2 = [];
    arr.map(item => {
      if (item.related) {
        arr2.push(item.relatedRoleCode);
      }
    });
    setRoleList(arr2);
  };
558 559 560
  // 遍历数组,找出key值与之相同的对象(节点),执行callback函数
  // 若key值不匹配且含有children,则循环遍历
  // 否则不执行任何操作
561 562 563 564 565 566 567 568 569 570
  const loop = (data, key, parentID, callback) => {
    for (let i = 0; i < data.length; i++) {
      if (data[i].menuID === key) {
        return callback(data[i], i, data, parentID);
      }
      if (data[i].children) {
        loop(data[i].children, key, data[i].menuID, callback);
      }
    }
  };
Maofei94's avatar
Maofei94 committed
571
  // 树的拖动
Maofei94's avatar
Maofei94 committed
572
  const handleDrop = infos => {
573 574 575
    const dropKey = infos.node.key;
    const dragKey = infos.dragNode.key;
    const dropPos = infos.node.pos.split('-');
576
    const dropPosition = infos.dropPosition - Number(dropPos[dropPos.length - 1]);
577
    const data = JSON.parse(JSON.stringify(treeData));
578 579 580 581 582
    // 找到拖拽的元素
    let dragObj;
    let dropObj;
    let id;
    let dragList;
583 584

    // 保存拖拽到的节点信息
585 586
    loop(data, dropKey, -1, item => {
      dropObj = item;
Maofei94's avatar
Maofei94 committed
587
    });
588
    // 保存节点信息并删除节点
589
    loop(data, dragKey, -1, (item, index, arr) => {
590 591
      arr.splice(index, 1);
      dragObj = item;
Maofei94's avatar
Maofei94 committed
592
    });
593 594 595 596 597
    console.log(dragObj.menuType, 'dragObj');
    console.log(dropObj.menuType, 'dropObj');
    // console.log(dropPos, 'dropPosition');
    // 拖拽到的位置不能在菜单下面
    if (
598
      (dropObj.menuType === 'MiniAppMenuThree' || dropObj.menuType === 'MiniAppMenu') &&
599
      !infos.dropToGap
600
    ) {
601 602 603 604 605 606 607 608 609
      return;
    }

    // 将节点插入到正确位置
    if (!infos.dropToGap) {
      console.log('111111');
      // 菜单不能拖拽到跟一级菜单组下
      if (
        dropObj.menuType === 'MiniAppMenuGroup' &&
610
        (dragObj.menuType === 'MiniAppMenuThree' || dragObj.menuType === 'MiniAppMenu')
611 612 613 614 615 616
      ) {
        return;
      }
      // 一级菜单组只能在一级菜单组平级拖拽
      if (
        dragObj.menuType === 'MiniAppMenuGroup' &&
617
        (dropObj.menuType === 'MiniAppMenuGroup' || dropObj.menuType === 'MiniAppMenuGroupTwo')
618 619 620 621 622 623
      ) {
        return;
      }
      // 二级菜单组只能在一级的菜单组下面
      if (
        dragObj.menuType === 'MiniAppMenuGroupTwo' &&
624
        (dropObj.menuType === 'MiniAppMenuGroupTwo' || dropObj.menuType === 'MiniAppMenu')
625 626 627 628 629 630 631 632
      ) {
        return;
      }
      dropObj.children = dropObj.children || [];
      // 在哪里插入,示例添加到头部,可以是随意位置
      dropObj.children.unshift(dragObj);
      id = dropObj.menuID;
      dragList = dropObj.children.map(val => val.menuID);
633
    } else {
634 635 636
      // 菜单不能拖拽到跟一级菜单组下
      if (
        dropObj.menuType === 'MiniAppMenuGroupTwo' &&
637
        (dragObj.menuType === 'MiniAppMenuThree' || dragObj.menuType === 'MiniAppMenu')
638 639 640 641 642 643
      ) {
        return;
      }
      // 一级菜单组只能在一级菜单组平级拖拽
      if (
        dragObj.menuType === 'MiniAppMenuGroup' &&
644
        (dropObj.menuType === 'MiniAppMenuGroupTwo' || dropObj.menuType === 'MiniAppMenuThree')
645 646 647 648 649 650 651 652 653 654 655 656
      ) {
        return;
      }
      // 二级菜单组只能在一级的菜单组下面
      if (
        dragObj.menuType === 'MiniAppMenuGroupTwo' &&
        (dropObj.menuType === 'MiniAppMenuGroup' ||
          dropObj.menuType === 'MiniAppMenuThree' ||
          dropObj.menuType === 'MiniAppMenu')
      ) {
        return;
      }
657 658 659 660 661 662 663
      let ar;
      let i;
      loop(data, dropKey, -1, (item, index, arr, parentID) => {
        ar = arr;
        i = index;
        id = parentID;
      });
Maofei94's avatar
Maofei94 committed
664
      if (dropPosition === -1) {
665 666 667
        ar.splice(i, 0, dragObj);
      } else {
        ar.splice(i + 1, 0, dragObj);
Maofei94's avatar
Maofei94 committed
668
      }
669 670
      dragList = ar.map(val => val.menuID);
    }
671
    console.log(dragList, 'dragList');
672 673 674
    // 如果拖拽到菜单下不做任何处理
    if (!dragList) {
      return;
Maofei94's avatar
Maofei94 committed
675 676
    }
    dragMenu({
677 678 679
      menuID: dragKey,
      newParentID: id.toString() || '-1',
      menuList: String(dragList) || '',
Maofei94's avatar
Maofei94 committed
680 681 682
      _version: 9999,
      _dc: Date.now(),
    }).then(res => {
皮倩雯's avatar
皮倩雯 committed
683
      if (res.code === 0) {
684
        updateTrees();
Maofei94's avatar
Maofei94 committed
685 686 687 688
      } else {
        notification.error({
          message: '提示',
          duration: 3,
689
          description: res.msg || '操作失败',
Maofei94's avatar
Maofei94 committed
690 691 692 693 694 695
        });
      }
    });
  };
  const findNum = (array, id, callback, parentId = '') => {
    let ptId = parentId;
Maofei94's avatar
Maofei94 committed
696
    let arrFlag = true;
Maofei94's avatar
Maofei94 committed
697 698
    array.map((item, index) => {
      if (item.menuID === id) {
Maofei94's avatar
Maofei94 committed
699
        callback(array, id, parentId, index);
Maofei94's avatar
Maofei94 committed
700
        arrFlag = false;
Maofei94's avatar
Maofei94 committed
701
        return;
Maofei94's avatar
Maofei94 committed
702
      }
Maofei94's avatar
Maofei94 committed
703
      if (arrFlag && item.children && item.children.length > 0) {
Maofei94's avatar
Maofei94 committed
704
        ptId = item.menuID;
Maofei94's avatar
Maofei94 committed
705
        findNum(item.children, id, callback, ptId);
Maofei94's avatar
Maofei94 committed
706 707 708 709 710 711
      }
    });
  };
  const getArrList = (arr, id, parentId, index) => {
    console.log(arr, 'arr', id, 'id', parentId, 'parentId', index, 'index');
    return { arr, id, parentId, index };
Maofei94's avatar
Maofei94 committed
712
  };
Maofei94's avatar
Maofei94 committed
713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735
  return (
    <Spin spinning={loading} tip="loading...">
      <div
        className={classnames({
          [styles.box]: true,
        })}
      >
        <div
          className={classnames({
            [styles.left]: true,
          })}
        >
          <div
            className={classnames({
              [styles.leftTop]: true,
            })}
          >
            菜单列表
            <div
              className={classnames({
                [styles.tRight]: true,
              })}
            >
736 737 738 739 740 741 742 743 744
              <Tooltip title="导入导出菜单组" className={styles.fs}>
                <DeliveredProcedureOutlined
                  style={{ color: '#178BF7', marginRight: '10px' }}
                  onClick={() => {
                    setNodeObj('');
                    setImportOrExportVisible(true);
                  }}
                />
              </Tooltip>
Maofei94's avatar
Maofei94 committed
745
              <Tooltip title="新增最上级菜单组">
Maofei94's avatar
Maofei94 committed
746 747 748 749 750
                <FolderAddTwoTone
                  className={`${styles.icon1} ${styles.icon}`}
                  onClick={() => rootAddGroup()}
                />
              </Tooltip>
Maofei94's avatar
Maofei94 committed
751
              <Tooltip title="新增最上级功能菜单">
Maofei94's avatar
Maofei94 committed
752 753 754 755 756 757 758
                <FileAddTwoTone
                  onClick={() => rootAdd()}
                  className={`${styles.icon2} ${styles.icon}`}
                />
              </Tooltip>
            </div>
          </div>
759 760 761 762 763 764 765 766 767 768 769
          <Search
            style={{
              marginBottom: 8,
              width: '98%',
              marginLeft: '7px',
            }}
            value={keywords}
            placeholder="快速搜索菜单"
            onChange={onChangeSearch}
            onSearch={onSearch}
          />
Maofei94's avatar
Maofei94 committed
770
          {treeData.length > 0 ? (
771
            <div style={{ height: 'calc(100% - 35px)', overflowY: 'scroll' }}>
772 773 774 775 776 777 778 779
              <Tree
                showIcon
                onSelect={handleSelect}
                treeData={treeData.map(item => mapTree(item))}
                blockNode
                draggable
                autoExpandParent
                onDrop={handleDrop}
780
                onExpand={handleExpand}
781
                selectedKeys={[menuID]}
782
                expandedKeys={expendKey}
783 784
              />
            </div>
Maofei94's avatar
Maofei94 committed
785
          ) : (
786
            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无菜单" />
Maofei94's avatar
Maofei94 committed
787 788 789 790
          )}
        </div>
        <Modal
          visible={addVisible}
Maofei94's avatar
Maofei94 committed
791
          title={modalTitle}
Maofei94's avatar
Maofei94 committed
792
          bodyStyle={{ width: '100%', minHeight: '100px' }}
Maofei94's avatar
Maofei94 committed
793
          style={{ top: 80 }}
Maofei94's avatar
Maofei94 committed
794 795 796 797 798
          width="600px"
          destroyOnClose
          footer={null}
          cancelText="取消"
          okText="确认"
Maofei94's avatar
Maofei94 committed
799
          maskClosable={false}
Maofei94's avatar
Maofei94 committed
800 801 802 803 804
          onCancel={() => setAddVisible(false)}
        >
          <AddForm
            nodeType={nodeType}
            nodeObj={nodeObj}
805
            keepType={keepType}
Maofei94's avatar
Maofei94 committed
806 807
            addType={addType}
            submitCallback={submitCallback}
Maofei94's avatar
Maofei94 committed
808
            submitLoading={submitLoading}
Maofei94's avatar
Maofei94 committed
809 810
            valueCallback={valueCallback}
            addList={addList}
Maofei94's avatar
Maofei94 committed
811 812 813 814
          />
        </Modal>
        <Modal
          visible={addTwoVisible}
Maofei94's avatar
Maofei94 committed
815
          title={modalTitle}
Maofei94's avatar
Maofei94 committed
816 817 818 819 820 821
          bodyStyle={{
            width: '100%',
            minHeight: '100px',
            maxHeight: '700px',
            overflowY: 'scroll',
          }}
Maofei94's avatar
Maofei94 committed
822
          style={{ top: 80 }}
Maofei94's avatar
Maofei94 committed
823 824 825 826 827
          width="600px"
          destroyOnClose
          footer={null}
          cancelText="取消"
          okText="确认"
Maofei94's avatar
Maofei94 committed
828
          maskClosable={false}
Maofei94's avatar
Maofei94 committed
829 830 831
          onCancel={() => setAddTwoVisible(false)}
        >
          <AddForm
Maofei94's avatar
Maofei94 committed
832
            submitLoading={submitLoading}
Maofei94's avatar
Maofei94 committed
833 834
            nodeType={nodeType}
            nodeObj={nodeObj}
835
            keepType={keepType}
Maofei94's avatar
Maofei94 committed
836
            addType={addType}
Maofei94's avatar
Maofei94 committed
837
            addList={addList}
Maofei94's avatar
Maofei94 committed
838
            submitCallback={submitCallback}
Maofei94's avatar
Maofei94 committed
839
            valueCallback={valueCallback}
Maofei94's avatar
Maofei94 committed
840 841
          />
        </Modal>
Maofei94's avatar
Maofei94 committed
842 843 844 845 846 847 848 849 850
        <Modal
          visible={delVisible}
          title="请确认"
          bodyStyle={{ width: '100%', minHeight: '100px' }}
          style={{ top: 80 }}
          width="400px"
          destroyOnClose
          cancelText="取消"
          okText="确认"
Maofei94's avatar
Maofei94 committed
851
          maskClosable={false}
Maofei94's avatar
Maofei94 committed
852 853 854 855
          onCancel={() => setDelVisible(false)}
          onOk={() => delMenu()}
          confirmLoading={modalLoading}
        >
856 857 858 859 860 861 862 863 864
          {nodeObj.children && nodeObj.children.length > 0 ? (
            <span>
              是否删除<span style={{ color: 'red' }}>{modalTitle}</span>及其子菜单?
            </span>
          ) : (
            <span>
              是否删除<span style={{ color: 'red' }}>{modalTitle}</span>?
            </span>
          )}
Maofei94's avatar
Maofei94 committed
865
        </Modal>
Maofei94's avatar
Maofei94 committed
866 867 868 869 870
        <div
          className={classnames({
            [styles.middle]: true,
          })}
        >
Maofei94's avatar
Maofei94 committed
871 872
          菜单配置
          {nodeType ? (
873 874 875 876
            <div style={{ marginTop: '10px' }}>
              <EditForm
                nodeType={nodeType}
                info={info}
877 878
                inf={inf}
                checkList={checkList}
879 880 881 882 883 884 885 886 887 888 889 890 891 892 893 894
                submitCallback={editSubmitCallback}
                valueCallback={valueCallback}
              />
              {/* <div
                className={classnames({
                  [styles.rightBox]: true,
                })}
              >
                关联角色
                <CheckList
                  info={info}
                  nodeType={nodeType}
                  valueCallback={valueCallback}
                />
              </div> */}
            </div>
Maofei94's avatar
Maofei94 committed
895
          ) : (
896
            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="当前未选中菜单" />
Maofei94's avatar
Maofei94 committed
897 898
          )}
        </div>
899 900 901 902 903 904 905 906 907
        <ImportOrExport
          visible={importOrExportVisible}
          onCancel={() => {
            setImportOrExportVisible(false);
            updateTrees();
          }}
          subSystemValue={clientName}
          nodeObj={nodeObj}
        />
Maofei94's avatar
Maofei94 committed
908 909 910 911 912
      </div>
    </Spin>
  );
};

Maofei94's avatar
Maofei94 committed
913
export default MiniMenu;