cldV2react/src/pages/Statistic/Product/InvoiceAggregate/index.jsx

import BasicTable from '@/components/Table'
import consts from '@/consts'
import { querySoftInvoiceAggregateList } from '@/services/statistic'
import { disabledDate } from '@/utils/utils'
import { Column } from '@ant-design/charts'
import { PageContainer } from '@ant-design/pro-layout'
import { Table, DatePicker } from 'antd'
import dayjs from 'dayjs'
import React, { useRef, useState } from 'react'
import OptionSelect from '../../components/OptionSelect'

const columnGroupMap = {
  invoicePrice: '开票金额',
  receivablesPrice: '收款金额',
  creditPrice: '入账金额'
}
const InvoiceAggregate = () => {
  const [state, setState] = useState({
    params: {
      optionType: 'staff',
      dataIds: [],
      startMonth: [dayjs(new Date()), dayjs(new Date())]
    },
    list: []
  })
  const tRef = useRef(null)
  const columns = [
    {
      dataIndex: 'name',
      title: '名称',
      align: 'center'
    },
    {
      dataIndex: 'invoicePrice',
      title: '开票金额(元)',
      align: 'center',
      render: text => <div className="text-right">{text}</div>
    },
    {
      dataIndex: 'receivablesPrice',
      title: '收款金额(元)',
      align: 'center',
      render: text => <div className="text-right">{text}</div>
    },
    {
      dataIndex: 'creditPrice',
      title: '入账金额(元)',
      align: 'center',
      render: text => <div className="text-right">{text}</div>
    }
  ]

  const handleOptionChange = (type, ids) =>
    setState({ ...state, params: { ...state.params, optionType: type, dataIds: ids } })

  const columnConfig = {
    data: state.list.reduce((prev, curr) => {
      const newList = [...prev]
      const keys = Object.keys(curr)
      keys.forEach(key => {
        if (key !== 'name' && key !== 'id') {
          newList.push({
            department: curr.name,
            type: columnGroupMap[key],
            value: parseInt(curr[key])
          })
        }
      })
      return newList
    }, []),
    isGroup: true,
    autoFit: true,
    // padding: 'auto',
    // dodgePadding: 2,
    appendPadding: [23, 32, 24, 32],
    xField: 'department',
    yField: 'value',
    seriesField: 'type',
    legend: {
      position: 'top'
    },
    color: ['#A7D2F9', '#C4E9C1', '#E9C8C1'],
    colorField: 'type'
  }

  return (
    <PageContainer title={false} breadcrumb={false} waterMarkProps={{ offsetTop: 111 }}>
      <div className="flex flex-col">
        <div className="flex flex-row justify-between mb-4">
          <div className="card-transition bg-white w-full">
            {/* {pieData.pieLeft ? <Pie {...leftConfig} /> : null} */}
            {state.list?.length ? <Column {...columnConfig} /> : null}
          </div>
        </div>

        <BasicTable
          // manualRequest
          search={false}
          columns={columns}
          actionRef={tRef}
          rowkey="id"
          toolbar={{
            title: <OptionSelect onChange={handleOptionChange} type="InvoiceAggregate" />,
            actions: [
              <DatePicker.RangePicker
                allowClear={false}
                picker="month"
                key="DatePicker"
                clo
                disabledDate={current => disabledDate(current, 'month')}
                // disabled={[false, true]}
                value={state.params.startMonth}
                onChange={val => setState({ ...state, params: { ...state.params, startMonth: val } })}
              />
            ]
          }}
          params={state.params}
          pagination={false}
          bordered
          request={async (params, sort, filter) => {
            const {
              code = -1,
              data: { list, sum }
            } = await querySoftInvoiceAggregateList({ ...params, ...sort, ...filter })
            setState({ ...state, sum, list })
            return {
              data: list,
              success: code === consts.RET_CODE.SUCCESS,
              total: list?.length || 0
            }
          }}
          summary={data =>
            data?.length ? (
              <>
                <Table.Summary.Row>
                  <Table.Summary.Cell className="text-center">{state.sum?.name}</Table.Summary.Cell>
                  <Table.Summary.Cell className="text-right">{state.sum?.invoicePrice}</Table.Summary.Cell>
                  <Table.Summary.Cell className="text-right">
                    {state.sum?.receivablesPrice}
                  </Table.Summary.Cell>
                  <Table.Summary.Cell className="text-right">{state.sum?.creditPrice}</Table.Summary.Cell>
                </Table.Summary.Row>
              </>
            ) : null
          }
        />
      </div>
    </PageContainer>
  )
}

export default InvoiceAggregate