|
@@ -11,12 +11,13 @@ import { useTableScroll } from '@/hooks/useAutoTable'
|
|
|
import CompanyDetail from '../Company/components/CompanyDetail'
|
|
import CompanyDetail from '../Company/components/CompanyDetail'
|
|
|
import { Funnel } from '@ant-design/charts'
|
|
import { Funnel } from '@ant-design/charts'
|
|
|
|
|
|
|
|
-const Business = ({ dispatch, groupList, shouldUpdate }) => {
|
|
|
|
|
|
|
+const Business = ({ dispatch, groupList, shouldUpdate, loading }) => {
|
|
|
const tRef = useRef(null)
|
|
const tRef = useRef(null)
|
|
|
const { toggleDrawer, setDrawerProps } = useModal()
|
|
const { toggleDrawer, setDrawerProps } = useModal()
|
|
|
const [state, setState] = useState({
|
|
const [state, setState] = useState({
|
|
|
orderIds: [],
|
|
orderIds: [],
|
|
|
- funnelData: groupList[0]?.items || []
|
|
|
|
|
|
|
+ businessGroupId: null,
|
|
|
|
|
+ funnelData: []
|
|
|
})
|
|
})
|
|
|
useEffect(() => {
|
|
useEffect(() => {
|
|
|
if (!groupList.length) {
|
|
if (!groupList.length) {
|
|
@@ -31,7 +32,17 @@ const Business = ({ dispatch, groupList, shouldUpdate }) => {
|
|
|
payload: 'business '
|
|
payload: 'business '
|
|
|
})
|
|
})
|
|
|
}
|
|
}
|
|
|
- }, [shouldUpdate])
|
|
|
|
|
|
|
+ if (groupList.length) {
|
|
|
|
|
+ const group = groupList[0]
|
|
|
|
|
+ setState({
|
|
|
|
|
+ ...state,
|
|
|
|
|
+ businessGroupId: group.value,
|
|
|
|
|
+ funnelData: group.items
|
|
|
|
|
+ ?.filter(item => !item.endProcess)
|
|
|
|
|
+ ?.map(item => ({ ...item, percentage: parseInt(item.percentage, 10) }))
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
+ }, [loading, shouldUpdate])
|
|
|
|
|
|
|
|
// 展示drawer
|
|
// 展示drawer
|
|
|
const showDrawer = (id, isCompany = false) => {
|
|
const showDrawer = (id, isCompany = false) => {
|
|
@@ -93,7 +104,8 @@ const Business = ({ dispatch, groupList, shouldUpdate }) => {
|
|
|
},
|
|
},
|
|
|
{
|
|
{
|
|
|
dataIndex: 'remark',
|
|
dataIndex: 'remark',
|
|
|
- title: '备注'
|
|
|
|
|
|
|
+ title: '备注',
|
|
|
|
|
+ width: '5%'
|
|
|
},
|
|
},
|
|
|
{
|
|
{
|
|
|
dataIndex: 'updateTime',
|
|
dataIndex: 'updateTime',
|
|
@@ -110,7 +122,7 @@ const Business = ({ dispatch, groupList, shouldUpdate }) => {
|
|
|
]
|
|
]
|
|
|
const conifg = {
|
|
const conifg = {
|
|
|
xField: 'name',
|
|
xField: 'name',
|
|
|
- yField: 'percentage',
|
|
|
|
|
|
|
+ yField: 'count',
|
|
|
legend: false,
|
|
legend: false,
|
|
|
shape: 'pyramid'
|
|
shape: 'pyramid'
|
|
|
}
|
|
}
|
|
@@ -128,9 +140,10 @@ const Business = ({ dispatch, groupList, shouldUpdate }) => {
|
|
|
bordered={false}
|
|
bordered={false}
|
|
|
options={groupList}
|
|
options={groupList}
|
|
|
defaultValue={groupList[0]?.value}
|
|
defaultValue={groupList[0]?.value}
|
|
|
- onChange={(_, option) => {
|
|
|
|
|
|
|
+ onChange={(id, option) => {
|
|
|
setState({
|
|
setState({
|
|
|
...state,
|
|
...state,
|
|
|
|
|
+ businessGroupId: id,
|
|
|
funnelData: option.items
|
|
funnelData: option.items
|
|
|
.filter(item => !item.endProcess)
|
|
.filter(item => !item.endProcess)
|
|
|
.map(item => ({ ...item, percentage: parseInt(item.percentage, 10) }))
|
|
.map(item => ({ ...item, percentage: parseInt(item.percentage, 10) }))
|
|
@@ -148,45 +161,50 @@ const Business = ({ dispatch, groupList, shouldUpdate }) => {
|
|
|
</div>
|
|
</div>
|
|
|
<div className="w-17/20">
|
|
<div className="w-17/20">
|
|
|
<div className="ml-8 bg-white shadow-card">
|
|
<div className="ml-8 bg-white shadow-card">
|
|
|
- <ProTable
|
|
|
|
|
- bordered
|
|
|
|
|
- actionRef={tRef}
|
|
|
|
|
- rowKey={record => record.id}
|
|
|
|
|
- columns={columns}
|
|
|
|
|
- onLoadingChange={loadingStatus => {
|
|
|
|
|
- loadingStatus && redoHeight()
|
|
|
|
|
- }}
|
|
|
|
|
- scroll={getScrollRef}
|
|
|
|
|
- request={async (params, sort, filter) => {
|
|
|
|
|
- const {
|
|
|
|
|
- code = -1,
|
|
|
|
|
- data: { business = [], total = 0 }
|
|
|
|
|
- } = await getBusinessList({ ...params, ...sort, ...filter })
|
|
|
|
|
- setState({ ...state, orderIds: business.map(item => item.id) })
|
|
|
|
|
- return {
|
|
|
|
|
- data: business,
|
|
|
|
|
- success: code === consts.RET_CODE.SUCCESS,
|
|
|
|
|
- total
|
|
|
|
|
- }
|
|
|
|
|
- }}
|
|
|
|
|
- search={false}
|
|
|
|
|
- toolbar={{
|
|
|
|
|
- actions: [
|
|
|
|
|
- <AddBusiness
|
|
|
|
|
- key="add"
|
|
|
|
|
- groupList={state.groupList}
|
|
|
|
|
- reload={() => tRef.current?.reload()}
|
|
|
|
|
- />
|
|
|
|
|
- ]
|
|
|
|
|
- }}
|
|
|
|
|
- />
|
|
|
|
|
|
|
+ {state.businessGroupId ? (
|
|
|
|
|
+ <ProTable
|
|
|
|
|
+ bordered
|
|
|
|
|
+ actionRef={tRef}
|
|
|
|
|
+ params={{ businessGroupId: state.businessGroupId }}
|
|
|
|
|
+ rowKey={record => record.id}
|
|
|
|
|
+ columns={columns}
|
|
|
|
|
+ onLoadingChange={loadingStatus => {
|
|
|
|
|
+ loadingStatus && redoHeight()
|
|
|
|
|
+ }}
|
|
|
|
|
+ scroll={getScrollRef}
|
|
|
|
|
+ request={async (params, sort, filter) => {
|
|
|
|
|
+ console.log('params', params)
|
|
|
|
|
+ const {
|
|
|
|
|
+ code = -1,
|
|
|
|
|
+ data: { business = [], total = 0 }
|
|
|
|
|
+ } = await getBusinessList({ ...params, ...sort, ...filter })
|
|
|
|
|
+ setState({ ...state, orderIds: business.map(item => item.id) })
|
|
|
|
|
+ return {
|
|
|
|
|
+ data: business,
|
|
|
|
|
+ success: code === consts.RET_CODE.SUCCESS,
|
|
|
|
|
+ total
|
|
|
|
|
+ }
|
|
|
|
|
+ }}
|
|
|
|
|
+ search={false}
|
|
|
|
|
+ toolbar={{
|
|
|
|
|
+ actions: [
|
|
|
|
|
+ <AddBusiness
|
|
|
|
|
+ key="add"
|
|
|
|
|
+ groupList={state.groupList}
|
|
|
|
|
+ reload={() => tRef.current?.reload()}
|
|
|
|
|
+ />
|
|
|
|
|
+ ]
|
|
|
|
|
+ }}
|
|
|
|
|
+ />
|
|
|
|
|
+ ) : null}
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
)
|
|
)
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-export default connect(({ business, refresh }) => ({
|
|
|
|
|
|
|
+export default connect(({ business, refresh, loading }) => ({
|
|
|
groupList: business.groupList,
|
|
groupList: business.groupList,
|
|
|
|
|
+ loading: loading.models.business,
|
|
|
shouldUpdate: refresh.business
|
|
shouldUpdate: refresh.business
|
|
|
}))(Business)
|
|
}))(Business)
|