feat: 应收款统计发票形式、小计的显示

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

@@ -3,16 +3,21 @@ import BasicTable from '@/components/Table'
 import { queryInvoiceReceivablesList } from '@/services/statistic'
 import consts from '@/consts'
 import dayjs from 'dayjs'
-import { Checkbox, DatePicker, Select, Space } from 'antd'
+import { Checkbox, DatePicker, Select, Space, Statistic, Table } from 'antd'
 import OptionSelect from '../../components/OptionSelect'
 import { disabledDate } from '@/utils/utils'
+import styles from './index.less'
 
 export const collectedTypeEnum = {
   UNSTART: 0, // 未启动
   START: 1 // 启动
 }
+const invoiceFormEnum = {
+  0: { text: '纸质发票' },
+  1: { text: '电子发票' }
+}
 const { Option } = Select
-const { RangePicker } = DatePicker
+// const { RangePicker } = DatePicker
 
 const InvoiceReceivables = () => {
   const [state, setState] = useState({
@@ -58,19 +63,25 @@ const InvoiceReceivables = () => {
       align: 'center'
     },
     {
-      dataIndex: 'options',
+      dataIndex: 'invoiceForm',
       title: '发票形式',
-      align: 'center'
+      align: 'center',
+      render: (_, { invoiceForm }) => {
+        return invoiceFormEnum[invoiceForm]?.text
+      }
     },
     {
       dataIndex: 'options',
       title: '发票类型',
-      align: 'center'
+      align: 'center',
+      render: (_, record) => {
+        console.log(record.iid)
+      }
     },
     {
       dataIndex: 'invoicePrice',
       title: '开票金额',
-      align: 'center'
+      align: 'right'
     },
     {
       dataIndex: 'invoiceElement',
@@ -83,7 +94,7 @@ const InvoiceReceivables = () => {
       align: 'center'
     },
     {
-      dataIndex: 'options',
+      dataIndex: 'date',
       title: '发票申请时间',
       align: 'center'
     },
@@ -95,12 +106,21 @@ const InvoiceReceivables = () => {
     {
       dataIndex: 'bindPrice',
       title: '已收款金额',
-      align: 'center'
+      align: 'right'
     },
     {
-      dataIndex: 'options',
+      dataIndex: 'receivables',
       title: '应收款金额',
-      align: 'center'
+      align: 'right',
+      render: (_, record) => {
+        return (
+          <Statistic
+            value={Number(record.invoicePrice - record.bindPrice)}
+            precision={2}
+            className={styles.statisticFontSize}
+          />
+        )
+      }
     },
     {
       dataIndex: 'bindDate',
@@ -124,7 +144,7 @@ const InvoiceReceivables = () => {
               <DatePicker.RangePicker
                 picker="month"
                 allowClear={false}
-                key="DatePicker"
+                // key="DatePicker"
                 disabledDate={current => disabledDate(current, 'month')}
                 value={state.params.startMonth}
                 onChange={val => setState({ ...state, params: { ...state.params, startMonth: val } })}
@@ -134,14 +154,34 @@ const InvoiceReceivables = () => {
           ]
         }}
         request={async params => {
-          const { code = -1, data = [] } = await queryInvoiceReceivablesList({ ...params })
-          setState({ ...state, data })
+          const {
+            code = -1,
+            data: { list, sum }
+          } = await queryInvoiceReceivablesList({ ...params })
+          setState({ ...state, list, sum })
           return {
-            data,
+            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">小计</Table.Summary.Cell>
+                <Table.Summary.Cell className="text-right" colSpan={6}>
+                  {state.sum?.invoicePrice}
+                </Table.Summary.Cell>
+                <Table.Summary.Cell className="text-right" colSpan={5}>
+                  {state.sum?.collectionsPrice}
+                </Table.Summary.Cell>
+                <Table.Summary.Cell className="text-right">{state.sum?.bindPrice}</Table.Summary.Cell>
+                <Table.Summary.Cell className="text-right" />
+              </Table.Summary.Row>
+            </>
+          ) : null
+        }
       />
     </div>
   )

src/pages/Statistic/Product/InvoiceReceivables/index.less

@@ -0,0 +1,5 @@
+.statisticFontSize {
+  :global(.ant-statistic-content) {
+    font-size: 16px;
+  }
+}