feat: 仪表盘增加办事处、人员选择

src/pages/Workbench/Dashboard/index.jsx

@@ -1,10 +1,12 @@
 import React, { useState, useEffect, useRef } from 'react'
 import ProTable from '@ant-design/pro-table'
-import { Row, Col, Select, Card, Skeleton } from 'antd'
+import { Row, Col, Select, Card, Skeleton, TreeSelect } from 'antd'
 import { AddressBook, City, Finance, Comment } from '@icon-park/react'
 import consts from '@/consts'
+import { connect } from 'umi'
 import { useModal } from '@/components/Modal'
 import { queryDashboard } from '@/services/dashboard'
+import { queryStaff } from '@/services/staff'
 import ReminderList from './components/ReminderList'
 import LeaderBoard from './components/LeaderBoard'
 import SoftLeaderboard from './components/SoftLeaderboard'
@@ -16,7 +18,7 @@ import { getAuthCache, getPermAuthCache, setAuthCache } from '@/utils/auth'
 import { WORKBENCH_CYCLICAL_KEY } from '@/utils/cache/cacheEnum'
 import styles from './index.less'
 
-const Dashboard = () => {
+const Dashboard = ({ dispatch, departments = [] }) => {
   const timer = useRef(null)
   const [defaultPermAuthCache, defaultStaffIds] = getPermAuthCache(PermDataTypeEunm.WORKBENCH)
 
@@ -73,6 +75,16 @@ const Dashboard = () => {
     })
     toggleModal()
   }
+  const staffList = async params => {
+    const { code = -1, data: { list = [], total = 0 } = { list: [], total: 0 } } = await queryStaff(
+      { ...params }
+    )
+    return {
+      data: list,
+      success: code === consts.RET_CODE.SUCCESS,
+      total
+    }
+  }
   const initData = async payload => {
     if (timer.current) clearTimeout(timer.current)
     setState({ ...state, disabled: true })
@@ -130,6 +142,11 @@ const Dashboard = () => {
 
   useEffect(() => {
     initData(state.params)
+    if (state.params.dataPermission === 'all') {
+      dispatch({
+        type: 'staff/fetchDepartments'
+      })
+    }
   }, [
     state.params.businessGroupId,
     state.params.dataPermission,
@@ -147,8 +164,7 @@ const Dashboard = () => {
       render: (name, record) => (
         <span
           onClick={() => handleReminderList(record.type, '7day')}
-          className="text-primary cursor-pointer hover:text-[#967bbd]"
-        >
+          className="text-primary cursor-pointer hover:text-[#967bbd]">
           {name}
         </span>
       )
@@ -159,8 +175,7 @@ const Dashboard = () => {
       render: (name, record) => (
         <span
           onClick={() => handleReminderList(record.type, '15day')}
-          className="text-primary cursor-pointer hover:text-[#967bbd]"
-        >
+          className="text-primary cursor-pointer hover:text-[#967bbd]">
           {name}
         </span>
       )
@@ -171,8 +186,7 @@ const Dashboard = () => {
       render: (name, record) => (
         <span
           onClick={() => handleReminderList(record.type, '30day')}
-          className="text-primary cursor-pointer hover:text-[#967bbd]"
-        >
+          className="text-primary cursor-pointer hover:text-[#967bbd]">
           {name}
         </span>
       )
@@ -183,8 +197,7 @@ const Dashboard = () => {
       render: (name, record) => (
         <span
           onClick={() => handleReminderList(record.type, '3month')}
-          className="text-primary cursor-pointer hover:text-[#967bbd]"
-        >
+          className="text-primary cursor-pointer hover:text-[#967bbd]">
           {name}
         </span>
       )
@@ -195,8 +208,7 @@ const Dashboard = () => {
       render: (name, record) => (
         <span
           onClick={() => handleReminderList(record.type, '6month')}
-          className="text-primary cursor-pointer hover:text-[#967bbd]"
-        >
+          className="text-primary cursor-pointer hover:text-[#967bbd]">
           {name}
         </span>
       )
@@ -207,8 +219,7 @@ const Dashboard = () => {
       render: (name, record) => (
         <span
           onClick={() => handleReminderList(record.type, 'reminder')}
-          className="text-primary cursor-pointer hover:text-[#967bbd]"
-        >
+          className="text-primary cursor-pointer hover:text-[#967bbd]">
           {name}
         </span>
       )
@@ -267,7 +278,6 @@ const Dashboard = () => {
           defaultValue={defaultCyclicalValue}
           onChange={handleCyclicalChange}
         />
-
         <span className="ml-4">
           <PermSelect
             loading={state.loading}
@@ -276,9 +286,25 @@ const Dashboard = () => {
             dataType="workbench"
           />
         </span>
-        <div>
+        {state.params.dataPermission === 'all' ? (
+          <span className="ml-4">
+            <TreeSelect
+              style={{ width: 150 }}
+              dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+              loading={state.loading}
+              disabled={state.disabled}
+              treeDefaultExpandAll
+              placeholder="办事处"
+              treeData={departments}
+              allowClear
+              onSelect={staffList}
+            />
+          </span>
+        ) : null}
+        <div className="ml-4">
           <div className="relative w-30px h-30px rounded-1/2">
             <img src="/logo.png" />
+            <span className={styles.avtraName}>欧桃珍</span>
           </div>
         </div>
       </div>
@@ -304,8 +330,7 @@ const Dashboard = () => {
                           state.clientChainRatio.percentage.startsWith('-')
                             ? 'text-green-500'
                             : 'text-red-500'
-                        ].join(' ')}
-                      >
+                        ].join(' ')}>
                         {state.clientChainRatio.percentage}
                       </span>
                     </div>
@@ -327,8 +352,7 @@ const Dashboard = () => {
               ) : (
                 <Row
                   className="cursor-pointer"
-                  onClick={() => handleRatioCard(cardTypeMap.COMPANY)}
-                >
+                  onClick={() => handleRatioCard(cardTypeMap.COMPANY)}>
                   <Col span={6}>
                     <div className="w-full max-w-48px h-48px border rounded-48px bg-[#0c7cd5] flex items-center justify-center">
                       <City size="26" fill="#fff" />
@@ -343,8 +367,7 @@ const Dashboard = () => {
                           state.customerChainRatio.percentage.startsWith('-')
                             ? 'text-green-500'
                             : 'text-red-500'
-                        ].join(' ')}
-                      >
+                        ].join(' ')}>
                         {state.customerChainRatio.percentage}
                       </span>
                     </div>
@@ -367,8 +390,7 @@ const Dashboard = () => {
               ) : (
                 <Row
                   className="cursor-pointer"
-                  onClick={() => handleRatioCard(cardTypeMap.BUSINESS)}
-                >
+                  onClick={() => handleRatioCard(cardTypeMap.BUSINESS)}>
                   <Col span={6}>
                     <div className="w-full max-w-48px h-48px border rounded-48px bg-[#0c7cd5] flex items-center justify-center">
                       <Finance size="26" fill="#fff" />
@@ -383,8 +405,7 @@ const Dashboard = () => {
                           state.businessChainRatio.percentage.startsWith('-')
                             ? 'text-green-500'
                             : 'text-red-500'
-                        ].join(' ')}
-                      >
+                        ].join(' ')}>
                         {state.businessChainRatio.percentage}
                       </span>
                     </div>
@@ -407,8 +428,7 @@ const Dashboard = () => {
               ) : (
                 <Row
                   onClick={() => handleRatioCard(cardTypeMap.SERVICE)}
-                  className="cursor-pointer"
-                >
+                  className="cursor-pointer">
                   <Col span={6}>
                     <div className="w-full max-w-48px h-48px border rounded-48px bg-[#0c7cd5] flex items-center justify-center">
                       <Comment size="26" fill="#fff" />
@@ -423,8 +443,7 @@ const Dashboard = () => {
                           state.serviceLogChainRatio.percentage.startsWith('-')
                             ? 'text-green-500'
                             : 'text-red-500'
-                        ].join(' ')}
-                      >
+                        ].join(' ')}>
                         {state.serviceLogChainRatio.percentage}
                       </span>
                     </div>
@@ -458,8 +477,7 @@ const Dashboard = () => {
               title="数据汇总"
               className="shadow-card"
               bodyStyle={{ padding: state.loading ? '24px' : 0 }}
-              loading={state.loading}
-            >
+              loading={state.loading}>
               <ul>
                 <li className="px-12px py-16px border-b-1">
                   新增客户<b className="px-1">{state.aggregation.clientCount}</b>个，服务
@@ -497,4 +515,7 @@ const Dashboard = () => {
   )
 }
 
-export default Dashboard
+// export default Dashboard
+export default connect(({ staff }) => ({
+  departments: staff.departments
+}))(Dashboard)

src/pages/Workbench/Dashboard/index.less

@@ -14,4 +14,9 @@
   &::-webkit-scrollbar {
     display: none;
   }
+  .avtraName {
+    position: absolute;
+    white-space: nowrap;
+    transform: scale(0.8) translate(-15%, -30%);
+  }
 }