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

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

const columnGroupMap = {
  creditPrice: '开票金额',
  receivablesPrice: '收款金额',
  invoicePrice: '入账金额'
}
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: 'creditPrice',
      title: '开票金额(元)',
      align: 'center'
    },
    {
      dataIndex: 'receivablesPrice',
      title: '收款金额(元)',
      align: 'center'
    },
    {
      dataIndex: 'invoicePrice',
      title: '入账金额(元)',
      align: 'center'
    }
  ]

  const optionChange = (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') {
          newList.push({ department: curr.name, type: columnGroupMap[key], value: curr[key] })
        }
      })
      return newList
    }, []),
    isGroup: true,
    padding: 'auto',
    appendPadding: [12, 12, 12, 12],
    xField: 'department',
    yField: 'value',
    legend: {
      position: 'top'
    },
    color: ['#A7D2F9', '#C4E9C1', '#E9C8C1'],
    colorField: 'type',
    seriesField: 'type'
  }
  return (
    <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={optionChange} type="InvoiceAggregate" />,
          actions: [
            <DatePicker.RangePicker
              picker="month"
              key="DatePicker"
              disabled={[false, true]}
              value={state.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-center">
                  {state.sum?.creditPrice}
                </Table.Summary.Cell>
                <Table.Summary.Cell className="text-center">
                  {state.sum?.receivablesPrice}
                </Table.Summary.Cell>
                <Table.Summary.Cell className="text-center">
                  {state.sum?.invoicePrice}
                </Table.Summary.Cell>
              </Table.Summary.Row>
            </>
          ) : null
        }
      />
    </div>
  )
}

export default InvoiceAggregate