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