/*
|
* @Company: hugeInfo
|
* @Author: lwh
|
* @Date: 2022-03-01 16:37:37
|
* @LastEditTime: 2022-04-08 15:43:57
|
* @LastEditors: lwh
|
* @Version: 1.0.0
|
* @Description:勾选树形结构组件
|
*/
|
import React, { useState } from 'react';
|
import './index.less';
|
import { Collapse, Row, Col, Checkbox, Divider } from 'antd';
|
import { CaretRightOutlined } from '@ant-design/icons';
|
|
const { Panel } = Collapse;
|
|
const SelectTree = ({ text, list, onChange = (e, list) => {}, disabled }) => {
|
const [treeList, setTreeList] = useState(list);
|
const [callbacked, setCallbacked] = useState(list.map((item) => item.value));
|
|
return (
|
<div className="select-tree-main">
|
<div className="select-tree-main-title">{text}</div>
|
<Collapse defaultActiveKey={callbacked} expandIcon={({ isActive }) => <CaretRightOutlined rotate={isActive ? 90 : 0} />} ghost>
|
{treeList.map((apps, appIndex) => (
|
//应用
|
<Panel
|
showArrow
|
header={
|
<Checkbox
|
disabled={disabled}
|
indeterminate={apps.indeterminate}
|
checked={disabled ? true : apps.checked}
|
value={apps.label}
|
onChange={(e) => onChange(e, apps)}
|
>
|
{apps.label}
|
</Checkbox>
|
}
|
key={apps.value}
|
style={{ position: 'relative' }}
|
>
|
<React.Fragment>
|
{apps.children &&
|
apps.children.map((moudles, moudleIndex) => (
|
//模块或者菜单
|
<Row style={{ paddingLeft: '8px', alignItems: 'center' }}>
|
<Col span={moudles.labelType == '2' ? null : 24} className="select-tree-main-col">
|
<Checkbox
|
disabled={disabled}
|
indeterminate={moudles.indeterminate}
|
checked={disabled ? true : moudles.checked}
|
value={moudles.label}
|
onChange={(e) => onChange(e, moudles)}
|
style={{ lineHeight: '42px' }}
|
>
|
{moudles.label}
|
</Checkbox>
|
</Col>
|
{moudles.labelType == '2' && moudles.children && moudles.children.length > 0 && (
|
<Divider style={{ borderLeft: '1px solid #d9d9d9', height: '24px' }} type="vertical" />
|
)}
|
{!apps.children && <Divider />}
|
{moudles.labelType == '2' &&
|
moudles.children &&
|
moudles.children.map((menus, index) => (
|
<Row style={{ alignItems: 'center', backgroundColor: 'red' }}>
|
<Col className="select-tree-main-col">
|
<Checkbox
|
disabled={disabled}
|
indeterminate={menus.indeterminate}
|
checked={disabled ? true : menus.checked}
|
value={menus.label}
|
onChange={(e) => onChange(e, menus)}
|
style={{ lineHeight: '42px' }}
|
>
|
{menus.label}
|
</Checkbox>
|
</Col>
|
{menus.labelType == '2' && <Divider style={{ borderLeft: '1px solid #d9d9d9', height: '24px' }} type="vertical" />}
|
{menus.children
|
? menus.children.map((funs, index) => (
|
<React.Fragment>
|
<Col className="select-tree-main-col">
|
<Checkbox
|
disabled={disabled}
|
checked={disabled ? true : funs.checked}
|
value={funs.label}
|
onChange={(e) => onChange(e, funs)}
|
style={{ lineHeight: '42px' }}
|
>
|
{funs.label}
|
</Checkbox>
|
</Col>
|
</React.Fragment>
|
))
|
: null}
|
</Row>
|
))}
|
{/* <Divider /> */}
|
</Row>
|
))}
|
</React.Fragment>
|
<Divider />
|
</Panel>
|
))}
|
</Collapse>
|
</div>
|
);
|
};
|
SelectTree.propTypes = {};
|
export default SelectTree;
|
