BudgetManaSystem/src/pages/budgetMana/oneBatch/index.tsx

/*
 * @Author: code4eat awesomedema@gmail.com
 * @Date: 2023-01-04 14:12:31
 * @LastEditors: code4eat awesomedema@gmail.com
 * @LastEditTime: 2023-07-24 13:30:07
 * @FilePath: /BudgetManaSystem/src/pages/budgetMana/oneBatch/index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */


import BMSPagecontainer from '@/components/BMSPageContainer'
import { BMSTable } from '@/components/BMSTable';
import { getComputeDate } from '@/pages/Home/service';
import { ActionType, ProColumns } from '@ant-design/pro-components';
import { message, Modal, Popover, Table, Tabs, Button } from 'antd';
import { useEffect, useRef, useState } from 'react';
import { caculate, checkRequest, getCheckType, getCurrentCheckStatus, getCurrentZhileiCheckStatus, getData, getZhileiList } from './service';


import './style.less';


import { create, all, number } from 'mathjs'
import exportTableToExcel from '@/utils/tableToExcel';
import { convertToColumns } from '@/utils/tooljs';

import * as XLSX from 'xlsx';
import exportTableToMultiExcel from '@/utils/tableToMultiHeaderExcel';
import { getJiezhuanStatus } from '../monthlySet/service';


const config = {
  number: 'number',
  precision: 14
}
const math = create(all, config as any);


type JsonStructure = {
  code: string;
  name: string;
  expand?: number;
  childTitle?: JsonStructure[];
};

type Column = {
  title: string | JSX.Element;
  dataIndex: string;
  key: string;
  ellipsis: boolean;
  width: number;
  children?: Column[];
};

const mockData = [
  {
    "code": "1",
    "name": "单元绩效点值1",
    "sort": 1,
    "redirect": false,
    "expand": 1,
    "childTitle": [
      {
        "code": "2-1",
        "name": "单元绩效点值2",
        "sort": 1,
        "redirect": false,
        "expand": 0,
        "childTitle": [
          {
            "code": "3",
            "name": "单元绩效点值3",
            "sort": 1,
            "redirect": false,
            "expand": 1,
            "childTitle": []
          }
        ]
      },
      {
        "code": "2-2",
        "name": "单元绩效点值2",
        "sort": 1,
        "redirect": false,
        "expand": 1,
        "childTitle": [
          {
            "code": "3-1",
            "name": "单元绩效点值3-1",
            "sort": 1,
            "redirect": false,
            "expand": 1,
            "childTitle": []
          },
          {
            "code": "3-2",
            "name": "单元绩效点值3-2",
            "sort": 1,
            "redirect": false,
            "expand": 1,
            "childTitle": []
          }
        ]
      }
    ]
  },
  {
    "code": "4",
    "name": "单元管理绩效",
    "sort": 2,
    "redirect": false
  },
]

const mockColumns = [
  {
    dataIndex: "unitName",
    ellipsis: true,
    fixed: "left",
    key: "unitName",
    title: "核算单元",
    width: 140
  },
  {
    dataIndex: "key-23",
    ellipsis: true,
    key: "key-23",
    title: "单元管理绩效",
    width: 200
  },
  {
    dataIndex: "key-1646350087779131392",
    ellipsis: true,
    key: "key-1646350087779131392",
    title: "核算年月",
    width: 200
  },
  {
    dataIndex: "key-1679019958216040448",
    ellipsis: true,
    key: "key-1679019958216040448",
    title: "临床诊察积分奖金",
    width: 200,
    children: [
      {
        dataIndex: "key-6",
        ellipsis: true,
        key: "key-6",
        title: "临床诊察积分-节假日奖金",
        width: 200,
        children: [
          {
            dataIndex: "key-4",
            ellipsis: true,
            key: "key-4",
            title: "临床诊察积分-节假日",
            width: 200
          },
          {
            dataIndex: "key-5",
            ellipsis: true,
            key: "key-5",
            title: "临床诊察积分-节假日点值",
            width: 200
          }
        ]
      },
      {
        dataIndex: "key-3",
        ellipsis: true,
        key: "key-3",
        title: "临床诊察积分-工作日奖金",
        width: 200,
        children: [
          {
            dataIndex: "key-1",
            ellipsis: true,
            key: "key-1",
            title: "临床诊察积分-工作日",
            width: 200
          },
          {
            dataIndex: "key-2",
            ellipsis: true,
            key: "key-2",
            title: "临床诊察积分-工作日点值",
            width: 200
          }
        ]
      }
    ]
  },
  {
    dataIndex: "totalScore",
    ellipsis: true,
    fixed: "right",
    key: "totalScore",
    title: "总奖金",
    width: 140
  }
]

let checkStatusArr: number[] = []

const OneBatch = () => {


  const [tableColumn, set_tableColumn] = useState<ProColumns[] | any[]>([]);

  const [columnsForExcel, set_columnsForExcel] = useState<ProColumns[] | any[]>([]);

  const [tableData, set_tableData] = useState<any[]>([]);

  const [currentComputeDate, set_currentComputeDate] = useState<string | undefined>();

  const [currentTabKey, set_currentTabKey] = useState('1');

  const [tabs, set_Tabs] = useState<{
    name: any; value: string
  }[]>([]);

  const [tableDataFilterParams, set_tableDataFilterParams] = useState<any | undefined>({ reportCode: undefined });

  const [auditType, set_auditType] = useState('0');

  const [ifShowTip, set_ifShowTip] = useState(false);

  const tableRef = useRef<ActionType>();

  const [tableH, set_tableH] = useState(0);
  const [reportTitle, set_reportTitle] = useState('');
  const [checkType, set_checkType] = useState<string | undefined>(undefined); // 一次分配审核模式，1职类一起审核 2职类分开审核

  const [disAccount, set_disAccount] = useState(false);

  const [ifBanAllAction, set_ifBanAllAction] = useState(true);  //是否掩藏所有操作



  const onTabChange = (activeKey: string) => {
    set_currentTabKey(activeKey);
    set_tableDataFilterParams({
      ...tableDataFilterParams,
      reportCode: activeKey
    });
  }

  const [expandedkeys, set_expandedkeys] = useState<string[]>([]);

  const convertToColumnsFunc = (json: JsonStructure[], ifRender?: boolean, level: number = 1): Column[] => {
    return json.map((item) => {
      let column: Column = {
        title: item.name,
        dataIndex: `key-${item.code}`,
        key: `key-${item.code}`,
        ellipsis: true,
        width: 200,
      };

      const isExpanded = expandedkeys.includes(item.code);

      if (item.expand === 1 && item.childTitle && item.childTitle.length > 0) {

        column.title = ifRender ? (
          <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'center', alignContent: 'center' }}>
            <span style={{ display: 'inline-block', maxWidth: '80%', minWidth: 140, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{item.name}</span>
            <div className='expandIcon' onClick={() => {
              if (isExpanded) {
                let _expandedkeys = [...expandedkeys];
                _expandedkeys.splice(expandedkeys.findIndex(a => a == item.code), 1);
                set_expandedkeys([..._expandedkeys]);
              } else {
                set_expandedkeys([...expandedkeys, item.code]);
              }
            }}>
              {isExpanded ? '-' : '+'}
            </div>
          </div>
        ) : item.name;

        if (isExpanded) {
          column.children = convertToColumnsFunc(item.childTitle, ifRender, level + 1);
        }
      }

      return column;
    });
  }


  useEffect(() => {
    tableRef.current?.reload();
  }, [expandedkeys])


  const getTableData = async (params: any, sort: any, filter: any) => {

    const { reportCode = 1 } = params;

    const resp: any = await getData(
      currentComputeDate as string,
      reportCode
    );

    if (resp) {

      const { title, assignmentData, reportName } = resp;
      const columns = convertToColumnsFunc(title, true);
      const columnsForExcel = convertToColumnsFunc(title, false);


      set_tableColumn([
        {
          title: '核算单元代码',
          dataIndex: 'unitCode',
          key: 'unitCode',
          width: 140,
          fixed: 'left',
          ellipsis: true,
          sorter: (a, b) => {
            return b.unitCode.localeCompare(a.unitCode)
          },
        },
        {
          title: '核算单元',
          dataIndex: 'unitName',
          key: 'unitName',
          width: 140,
          fixed: 'left',
          ellipsis: true,
          sorter: (a, b) => {
            return b.unitName.localeCompare(a.unitName)
          },

        },
        ...columns, {
          title: '总奖金',
          dataIndex: 'totalScore',
          key: 'totalScore',
          width: 140,
          fixed: 'right',
          ellipsis: true

        }]);


      set_columnsForExcel([
        {
          title: '核算单元代码',
          dataIndex: 'unitCode',
          key: 'unitCode',
          width: 140,
          fixed: 'left',
          ellipsis: true,
          sorter: (a, b) => {
            return b.unitCode.localeCompare(a.unitCode)
          },

        },
        {
          title: '核算单元',
          dataIndex: 'unitName',
          key: 'unitName',
          width: 140,
          fixed: 'left',
          ellipsis: true,
          sorter: (a, b) => {
            return b.unitName.localeCompare(a.unitName)
          },
        },
        ...columnsForExcel, {
          title: '总奖金',
          dataIndex: 'totalScore',
          key: 'totalScore',
          width: 140,
          fixed: 'right',
          ellipsis: true

        }]);

      // set_tableColumn([...mockColumns]);
      // set_columnsForExcel([...mockColumns]);


      const data = assignmentData.map((item: any) => {

        let rowData: { [key: string]: any } = {};

        for (let index = 0; index < item.value.length; index++) {
          for (const key in item.value[index]) {

            if (key != 'code') {
              rowData[`key-${item.value[index].code}`] = item.value[index].value
            }
          }
        }

        return { ...item, ...rowData, id: item.id, columns }
      });

      set_tableData(data);
      set_reportTitle(reportName);

      return {
        data,
        success: true
      }

    }
    return []
  }


  const checkHandle = async (type: string) => {

    if (!checkType) return;

    const resp = await checkRequest({
      computeDate: currentComputeDate as string,
      auditType: type == '0' ? '1' : '0',   //审核类型  1审核 0取消审核
      reportCode: checkType == '2' ? currentTabKey : undefined
    }, checkType);

    if (resp) {
      if (type == '0') {
        message.success('审核提交成功！');
        set_auditType('1');
      }
      if (type == '1') {
        message.success('取消审核提交成功！');
        set_auditType('0');
      }
    }
    return resp;
  }

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

  const getTabList = async () => {
    const resp = await getZhileiList();
    if (resp) {
      set_Tabs(resp.list);
    }
  }


  const confirmCaculateHandle = async () => {
    const resp = await caculate(currentComputeDate as string);
    if (resp) {
      tableRef.current?.reload();
    }
  }


  const getCheckStatus = async (computeDate: string, code?: string) => {

    if (checkType == '1') {
      const resp = await getCurrentCheckStatus(computeDate);
      if (resp) {
        set_auditType('1');  //0 未审核 1 已审核
      } else {
        set_auditType('0');
      }
    }
    if (checkType == '2') {
      const resp = await getCurrentZhileiCheckStatus(computeDate, code ? code : currentTabKey);
      if (resp) {
        set_auditType('1');  //0 未审核 1 已审核
      } else {
        set_auditType('0');
      }
    }

  }

  const generateFunc = () => {

    Modal.confirm({
      title: '注意',
      okText: '确定',
      cancelText: '',
      closable: true,
      content: '计算会覆盖原有数据，确定要继续计算操作？',
      onOk: () => confirmCaculateHandle()
    })
  }

  const exportHandle = () => {

    exportTableToMultiExcel(tableData, columnsForExcel as any, reportTitle, true);

  }

  const handleResize = (e: any) => {
    const wH = e.target.innerHeight;
    const tableHeight = wH - 290;
    set_tableH(tableHeight);
  }

  const getCheckTypeHandle = async () => {
    const resp = await getCheckType();
    if (resp && resp.list.length > 0) {
      set_checkType(resp.list[0].value);
    }
  }

  function doResize() {
    setTimeout(() => {
      const ev: any = new Event('resize');
      window.dispatchEvent(ev);
    }, 0)
  }

  useEffect(() => {
    if (tabs.length > 0) {
      set_currentTabKey(tabs[0].value);
    }
  }, [tabs]);

  useEffect(() => {
    if (currentComputeDate && checkType == '2') {
      getCheckStatus(currentComputeDate as string);
    }
  }, [currentTabKey]);


  useEffect(() => {
    if (checkType == '2') {
      checkStatusArr = [];
      tabs.forEach(async (item) => {
        const resp = await getCurrentZhileiCheckStatus(currentComputeDate as string, item.value);

        checkStatusArr.push(resp);

        if (checkStatusArr.length == tabs.length) {
          const total = [...checkStatusArr].reduce((prev, cur) => prev + cur, 0);
          total > 0 ? set_disAccount(true) : set_disAccount(false)
        }

      })
    }
  }, [auditType]);


  const getJiezhuanStatusHandle = async () => {
    const resp = await getJiezhuanStatus(currentComputeDate as string);
    if (resp == 2) {
      set_ifBanAllAction(true);
    } else {
      set_ifBanAllAction(false);
    }
  }


  useEffect(() => {
    if (currentComputeDate && checkType) {
      getCheckStatus(currentComputeDate);
      getJiezhuanStatusHandle();
    }
  }, [currentComputeDate, checkType]);


  useEffect(() => {
    getCurrentComputeDate();
    window.addEventListener('resize', (e) => handleResize(e)) //监听窗口大小改变
    doResize();
    getTabList();
    getCheckTypeHandle();

    return () => {
      window.removeEventListener('resize', (e) => handleResize(e))
    }
  }, [])


  return (
    <BMSPagecontainer className='OneBatch' title={`核算年月：${currentComputeDate}`}>
      <div className='btnGroup'>
        {
          !ifBanAllAction && (
            <Popover open={ifShowTip} content={'当前处于审核中，无法操作！'} >
              <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
                <div className={(auditType == '0' && !disAccount) ? 'caculateBtn' : 'caculateBtn disabled'}
                  onMouseEnter={() => auditType == '0' ? set_ifShowTip(false) : set_ifShowTip(true)}
                  onMouseLeave={() => set_ifShowTip(false)}
                  onClick={() => (auditType == '0' && !disAccount) ? generateFunc() : () => { }}>计算</div>
                <div className={auditType == '0' ? 'caculateBtn' : 'caculateBtn disabled'}
                  onMouseEnter={() => auditType == '0' ? set_ifShowTip(false) : set_ifShowTip(true)}
                  onMouseLeave={() => set_ifShowTip(false)}
                  onClick={() => auditType == '0' ? exportHandle() : () => { }}>导出</div>
              </div>
            </Popover>
          )
        }

        {!ifBanAllAction && <div className='checkBtn' onClick={() => checkHandle(`${auditType}`)}>{auditType == '0' ? '审核' : '取消审核'}</div>}
      </div>
      <div className='content'>
        <Tabs
          defaultActiveKey='1'
          onChange={onTabChange}
          items={[
            ...tabs.map(a => ({ label: a.name, key: a.value }))
          ]}
        />
        <div className='tabContent'>
          {currentComputeDate && <BMSTable actionRef={tableRef} rowKey='unitCode' bordered pagination={false} columns={tableColumn as ProColumns[]}
            params={tableDataFilterParams}
            scroll={{ x: 140 * tableColumn.length, y: tableH }}
            request={(params, sort, filter) => getTableData(params, sort, filter)}

            summary={(pageData) => {
              const Caculate = ({ colData }: { colData: any }) => {

                const { dataIndex, children } = colData;

                if (children) {
                  return children.map((child: any, index: number) => (
                    <Caculate key={index} colData={child} />
                  ));
                }

                const total = pageData.reduce((prev, cur) => {
                  //return prev + cur[`${dataIndex}`]
                  if (typeof cur[`${dataIndex}`] == 'number') {
                    return math.add(prev, cur[`${dataIndex}`] as number);
                  }
                }, 0);

                return dataIndex == "unitName" ? <div style={{ textAlign: 'left' }}>合计</div> : (
                  //<span>{typeof total == 'number'?math.format(total, {precision: 14}) : '合计'}</span>
                  <span style={{ textAlign: 'left' }}>{typeof total == 'number' ? Number(total.toFixed(4)) : '-'}</span>
                )
              }

              const renderSummaryRow = (columns: any[]): React.ReactNode[] => {
                return columns.map((colData, index) => {
                  if (colData.children) {
                    return renderSummaryRow(colData.children);
                  } else {
                    return (
                      <Table.Summary.Cell key={index} index={index} align='center' rowSpan={1}>
                        <Caculate colData={colData} />
                      </Table.Summary.Cell>
                    );
                  }
                });
              };

              return (
                <Table.Summary fixed>
                  <Table.Summary.Row>
                    {renderSummaryRow(tableColumn)}
                  </Table.Summary.Row>
                </Table.Summary>
              );
            }}

          />}
        </div>
      </div>

    </BMSPagecontainer>
  )
}

export default OneBatch