RoleManage.jsx 26.8 KB
Newer Older
1
import React, { useState, useEffect } from 'react';
2 3 4 5 6 7 8 9 10 11 12 13 14
import {
  Row,
  Col,
  Card,
  Input,
  Spin,
  notification,
  Button,
  Tooltip,
  Space,
  Empty,
  message,
} from 'antd';
张烨's avatar
张烨 committed
15
import Tree from '@/components/ExpendableTree';
Maofei94's avatar
Maofei94 committed
16
import PageContainer from '@/components/BasePageContainer';
17 18 19
import {
  DoubleLeftOutlined,
  DoubleRightOutlined,
陈前坚's avatar
陈前坚 committed
20
  BarsOutlined,
Maofei94's avatar
Maofei94 committed
21
  UserOutlined,
Maofei94's avatar
Maofei94 committed
22 23
  DesktopOutlined,
  MobileOutlined,
shaoan123's avatar
shaoan123 committed
24 25 26 27 28
  FolderAddTwoTone,
  PlusSquareOutlined,
  FormOutlined,
  EditOutlined,
  DeleteOutlined,
29
  UserAddOutlined,
30
} from '@ant-design/icons';
Maofei94's avatar
Maofei94 committed
31
import {
Maofei94's avatar
Maofei94 committed
32
  setMenuToRole,
Maofei94's avatar
Maofei94 committed
33
  getRoleGroupList,
Maofei94's avatar
Maofei94 committed
34
  getMenuByRoleWithLevel,
35
  DragGroup,
Maofei94's avatar
Maofei94 committed
36
  getWebConfigTypes,
邓超's avatar
邓超 committed
37
} from '@/services/RoleManage/api';
38
import ListCard, { checkChildrenByCondition, getId } from '@/components/CheckGroup';
Maofei94's avatar
Maofei94 committed
39
// import ListCard from '@/pages/orgnazation/ListCard';
Maofei94's avatar
Maofei94 committed
40
import qs from 'qs';
Maofei94's avatar
Maofei94 committed
41
import classnames from 'classnames';
42 43 44 45
import styles from '@/pages/userCenter/roleManage/RoleManage.less';
import AddModal from './AddModal';
import DelModal from './DelModal';
import EditModal from './EditModal';
Maofei94's avatar
Maofei94 committed
46
import EditGroup from './EditGroup';
陈前坚's avatar
陈前坚 committed
47
import userStyles from '@/pages/userCenter/userManage/UserManage.less';
Maofei94's avatar
Maofei94 committed
48
import iconStyles from '@/assets/font/omsfont/iconfont.css';
49
import UserModal from './UserModal';
50
import SelectUser from './SelectUser/SelectUser';
shaoan123's avatar
shaoan123 committed
51
import { data } from '@/pages/platformCenter/messageManage/projectManage/components/Mock';
张烨's avatar
张烨 committed
52

53
const { Search } = Input;
Maofei94's avatar
Maofei94 committed
54
const placeholder = '请输入功能名称';
Maofei94's avatar
Maofei94 committed
55

56 57 58
const SiteManage = () => {
  const [treeData, setTreeData] = useState([]);
  const [searchWord, setSearchWord] = useState('');
Maofei94's avatar
Maofei94 committed
59
  const [roleID, setRoleID] = useState(''); // 角色ID
Maofei94's avatar
Maofei94 committed
60
  const [saveTreeId, setSaveTreeId] = useState(''); // 保存点击回调的roleid
61 62
  const [modalVisible, setModalVisible] = useState(false); // 新增弹窗
  const [flag, setFlag] = useState(1);
63
  const [flagSearch, setFlagSearch] = useState(0);
Maofei94's avatar
Maofei94 committed
64
  const [itemObj, setItemObj] = useState(''); // 选择的角色item
65 66
  const [delVisible, setDelVisible] = useState(false); // 删除弹窗
  const [editVisible, setEditVisible] = useState(false); // 修改弹窗
Maofei94's avatar
Maofei94 committed
67 68
  const [subList, setSubList] = useState([]); // 选中的数组
  const [spinLoading, setSpinLoading] = useState(false);
Maofei94's avatar
Maofei94 committed
69
  const [currentSelectId, setCurrentSelectId] = useState([]); // 选中的树节点
Maofei94's avatar
Maofei94 committed
70
  const [saveCurId, setSaveCurId] = useState([]); // 树节点ID
Maofei94's avatar
Maofei94 committed
71
  const [groupVisible, setGroupVisible] = useState(false); // 分组编辑弹窗
72
  const [userVisible, setUserVisible] = useState(false); // 用户关联弹窗
Maofei94's avatar
Maofei94 committed
73
  const [hasData, setHasData] = useState(false);
张烨's avatar
张烨 committed
74 75 76
  const [valueList, setValueList] = useState([]);
  const [dataList, setdataList] = useState([]);
  const [loading, setLoading] = useState(true);
Maofei94's avatar
Maofei94 committed
77
  const [btnLoading, setBtnLoading] = useState(false);
Maofei94's avatar
Maofei94 committed
78
  const [mulu, setMulu] = useState(true); // 展示目录
Maofei94's avatar
Maofei94 committed
79 80
  const [siteList, setSiteList] = useState([]);
  const [disFlag, setDisFlag] = useState(false);
81 82
  const [chileID, setChildID] = useState([]);
  const [descrip, setDescrip] = useState('当前未选中角色');
83
  const [keepTree, setKeepTree] = useState([]);
84
  // const [childData, setChildData] = useState({visibleValue:''})
张烨's avatar
张烨 committed
85

86
  // 点击树的回调
Maofei94's avatar
Maofei94 committed
87
  const handleTreeSelect = (e, treenode) => {
88 89
    console.log(e);
    console.log(treenode);
Maofei94's avatar
Maofei94 committed
90 91 92 93
    if (treenode) {
      const { node } = treenode;
      const { roleID: id } = node;
      setItemObj(node);
皮倩雯's avatar
皮倩雯 committed
94
      console.log(id);
Maofei94's avatar
Maofei94 committed
95 96
      if (id) {
        setSaveTreeId(id);
皮倩雯's avatar
皮倩雯 committed
97
        if (node.BuiltInRole === true) {
98
          setRoleID('');
皮倩雯's avatar
皮倩雯 committed
99
          setDescrip('内置角色不可配置菜单权限');
100 101 102 103 104
          setFlagSearch(0);
        } else {
          setRoleID(id);
          setFlagSearch(1);
        }
105 106
        setValueList([...valueList]);
        console.log([...valueList]);
Maofei94's avatar
Maofei94 committed
107
      } else {
Maofei94's avatar
Maofei94 committed
108 109
        // setRoleID(saveTreeId);
        setRoleID('');
110 111
        setDescrip('当前未选中角色');
        setFlagSearch(0);
Maofei94's avatar
Maofei94 committed
112
      }
Maofei94's avatar
Maofei94 committed
113 114 115 116 117
    }

    if (e[0]) {
      setCurrentSelectId(e);
      setSaveCurId(e);
118
    } else {
Maofei94's avatar
Maofei94 committed
119
      setCurrentSelectId(saveCurId);
120 121
    }
  };
122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137
  // useEffect(() => {
  //   setSpinLoading(true);
  //   getRoleGroupList({ userID: '1' }).then(res => {
  //     setSpinLoading(false);
  //     if (res.code === 0) {
  //       const { roleList } = res.data;
  //       let arr = transTree(roleList);
  //       console.log(roleList);
  //       console.log(arr);
  //       setTreeData(arr);
  //     }
  //   });
  //   return () => {
  //     setItemObj('');
  //   };
  // }, [flag]);
138
  useEffect(() => {
139 140 141 142
    getRoleGroup();
  }, []);
  // 获取角色菜单树
  const getRoleGroup = () => {
Maofei94's avatar
Maofei94 committed
143
    setSpinLoading(true);
Maofei94's avatar
Maofei94 committed
144
    getRoleGroupList({ userID: '1' }).then(res => {
Maofei94's avatar
Maofei94 committed
145
      setSpinLoading(false);
Maofei94's avatar
Maofei94 committed
146 147
      if (res.code === 0) {
        const { roleList } = res.data;
皮倩雯's avatar
皮倩雯 committed
148
        console.log(res.data);
Maofei94's avatar
Maofei94 committed
149
        let arr = transTree(roleList);
150
        console.log(arr);
Maofei94's avatar
Maofei94 committed
151
        setTreeData(arr);
152 153 154 155 156 157 158
        let aa = [];
        arr.forEach(i => {
          console.log(i.visibleValue);
          aa.push(i.visibleValue);
        });
        console.log(aa);
        setKeepTree(aa);
Maofei94's avatar
Maofei94 committed
159
      }
Maofei94's avatar
Maofei94 committed
160
    });
161
  };
张烨's avatar
张烨 committed
162 163

  useEffect(() => {
164
    console.log('进入');
张烨's avatar
张烨 committed
165
    if (!roleID) return;
166
    console.log('选择后');
张烨's avatar
张烨 committed
167 168 169 170 171 172
    setLoading(true);
    const defaultConfig = {
      optionsList: [],
      title: '默认组',
      id: '',
    };
Maofei94's avatar
Maofei94 committed
173
    getMenuByRoleWithLevel({
张烨's avatar
张烨 committed
174 175 176 177 178 179 180
      roleID: itemObj.roleID,
      subSystemValue: itemObj.subSystemValue,
      subSystemName: itemObj.subSystemValue,
    })
      .then(res => {
        const list = [];
        // eslint-disable-next-line no-unused-expressions
181 182
        res.code === 0 &&
          res.data.root.forEach(item => {
张烨's avatar
张烨 committed
183 184
            list.push({ ...defaultConfig, ...item });
          });
185 186
        console.log(list);
        setdataList(list);
张烨's avatar
张烨 committed
187
        setValueList(
188
          list
张烨's avatar
张烨 committed
189 190 191 192
            .map(l =>
              checkChildrenByCondition(
                l,
                it => (it.isChecked ? [getId(it)] : []),
张烨's avatar
张烨 committed
193
                true,
张烨's avatar
张烨 committed
194 195 196 197 198 199
                'map',
              ).flat(Infinity),
            )
            .flat(Infinity)
            .filter(Boolean),
        );
200
        console.log(valueList);
张烨's avatar
张烨 committed
201 202 203 204 205 206 207
        setLoading(false);
      })
      .catch(err => {
        setLoading(false);
      });
  }, [roleID]);

208 209 210
  const handleAdd = e => {
    setModalVisible(true);
  };
Maofei94's avatar
Maofei94 committed
211
  // 角色删除
212 213 214
  const handleDel = e => {
    setDelVisible(true);
  };
Maofei94's avatar
Maofei94 committed
215
  // 编辑角色
216 217 218
  const handleEdit = e => {
    setEditVisible(true);
  };
Maofei94's avatar
Maofei94 committed
219 220 221 222 223 224
  // 分组编辑
  const groupEdit = () => {
    setGroupVisible(true);
  };
  // 树形数据转换;
  const transTree = val => {
225
    let arr = val;
226
    console.log(arr);
Maofei94's avatar
Maofei94 committed
227
    let newArr = [];
Maofei94's avatar
Maofei94 committed
228
    // 提取child里面的数组
Maofei94's avatar
Maofei94 committed
229
    let arr2 = arr.filter(item => {
Maofei94's avatar
Maofei94 committed
230 231 232 233 234
      if (item.child && item.child.length > 0) {
        item.child.forEach(itemC => {
          item.roleList.unshift(itemC);
        });
      }
Maofei94's avatar
Maofei94 committed
235 236 237 238
      // if (item.visibleTitle === '手持系统') {
      //   item.icon = <span className="iconfont iconanzhuo1" />;
      //   newArr[0] = item;
      // }
Maofei94's avatar
Maofei94 committed
239
      if (item.type === 'mobile') {
Maofei94's avatar
Maofei94 committed
240
        item.icon = <MobileOutlined />;
Maofei94's avatar
Maofei94 committed
241
        // newArr[0] = item;
Maofei94's avatar
Maofei94 committed
242
      } else {
Maofei94's avatar
Maofei94 committed
243
        item.icon = <DesktopOutlined />;
Maofei94's avatar
Maofei94 committed
244
      }
Maofei94's avatar
Maofei94 committed
245
      return (
Maofei94's avatar
Maofei94 committed
246 247 248 249
        item.visibleTitle !== '其它角色' &&
        item.visibleTitle !== '运维管理' &&
        item.visibleTitle !== '手持系统' &&
        item.visibleTitle !== '小程序'
Maofei94's avatar
Maofei94 committed
250
      );
Maofei94's avatar
Maofei94 committed
251
    });
Maofei94's avatar
Maofei94 committed
252
    arr2 = arr2.concat(newArr);
Maofei94's avatar
Maofei94 committed
253
    let arr3 = arr2.map(item => {
Maofei94's avatar
Maofei94 committed
254 255 256
      if (item.visibleTitle === '小程序') {
        item.visibleTitle = '移动应用';
      }
Maofei94's avatar
Maofei94 committed
257 258
      item.title = item.visibleTitle || '';
      item.key = item.visibleValue || '';
Maofei94's avatar
Maofei94 committed
259
      if (item.roleList && item.roleList.length > 0) {
Maofei94's avatar
Maofei94 committed
260
        item.roleList.map((itemRole, index) => {
Maofei94's avatar
Maofei94 committed
261 262
          if (itemRole.roleList) {
            itemRole.title = itemRole.visibleTitle || '';
Maofei94's avatar
Maofei94 committed
263
            itemRole.key = itemRole.visibleTitle + itemRole.visibleValue || '';
Maofei94's avatar
Maofei94 committed
264
            itemRole.groupflag = itemRole.visibleTitle;
陈前坚's avatar
陈前坚 committed
265
            itemRole.icon = <BarsOutlined />;
Maofei94's avatar
Maofei94 committed
266 267
            itemRole.roleList.map(i => {
              i.title = i.roleName;
shaoan123's avatar
shaoan123 committed
268 269 270 271 272 273 274
              i.title = (
                <div className={styles.title}>
                  <div className={styles.titleTop}>{i.title}</div>
                  <div className={styles.tip}>
                    {i.roleID && (
                      <>
                        <Tooltip title="编辑角色" className={styles.fs}>
275
                          <FormOutlined
276
                            style={{ fontSize: '16px', color: '#1890FF', marginTop: '5px' }}
277 278 279 280 281
                            onClick={e => editorUser(e, i)}
                          />
                        </Tooltip>
                        <Tooltip title="删除角色" className={styles.fs}>
                          <DeleteOutlined
282
                            style={{ fontSize: '16px', color: '#1890FF', marginTop: '5px' }}
283 284 285 286 287
                            onClick={e => deletesUser(e, i)}
                          />
                        </Tooltip>
                        <Tooltip title="关联用户" className={styles.fs}>
                          <UserAddOutlined
288
                            style={{ fontSize: '16px', color: '#1890FF', marginTop: '5px' }}
289 290 291 292
                            onClick={e => relevancyUser(e, i)}
                          />
                        </Tooltip>
                      </>
293
                    )}
294
                    {!i.roleID && (
295
                      <Tooltip title="新增角色" className={styles.fs}>
296
                        <PlusSquareOutlined
297
                          style={{ fontSize: '16px', color: '#1890FF', marginTop: '5px' }}
298 299
                          onClick={e => addsUser(e, i)}
                        />
300
                      </Tooltip>
shaoan123's avatar
shaoan123 committed
301
                    )}
皮倩雯's avatar
皮倩雯 committed
302
                    {i.groupflag && (
shaoan123's avatar
shaoan123 committed
303
                      <Tooltip title="编辑分组" className={styles.fs}>
304
                        <EditOutlined
305
                          style={{ fontSize: '16px', color: '#1890FF', marginTop: '5px' }}
306 307
                          onClick={e => editorGroup(e, i)}
                        />
shaoan123's avatar
shaoan123 committed
308 309 310 311
                      </Tooltip>
                    )}
                  </div>
                </div>
312
              );
Maofei94's avatar
Maofei94 committed
313 314 315
              i.key = i.roleID;
              i.subSystemValue = item.visibleValue;
              i.group = itemRole.visibleTitle;
316 317 318 319 320 321
              console.log(i.BuiltInRole);
              if (i.BuiltInRole === true) {
                i.icon = <UserOutlined style={{ color: '#dfb14b' }} />;
              } else {
                i.icon = <UserOutlined />;
              }
张烨's avatar
张烨 committed
322
              if (roleID && roleID === i.roleID) {
Maofei94's avatar
Maofei94 committed
323
                setItemObj(i);
Maofei94's avatar
Maofei94 committed
324
                // setCurrentSelectId(roleID);
Maofei94's avatar
Maofei94 committed
325
              }
Maofei94's avatar
Maofei94 committed
326 327 328
            });
            itemRole.children = itemRole.roleList;
          } else {
329
            console.log(itemRole.BuiltInRole);
Maofei94's avatar
Maofei94 committed
330 331 332
            itemRole.title = itemRole.roleName;
            itemRole.key = itemRole.roleID;
            itemRole.subSystemValue = item.visibleValue;
333 334 335 336 337
            if (itemRole.BuiltInRole === true) {
              itemRole.icon = <UserOutlined style={{ color: '#dfb14b' }} />;
            } else {
              itemRole.icon = <UserOutlined />;
            }
张烨's avatar
张烨 committed
338
            if (roleID && roleID === itemRole.roleID) {
Maofei94's avatar
Maofei94 committed
339
              setItemObj(itemRole);
Maofei94's avatar
Maofei94 committed
340
              // setCurrentSelectId(roleID);
Maofei94's avatar
Maofei94 committed
341
            }
Maofei94's avatar
Maofei94 committed
342
          }
shaoan123's avatar
shaoan123 committed
343 344 345 346 347 348 349
          itemRole.title = (
            <div className={styles.title}>
              <div className={styles.titleTop}>{itemRole.title}</div>
              <div className={styles.tip}>
                {itemRole.roleID && (
                  <>
                    <Tooltip title="编辑角色" className={styles.fs}>
350
                      <FormOutlined
351
                        style={{ fontSize: '16px', color: '#1890FF', marginTop: '5px' }}
352 353 354 355 356
                        onClick={e => editorUser(e, itemRole)}
                      />
                    </Tooltip>
                    <Tooltip title="删除角色" className={styles.fs}>
                      <DeleteOutlined
357
                        style={{ fontSize: '16px', color: '#1890FF', marginTop: '5px' }}
358 359 360 361 362
                        onClick={e => deletesUser(e, itemRole)}
                      />
                    </Tooltip>
                    <Tooltip title="关联用户" className={styles.fs}>
                      <UserAddOutlined
363
                        style={{ fontSize: '16px', color: '#1890FF', marginTop: '5px' }}
364 365 366 367
                        onClick={e => relevancyUser(e, itemRole)}
                      />
                    </Tooltip>
                  </>
368
                )}
369
                {!itemRole.roleID && (
370
                  <Tooltip title="新增角色" className={styles.fs}>
371
                    <PlusSquareOutlined
372
                      style={{ fontSize: '16px', color: '#1890FF', marginTop: '5px' }}
373 374
                      onClick={e => addsUser(e, itemRole)}
                    />
375
                  </Tooltip>
shaoan123's avatar
shaoan123 committed
376
                )}
皮倩雯's avatar
皮倩雯 committed
377
                {itemRole.groupflag && (
shaoan123's avatar
shaoan123 committed
378
                  <Tooltip title="编辑分组" className={styles.fs}>
379
                    <EditOutlined
380
                      style={{ fontSize: '16px', color: '#1890FF', marginTop: '5px' }}
381 382
                      onClick={e => editorGroup(e, itemRole)}
                    />
shaoan123's avatar
shaoan123 committed
383 384 385 386
                  </Tooltip>
                )}
              </div>
            </div>
387
          );
Maofei94's avatar
Maofei94 committed
388
          return itemRole;
Maofei94's avatar
Maofei94 committed
389
        });
390
      }
Maofei94's avatar
Maofei94 committed
391
      item.children = item.roleList;
shaoan123's avatar
shaoan123 committed
392 393 394 395 396 397 398
      item.title = (
        <div className={styles.title}>
          <div className={styles.titleTop}>{item.title}</div>
          <div className={styles.tip}>
            {item.roleID && (
              <>
                <Tooltip title="编辑角色" className={styles.fs}>
399
                  <FormOutlined
400
                    style={{ fontSize: '16px', color: '#1890FF', marginTop: '5px' }}
401 402 403 404 405
                    onClick={e => editorUser(e, item)}
                  />
                </Tooltip>
                <Tooltip title="删除角色" className={styles.fs}>
                  <DeleteOutlined
406
                    style={{ fontSize: '16px', color: '#1890FF', marginTop: '5px' }}
407 408 409 410 411
                    onClick={e => deletesUser(e, item)}
                  />
                </Tooltip>
                <Tooltip title="关联用户" className={styles.fs}>
                  <UserAddOutlined
412
                    style={{ fontSize: '16px', color: '#1890FF', marginTop: '5px' }}
413 414 415 416
                    onClick={e => relevancyUser(e, item)}
                  />
                </Tooltip>
              </>
417
            )}
418
            {!item.roleID && (
419
              <Tooltip title="新增角色" className={styles.fs}>
420
                <PlusSquareOutlined
421
                  style={{ fontSize: '16px', color: '#1890FF', marginTop: '5px' }}
422 423
                  onClick={e => addsUser(e, item)}
                />
424
              </Tooltip>
shaoan123's avatar
shaoan123 committed
425
            )}
皮倩雯's avatar
皮倩雯 committed
426
            {item.groupflag && (
shaoan123's avatar
shaoan123 committed
427
              <Tooltip title="编辑分组" className={styles.fs}>
428
                <EditOutlined
429
                  style={{ fontSize: '16px', color: '#1890FF', marginTop: '5px' }}
430 431
                  onClick={e => editorGroup(e, item)}
                />
shaoan123's avatar
shaoan123 committed
432 433 434 435
              </Tooltip>
            )}
          </div>
        </div>
436
      );
437 438
      return item;
    });
shaoan123's avatar
shaoan123 committed
439

Maofei94's avatar
Maofei94 committed
440
    return arr3;
441
  };
442
  // 编辑角色
443
  const editorUser = (e, record) => {
444
    console.log(e);
shaoan123's avatar
shaoan123 committed
445 446 447
    e.stopPropagation();
    setItemObj(record);
    setEditVisible(true);
448
  };
449
  // 删除角色
450
  const deletesUser = (e, record) => {
shaoan123's avatar
shaoan123 committed
451 452 453
    e.stopPropagation();
    setItemObj(record);
    setDelVisible(true);
454
  };
455
  // 关联用户
456
  const relevancyUser = (e, record) => {
shaoan123's avatar
shaoan123 committed
457 458
    e.stopPropagation();
    setItemObj(record);
459 460
    setUserVisible(true);
  };
461
  // 编辑分组
462
  const editorGroup = (e, record) => {
shaoan123's avatar
shaoan123 committed
463 464 465
    e.stopPropagation();
    setItemObj(record);
    setGroupVisible(true);
466
  };
467
  // 新增角色
468
  const addsUser = (e, record) => {
shaoan123's avatar
shaoan123 committed
469 470 471
    e.stopPropagation();
    setItemObj(record);
    setModalVisible(true);
472
  };
Maofei94's avatar
Maofei94 committed
473 474 475 476
  const handleChange = e => {
    const { value } = e.target;
    setSearchWord(value);
  };
shaoan123's avatar
shaoan123 committed
477

Maofei94's avatar
Maofei94 committed
478
  // 确认回调
479 480
  const confirmModal = e => {
    setModalVisible(false);
Maofei94's avatar
Maofei94 committed
481 482
    // setRoleID(`${e}`);
    // setCurrentSelectId([`${e}`]);
483 484
    // setFlag(flag + 1);
    getRoleGroup();
Maofei94's avatar
Maofei94 committed
485
    setItemObj('');
486
  };
Maofei94's avatar
Maofei94 committed
487
  // 删除弹窗回调
488 489
  const delModal = () => {
    setDelVisible(false);
490 491
    // setFlag(flag + 1);
    getRoleGroup();
Maofei94's avatar
Maofei94 committed
492
    setRoleID('');
Maofei94's avatar
Maofei94 committed
493
    setItemObj('');
494
  };
Maofei94's avatar
Maofei94 committed
495
  // 编辑弹窗回调
皮倩雯's avatar
皮倩雯 committed
496
  const editModal = prop => {
497
    setEditVisible(false);
498 499
    // setFlag(flag + 1);
    getRoleGroup();
Maofei94's avatar
Maofei94 committed
500
    handleTreeSelect(saveCurId);
皮倩雯's avatar
皮倩雯 committed
501 502 503 504 505 506 507 508 509 510 511 512 513 514 515
    console.log(currentSelectId);
    console.log(itemObj);
    console.log(roleID);
    console.log(prop);
    if (itemObj.roleID === currentSelectId[0]) {
      if (prop == true) {
        setRoleID('');
        setDescrip('内置角色不可配置菜单权限');
        setFlagSearch(0);
      } else {
        setRoleID(currentSelectId);
        setFlagSearch(1);
      }
    }

Maofei94's avatar
Maofei94 committed
516
    // setItemObj('');
Maofei94's avatar
Maofei94 committed
517 518 519 520
  };
  // 分组编辑回调
  const groupModal = () => {
    setGroupVisible(false);
521 522
    // setFlag(flag + 1);
    getRoleGroup();
Maofei94's avatar
Maofei94 committed
523
    setItemObj('');
Maofei94's avatar
Maofei94 committed
524
    handleTreeSelect(saveCurId);
525
  };
526 527
  const userModal = () => {
    setUserVisible(false);
528 529
    // setFlag(flag + 1);
    getRoleGroup();
530 531
    setItemObj('');
    handleTreeSelect(saveCurId);
532
  };
Maofei94's avatar
Maofei94 committed
533 534 535
  const valueCallback = valueObj => {
    setSubList(valueObj);
  };
Maofei94's avatar
Maofei94 committed
536 537 538
  const handleHide = () => {
    setMulu(!mulu);
  };
Maofei94's avatar
Maofei94 committed
539
  const handleCommit = results => {
Maofei94's avatar
Maofei94 committed
540
    setBtnLoading(true);
541 542 543 544
    setMenuToRole({
      roleID: Number(roleID),
      menuIdList: String(results.flat()),
    })
Maofei94's avatar
Maofei94 committed
545
      .then(res => {
Maofei94's avatar
Maofei94 committed
546
        setBtnLoading(false);
547
        if (res.code === 0) {
Maofei94's avatar
Maofei94 committed
548
          setValueList([...results.flat()]);
Maofei94's avatar
Maofei94 committed
549 550 551 552 553 554 555 556
          notification.success({
            message: '提示',
            duration: 3,
            description: '设置成功',
          });
        } else {
          notification.error({
            message: '提示',
Maofei94's avatar
Maofei94 committed
557
            duration: 15,
558
            description: res.msg,
Maofei94's avatar
Maofei94 committed
559 560 561 562
          });
        }
      })
      .catch(err => {
Maofei94's avatar
Maofei94 committed
563
        setBtnLoading(false);
Maofei94's avatar
Maofei94 committed
564
      });
565
  };
566
  const handleUserAttach = () => {
567 568
    setUserVisible(true);
  };
569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585
  // 返回拖拽完毕后的信息
  const loop = (datas, key, parentID, callback) => {
    for (let i = 0; i < datas.length; i++) {
      if (datas[i].key === key) {
        return callback(datas[i], i, datas, parentID);
      }
      if (datas[i].children) {
        loop(datas[i].children, key, datas[i].key, callback);
      }
    }
  };
  // 树的拖拽
  const handleDrop = infos => {
    console.log(infos);
    const dropKey = infos.node.key;
    const dragKey = infos.dragNode.key;
    const dropPos = infos.node.pos.split('-');
586
    const dropPosition = infos.dropPosition - Number(dropPos[dropPos.length - 1]);
587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653

    const datas = JSON.parse(JSON.stringify(treeData));
    console.log(dropKey, 'dropKey');
    console.log(dragKey, 'dragKey');
    // 找到拖拽的元素
    let dragObj;
    let dropObj;
    let id;
    let dragList;
    let canDrop = false;
    // 保存拖拽到的节点信息
    loop(datas, dropKey, -1, (item, index, arr) => {
      console.log(arr, index, 'arrarr');
      // 拖拽节点的下一个节点是否是菜单组
      if (arr[index + 1] && !arr[index + 1].groupflag) {
        canDrop = true;
      }
      if (index + 1 === arr.length) {
        canDrop = true;
      }
      dropObj = item;
    });

    // 保存节点信息并删除节点
    loop(datas, dragKey, -1, (item, index, arr) => {
      arr.splice(index, 1);
      dragObj = item;
    });
    console.log(dragObj, 'dragObj');
    console.log(dropObj, 'dropObj');
    // 最外层菜单组不允许拖拽
    if (!dragObj.groupflag && !dragObj.subSystemValue) {
      return;
    }
    // 不允许拖拽到子菜单下
    if (dropObj.subSystemValue && !infos.dropToGap) {
      console.log('不允许拖拽到子菜单下');
      return;
    }
    // 子菜单不能跨站点拖拽
    if (
      dragObj.subSystemValue &&
      dropObj.subSystemValue &&
      dropObj.subSystemValue !== dragObj.subSystemValue
    ) {
      console.log('子菜单不能跨站点拖拽');
      return;
    }
    if (
      dragObj.subSystemValue &&
      dropObj.visibleValue &&
      dropObj.visibleValue !== dragObj.subSystemValue
    ) {
      console.log('子菜单不能跨站点拖拽');
      return;
    }
    // 二级单组不能拖拽
    if (dragObj.groupflag) {
      console.log('二级单组不能拖拽');
      return;
    }
    console.log('1111111111');
    // 将节点插入到正确的位置
    if (!infos.dropToGap) {
      console.log('22222222222');
      // 插入到第一个子节点
      // 子菜单不能拖拽到二级菜单组上方
皮倩雯's avatar
皮倩雯 committed
654
      if (dropObj.roleList[0] && dropObj.roleList[0].groupflag) {
655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679
        return;
      }
      console.log(dropObj, '33333333333');
      dropObj.children = dropObj.children || [];
      // 在哪里插入,示例添加到头部,可以是随意位置
      dropObj.children.unshift(dragObj);
      if (dropObj.groupflag) {
        id = dropObj.visibleTitle;
      } else {
        id = '';
      }

      dragList = dropObj.children.map(val => {
        if (!val.groupflag) {
          return val.key;
        }
      });
    } else {
      if (!canDrop) {
        return;
      }
      // 子菜单组不能拖拽到子菜单组下
      if (dragObj.groupflag && dropObj.subSystemValue) {
        return;
      }
680

681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706
      let ar;
      let i;
      loop(datas, dropKey, -1, (item, index, arr, parentID) => {
        ar = arr;
        i = index;
        if (item.group) {
          id = item.group;
        } else {
          id = '';
        }
      });
      if (dropPosition === -1) {
        ar.splice(i, 0, dragObj);
      } else {
        ar.splice(i + 1, 0, dragObj);
      }
      dragList = ar.filter(val => !val.groupflag).map(ele => ele.key);
    }
    DragGroup({
      dragGroupType: 1,
      groupId: dragKey,
      groupList: dragList,
      MiniAppGroupName: id,
    }).then(res => {
      if (res.code === 0) {
        getRoleGroup();
707 708 709
        if (infos.dragNode.roleID == itemObj.roleID) {
          if (id == '系统分组') {
            setRoleID('');
710
            setDescrip('系统分组下的角色不可配置菜单权限');
711 712 713 714 715 716
            setFlagSearch(0);
          } else {
            setRoleID(infos.dragNode.roleID);
            setFlagSearch(1);
          }
        }
717 718 719 720
      }
    });
    console.log(dragList, 'dragList');
  };
721 722
  return (
    <PageContainer>
Maofei94's avatar
Maofei94 committed
723 724 725 726 727
      <div
        className={classnames({
          [styles.content]: true,
        })}
      >
728 729 730 731
        <Spin
          tip="loading...."
          spinning={spinLoading}
          // style={{ margin: '20px auto ', display: 'block' }}
Maofei94's avatar
Maofei94 committed
732
        >
733 734 735 736 737
          <Card
            className={classnames({
              [styles.cardBox]: true,
              [styles.hideBox]: !mulu,
            })}
Maofei94's avatar
Maofei94 committed
738
          >
739 740 741 742 743 744 745 746 747
            <div style={{ marginLeft: '20px' }}>
              <span
                style={{
                  fontSize: '15px ',
                  fontWeight: 'bold',
                }}
              >
                选择角色
              </span>
Maofei94's avatar
Maofei94 committed
748
            </div>
749
            <hr style={{ width: '95%', color: '#eeecec', marginLeft: '15px' }} />
Maofei94's avatar
Maofei94 committed
750
            {treeData && treeData.length > 0 && (
751
              <div style={{ height: 'calc(100vh - 130px)', overflowY: 'scroll' }}>
752 753 754 755 756 757 758 759 760
                <Tree
                  showIcon
                  onSelect={handleTreeSelect}
                  autoExpandParent
                  treeData={treeData}
                  selectedKeys={currentSelectId}
                  blockNode
                  draggable
                  onDrop={handleDrop}
761
                  keepTree={keepTree}
762
                  // setExpendKey={expendKey}
763 764
                />
              </div>
Maofei94's avatar
Maofei94 committed
765
            )}
766 767 768 769 770 771 772 773 774 775 776 777 778 779 780 781 782 783 784 785 786 787 788 789 790 791 792

            <AddModal
              visible={modalVisible}
              onCancel={() => setModalVisible(false)}
              itemObj={itemObj}
              confirmModal={confirmModal}
              siteList={siteList}
            />
            <DelModal
              visible={delVisible}
              itemObj={itemObj}
              onCancel={() => setDelVisible(false)}
              confirmModal={delModal}
            />
            <EditModal
              visible={editVisible}
              itemObj={itemObj}
              onCancel={() => setEditVisible(false)}
              confirmModal={editModal}
            />
            <EditGroup
              visible={groupVisible}
              itemObj={itemObj}
              onCancel={() => setGroupVisible(false)}
              confirmModal={groupModal}
            />
            {/* <UserModal
793 794 795 796 797
            visible={userVisible}
            itemObj={itemObj}
            onCancel={() => setUserVisible(false)}
            confirmModal={userModal}
          /> */}
798 799 800 801 802 803 804 805 806 807 808 809 810 811 812 813 814 815 816 817
            <SelectUser
              visible={userVisible}
              itemObj={itemObj}
              onCancel={() => setUserVisible(false)}
              confirmModal={userModal}
            />
            <div className={styles.switcher}>
              {mulu && (
                <Tooltip title="隐藏角色栏" className={styles.hide}>
                  <DoubleLeftOutlined onClick={() => handleHide()} style={{ marginLeft: '-5px' }} />
                </Tooltip>
              )}
              {!mulu && (
                <Tooltip title="显示角色栏" className={styles.hide}>
                  <DoubleRightOutlined onClick={() => handleHide()} />
                </Tooltip>
              )}
            </div>
          </Card>
        </Spin>
Maofei94's avatar
Maofei94 committed
818 819 820 821 822 823 824 825 826 827 828 829
        <div
          className={classnames({
            [styles.boxR]: true,
            [styles.boxH]: mulu,
          })}
        >
          <Card
            className={classnames({
              [styles.cardBoxTop]: true,
              [styles.boxH]: mulu,
            })}
          >
Maofei94's avatar
Maofei94 committed
830 831
            <Row align="middle">
              <Col span={8}>
832 833
                {flagSearch == 1 ? (
                  <Search
皮倩雯's avatar
皮倩雯 committed
834
                    style={{ width: 260 }}
835 836 837 838 839 840 841 842 843
                    allowClear
                    placeholder={placeholder}
                    // onSearch={handleSearch}
                    onChange={handleChange}
                    enterButton
                  />
                ) : (
                  <span />
                )}
Maofei94's avatar
Maofei94 committed
844 845 846 847
              </Col>
              <Col span={3} />
            </Row>
          </Card>
848
          <Card>
Maofei94's avatar
Maofei94 committed
849
            {roleID ? (
850 851 852 853 854 855 856 857 858 859 860 861
              <div className={styles.cardBoxR}>
                <ListCard
                  roleID={roleID}
                  loading={loading}
                  checkList={valueList}
                  dataList={dataList}
                  searchWord={searchWord}
                  onCommit={handleCommit}
                  btnLoading={btnLoading}
                  hasData={hasData}
                />
              </div>
Maofei94's avatar
Maofei94 committed
862
            ) : (
863 864 865
              <div className={styles.cardBoxH}>
                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={descrip} />
              </div>
Maofei94's avatar
Maofei94 committed
866 867
            )}
          </Card>
Maofei94's avatar
Maofei94 committed
868 869
        </div>
      </div>
870 871 872 873 874
    </PageContainer>
  );
};

export default SiteManage;