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

56
const { Search } = Input;
Maofei94's avatar
Maofei94 committed
57
const placeholder = '请输入功能名称';
58
const { TabPane } = Tabs;
Maofei94's avatar
Maofei94 committed
59

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

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

    if (e[0]) {
      setCurrentSelectId(e);
      setSaveCurId(e);
127
    } else {
Maofei94's avatar
Maofei94 committed
128
      setCurrentSelectId(saveCurId);
129 130
    }
  };
131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146
  // 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]);
147
  useEffect(() => {
148 149 150 151
    getRoleGroup();
  }, []);
  // 获取角色菜单树
  const getRoleGroup = () => {
Maofei94's avatar
Maofei94 committed
152
    setSpinLoading(true);
Maofei94's avatar
Maofei94 committed
153
    getRoleGroupList({ userID: '1' }).then(res => {
Maofei94's avatar
Maofei94 committed
154
      setSpinLoading(false);
Maofei94's avatar
Maofei94 committed
155 156
      if (res.code === 0) {
        const { roleList } = res.data;
皮倩雯's avatar
皮倩雯 committed
157
        console.log(res.data);
Maofei94's avatar
Maofei94 committed
158
        let arr = transTree(roleList);
159
        console.log(arr);
Maofei94's avatar
Maofei94 committed
160
        setTreeData(arr);
161 162 163 164 165 166 167
        let aa = [];
        arr.forEach(i => {
          console.log(i.visibleValue);
          aa.push(i.visibleValue);
        });
        console.log(aa);
        setKeepTree(aa);
Maofei94's avatar
Maofei94 committed
168
      }
Maofei94's avatar
Maofei94 committed
169
    });
170
  };
张烨's avatar
张烨 committed
171 172

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

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

Maofei94's avatar
Maofei94 committed
450
    return arr3;
451
  };
452
  // 编辑角色
453
  const editorUser = (e, record) => {
454
    console.log(e);
shaoan123's avatar
shaoan123 committed
455 456 457
    e.stopPropagation();
    setItemObj(record);
    setEditVisible(true);
458
  };
459
  // 删除角色
460
  const deletesUser = (e, record) => {
shaoan123's avatar
shaoan123 committed
461 462 463
    e.stopPropagation();
    setItemObj(record);
    setDelVisible(true);
464
  };
465
  // 关联用户
466
  const relevancyUser = (e, record) => {
shaoan123's avatar
shaoan123 committed
467 468
    e.stopPropagation();
    setItemObj(record);
469 470
    setUserVisible(true);
  };
471
  // 编辑分组
472
  const editorGroup = (e, record) => {
shaoan123's avatar
shaoan123 committed
473 474 475
    e.stopPropagation();
    setItemObj(record);
    setGroupVisible(true);
476
  };
477
  // 新增角色
478
  const addsUser = (e, record) => {
邓超's avatar
邓超 committed
479
    console.log(e, record, 'sdfalkfjasdgj');
shaoan123's avatar
shaoan123 committed
480 481 482
    e.stopPropagation();
    setItemObj(record);
    setModalVisible(true);
483
  };
Maofei94's avatar
Maofei94 committed
484 485 486 487
  const handleChange = e => {
    const { value } = e.target;
    setSearchWord(value);
  };
shaoan123's avatar
shaoan123 committed
488

Maofei94's avatar
Maofei94 committed
489
  // 确认回调
490 491
  const confirmModal = e => {
    setModalVisible(false);
Maofei94's avatar
Maofei94 committed
492 493
    // setRoleID(`${e}`);
    // setCurrentSelectId([`${e}`]);
494 495
    // setFlag(flag + 1);
    getRoleGroup();
Maofei94's avatar
Maofei94 committed
496
    setItemObj('');
497
  };
Maofei94's avatar
Maofei94 committed
498
  // 删除弹窗回调
499 500
  const delModal = () => {
    setDelVisible(false);
501 502
    // setFlag(flag + 1);
    getRoleGroup();
Maofei94's avatar
Maofei94 committed
503
    setRoleID('');
Maofei94's avatar
Maofei94 committed
504
    setItemObj('');
505
  };
Maofei94's avatar
Maofei94 committed
506
  // 编辑弹窗回调
皮倩雯's avatar
皮倩雯 committed
507
  const editModal = prop => {
508 509
    console.log(keyValue);
    // setEditVisible(false);
510 511
    // setFlag(flag + 1);
    getRoleGroup();
皮倩雯's avatar
皮倩雯 committed
512 513 514 515
    console.log(currentSelectId);
    console.log(itemObj);
    console.log(roleID);
    console.log(prop);
516 517 518
    let aa = itemObj;
    aa.BuiltInRole = prop;
    setItemObj(aa);
皮倩雯's avatar
皮倩雯 committed
519 520
    if (itemObj.roleID === currentSelectId[0]) {
      if (prop == true) {
521 522 523 524 525 526 527 528 529 530
        if (keyValue == 0) {
          console.log(12);
          setRoleID(currentSelectId);
          setFlagSearch(1);
        } else {
          console.log(34);
          setRoleID('');
          setDescrip('内置角色不可配置菜单权限');
          setFlagSearch(0);
        }
皮倩雯's avatar
皮倩雯 committed
531 532 533 534 535 536
      } else {
        setRoleID(currentSelectId);
        setFlagSearch(1);
      }
    }

Maofei94's avatar
Maofei94 committed
537
    // setItemObj('');
Maofei94's avatar
Maofei94 committed
538 539 540 541
  };
  // 分组编辑回调
  const groupModal = () => {
    setGroupVisible(false);
542 543
    // setFlag(flag + 1);
    getRoleGroup();
Maofei94's avatar
Maofei94 committed
544
    setItemObj('');
Maofei94's avatar
Maofei94 committed
545
    handleTreeSelect(saveCurId);
546
  };
547 548
  const userModal = () => {
    setUserVisible(false);
549 550
    // setFlag(flag + 1);
    getRoleGroup();
551 552
    setItemObj('');
    handleTreeSelect(saveCurId);
553
  };
554 555 556 557 558 559 560
  const userNewModal = () => {
    setUserNewVisible(false);
    // setFlag(flag + 1);
    // getRoleGroup();
    // setItemObj('');
    handleTreeSelect(saveCurId);
  };
Maofei94's avatar
Maofei94 committed
561 562 563
  const valueCallback = valueObj => {
    setSubList(valueObj);
  };
Maofei94's avatar
Maofei94 committed
564 565 566
  const handleHide = () => {
    setMulu(!mulu);
  };
Maofei94's avatar
Maofei94 committed
567
  const handleCommit = results => {
Maofei94's avatar
Maofei94 committed
568
    setBtnLoading(true);
569 570 571 572
    setMenuToRole({
      roleID: Number(roleID),
      menuIdList: String(results.flat()),
    })
Maofei94's avatar
Maofei94 committed
573
      .then(res => {
Maofei94's avatar
Maofei94 committed
574
        setBtnLoading(false);
575
        if (res.code === 0) {
Maofei94's avatar
Maofei94 committed
576
          setValueList([...results.flat()]);
Maofei94's avatar
Maofei94 committed
577 578 579 580 581 582 583 584
          notification.success({
            message: '提示',
            duration: 3,
            description: '设置成功',
          });
        } else {
          notification.error({
            message: '提示',
Maofei94's avatar
Maofei94 committed
585
            duration: 15,
586
            description: res.msg,
Maofei94's avatar
Maofei94 committed
587 588 589 590
          });
        }
      })
      .catch(err => {
Maofei94's avatar
Maofei94 committed
591
        setBtnLoading(false);
Maofei94's avatar
Maofei94 committed
592
      });
593
  };
594
  const handleUserAttach = () => {
595 596
    setUserVisible(true);
  };
597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613
  // 返回拖拽完毕后的信息
  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('-');
614
    const dropPosition = infos.dropPosition - Number(dropPos[dropPos.length - 1]);
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 654 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 680 681

    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
682
      if (dropObj.roleList[0] && dropObj.roleList[0].groupflag) {
683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707
        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;
      }
708

709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734
      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();
735 736 737
        if (infos.dragNode.roleID == itemObj.roleID) {
          if (id == '系统分组') {
            setRoleID('');
738
            setDescrip('系统分组下的角色不可配置菜单权限');
739 740 741 742 743 744
            setFlagSearch(0);
          } else {
            setRoleID(infos.dragNode.roleID);
            setFlagSearch(1);
          }
        }
745 746 747 748
      }
    });
    console.log(dragList, 'dragList');
  };
749 750 751 752 753

  const handleParChange = key => {
    setKeyValue(key);
    const { roleID: id } = itemObj;
    console.log(key);
754 755
    console.log(key == 1);
    console.log(itemObj.BuiltInRole);
756
    if (id) {
757
      if (itemObj.BuiltInRole === true && key == 1) {
758 759 760 761 762 763 764 765 766 767 768 769 770
        setRoleID('');
        setDescrip('内置角色不可配置菜单权限');
        setFlagSearch(0);
      } else {
        setRoleID(id);
        setFlagSearch(1);
      }
    } else {
      setRoleID('');
      setDescrip('当前未选中角色');
      setFlagSearch(0);
    }
  };
771 772
  return (
    <PageContainer>
Maofei94's avatar
Maofei94 committed
773 774 775 776 777
      <div
        className={classnames({
          [styles.content]: true,
        })}
      >
778 779 780 781
        <Spin
          tip="loading...."
          spinning={spinLoading}
          // style={{ margin: '20px auto ', display: 'block' }}
Maofei94's avatar
Maofei94 committed
782
        >
783 784 785 786 787
          <Card
            className={classnames({
              [styles.cardBox]: true,
              [styles.hideBox]: !mulu,
            })}
Maofei94's avatar
Maofei94 committed
788
          >
789 790 791 792 793 794 795 796 797
            <div style={{ marginLeft: '20px' }}>
              <span
                style={{
                  fontSize: '15px ',
                  fontWeight: 'bold',
                }}
              >
                选择角色
              </span>
Maofei94's avatar
Maofei94 committed
798
            </div>
799
            <hr style={{ width: '95%', color: '#eeecec', marginLeft: '15px' }} />
Maofei94's avatar
Maofei94 committed
800
            {treeData && treeData.length > 0 && (
801
              <div style={{ height: 'calc(100% - 40px)', overflowY: 'scroll' }}>
802 803 804 805 806 807 808 809 810
                <Tree
                  showIcon
                  onSelect={handleTreeSelect}
                  autoExpandParent
                  treeData={treeData}
                  selectedKeys={currentSelectId}
                  blockNode
                  draggable
                  onDrop={handleDrop}
811
                  keepTree={keepTree}
812
                  // setExpendKey={expendKey}
813 814
                />
              </div>
Maofei94's avatar
Maofei94 committed
815
            )}
816 817 818 819 820 821 822 823 824 825 826 827 828 829 830 831 832 833 834 835 836 837 838 839 840 841 842

            <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
843 844 845 846 847
            visible={userVisible}
            itemObj={itemObj}
            onCancel={() => setUserVisible(false)}
            confirmModal={userModal}
          /> */}
848 849 850 851 852 853 854 855 856 857 858 859 860 861 862 863 864 865 866 867
            <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
868 869 870 871 872 873
        <div
          className={classnames({
            [styles.boxR]: true,
            [styles.boxH]: mulu,
          })}
        >
874 875 876 877 878 879 880 881 882 883 884 885 886 887 888 889 890 891 892
          <Card>
            <Tabs style={{ marginTop: '-14px' }} activeKey={keyValue} onChange={handleParChange}>
              <TabPane tab="关联用户" key="0">
                {roleID ? (
                  <div className={styles.cardBoxRNew}>
                    <NewSelectUser
                      visible={userNewVisible}
                      itemObj={itemObj}
                      onCancel={() => setUserNewVisible(false)}
                      confirmModal={userNewModal}
                    />
                  </div>
                ) : (
                  <div className={styles.cardBoxH}>
                    <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={descrip} />
                  </div>
                )}
              </TabPane>
              <TabPane tab="菜单权限" key="1">
893 894
                {flagSearch == 1 ? (
                  <Search
皮倩雯's avatar
皮倩雯 committed
895
                    style={{ width: 260 }}
896
                    allowClear
897
                    value={searchWord}
898 899 900 901 902 903 904 905
                    placeholder={placeholder}
                    // onSearch={handleSearch}
                    onChange={handleChange}
                    enterButton
                  />
                ) : (
                  <span />
                )}
906 907 908 909 910 911 912 913 914 915 916 917 918 919 920 921 922 923 924 925
                {roleID ? (
                  <div className={styles.cardBoxR}>
                    <ListCard
                      roleID={roleID}
                      loading={loading}
                      checkList={valueList}
                      dataList={dataList}
                      searchWord={searchWord}
                      onCommit={handleCommit}
                      btnLoading={btnLoading}
                      hasData={hasData}
                    />
                  </div>
                ) : (
                  <div className={styles.cardBoxH}>
                    <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={descrip} />
                  </div>
                )}
              </TabPane>
            </Tabs>
Maofei94's avatar
Maofei94 committed
926
          </Card>
Maofei94's avatar
Maofei94 committed
927 928
        </div>
      </div>
929 930 931 932 933
    </PageContainer>
  );
};

export default SiteManage;