ad-manage/src/pages/launchSystemNew/components/TableData/index.tsx

import CustomListModel from '@/components/CustomList'
import Tables from '@/components/Tables'
import { quanpin } from '@/utils/fullScreen'
import { FullscreenExitOutlined, FullscreenOutlined, RedoOutlined, SettingOutlined, SyncOutlined } from '@ant-design/icons'
import { Button, Card, Col, Row, Space, Tooltip, } from 'antd'
import { ColumnsType } from 'antd/lib/table'
import React, { useEffect, useRef, useState, useCallback } from 'react'
import { useModel } from 'umi'
import style from './index.less'
interface Prosp {
    // sortArr?: { label: string, value: string ,key:any}[],//排序参数名列表
    isZj?: boolean,//是否查总计
    tableTotal?: { [key: string]: string },//是个开启总计
    scroll?: { x?: number, y?: number },//开启行滑动并设置容器最大宽度
    columns: () => ColumnsType<any>,//table列表配置
    title?: string,//tabel的标题
    tooltip?: JSX.Element,//是否在标题后加问号展示说明
    dataSource: any[],//table的数据
    columnWidth?: string | number
    expandedRowRender?: (data: any) => JSX.Element,
    className?: string,//自定义class
    isdownload?: boolean,
    leftChild?: JSX.Element,
    config?: any,
    configName?: any,
    page?: number,
    pageSize?: number,
    size?: 'small' | 'middle' | 'large',
    total?: number,
    loading?: boolean,
    onChange?: (props: {
        pagination?: { current?: number, pageSize?: number, gzh?: string },
        filters?: any,
        sortData?: {
            column: { dataIndex: string },
            order?: "ascend" | "descend"
        }
    }) => void,
    ajax?: any,//接口刷新
    syncAjax?: any,//同步
    hoverable?: boolean,
    rowSelection?: any,
    myKey?: any,//自定义使用哪个值做key
    fixed?: {
        left: number,
        right: number
    },
    bodyStyle?: any
    gutter?: any
    isCard?: boolean
    totalData?: any[]
    refreshData?: () => void,
    rowClassName?: string | ((record: any, index: any) => string),//样式
}

function TableData(props: Prosp) {
    const { isZj, scroll, columns, title, columnWidth, rowClassName, dataSource, totalData = [], refreshData, expandedRowRender, className, isCard = true, leftChild, page = undefined, rowSelection = false, pageSize = undefined, size = 'small', fixed = { left: 0, right: 1 }, total = 0, onChange, config, configName, ajax, syncAjax, hoverable = true, myKey, gutter = [0, 20] } = props
    const { state: userState } = useModel('useOperating.useUser')
    const { isFell } = userState
    const [visible, setVisible] = useState<boolean>(false)
    const [oldSelectData, setoldSelectData] = useState<any[]>([])
    const [oldFixed, setoldFixed] = useState<any>({ left: '0', right: '0' })
    const [newColumns, setNewColumns] = useState<any[]>([])
    // const [oldConfigName, setOldConfigName] = useState<any>('')//上次的配置名称
    const [selectData, setSelectData] = useState<{ selectData: any[], fixed: { left: number, right: number } }>({ selectData: [], fixed: { left: fixed.left, right: fixed.right } })
    const [tiptopShow, setTipTopShow] = useState({//tiptop开关
        ajaxShow: false,
        syncAjaxShow: false,
        configShow: false,
    })
    const ref = useRef(null)
    const oldName = useRef(null)
    const version = '1.0.0'
    // // /**重组选中的字段 */
    useEffect(() => {
        let oldConfigName = oldName.current || ''
        if (configName) {
            // if (dataSource?.length > 0) {
            const defSelectData = localStorage.getItem(`myAdMonitorConfig${version}_` + configName)
            const defFixed = localStorage.getItem(`myAdMonitorConfigFixed${version}_` + configName)
            const newConfig = config?.map((item: { data: any }) => item.data)?.flat()
            if (defSelectData && (selectData?.selectData?.length === 0 || configName !== oldConfigName)) {//首次查找个人配置是否存在，并且selectData为空，存在用个人配置设置selectData
                console.log('首次使用个人配置赋值')
                let newDefSelectData = JSON.parse(defSelectData)
                newDefSelectData = newDefSelectData.filter((item: any) => !!item && newConfig.some((c: { dataIndex: any }) => c.dataIndex === item.dataIndex))//去除空项
                setSelectData(() => ({ selectData: newDefSelectData, fixed: defFixed ? JSON.parse(defFixed) : { left: 0, right: 0 } }))
            }
            if (!defSelectData && (selectData?.selectData?.length === 0 || configName !== oldConfigName)) {//首次查找个人配置是否存在，并且selectData为空，不存在默认配置设置selectData
                let newSelectData: any[] = []
                config?.forEach((item: { data: { default: any }[] }) => {
                    item?.data?.forEach((d: { default: any }) => {
                        if (d.default) {
                            newSelectData[d.default - 1] = d
                        }
                    })
                })
                console.log('首次使用默认配置赋值')
                setSelectData(() => ({ ...selectData, selectData: newSelectData }))
            }
            if ((JSON.stringify(oldSelectData) !== JSON.stringify(selectData?.selectData)) || (JSON.stringify(selectData.fixed) !== JSON.stringify(oldFixed))) {
                console.log('设置配置改变重新赋值')
                setoldSelectData(() => selectData.selectData)
                setoldFixed(() => selectData.fixed)
                let newArr: any = []
                selectData?.selectData?.forEach((data: { dataIndex: any, width: number }, index: number) => {
                    columns()?.forEach((item: any) => {
                        if (data.dataIndex === item.dataIndex) {
                            if (index < Number(selectData?.fixed?.left)) {//设置左悬浮
                                item['fixed'] = 'left'
                            } else if (index > (selectData?.selectData?.length - Number(selectData?.fixed?.right) - 1)) {//设置右悬浮
                                item['fixed'] = 'right'
                            } else {
                                item['fixed'] = false
                            }
                            if (data?.width) {
                                item['width'] = data.width
                            }
                            newArr.push(item)
                        }
                    })
                })
                setNewColumns(() => newArr)
            }
        }
        if (configName !== oldConfigName) {
            oldName.current = configName
        }
    }, [selectData, oldSelectData, dataSource, oldFixed, configName, config, columns]) // selectData, oldSelectData, dataSource, oldFixed, configName, oldConfigName, config, columns
    //拖动宽度设置设置保存
    const handelResize = useCallback((columns: any) => {
        if (configName) {
            let newSelectData = selectData?.selectData?.map((item, index) => {
                item['width'] = columns[index]['width']
                return item
            })
            localStorage.setItem(`myAdMonitorConfig${version}_` + configName, JSON.stringify(newSelectData))
        }
    }, [configName, selectData])
    // 初始展示TIPTOP提示功能
    useEffect(() => {
        let time: any = null
        function timeOut(arg: any) {
            return new Promise((res, rel) => {
                time = setTimeout(() => {
                    setTipTopShow({ ...tiptopShow, ...arg })
                    res(true)
                }, 3000)
            })
        }
        async function isShow() {
            if (ajax) {
                setTipTopShow({ ...tiptopShow, ajaxShow: true })
                await timeOut({ ajaxShow: false })
            }
            if (syncAjax) {
                setTipTopShow({ ...tiptopShow, syncAjaxShow: true })
                await timeOut({ syncAjaxShow: false })
            }
            if (config) {
                setTipTopShow({ ...tiptopShow, configShow: true })
                await timeOut({ configShow: false })
            }
        }
        isShow()
        return () => {
            clearTimeout(time)
            time = null
        }
    }, [])
    const header = <Col span={24}>
        <Row gutter={[0, 10]}>
            <Col span={24} style={{
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'end'
            }}>
                <Space>
                    {leftChild}
                </Space>
                {/*紧凑*/}
                <div style={{ float: 'right', display: 'flex', flexFlow: 'row' }}>
                    {
                        ajax && <Button
                            size='small'
                            type='text'
                            style={{ display: 'flex', alignItems: 'center' }}
                            onClick={() => {
                                ajax.refresh()
                            }}>
                            <span style={{ fontSize: 10, color: '#999' }}>刷新时间:{ajax?.data?.reqTime}</span>
                            <Tooltip
                                title='刷新'
                                visible={tiptopShow.ajaxShow}
                                onVisibleChange={(visible) => {
                                    setTipTopShow({ ...tiptopShow, ajaxShow: visible })
                                }}
                            ><RedoOutlined style={{ color: '#2196f3', fontSize: 17 }} /></Tooltip>
                        </Button>
                    }
                    {
                        syncAjax && <Button
                            size='small'
                            type='text'
                            style={{ display: 'flex', alignItems: 'center' }}
                            onClick={syncAjax}
                        >

                            <Tooltip
                                title='同步最新'
                                visible={tiptopShow.syncAjaxShow}
                                onVisibleChange={(visible) => {
                                    setTipTopShow({ ...tiptopShow, syncAjaxShow: visible })
                                }}
                            ><SyncOutlined style={{ color: 'red', fontSize: 17 }} /></Tooltip>
                        </Button>
                    }
                    {config && <Button
                        size='small'
                        type='text'
                        style={{ display: 'flex', alignItems: 'center' }}
                        onClick={() => {
                            setVisible(true)
                        }}>
                        <Tooltip title='设置'><SettingOutlined /></Tooltip>
                    </Button>}
                    <Button
                        type='text'
                        size='small'
                        style={{ display: 'flex', alignItems: 'center' }}
                        onClick={() => {
                            if (ref?.current) {
                                quanpin(ref?.current)
                            }
                        }}>
                        {
                            <Tooltip title={!isFell ? '全屏' : '退出全屏'}>{!isFell ? <FullscreenOutlined /> : <FullscreenExitOutlined />}</Tooltip>
                        }
                    </Button>
                    {visible && <CustomListModel
                        sysFixed={fixed}
                        version={version}
                        config={config}
                        configName={configName}
                        visible={visible}
                        onClose={() => { setVisible(false) }}
                        onChange={(arr: any) => {
                            // window.location.reload()
                            refreshData?.()
                            if (arr) {
                                setSelectData({ selectData: [], fixed: { left: fixed.left, right: fixed.right } })
                            } else {
                                setSelectData({ selectData: [], fixed: { left: fixed.left, right: fixed.right } })
                            }
                        }}
                        columns={newColumns} />}
                </div>
            </Col>
        </Row>
    </Col>
    const content = <Row gutter={[0, 20]} ref={ref} style={isFell ? { background: '#fff' } : {}}>
        {/**table */}
        <Col span={24}>
            {isCard ? <Card
                hoverable={hoverable}
                title={title}
                bodyStyle={props?.bodyStyle}
                headStyle={{ textAlign: 'left' }}
            >
                <Row gutter={gutter}>
                    {header}
                    <Tab {...{ size, newColumns, rowClassName, handelResize, columnWidth, className, isZj, totalData, rowSelection, columns, scroll, isFell, page, pageSize, dataSource, onChange, expandedRowRender, total, ajax, myKey }} />
                </Row>
            </Card> : <Row gutter={gutter}>
                {header}
                <Tab {...{ size, newColumns, rowClassName, handelResize, className, isZj, columnWidth, totalData, rowSelection, columns, scroll, isFell, page, pageSize, dataSource, onChange, expandedRowRender, total, ajax, myKey }} />
            </Row>}
        </Col>
    </Row >
    return <>
        {content}
    </>
}

/**表格 */
const Tab = React.memo((props: any) => {
    const { size, newColumns, rowClassName, className, handelResize, isZj, columns, scroll, columnWidth, totalData, rowSelection, isFell, page, pageSize, dataSource, onChange, expandedRowRender, total, ajax, myKey } = props
    let ran = Math.ceil(Math.random() * 100)

    useEffect(() => {
        const contentBodyScroll = (e: any) => {
            let el = document.querySelector(`.header_table_body_${ran} .ant-table-body`);
            if (el) {
                el.scrollLeft = e.target.scrollLeft
            }
        }
        const headerBodyScroll = (e: any) => {
            let el = document.querySelector(`.content_table_body_${ran} .ant-table-body`);
            if (el) {
                el.scrollLeft = e.target.scrollLeft
            }
        }
        if (isZj) {
            document.querySelector(`.content_table_body_${ran} .ant-table-body`)?.addEventListener('scroll', contentBodyScroll);
            document.querySelector(`.header_table_body_${ran} .ant-table-body`)?.addEventListener('scroll', headerBodyScroll);
        }
        () => {
            if (isZj) {
                document.querySelector(`.content_table_body_${ran} .ant-table-body`)?.removeEventListener('scroll', contentBodyScroll);
                document.querySelector(`.header_table_body_${ran} .ant-table-body`)?.removeEventListener('scroll', headerBodyScroll);
            }
        }
    }, [isZj, ran])

    return < Col span={24} >
        <div className={`${style[size]} ${className ? style[className] : ''} `}>
            {
                isZj && <Tables
                    bordered
                    columns={newColumns}
                    dataSource={totalData?.length > 0 ? [...totalData] : [{ id: 1 }]}
                    scroll={scroll ? isFell ? { ...scroll, y: document.body.clientHeight - 300 } : scroll : {}}
                    size={size}
                    pagination={false}
                    hideOnSinglePage
                    current={page}
                    pageSize={pageSize}
                    loading={ajax?.loading}
                    rowSelection={rowSelection}
                    className={`all_table header_table_body header_table_body_${ran} ${className ? className : ''}`}
                    sortDirections={['ascend', 'descend', null]}
                    handelResize={((columns: any) => handelResize(columns, 'antd'))}
                    onChange={(pagination: any, filters: any, sorter: any) => onChange && onChange({ pagination, filters, sortData: sorter })}
                />
            }
            <Tables
                showHeader={!isZj}
                className={`all_table content_table_body_${ran} ${className ? className : ''}`}
                bordered
                sortDirections={['descend', 'ascend', null]}
                current={page}
                pageSize={pageSize}
                columns={newColumns?.length > 0 ? newColumns : columns()}
                dataSource={dataSource}
                scroll={scroll ? isFell ? { ...scroll, y: document.body.clientHeight - 300 } : scroll : {}}
                onChange={(pagination: any, filters: any, sorter: any) => onChange && onChange({ pagination, filters, sortData: sorter })}
                rowClassName={rowClassName}
                columnWidth={columnWidth}
                expandedRowRender={expandedRowRender ? expandedRowRender : undefined}
                size={size}
                total={total}
                loading={ajax.loading}
                defaultPageSize={20}
                rowSelection={rowSelection}
                handelResize={((columns: any) => handelResize(columns))}
                myKey={myKey}
            />
        </div>
    </Col >
})
export default React.memo(TableData)