/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-03-01 09:32:30
|
* @LastEditTime: 2022-08-02 16:55:37
|
* @LastEditors: ldh
|
* @Version: 1.0.0
|
* @Description: 公共组件功能列表清单
|
*/
|
import React, { useState } from 'react';
|
import PropTypes from 'prop-types';
|
import './index.less';
|
import { Checkbox, Row, Col, Divider } from 'antd';
|
import { CaretDownOutlined } from '@ant-design/icons';
|
|
/**
|
* data, // 角色下拥有的功能列表数据
|
* isRoleEdit, // 判断是否新增或修改状态
|
* checkboxValues, // 页面权限选择数据map
|
* handleCheckboxChecked, // 点击checkbox
|
* checkboxVisible, // 判断页面，模块，应用是否全选或半选择状态
|
*/
|
const PowerList = ({ data, isRoleEdit, checkboxValues, handleCheckboxChecked, checkboxVisible }) => {
|
// hide应用
|
const [hideArr, setHideArr] = useState([]);
|
|
// 隐藏应用
|
function handleHide(id) {
|
let index = hideArr.indexOf(id);
|
if (index !== -1) {
|
hideArr.splice(index, 1);
|
} else {
|
hideArr.push(id);
|
}
|
setHideArr([...hideArr]);
|
}
|
|
// 渲染菜单功能列表
|
function loopCheckboxGroup(value, father) {
|
return value.map((x, t) => {
|
return x.labelType === '2' ? (
|
<div key={x.value}>
|
<div className={`powerList-main-checkboxPage ${father && 'powerList-main-checkboxPagePadding'}`}>
|
{/* 菜单 */}
|
<div className="powerList-main-checkboxPageLeft">
|
<Checkbox
|
onChange={(e) => handleCheckboxChecked('pageAll', e.target.checked, x.value)}
|
indeterminate={checkboxVisible([x.value]).indeterminate}
|
checked={checkboxVisible([x.value]).checkAll}
|
disabled={!isRoleEdit}
|
>
|
{x.label}
|
</Checkbox>
|
</div>
|
{/* 功能 */}
|
<Checkbox.Group
|
className={`powerList-main-checkboxPageRight ${!father && 'powerList-main-checkboxPagePadding'}`}
|
value={checkboxValues[x.value]}
|
onChange={(values) => handleCheckboxChecked('power', values, x.value)}
|
disabled={!isRoleEdit}
|
>
|
<Row gutter={[16, 16]}>
|
{x.children.map((y, t) => {
|
return (
|
<Col span={6} key={y.value}>
|
<Checkbox value={y.value}>{y.label}</Checkbox>
|
</Col>
|
);
|
})}
|
</Row>
|
</Checkbox.Group>
|
</div>
|
{!father && <Divider />}
|
</div>
|
) : (
|
<div key={x.value}>
|
<Checkbox
|
onChange={(e) => handleCheckboxChecked('fatherMenu', e.target.checked, x.childrenPageId)}
|
indeterminate={checkboxVisible(x.childrenPageId).indeterminate}
|
checked={checkboxVisible(x.childrenPageId).checkAll}
|
className="powerList-main-checkboxMargin"
|
disabled={!isRoleEdit}
|
>
|
{x.label}
|
</Checkbox>
|
{loopCheckboxGroup(x.children, 'father')}
|
{!father && <Divider />}
|
</div>
|
);
|
});
|
}
|
|
return (
|
<div className="powerList">
|
{data.map((x, t) => {
|
return (
|
<div className="powerList-main" key={t}>
|
<div onClick={() => handleHide(x.value)} className="powerList-main-icon">
|
<CaretDownOutlined className={`powerList-main-iconCaretDown ${hideArr.includes(x.value) ? 'powerList-main-iconRotate' : ''}`} />
|
</div>
|
<div className="powerList-main-checkbox">
|
<Checkbox
|
onChange={(e) => handleCheckboxChecked('center', e.target.checked, x.childrenPageId)}
|
indeterminate={checkboxVisible(x.childrenPageId).indeterminate}
|
checked={checkboxVisible(x.childrenPageId).checkAll}
|
className="powerList-main-checkboxMargin"
|
disabled={!isRoleEdit}
|
>
|
{x.label}
|
</Checkbox>
|
{hideArr.includes(x.value) ? null : loopCheckboxGroup(x.children)}
|
</div>
|
</div>
|
);
|
})}
|
</div>
|
);
|
};
|
|
PowerList.propTypes = {
|
data: PropTypes.array,
|
isRoleEdit: PropTypes.any,
|
checkboxValues: PropTypes.object,
|
handleCheckboxChecked: PropTypes.func,
|
checkboxVisible: PropTypes.any,
|
};
|
|
export default PowerList;
|
