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

import { useModal } from '@/components/Modal'
import { useModel } from 'umi'
import { Select, Tooltip } 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'
import { SettingOutlined } from '@ant-design/icons'
import { useState } from 'react'

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()
  const [state, setState] = useState({
    staffIds: [],
    showSetting: false
  })
  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
            defaultValues={state.staffIds}
            onConfirm={({ staffIds, dataPermission }) => {
              setState({ ...state, staffIds, showSetting: true })
              onConfirm({ staffIds, dataPermission })
            }}
          />
        ),
        onCancel: () => toggleModal()
      })
      toggleModal()
      return
    }
    onConfirm({ staffIds: null, dataPermission: e })
    setAuthCache(PERMISSION_SELECT_KEY, { ...permAuthCache, [dataType]: e })
    // 将setting icon隐藏，非自定义option下不显示
    state.showSetting && setState({ ...state, showSetting: false })
  }

  return (
    <>
      <Select
        {...resetProps}
        defaultValue={defaultValue}
        dropdownMatchSelectWidth={false}
        onChange={handleOnChange}
        options={options}
      />
      {state.showSetting ? (
        <Tooltip title="自定义权限">
          {/* <Button
            type="primary"
            shape="circle"
            className="ml-3"
            icon={}
          /> */}
          <SettingOutlined className="ml-3" onClick={() => handleOnChange('custom')} />
        </Tooltip>
      ) : null}
    </>
  )
}

export default PermSelect