部门选择

web/app/components/header/account-setting/dept-page/detail-modal/index.tsx

@@ -1,13 +1,14 @@
 'use client'
-import { useCallback, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { RiCloseLine } from '@remixicon/react'
 import s from './index.module.css'
 import cn from '@/utils/classnames'
 import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
-import { addKnowledge, editKnowledge } from '@/service/common'
+import { addKnowledge, editKnowledge, fetchDepts } from '@/service/common'
 import 'react-multi-email/dist/style.css'
 import Input from '@/app/components/base/input'
+import { TreeSelect as AntdTreeSelect } from 'antd'
 
 const InviteModal = ({
   transfer,
@@ -15,6 +16,18 @@ const InviteModal = ({
   onSend,
 }: any) => {
   const [name, setName] = useState<string>(transfer.row?.name || '')
+  const [options, setOptions] = useState<any>([])
+  useEffect(() => {
+    fetchDepts({
+      url: '/xxx',
+      params: {
+        page: 1,
+        limit: 1000,
+      },
+    }).then((res: any) => {
+      setOptions(res.data || [])
+    })
+  }, [])
   const handleSave = useCallback(async () => {
     try {
       let res: any = () => {}
@@ -51,11 +64,17 @@ const InviteModal = ({
             <div className='shrink-0 py-2 text-sm font-medium leading-[20px] text-text-primary'>
               上级部门
             </div>
-            <Input
+            <AntdTreeSelect
+              showSearch
+              style={{ width: '100%' }}
               value={name}
-              onChange={e => setName(e.target.value)}
-              className='h-9'
-              placeholder='请输入部门名称'
+              dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+              placeholder="请选择上级部门"
+              allowClear
+              treeDefaultExpandAll
+              onChange={v => setName(v || '')}
+              treeData={options}
+              fieldNames={{ label: 'name', value: 'id' }}
             />
           </div>
           <div className={cn('flex flex-wrap items-center justify-between')}>