1

src/pages/Statistic/Software/Usage/index.jsx

@@ -1,11 +1,12 @@
 import { useState, useEffect, useRef, useMemo } from 'react'
 import BasicTable from '@/components/Table'
-import { DatePicker, Select, TreeSelect } from 'antd'
+import { DatePicker, Select, TreeSelect, Table, Typography } from 'antd'
 import { querySoftwareUsageList, queryUsageSelectOptions } from '@/services/statistic'
 import consts from '@/consts'
 import { useDebounceFn } from 'ahooks'
 import dayjs from 'dayjs'
 
+const { Text } = Typography
 const opMap = {
   STAFF: 'staff',
   DEPARTMENT: 'department'
@@ -35,7 +36,6 @@ const Usage = () => {
   }
 
   const mainParams = useMemo(() => {
-    console.log(state.startMonth)
     const p = { optionType: state.optionType, startMonth: state.startMonth[0].format('YYYY-MM') }
     if (state.optionType === opMap.STAFF) {
       p.staffIds = state.opIds
@@ -58,7 +58,7 @@ const Usage = () => {
     ids => {
       setState({ ...state, opIds: ids })
     },
-    { wait: 2000 }
+    { wait: 500 }
   )
   useEffect(() => {
     // 发起请求
@@ -72,7 +72,8 @@ const Usage = () => {
       dataIndex: 'name',
       key: 'name',
       width: 100,
-      fixed: 'left'
+      fixed: 'left',
+      align: 'center'
     },
     {
       title: '未使用',
@@ -80,12 +81,14 @@ const Usage = () => {
         {
           title: '生成',
           key: 'create',
-          dataindex: 'create'
+          dataIndex: 'create',
+          align: 'center'
         },
         {
           title: '接受',
           key: 'receive',
-          dataindex: 'receive'
+          dataIndex: 'receive',
+          align: 'center'
         }
       ]
     },
@@ -95,17 +98,20 @@ const Usage = () => {
         {
           title: '借出',
           key: 'lend',
-          dataindex: 'lend'
+          dataIndex: 'lend',
+          align: 'center'
         },
         {
           title: '销售',
           key: 'sales',
-          dataindex: 'sales'
+          dataIndex: 'sales',
+          align: 'center'
         },
         {
           title: '赠送',
           key: 'gifts',
-          dataindex: 'gifts'
+          dataIndex: 'gifts',
+          align: 'center'
         }
       ]
     }
@@ -174,6 +180,39 @@ const Usage = () => {
           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-center">{state.create}</Table.Summary.Cell>
+              <Table.Summary.Cell className="text-center">
+                {state.sum?.receiveCount}
+              </Table.Summary.Cell>
+              <Table.Summary.Cell className="text-center">
+                {state.sum?.lendCount}
+              </Table.Summary.Cell>
+              <Table.Summary.Cell className="text-center">
+                {state.sum?.salesCount}
+              </Table.Summary.Cell>
+              <Table.Summary.Cell className="text-center">
+                {state.sum?.giftsCount}
+              </Table.Summary.Cell>
+            </Table.Summary.Row>
+            <Table.Summary.Row>
+              <Table.Summary.Cell className="text-center">总计</Table.Summary.Cell>
+              <Table.Summary.Cell colSpan={2} className="text-center">
+                <Text type="danger">{state.create + state.sum?.receiveCount}</Text>
+              </Table.Summary.Cell>
+              <Table.Summary.Cell colSpan={3} className="text-center">
+                <Text type="danger">
+                  {state.sum?.lendCount + state.sum?.salesCount + state.sum?.giftsCount}
+                </Text>
+              </Table.Summary.Cell>
+            </Table.Summary.Row>
+          </>
+        ) : null
+      }
     />
   )
 }