tjdify/web/app/components/skill/intent/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, RiPriceTagLine, RiRefreshLine, RiSearchLine } from '@remixicon/react'
import Button from '@/app/components/base/button'
import useSWR from 'swr'
import { fetchIntent, fetchIntentType } from '@/service/common'
import { SimpleSelect } from '@/app/components/base/select'
import DetailModal from './detail-modal'
import TypeModal from './type-modal'

const CorpusIndex = () => {
  const [page, setPage] = useState<number>(0)
  const [limit, setLimit] = useState<number>(10)
  const [intentName, setIntentName] = useState<string>('') // the input value
  const [intentType, setIntentType] = useState<string>('') // the input value
  const { data: dataOptionsIntentType, mutate: mutateOptionsIntentType }: any = useSWR(
    {
      url: '/intentions/types',
      params: {
        page: 1,
        limit: 99999,
      },
    },
    fetchIntentType,
  )
  const optionsIntentType: any = dataOptionsIntentType?.data.map((v: any) => ({ name: v.name, value: v.id })) || []
  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.intentType)
      params.type_id = query.current.intentType
    if (query.current.intentName)
      params.name_search = query.current.intentName
    fetchIntent({
      url: '/intentions',
      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) {
      setIntentName('')
      setIntentType('')
      query.current = {}
    }
    else {
      query.current = {
        intentType, intentName,
      }
    }
    handlePage()
    setRefresh(false)
  }
  useEffect(() => {
    if (!refresh)
      handlePage()
  }, [page, limit])
  const [detailModalVisible, setDetailModalVisible] = useState(false)
  const [transfer, setTransfer] = useState<any>({
    mode: 'add',
    row: {},
  })
  const [showIntentTypeModalVisible, setShowIntentTypeModalVisible] = useState(false)
  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">
            意图类型
            <div className="ml-2 flex h-[32px]">
              <SimpleSelect
                className="h-[32px] w-[200px]"
                defaultValue={intentType}
                onSelect={(i: any) => {
                  setIntentType(i.value)
                }}
                items={optionsIntentType}
                allowSearch={false}
                placeholder="请选择意图类型"
              />
            </div>
          </div>
          <div className="flex shrink-0 items-center text-gray-500">
            意图名称
            <Input
              className="ml-2"
              showClearIcon
              wrapperClassName='!w-[200px]'
              value={intentName}
              onChange={e => setIntentName(e.target.value)}
              onClear={() => setIntentName('')}
            />
          </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>
          <Button variant='primary' className={cn('ml-2 shrink-0')}
            onClick={() => {
              setShowIntentTypeModalVisible(true)
            }}>
            <RiPriceTagLine 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 },
              })
            }}
          />
        )
      }
      {
        showIntentTypeModalVisible && (
          <TypeModal
            onCancel={() => {
              mutateOptionsIntentType()
              setShowIntentTypeModalVisible(false)
            }}
          />
        )
      }
    </>
  )
}
export default CorpusIndex