feat: 仪表盘排行榜模块

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

@@ -0,0 +1,109 @@
+import ProTable from '@ant-design/pro-table'
+import { Select } from 'antd'
+import React, { useState, useMemo } from 'react'
+
+const { Option } = Select
+
+const opMap = {
+  customer: '新增服务',
+  customerService: '客户服务',
+  client: '新增联系人',
+  clientService: '联系人服务',
+  business: '新增商机',
+  businessService: '商机服务'
+}
+const LeaderBoard = ({ dataList = [] }) => {
+  const [activeOp, setActiveOp] = useState('customer')
+
+  const columns = useMemo(() => {
+    const oColumns = [
+      {
+        title: '排名',
+        dataIndex: 'rank',
+        valueType: 'indexBorder',
+        width: '30%'
+      },
+      {
+        title: '姓名',
+        dataIndex: `${activeOp}Name`,
+        width: '40%'
+      },
+      {
+        title: '新增客户数',
+        dataIndex: 'customer',
+        width: '30%'
+      },
+      {
+        title: '客户服务',
+        dataIndex: 'customerService',
+        width: '30%'
+      },
+      {
+        title: '新增联系人',
+        dataIndex: 'client',
+        width: '30%'
+      },
+      {
+        title: '联系人服务',
+        dataIndex: 'clientService',
+        width: '30%'
+      },
+      {
+        title: '新增商机',
+        dataIndex: 'business',
+        width: '30%'
+      },
+      {
+        title: '商机服务',
+        dataIndex: 'businessService',
+        width: '30%'
+      }
+    ]
+
+    let stop = false
+    const bColumns = oColumns.reduce((prev, curr, idx) => {
+      if (idx < 2) {
+        prev.push(curr)
+        return prev
+      }
+
+      if (!stop && curr.dataIndex.startsWith(activeOp)) {
+        stop = true
+        prev.push(curr)
+        return prev
+      }
+      return prev
+    }, [])
+    return bColumns
+  }, [activeOp])
+
+  return (
+    <>
+      <div className="flex items-center justify-between">
+        <span>排行榜</span>
+        <Select defaultValue="customer" onChange={e => setActiveOp(e)}>
+          <Option value="customer">新增服务</Option>
+          <Option value="customerService">客户服务</Option>
+          <Option value="client">新增联系人</Option>
+          <Option value="clientService">联系人服务</Option>
+          <Option value="business">新增商机</Option>
+          <Option value="businessService">商机服务</Option>
+          {/* <Option value="开票金额">开票金额</Option>
+          <Option value="回款金额">回款金额</Option> */}
+        </Select>
+      </div>
+      <div className="text-center">{opMap[activeOp]}排行榜</div>
+      <ProTable
+        rowKey={record => record.rank}
+        columns={columns}
+        dataSource={dataList}
+        search={false}
+        size="small"
+        toolBarRender={false}
+        pagination={false}
+      />
+    </>
+  )
+}
+
+export default LeaderBoard

src/pages/workbench/Dashboard/index.jsx

@@ -7,6 +7,7 @@ import consts from '@/consts'
 import { useModal } from '@/components/Modal'
 import { queryDashboard } from '@/services/dashboard'
 import ReminderList from './components/ReminderList'
+import LeaderBoard from './components/LeaderBoard'
 
 const Dashboard = () => {
   const { Option } = Select
@@ -138,21 +139,7 @@ const Dashboard = () => {
       )
     }
   ]
-  const columnsCustomer = [
-    {
-      title: '排名',
-      dataIndex: 'rank',
-      valueType: 'indexBorder'
-    },
-    {
-      title: '姓名',
-      dataIndex: 'clientStaffName'
-    },
-    {
-      title: '新增客户数',
-      dataIndex: 'clientCount'
-    }
-  ]
+
   const charData = state.char
   const threadData = state.thread
   // const uvBillData = [
@@ -399,31 +386,8 @@ const Dashboard = () => {
       <div className="mt-4">
         <Row gutter={16}>
           <Col className="gutter-row" span={12}>
-            <div className="p-4 bg-white border rounded-lg shadow-card">
-              <div className="relative">
-                <span>排行榜</span>
-                <div className="absolute right-1 top-0">
-                  <Select defaultValue="新增服务">
-                    <Option value="新增服务">新增服务</Option>
-                    <Option value="客户服务">客户服务</Option>
-                    <Option value="新增联系人">新增联系人</Option>
-                    <Option value="联系人服务">联系人服务</Option>
-                    <Option value="新增商机">新增商机</Option>
-                    <Option value="商机服务">商机服务</Option>
-                    <Option value="开票金额">开票金额</Option>
-                    <Option value="回款金额">回款金额</Option>
-                  </Select>
-                </div>
-              </div>
-              <div className="text-center">新增客户排行榜</div>
-              <ProTable
-                rowKey={record => record.rank}
-                columns={columnsCustomer}
-                dataSource={state.leaderboard}
-                search={false}
-                toolBarRender={false}
-                pagination={false}
-              />
+            <div className="p-4 pt-2 bg-white border rounded-lg shadow-card">
+              <LeaderBoard dataList={state.leaderboard} />
             </div>
           </Col>
         </Row>