feat: 添加仪表盘-客户服务对应卡片详情

src/hooks/useAutoTable.js

@@ -38,7 +38,7 @@ const useAutoTable = (needSubtractHeight, needSubtractWidth) => {
 
 export default useAutoTable
 
-export function useTableScroll(columnsRef, selectKeysRef) {
+export function useTableScroll(columnsRef = [], selectKeysRef = []) {
   let paginationEl = null
   let footerEl = null
   let bodyEl = null

src/pages/Customer/Company/components/CompanyDetail/LowerList.jsx

@@ -1,18 +1,19 @@
 import { Tabs, List, Row, Col } from 'antd'
 import { dayjsFormat } from '@/utils/utils'
 
+export const servicelogEnum = {
+  1: '上门服务',
+  2: '电话拜访',
+  3: '其他事项',
+  4: '在线服务'
+}
+
 const CompanyLowerList = props => {
-  // const { toggleModal, setModalProps } = useModal()
   const {
     log: { log: logs = [] },
     servicelist
   } = props
-  const servicelogEnum = {
-    1: '上门服务',
-    2: '电话拜访',
-    3: '其他事项',
-    4: '在线服务'
-  }
+
   const { TabPane } = Tabs
   return (
     <div>

src/pages/workbench/Dashboard/components/RatioPanels.jsx

@@ -1,11 +1,11 @@
-import React from 'react'
-import styles from '@/pages/Customer/Company/components/ConnectCompany/index.less'
-import { Button } from 'antd'
+import React, { useState } from 'react'
 import ProTable from '@ant-design/pro-table'
-import { useDispatch } from 'umi'
 import CustomModal from '@/components/Modal/src/components/CustomModal'
-import { queryRatioPanelsList } from '@/services/dashboard'
+import { queryRatioPanelsList, queryServiceRatioPanelsList } from '@/services/dashboard'
 import consts from '@/consts'
+import { servicelogEnum } from '@/pages/Customer/Company/components/CompanyDetail/LowerList'
+import { Badge } from 'antd'
+import { cardTypeMap } from '../consts'
 
 const dataTypeEunm = {
   0: 'client',
@@ -13,13 +13,110 @@ const dataTypeEunm = {
   2: 'business'
 }
 
+const renderBadge = (count, active = false) => {
+  return active ? (
+    <Badge
+      count={count}
+      style={{
+        marginTop: -2,
+        marginLeft: 4,
+        color: active ? '#1890FF' : '#999',
+        backgroundColor: active ? '#E6F7FF' : '#eee'
+      }}
+    />
+  ) : null
+}
+
+/** 服务环比数据Tab切换表格 */
+const ServiceRatioPanels = ({ cyclical, dataPermission }) => {
+  const [state, setState] = useState({
+    activeKey: '0',
+    total: 0
+  })
+
+  const columns = [
+    {
+      dataIndex: 'status',
+      title: '服务类型',
+      width: '25%',
+      render: type => servicelogEnum[type]
+    },
+    {
+      dataIndex: 'date',
+      title: '服务日期',
+      width: '25%',
+      valueType: 'date'
+    },
+    {
+      dataIndex: 'mark',
+      width: '50%',
+      title: '服务内容'
+    }
+  ]
+
+  return (
+    <ProTable
+      size="small"
+      params={{ dataType: state.activeKey, cyclical, dataPermission }}
+      rowKey={record => record.id}
+      scroll={{ y: 400 }}
+      columns={columns}
+      search={false}
+      toolbar={{
+        settings: false,
+        menu: {
+          type: 'tab',
+          activeKey: state.activeKey,
+          items: [
+            {
+              key: '0',
+              label: (
+                <span>
+                  联系人服务记录
+                  {renderBadge(state.total, state.activeKey === '0')}
+                </span>
+              )
+            },
+            {
+              key: '1',
+              label: (
+                <span>
+                  客户服务记录
+                  {renderBadge(state.total, state.activeKey === '1')}
+                </span>
+              )
+            },
+            {
+              key: '2',
+              label: (
+                <span>
+                  商机服务记录
+                  {renderBadge(state.total, state.activeKey === '2')}
+                </span>
+              )
+            }
+          ],
+          onChange: key => {
+            setState({ ...state, activeKey: key })
+            // redoHeight()
+          }
+        }
+      }}
+      pagination={{ defaultPageSize: 10, showQuickJumper: true }}
+      request={async params => {
+        const { code = -1, data } = await queryServiceRatioPanelsList(params)
+        setState({ ...state, total: data.total || 0 })
+        return {
+          data: data.log,
+          success: code === consts.RET_CODE.SUCCESS,
+          total: data.total
+        }
+      }}
+    />
+  )
+}
+
 const RatioPanels = ({ dataType, retioCyclical, dataPermission }) => {
-  const dispatch = useDispatch()
-  const closeModal = () => {
-    dispatch({
-      type: 'single/changeModal'
-    })
-  }
   const columnsMap = {
     0: [
       {
@@ -113,54 +210,41 @@ const RatioPanels = ({ dataType, retioCyclical, dataPermission }) => {
         width: '7%'
       }
     ]
-    // 3: [
-    //   {
-    //     dataIndex: '',
-    //     title: '栏目'
-    //   },
-    //   {
-    //     dataIndex: '',
-    //     title: '类型'
-    //   },
-    //   {
-    //     dataIndex: '',
-    //     title: '服务时间'
-    //   },
-    //   {
-    //     dataIndex: '',
-    //     title: '服务内容'
-    //   }
-    // ]
   }
+
   return (
     <CustomModal title="卡片详情">
-      <div className="mx-4">
-        <ProTable
-          size="small"
-          pagination={{ defaultPageSize: 10 }}
-          rowKey={record => record.id}
-          scroll={{ y: 400 }}
-          columns={columnsMap[dataType]}
-          params={{ dataType, dataPermission, cyclical: retioCyclical }}
-          request={async params => {
-            const { code = -1, data } = await queryRatioPanelsList(params)
-            return {
-              data: data[dataTypeEunm[dataType]],
-              success: code === consts.RET_CODE.SUCCESS,
-              total: data.total
-            }
-          }}
-          search={false}
-          toolBarRender={false}
-        />
+      <div className="mx-4 pb-4">
+        {dataType === cardTypeMap.SERVICE ? (
+          <ServiceRatioPanels cyclical={retioCyclical} dataPermission={dataPermission} />
+        ) : (
+          <ProTable
+            size="small"
+            pagination={{ defaultPageSize: 10 }}
+            rowKey={record => record.id}
+            scroll={{ y: 400 }}
+            columns={columnsMap[dataType]}
+            params={{ dataType, dataPermission, cyclical: retioCyclical }}
+            request={async params => {
+              const { code = -1, data } = await queryRatioPanelsList(params)
+              return {
+                data: data[dataTypeEunm[dataType]],
+                success: code === consts.RET_CODE.SUCCESS,
+                total: data.total
+              }
+            }}
+            search={false}
+            toolBarRender={false}
+          />
+        )}
       </div>
-      <div className={styles.modalFooter}>
+      {/* <div className={styles.modalFooter}>
         <div className="text-right">
           <Button type="button" onClick={closeModal}>
             关闭
           </Button>
         </div>
-      </div>
+      </div> */}
     </CustomModal>
   )
 }

src/pages/workbench/Dashboard/index.jsx

@@ -256,7 +256,7 @@ const Dashboard = () => {
                   className="cursor-pointer"
                   onClick={() => handleRatioCard(cardTypeMap.COMPANY)}>
                   <Col span={6}>
-                    <div className="w-48px h-48px border rounded-48px bg-[#0c7cd5] flex items-center justify-center">
+                    <div className="w-full max-w-48px h-48px border rounded-48px bg-[#0c7cd5] flex items-center justify-center">
                       <City size="26" fill="#fff" />
                     </div>
                   </Col>
@@ -292,7 +292,7 @@ const Dashboard = () => {
               ) : (
                 <Row className="cursor-pointer" onClick={() => handleRatioCard(cardTypeMap.CLIENT)}>
                   <Col span={6}>
-                    <div className="w-48px h-48px border rounded-48px bg-[#0c7cd5] flex items-center justify-center">
+                    <div className="w-full max-w-48px h-48px border rounded-48px bg-[#0c7cd5] flex items-center justify-center">
                       <AddressBook size="26" fill="#fff" />
                     </div>
                   </Col>
@@ -329,7 +329,7 @@ const Dashboard = () => {
                   className="cursor-pointer"
                   onClick={() => handleRatioCard(cardTypeMap.BUSINESS)}>
                   <Col span={6}>
-                    <div className="w-48px h-48px border rounded-48px bg-[#0c7cd5] flex items-center justify-center">
+                    <div className="w-full max-w-48px h-48px border rounded-48px bg-[#0c7cd5] flex items-center justify-center">
                       <Finance size="26" fill="#fff" />
                     </div>
                   </Col>
@@ -363,9 +363,11 @@ const Dashboard = () => {
               {state.loading ? (
                 <Skeleton active avatar />
               ) : (
-                <Row>
+                <Row
+                  onClick={() => handleRatioCard(cardTypeMap.SERVICE)}
+                  className="cursor-pointer">
                   <Col span={6}>
-                    <div className="w-48px h-48px border rounded-48px bg-[#0c7cd5] flex items-center justify-center">
+                    <div className="w-full max-w-48px h-48px border rounded-48px bg-[#0c7cd5] flex items-center justify-center">
                       <Comment size="26" fill="#fff" />
                     </div>
                   </Col>

src/services/dashboard.js

@@ -6,8 +6,8 @@ import request from '@/basic/utils/request'
  * @returns 结果集
  */
 export async function queryDashboard(payload) {
-  return request.get('/dashboard/list', {
-    params: { ...payload }
+  return request.post('/dashboard/list', {
+    data: { ...payload }
   })
 }
 
@@ -21,7 +21,14 @@ export async function queryReminderList(payload) {
 
 /** 获得环比数据列表 */
 export async function queryRatioPanelsList(params) {
-  return request.get('/dashboard/ratioPanels', {
-    params
+  return request.post('/dashboard/ratioPanels', {
+    data: params
+  })
+}
+
+/** 获得服务相关的环比数据列表 */
+export async function queryServiceRatioPanelsList(params) {
+  return request.post('/dashboard/ratioPanelsService', {
+    data: params
   })
 }