RoleManage.jsx 13.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 '../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 106 107
    return () => {
      setItemObj({});
    };
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 198 199
      // if (item.visibleTitle === '手持系统') {
      //   item.icon = <span className="iconfont iconanzhuo1" />;
      //   newArr[0] = item;
      // }
      if (item.visibleTitle === '小程序') {
        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 233
                setItemObj(i);
              }
Maofei94's avatar
Maofei94 committed
234
            });
Maofei94's avatar
Maofei94 committed
235

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

export default SiteManage;