feat: 应收款汇总

config/routes.js

@@ -214,7 +214,14 @@ export default [
           {
             path: 'customer-additions',
             name: 'customer-additions',
-            component: './Statistic/Product/CustomerAdditions'
+            component: './Statistic/Product/CustomerAdditions',
+            access: 'authRouteFilter'
+          },
+          {
+            path: 'invoice-receivables',
+            name: 'invoice-receivables',
+            component: './Statistic/Product/InvoiceReceivables'
+            // access: 'authRouteFilter'
           }
         ]
       }

src/locales/zh-CN/menu.js

@@ -46,5 +46,6 @@ export default {
   'menu.statistic.product.software-usage': '软件锁用量',
   'menu.statistic.product.invoice-aggregate': '发票收款入账汇总',
   'menu.statistic.product.invoice-trends': '发票收款入账趋势',
-  'menu.statistic.product.customer-additions': '客户新增'
+  'menu.statistic.product.customer-additions': '客户新增',
+  'menu.statistic.product.invoice-receivables': '应收款统计'
 }

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

@@ -0,0 +1,150 @@
+import React, { useState } from 'react'
+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 OptionSelect from '../../components/OptionSelect'
+import { disabledDate } from '@/utils/utils'
+
+export const collectedTypeEnum = {
+  UNSTART: 0, // 未启动
+  START: 1 // 启动
+}
+const { Option } = Select
+const { RangePicker } = DatePicker
+
+const InvoiceReceivables = () => {
+  const [state, setState] = useState({
+    params: {
+      optionType: 'singleStaff',
+      dataIds: [],
+      uncollected: collectedTypeEnum.UNSTART,
+      startMonth: [dayjs(new Date()), dayjs(new Date())]
+    },
+    list: []
+  })
+  const handleOptionChange = (type, ids) =>
+    setState({
+      ...state,
+      params: { ...state.params, optionType: type, dataIds: ids }
+    })
+  const handleCheckOnChange = checked => {
+    if (checked) {
+      setState({ ...state, params: { ...state.params, uncollected: collectedTypeEnum.START } })
+    } else {
+      setState({ ...state, params: { ...state.params, uncollected: collectedTypeEnum.UNSTART } })
+    }
+  }
+  const columns = [
+    {
+      dataIndex: 'userName',
+      title: '申请人',
+      align: 'center'
+    },
+    {
+      dataIndex: 'invoiceSerial',
+      title: '开票流水号',
+      align: 'center'
+    },
+    {
+      dataIndex: 'options',
+      title: '状态',
+      align: 'center'
+    },
+    {
+      dataIndex: 'invoiceCompany',
+      title: '开票单位',
+      align: 'center'
+    },
+    {
+      dataIndex: 'options',
+      title: '发票形式',
+      align: 'center'
+    },
+    {
+      dataIndex: 'options',
+      title: '发票类型',
+      align: 'center'
+    },
+    {
+      dataIndex: 'invoicePrice',
+      title: '开票金额',
+      align: 'center'
+    },
+    {
+      dataIndex: 'invoiceElement',
+      title: '开票内容',
+      align: 'center'
+    },
+    {
+      dataIndex: 'irid',
+      title: '发票号',
+      align: 'center'
+    },
+    {
+      dataIndex: 'options',
+      title: '发票申请时间',
+      align: 'center'
+    },
+    {
+      dataIndex: 'receivablesSerial',
+      title: '收款流水号',
+      align: 'center'
+    },
+    {
+      dataIndex: 'bindPrice',
+      title: '已收款金额',
+      align: 'center'
+    },
+    {
+      dataIndex: 'options',
+      title: '应收款金额',
+      align: 'center'
+    },
+    {
+      dataIndex: 'bindDate',
+      title: '入账时间',
+      align: 'center'
+    }
+  ]
+  return (
+    <div className="flex flex-col">
+      <BasicTable
+        rowkey="iid"
+        search={false}
+        columns={columns}
+        pagination={false}
+        bordered
+        params={state.params}
+        toolbar={{
+          title: <OptionSelect onChange={handleOptionChange} type="InvoiceReceivables" multiple={false} />,
+          actions: [
+            <Space key="iid">
+              <DatePicker.RangePicker
+                picker="month"
+                allowClear={false}
+                key="DatePicker"
+                disabledDate={current => disabledDate(current, 'month')}
+                value={state.params.startMonth}
+                onChange={val => setState({ ...state, params: { ...state.params, startMonth: val } })}
+              />
+              <Checkbox onChange={e => handleCheckOnChange(e.target.checked)}>截止申请时间未收款</Checkbox>
+            </Space>
+          ]
+        }}
+        request={async params => {
+          const { code = -1, data = [] } = await queryInvoiceReceivablesList({ ...params })
+          setState({ ...state, data })
+          return {
+            data,
+            success: code === consts.RET_CODE.SUCCESS
+            // total: list?.length || 0
+          }
+        }}
+      />
+    </div>
+  )
+}
+
+export default InvoiceReceivables

src/services/statistic.js

@@ -36,3 +36,11 @@ export async function queryCustomerAdditionList(params) {
     data: params
   })
 }
+
+/** 应收款统计 */
+export async function queryInvoiceReceivablesList(params) {
+  return request('/statistic/invoice/receivables', {
+    method: 'POST',
+    data: params
+  })
+}