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

import React, { useState, useEffect, useRef, useMemo } from 'react'
import { connect, useAccess, useModel } from 'umi'
import { getBusinessList } from '@/services/customer'
import consts from '@/consts'
import { Select, Tooltip, Input, Button } from 'antd'
import { Funnel } from '@ant-design/charts'
import BasicTable from '@/components/Table'
import { getAuthCache, getPermAuthCache, setAuthCache } from '@/utils/auth'
import { PermDataTypeEunm } from '@/pages/Customer/Company/components/PermSelect'
import { BUSINESS_GROUP_KEY } from '@/utils/cache/cacheEnum'
import { Plus } from '@icon-park/react'
import { useModal } from '@/components/ModalStore'

const Business = ({ dispatch, groupList, shouldUpdate, loading, refreshGroupList }) => {
  const [defaultPermAuthCache, defaultStaffIds] = getPermAuthCache(PermDataTypeEunm.CUSTOMER)
  const hasAddPerm = useAccess()?.validatePermByType('business_add')
  const dispatchModal = useModal()
  const tRef = useRef(null)
  const defaultGroupId = getAuthCache(BUSINESS_GROUP_KEY) || null
  const [state, setState] = useState({
    orderIds: [],
    params: { businessGroupId: defaultGroupId },
    groupParams: { staffIds: defaultStaffIds, dataPermission: defaultPermAuthCache }
  })

  const funnelData = useMemo(() => {
    if (!groupList?.length) return null
    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 => {
    tRef.current?.reloadAndRest()
    setState({ ...state, params: { ...state.params, search: value } })
  }

  const initGroupList = (payload = {}) => {
    dispatch({
      type: 'business/fetchGroup',
      payload
    })
  }
  useEffect(() => {
    if (!groupList) {
      initGroupList(state.groupParams)
    }
    if (refreshGroupList) {
      initGroupList()
      dispatch({
        type: 'business/toggleRefreshGroupStatus'
      })
    }
  }, [refreshGroupList])
  useEffect(() => {
    if (shouldUpdate) {
      tRef.current.reload()
    }
  }, [loading, shouldUpdate])

  const columns = [
    {
      dataIndex: 'name',
      title: '商机名称',
      width: '10%',
      render: (text, record) => (
        <span
          onClick={() =>
            dispatchModal('D_BUSINESS_DETAIL', {
              dataId: record.id,
              orderIds: state.orderIds,
              group: groupList
            })
          }
          className="text-primary cursor-pointer hover:text-hex-967bbd"
        >
          {text}
        </span>
      )
    },
    {
      dataIndex: 'customerName',
      title: '单位名称',
      width: '20%',
      render: (text, record) =>
        record.customerId && (
          <span
            onClick={() => dispatchModal('D_COMPANY_DETAIL', { dataId: record.customerId })}
            className="text-primary cursor-pointer hover:text-hex-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,
    dynamicHeight: true
  }
  const handleOnPermChange = ({ staffIds, dataPermission }) => {
    setState({ ...state, groupParams: { ...state.groupParams, staffIds, dataPermission } })
    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-1/5 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?.length ? (
              <Select
                placeholder="请选择商机组"
                size="small"
                className="w-full"
                bordered={false}
                options={groupList}
                defaultValue={defaultGroupId}
                onChange={handleBussinessChange}
              />
            ) : null}
          </div>
        </div>
        <div className="p-4 bg-white " style={{ height: 'calc(100% - 1rem*2 - 25px)' }}>
          <div className="max-h-1/3">
            {funnelData?.length ? <Funnel data={funnelData} {...conifg} /> : null}
          </div>
        </div>
      </div>
      <div className="w-4/5">
        <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: [
                <Button
                  type="primary"
                  key="add_business"
                  className="flex items-center"
                  disabled={!hasAddPerm}
                  onClick={() =>
                    dispatchModal('M_BUSINESS_ADD', {
                      groupList: state.groupList,
                      reload: () => tRef.current?.reload()
                    })
                  }
                >
                  <Plus className="mr-1" />
                  商机
                </Button>
              ]
            }}
          />
        </div>
      </div>
    </div>
  )
}

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