GtDigManageWeb/src/pages/PurchaseList/Report/UserProjectRptModal.js

import React, { useState, useEffect } from 'react';
import { Modal, Table, Form, Input, Button } from 'antd';
import { connect } from 'dva';
import dayjs from 'dayjs';

function UserProjectRptModal(props) {
  const { dispatch, visible, onOk, onCancel, data, filter, loading } = props;
  const [form] = Form.useForm();
  // const getMonthColumns = () => {
  //   let arr = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二'];

  //   return {
  //     title: '月份',
  //     children: arr.map((item, index) => ({
  //       title: `${item}`,
  //       dataIndex: `month[${String(index)}].total_audit_cnt`,
  //       render: cnt => cnt || 0,
  //     })),
  //   };
  // };
  const getMonthColumns = () => {
    let arr = [
      '一',
      '二',
      '三',
      '四',
      '五',
      '六',
      '七',
      '八',
      '九',
      '十',
      '十一',
      '十二',
    ];
    var time = [dayjs(filter.s_time), dayjs(filter.e_time)];
    var date = {};
    let eYear = time[1].year();
    let eMonth = time[1].month();
    let current = dayjs(time[0]);
    let cYear, cMonth;

    for (let i = 0; i < 12; i++) {
      cYear = current.year();
      cMonth = current.month();
      if (!date[cYear]) date[cYear] = [];
      date[cYear].push(arr[cMonth]);
      current.add('month', 1);
    }
    current.subtract('month', 12);
    let monthColumns = Object.keys(date).map((year) => ({
      title: year + '年',
      children: date[year].map((item) => {
        let key = current.format('YYYY-MM');
        current.add('month', 1);
        return {
          title: `${item}`,
          render: (record) => {
            const { month_rpt } = record;
            return (
              month_rpt.find((item) => item.ts == key)?.pass_audit_cnt || 0
            );
          },
        };
      }),
    }));
    return monthColumns;
  };
  const columns = [
    {
      title: '用户名称',
      dataIndex: 'c_name',
    },
    {
      title: '部门',
      dataIndex: 'dep_name',
    },
    // getMonthColumns(),
    ...getMonthColumns(),
    {
      title: '总计',
      dataIndex: 'month_rpt',
      render: (arr) =>
        arr ? arr.reduce((total, item) => total + item.pass_audit_cnt, 0) : '',
    },
  ];
  const onChangePage = (pagination) => {
    dispatch({
      type: 'report/queryUserProjectReport',
      payload: {
        ...filter,
        currentPage: pagination.current,
      },
    });
  };
  const handleSearch = () => {
    // if (!filter?.project_id && !filter?.p_type_id) return;
    if (!filter?.classification) return;
    const dep_name = form.getFieldValue('dep_name');
    dispatch({
      type: 'report/queryUserProjectReport',
      payload: {
        ...filter,
        dep_name: dep_name,
      },
    });
  };
  useEffect(() => {
    if (!filter?.project_id) return;
    dispatch({
      type: 'report/queryUserProjectReport',
      payload: filter,
    });
  }, [filter]);

  return (
    <Modal
      title="工时"
      width="80%"
      visible={visible}
      onCancel={onCancel}
      footer={false}
    >
      <Form layout="inline" style={{ marginBottom: 20 }} form={form}>
        <Form.Item lable="部门" name="dep_name">
          <Input placeholder="请输入部门" />
        </Form.Item>
        <Form.Item>
          <Button type="primary" onClick={handleSearch}>
            查询
          </Button>
        </Form.Item>
      </Form>
      <Table
        columns={columns}
        loading={loading}
        dataSource={data.list}
        pagination={data.pagination}
        onChange={onChangePage}
      ></Table>
    </Modal>
  );
}

export default connect(({ report, loading }) => ({
  data: report.projectUser,
  loading: loading.models.report,
}))(UserProjectRptModal);