RoleManage.jsx 14.9 KB
Newer Older
1
import React, { useState, useEffect } from 'react';
Maofei94's avatar
Maofei94 committed
2
import {
Maofei94's avatar
Maofei94 committed
3 4 5 6 7 8 9
  Row,
  Col,
  Card,
  Input,
  Spin,
  notification,
  Button,
Maofei94's avatar
Maofei94 committed
10
  Tooltip,
Maofei94's avatar
Maofei94 committed
11
  Space,
Maofei94's avatar
Maofei94 committed
12
  Empty,
Maofei94's avatar
Maofei94 committed
13
} from 'antd';
张烨's avatar
张烨 committed
14
import Tree from '@/components/ExpendableTree';
Maofei94's avatar
Maofei94 committed
15
import PageContainer from '@/components/BasePageContainer';
16 17 18
import {
  DoubleLeftOutlined,
  DoubleRightOutlined,
陈前坚's avatar
陈前坚 committed
19
  BarsOutlined,
Maofei94's avatar
Maofei94 committed
20
  UserOutlined,
Maofei94's avatar
Maofei94 committed
21 22
  DesktopOutlined,
  MobileOutlined,
23
} from '@ant-design/icons';
Maofei94's avatar
Maofei94 committed
24
import {
Maofei94's avatar
Maofei94 committed
25
  setMenuToRole,
Maofei94's avatar
Maofei94 committed
26
  getRoleGroupList,
Maofei94's avatar
Maofei94 committed
27
  getMenuByRoleWithLevel,
Maofei94's avatar
Maofei94 committed
28
  getWebConfigTypes,
Maofei94's avatar
Maofei94 committed
29
} from '@/services/userCenter/roleManage/api';
张烨's avatar
张烨 committed
30 31 32 33
import ListCard, {
  checkChildrenByCondition,
  getId,
} from '@/components/CheckGroup';
Maofei94's avatar
Maofei94 committed
34
// import ListCard from '@/pages/orgnazation/ListCard';
Maofei94's avatar
Maofei94 committed
35
import qs from 'qs';
Maofei94's avatar
Maofei94 committed
36
import classnames from 'classnames';
37 38 39 40
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
41
import EditGroup from './EditGroup';
陈前坚's avatar
陈前坚 committed
42
import userStyles from '@/pages/userCenter/userManage/UserManage.less';
Maofei94's avatar
Maofei94 committed
43
import iconStyles from '@/assets/font/omsfont/iconfont.css';
44
import UserModal from './UserModal'
张烨's avatar
张烨 committed
45

46
const { Search } = Input;
Maofei94's avatar
Maofei94 committed
47
const placeholder = '请输入功能名称';
Maofei94's avatar
Maofei94 committed
48

49 50 51
const SiteManage = () => {
  const [treeData, setTreeData] = useState([]);
  const [searchWord, setSearchWord] = useState('');
Maofei94's avatar
Maofei94 committed
52
  const [roleID, setRoleID] = useState(''); // 角色ID
Maofei94's avatar
Maofei94 committed
53
  const [saveTreeId, setSaveTreeId] = useState(''); // 保存点击回调的roleid
54 55
  const [modalVisible, setModalVisible] = useState(false); // 新增弹窗
  const [flag, setFlag] = useState(1);
Maofei94's avatar
Maofei94 committed
56
  const [itemObj, setItemObj] = useState(''); // 选择的角色item
57 58
  const [delVisible, setDelVisible] = useState(false); // 删除弹窗
  const [editVisible, setEditVisible] = useState(false); // 修改弹窗
Maofei94's avatar
Maofei94 committed
59 60
  const [subList, setSubList] = useState([]); // 选中的数组
  const [spinLoading, setSpinLoading] = useState(false);
Maofei94's avatar
Maofei94 committed
61
  const [currentSelectId, setCurrentSelectId] = useState([]); // 选中的树节点
Maofei94's avatar
Maofei94 committed
62
  const [saveCurId, setSaveCurId] = useState([]); // 树节点ID
Maofei94's avatar
Maofei94 committed
63
  const [groupVisible, setGroupVisible] = useState(false); // 分组编辑弹窗
64
  const [userVisible, setUserVisible] = useState(false); // 用户关联弹窗
Maofei94's avatar
Maofei94 committed
65
  const [hasData, setHasData] = useState(false);
张烨's avatar
张烨 committed
66 67 68
  const [valueList, setValueList] = useState([]);
  const [dataList, setdataList] = useState([]);
  const [loading, setLoading] = useState(true);
Maofei94's avatar
Maofei94 committed
69
  const [btnLoading, setBtnLoading] = useState(false);
Maofei94's avatar
Maofei94 committed
70
  const [mulu, setMulu] = useState(true); // 展示目录
Maofei94's avatar
Maofei94 committed
71 72
  const [siteList, setSiteList] = useState([]);
  const [disFlag, setDisFlag] = useState(false);
张烨's avatar
张烨 committed
73

74
  // 点击树的回调
Maofei94's avatar
Maofei94 committed
75
  const handleTreeSelect = (e, treenode) => {
Maofei94's avatar
Maofei94 committed
76
    console.log(treenode);
Maofei94's avatar
Maofei94 committed
77 78 79 80 81
    if (treenode) {
      console.log(e, node, 'node');
      const { node } = treenode;
      const { roleID: id } = node;
      setItemObj(node);
Maofei94's avatar
Maofei94 committed
82 83 84
      if (id) {
        setSaveTreeId(id);
        setRoleID(id);
Maofei94's avatar
Maofei94 committed
85
        setValueList([...valueList]);
Maofei94's avatar
Maofei94 committed
86
      } else {
Maofei94's avatar
Maofei94 committed
87 88
        // setRoleID(saveTreeId);
        setRoleID('');
Maofei94's avatar
Maofei94 committed
89
      }
Maofei94's avatar
Maofei94 committed
90 91 92 93 94
    }

    if (e[0]) {
      setCurrentSelectId(e);
      setSaveCurId(e);
95
    } else {
Maofei94's avatar
Maofei94 committed
96
      setCurrentSelectId(saveCurId);
97 98 99
    }
  };
  useEffect(() => {
Maofei94's avatar
Maofei94 committed
100
    setSpinLoading(true);
Maofei94's avatar
Maofei94 committed
101
    getRoleGroupList({ userID: '1' }).then(res => {
Maofei94's avatar
Maofei94 committed
102
      setSpinLoading(false);
Maofei94's avatar
Maofei94 committed
103 104 105 106 107
      if (res.code === 0) {
        const { roleList } = res.data;
        let arr = transTree(roleList);
        setTreeData(arr);
      }
Maofei94's avatar
Maofei94 committed
108
    });
Maofei94's avatar
Maofei94 committed
109
    return () => {
Maofei94's avatar
Maofei94 committed
110
      setItemObj('');
Maofei94's avatar
Maofei94 committed
111
    };
Maofei94's avatar
Maofei94 committed
112
  }, [flag]);
张烨's avatar
张烨 committed
113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135

  const buildMap = list => {
    const mapObj = {
      type: 'widgetGroup',
      searchWord,
      children: list.filter(l => l.type === 'widgetUIPage'),
      text: '地图组件',
      itemid: '9999',
    };

    return list.some(l => l.type === 'widgetUIPage')
      ? [mapObj, ...list.filter(l => l.type !== 'widgetUIPage')]
      : list;
  };

  useEffect(() => {
    if (!roleID) return;
    setLoading(true);
    const defaultConfig = {
      optionsList: [],
      title: '默认组',
      id: '',
    };
Maofei94's avatar
Maofei94 committed
136
    getMenuByRoleWithLevel({
张烨's avatar
张烨 committed
137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157
      roleID: itemObj.roleID,
      subSystemValue: itemObj.subSystemValue,
      subSystemName: itemObj.subSystemValue,
      _version: 9999,
      _dc: new Date().getTime(),
    })
      .then(res => {
        const list = [];
        // eslint-disable-next-line no-unused-expressions
        res.success &&
          res.root.forEach(item => {
            list.push({ ...defaultConfig, ...item });
          });
        const finalList = buildMap(list);
        setdataList(finalList);
        setValueList(
          finalList
            .map(l =>
              checkChildrenByCondition(
                l,
                it => (it.isChecked ? [getId(it)] : []),
张烨's avatar
张烨 committed
158
                true,
张烨's avatar
张烨 committed
159 160 161 162 163 164 165 166 167 168 169 170 171
                'map',
              ).flat(Infinity),
            )
            .flat(Infinity)
            .filter(Boolean),
        );
        setLoading(false);
      })
      .catch(err => {
        setLoading(false);
      });
  }, [roleID]);

172 173 174
  const handleAdd = e => {
    setModalVisible(true);
  };
Maofei94's avatar
Maofei94 committed
175
  // 角色删除
176 177 178
  const handleDel = e => {
    setDelVisible(true);
  };
Maofei94's avatar
Maofei94 committed
179
  // 编辑角色
180 181 182
  const handleEdit = e => {
    setEditVisible(true);
  };
Maofei94's avatar
Maofei94 committed
183 184 185 186 187 188
  // 分组编辑
  const groupEdit = () => {
    setGroupVisible(true);
  };
  // 树形数据转换;
  const transTree = val => {
189
    let arr = val;
Maofei94's avatar
Maofei94 committed
190
    let newArr = [];
Maofei94's avatar
Maofei94 committed
191
    // 提取child里面的数组
Maofei94's avatar
Maofei94 committed
192
    let arr2 = arr.filter(item => {
Maofei94's avatar
Maofei94 committed
193 194 195 196 197
      if (item.child && item.child.length > 0) {
        item.child.forEach(itemC => {
          item.roleList.unshift(itemC);
        });
      }
Maofei94's avatar
Maofei94 committed
198 199 200 201
      // if (item.visibleTitle === '手持系统') {
      //   item.icon = <span className="iconfont iconanzhuo1" />;
      //   newArr[0] = item;
      // }
Maofei94's avatar
Maofei94 committed
202
      if (item.type === 'mobile') {
Maofei94's avatar
Maofei94 committed
203
        item.icon = <MobileOutlined />;
Maofei94's avatar
Maofei94 committed
204
        // newArr[0] = item;
Maofei94's avatar
Maofei94 committed
205
      } else {
Maofei94's avatar
Maofei94 committed
206
        item.icon = <DesktopOutlined />;
Maofei94's avatar
Maofei94 committed
207
      }
Maofei94's avatar
Maofei94 committed
208
      return (
Maofei94's avatar
Maofei94 committed
209 210 211 212
        item.visibleTitle !== '其它角色' &&
        item.visibleTitle !== '运维管理' &&
        item.visibleTitle !== '手持系统' &&
        item.visibleTitle !== '小程序'
Maofei94's avatar
Maofei94 committed
213
      );
Maofei94's avatar
Maofei94 committed
214
    });
Maofei94's avatar
Maofei94 committed
215
    arr2 = arr2.concat(newArr);
Maofei94's avatar
Maofei94 committed
216
    let arr3 = arr2.map(item => {
Maofei94's avatar
Maofei94 committed
217 218 219
      if (item.visibleTitle === '小程序') {
        item.visibleTitle = '移动应用';
      }
Maofei94's avatar
Maofei94 committed
220 221
      item.title = item.visibleTitle || '';
      item.key = item.visibleValue || '';
Maofei94's avatar
Maofei94 committed
222
      if (item.roleList && item.roleList.length > 0) {
Maofei94's avatar
Maofei94 committed
223
        item.roleList.map((itemRole, index) => {
Maofei94's avatar
Maofei94 committed
224 225
          if (itemRole.roleList) {
            itemRole.title = itemRole.visibleTitle || '';
Maofei94's avatar
Maofei94 committed
226
            itemRole.key = itemRole.visibleTitle + itemRole.visibleValue || '';
Maofei94's avatar
Maofei94 committed
227
            itemRole.groupflag = itemRole.visibleTitle;
陈前坚's avatar
陈前坚 committed
228
            itemRole.icon = <BarsOutlined />;
Maofei94's avatar
Maofei94 committed
229 230 231 232 233
            itemRole.roleList.map(i => {
              i.title = i.roleName;
              i.key = i.roleID;
              i.subSystemValue = item.visibleValue;
              i.group = itemRole.visibleTitle;
Maofei94's avatar
Maofei94 committed
234
              i.icon = <UserOutlined />;
张烨's avatar
张烨 committed
235
              if (roleID && roleID === i.roleID) {
Maofei94's avatar
Maofei94 committed
236
                setItemObj(i);
Maofei94's avatar
Maofei94 committed
237
                // setCurrentSelectId(roleID);
Maofei94's avatar
Maofei94 committed
238
              }
Maofei94's avatar
Maofei94 committed
239
            });
Maofei94's avatar
Maofei94 committed
240

Maofei94's avatar
Maofei94 committed
241 242 243 244 245
            itemRole.children = itemRole.roleList;
          } else {
            itemRole.title = itemRole.roleName;
            itemRole.key = itemRole.roleID;
            itemRole.subSystemValue = item.visibleValue;
Maofei94's avatar
Maofei94 committed
246
            itemRole.icon = <UserOutlined />;
张烨's avatar
张烨 committed
247
            if (roleID && roleID === itemRole.roleID) {
Maofei94's avatar
Maofei94 committed
248
              setItemObj(itemRole);
Maofei94's avatar
Maofei94 committed
249
              // setCurrentSelectId(roleID);
Maofei94's avatar
Maofei94 committed
250
            }
Maofei94's avatar
Maofei94 committed
251 252
          }
          return itemRole;
Maofei94's avatar
Maofei94 committed
253
        });
254
      }
Maofei94's avatar
Maofei94 committed
255
      item.children = item.roleList;
256 257
      return item;
    });
Maofei94's avatar
Maofei94 committed
258
    return arr3;
259
  };
Maofei94's avatar
Maofei94 committed
260 261 262 263
  const handleChange = e => {
    const { value } = e.target;
    setSearchWord(value);
  };
Maofei94's avatar
Maofei94 committed
264
  // 确认回调
265
  const confirmModal = e => {
Maofei94's avatar
Maofei94 committed
266
    console.log(e, typeof e, 'e');
267
    setModalVisible(false);
Maofei94's avatar
Maofei94 committed
268 269
    // setRoleID(`${e}`);
    // setCurrentSelectId([`${e}`]);
270
    setFlag(flag + 1);
Maofei94's avatar
Maofei94 committed
271
    setItemObj('');
272
  };
Maofei94's avatar
Maofei94 committed
273
  // 删除弹窗回调
274 275 276
  const delModal = () => {
    setDelVisible(false);
    setFlag(flag + 1);
Maofei94's avatar
Maofei94 committed
277
    setRoleID('');
Maofei94's avatar
Maofei94 committed
278
    setItemObj('');
279
  };
Maofei94's avatar
Maofei94 committed
280
  // 编辑弹窗回调
281 282 283
  const editModal = () => {
    setEditVisible(false);
    setFlag(flag + 1);
Maofei94's avatar
Maofei94 committed
284 285
    handleTreeSelect(saveCurId);
    // setItemObj('');
Maofei94's avatar
Maofei94 committed
286 287 288 289 290 291
  };
  // 分组编辑回调
  const groupModal = () => {
    setGroupVisible(false);
    setFlag(flag + 1);
    setItemObj('');
Maofei94's avatar
Maofei94 committed
292
    handleTreeSelect(saveCurId);
293
  };
294 295 296 297 298 299
  const userModal = () => {
    setUserVisible(false);
    setFlag(flag + 1);
    setItemObj('');
    handleTreeSelect(saveCurId);
  }
Maofei94's avatar
Maofei94 committed
300 301 302
  const valueCallback = valueObj => {
    setSubList(valueObj);
  };
Maofei94's avatar
Maofei94 committed
303 304 305
  const handleHide = () => {
    setMulu(!mulu);
  };
Maofei94's avatar
Maofei94 committed
306
  const handleCommit = results => {
Maofei94's avatar
Maofei94 committed
307
    setBtnLoading(true);
Maofei94's avatar
Maofei94 committed
308
    setMenuToRole(
Maofei94's avatar
Maofei94 committed
309
      qs.stringify({
Maofei94's avatar
Maofei94 committed
310
        roleID,
Maofei94's avatar
Maofei94 committed
311
        menuNameList: String(results.flat()),
Maofei94's avatar
Maofei94 committed
312 313 314 315 316 317 318 319
      }),
      {
        headers: {
          'content-type': 'application/x-www-form-urlencggoded;charset=UTF-8',
        },
      },
    )
      .then(res => {
Maofei94's avatar
Maofei94 committed
320
        setBtnLoading(false);
Maofei94's avatar
Maofei94 committed
321
        if (res.success) {
Maofei94's avatar
Maofei94 committed
322
          setValueList([...results.flat()]);
Maofei94's avatar
Maofei94 committed
323 324 325 326 327 328 329 330
          notification.success({
            message: '提示',
            duration: 3,
            description: '设置成功',
          });
        } else {
          notification.error({
            message: '提示',
Maofei94's avatar
Maofei94 committed
331
            duration: 15,
Maofei94's avatar
Maofei94 committed
332 333 334 335 336
            description: res.message,
          });
        }
      })
      .catch(err => {
Maofei94's avatar
Maofei94 committed
337
        setBtnLoading(false);
Maofei94's avatar
Maofei94 committed
338 339
        console.log(err);
      });
340
  };
341 342 343
  const handleUserAttach = () => {
    setUserVisible(true)
  }
344 345
  return (
    <PageContainer>
Maofei94's avatar
Maofei94 committed
346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366
      <div
        className={classnames({
          [styles.content]: true,
        })}
      >
        <Card
          className={classnames({
            [styles.cardBox]: true,
            [styles.hideBox]: !mulu,
          })}
        >
          <Spin
            tip="loading...."
            spinning={spinLoading}
            style={{ margin: '20px auto ', display: 'block' }}
          >
            <div className={userStyles.siteTitle}>
              <span>选择角色:</span>
            </div>
            {treeData && treeData.length > 0 && (
              <Tree
shaoan123's avatar
shaoan123 committed
367
                style={{ overflowY: 'scroll', height: '48rem' }}
Maofei94's avatar
Maofei94 committed
368 369 370 371
                // showLine={{ showLeafIcon: false }}
                showIcon
                onSelect={handleTreeSelect}
                autoExpandParent
372
                // expandedKeys={currentSelectId}
Maofei94's avatar
Maofei94 committed
373 374 375 376 377 378 379 380 381 382 383
                treeData={treeData}
                selectedKeys={currentSelectId}
                blockNode
              />
            )}
          </Spin>
          <AddModal
            visible={modalVisible}
            onCancel={() => setModalVisible(false)}
            itemObj={itemObj}
            confirmModal={confirmModal}
Maofei94's avatar
Maofei94 committed
384
            siteList={siteList}
Maofei94's avatar
Maofei94 committed
385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403
          />
          <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}
          />
404 405 406 407 408 409
          <UserModal
            visible={userVisible}
            itemObj={itemObj}
            onCancel={() => setUserVisible(false)}
            confirmModal={userModal}
          />
Maofei94's avatar
Maofei94 committed
410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434
          <div>
            {mulu && (
              <Tooltip title="隐藏角色栏" className={styles.hide}>
                <DoubleLeftOutlined onClick={() => handleHide()} />
              </Tooltip>
            )}
            {!mulu && (
              <Tooltip title="显示角色栏" className={styles.hide}>
                <DoubleRightOutlined onClick={() => handleHide()} />
              </Tooltip>
            )}
          </div>
        </Card>
        <div
          className={classnames({
            [styles.boxR]: true,
            [styles.boxH]: mulu,
          })}
        >
          <Card
            className={classnames({
              [styles.cardBoxTop]: true,
              [styles.boxH]: mulu,
            })}
          >
Maofei94's avatar
Maofei94 committed
435 436 437 438 439
            <Row align="middle">
              <Col span={8}>
                <Search
                  allowClear
                  placeholder={placeholder}
Maofei94's avatar
Maofei94 committed
440
                  // onSearch={handleSearch}
Maofei94's avatar
Maofei94 committed
441 442
                  onChange={handleChange}
                  enterButton
443
                />
Maofei94's avatar
Maofei94 committed
444 445 446 447 448 449 450 451 452
              </Col>
              <Col span={3} />
              <Col span={8}>
                <Space size="large">
                  <Button
                    type="primary"
                    onClick={() => {
                      handleAdd();
                    }}
Maofei94's avatar
Maofei94 committed
453
                    disabled={!itemObj || (itemObj && itemObj.roleID)}
Maofei94's avatar
Maofei94 committed
454 455 456
                  >
                    新增角色
                  </Button>
Maofei94's avatar
Maofei94 committed
457 458 459 460 461 462 463 464 465
                  <Button
                    type="primary"
                    onClick={() => {
                      groupEdit();
                    }}
                    disabled={!itemObj.groupflag}
                  >
                    编辑分组
                  </Button>
Maofei94's avatar
Maofei94 committed
466 467 468 469 470 471 472 473 474 475
                  <Button
                    type="primary"
                    disabled={!itemObj.roleID}
                    onClick={() => {
                      handleEdit();
                    }}
                  >
                    编辑角色
                  </Button>
                  <Button
Maofei94's avatar
Maofei94 committed
476
                    type="primary"
Maofei94's avatar
Maofei94 committed
477 478 479 480 481 482 483 484
                    danger
                    onClick={() => {
                      handleDel();
                    }}
                    disabled={!itemObj.roleID}
                  >
                    删除角色
                  </Button>
485 486 487 488 489 490 491 492 493
                  <Button
                    type="primary"
                    onClick={() => {
                      handleUserAttach();
                    }}
                    disabled={!itemObj.roleID}
                  >
                    关联用户
                  </Button>
Maofei94's avatar
Maofei94 committed
494 495 496 497
                </Space>
              </Col>
            </Row>
          </Card>
Maofei94's avatar
Maofei94 committed
498 499 500 501 502 503
          <Card
            className={classnames({
              [styles.boxH]: mulu,
              [styles.cardBoxR]: true,
            })}
          >
Maofei94's avatar
Maofei94 committed
504
            {roleID ? (
Maofei94's avatar
Maofei94 committed
505
              <ListCard
张烨's avatar
张烨 committed
506 507 508
                loading={loading}
                checkList={valueList}
                dataList={dataList}
Maofei94's avatar
Maofei94 committed
509 510
                searchWord={searchWord}
                onCommit={handleCommit}
Maofei94's avatar
Maofei94 committed
511
                btnLoading={btnLoading}
Maofei94's avatar
Maofei94 committed
512
                hasData={hasData}
Maofei94's avatar
Maofei94 committed
513
              />
Maofei94's avatar
Maofei94 committed
514 515 516 517 518
            ) : (
              <Empty
                image={Empty.PRESENTED_IMAGE_SIMPLE}
                description="当前未选中角色"
              />
Maofei94's avatar
Maofei94 committed
519 520
            )}
          </Card>
Maofei94's avatar
Maofei94 committed
521 522
        </div>
      </div>
523 524 525 526 527
    </PageContainer>
  );
};

export default SiteManage;