webMenu.jsx 21.6 KB
Newer Older
1
/* eslint-disable no-debugger */
皮倩雯's avatar
皮倩雯 committed
2 3 4
/* eslint-disable array-callback-return */
/* eslint-disable no-plusplus */
/* eslint-disable consistent-return */
5
import React, { useEffect, useState, useRef } from 'react';
张烨's avatar
张烨 committed
6 7
import { notification, Tooltip, Modal, Spin, Empty } from 'antd';
import Tree from '@/components/ExpendableTree';
张烨's avatar
张烨 committed
8 9 10 11 12 13
import {
  FileAddTwoTone,
  FolderAddTwoTone,
  FolderFilled,
  FileOutlined,
  DeleteTwoTone,
14
  DeliveredProcedureOutlined,
张烨's avatar
张烨 committed
15 16
} from '@ant-design/icons';
import classnames from 'classnames';
张烨's avatar
张烨 committed
17
import styles from './webMenu.less';
张烨's avatar
张烨 committed
18 19 20
import AddForm from './AddForm';
import EditForm from './editForm';
import CheckList from './checkBox';
21
import ImportOrExport from './ImportOrExport';
张烨's avatar
张烨 committed
22 23 24 25 26
import {
  addWebMenu, // 增
  deleteWebMenu, // 删
  editWebMenu, // 改
  getWebMenuInfo, // 查
Maofei94's avatar
Maofei94 committed
27
  dragMenu, // 菜单拖拽
Maofei94's avatar
Maofei94 committed
28
  getWebModuleTree,
Maofei94's avatar
Maofei94 committed
29
  pEditWebMenu,
张烨's avatar
张烨 committed
30
} from '@/services/webConfig/api';
张烨's avatar
张烨 committed
31 32

const MiniMenu = props => {
33
  const { menu, configFiles, subSystemValue, updateMenuTree, userMode, webid, productList } = props;
张烨's avatar
张烨 committed
34 35 36 37 38
  const [flag, setFlag] = useState(1); // 刷新标志
  const [loading, setLoading] = useState(false); // 加载
  const [menuID, setMenuID] = useState(''); // 选中的树ID
  const [nodeType, setNodeType] = useState(''); // 选中的节点类型
  const [info, setInfo] = useState({});
39
  const [infoAll, setInfoAll] = useState({});
40
  const [importOrExportVisible, setImportOrExportVisible] = useState(false); // 导入导出弹窗
张烨's avatar
张烨 committed
41 42 43 44 45 46 47 48 49
  const [addVisible, setAddVisible] = useState(false); // 新增弹窗
  const [addTwoVisible, setAddTwoVisible] = useState(false); // 编辑弹窗
  const [delVisible, setDelVisible] = useState(false); // 删除弹窗
  const [nodeObj, setNodeObj] = useState({});
  const [addType, setAddType] = useState(''); // 添加下级类型
  const [modalTitle, setModalTitle] = useState('');
  const [roleList, setRoleList] = useState([]); // 复选框选中的值
  const [modalLoading, setModalLoading] = useState(false);
  const [submitLoading, setSubmitLoading] = useState(false);
Maofei94's avatar
Maofei94 committed
50
  const [newTreeList, setNewTreeList] = useState([]);
51 52
  const [checkList, setCheckList] = useState([]);
  const [flagg, setFlagg] = useState(0);
53
  const [expendKey, setExpendKey] = useState(''); // 保存默认展开项
Maofei94's avatar
Maofei94 committed
54
  const [menuList, setMenuList] = useState([]); // 菜单树
55
  const [keepId, setKeepId] = useState('');
56
  const [mapDataList, setMapDataList] = useState(new Set());
张烨's avatar
张烨 committed
57 58 59

  /* *****************************************************  */
  const [curMenuType, setCurMenuType] = useState('');
60
  const parentRef = useRef();
张烨's avatar
张烨 committed
61 62 63

  // 获取菜单信息
  useEffect(() => {
64 65 66 67
    console.log(menuID, flag);
    if (flag === 1) {
      setExpendKey(menuID);
    }
68
    console.log(expendKey);
张烨's avatar
张烨 committed
69
    getInfo();
Maofei94's avatar
Maofei94 committed
70
  }, [menuID, webid]);
71 72 73
  // useEffect(() => {
  //   getTree();
  // }, []);
Maofei94's avatar
Maofei94 committed
74
  useEffect(() => {
75
    getTree();
Maofei94's avatar
Maofei94 committed
76 77 78
    return () => {
      setLoading(false);
    };
79
  }, [webid]);
Maofei94's avatar
Maofei94 committed
80

张烨's avatar
张烨 committed
81 82 83 84 85 86 87
  // 处理数据
  const mapTree = val => {
    const obj = { ...val };
    const hasChild = obj.children.length > 0;
    return {
      title: (
        <div className={styles.title}>
88
          <div className={styles.titleText}>{obj.text}</div>
张烨's avatar
张烨 committed
89
          <div className={styles.tip}>
90 91 92 93 94 95 96 97
            {obj.menuType === 'Web4MenuGroup' && (
              <Tooltip title="导入导出菜单组" className={styles.fs}>
                <DeliveredProcedureOutlined
                  style={{ color: '#178BF7' }}
                  onClick={e => importAndExport(obj, e)}
                />
              </Tooltip>
            )}
张烨's avatar
张烨 committed
98
            {obj.menuType === 'Web4MenuGroup' && (
张烨's avatar
张烨 committed
99
              <Tooltip title="新增菜单组" className={styles.fs}>
张烨's avatar
张烨 committed
100
                <FolderAddTwoTone onClick={e => addMenuGroupTip(obj, e)} />
张烨's avatar
张烨 committed
101 102
              </Tooltip>
            )}
张烨's avatar
张烨 committed
103
            {obj.menuType === 'Web4MenuGroup' && (
张烨's avatar
张烨 committed
104
              <Tooltip title="新增功能菜单" className={styles.fs}>
张烨's avatar
张烨 committed
105
                <FileAddTwoTone onClick={e => addMenuTip(obj, e)} />
张烨's avatar
张烨 committed
106 107 108 109
              </Tooltip>
            )}

            <Tooltip title="删除菜单" className={styles.fs}>
张烨's avatar
张烨 committed
110
              <DeleteTwoTone onClick={e => deleteMenuTip(obj, e)} />
张烨's avatar
张烨 committed
111 112 113 114 115
            </Tooltip>
          </div>
        </div>
      ),
      key: obj.menuID,
116
      icon: obj.menuType === 'Web4MenuGroup' ? <FolderFilled /> : <FileOutlined />,
张烨's avatar
张烨 committed
117 118 119 120
      menuType: obj.menuType,
      children: hasChild ? obj.children.map(i => mapTree(i)) : [],
    };
  };
121 122 123 124 125 126 127 128
  const mapData = (val, e) => {
    const obj = { ...val };
    const hasChild = obj.children.length > 0;
    if (hasChild) {
      obj.children.map(i => mapData(i));
    }
    mapDataList.add(obj);
  };
张烨's avatar
张烨 committed
129 130
  // 树的点击事件
  const handleSelect = (prop, treeNode) => {
131 132
    console.log(prop);
    console.log(treeNode);
张烨's avatar
张烨 committed
133 134 135 136
    if (treeNode) {
      const {
        node: { menuType },
      } = treeNode;
137
      console.log(menuType);
张烨's avatar
张烨 committed
138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158
      switch (menuType) {
        case 'Web4MenuGroup':
          setNodeType(2);
          setAddType(2);
          break;
        default:
          setNodeType(1);
          setAddType(1);
          break;
      }
    }
    if (prop[0]) {
      setMenuID(prop[0]);
    }
  };

  const getInfo = id => {
    if (!menuID) {
      return;
    }
    setLoading(true);
张烨's avatar
张烨 committed
159
    getWebMenuInfo({
张烨's avatar
张烨 committed
160 161 162 163 164
      menuID,
      _dc: Date.now(),
    })
      .then(res => {
        setLoading(false);
165
        if (res.code === 0) {
166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185
          let infoList = res.data.relatedRoleList.map(item => ({
            groupName: item.groupName,
            isChecked: item.isChecked,
            list: item.list,
            checkedList: new Set([]),
          }));
          setInfo(infoList);
          setInfoAll({ ...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);
张烨's avatar
张烨 committed
186 187 188 189
        } else {
          notification.error({
            message: '提示',
            duration: 10,
190
            description: res.msg || '获取失败',
张烨's avatar
张烨 committed
191 192 193 194 195 196 197 198 199
          });
        }
      })
      .catch(err => {
        setLoading(false);
        console.error(err);
      });
  };
  // 删除的回调
张烨's avatar
张烨 committed
200 201
  const deleteMenuTip = (val, e) => {
    e.stopPropagation();
202
    console.log(val);
203
    console.log(e);
张烨's avatar
张烨 committed
204 205 206 207 208 209
    setModalTitle(val.text);
    setNodeObj(val);
    setDelVisible(true);
  };
  const delMenu = () => {
    setModalLoading(true);
张烨's avatar
张烨 committed
210
    deleteWebMenu({
张烨's avatar
张烨 committed
211 212 213 214 215
      menuID: nodeObj.menuID,
      _dc: Date.now(),
    })
      .then(res => {
        setModalLoading(false);
216
        if (res.code === 0) {
张烨's avatar
张烨 committed
217
          setDelVisible(false);
218
          // setFlag(flag + 1);
219 220 221 222 223 224 225 226
          if (nodeObj.menuID == menuID) {
            getTree();
            setMenuID(keepId.menuID);
            setNodeType(2);
            setNodeObj(keepId);
          } else {
            getTree();
          }
Maofei94's avatar
Maofei94 committed
227
          // updateMenuTree('delete', nodeObj);
张烨's avatar
张烨 committed
228 229 230 231 232 233 234 235 236
          notification.success({
            message: '提示',
            duration: 3,
            description: '删除成功',
          });
        } else {
          notification.error({
            message: '提示',
            duration: 10,
237
            description: res.msg || '删除失败',
张烨's avatar
张烨 committed
238 239 240 241 242
          });
        }
      })
      .catch(err => {
        setModalLoading(false);
张烨's avatar
张烨 committed
243
        console.error(err);
张烨's avatar
张烨 committed
244 245
      });
  };
246 247 248 249 250 251
  // 导入导出菜单组
  const importAndExport = (val, e) => {
    e.stopPropagation();
    setNodeObj(val);
    setImportOrExportVisible(true);
  };
张烨's avatar
张烨 committed
252
  // 新增菜单组
张烨's avatar
张烨 committed
253 254
  const addMenuGroupTip = (val, e) => {
    e.stopPropagation();
Maofei94's avatar
Maofei94 committed
255
    setModalTitle(`在${val.text}下新增菜单组`);
张烨's avatar
张烨 committed
256
    setNodeObj(val);
张烨's avatar
张烨 committed
257
    setAddType(2);
张烨's avatar
张烨 committed
258 259 260 261
    setAddVisible(true);
  };
  const rootAddGroup = () => {
    setNodeObj('');
Maofei94's avatar
Maofei94 committed
262
    setModalTitle('新增最上级菜单组');
张烨's avatar
张烨 committed
263
    setAddType(2);
张烨's avatar
张烨 committed
264 265 266
    setAddVisible(true);
  };
  // 新增功能菜单
张烨's avatar
张烨 committed
267 268
  const addMenuTip = (val, e) => {
    e.stopPropagation();
张烨's avatar
张烨 committed
269
    setNodeObj(val);
Maofei94's avatar
Maofei94 committed
270
    setModalTitle(`在${val.text}下新增功能菜单`);
张烨's avatar
张烨 committed
271
    setAddType(1);
张烨's avatar
张烨 committed
272 273 274
    setAddTwoVisible(true);
  };
  const rootAdd = () => {
Maofei94's avatar
Maofei94 committed
275
    setModalTitle('新增最上级功能菜单');
张烨's avatar
张烨 committed
276
    setNodeObj('');
张烨's avatar
张烨 committed
277
    setAddType(1);
张烨's avatar
张烨 committed
278 279
    setAddTwoVisible(true);
  };
Maofei94's avatar
Maofei94 committed
280 281 282 283 284 285
  const handleGeturl = val => {
    let url;
    const isSite = val.includes('CityTemp');
    if (isSite) {
      url = val;
    } else {
286
      url = localStorage.getItem('pd2-baseUrl') ? localStorage.getItem('pd2-baseUrl') + val : val;
Maofei94's avatar
Maofei94 committed
287 288 289
    }
    return url;
  };
290 291
  // 导入或导出弹窗回调
  const onFinishCallBack = () => {};
张烨's avatar
张烨 committed
292 293
  // 新增提交的回调
  const submitCallback = (prop, item) => {
294
    console.log(subSystemValue, 'subSystemValue');
张烨's avatar
张烨 committed
295
    setSubmitLoading(true);
Maofei94's avatar
Maofei94 committed
296 297
    let baseUrl = handleGeturl(prop.imageUrl);
    let obj = { ...prop, baseUrl };
298
    const parentID = item.menuID ? Number(item.menuID) : -1;
张烨's avatar
张烨 committed
299
    addWebMenu({
张烨's avatar
张烨 committed
300 301
      _dc: Date.now(),
      parentID,
张烨's avatar
张烨 committed
302
      subSystemValue,
张烨's avatar
张烨 committed
303 304 305 306
      ...obj,
    })
      .then(res => {
        setSubmitLoading(false);
307
        if (res.code === 0) {
308
          console.log(res.data);
张烨's avatar
张烨 committed
309 310
          setAddVisible(false);
          setAddTwoVisible(false);
311
          // setFlag(flag + 1);
312 313
          console.log(prop);
          getTree(res.data);
Maofei94's avatar
Maofei94 committed
314
          // updateMenuTree('add', item);
张烨's avatar
张烨 committed
315 316 317 318 319 320 321 322
          notification.success({
            message: '提示',
            description: '新增成功',
            duration: 3,
          });
        } else {
          notification.error({
            message: '提示',
323
            description: res.msg || '新增失败',
张烨's avatar
张烨 committed
324 325 326 327 328 329 330 331 332
            duration: 10,
          });
        }
      })
      .catch(err => {
        setSubmitLoading(false);
        console.error(err);
      });
  };
333 334 335 336
  const treeCallback = value => {
    if (value) {
      console.log(value);
    }
337
  };
张烨's avatar
张烨 committed
338 339 340
  // 编辑的回调
  const editSubmitCallback = prop => {
    setLoading(true);
Maofei94's avatar
Maofei94 committed
341 342
    let baseUrl = handleGeturl(prop.imageUrl);
    let obj = { ...prop, baseUrl };
343
    console.log(obj);
张烨's avatar
张烨 committed
344
    if (nodeType === 1) {
345
      // obj.relatedRoleList = roleList || '';
Maofei94's avatar
Maofei94 committed
346 347
      editWebMenu({
        _dc: Date.now(),
348
        menuID: Number(menuID),
Maofei94's avatar
Maofei94 committed
349 350 351 352 353
        // subSystemValue,
        ...obj,
      })
        .then(res => {
          setLoading(false);
354
          if (res.code === 0) {
355 356
            // setFlag(flag + 1);
            getTree();
Maofei94's avatar
Maofei94 committed
357 358 359 360 361 362 363 364 365 366
            // updateMenuTree('edit');
            notification.success({
              message: '提示',
              duration: 3,
              description: '编辑成功',
            });
          } else {
            notification.error({
              message: '提示',
              duration: 3,
皮倩雯's avatar
皮倩雯 committed
367
              description: res.msg || '编辑失败',
Maofei94's avatar
Maofei94 committed
368 369 370 371 372 373 374 375 376
            });
          }
        })
        .catch(err => {
          // eslint-disable-next-line no-console
          console.error(err);
          setLoading(false);
        });
    } else {
377 378
      // 新接口改为editWebMenu 原来为pEditWebMenu
      editWebMenu({
Maofei94's avatar
Maofei94 committed
379
        _dc: Date.now(),
380
        menuID: Number(menuID),
Maofei94's avatar
Maofei94 committed
381 382
        // subSystemValue,
        ...obj,
383 384
        product: null,
        baseUrl: null,
385
        hideInMenu: false,
张烨's avatar
张烨 committed
386
      })
Maofei94's avatar
Maofei94 committed
387 388
        .then(res => {
          setLoading(false);
389
          if (res.code === 0) {
390 391
            // setFlag(flag + 1);
            getTree();
Maofei94's avatar
Maofei94 committed
392 393 394 395 396 397 398 399 400 401
            // updateMenuTree('edit');
            notification.success({
              message: '提示',
              duration: 3,
              description: '编辑成功',
            });
          } else {
            notification.error({
              message: '提示',
              duration: 3,
402
              description: res.msg || '编辑失败',
Maofei94's avatar
Maofei94 committed
403 404 405 406 407 408 409 410 411
            });
          }
        })
        .catch(err => {
          // eslint-disable-next-line no-console
          console.error(err);
          setLoading(false);
        });
    }
张烨's avatar
张烨 committed
412 413
  };
  const valueCallback = val => {
414 415 416 417 418 419 420 421 422
    console.log(val);
    // let arr = [...val];
    // let arr2 = [];
    // arr.map(item => {
    //   if (item.related) {
    //     arr2.push(item.relatedRoleCode);
    //   }
    // });
    setRoleList(val.toString());
张烨's avatar
张烨 committed
423
  };
424 425 426 427 428 429 430 431 432 433 434
  // 返回拖拽完毕后的信息
  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);
      }
    }
  };
435
  const getTree = e => {
436 437 438 439 440 441 442 443 444
    getWebModuleTree(userMode || 'super')
      .then(res => {
        setLoading(false);
        const { code, data } = res;
        if (code === 0) {
          let arr = data
            .filter(item => item.id === 'Web4SingleStation')
            .map(r => r.children.filter(i => i.id === webid))
            .flat(2);
445
          let arr2 = arr[0].children.find(item => item.text === '菜单管理').children || [];
446
          setMenuList(arr2 || []);
447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467
          if (e) {
            arr2.map(item => mapData(item, e));
            console.log([...mapDataList]);
            let aa = [...mapDataList].find(i => i.menuID == e);
            console.log(aa);
            setMenuID(aa.menuID);
            setExpendKey(aa.menuID);
            console.log(expendKey);
            switch (aa.menuType) {
              case 'Web4MenuGroup':
                setNodeType(2);
                setAddType(2);
                break;
              default:
                setNodeType(1);
                setAddType(1);
                break;
            }
          }
          setKeepId(arr2[0]);

468 469
          // 进页面后默认展示第一条数据
          if (arr2.length > 0) {
邓超's avatar
邓超 committed
470 471 472 473 474 475 476 477 478 479 480 481 482
            if (flag === 1) {
              setMenuID(arr2[0].menuID);
              switch (arr2[0].menuType) {
                case 'Web4MenuGroup':
                  setNodeType(2);
                  setAddType(2);
                  break;
                default:
                  setNodeType(1);
                  setAddType(1);
                  break;
              }
            }
483 484 485

            setFlag(flag + 1);
          }
486 487 488 489 490 491
        }
      })
      .catch(err => {
        setLoading(false);
      });
  };
Maofei94's avatar
Maofei94 committed
492 493
  // 树的拖动
  const handleDrop = infos => {
494 495 496
    const dropKey = infos.node.key;
    const dragKey = infos.dragNode.key;
    const dropPos = infos.node.pos.split('-');
497
    const dropPosition = infos.dropPosition - Number(dropPos[dropPos.length - 1]);
498

499 500 501 502 503 504 505 506
    const data = [...menuList];
    // 找到拖拽的元素
    let dragObj;
    let dropObj;
    let id;
    let dragList;
    loop(data, dropKey, -1, item => {
      dropObj = item;
Maofei94's avatar
Maofei94 committed
507
    });
508
    loop(data, dragKey, -1, (item, index, arr) => {
509
      if (infos.dropToGap || dropObj.menuType !== 'Web4Menu') {
510 511
        arr.splice(index, 1);
        dragObj = item;
Maofei94's avatar
Maofei94 committed
512 513
      }
    });
514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544
    if (!infos.dropToGap) {
      // Drop on the content
      loop(data, dropKey, -1, item => {
        item.children = item.children || [];
        if (item.menuType !== 'Web4Menu') {
          // where to insert 示例添加到头部,可以是随意位置
          item.children.unshift(dragObj);
          id = item.menuID;
          dragList = item.children.map(val => val.menuID);
        }
      });
    } else if (
      (infos.node.props.children || []).length > 0 && // Has children
      infos.node.props.expanded && // Is expanded
      dropPosition === 1 // On the bottom gap
    ) {
      loop(data, dropKey, -1, item => {
        item.children = item.children || [];
        // where to insert 示例添加到头部,可以是随意位置
        item.children.unshift(dragObj);
        id = item.menuID;
        dragList = item.children.map(val => val.menuID);
      });
    } else {
      let ar;
      let i;
      loop(data, dropKey, -1, (item, index, arr, parentID) => {
        ar = arr;
        i = index;
        id = parentID;
      });
Maofei94's avatar
Maofei94 committed
545
      if (dropPosition === -1) {
546 547 548
        ar.splice(i, 0, dragObj);
      } else {
        ar.splice(i + 1, 0, dragObj);
Maofei94's avatar
Maofei94 committed
549
      }
550 551 552 553 554
      dragList = ar.map(val => val.menuID);
    }
    // 如果拖拽到菜单下不做任何处理
    if (!dragList) {
      return;
Maofei94's avatar
Maofei94 committed
555
    }
556
    console.log(dragList, 'dragList');
Maofei94's avatar
Maofei94 committed
557
    dragMenu({
558 559 560
      menuID: dragKey,
      newParentID: id || -1,
      menuList: String(dragList) || '',
Maofei94's avatar
Maofei94 committed
561 562 563
      _version: 9999,
      _dc: Date.now(),
    }).then(res => {
564
      if (res.code === 0) {
Maofei94's avatar
Maofei94 committed
565
        // updateMenuTree();
566 567
        getTree();
        // setFlag(flag + 1);
Maofei94's avatar
Maofei94 committed
568 569 570 571
      } else {
        notification.error({
          message: '提示',
          duration: 3,
572
          description: res.msg || '操作失败',
Maofei94's avatar
Maofei94 committed
573 574 575 576
        });
      }
    });
  };
张烨's avatar
张烨 committed
577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594
  return (
    <Spin spinning={loading} tip="loading...">
      <div
        className={classnames({
          [styles.box]: true,
        })}
      >
        <div
          className={classnames({
            [styles.left]: true,
          })}
        >
          <div
            className={classnames({
              [styles.leftTop]: true,
            })}
          >
            菜单列表
595
            <div className={classnames(styles.tRight)}>
596 597 598 599 600 601 602 603 604
              <Tooltip title="导入导出菜单组" className={styles.fs}>
                <DeliveredProcedureOutlined
                  style={{ color: '#178BF7', marginRight: '10px' }}
                  onClick={() => {
                    setNodeObj('');
                    setImportOrExportVisible(true);
                  }}
                />
              </Tooltip>
Maofei94's avatar
Maofei94 committed
605
              <Tooltip title="新增最上级菜单组">
张烨's avatar
张烨 committed
606 607 608 609 610
                <FolderAddTwoTone
                  className={`${styles.icon1} ${styles.icon}`}
                  onClick={() => rootAddGroup()}
                />
              </Tooltip>
Maofei94's avatar
Maofei94 committed
611
              <Tooltip title="新增最上级功能菜单">
张烨's avatar
张烨 committed
612 613 614 615 616 617 618
                <FileAddTwoTone
                  onClick={() => rootAdd()}
                  className={`${styles.icon2} ${styles.icon}`}
                />
              </Tooltip>
            </div>
          </div>
Maofei94's avatar
Maofei94 committed
619
          {menuList.length > 0 && (
620 621 622 623 624 625 626 627 628 629
            <div style={{ height: 'calc(100vh - 240px)', overflowY: 'scroll' }}>
              <Tree
                showIcon
                onSelect={handleSelect}
                treeData={menuList.map(item => mapTree(item))}
                blockNode
                draggable
                autoExpandParent
                selectedKeys={[menuID]}
                onDrop={handleDrop}
630
                expandedKeys={expendKey}
631 632
              />
            </div>
张烨's avatar
张烨 committed
633 634 635 636
          )}
        </div>
        <Modal
          visible={addVisible}
Maofei94's avatar
Maofei94 committed
637
          title={modalTitle}
张烨's avatar
张烨 committed
638 639 640 641 642 643 644
          bodyStyle={{ width: '100%', minHeight: '100px' }}
          style={{ top: 80 }}
          width="600px"
          destroyOnClose
          footer={null}
          cancelText="取消"
          okText="确认"
Maofei94's avatar
Maofei94 committed
645
          maskClosable={false}
张烨's avatar
张烨 committed
646 647 648 649 650 651 652 653
          onCancel={() => setAddVisible(false)}
          onConfirm={() => {
            submitCallback();
          }}
        >
          <AddForm
            nodeObj={nodeObj}
            addType={addType}
张烨's avatar
张烨 committed
654
            configFiles={configFiles}
张烨's avatar
张烨 committed
655 656
            submitCallback={submitCallback}
            submitLoading={submitLoading}
Maofei94's avatar
Maofei94 committed
657
            productList={productList}
张烨's avatar
张烨 committed
658 659 660 661
          />
        </Modal>
        <Modal
          visible={addTwoVisible}
Maofei94's avatar
Maofei94 committed
662
          title={modalTitle}
张烨's avatar
张烨 committed
663 664 665 666 667
          bodyStyle={{ width: '100%', minHeight: '100px' }}
          style={{ top: 80 }}
          width="600px"
          destroyOnClose
          footer={null}
Maofei94's avatar
Maofei94 committed
668
          maskClosable={false}
张烨's avatar
张烨 committed
669 670 671 672 673 674 675
          cancelText="取消"
          okText="确认"
          onCancel={() => setAddTwoVisible(false)}
        >
          <AddForm
            submitLoading={submitLoading}
            nodeObj={nodeObj}
张烨's avatar
张烨 committed
676
            configFiles={configFiles}
张烨's avatar
张烨 committed
677
            addType={addType}
Maofei94's avatar
Maofei94 committed
678
            productList={productList}
张烨's avatar
张烨 committed
679 680 681 682 683 684 685 686 687 688 689 690
            submitCallback={submitCallback}
          />
        </Modal>
        <Modal
          visible={delVisible}
          title="请确认"
          bodyStyle={{ width: '100%', minHeight: '100px' }}
          style={{ top: 80 }}
          width="400px"
          destroyOnClose
          cancelText="取消"
          okText="确认"
Maofei94's avatar
Maofei94 committed
691
          maskClosable={false}
张烨's avatar
张烨 committed
692 693 694 695
          onCancel={() => setDelVisible(false)}
          onOk={() => delMenu()}
          confirmLoading={modalLoading}
        >
696 697 698 699 700 701 702 703 704
          {nodeObj.children && nodeObj.children.length > 0 ? (
            <span>
              是否删除<span style={{ color: 'red' }}>{modalTitle}</span>及其子菜单?
            </span>
          ) : (
            <span>
              是否删除<span style={{ color: 'red' }}>{modalTitle}</span>?
            </span>
          )}
张烨's avatar
张烨 committed
705 706 707 708 709 710
        </Modal>
        <div
          className={classnames({
            [styles.middle]: true,
          })}
        >
Maofei94's avatar
Maofei94 committed
711 712
          菜单配置
          {nodeType ? (
张烨's avatar
张烨 committed
713 714 715
            <EditForm
              nodeType={nodeType}
              info={info}
716 717
              infoAll={infoAll}
              checkList={checkList}
张烨's avatar
张烨 committed
718
              configFiles={configFiles}
Maofei94's avatar
Maofei94 committed
719
              productList={productList}
张烨's avatar
张烨 committed
720
              submitCallback={editSubmitCallback}
Maofei94's avatar
Maofei94 committed
721
              valueCallback={valueCallback}
张烨's avatar
张烨 committed
722
            />
Maofei94's avatar
Maofei94 committed
723
          ) : (
724
            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="当前未选中菜单" />
张烨's avatar
张烨 committed
725 726
          )}
        </div>
727 728 729 730 731 732 733 734 735 736
        <ImportOrExport
          visible={importOrExportVisible}
          onFinish={onFinishCallBack}
          onCancel={() => {
            setImportOrExportVisible(false);
            getTree();
          }}
          subSystemValue={subSystemValue}
          nodeObj={nodeObj}
        />
Maofei94's avatar
Maofei94 committed
737
        {/* <div
张烨's avatar
张烨 committed
738 739 740 741 742 743 744 745 746 747
          className={classnames({
            [styles.rightBox]: true,
          })}
        >
          关联角色
          <CheckList
            info={info}
            nodeType={nodeType}
            valueCallback={valueCallback}
          />
Maofei94's avatar
Maofei94 committed
748
        </div> */}
张烨's avatar
张烨 committed
749 750 751 752 753 754
      </div>
    </Spin>
  );
};

export default MiniMenu;