CostAccountManaSys/src/pages/baseSetting/reportProjectSetting/component/drawerContent.jsx

import React,{useState,useEffect,useRef} from 'react'
import { PageContainer } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import {Table } from 'antd';
import { DrawerForm } from '@ant-design/pro-form';
import {deepGetVal,deepGetAllParents,unique} from '@/utils';






export default function DrawerContent(props) {

    const { 
        visible=false,
        onVisibleChange=()=>{},
        currentRow={},
        renderListFunc=()=>{},
        onFinishFunc=()=>{console.log('init onFinishFunc')},
        columns=[],
        defaultSelected=[],
        config={},
        title,
        pageContainerConfig=()=>{},
        expandable={}
    } = props;
    
    const {rowKeys='id',tableSearch=false,} = config;
    const drawerRef = useRef();
    const [selectedKeys,setSelectedKeys] = useState([]);
    const [defaultSelectedKeys,setDefaultSelectedKeys] = useState([]);
    const [ifSearch,setIfSearch] = useState(false);
    const drawerTableRef= useRef();
    const [selectedRows,setSelectedRows] = useState([]);

    const renderDefault = ()=>{
        const defaultSelects = defaultSelected;
        setDefaultSelectedKeys(defaultSelected);
        setSelectedKeys(defaultSelects);
    }


    useEffect(()=>{
        renderDefault();
    },[currentRow,defaultSelected])



    return visible&&currentRow&&columns.length>0 ? (
        <>
            <DrawerForm
                title={title}
                visible={visible}
                onVisibleChange={onVisibleChange}
                formRef={drawerRef}
                drawerProps={{
                    forceRender: true,
                    destroyOnClose: true,
                }}
                onFinish={async (values) => {
                    //   console.log({onFinishFunc,values});
                      onFinishFunc(values,defaultSelectedKeys,selectedRows);
                }}
            
            >
               <PageContainer
                    {...pageContainerConfig(drawerTableRef)}
               >
                <ProTable
                    columns={columns}
                    rowKey={rowKeys}
                    tableClassName="drawerContent"
                    request={renderListFunc}
                    search={tableSearch}
                    actionRef={drawerTableRef}
                    onSubmit={(u)=>{
                        //  console.log({u});
                        setIfSearch(true);
                    }}
                    onReset={()=>{setIfSearch(false);}}
                    expandable={{
                        ...expandable,
                    }}
                    rowSelection={{
                        // 自定义选择项参考: https://ant.design/components/table-cn/#components-table-demo-row-selection-custom
                        // 注释该行则默认不显示下拉选项
                        selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
                        checkStrictly:true,
                        selectedRowKeys:selectedKeys,
                        renderCell:(checked, record, index, originNode)=>{
                               if(!record[expandable['childrenColumnName']]||record[expandable['childrenColumnName']].length==0)return originNode
                        },
                        onChange:(selectedRowKeys, selectedRows)=>{
                            // console.log({selectedRowKeys,selectedRows});
                            setSelectedRows(selectedRows);
                            setSelectedKeys(selectedRowKeys);
                            setDefaultSelectedKeys([].concat(selectedRowKeys));
                        },
                        onSelect:(record, selected, selectedRows, nativeEvent)=>{
                            // // console.log({record, selected, selectedRows, nativeEvent,ifSearch});
                            // let _defaultSelectedKeys = defaultSelectedKeys;
                            // let children = record[expandable['childrenColumnName']];
                            // let arr=[];
                            // if(children&&children.length>0){
                            //     arr = deepGetVal(children,rowKeys,expandable['childrenColumnName']);
                            // }
                            // arr.push(record[rowKeys]);
                            
                            // if(!selected){
                            //     arr.forEach(val=>{
                            //         const index =  defaultSelectedKeys.findIndex(item=>item == val);
                            //     // console.log(index,record[rowKeys],defaultSelectedKeys)
                            //         if(index != -1){
                            //             _defaultSelectedKeys.splice(index,1);
                            //         }
                            //     });
                            //     _defaultSelectedKeys = unique(_defaultSelectedKeys);
                            //     setDefaultSelectedKeys(_defaultSelectedKeys);

                            // }else{
                            //     let tempArr = _defaultSelectedKeys.concat(arr);
                            //     tempArr = unique(tempArr);
                            //     setDefaultSelectedKeys([].concat(tempArr));
                            // }

                        }
                    }}
                />
              </PageContainer>
            </DrawerForm>
        </>
    ) : <></>
}