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
  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';
张烨's avatar
张烨 committed
44

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

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

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

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

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

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

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

export default SiteManage;