RoleManage.jsx 31.4 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
  Tree,
16
} from 'antd';
17
import TreeComponents from '@/components/ExpendableTree';
Maofei94's avatar
Maofei94 committed
18
import PageContainer from '@/components/BasePageContainer';
19 20 21
import {
  DoubleLeftOutlined,
  DoubleRightOutlined,
陈前坚's avatar
陈前坚 committed
22
  BarsOutlined,
Maofei94's avatar
Maofei94 committed
23
  UserOutlined,
Maofei94's avatar
Maofei94 committed
24 25
  DesktopOutlined,
  MobileOutlined,
shaoan123's avatar
shaoan123 committed
26 27 28 29 30
  FolderAddTwoTone,
  PlusSquareOutlined,
  FormOutlined,
  EditOutlined,
  DeleteOutlined,
31
  UserAddOutlined,
皮倩雯's avatar
皮倩雯 committed
32 33
  WindowsOutlined,
  IeOutlined,
34
} from '@ant-design/icons';
Maofei94's avatar
Maofei94 committed
35
import {
Maofei94's avatar
Maofei94 committed
36
  setMenuToRole,
Maofei94's avatar
Maofei94 committed
37
  getRoleGroupList,
Maofei94's avatar
Maofei94 committed
38
  getMenuByRoleWithLevel,
39
  DragGroup,
Maofei94's avatar
Maofei94 committed
40
  getWebConfigTypes,
邓超's avatar
邓超 committed
41
} from '@/services/RoleManage/api';
42
import ListCard, { checkChildrenByCondition, getId } from '@/components/CheckGroup';
Maofei94's avatar
Maofei94 committed
43
// import ListCard from '@/pages/orgnazation/ListCard';
Maofei94's avatar
Maofei94 committed
44
import qs from 'qs';
Maofei94's avatar
Maofei94 committed
45
import classnames from 'classnames';
46 47 48 49
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
50
import EditGroup from './EditGroup';
陈前坚's avatar
陈前坚 committed
51
import userStyles from '@/pages/userCenter/userManage/UserManage.less';
Maofei94's avatar
Maofei94 committed
52
import iconStyles from '@/assets/font/omsfont/iconfont.css';
53
import SelectUser from './SelectUser/SelectUser';
54
import NewSelectUser from './SelectUser/NewSelectUser';
shaoan123's avatar
shaoan123 committed
55
import { data } from '@/pages/platformCenter/messageManage/projectManage/components/Mock';
张烨's avatar
张烨 committed
56

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

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

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

    if (e[0]) {
      setCurrentSelectId(e);
      setSaveCurId(e);
130
    } else {
Maofei94's avatar
Maofei94 committed
131
      setCurrentSelectId(saveCurId);
132 133 134
    }
  };
  useEffect(() => {
135 136 137 138
    getRoleGroup();
  }, []);
  // 获取角色菜单树
  const getRoleGroup = () => {
Maofei94's avatar
Maofei94 committed
139
    setSpinLoading(true);
Maofei94's avatar
Maofei94 committed
140
    getRoleGroupList({ userID: '1' }).then(res => {
Maofei94's avatar
Maofei94 committed
141
      setSpinLoading(false);
Maofei94's avatar
Maofei94 committed
142 143
      if (res.code === 0) {
        const { roleList } = res.data;
144 145 146 147 148 149 150 151 152
        console.log(roleList);
        let list = [...roleList];
        list.map((i, j) => {
          if (i.visibleTitle.indexOf('手持') !== -1 && i.type !== 'mobile') {
            list.splice(j, 1);
            list.push(i);
          }
        });
        console.log(list);
153 154
        setKeepTreeData([...list]);
        let arr = transTree(JSON.parse(JSON.stringify(list)), '');
Maofei94's avatar
Maofei94 committed
155
        setTreeData(arr);
156 157 158 159 160
        let aa = [];
        arr.forEach(i => {
          aa.push(i.visibleValue);
        });
        setKeepTree(aa);
Maofei94's avatar
Maofei94 committed
161
      }
Maofei94's avatar
Maofei94 committed
162
    });
163
  };
张烨's avatar
张烨 committed
164 165

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

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

Maofei94's avatar
Maofei94 committed
468
    return arr3;
469
  };
470
  // 编辑角色
471
  const editorUser = (e, record) => {
472
    console.log(e);
shaoan123's avatar
shaoan123 committed
473 474 475
    e.stopPropagation();
    setItemObj(record);
    setEditVisible(true);
476
  };
477
  // 删除角色
478
  const deletesUser = (e, record) => {
shaoan123's avatar
shaoan123 committed
479 480 481
    e.stopPropagation();
    setItemObj(record);
    setDelVisible(true);
482
  };
483
  // 关联用户
484
  const relevancyUser = (e, record) => {
shaoan123's avatar
shaoan123 committed
485 486
    e.stopPropagation();
    setItemObj(record);
487 488
    setUserVisible(true);
  };
489
  // 编辑分组
490
  const editorGroup = (e, record) => {
shaoan123's avatar
shaoan123 committed
491 492 493
    e.stopPropagation();
    setItemObj(record);
    setGroupVisible(true);
494
  };
495
  // 新增角色
496
  const addsUser = (e, record) => {
shaoan123's avatar
shaoan123 committed
497 498 499
    e.stopPropagation();
    setItemObj(record);
    setModalVisible(true);
500
  };
Maofei94's avatar
Maofei94 committed
501 502 503 504
  const handleChange = e => {
    const { value } = e.target;
    setSearchWord(value);
  };
shaoan123's avatar
shaoan123 committed
505

Maofei94's avatar
Maofei94 committed
506
  // 确认回调
507 508
  const confirmModal = e => {
    setModalVisible(false);
Maofei94's avatar
Maofei94 committed
509 510
    // setRoleID(`${e}`);
    // setCurrentSelectId([`${e}`]);
511 512
    // setFlag(flag + 1);
    getRoleGroup();
Maofei94's avatar
Maofei94 committed
513
    setItemObj('');
514
  };
Maofei94's avatar
Maofei94 committed
515
  // 删除弹窗回调
516 517
  const delModal = () => {
    setDelVisible(false);
518 519
    // setFlag(flag + 1);
    getRoleGroup();
Maofei94's avatar
Maofei94 committed
520
    setRoleID('');
Maofei94's avatar
Maofei94 committed
521
    setItemObj('');
522
  };
Maofei94's avatar
Maofei94 committed
523
  // 编辑弹窗回调
皮倩雯's avatar
皮倩雯 committed
524
  const editModal = prop => {
525
    getRoleGroup();
526 527 528
    let aa = itemObj;
    aa.BuiltInRole = prop;
    setItemObj(aa);
皮倩雯's avatar
皮倩雯 committed
529 530
    if (itemObj.roleID === currentSelectId[0]) {
      if (prop == true) {
531 532 533 534 535 536 537 538
        if (keyValue == 0) {
          setRoleID(currentSelectId);
          setFlagSearch(1);
        } else {
          setRoleID('');
          setDescrip('内置角色不可配置菜单权限');
          setFlagSearch(0);
        }
皮倩雯's avatar
皮倩雯 committed
539 540 541 542 543 544
      } else {
        setRoleID(currentSelectId);
        setFlagSearch(1);
      }
    }

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

    const datas = JSON.parse(JSON.stringify(treeData));
    // 找到拖拽的元素
    let dragObj;
    let dropObj;
    let id;
    let dragList;
    let canDrop = false;
    // 保存拖拽到的节点信息
    loop(datas, dropKey, -1, (item, index, arr) => {
      // 拖拽节点的下一个节点是否是菜单组
      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;
    }
    // 将节点插入到正确的位置
    if (!infos.dropToGap) {
      // 插入到第一个子节点
      // 子菜单不能拖拽到二级菜单组上方
皮倩雯's avatar
皮倩雯 committed
685
      if (dropObj.roleList[0] && dropObj.roleList[0].groupflag) {
686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709
        return;
      }
      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;
      }
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 735 736
      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();
737 738 739
        if (infos.dragNode.roleID == itemObj.roleID) {
          if (id == '系统分组') {
            setRoleID('');
740
            setDescrip('系统分组下的角色不可配置菜单权限');
741 742 743 744 745 746
            setFlagSearch(0);
          } else {
            setRoleID(infos.dragNode.roleID);
            setFlagSearch(1);
          }
        }
747 748 749
      }
    });
  };
750 751 752 753 754

  const handleParChange = key => {
    setKeyValue(key);
    const { roleID: id } = itemObj;
    if (id) {
755
      if (itemObj.BuiltInRole === true && key == 1) {
756 757 758 759 760 761 762 763 764 765 766 767 768
        setRoleID('');
        setDescrip('内置角色不可配置菜单权限');
        setFlagSearch(0);
      } else {
        setRoleID(id);
        setFlagSearch(1);
      }
    } else {
      setRoleID('');
      setDescrip('当前未选中角色');
      setFlagSearch(0);
    }
  };
769 770 771 772 773 774 775 776 777 778 779 780 781 782 783 784 785 786 787 788 789 790 791 792 793 794 795 796 797 798 799 800 801 802

  const onSearch = value => {
    setSearchTreeValue(value);
    if (value !== '') {
      let data = getNewData(JSON.parse(JSON.stringify(keepTreeData)), value);
      let lastdata = JSON.parse(JSON.stringify(data));
      lastdata.map(i => {
        if (i.child.length > 0) {
          i.child = i.child.filter(ele => ele.roleList.length > 0);
        }
      });
      let last = lastdata.filter(ele => ele.roleList.length > 0 || ele.child.length > 0);
      let arr = transTree(JSON.parse(JSON.stringify(last)), value);
      setTreeData(arr);
    } else {
      let arr = transTree(JSON.parse(JSON.stringify(keepTreeData)), '');
      setTreeData(arr);
    }
  };

  // 获取搜索tree数据
  const getNewData = (treedata, value) => {
    treedata.map(i => {
      if (i.roleList.length > 0) {
        i.roleList = i.roleList.filter(ele => ele.roleName.includes(value));
      }
      if (i.child.length > 0) {
        i.child.map(j => {
          j.roleList = j.roleList.filter(ele => ele.roleName.includes(value));
        });
      }
    });
    return treedata;
  };
803

804 805
  return (
    <PageContainer>
Maofei94's avatar
Maofei94 committed
806 807 808 809 810
      <div
        className={classnames({
          [styles.content]: true,
        })}
      >
811 812 813 814
        <Spin
          tip="loading...."
          spinning={spinLoading}
          // style={{ margin: '20px auto ', display: 'block' }}
Maofei94's avatar
Maofei94 committed
815
        >
816 817 818 819 820
          <Card
            className={classnames({
              [styles.cardBox]: true,
              [styles.hideBox]: !mulu,
            })}
Maofei94's avatar
Maofei94 committed
821
          >
822
            <div style={{ marginLeft: '6px' }}>
823 824 825 826 827 828 829 830
              <span
                style={{
                  fontSize: '15px ',
                  fontWeight: 'bold',
                }}
              >
                选择角色
              </span>
Maofei94's avatar
Maofei94 committed
831
            </div>
832 833 834 835 836 837 838 839 840 841 842 843 844 845 846 847 848 849 850 851 852 853 854 855 856 857 858 859 860 861 862 863 864 865 866 867 868 869 870 871 872 873 874 875 876 877 878 879
            <hr style={{ width: '95%', color: '#eeecec' }} />
            <Search
              style={{
                marginBottom: 8,
                width: '95%',
                marginLeft: '7px',
              }}
              placeholder="快速搜索角色"
              onSearch={onSearch}
            />
            {searchTreeValue !== '' ? (
              <>
                {treeData && treeData.length > 0 && (
                  <div style={{ height: 'calc(100% - 60px)', overflowY: 'scroll' }}>
                    <Tree
                      showIcon
                      onSelect={handleTreeSelect}
                      defaultExpandAll
                      treeData={treeData}
                      selectedKeys={currentSelectId}
                      blockNode
                      draggable
                      onDrop={handleDrop}
                      keepTree={keepTree}
                      // setExpendKey={expendKey}
                    />
                  </div>
                )}
              </>
            ) : (
              <>
                {treeData && treeData.length > 0 && (
                  <div style={{ height: 'calc(100% - 60px)', overflowY: 'scroll' }}>
                    <TreeComponents
                      showIcon
                      onSelect={handleTreeSelect}
                      autoExpandParent
                      treeData={treeData}
                      selectedKeys={currentSelectId}
                      blockNode
                      draggable
                      onDrop={handleDrop}
                      keepTree={keepTree}
                      // setExpendKey={expendKey}
                    />
                  </div>
                )}
              </>
Maofei94's avatar
Maofei94 committed
880
            )}
881 882 883 884 885 886 887 888 889 890 891 892 893 894 895 896 897 898 899 900 901 902 903 904 905 906 907

            <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
908 909 910 911 912
            visible={userVisible}
            itemObj={itemObj}
            onCancel={() => setUserVisible(false)}
            confirmModal={userModal}
          /> */}
913 914 915 916 917 918 919 920 921 922 923 924 925 926 927 928 929 930 931 932
            <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
933 934 935 936 937 938
        <div
          className={classnames({
            [styles.boxR]: true,
            [styles.boxH]: mulu,
          })}
        >
939 940 941 942 943 944 945 946 947 948 949 950 951 952 953 954 955 956 957
          <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">
958 959
                {flagSearch == 1 ? (
                  <Search
皮倩雯's avatar
皮倩雯 committed
960
                    style={{ width: 260 }}
961
                    allowClear
962
                    value={searchWord}
963 964 965 966 967 968 969 970
                    placeholder={placeholder}
                    // onSearch={handleSearch}
                    onChange={handleChange}
                    enterButton
                  />
                ) : (
                  <span />
                )}
971 972 973 974 975 976 977 978 979 980 981 982 983 984 985 986 987 988 989 990
                {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
991
          </Card>
Maofei94's avatar
Maofei94 committed
992 993
        </div>
      </div>
994 995 996 997 998
    </PageContainer>
  );
};

export default SiteManage;