feat: 联系人列表底部总价总结栏

src/pages/Customer/Contact/index.jsx

@@ -2,10 +2,9 @@ import Contacts from '@/components/PopContent/Contacts'
 import Addcontact from '@/pages/Customer/Contact/components/AddContact'
 import ProTable from '@ant-design/pro-table'
 // import { PageHeaderWrapper } from '@ant-design/pro-layout';
-import { Button, message, Tag } from 'antd'
+import { message, Tag } from 'antd'
 import { connect } from 'dva'
 import React, { useEffect, useState } from 'react'
-import SvgIcon from '@/components/SvgIcon'
 import useAutoTable from '@/hooks/useAutoTable'
 import consts from '@/consts'
 import { queryContact, apiAddClient } from '@/services/contact'
@@ -13,6 +12,7 @@ import styles from './index.less'
 import LazyCascader from '@/components/LazyCascader'
 import { useDebounceFn } from 'ahooks'
 import { useModal } from '@/components/Modal'
+import { formatValues } from '@/components/LazyCascader'
 
 const Contact = props => {
   const { toggleDrawer, setDrawerProps } = useModal()
@@ -28,39 +28,33 @@ const Contact = props => {
     servicelog: [],
     total: 0,
     id: '',
-    visible: false
-  })
-  const [addClient, setAddClient] = useState({
-    visible: false,
-    loading: false
+    tail: { department: 0, email: 0, telephone: 0 }
   })
+
   const initData = async payload => {
     const {
       code = -1,
-      data: { client = [], log = [], serviceLog = [], total = 0 } = {
+      data: { client = [], log = [], serviceLog = [], total = 0, tail } = {
         client: [],
         log: [],
         serviceLog: [],
-        total: 0
+        total: 0,
+        tail: { department: 0, email: 0, telephone: 0 }
       }
     } = await queryContact(payload)
     if (code === consts.RET_CODE.SUCCESS) {
-      setState({ ...state, data: client, journal: log, servicelist: serviceLog, total })
-      if (addClient.visible) {
-        setAddClient({ ...addClient, loading: false, visible: false })
-      }
+      setState({ ...state, data: client, journal: log, servicelist: serviceLog, total, tail })
     }
   }
 
   const handleAddClient = async values => {
-    setAddClient({ ...addClient, loading: true })
-    const { code = -1 } = await apiAddClient(values)
+    const payload = formatValues(values)
+    const { code = -1 } = await apiAddClient(payload)
     if (code === consts.RET_CODE.SUCCESS) {
       await initData()
       return message.success('新增成功')
     }
     // 请求完了
-    setAddClient({ ...addClient, loading: false })
   }
 
   // 展示drawer
@@ -369,6 +363,15 @@ const Contact = props => {
           // size="middle"
           columns={columns}
           dataSource={state.data}
+          summary={() => (
+            <ProTable.Summary.Row>
+              <ProTable.Summary.Cell>统计: 总数</ProTable.Summary.Cell>
+              <ProTable.Summary.Cell />
+              <ProTable.Summary.Cell>未填写: {state.tail.department}</ProTable.Summary.Cell>
+              <ProTable.Summary.Cell>未填写: {state.tail.telephone}</ProTable.Summary.Cell>
+              <ProTable.Summary.Cell>未填写: {state.tail.email}</ProTable.Summary.Cell>
+            </ProTable.Summary.Row>
+          )}
           pagination={{
             pageSize: consts.PAGE_SIZE,
             total: state.total,
@@ -382,14 +385,8 @@ const Contact = props => {
               onChange: handleSearchInputChange
             },
             actions: [
-              <LazyCascader onChange={onDistrictChange} key="LazyCascader" />,
-              <Button
-                key="button"
-                type="primary"
-                onClick={() => setAddClient({ ...addClient, visible: true })}>
-                <SvgIcon type="icon-plus" />
-                联系人
-              </Button>
+              <LazyCascader onChange={onDistrictChange} key="lazyCascader" />,
+              <Addcontact onConfirm={handleAddClient} key="addContactBtn" />
             ]
           }}
           scroll={{ x, y }}
@@ -404,12 +401,6 @@ const Contact = props => {
           // ]}
         />
       </div>
-      <Addcontact
-        onConfirm={handleAddClient}
-        loading={addClient.loading}
-        visible={addClient.visible}
-        onCancel={() => setAddClient({ ...addClient, visible: false })}
-      />
     </>
   )
 }