123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238 |
- 'use client'
- import React, { useCallback, useEffect, useState } from 'react'
- import { RiAddLine, RiCloseLine, RiRefreshLine, RiSearchLine } from '@remixicon/react'
- import Modal from '@/app/components/base/modal'
- import Button from '@/app/components/base/button'
- import { delCorpus, fetchIntentType, fetchTypes } from '@/service/common'
- import 'react-multi-email/dist/style.css'
- import Input from '@/app/components/base/input'
- import useSWR from 'swr'
- import cn from '@/utils/classnames'
- import Confirm from '@/app/components/base/confirm'
- import Pagination from '@/app/components/base/pagination'
- import { SimpleSelect } from '@/app/components/base/select'
- const TypeModal = ({
- onCancel,
- onSend,
- }: any) => {
- const [page, setPage] = React.useState<number>(0)
- const [limit, setLimit] = useState<number>(10)
- const [name, setName] = useState('')
- const [query, setQuery] = useState<any>({})
- const { data, mutate }: any = useSWR(
- {
- url: '/xxx',
- params: {
- page: page + 1,
- limit,
- ...query,
- },
- },
- fetchIntentType,
- )
- const list: any = data?.data || []
- const total = data?.total || 0
- const handleSearch = (reset = false) => {
- if (reset)
- setIntentType('')
- const params: any = {}
- if (intentType)
- params.intentType = intentType
- setQuery(params)
- setPage(0)
- }
- useEffect(() => {
- mutate()
- }, [page, limit])
- const [showConfirmDelete, setShowConfirmDelete] = useState(false)
- const [row, setRow] = useState<any>({})
- const handleDel = async () => {
- try {
- await delCorpus({
- url: `/tags/${row.id}`,
- body: {},
- })
- setShowConfirmDelete(false)
- }
- catch (e) { }
- }
- const [showDetail, setShowDetail] = useState(false)
- const [mode, setMode] = useState<any>('add')
- const [editIntentType, setEditIntentType] = useState('')
- const [selectUser, setSelectUser] = useState<any>('')
- const [userOptions, setUserOptions] = useState<any>([])
- useEffect(() => {
- fetchTypes({
- url: '/tags/page',
- params: {
- page: 1,
- limit: 99999,
- tag_type: 'knowledge_category',
- },
- }).then((res: any) => {
- setUserOptions(res.data.map((v: any) => ({ name: v.name, value: v.id })) || [])
- })
- }, [])
- const handleSave = useCallback(async () => {
- // try {
- // let res
- // if (transfer.mode === 'add') {
- // res = await addCorpus({
- // url: '/xxx',
- // body: { name, type: 'knowledge_category' },
- // })
- // }
- // else {
- // res = await editCorpus({
- // url: '/xxx',
- // body: { name },
- // })
- // }
- // const { id }: any = res
- // if (id) {
- // onCancel()
- // onSend()
- // }
- // }
- // catch (e) { }
- }, [mode, editIntentType, onCancel, onSend])
- return (
- <div>
- <Modal overflowVisible isShow onClose={() => { }} className="p-[24px 32px] w-[800px] max-w-[800px]">
- <div className='mb-2 flex justify-between'>
- <div className='text-xl font-semibold text-text-primary'>关联用户</div>
- <RiCloseLine className='h-4 w-4 cursor-pointer text-text-tertiary' onClick={onCancel} />
- </div>
- <div className='flex h-[600px] flex-col'>
- <div className="flex items-center gap-2">
- <div className="flex shrink-0 items-center text-gray-500">
- 用户名称
- <Input
- className="ml-2"
- showClearIcon
- wrapperClassName='!w-[200px]'
- value={name}
- onChange={e => setName(e.target.value)}
- onClear={() => setName('')}
- />
- </div>
- <Button variant='primary' className={cn('ml-auto shrink-0')} onClick={() => {
- handleSearch(false)
- }}>
- <RiSearchLine className='mr-1 h-4 w-4' />
- 搜索
- </Button>
- <Button variant='primary' className={cn('shrink-0')} onClick={() => {
- handleSearch(true)
- }}>
- <RiRefreshLine className='mr-1 h-4 w-4' />
- 重置
- </Button>
- </div>
- <div className="mt-2">
- <Button variant='primary' className={cn('shrink-0')}
- onClick={() => {
- setMode('add')
- setEditIntentType('')
- setShowDetail(true)
- }}>
- <RiAddLine className='mr-1 h-4 w-4' />
- 添加用户
- </Button>
- </div>
- <div className="flex-1">
- <div className='relative flex h-full w-full flex-col'>
- <div className='relative grow overflow-x-auto'>
- <table className={'mt-3 w-full min-w-[700px] max-w-full border-collapse border-0 text-sm'}>
- <thead className="h-8 border-b border-divider-subtle text-xs font-medium uppercase leading-8 text-text-tertiary">
- <tr>
- <td>用户名称</td>
- <td className="w-[120px] text-center">操作</td>
- </tr>
- </thead>
- <tbody className="text-text-secondary">
- {list.map((item: any) => (
- <tr
- key={item.id}
- className={'h-8 border-b border-divider-subtle hover:bg-background-default-hover'}
- >
- <td>{item.name}</td>
- <td className="flex justify-center gap-2">
- <Button variant='ghost' size='small' className={cn('shrink-0 text-red-600')} onClick={() => {
- setRow(item)
- setShowConfirmDelete(true)
- }}>
- 解除关联
- </Button>
- </td>
- </tr>
- ))}
- </tbody>
- </table>
- </div>
- {/* Show Pagination only if the total is more than the limit */}
- {total && (
- <Pagination
- total={total}
- limit={limit}
- onLimitChange={setLimit}
- current={page}
- onChange={setPage}
- className='w-full shrink-0 px-0 pb-0'
- />
- )}
- </div>
- </div>
- </div>
- </Modal>
- {showConfirmDelete && (
- <Confirm
- title="删除确认"
- content={`请确认是否删除${row.name}?`}
- isShow={showConfirmDelete}
- onConfirm={handleDel}
- onCancel={() => setShowConfirmDelete(false)}
- />
- )}
- {
- showDetail && (
- <Modal overflowVisible isShow onClose={() => { }} className="p-[24px 32px] w-[400px]">
- <div className='mb-2 flex justify-between'>
- <div className='text-xl font-semibold text-text-primary'>添加用户</div>
- <RiCloseLine className='h-4 w-4 cursor-pointer text-text-tertiary' onClick={() => setShowDetail(false)} />
- </div>
- <div>
- <div className={cn('flex flex-wrap items-center justify-between py-4')}>
- <div className='shrink-0 py-2 text-sm font-medium leading-[20px] text-text-primary'>
- 选择用户
- </div>
- <div className='w-full'>
- <SimpleSelect
- defaultValue={selectUser}
- onSelect={(i) => { setSelectUser(i.value) }}
- items={userOptions}
- allowSearch={false}
- />
- </div>
- </div>
- <Button
- tabIndex={0}
- className='w-full'
- onClick={handleSave}
- disabled={!editIntentType.length}
- variant='primary'
- >
- 保存
- </Button>
- </div>
- </Modal>
- )
- }
- </div>
- )
- }
- export default TypeModal
|