MedicalWisdomCheckSys/src/components/MccsRecordList/index.tsx

/*
 * @Author: your name
 * @Date: 2021-09-15 09:17:28
 * @LastEditTime: 2021-10-22 10:53:06
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /MedicalWisdomCheckSys/src/components/MccsRecordList/index.tsx
 */



import React, { useState, useEffect } from 'react'
import { Divider, Timeline, Empty } from 'antd';

import './index.less';



const MccsRecordList: React.FC<MccsRecordList.propsType> = (props) => {

    const { title, list = [], actionFunc, actionNode } = props;
    const [currentOpen, setCurrentOpen] = useState<[number, number] | []>([]);
    const [data, setData] = useState<MccsRecordList.MccsRecordListType>([]);

    const historyHandle = (supIndex: number, subIndex: number) => {
        if (currentOpen[0] == supIndex && currentOpen[1] == subIndex) {
            setCurrentOpen([-1, -1]);
        } else {
            setCurrentOpen([supIndex, subIndex]);
        }
    }

    const actionHandle = (supIndex: number, subIndex: number, lowerIndex: number) => {
        let _data = data;
        actionFunc && actionFunc(_data[supIndex].details[subIndex].historyRecords[lowerIndex]);  //返回true表示服务器删除成功！

    }


    useEffect(() => {
        if (list) {
            setData(list);
        }

        // setData([
        //     {
        //         evaluation: 'C',
        //         details: [
        //             {
        //                 name: '张三',
        //                 fileName: '文件名',
        //                 fileUrl: '',
        //                 createTime: '2021-05-02 18:27',
        //                 recordTypeName: '自查',
        //                 historyRecords: [
        //                     {
        //                         versionName: '当前版本',
        //                         name: '麻子',
        //                         time: '2021-05-02 18:27',
        //                     }
        //                 ]
        //             },
        //             {
        //                 name: '张三',
        //                 fileName: '文件名',
        //                 fileUrl: '',
        //                 createTime: '2021-05-02 18:27',
        //                 recordTypeName: '自查',
        //                 historyRecords: []
        //             }
        //         ]
        //     },
        //     {
        //         evaluation: 'C',
        //         details: [
        //             {
        //                 name: '张三',
        //                 fileName: '文件名',
        //                 fileUrl: '',
        //                 createTime: '2021-05-02 18:27',
        //                 recordTypeName: '自查',
        //                 historyRecords: []
        //             },
        //             {
        //                 name: '张三',
        //                 fileName: '文件名',
        //                 fileUrl: '',
        //                 createTime: '2021-05-02 18:27',
        //                 recordTypeName: '自查',
        //                 historyRecords: []
        //             }
        //         ]
        //     }
        // ])
    }, [props]);

    return (
        <div className='mccsRecordList'>
            <div className="mccsRecordListTitle">{title ? title : '标题'}</div>
            {
                data.length == 0 && (
                    //空数据
                    <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}></Empty>
                )
            }
            {
                data.length > 0 && (
                    <div className='container'>
                        {
                            data.map((item, index) => {
                                return (
                                    <div className='list' key={index}>
                                        <div className='listInner'>
                                            <div className={`header ${item.evaluation}`}>{item.evaluation}</div>
                                            <div className='innerWrap'>
                                                {
                                                    item.details.map((detailsList, detailListIndex) => {
                                                        return (
                                                            <div className='item' key={detailListIndex}>
                                                                <div className='itemInner'>
                                                                    <div className='itemHeader'>
                                                                        {
                                                                            detailsList.recordTypeName&&<span className='type'>{detailsList.recordTypeName}</span>
                                                                        }
                                                                        <div className='recordContent'>
                                                                            <span className='bolder'>{detailsList.name}</span>
                                                                            {detailsList.recordTypeName?'上传了台帐':'自评结果为'}
                                                                            <span className='bolder'>{detailsList.fileName}</span>
                                                                        </div>
                                                                    </div>
                                                                    <div className='time'>
                                                                        {
                                                                            detailsList.historyRecords.length > 0 && (
                                                                                <>
                                                                                    <div className={(currentOpen[0] == index && currentOpen[1] == detailListIndex) ? 'history on' : 'history'} onClick={() => historyHandle(index, detailListIndex)}>历史记录</div>
                                                                                    <Divider type="vertical" />
                                                                                </>
                                                                            )
                                                                        }
                                                                        <span className='date'>{detailsList.createTime}</span>
                                                                    </div>
                                                                    {
                                                                        actionNode && (
                                                                            <div className='action'>
                                                                                {
                                                                                    actionNode(detailsList)
                                                                                }

                                                                            </div>
                                                                        )
                                                                    }

                                                                </div>
                                                                {
                                                                    (currentOpen[0] == index && currentOpen[1] == detailListIndex && detailsList.historyRecords.length > 0) && (
                                                                        <div className='subListWrap'>

                                                                            <Timeline pending={false}>
                                                                                {
                                                                                    item.details[detailListIndex].historyRecords.map((val, i) => {

                                                                                        return (
                                                                                            <React.Fragment key={i}>
                                                                                                {
                                                                                                    i == 0 && ( //当前版本
                                                                                                        <Timeline.Item dot={<span className='timeLineDot'></span>} >
                                                                                                            <div className='timeLineNode on'>
                                                                                                                <div className='version'>{val.versionName}</div>
                                                                                                                <div className='actionPeople'>{`上传人：${val.name}`}</div>
                                                                                                                <div className='time'>{val.time}</div>
                                                                                                                <span className='action' onClick={() => actionHandle(index, detailListIndex, i)}></span>
                                                                                                            </div>
                                                                                                        </Timeline.Item >
                                                                                                    )
                                                                                                }
                                                                                                {
                                                                                                    i > 0 && (
                                                                                                        <Timeline.Item color='gray' >
                                                                                                            <div className='timeLineNode'>
                                                                                                                <div className='version'>{val.versionName}</div>
                                                                                                                <div className='actionPeople'>{`上传人：${val.name}`}</div>
                                                                                                                <div className='time'>{val.time}</div>
                                                                                                                <span className='action' onClick={() => actionHandle(index, detailListIndex, i)}></span>
                                                                                                            </div>
                                                                                                        </Timeline.Item >
                                                                                                    )
                                                                                                }
                                                                                            </React.Fragment>
                                                                                        )
                                                                                    })
                                                                                }

                                                                            </Timeline>
                                                                        </div>
                                                                    )
                                                                }

                                                            </div>
                                                        )
                                                    })
                                                }
                                            </div>
                                        </div>
                                    </div>
                                )
                            })
                        }

                    </div>
                )
            }

        </div>
    )
}

export default MccsRecordList