cldV2react/src/pages/Customer/Company/components/PermSelect.tsx

import { useModal } from '@/components/Modal'
import { useModel } from 'umi'
import { Select } from 'antd'
import CustomPerm from './CustomPerm'
import { getAuthCache, setAuthCache } from '@/utils/auth'
import { PERMISSION_SELECT_KEY } from '@/utils/cache/cacheEnum'
import type { SelectProps } from 'antd'
import type { MainMenuKeyEnum } from '@/utils/cache/cacheEnum'

export const PermDataTypeEunm = {
  CUSTOMER: 'customer',
  PRODUCT: 'product',
  HR: 'hr',
  WORKBENCH: 'workbench'
}
interface PermSelectProps extends SelectProps {
  dataType: MainMenuKeyEnum
  onConfirm: () => void
}

const PermSelect: React.FC<PermSelectProps> = ({ dataType, onConfirm, ...resetProps }) => {
  const { initialState: { permData } = { permData: {} } } = useModel('@@initialState')
  const { toggleModal, setModalProps } = useModal()
  let defaultValue = 'oneself'
  const options = [...(permData[dataType] || [])]
  const permAuthCache = getAuthCache(PERMISSION_SELECT_KEY)

  if (permAuthCache && permAuthCache[dataType]) {
    defaultValue = permAuthCache[dataType]
  }

  const handleOnChange = e => {
    if (e === 'custom') {
      setModalProps({
        width: '60vw',
        modalRender: () => <CustomPerm onConfirm={onConfirm} />,
        onCancel: toggleModal
      })
      toggleModal()
      return
    }
    onConfirm({ staffIds: null, dataPermission: e })
    setAuthCache(PERMISSION_SELECT_KEY, { ...permAuthCache, [dataType]: e })
  }
  return (
    <Select
      {...resetProps}
      defaultValue={defaultValue}
      dropdownMatchSelectWidth={false}
      onChange={handleOnChange}
      options={options}
    />
  )
}

export default PermSelect