RoleManage.jsx 14.1 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 10
  Row,
  Col,
  Tree,
  Card,
  Input,
  Spin,
  notification,
  Button,
Maofei94's avatar
Maofei94 committed
11
  Tooltip,
Maofei94's avatar
Maofei94 committed
12 13
  Space,
} from 'antd';
Maofei94's avatar
Maofei94 committed
14
import PageContainer from '@/components/BasePageContainer';
15 16 17
import {
  DoubleLeftOutlined,
  DoubleRightOutlined,
Maofei94's avatar
Maofei94 committed
18 19
  TeamOutlined,
  UserOutlined,
20
} from '@ant-design/icons';
Maofei94's avatar
Maofei94 committed
21
import {
Maofei94's avatar
Maofei94 committed
22
  setMenuToRole,
Maofei94's avatar
Maofei94 committed
23
  getRoleGroupList,
Maofei94's avatar
Maofei94 committed
24
  getMenuByRoleWithLevel,
Maofei94's avatar
Maofei94 committed
25
} from '@/services/userCenter/roleManage/api';
张烨's avatar
张烨 committed
26 27 28 29
import ListCard, {
  checkChildrenByCondition,
  getId,
} from '@/components/CheckGroup';
Maofei94's avatar
Maofei94 committed
30
// import ListCard from '@/pages/orgnazation/ListCard';
Maofei94's avatar
Maofei94 committed
31
import qs from 'qs';
Maofei94's avatar
Maofei94 committed
32
import classnames from 'classnames';
33 34 35 36
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
37
import EditGroup from './EditGroup';
张烨's avatar
张烨 committed
38
import userStyles from '../UserManage.less';
Maofei94's avatar
Maofei94 committed
39
import '@/assets/font/omsfont//iconfont.css';
张烨's avatar
张烨 committed
40

41
const { Search } = Input;
Maofei94's avatar
Maofei94 committed
42
const placeholder = '请输入功能名称';
Maofei94's avatar
Maofei94 committed
43

44 45 46
const SiteManage = () => {
  const [treeData, setTreeData] = useState([]);
  const [searchWord, setSearchWord] = useState('');
Maofei94's avatar
Maofei94 committed
47
  const [roleID, setRoleID] = useState(''); // 角色ID
Maofei94's avatar
Maofei94 committed
48
  const [saveTreeId, setSaveTreeId] = useState(''); // 保存点击回调的roleid
49 50
  const [modalVisible, setModalVisible] = useState(false); // 新增弹窗
  const [flag, setFlag] = useState(1);
Maofei94's avatar
Maofei94 committed
51
  const [itemObj, setItemObj] = useState({}); // 选择的角色item
52 53
  const [delVisible, setDelVisible] = useState(false); // 删除弹窗
  const [editVisible, setEditVisible] = useState(false); // 修改弹窗
Maofei94's avatar
Maofei94 committed
54 55
  const [subList, setSubList] = useState([]); // 选中的数组
  const [spinLoading, setSpinLoading] = useState(false);
Maofei94's avatar
Maofei94 committed
56
  const [currentSelectId, setCurrentSelectId] = useState([]); // 选中的树节点
Maofei94's avatar
Maofei94 committed
57
  const [saveCurId, setSaveCurId] = useState([]); // 树节点ID
Maofei94's avatar
Maofei94 committed
58
  const [groupVisible, setGroupVisible] = useState(false); // 分组编辑弹窗
Maofei94's avatar
Maofei94 committed
59
  const [hasData, setHasData] = useState(false);
张烨's avatar
张烨 committed
60 61 62
  const [valueList, setValueList] = useState([]);
  const [dataList, setdataList] = useState([]);
  const [loading, setLoading] = useState(true);
Maofei94's avatar
Maofei94 committed
63 64
  const [btnLoading, setBtnLoading] = useState(false);
  const [mulu, setMulu] = useState(true);
张烨's avatar
张烨 committed
65

66
  // 点击树的回调
Maofei94's avatar
Maofei94 committed
67
  const handleTreeSelect = (e, treenode) => {
Maofei94's avatar
Maofei94 committed
68 69 70 71 72
    if (treenode) {
      console.log(e, node, 'node');
      const { node } = treenode;
      const { roleID: id } = node;
      setItemObj(node);
Maofei94's avatar
Maofei94 committed
73 74 75
      if (id) {
        setSaveTreeId(id);
        setRoleID(id);
Maofei94's avatar
Maofei94 committed
76
        setValueList([...valueList]);
Maofei94's avatar
Maofei94 committed
77 78 79
      } else {
        setRoleID(saveTreeId);
      }
Maofei94's avatar
Maofei94 committed
80 81 82 83 84
    }

    if (e[0]) {
      setCurrentSelectId(e);
      setSaveCurId(e);
85
    } else {
Maofei94's avatar
Maofei94 committed
86
      setCurrentSelectId(saveCurId);
87 88 89
    }
  };
  useEffect(() => {
Maofei94's avatar
Maofei94 committed
90
    setSpinLoading(true);
Maofei94's avatar
Maofei94 committed
91
    getRoleGroupList({ userID: '1' }).then(res => {
Maofei94's avatar
Maofei94 committed
92
      setSpinLoading(false);
Maofei94's avatar
Maofei94 committed
93 94 95 96 97
      if (res.code === 0) {
        const { roleList } = res.data;
        let arr = transTree(roleList);
        setTreeData(arr);
      }
Maofei94's avatar
Maofei94 committed
98
    });
Maofei94's avatar
Maofei94 committed
99 100 101
    return () => {
      setItemObj({});
    };
Maofei94's avatar
Maofei94 committed
102
  }, [flag]);
张烨's avatar
张烨 committed
103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125

  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
126
    getMenuByRoleWithLevel({
张烨's avatar
张烨 committed
127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147
      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
148
                true,
张烨's avatar
张烨 committed
149 150 151 152 153 154 155 156 157 158 159 160 161
                'map',
              ).flat(Infinity),
            )
            .flat(Infinity)
            .filter(Boolean),
        );
        setLoading(false);
      })
      .catch(err => {
        setLoading(false);
      });
  }, [roleID]);

162 163 164
  const handleAdd = e => {
    setModalVisible(true);
  };
Maofei94's avatar
Maofei94 committed
165
  // 角色删除
166 167 168
  const handleDel = e => {
    setDelVisible(true);
  };
Maofei94's avatar
Maofei94 committed
169
  // 编辑角色
170 171 172
  const handleEdit = e => {
    setEditVisible(true);
  };
Maofei94's avatar
Maofei94 committed
173 174 175 176 177 178
  // 分组编辑
  const groupEdit = () => {
    setGroupVisible(true);
  };
  // 树形数据转换;
  const transTree = val => {
179
    let arr = val;
Maofei94's avatar
Maofei94 committed
180
    let newArr = [];
Maofei94's avatar
Maofei94 committed
181
    let arr2 = arr.filter(item => {
Maofei94's avatar
Maofei94 committed
182 183 184 185 186
      if (item.child && item.child.length > 0) {
        item.child.forEach(itemC => {
          item.roleList.unshift(itemC);
        });
      }
Maofei94's avatar
Maofei94 committed
187
      if (item.visibleTitle === '手持系统') {
Maofei94's avatar
Maofei94 committed
188
        item.icon = <span className="iconfont iconanzhuo1" />;
Maofei94's avatar
Maofei94 committed
189
        newArr[0] = item;
Maofei94's avatar
Maofei94 committed
190 191
      } else if (item.visibleTitle === '小程序') {
        item.icon = <span className="iconfont iconxiaochengxu" />;
Maofei94's avatar
Maofei94 committed
192
        newArr[1] = item;
Maofei94's avatar
Maofei94 committed
193 194
      } else {
        item.icon = <span className="iconfont iconliulanqi" />;
Maofei94's avatar
Maofei94 committed
195
      }
Maofei94's avatar
Maofei94 committed
196
      return (
Maofei94's avatar
Maofei94 committed
197 198 199 200
        item.visibleTitle !== '其它角色' &&
        item.visibleTitle !== '运维管理' &&
        item.visibleTitle !== '手持系统' &&
        item.visibleTitle !== '小程序'
Maofei94's avatar
Maofei94 committed
201
      );
Maofei94's avatar
Maofei94 committed
202
    });
Maofei94's avatar
Maofei94 committed
203
    arr2 = arr2.concat(newArr);
Maofei94's avatar
Maofei94 committed
204 205 206
    let arr3 = arr2.map(item => {
      item.title = item.visibleTitle || '';
      item.key = item.visibleValue || '';
Maofei94's avatar
Maofei94 committed
207
      if (item.roleList && item.roleList.length > 0) {
Maofei94's avatar
Maofei94 committed
208
        item.roleList.map((itemRole, index) => {
Maofei94's avatar
Maofei94 committed
209 210
          if (itemRole.roleList) {
            itemRole.title = itemRole.visibleTitle || '';
Maofei94's avatar
Maofei94 committed
211
            itemRole.key = itemRole.visibleTitle + itemRole.visibleValue || '';
Maofei94's avatar
Maofei94 committed
212
            itemRole.groupflag = itemRole.visibleTitle;
Maofei94's avatar
Maofei94 committed
213
            itemRole.icon = <TeamOutlined />;
Maofei94's avatar
Maofei94 committed
214 215 216 217 218
            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
219
              i.icon = <UserOutlined />;
张烨's avatar
张烨 committed
220
              if (roleID && roleID === i.roleID) {
Maofei94's avatar
Maofei94 committed
221 222
                setItemObj(i);
              }
Maofei94's avatar
Maofei94 committed
223
            });
Maofei94's avatar
Maofei94 committed
224

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

export default SiteManage;