KC-MiddlePlatform/src/pages/index/components/RecentlyVisited/index.tsx

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




//最近访问模块

import { useEffect, useState } from 'react';
import './style.less';
import {history, useModel} from 'umi';
import { Empty } from 'antd';
import { NavSelecterItemType } from '@/components/NavSelecter';



export type RecentlyVisitedItemsType = {
        name:string;
        path:string;
        menuId:string;
        type:number;
        systemId:string;
}
export interface RecentlyVisitedPropsType {
       data:RecentlyVisitedItemsType[]
}

export const RecentlyVisited = (props:RecentlyVisitedPropsType) => {

    const {data} = props;

    const { initialState, setInitialState } = useModel('@@initialState');

    const [tabs, set_tabs] = useState<RecentlyVisitedItemsType[]>([]);

    const clickHandle = async (val:NavSelecterItemType)=>{
        //更新currentSelectedSys/currentTab触发导航跳转
        console.log({val});
        await setInitialState((s) => ({ ...s, currentSelectedSys:val as any,currentTab:val})); 
    }

    useEffect(()=>{
        set_tabs(data);
    },[data])
    

    return (
        <div className='RecentlyVisited'>
            <div className='topTitle'>
                <span className='name'>最近访问</span>
            </div>
            <div className='wrap'>
                {
                    tabs.map((item, index) => {
                        return (
                            <div className='tab' onClick={()=>clickHandle(item)} key={index}>{item.name}</div>
                        )
                    })
                }
                {
                    tabs.length == 0 && (
                        <div className='empty'>
                            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
                        </div>
                    )
                }
            </div>
        </div>
    )
}