BudgetManaSystem/src/pages/Home/index.tsx

/*
 * @Author: code4eat awesomedema@gmail.com
 * @Date: 2022-12-14 14:14:32
 * @LastEditors: code4eat awesomedema@gmail.com
 * @LastEditTime: 2023-03-02 10:51:20
 * @FilePath: /BudgetManaSystem/src/pages/Home/index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE

 */
import BMSPagecontainer from '@/components/BMSPageContainer';

import { useModel } from '@umijs/max';
import React, { useEffect, useState } from 'react';
import { history } from 'umi';
import { Image } from 'antd';

import img1 from '../../../static/wenzichatu1.png';
import img2 from '../../../static/wenzichatu2.png';
import img3 from '../../../static/wenzichatu3.png';
import img4 from '../../../static/wenzichatu4.png';
import img5 from '../../../static/wenzichatu5.png';
import img6 from '../../../static/wenzichatu6.png';
import img7 from '../../../static/wenzichatu7.png';

import './style.less';
import { getComputeDate, getIndexData } from './service';
import { createFromIconfontCN } from '@ant-design/icons';


const IconFont = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/c/font_3878861_an6cq2h7omc.js',
});


const HomePage: React.FC = () => {

  const [tabList, set_tabList] = useState([
    {
      name: '月度结转',
      status: 0
    },
    {
      name: '设置信息',
      status: 0
    },
    {
      name: '绩效数据',
      status: 0
    },
    {
      name: '薪酬预算',
      status: 0
    },
    {
      name: '一次分配',
      status: 0
    },
    {
      name: '二次分配',
      status: 0
    },
    {
      name: '报表查询',
      status: 0
    }
  ]);

  const [currentActivedTabIndex, set_currentActivedTabIndex] = useState(0);
  const [currentComputeDate, set_currentComputeDate] = useState('');

  const imgList = [
    img1, img2, img3, img4, img5, img6, img7
  ]



  const tabClickHandle = (index: number) => {
    set_currentActivedTabIndex(index);

  }

  const getIndexPageData = async (date: string) => {
    const respArr = await getIndexData(date);

    const current = respArr.filter(item => item.status == 1);
    const completed = respArr.filter(item => item.status == 2);
    const completedNames = completed.map(item => item.name);

    if (current.length > 0) {
      const _tabList = tabList.map(a => {
        if (a.name == current[0].name) {

          return {
            ...a,
            status: 1
          }
        } else if (completedNames.includes(a.name)) {
          return {
            ...a,
            status: 2
          }
        } else {
          return a
        }
      });
      set_tabList([..._tabList as any]);
    }
  }


  const getCurrentComputeDate = async () => {
    const resp = await getComputeDate();

    set_currentComputeDate(resp);
  }

  const goPageHandle = (num: number) => {
    if (num == 1) {
      history.push('/budgetMana/monthlySet');
    }
    if (num == 2) {
      history.push('/budgetMana/monthlyInfoCheck');
    }
    if (num == 3) {
      history.push('/budgetMana/monthlyDataCheck');
    }
    if (num == 4) {
      history.push('/budgetMana/personnelSalaryBudget');
    }
    if (num == 5) {
      history.push('/budgetMana/oneBatch');
    }
  }

  useEffect(() => {
    if (currentComputeDate) {
      getIndexPageData(currentComputeDate);
    }
  }, [currentComputeDate])


  useEffect(() => {
    getCurrentComputeDate();
  }, []);

  return (
    <BMSPagecontainer className='HomePage' title={`核算年月：${currentComputeDate}`} ghost>
      <div className='tabWrap'>
        {
          tabList.map((item, index) => {
            return (
              <React.Fragment key={index}>
                <div className={currentActivedTabIndex == index ? 'tab on' : 'tab'} key={index} onMouseEnter={() => tabClickHandle(index)}>
                  <div className={item.status == 2 || item.status == 1 ? 'index active' : 'index'}>
                    {index + 1}
                    {item.status == 1 && <span className='point'></span>}
                  </div>
                  <span className='name'>{item.name}</span>
                </div>
                {(index != 6) && <div className='point'>...</div>}
              </React.Fragment>
            )
          })
        }
      </div>
      <div className='tabRelaContent'>
        {
          currentActivedTabIndex == 0 && (
            <div className={'step active'} onClick={() => { goPageHandle(1) }}>
              <div className="title" >
                月度结转
                <IconFont type='icon-jinru' />
                {/* <span onClick={()=>{goPageHandle(1)}}>进入功能</span> */}
              </div>
              <div className='detail'>明确当前核算年月并可结转进入下一个周期的核算或者回退到上一个周期进程开账重算</div>
            </div>
          )
        }

        {
          currentActivedTabIndex == 1 && (
            <div className={'step active'} onClick={() => { goPageHandle(2) }}>
              <div className={tabList[1].status == 0 ? 'title' : 'title active'} >
                设置信息
                <IconFont type='icon-jinru' />
                {/* <span onClick={()=>{goPageHandle(2)}}>进入功能</span> */}
              </div>
              <div className='detail'>根据设置生成各核算单元当月的人员、科室、收费项目信息，可快捷进入设置界面调整并重新生成，操作人员需确认各单元的设置信息都正确方可进入下一步核算操作</div>
            </div>
          )
        }

        {
          currentActivedTabIndex == 2 && (
            <div className={'step active'} onClick={() => { goPageHandle(3) }}>
              <div className={tabList[2].status == 0 ? 'title' : 'title active'} >
                绩效数据
                <IconFont type='icon-jinru' />
                {/* <span onClick={()=>{goPageHandle(3)}}>进入功能</span> */}
              </div>
              <div className='detail'>自动获取及手动填报当月绩效核算所需的数据，操作人员需确认核算所需的数据都已添加完成方可进入下一步核算操作</div>
            </div>
          )
        }

        {
          currentActivedTabIndex == 3 && (
            <div className={'step active'} onClick={() => { goPageHandle(4) }}>
              <div className={tabList[3].status == 0 ? 'title' : 'title active'}  >
                薪酬预算
                <IconFont type='icon-jinru' />
                {/* <span onClick={()=>{goPageHandle(4)}}>进入功能</span> */}
              </div>
              <div className='detail'>进行人事薪酬预算得到全院人事成本、各职系人事成本占比及各职系参与考核奖金信息，需保存预算数据方可进入下一步</div>
            </div>
          )
        }

        {
          currentActivedTabIndex == 4 && (
            <div className={'step active'} onClick={() => { goPageHandle(5) }}>
              <div className={tabList[4].status == 0 ? 'title' : 'title active'} >
                一次分配
                <IconFont type='icon-jinru' />
                {/* <span onClick={()=>{goPageHandle(5)}}>进入功能</span> */}
              </div>
              <div className='detail'>通过计算得到各职系所有核算单元的工作量绩效、运营绩效、管理绩效信息，需审核确认方可进入下一步各核算单元的二次分配操作</div>
            </div>
          )
        }

        {
          currentActivedTabIndex == 5 && (
            <div className={'multiStep active'}>
              <div className='block'>
                <div className='title'>
                  二次分配数据核定
                  <IconFont type='icon-jinru' />
                </div>
                <div className='detail'>各核算单元的绩效专员添加及提交各自负责核算单元二次分配所需的数据</div>
              </div>
              <div className='block'>
                <div className='title'>
                  二次分配计算
                  <IconFont type='icon-jinru' />
                </div>
                <div className='detail'>计算得到各负责单元的二次分配奖金数据，确认所有人员分配无误后提交至绩效组人员审核</div>
              </div>
              <div className='block'>
                <div className='title'>
                  二次分配审核
                  <IconFont type='icon-jinru' />
                </div>
                <div className='detail'>绩效组成员查看各核算单元的二次分配情况，并进行审核确认</div>
              </div>
            </div>
          )
        }

        {
          currentActivedTabIndex == 6 && (
            <div className={'multiStep active'}>
              <div className='block'>
                <div className='title'>
                  一次分配报表
                  <IconFont type='icon-jinru' />
                </div>
                <div className='detail'>可查询历史一次分配报表记录及各职系一次分配的详细报表信息</div>
              </div>
              <div className='block'>
                <div className='title'>
                  二次分配报表
                  <IconFont type='icon-jinru' />
                </div>
                <div className='detail'>可查询历史二次分配报表记录及各核算单元二次分配的详细报表信息</div>
              </div>
              <div className='block'>
                <div className='title'>
                  个人奖金报表
                  <IconFont type='icon-jinru' />
                </div>
                <div className='detail'>可查询员工个人的完整奖金明细数据，包括历次核算的奖金记录信息</div>
              </div>
            </div>
          )
        }
      </div>
      <div className='map'>
        <Image
          // width={'50vw'}
          // height={'25vw'}
          width={'850px'}
          height={'425px'}
          preview={false}
          src={imgList[currentActivedTabIndex]}
        />
      </div>
    </BMSPagecontainer>
  );
};

export default HomePage;