cldV2react/src/pages/Customer/Business/index.jsx

import React, { useState, useEffect, useRef } from 'react'
import { connect, useModel } from 'umi'
import { getBusinessList } from '@/services/customer'
import consts from '@/consts'
import { Select, Tooltip, Input } from 'antd'
import AddBusiness from './components/AddBusiness'
import Detail from './components/BusinessDetail'
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 { PermDataTypeEunm } from '@/pages/Customer/Company/components/PermSelect'

const Business = ({ dispatch, groupList, shouldUpdate, loading }) => {
  const [defaultPermAuthCache, defaultStaffIds] = getPermAuthCache(PermDataTypeEunm.CUSTOMER)
  const tRef = useRef(null)
  const { toggleDrawer, setDrawerProps } = useModal()
  const [state, setState] = useState({
    orderIds: [],
    params: { businessGroupId: null },
    groupParams: { staffIds: defaultStaffIds, dataPermission: defaultPermAuthCache },
    funnelData: []
  })
  const { initialState: { permData } = { permData: {} } } = useModel('@@initialState')
  const handleSearch = value => {
    setState({ ...state, params: { ...state.params, search: value } })
  }

  const initGroupList = (payload = {}) => {
    dispatch({
      type: 'business/fetchGroup',
      payload
    })
  }
  useEffect(() => {
    if (!groupList) {
      initGroupList(state.groupParams)
    }
    if (groupList) {
      const group = groupList[0]
      if (group) {
        console.log(
          group.items
            ?.filter(item => !item.endProcess)
            ?.map(item => ({ ...item, percentage: parseInt(item.percentage, 10) }))
        )
        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()
    }
  }, [loading, shouldUpdate])

  // 展示drawer
  const showDrawer = (id, isCompany = false) => {
    setDrawerProps({
      closable: true,
      onClose: () => toggleDrawer(),
      bodyStyle: {
        height: '100vh',
        overflowY: 'hidden'
      },
      children: isCompany ? (
        <CompanyDetail dataId={id} />
      ) : (
        <Detail dataId={id} orderIds={state.orderIds} group={groupList} />
      )
    })
    toggleDrawer()
  }

  const columns = [
    {
      dataIndex: 'name',
      title: '商机名称',
      width: '10%',
      render: (text, record) => (
        <span
          onClick={() => showDrawer(record.id)}
          className="text-primary cursor-pointer hover:text-[#967bbd]"
        >
          {text}
        </span>
      )
    },
    {
      dataIndex: 'customerName',
      title: '单位名称',
      width: '20%',
      render: (text, record) =>
        record.customerId && (
          <span
            onClick={() => showDrawer(record.customerId, true)}
            className="text-primary cursor-pointer hover:text-[#967bbd]"
          >
            {text}
          </span>
        )
    },
    {
      dataIndex: 'businessStatusName',
      title: '商机状态',
      width: '10%'
    },
    {
      dataIndex: 'responsible',
      width: '10%',
      title: '负责人'
    },
    {
      dataIndex: 'remark',
      title: '备注',
      width: '10%'
    },
    {
      dataIndex: 'updateTime',
      title: '最后跟进时间',
      ellipsis: true
    },
    {
      dataIndex: 'createTime',
      title: '创建时间',
      ellipsis: true
    },
    {
      dataIndex: 'staffName',
      title: '创建人',
      width: '10%'
    }
  ]
  const conifg = {
    xField: 'name',
    yField: 'count',
    shape: 'pyramid',
    conversionTag: false
  }
  const handleOnPermChange = ({ staffIds, dataPermission }) =>
    setState({ ...state, groupParams: { ...state.groupParams, staffIds, dataPermission } })
  return (
    <div className="h-full w-full flex flex-row justify-between">
      <div className="h-full w-3/20 rounded-4px shadow-card">
        <div className="p-4 border-b-1 border-solid border-black border-opacity-10 bg-[#f7f9fa] flex justify-around items-center">
          <div className="w-1/2 text-md">商机漏斗</div>
          <div className="w-1/2">
            {groupList && (
              <Select
                size="small"
                className="w-full"
                bordered={false}
                options={groupList}
                defaultValue={groupList[0]?.value}
                onChange={(id, option) => {
                  setState({
                    ...state,
                    params: { ...state.params, businessGroupId: id },
                    funnelData: option.items
                      .filter(item => !item.endProcess)
                      .map(item => ({ ...item, percentage: parseInt(item.percentage, 10) }))
                  })
                }}
              />
            )}
          </div>
        </div>
        <div className="p-4 bg-white " style={{ height: 'calc(100% - 1rem*2 - 20px)' }}>
          <div className="max-h-1/3">
            <Funnel data={state.funnelData} {...conifg} />
          </div>
        </div>
      </div>
      <div className="w-17/20">
        <div className="ml-8 bg-white shadow-card">
          <BasicTable
            actionRef={tRef}
            mainMenuType="customer"
            columnStateType="BUSINESS"
            onPermChange={handleOnPermChange}
            params={state.params}
            rowKey={record => record.id}
            columns={columns}
            request={async (params, sort, filter) => {
              if (!state.params.businessGroupId) {
                return {
                  data: [],
                  success: true,
                  total: 0
                }
              }
              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={{
              search: (
                <Tooltip placement="bottom" title="输入商机名称、单位名称">
                  <Input.Search
                    style={{ width: '300px' }}
                    allowClear={true}
                    placeholder={`在${
                      permData[PermDataTypeEunm.CUSTOMER]?.find(
                        item => item.value === defaultPermAuthCache
                      )?.label
                    }下搜索`}
                    onSearch={handleSearch}
                  />
                </Tooltip>
              ),
              actions: [
                <AddBusiness
                  key="add"
                  groupList={state.groupList}
                  reload={() => tRef.current?.reload()}
                />
              ]
            }}
          />
        </div>
      </div>
    </div>
  )
}

export default connect(({ business, refresh, loading }) => ({
  groupList: business.groupList,
  loading: loading.models.business,
  shouldUpdate: refresh.business
}))(Business)