KC-MiddlePlatform/src/components/NavSelecter/index.tsx

/*
 * @Author: code4eat awesomedema@gmail.com
 * @Date: 2022-06-29 11:05:04
 * @LastEditors: code4eat awesomedema@gmail.com
 * @LastEditTime: 2022-07-01 11:07:09
 * @FilePath: /KC-MiddlePlatform/src/components/NavSelecter/index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */




import { Tabs, Checkbox, Button } from 'antd';
import React, { useEffect, useState } from 'react';
import './style.less';

const { TabPane } = Tabs;



export type NavSelecterItemType = {
    name: string;
    menuId: number|string;
    path:string;
    systemId:string;
}


export type NavSelecterData = {
    name: string;
    menuId: number|string;
    path:string;
    systemId:string;
    child?: NavSelecterData[]
}

export interface NavSelecter {
    onVisibleChange?: (t: boolean) => void;
    onChecked?:(t:NavSelecterItemType[]) => void;
    value?:NavSelecterItemType[];
    data?: NavSelecterData[];
}

const NavSelecter = (props: NavSelecter) => {

    const { onVisibleChange, data,value=[],onChecked } = props;
    const [checkedIds,set_checkedIds] = useState<(string|number)[]>([]);
    const [checkedItems,set_checkedItems] = useState<NavSelecterItemType[]>([]);


    const onChange = (tab:NavSelecterItemType) => {
        
        let _checkedIds = checkedIds;
        let _checkedItems = [...checkedItems]; 

        if(_checkedIds.includes(tab.menuId)){
            _checkedIds.splice(checkedIds.indexOf(tab.menuId),1);
            _checkedItems.splice(_checkedItems.findIndex(t=>t.menuId == tab.menuId),1);
            set_checkedIds([..._checkedIds]);
            set_checkedItems([..._checkedItems]);
        }else{
            
            _checkedIds.push(tab.menuId);
            _checkedItems.push(tab);
            set_checkedItems([..._checkedItems]);
            set_checkedIds([..._checkedIds]);
        }
    };

    const onMaskClick = (e: React.MouseEvent) => {

        onVisibleChange && onVisibleChange(false);
    }

    const onCommit = ()=>{
        onChecked&&onChecked(checkedItems);
        onVisibleChange && onVisibleChange(false);
    }

    const onReset = ()=>{
        set_checkedItems([]);
        set_checkedIds([]);
    }

    useEffect(()=>{

        set_checkedIds(value?.map(t=>t.menuId));
        set_checkedItems(value);

    },[value]);


    return (
        <div className="navSelecter" onClick={(e) => onMaskClick(e)}>
            <div className='container'>
                <div className='content' onClick={(e) => e.stopPropagation()}>
                    <Tabs defaultActiveKey="1" >
                        {
                            data?.map((val) => (
                                <TabPane tab={val.name} key={val.menuId}>
                                    {
                                        val.child?.map((item) => (
                                            <div className='row' key={item.menuId}>
                                                <div className='rowName'>{item.name}</div>
                                                <div className='rowWrap'>
                                                    {
                                                        item.child?.map(a => (
                                                            <div className='tab' key={a.menuId}>
                                                                <Checkbox onChange={() => onChange({
                                                                       name: a.name,
                                                                       menuId:a.menuId ,
                                                                       path:a.path,
                                                                       systemId:a.systemId
                                                                })} checked={checkedIds.includes(a.menuId)} ></Checkbox>
                                                                <span style={{ marginLeft: 8 }}>{a.name}</span>
                                                            </div>
                                                        ))
                                                    }
                                                </div>
                                            </div>
                                        ))
                                    }
                                </TabPane>
                            ))
                        }
                    </Tabs>
                </div>
                <div className='footer' onClick={e=>e.stopPropagation()}>
                    <span className='count'>{`已选中${checkedIds.length}项`}</span>
                    <div className='btnGroup'>
                        <Button style={{marginRight:8}} onClick={onReset}>重置</Button>
                        <Button type="primary" onClick={onCommit}>确定</Button>
                    </div>
                </div>
            </div>
        </div>
    )
}


export default NavSelecter;