feat: 完善商机数据权限与商机组的联动交互

src/components/EditableForm/src/editableForm.jsx

@@ -4,8 +4,6 @@ import EditableFormItem from './editableFormItem'
 import { isNullOrUnDef } from '@/utils/is'
 
 const EditableForm = ({ dataSource, columns, type, tartgetUrl, editable }) => {
-  console.log('editable', editable)
-  // console.log(store)
   const newColumns = columns.map(item => {
     const newItem = { ...item }
 

src/pages/Customer/Business/index.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react'
+import React, { useState, useEffect, useRef, useMemo } from 'react'
 import { connect, useModel } from 'umi'
 import { getBusinessList } from '@/services/customer'
 import consts from '@/consts'
@@ -9,19 +9,39 @@ import { useModal } from '@/components/Modal'
 import CompanyDetail from '../Company/components/CompanyDetail'
 import { Funnel } from '@ant-design/charts'
 import BasicTable from '@/components/Table'
-import { getPermAuthCache } from '@/utils/auth'
+import { getAuthCache, getPermAuthCache, setAuthCache } from '@/utils/auth'
 import { PermDataTypeEunm } from '@/pages/Customer/Company/components/PermSelect'
+import { BUSINESS_GROUP_KEY } from '@/utils/cache/cacheEnum'
 
 const Business = ({ dispatch, groupList, shouldUpdate, loading }) => {
   const [defaultPermAuthCache, defaultStaffIds] = getPermAuthCache(PermDataTypeEunm.CUSTOMER)
   const tRef = useRef(null)
   const { toggleDrawer, setDrawerProps } = useModal()
+  const defaultGroupId = getAuthCache(BUSINESS_GROUP_KEY) || null
   const [state, setState] = useState({
     orderIds: [],
-    params: { businessGroupId: null },
-    groupParams: { staffIds: defaultStaffIds, dataPermission: defaultPermAuthCache },
-    funnelData: []
+    params: { businessGroupId: defaultGroupId },
+    groupParams: { staffIds: defaultStaffIds, dataPermission: defaultPermAuthCache }
+    // funnelData: groupList
+    //   ?.find(item => item.value === defaultGroupId)
+    //   ?.items?.filter(item => !item.endProcess)
+    //   ?.map(item => ({ ...item, percentage: parseInt(item.percentage, 10) }))
   })
+
+  const funnelData = useMemo(() => {
+    if (!groupList) return null
+    console.log('111', state.params.businessGroupId)
+    return groupList
+      .find(item => item.value === state.params.businessGroupId)
+      ?.items?.filter(item => !item.endProcess)
+      ?.map(item => ({ ...item, percentage: parseInt(item.percentage, 10) }))
+  }, [
+    groupList,
+    state.params.businessGroupId,
+    state.groupParams.dataPermission,
+    state.groupParams.staffIds
+  ])
+
   const { initialState: { permData } = { permData: {} } } = useModel('@@initialState')
   const handleSearch = value => {
     setState({ ...state, params: { ...state.params, search: value } })
@@ -37,19 +57,7 @@ const Business = ({ dispatch, groupList, shouldUpdate, loading }) => {
     if (!groupList) {
       initGroupList(state.groupParams)
     }
-    if (groupList) {
-      const group = groupList[0]
-      if (group) {
-        setState({
-          ...state,
-          params: { ...state.params, businessGroupId: group.value },
-          funnelData: group.items
-            ?.filter(item => !item.endProcess)
-            ?.map(item => ({ ...item, percentage: parseInt(item.percentage, 10) }))
-        })
-      }
-    }
-  }, [groupList, state.groupParams])
+  }, [])
   useEffect(() => {
     if (shouldUpdate) {
       tRef.current.reload()
@@ -145,6 +153,13 @@ const Business = ({ dispatch, groupList, shouldUpdate, loading }) => {
     initGroupList({ staffIds, dataPermission })
   }
 
+  const handleBussinessChange = id => {
+    setAuthCache(BUSINESS_GROUP_KEY, id)
+    setState({
+      ...state,
+      params: { ...state.params, businessGroupId: id }
+    })
+  }
   return (
     <div className="h-full w-full flex flex-row justify-between">
       <div className="h-full w-3/20 rounded-4px shadow-card">
@@ -153,28 +168,19 @@ const Business = ({ dispatch, groupList, shouldUpdate, loading }) => {
           <div className="w-1/2">
             {groupList && (
               <Select
+                placeholder="请选择商机组"
                 size="small"
                 className="w-full"
                 bordered={false}
                 options={groupList}
-                defaultValue={groupList[0]?.value}
-                onChange={async (id, option) => {
-                  setState({
-                    ...state,
-                    params: { ...state.params, businessGroupId: id },
-                    funnelData: option.items
-                      .filter(item => !item.endProcess)
-                      .map(item => ({ ...item, percentage: parseInt(item.percentage, 10) }))
-                  })
-                }}
+                defaultValue={defaultGroupId}
+                onChange={handleBussinessChange}
               />
             )}
           </div>
         </div>
         <div className="p-4 bg-white " style={{ height: 'calc(100% - 1rem*2 - 20px)' }}>
-          <div className="max-h-1/3">
-            {state.funnelData?.length && <Funnel data={state.funnelData} {...conifg} />}
-          </div>
+          <div className="max-h-1/3">{funnelData && <Funnel data={funnelData} {...conifg} />}</div>
         </div>
       </div>
       <div className="w-17/20">

src/utils/cache/cacheEnum.ts

@@ -20,6 +20,9 @@ export const TABLE_COLUMNS_MAP = 'TABLE_COLUMNS_MAP'
 // workbench cyclical key
 export const WORKBENCH_CYCLICAL_KEY = 'WORKBENCH_CYCLICAL_KEY'
 
+// default businessId seleted
+export const BUSINESS_GROUP_KEY = 'BUSINESS_GROUP_KEY'
+
 // permission select component defualtValue key
 export enum MainMenuKeyEnum {
   /** @name 客户 */

src/utils/cache/persistent.ts

@@ -11,7 +11,8 @@ import {
   PERMISSION_SELECT_KEY,
   MAIN_MENU_KEY,
   TABLE_COLUMNS_MAP,
-  WORKBENCH_CYCLICAL_KEY
+  WORKBENCH_CYCLICAL_KEY,
+  BUSINESS_GROUP_KEY
 } from './cacheEnum'
 import { DEFAULT_CACHE_TIME } from '@/settings/encryptionSetting'
 import { pick, omit } from 'lodash-es'
@@ -22,6 +23,7 @@ interface BasicStore {
   [PERMISSION_SELECT_KEY]: { [key in MAIN_MENU_KEY]: string | string[] } | null | underfined
   [TABLE_COLUMNS_MAP]: { [key in MAIN_MENU_KEY]: Record<string, ColumnsState> } | null | underfined
   [WORKBENCH_CYCLICAL_KEY]: string
+  [BUSINESS_GROUP_KEY]: string
 }
 
 type LocalStore = BasicStore