feat: 仪表盘bug修复

config/routes.js

@@ -27,7 +27,8 @@ export default [
         path: '/workbench/dashboard',
         name: 'dashboard',
         icon: 'icon-tachometer-alt',
-        component: './Workbench/Dashboard'
+        component: './Workbench/Dashboard',
+        access: 'authPermDataFilter'
       }
     ]
   },
@@ -45,21 +46,24 @@ export default [
         name: 'company',
         icon: 'icon-building',
         component: './Customer/Company',
-        access: 'authRouteFilter'
+        access: 'authRouteFilter',
+        validatePerm: true
       },
       {
         path: '/customer/client',
         name: 'client',
         icon: 'icon-address-book',
         component: './Customer/Client',
-        access: 'authRouteFilter'
+        access: 'authRouteFilter',
+        validatePerm: true
       },
       {
         path: '/customer/business',
         name: 'business',
         icon: 'icon-usd-circle',
         component: './Customer/Business',
-        access: 'authRouteFilter'
+        access: 'authRouteFilter',
+        validatePerm: true
       }
       // {
       //   path: '/customer/test',
@@ -91,6 +95,8 @@ export default [
             path: '/product/lock/lockstore',
             name: 'lockstore',
             component: './Product/Lock/LockStore'
+            // access: 'authRouteFilter',
+            // validatePerm: true
           }
           // {
           //   path: '/product/lock/lockcount',

src/access.ts

@@ -1,16 +1,31 @@
 // eslint-disable-next-line func-names
 export default function (initialState) {
-  const { roles = [], currentUser = {} } = initialState || {}
+  const { roles = [], currentUser = {}, permData = {} } = initialState || {}
   const authRouteFilter = route => {
     if (currentUser.isAdmin) {
       return true
     }
     if (roles.filter(r => r.endsWith('_access')).includes(`${route.name}_access`)) {
+      if (route.validatePerm) {
+        return authPermDataFilter(route)
+      }
+      return true
+    }
+    return false
+  }
+
+  const authPermDataFilter = route => {
+    if (currentUser.isAdmin) {
+      return true
+    }
+    const name = route.path?.match(/\/(\w*)\//)[1]
+    if (name && permData[name] && permData[name]?.length) {
       return true
     }
     return false
   }
   return {
-    authRouteFilter
+    authRouteFilter,
+    authPermDataFilter
   }
 }

src/app.tsx

@@ -1,7 +1,6 @@
 import { queryCurrentUser, queryPermData } from './services/user'
 import { history } from 'umi'
 import RightContent from '@/components/RightContent'
-import { PERMISSION_NEED_PATH } from './utils/consts/customer'
 import { message } from 'antd'
 import logo from '../public/logo.svg'
 import BasicModal, { BasicDrawer } from '@/components/Modal'
@@ -32,10 +31,12 @@ export async function getInitialState() {
   // 如果是登录页面，不执行
   if (history.location.pathname !== loginPath) {
     const currentUser = (await fetchUserInfo()) || {}
+    const permData = (await fetchPermData()) || {}
 
     return {
       fetchUserInfo,
       fetchPermData,
+      permData,
       ...currentUser,
       settings: {}
     }
@@ -47,7 +48,7 @@ export async function getInitialState() {
   }
 }
 
-export const layout = ({ initialState, setInitialState }) => {
+export const layout = ({ initialState }) => {
   return {
     logo,
     rightContentRender: () => <RightContent />,
@@ -58,15 +59,18 @@ export const layout = ({ initialState, setInitialState }) => {
     onPageChange: async () => {
       const { location } = history
       // 如果没有登录，重定向到 login
-      if (
-        initialState?.currentUser?.staffId &&
-        location.pathname !== loginPath &&
-        PERMISSION_NEED_PATH.includes(location.pathname) &&
-        !initialState?.permData
-      ) {
-        const permData = await initialState.fetchPermData()
-        permData && setInitialState({ ...initialState, permData })
+      if (!initialState?.currentUser?.staffId && location.pathname !== loginPath) {
+        history.replcae('/user/login')
       }
+      // if (
+      //   initialState?.currentUser?.staffId &&
+      //   location.pathname !== loginPath &&
+      //   PERMISSION_NEED_PATH.includes(location.pathname) &&
+      //   !initialState?.permData
+      // ) {
+      //   const permData = await initialState.fetchPermData()
+      //   permData && setInitialState({ ...initialState, permData })
+      // }
     },
     childrenRender: children => (
       <>

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

@@ -0,0 +1,87 @@
+import { DualAxes } from '@ant-design/charts'
+import { Card, Select } from 'antd'
+import { connect } from 'umi'
+import React, { useEffect } from 'react'
+
+const BusinessChar = props => {
+  const { dispatch, groupList, loading, data, changeGroupId } = props
+  useEffect(() => {
+    if (!groupList) {
+      dispatch({
+        type: 'business/fetchGroup'
+      })
+    }
+  }, [groupList])
+  const { char, thread } = data
+  const config = {
+    data: [char, thread],
+    legend: { position: 'top' },
+    height: 230,
+    xField: 'time',
+    yField: ['value', 'increment'],
+    yAxis: {
+      value: {
+        label: {
+          formatter: text => `${text}个`
+        }
+      },
+      increment: {
+        label: {
+          formatter: text => `${text}%`
+        }
+      }
+    },
+    meta: {
+      increment: {
+        alias: '增幅'
+      }
+    },
+    geometryOptions: [
+      {
+        geometry: 'column',
+        isGroup: true,
+        seriesField: 'type',
+        color: ['#A088C4', '#605B67']
+      },
+      {
+        geometry: 'line',
+        lineStyle: { lineWidth: 2 },
+        smooth: true,
+        color: '#FEB51A',
+        point: {
+          size: 3,
+          style: {
+            fill: 'white',
+            stroke: '#5B8FF9',
+            lineWidth: 2
+          }
+        }
+      }
+    ]
+  }
+  return (
+    <Card
+      loading={loading}
+      bodyStyle={{ minHeight: '230px' }}
+      title={
+        <div className="relative">
+          <span>销售漏斗</span>
+          <div className="absolute right-1 top-0">
+            {groupList?.length ? (
+              <Select
+                defaultValue={groupList[0]?.value}
+                options={groupList}
+                onChange={e => changeGroupId(e)}
+              />
+            ) : null}
+          </div>
+        </div>
+      }>
+      {char && thread && <DualAxes {...config} />}
+    </Card>
+  )
+}
+
+export default connect(({ business }) => ({
+  groupList: business.groupList
+}))(BusinessChar)

src/pages/workbench/Dashboard/index.jsx

@@ -1,17 +1,17 @@
 import React, { useState, useEffect, useRef } from 'react'
 import ProTable from '@ant-design/pro-table'
-import { connect, useModel } from 'umi'
+import { useModel } from 'umi'
 import { Row, Col, Select, Card, Skeleton } from 'antd'
 import { AddressBook, City, Finance, Comment } from '@icon-park/react'
-import { DualAxes } from '@ant-design/charts'
 import consts from '@/consts'
 import { useModal } from '@/components/Modal'
 import { queryDashboard } from '@/services/dashboard'
 import ReminderList from './components/ReminderList'
 import LeaderBoard from './components/LeaderBoard'
 import { cyclicalOp } from './consts'
+import BusinessChar from './components/BusinessChar'
 
-const Dashboard = ({ dispatch, groupList = [] }) => {
+const Dashboard = () => {
   const timer = useRef(null)
   const { initialState: { permData } = { permData: {} } } = useModel('@@initialState')
   const [state, setState] = useState({
@@ -86,16 +86,7 @@ const Dashboard = ({ dispatch, groupList = [] }) => {
       }
     }
   }
-  useEffect(() => {
-    if (!groupList) {
-      dispatch({
-        type: 'business/fetchGroup'
-      })
-    }
-    if (groupList?.length) {
-      setState({ ...state, params: { ...state.params, businessGroupId: groupList[0]?.value } })
-    }
-  }, [groupList])
+
   useEffect(() => {
     initData(state.params)
   }, [state.params.businessGroupId, state.params.dataPermission, state.params.cyclical])
@@ -172,53 +163,9 @@ const Dashboard = ({ dispatch, groupList = [] }) => {
     }
   ]
 
-  const { char, thread } = state.businessChar
-  const config = {
-    data: [char, thread],
-    legend: { position: 'top' },
-    height: 230,
-    xField: 'time',
-    yField: ['value', 'increment'],
-    yAxis: {
-      value: {
-        label: {
-          formatter: text => `${text}个`
-        }
-      },
-      increment: {
-        label: {
-          formatter: text => `${text}%`
-        }
-      }
-    },
-    meta: {
-      increment: {
-        alias: '增幅'
-      }
-    },
-    geometryOptions: [
-      {
-        geometry: 'column',
-        isGroup: true,
-        seriesField: 'type',
-        color: ['#A088C4', '#605B67']
-      },
-      {
-        geometry: 'line',
-        lineStyle: { lineWidth: 2 },
-        smooth: true,
-        color: '#FEB51A',
-        point: {
-          size: 3,
-          style: {
-            fill: 'white',
-            stroke: '#5B8FF9',
-            lineWidth: 2
-          }
-        }
-      }
-    ]
-  }
+  const handleChangeGroupId = e =>
+    setState({ ...state, immediate: true, params: { ...state.params, businessGroupId: e } })
+
   return (
     <div>
       <div className="shadow-card">
@@ -410,27 +357,11 @@ const Dashboard = ({ dispatch, groupList = [] }) => {
       <div className="mt-4">
         <Row gutter={16}>
           <Col className="gutter-row" span={16}>
-            <Card
+            <BusinessChar
               loading={state.loading}
-              bodyStyle={{ minHeight: '230px' }}
-              title={
-                <div className="relative">
-                  <span>销售漏斗</span>
-                  <div className="absolute right-1 top-0">
-                    {groupList ? (
-                      <Select
-                        defaultValue={groupList[0]?.value}
-                        options={groupList}
-                        onChange={e =>
-                          setState({ ...state, params: { ...state.params, businessGroupId: e } })
-                        }
-                      />
-                    ) : null}
-                  </div>
-                </div>
-              }>
-              {char && thread && <DualAxes {...config} />}
-            </Card>
+              data={state.businessChar}
+              changeGroupId={handleChangeGroupId}
+            />
           </Col>
 
           <Col className="gutter-row" span={8}>
@@ -470,6 +401,4 @@ const Dashboard = ({ dispatch, groupList = [] }) => {
   )
 }
 
-export default connect(({ business }) => ({
-  groupList: business.groupList
-}))(Dashboard)
+export default Dashboard