CostAccountingSys/src/pages/baseInfoMana/unitMana/tableSelector.tsx

import React, { useEffect, useState } from "react";
import { Input, Switch } from 'antd'
import { KCIMTable } from "@/components/KCIMTable";
import { createFromIconfontCN } from "@ant-design/icons";
import { getCheckData } from "../checkGroupMana/service";

import { ModalForm, ProColumns } from "@ant-design/pro-components";
import { getData } from "../empMana/service";

// import './style.less';


interface TableSelecterProps {
    record: any
}

const IconFont = createFromIconfontCN({
    scriptUrl: '',
});




const TableSelecter = ({ tableSelecterType, record, open, title, onVisibleChange, rowKey = 'id', request, onFinish }: {
    record: any, open: boolean, title: string, onVisibleChange: (bool: boolean) => void,
    tableSelecterType:string,
    rowKey?: string, request?: (params: any) => Promise<any>, onFinish?: (selectedKeys: React.Key[], selectedRows: any[]) => void
}) => {


    const Table = React.forwardRef(({ }: TableSelecterProps, ref) => {

        const [datasource, set_datasource] = useState<any[]>([]);
        const [selectedKeys, setSelectedKeys] = useState<React.Key[]>([]);
        const [selectedRows, set_selectedRows] = useState<any[]>([]);
        const [showList, set_showList] = useState<any[]>([]);


        const empColumns: ProColumns[] = [
            {
                title: 'ID',
                dataIndex: 'id',
            },
            {
                title: '姓名',
                dataIndex: 'name',
            },
        ];
        const checkGroupColumns: ProColumns[] = [
            {
                title: 'ID',
                dataIndex: 'id',
            },
            {
                title: '查核组名',
                dataIndex: 'id',
            },
            {
                title: '是否查核组长',
                dataIndex: 'flag',
                renderText(flag, record, index, action) {
                    return <Switch size='small' checked={flag == '1'} onChange={(bool) => onSwitchChange(bool, record)} />
                },
            }
        ];


        const onSwitchChange = (bool: boolean, record: any) => {
            const newData = datasource.map((item) => {
                if (item.id == record.id) {
                    return {
                        ...item,
                        flag: bool
                    }
                } else {
                    return item
                }
            });
            const newShowList = showList.map((item) => {
                if (item.id == record.id) {
                    return {
                        ...item,
                        flag: bool
                    }
                } else {
                    return item
                }
            });

            // console.log({newData,newShowList});
            set_datasource([...newData]);
            set_showList([...newShowList]);
        }

        const onSelectChange = (newSelectedRowKeys: React.Key[], selectedRows: any) => {
            setSelectedKeys([...newSelectedRowKeys]);

        };

        const saveHandle = async () => {

            onFinish && onFinish(selectedKeys, selectedRows);

        }

        const getTableData = async () => {
            const resp = await getData({
                current: 1,
                pageSize: 500
            });
            if (resp) {
                set_showList(resp.list);
                set_datasource([...datasource, ...resp.list]);
            }

            return Promise.resolve([]);
        }

        useEffect(()=>{
            console.log({record});
        },[record]);

        useEffect(() => {
            getTableData()
        }, [])


        return (
            <div >
                <Input placeholder={'请输入名称'} allowClear
                    suffix={
                        <IconFont style={{ color: '#99A6BF' }} type="iconsousuo" />
                    }
                    style={{ marginBottom: 8 }}
                    onChange={(e) => {
                        if (e.target.value.length != 0) {
                            const result = datasource.filter(item => item.name.indexOf(e.target.value) != -1);
                            set_showList(result);
                        } else {
                            set_showList(datasource);
                        }

                    }}

                />
                <KCIMTable columns={tableSelecterType == 'EMP' ? empColumns : checkGroupColumns}
                    options={{
                        density: true,
                        setting: {
                            listsHeight: 100,
                        },
                    }}
                    rowKey={rowKey}
                    scroll={{ y: 400 }}
                    tableAlertRender={false}
                    rowSelection={{
                        // 自定义选择项参考: https://ant.design/components/table-cn/#components-table-demo-row-selection-custom
                        // 注释该行则默认不显示下拉选项
                        // selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
                        onChange: onSelectChange,
                    }}
                    pagination={{ showTitle: false, showSizeChanger: true }}
                    dataSource={showList}

                />
                <div className='footer'>
                    <span className='cancel' onClick={() => close()}>取消</span>
                    <span className='ok' onClick={() => saveHandle()}>{`确认(${selectedKeys.length > 0 && selectedKeys.length})`}</span>
                </div>
            </div>

        )
    });

    const close = () => {
        onVisibleChange && onVisibleChange(false);
    }


    return (
        <ModalForm className="TableSelecter" title={title} width={600} submitter={{
            render: false
        }} open={open} modalProps={{
            closable: false,
        }}>
            <Table
                // ref={tableSelecterRef}
                record={undefined}
            ></Table>
        </ModalForm>
    )

}




export default TableSelecter