feat: 发票收入款汇总功能

package.json

@@ -58,7 +58,7 @@
     "@types/react-window": "^1.8.5",
     "@umijs/route-utils": "^1.0.33",
     "ahooks": "^2.10.0",
-    "antd": "4.16.12",
+    "antd": "^4.17.3",
     "antd-img-crop": "^3.16.0",
     "classnames": "^2.2.6",
     "crypto-js": "^4.0.0",

src/global.less

@@ -236,8 +236,8 @@ input:-webkit-autofill:active {
 //   cursor: col-resize;
 // }
 .card-transition {
-  display: flex;
-  justify-content: center;
+  // display: flex;
+  // justify-content: center;
   height: calc(11.11111vw - 20px);
   min-height: 130px;
   max-height: 280px;
@@ -249,9 +249,9 @@ input:-webkit-autofill:active {
   transition: all 0.3s;
 }
 .card-transition:hover {
-  border-color: transparent;
-  box-shadow: 0 6px 16px rgb(107 147 224 / 14%);
-  transform: translateY(-4px);
+  // border-color: transparent;
+  // box-shadow: 0 6px 16px rgb(107 147 224 / 14%);
+  // transform: translateY(-4px);
 }
 
 .arco-table {

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

@@ -1,7 +1,142 @@
-import React from 'react'
+import BasicTable from '@/components/Table'
+import consts from '@/consts'
+import { querySoftInvoiceAggregateList } from '@/services/statistic'
+import { isMobile } from '@/utils/is'
+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 = () => {
-  return <div />
+  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">
+      {!isMobile() && (
+        <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} />,
+          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

src/services/statistic.js

@@ -12,3 +12,11 @@ export async function querySoftwareUsageList(params) {
     data: params
   })
 }
+
+/** 获取发票收款入账汇总 */
+export async function querySoftInvoiceAggregateList(params) {
+  return request('/statistic/invoice/aggregate', {
+    method: 'POST',
+    data: params
+  })
+}