142 lines
3.5 KiB
TypeScript
142 lines
3.5 KiB
TypeScript
import React, { useState, useCallback } from 'react';
|
|
import {
|
|
Box,
|
|
IconButton,
|
|
Flex,
|
|
Button,
|
|
Modal,
|
|
ModalOverlay,
|
|
ModalContent,
|
|
ModalHeader,
|
|
ModalCloseButton,
|
|
Input,
|
|
Textarea
|
|
} from '@chakra-ui/react';
|
|
import { useForm, useFieldArray } from 'react-hook-form';
|
|
import { postModelDataInput } from '@/api/model';
|
|
import { useToast } from '@/hooks/useToast';
|
|
import { DeleteIcon } from '@chakra-ui/icons';
|
|
import { customAlphabet } from 'nanoid';
|
|
const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz1234567890', 12);
|
|
|
|
type FormData = { text: string; q: { val: string }[] };
|
|
|
|
const InputDataModal = ({
|
|
onClose,
|
|
onSuccess,
|
|
modelId
|
|
}: {
|
|
onClose: () => void;
|
|
onSuccess: () => void;
|
|
modelId: string;
|
|
}) => {
|
|
const [importing, setImporting] = useState(false);
|
|
const { toast } = useToast();
|
|
|
|
const { register, handleSubmit, control } = useForm<FormData>({
|
|
defaultValues: {
|
|
text: '',
|
|
q: [{ val: '' }]
|
|
}
|
|
});
|
|
const {
|
|
fields: inputQ,
|
|
append: appendQ,
|
|
remove: removeQ
|
|
} = useFieldArray({
|
|
control,
|
|
name: 'q'
|
|
});
|
|
|
|
const sureImportData = useCallback(
|
|
async (e: FormData) => {
|
|
setImporting(true);
|
|
|
|
try {
|
|
await postModelDataInput({
|
|
modelId: modelId,
|
|
data: [
|
|
{
|
|
text: e.text,
|
|
q: e.q.map((item) => ({
|
|
id: nanoid(),
|
|
text: item.val
|
|
}))
|
|
}
|
|
]
|
|
});
|
|
|
|
toast({
|
|
title: '导入数据成功,需要一段时间训练',
|
|
status: 'success'
|
|
});
|
|
onClose();
|
|
onSuccess();
|
|
} catch (err) {
|
|
console.log(err);
|
|
}
|
|
setImporting(false);
|
|
},
|
|
[modelId, onClose, onSuccess, toast]
|
|
);
|
|
|
|
return (
|
|
<Modal isOpen={true} onClose={onClose}>
|
|
<ModalOverlay />
|
|
<ModalContent maxW={'min(900px, 90vw)'} maxH={'80vh'} position={'relative'}>
|
|
<ModalHeader>手动导入</ModalHeader>
|
|
<ModalCloseButton />
|
|
<Box px={6} pb={2} overflowY={'auto'}>
|
|
<Box mb={2}>知识点:</Box>
|
|
<Textarea
|
|
mb={4}
|
|
placeholder="知识点"
|
|
rows={3}
|
|
maxH={'200px'}
|
|
{...register(`text`, {
|
|
required: '知识点'
|
|
})}
|
|
/>
|
|
{inputQ.map((item, index) => (
|
|
<Box key={item.id} mb={5}>
|
|
<Box mb={2}>问法{index + 1}:</Box>
|
|
<Flex>
|
|
<Input
|
|
placeholder="问法"
|
|
{...register(`q.${index}.val`, {
|
|
required: '问法不能为空'
|
|
})}
|
|
></Input>
|
|
{inputQ.length > 1 && (
|
|
<IconButton
|
|
icon={<DeleteIcon />}
|
|
aria-label={'delete'}
|
|
colorScheme={'gray'}
|
|
variant={'unstyled'}
|
|
onClick={() => removeQ(index)}
|
|
/>
|
|
)}
|
|
</Flex>
|
|
</Box>
|
|
))}
|
|
</Box>
|
|
|
|
<Flex px={6} pt={2} pb={4}>
|
|
<Button alignSelf={'flex-start'} variant={'outline'} onClick={() => appendQ({ val: '' })}>
|
|
增加问法
|
|
</Button>
|
|
<Box flex={1}></Box>
|
|
<Button variant={'outline'} mr={3} onClick={onClose}>
|
|
取消
|
|
</Button>
|
|
<Button isLoading={importing} onClick={handleSubmit(sureImportData)}>
|
|
确认导入
|
|
</Button>
|
|
</Flex>
|
|
</ModalContent>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default InputDataModal;
|