/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-03-09 15:21:59
|
* @LastEditTime: 2022-07-11 09:14:46
|
* @LastEditors: ldh
|
* @Version: 1.0.0
|
* @Description: 角色权限
|
*/
|
import React, { useState, useEffect } from 'react';
|
import PropTypes from 'prop-types';
|
import { Row, Col, Input, Button } from 'antd';
|
import PowerList from '../../PowerList';
|
import * as $$ from '../../../utils/utility';
|
import MyTabs from '../../MyTabs';
|
|
/**
|
* isRoleEdit, // 'add'新增, 'change'修改, ''无
|
* editRoleData, // 当前修改的角色数据
|
* roleName, // 当前选择的角色名称
|
* rolePowerData, // 当前选择的角色拥有的权限数据
|
* allPowerData, // 所有的角色权限数据
|
* handleCancel, // 取消
|
* handleChangeInput,
|
* handleSubmit, // 保存
|
*/
|
const RolePower = ({ isRoleEdit, editRoleData, roleName, rolePowerData, allPowerData, handleCancel, handleChangeInput, handleSubmit }) => {
|
// 全部功能列表数据
|
const [tabsData, setTabsData] = useState([]);
|
|
// tabs下选择的对应的功能列表数据
|
const [activeTabs, setActiveTabs] = useState({ key: '1', powerData: [] });
|
|
// 角色下选中的功能checkbox
|
const [checkboxValues, setCheckboxValues] = useState({});
|
|
// 全部的功能权限checkbox
|
const [allPagePower, setAllPagePower] = useState({});
|
|
// 保存
|
function handleSubmitRolePower() {
|
let submitArr = [];
|
let data = JSON.parse(JSON.stringify(tabsData));
|
data.forEach((item) => {
|
item.data.forEach((x) => {
|
if (x.childrenPageId) {
|
forEach: for (let i = 0; i < x.childrenPageId.length; i++) {
|
if (checkboxValues[x.childrenPageId[i]] && checkboxValues[x.childrenPageId[i]].length > 0) {
|
submitArr.push(x);
|
break forEach;
|
}
|
}
|
}
|
});
|
});
|
function loop(data, arr) {
|
data.forEach((x, t) => {
|
if (x.labelType === '2') {
|
// 选择页面下存在的权限
|
let power = [];
|
if (checkboxValues[x.value] && checkboxValues[x.value].length > 0) {
|
x.children.forEach((y) => {
|
if (checkboxValues[x.value].includes(y.value)) {
|
power.push(y);
|
}
|
});
|
}
|
x.children = power;
|
arr.push(x);
|
} else {
|
if (x.childrenPageId) {
|
forEach: for (let i = 0; i < x.childrenPageId.length; i++) {
|
if (checkboxValues[x.childrenPageId[i]] && checkboxValues[x.childrenPageId[i]].length > 0) {
|
arr.push(x);
|
loop(x.children, []);
|
break forEach;
|
}
|
}
|
}
|
}
|
});
|
}
|
// submitArr勾选的应用
|
submitArr.forEach((item) => {
|
// 模块 or 菜单
|
let arr = [];
|
loop(item.children, arr);
|
item.children = arr;
|
});
|
handleSubmit(submitArr);
|
}
|
|
// checkbox选择
|
function handleCheckboxChecked(type, values, id) {
|
if (type === 'power') {
|
// 选择功能时
|
checkboxValues[id] = values;
|
} else if (type === 'pageAll') {
|
// 全选页面时
|
checkboxValues[id] = values ? allPagePower[id] : [];
|
} else if (type === 'fatherMenu' || type === 'center') {
|
// 选择父级菜单模板
|
if (id && id.length > 0) {
|
id.forEach((x) => {
|
checkboxValues[x] = values ? allPagePower[x] : [];
|
});
|
}
|
}
|
setCheckboxValues({ ...checkboxValues });
|
}
|
|
// 校验菜单的应用中心，模块中心，页面是否是全选或半选择状态
|
function checkboxVisible(value = []) {
|
let indeterminate = false,
|
checkAll = false;
|
let openPowerTotal = 0,
|
allPowerTotal = 0;
|
value.forEach((x) => {
|
openPowerTotal = openPowerTotal + (checkboxValues[x] ? checkboxValues[x].length : 0);
|
allPowerTotal = allPowerTotal + (allPagePower[x] ? allPagePower[x].length : 0);
|
});
|
if (openPowerTotal === allPowerTotal && allPowerTotal !== 0) {
|
indeterminate = false;
|
checkAll = true;
|
} else if (openPowerTotal < allPowerTotal && openPowerTotal > 0) {
|
indeterminate = true;
|
checkAll = false;
|
} else {
|
indeterminate = false;
|
checkAll = false;
|
}
|
return { indeterminate, checkAll };
|
}
|
|
// 数据处理
|
function dataHandle(data, type) {
|
let myData = JSON.parse(JSON.stringify(data));
|
let obj = {};
|
// 循环处理将页面下的功能抽离出来，方便对于checkbox的勾选做判断。
|
function loop(value, record, arr) {
|
arr = [...arr, record];
|
value.forEach((x, t) => {
|
if (x.labelType === '2') {
|
// 菜单时记录有的权限
|
let power = [];
|
x.children.forEach((y) => {
|
power.push(y.value);
|
});
|
obj = { ...obj, [x.value]: power };
|
// 将应用和模块记录其底下有几个页面的id
|
arr.forEach((y) => {
|
y.childrenPageId = y.childrenPageId ? [...y.childrenPageId, x.value] : [x.value];
|
});
|
} else if (x.children && x.children.length > 0) {
|
loop(x.children, x, arr);
|
}
|
});
|
}
|
let appClientArr = [];
|
let appClient = null;
|
let index = null;
|
myData.forEach((x) => {
|
let arr = [];
|
if (type === 'all' && x.appClient) {
|
// 将数据区分为pc端,当事人小程序,调解员小程序
|
if (appClient !== x.appClient) {
|
appClientArr.push({
|
appClient: x.appClient,
|
title: x.appClient === '1' ? 'PC端' : x.appClient === '2' ? '当事人小程序' : '调解员小程序',
|
data: [x],
|
});
|
index = index === null ? 0 : index + 1;
|
appClient = x.appClient;
|
} else {
|
appClientArr[index].data.push(x);
|
}
|
}
|
loop(x.children, x, arr);
|
});
|
return type === 'all' ? { appClientArr, obj } : obj;
|
}
|
|
// 切换tabs
|
function handleChangeTabs(key) {
|
tabsData.forEach((x) => {
|
if (x.appClient === key) {
|
let activeTabsValue = { key, powerData: x.data };
|
setActiveTabs(activeTabsValue);
|
}
|
});
|
}
|
|
useEffect(() => {
|
setCheckboxValues(dataHandle(rolePowerData, 'have'));
|
}, [rolePowerData]);
|
|
let allPowerDataCopy = JSON.stringify(allPowerData);
|
|
useEffect(() => {
|
let tabsDataArr = dataHandle(allPowerData, 'all').appClientArr;
|
let allPagePowerMap = dataHandle(allPowerData, 'all').obj;
|
setTabsData(tabsDataArr);
|
setAllPagePower(allPagePowerMap);
|
if (tabsDataArr.length > 0) {
|
let activeTabsValue = { key: tabsDataArr[0].appClient, powerData: tabsDataArr[0].data || [] };
|
setActiveTabs(activeTabsValue);
|
}
|
}, [allPowerDataCopy]);
|
|
return (
|
<div className="role-main">
|
{isRoleEdit ? (
|
<Row className="role-main-row">
|
<Col span={16}>
|
<span>角色名称：</span>
|
<Input
|
style={{ width: '200px' }}
|
placeholder="请输入"
|
value={editRoleData.name}
|
onChange={(e) => handleChangeInput('name', e.target.value)}
|
/>
|
</Col>
|
<Col span={8} style={{ textAlign: 'right' }}>
|
<Button className="public-buttonMargin" onClick={handleCancel}>
|
取消
|
</Button>
|
<Button type="primary" onClick={() => handleSubmitRolePower()}>
|
{isRoleEdit === 'add' ? '新增' : '保存'}
|
</Button>
|
</Col>
|
</Row>
|
) : (
|
<h3 className="role-main-row">{roleName}</h3>
|
)}
|
<MyTabs tabs={tabsData} border keyStr={['appClient', 'title']} activeKey={activeTabs.key} onChange={handleChangeTabs} />
|
<div className="role-main-power">
|
{activeTabs.powerData.length === 0 && $$.MyEmpty({ description: '暂无权限数据' })}
|
<PowerList
|
data={activeTabs.powerData}
|
isRoleEdit={isRoleEdit}
|
checkboxValues={checkboxValues}
|
handleCheckboxChecked={handleCheckboxChecked}
|
checkboxVisible={checkboxVisible}
|
/>
|
</div>
|
</div>
|
);
|
};
|
|
RolePower.propTypes = {
|
isRoleEdit: PropTypes.any,
|
editRoleData: PropTypes.object,
|
roleName: PropTypes.string,
|
rolePowerData: PropTypes.array,
|
allPowerData: PropTypes.array,
|
handleCancel: PropTypes.func,
|
handleChangeInput: PropTypes.func,
|
handleSubmit: PropTypes.func,
|
};
|
|
export default RolePower;
|
