/*
|
* @Company: hugeInfo
|
* @Author: lwh
|
* @Date: 2022-03-01 16:37:37
|
* @LastEditTime: 2022-04-11 17:18:19
|
* @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));
|
console.log('treeList', treeList);
|
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' }}
|
>
|
{apps.children &&
|
apps.children.map((moudles, moudleIndex) => (
|
<div style={{ paddingLeft: '8px', marginBottom: '8px', display: moudles.labelType == '2' ? 'flex' : 'block' }}>
|
<div
|
span={2}
|
style={{ borderRight: moudles.labelType == '2' && moudles.children && moudles.children.length > 0 && '1px solid #d9d9d9' }}
|
className={moudles.labelType == '2' ? '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>
|
</div>
|
{/* 菜单-功能 */}
|
{moudles.labelType == '2' && (
|
<Row style={{ width: '100%' }}>
|
{moudles.children &&
|
moudles.children.map((menus, index) => (
|
<React.Fragment>
|
<Col span={6}>
|
<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>
|
</React.Fragment>
|
))}
|
</Row>
|
)}
|
{/* 模块-菜单-功能 */}
|
{moudles.labelType !== '2' &&
|
moudles.children &&
|
moudles.children.map((menus, index) => (
|
<div style={{ marginBottom: '8px', display: 'flex' }}>
|
<div
|
span={2}
|
style={{ borderRight: menus.labelType == '2' && menus.children && menus.children.length > 0 && '1px solid #d9d9d9' }}
|
className={menus.labelType == '2' ? '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>
|
</div>
|
<Row style={{ width: '100%' }}>
|
{menus.children &&
|
menus.children.map((funs, index) => (
|
<React.Fragment>
|
<Col span={6}>
|
<Checkbox
|
disabled={disabled}
|
indeterminate={funs.indeterminate}
|
checked={disabled ? true : funs.checked}
|
value={funs.label}
|
onChange={(e) => onChange(e, funs)}
|
style={{ lineHeight: '42px' }}
|
>
|
{funs.label}
|
</Checkbox>
|
</Col>
|
</React.Fragment>
|
))}
|
</Row>
|
</div>
|
))}
|
|
{/* <Col span={moudles.labelType == '2' ? 16 : 24} style={{ marginBottom: '16px' }}>
|
<Row className={moudles.labelType == '2' && moudles.children && moudles.children.length > 0 && `select-tree-divider`}>
|
{moudles.labelType !== '2' &&
|
moudles.children &&
|
moudles.children.map((menus, index) => (
|
<React.Fragment>
|
<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>
|
<Col span={16} style={{ marginBottom: '16px' }}>
|
<Row className={menus.labelType == '2' && menus.children && menus.children.length > 0 && `select-tree-divider`}>
|
{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>
|
</Col>
|
</React.Fragment>
|
))}
|
</Row>
|
</Col> */}
|
</div>
|
))}
|
<Divider />
|
</Panel>
|
))}
|
</Collapse>
|
</div>
|
);
|
};
|
SelectTree.propTypes = {};
|
export default SelectTree;
|
