tjdify/web/app/components/skill/corpus/index.tsx

'use client'

import List from './list'
import React, { useEffect, useRef, useState } from 'react'
import Input from '@/app/components/base/input'
import cn from '@/utils/classnames'
import { RiAddLine, RiRefreshLine, RiSearchLine } from '@remixicon/react'
import Button from '@/app/components/base/button'
import { fetchCorpus, fetchIntent } from '@/service/common'
import DetailModal from './detail-modal'
import { Cascader as AntdCascader } from 'antd'

const CorpusIndex = () => {
  const [intentCascader, setIntentCascader] = useState<any>([])
  useEffect(() => {
    fetchIntent({
      url: '/intentions',
      params: {
        page: 1,
        limit: 99999,
      },
    }).then((res: any) => {
      const map = new Map()
      res.data.forEach((v: any) => {
        if (map.has(v.type_id)) {
          const parent = map.get(v.type_id)
          parent.children.push(v)
          map.set(v.type_id, parent)
        }
        else {
          map.set(v.type_id, {
            id: v.type_id,
            name: v.type_name,
            children: [v],
          })
        }
      })
      setIntentCascader(Array.from(map.values()))
    })
  }, [])
  const [page, setPage] = useState<number>(0)
  const [limit, setLimit] = useState<number>(10)
  const [question, setQuestion] = useState<string>('')
  const [intentName, setIntentName] = useState<string>('')
  const [intentValue, setIntentValue] = useState<any>([])
  const query = useRef<any>({})
  const [list, setList] = useState<any>([])
  const [total, setTotal] = useState(0)
  const handlePage = () => {
    const params: any = {
      page: page + 1,
      limit,
    }
    if (query.current.question)
      params.question_search = query.current.question
    if (query.current.intentName)
      params.intention_id = query.current.intentName
    fetchCorpus({
      url: '/intentions/corpus',
      params,
    }).then((res: any) => {
      setList(res.data)
      setTotal(res.total)
    })
  }
  const [refresh, setRefresh] = useState<boolean>(false)
  const handleSearch = (reset = false) => {
    setRefresh(true)
    setPage(0)
    if (reset) {
      setQuestion('')
      setIntentName('')
      setIntentValue([])
      query.current = {}
    }
    else {
      query.current = {
        question, intentName,
      }
    }
    handlePage()
    setRefresh(false)
  }
  useEffect(() => {
    if (!refresh)
      handlePage()
  }, [page, limit])

  const [detailModalVisible, setDetailModalVisible] = useState(false)
  const [transfer, setTransfer] = useState<any>({
    mode: 'add',
    row: {},
  })
  return (
    <>
      <div className='flex h-full w-full flex-col bg-background-default-subtle p-6'>
        <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={question}
              onChange={e => setQuestion(e.target.value)}
              onClear={() => setQuestion('')}
            />
          </div>
          <div className="ml-2 flex shrink-0 items-center text-gray-500">
            意图名称
            <div className="ml-2 flex h-[32px]">
              <AntdCascader
                value={intentValue}
                className="h-[32px] w-[200px]"
                options={intentCascader}
                onChange={(val: any) => {
                  setIntentValue(val)
                  setIntentName(val?.[val.length - 1] || '')
                }}
                placeholder="请选择"
                fieldNames={{ label: 'name', value: 'id' }}
                showSearch={true}
              />
            </div>
          </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={() => {
              setTransfer({ mode: 'add', row: null })
              setDetailModalVisible(true)
            }}>
            <RiAddLine className='mr-1 h-4 w-4' />
            新增
          </Button>
        </div>
        <div className="flex-1">
          <List
            list={list || []}
            onUpdate={() => handleSearch(false)}
            pagination={{
              total,
              limit,
              onLimitChange: setLimit,
              current: page,
              onChange: setPage,
            }}
          />
        </div>
      </div>
      {
        detailModalVisible && (
          <DetailModal
            transfer={transfer}
            onCancel={() => {
              setDetailModalVisible(false)
              handleSearch()
            }}
            onSend={() => {
              setDetailModalVisible(false)
              handleSearch()
            }}
            onRefresh={(id: string) => {
              setTransfer({
                mode: 'edit',
                row: { id },
              })
            }}
          />
        )
      }
    </>
  )
}
export default CorpusIndex