cldV2react/src/pages/Workbench/Dashboard/components/RatioPanels.tsx

import React, { useState } from 'react'
import ProTable from '@ant-design/pro-table'
import { queryRatioPanelsList, queryServiceRatioPanelsList } from '@/services/dashboard'
import consts from '@/consts'
import { CardTypeMap } from '../util'
import { Badge, Modal } from 'antd'
import { useModal } from '@/components/ModalStore'
import { servicelogEnum } from '@/pages/Customer/Client/components/ClientDetail/LowerList'

const dataTypeMap = {
  [CardTypeMap.CLIENT]: {
    key: 'client',
    title: '新增客户'
  },
  [CardTypeMap.COMPANY]: {
    key: 'customer',
    title: '新增单位'
  },
  [CardTypeMap.BUSINESS]: {
    key: 'business',
    title: '新增商机'
  },
  [CardTypeMap.SERVICE]: {
    key: 'service',
    title: '新增服务记录'
  }
}

export const renderBadge = (count, active = false) => {
  return active ? (
    <Badge
      count={count}
      style={{
        marginTop: -2,
        marginLeft: 4,
        color: '#531dab',
        backgroundColor: '#f9f0ff'
      }}
    />
  ) : null
}

/** 服务环比数据Tab切换表格 */
const ServiceRatioPanels = ({ dispatchModal, staffIds, cyclical, dataPermission }) => {
  const activeKeyMap = {
    0: { key: 'clientName', title: '客户', id: 'clientId' },
    1: { key: 'customerName', title: '单位', id: 'customerId' },
    2: { key: 'businessName', title: '商机', id: 'businessId' }
  }
  const [state, setState] = useState({
    activeKey: '0',
    total: 0
  })
  const showDrawer = id => {
    if (state.activeKey === '0') {
      dispatchModal('D_CLIENT_DETAIL', { dataId: id })
    }
    if (state.activeKey === '1') {
      dispatchModal('D_COMPANY_DETAIL', { dataId: id })
    }
  }
  const columns = [
    {
      dataIndex: activeKeyMap[state.activeKey].key,
      title: `${activeKeyMap[state.activeKey].title}名称`,
      width: '15%',
      render: (text, record) => (
        <span
          onClick={() => showDrawer(record[activeKeyMap[state.activeKey].id])}
          className="text-primary cursor-pointer hover:text-hex-967bbd">
          {text}
        </span>
      )
    },
    {
      dataIndex: 'status',
      title: '服务类型',
      width: '8%',
      render: type => servicelogEnum[type]?.title
    },
    {
      dataIndex: 'date',
      title: '服务日期',
      width: '9%',
      valueType: 'date'
    },
    {
      dataIndex: 'mark',
      width: '38%',
      ellipsis: true,
      title: '服务内容'
    },
    {
      dataIndex: 'staffName',
      title: '创建人',
      width: '7%'
    }
  ]

  return (
    <ProTable
      size="small"
      params={{ dataType: state.activeKey, cyclical, dataPermission, staffIds }}
      rowKey={record => record.id}
      scroll={{ y: 400 }}
      bordered={true}
      cardProps={{ bodyStyle: { padding: 0 } }}
      columns={columns}
      search={false}
      toolbar={{
        settings: false,
        menu: {
          type: 'tab',
          activeKey: state.activeKey,
          items: [
            {
              key: '0',
              label: (
                <span>
                  客户
                  {renderBadge(state.total, state.activeKey === '0')}
                </span>
              )
            },
            {
              key: '1',
              label: (
                <span>
                  单位
                  {renderBadge(state.total, state.activeKey === '1')}
                </span>
              )
            },
            {
              key: '2',
              label: (
                <span>
                  商机
                  {renderBadge(state.total, state.activeKey === '2')}
                </span>
              )
            }
          ],
          onChange: key => {
            setState({ ...state, activeKey: key })
            // redoHeight()
          }
        }
      }}
      pagination={{ defaultPageSize: 10, showQuickJumper: true }}
      request={async params => {
        const { code = -1, data } = await queryServiceRatioPanelsList(params)
        setState({ ...state, total: data.total || 0 })
        return {
          data: data.log,
          success: code === consts.RET_CODE.SUCCESS,
          total: data.total
        }
      }}
    />
  )
}

const RatioPanels = ({ dataType, staffIds, retioCyclical, dataPermission, ...resetModalProps }) => {
  const dispatchModal = useModal()
  const columnsMap = {
    0: [
      {
        dataIndex: 'clientName',
        title: '客户名称',
        width: '10%',
        render: (clientName, record) => (
          <span
            onClick={() => dispatchModal('D_CLIENT_DETAIL', { dataId: record.id })}
            className="text-primary cursor-pointer hover:text-[#967bbd]">
            {clientName}
          </span>
        )
      },
      {
        dataIndex: 'companyName',
        title: '单位名称',
        width: '16%',
        ellipsis: true,
        render: (companyName, record) => (
          <span
            className="text-primary cursor-pointer hover:text-[#967bbd]"
            onClick={() => dispatchModal('D_COMPANY_DETAIL', { dataId: record.companyId })}>
            {companyName}
          </span>
        )
      },
      {
        dataIndex: 'districtName',
        title: '地区',
        width: '15%',
        ellipsis: true,
        renderText: text => text && text?.replaceAll(' / ', ' , ')
      },
      {
        dataIndex: 'phone',
        title: '手机',
        ellipsis: true,
        width: '5%'
      },
      {
        dataIndex: 'email',
        title: '邮箱',
        ellipsis: true,
        width: '7%'
      },
      {
        dataIndex: 'qq',
        title: 'QQ',
        ellipsis: true,
        width: '5%'
      },
      {
        dataIndex: 'staffName',
        title: '创建人',
        ellipsis: true,
        width: '7%'
      },
      {
        dataIndex: 'createTime',
        title: '创建时间',
        ellipsis: true,
        width: '7%'
      }
    ],
    1: [
      {
        dataIndex: 'companyName',
        title: '单位名称',
        width: '16%',
        render: (companyName, record) => (
          <span
            onClick={() => dispatchModal('D_COMPANY_DETAIL', { dataId: record.id })}
            className="text-primary cursor-pointer hover:text-[#967bbd]">
            {companyName}
          </span>
        )
      },
      {
        dataIndex: 'districtName',
        title: '地区',
        width: '15%',
        ellipsis: true,
        renderText: text => text && text?.replaceAll(' / ', ' , ')
      },
      {
        dataIndex: 'nature',
        title: '单位性质',
        ellipsis: true,
        width: '14%'
      },
      {
        dataIndex: 'phone',
        title: '单位电话',
        ellipsis: true,
        width: '5%'
      },
      {
        dataIndex: 'staffName',
        title: '创建人',
        ellipsis: true,
        width: '7%'
      },
      {
        dataIndex: 'createTime',
        title: '创建时间',
        ellipsis: true,
        width: '7%'
      }
    ],
    2: [
      {
        dataIndex: 'name',
        title: '商机名称',
        width: '15%'
      },
      {
        dataIndex: 'customerName',
        title: '单位名称',
        ellipsis: true,
        width: '20%'
      },
      {
        dataIndex: 'businessStatusName',
        title: '商机状态',
        ellipsis: true,
        width: '5%'
      },
      {
        dataIndex: 'price',
        title: '商机金额',
        ellipsis: true,
        width: '5%'
      },
      {
        dataIndex: 'staffName',
        title: '创建人',
        ellipsis: true,
        width: '7%'
      },
      {
        dataIndex: 'createTime',
        title: '创建时间',
        ellipsis: true,
        width: '7%'
      }
    ]
  }

  return (
    <Modal
      {...resetModalProps}
      title={`卡片详情(${dataTypeMap[dataType].title})`}
      footer={false}
      getContainer={() => document.getElementById('root')}
      width="90vw">
      {dataType === CardTypeMap.SERVICE ? (
        <ServiceRatioPanels
          dispatchModal={dispatchModal}
          cyclical={retioCyclical}
          dataPermission={dataPermission}
          staffIds={staffIds}
        />
      ) : (
        <div className="mx-4">
          <ProTable
            size="small"
            bordered={true}
            cardProps={{ bodyStyle: { padding: 0 } }}
            pagination={{ defaultPageSize: 10 }}
            rowKey={record => record.id}
            scroll={{ y: 400 }}
            columns={columnsMap[dataType]}
            params={{ dataType, dataPermission, cyclical: retioCyclical, staffIds }}
            request={async params => {
              const { code = -1, data } = await queryRatioPanelsList(params)
              return {
                data: data[dataTypeMap[dataType].key],
                success: code === consts.RET_CODE.SUCCESS,
                total: data.total
              }
            }}
            search={false}
            toolBarRender={false}
          />
        </div>
      )}
    </Modal>
  )
}

export default RatioPanels