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

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

const InvoiceTrends = () => {
  const [state, setState] = useState({
    params: {
      optionType: 'staff',
      dataIds: [],
      priceType: 'invoice',
      startMonth: [dayjs(new Date()), dayjs(new Date())]
    },
    chart: []
  })
  const tRef = useRef(null)
  const columns = [
    {
      dataIndex: 'name',
      title: '姓名',
      align: 'center',
      render: (value, _, idx) => {
        const obj = {
          children: value,
          props: {}
        }
        if (idx == 0) {
          obj.props.rowSpan = 2
        }
        if (idx == 1) {
          obj.props.rowSpan = 0
        }
        return obj
      }
    },
    {
      dataIndex: 'options',
      title: '项',
      align: 'center'
    },
    {
      dataIndex: 'month_1',
      title: '1月',
      align: 'center',
      render: text => <div className="text-right">{text}</div>
    },
    {
      dataIndex: 'month_2',
      title: '2月',
      align: 'center',
      render: text => <div className="text-right">{text}</div>
    },
    {
      dataIndex: 'month_3',
      title: '3月',
      align: 'center',
      render: text => <div className="text-right">{text}</div>
    },
    {
      dataIndex: 'month_4',
      title: '4月',
      align: 'center',
      render: text => <div className="text-right">{text}</div>
    },
    {
      dataIndex: 'month_5',
      title: '5月',
      align: 'center',
      render: text => <div className="text-right">{text}</div>
    },
    {
      dataIndex: 'month_6',
      title: '6月',
      align: 'center',
      render: text => <div className="text-right">{text}</div>
    },
    {
      dataIndex: 'month_7',
      title: '7月',
      align: 'center',
      render: text => <div className="text-right">{text}</div>
    },
    {
      dataIndex: 'month_8',
      title: '8月',
      align: 'center',
      render: text => <div className="text-right">{text}</div>
    },
    {
      dataIndex: 'month_9',
      title: '9月',
      align: 'center',
      render: text => <div className="text-right">{text}</div>
    },
    {
      dataIndex: 'month_10',
      title: '10月',
      align: 'center',
      render: text => <div className="text-right">{text}</div>
    },
    {
      dataIndex: 'month_11',
      title: '11月',
      align: 'center',
      render: text => <div className="text-right">{text}</div>
    },
    {
      dataIndex: 'month_12',
      title: '12月',
      align: 'center',
      render: text => <div className="text-right">{text}</div>
    }
  ]

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

  const dualAxesOptions = {
    data: [state.chart, state.chart],
    xField: 'monthName',
    yField: ['price', 'ring'],
    appendPadding: [0, 24, 12, 24],
    meta: {
      price: {
        alias: '当月开票金额(元)'
      },
      ring: {
        alias: '环比增长(%)',
        formatter: v => `${v}%`,
        tickInterval: 100
      }
      // month: {
      //   formatter: v => `${v}月`
      // }
    },
    yAxis: {
      price: {
        label: {
          formatter: v => {
            return `${v}元`
          }
        }
      },
      ring: {
        min: -100
      }
    },
    legend: {
      position: 'top',
      itemName: {
        formatter: (_, item) => {
          return item.value === 'price' ? '当月开票金额(元)' : '环比增长(%)'
        }
      }
    },
    geometryOptions: [
      {
        geometry: 'column',
        color: '#A7D2F9'
      },
      {
        geometry: 'line',
        smooth: true,
        color: '#C4E9C1'
      }
    ],
    interactions: [
      {
        type: 'element-highlight'
      },
      {
        type: 'active-region'
      }
    ]
  }
  return (
    <div className="flex flex-col">
      <div className="flex flex-row justify-between mb-4">
        <div className="card-transition bg-white w-full">
          {state.chart?.length ? <DualAxes {...dualAxesOptions} /> : null}
          {/* {pieData.pieLeft ? <Pie {...leftConfig} /> : null} */}
          {/* {state.list?.length ? <Column {...columnConfig} /> : null} */}
        </div>
      </div>

      <BasicTable
        // manualRequest
        search={false}
        params={state.params}
        columns={columns}
        actionRef={tRef}
        rowkey="id"
        toolbar={{
          title: [
            <OptionSelect onChange={optionChange} type="InvoiceTrends" key="op" multiple={false} />,
            <div className="ml-2" key="pp">
              <Select
                defaultValue="invoice"
                options={[
                  { label: '发票', value: 'invoice' },
                  { label: '收款', value: 'receivables' },
                  { label: '入账', value: 'credit' }
                ]}
                placeholder="请选择发票类型"
                onChange={e => setState({ ...state, params: { ...state.params, priceType: e } })}
              />
            </div>
          ],
          actions: [
            <DatePicker.RangePicker
              picker="month"
              key="DatePicker"
              disabled={[false, true]}
              value={state.startMonth}
              onChange={val => setState({ ...state, params: { ...state.params, startMonth: val } })}
            />
          ]
        }}
        pagination={false}
        bordered
        request={async (params, sort, filter) => {
          const {
            code = -1,
            data: { list, chart }
          } = await querySoftInvoiceTrendsList({
            ...params,
            ...sort,
            ...filter
          })
          console.log(chart)
          setState({ ...state, chart })
          return {
            data: list,
            success: code === consts.RET_CODE.SUCCESS,
            total: list?.length || 0
          }
        }}
      />
    </div>
  )
}

export default InvoiceTrends