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

'use client'
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, 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,
  onCancel,
  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 = () => {}
      if (transfer.mode === 'add') {
        res = await addKnowledge({
          url: '/123',
          body: { name, status: false },
        })
      }
      else {
        res = await editKnowledge({
          url: `/123/${transfer.row.id}`,
          body: { name },
        })
      }
      const { id }: any = res
      if (id) {
        onCancel()
        onSend()
      }
    }
    catch (e) { }
  }, [name, onCancel, onSend, transfer])

  return (
    <div className={cn(s.wrap)}>
      <Modal overflowVisible isShow onClose={() => { }} className={cn(s.modal)}>
        <div className='mb-2 flex justify-between'>
          <div className='text-xl font-semibold text-text-primary'>{transfer.mode === 'add' ? '新增' : '编辑'}部门</div>
          <RiCloseLine className='h-4 w-4 cursor-pointer text-text-tertiary' onClick={onCancel} />
        </div>
        <div>
          <div className={cn('flex flex-wrap items-center justify-between')}>
            <div className='shrink-0 py-2 text-sm font-medium leading-[20px] text-text-primary'>
              上级部门
            </div>
            <AntdTreeSelect
              showSearch
              style={{ width: '100%' }}
              value={name}
              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')}>
            <div className='shrink-0 py-2 text-sm font-medium leading-[20px] text-text-primary'>
              部门名称
            </div>
            <Input
              value={name}
              onChange={e => setName(e.target.value)}
              className='h-9'
              placeholder='请输入部门名称'
            />
          </div>
          <Button
            tabIndex={0}
            className='mt-4 w-full'
            onClick={handleSave}
            disabled={!name.length}
            variant='primary'
          >
            保存
          </Button>
        </div>
      </Modal>
    </div>
  )
}

export default InviteModal