feat: 数据权限使用Dropdown替代Select

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

@@ -1,12 +1,12 @@
 import { useModal } from '@/components/Modal'
 import { useModel } from 'umi'
-import { Button, Select, Tooltip } from 'antd'
+import { Button, Dropdown, Menu } 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 { DownOutlined } from '@ant-design/icons'
 import { useState } from 'react'
 
 export const PermDataTypeEunm = {
@@ -20,13 +20,9 @@ interface PermSelectProps extends SelectProps {
   onConfirm: () => void
 }
 
-const PermSelect: React.FC<PermSelectProps> = ({ dataType, onConfirm, ...resetProps }) => {
+const PermSelect: React.FC<PermSelectProps> = ({ dataType, onConfirm }) => {
   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)
@@ -35,7 +31,14 @@ const PermSelect: React.FC<PermSelectProps> = ({ dataType, onConfirm, ...resetPr
     defaultValue = permAuthCache[dataType]
   }
 
+  const [state, setState] = useState({
+    currKey: defaultValue,
+    staffIds: [],
+    showSetting: false
+  })
+
   const handleOnChange = e => {
+    setState({ ...state, currKey: e })
     if (e === 'custom') {
       setModalProps({
         width: '60vw',
@@ -56,25 +59,40 @@ const PermSelect: React.FC<PermSelectProps> = ({ dataType, onConfirm, ...resetPr
     onConfirm({ staffIds: null, dataPermission: e })
     setAuthCache(PERMISSION_SELECT_KEY, { ...permAuthCache, [dataType]: e })
     // 将setting icon隐藏，非自定义option下不显示
-    state.showSetting && setState({ ...state, showSetting: false })
+    // state.showSetting && setState({ ...state, showSetting: false })
   }
 
+  const permMenu = (
+    <Menu onClick={({ key }) => handleOnChange(key)}>
+      {options.map(item => (
+        <Menu.Item key={item.value} value={item.value}>
+          {item.label}
+        </Menu.Item>
+      ))}
+    </Menu>
+  )
   return (
     <>
-      <Select
+      <Dropdown overlay={permMenu} trigger="click">
+        <Button>
+          {options.find(item => item.value === state.currKey)?.label}
+          <DownOutlined />
+        </Button>
+      </Dropdown>
+      {/* <Select
         {...resetProps}
         defaultValue={defaultValue}
         dropdownMatchSelectWidth={false}
         onChange={handleOnChange}
         options={options}
-      />
-      {state.showSetting ? (
+      /> */}
+      {/* {state.showSetting ? (
         <Tooltip title="自定义权限">
           <Button className="ml-3">
             <SettingOutlined onClick={() => handleOnChange('custom')} />
           </Button>
         </Tooltip>
-      ) : null}
+      ) : null} */}
     </>
   )
 }