feat: 修改模型数据可修改问题

2023-04-04 13:15:34 +08:00
parent becee69d6a
commit e08e8aa00b
5 changed files with 100 additions and 71 deletions
--- a/src/pages/model/detail/components/InputDataModal.tsx
+++ b/src/pages/model/detail/components/InputDataModal.tsx
@@ -1,7 +1,6 @@
 import React, { useState, useCallback } from 'react';
 import {
  Box,
-  IconButton,
  Flex,
  Button,
  Modal,
@@ -9,37 +8,40 @@ import {
  ModalContent,
  ModalHeader,
  ModalCloseButton,
-  Input,
  Textarea
 } from '@chakra-ui/react';
-import { useForm, useFieldArray } from 'react-hook-form';
-import { postModelDataInput } from '@/api/model';
+import { useForm } from 'react-hook-form';
+import { postModelDataInput, putModelDataById } 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: string };
+export type FormData = { dataId?: string; text: string; q: string };

 const InputDataModal = ({
  onClose,
  onSuccess,
-  modelId
+  modelId,
+  defaultValues = {
+    text: '',
+    q: ''
+  }
 }: {
  onClose: () => void;
  onSuccess: () => void;
  modelId: string;
+  defaultValues?: FormData;
 }) => {
  const [importing, setImporting] = useState(false);
  const { toast } = useToast();

-  const { register, handleSubmit, control } = useForm<FormData>({
-    defaultValues: {
-      text: '',
-      q: ''
-    }
+  const { register, handleSubmit } = useForm<FormData>({
+    defaultValues
  });

+  /**
+   * 确认导入新数据
+   */
  const sureImportData = useCallback(
    async (e: FormData) => {
      setImporting(true);
@@ -72,6 +74,26 @@ const InputDataModal = ({
    [modelId, onClose, onSuccess, toast]
  );

+  const updateData = useCallback(
+    async (e: FormData) => {
+      if (!e.dataId) return;
+      if (e.text === defaultValues.text && e.q === defaultValues.q) return;
+
+      await putModelDataById({
+        dataId: e.dataId,
+        text: e.text,
+        q: e.q === defaultValues.q ? '' : e.q
+      });
+      toast({
+        title: '修改回答成功',
+        status: 'success'
+      });
+      onClose();
+      onSuccess();
+    },
+    [defaultValues.q, onClose, onSuccess, toast]
+  );
+
  return (
    <Modal isOpen={true} onClose={onClose} isCentered>
      <ModalOverlay />
@@ -125,7 +147,10 @@ const InputDataModal = ({
          <Button variant={'outline'} mr={3} onClick={onClose}>
            取消
          </Button>
-          <Button isLoading={importing} onClick={handleSubmit(sureImportData)}>
+          <Button
+            isLoading={importing}
+            onClick={handleSubmit(defaultValues.dataId ? updateData : sureImportData)}
+          >
            确认导入
          </Button>
        </Flex>
--- a/src/pages/model/detail/components/ModelDataCard.tsx
+++ b/src/pages/model/detail/components/ModelDataCard.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
 import {
  Box,
  TableContainer,
@@ -12,7 +12,6 @@ import {
  Flex,
  Button,
  useDisclosure,
-  Textarea,
  Menu,
  MenuButton,
  MenuList,
@@ -25,22 +24,21 @@ import { usePagination } from '@/hooks/usePagination';
 import {
  getModelDataList,
  delOneModelData,
-  putModelDataById,
  getModelSplitDataList,
  getExportDataList
 } from '@/api/model';
-import { DeleteIcon, RepeatIcon } from '@chakra-ui/icons';
+import { DeleteIcon, RepeatIcon, EditIcon } from '@chakra-ui/icons';
 import { useToast } from '@/hooks/useToast';
 import { useLoading } from '@/hooks/useLoading';
 import dynamic from 'next/dynamic';
 import { useMutation, useQuery } from '@tanstack/react-query';
+import type { FormData as InputDataType } from './InputDataModal';

 const InputModel = dynamic(() => import('./InputDataModal'));
 const SelectFileModel = dynamic(() => import('./SelectFileModal'));
 const SelectJsonModel = dynamic(() => import('./SelectJsonModal'));

 const ModelDataCard = ({ model }: { model: ModelSchema }) => {
-  const { toast } = useToast();
  const { Loading } = useLoading();

  const {
@@ -58,25 +56,8 @@ const ModelDataCard = ({ model }: { model: ModelSchema }) => {
    }
  });

-  const updateAnswer = useCallback(
-    async (dataId: string, text: string) => {
-      await putModelDataById({
-        dataId,
-        text
-      });
-      toast({
-        title: '修改回答成功',
-        status: 'success'
-      });
-    },
-    [toast]
-  );
+  const [editInputData, setEditInputData] = useState<InputDataType>();

-  const {
-    isOpen: isOpenInputModal,
-    onOpen: onOpenInputModal,
-    onClose: onCloseInputModal
-  } = useDisclosure();
  const {
    isOpen: isOpenSelectFileModal,
    onOpen: onOpenSelectFileModal,
@@ -151,7 +132,16 @@ const ModelDataCard = ({ model }: { model: ModelSchema }) => {
            导入
          </MenuButton>
          <MenuList>
-            <MenuItem onClick={onOpenInputModal}>手动输入</MenuItem>
+            <MenuItem
+              onClick={() =>
+                setEditInputData({
+                  text: '',
+                  q: ''
+                })
+              }
+            >
+              手动输入
+            </MenuItem>
            <MenuItem onClick={onOpenSelectFileModal}>文件导入</MenuItem>
            <MenuItem onClick={onOpenSelectJsonModal}>JSON导入</MenuItem>
          </MenuList>
@@ -170,34 +160,38 @@ const ModelDataCard = ({ model }: { model: ModelSchema }) => {
                <Th>Question</Th>
                <Th>Text</Th>
                <Th>Status</Th>
-                <Th></Th>
+                <Th>操作</Th>
              </Tr>
            </Thead>
            <Tbody>
              {modelDataList.map((item) => (
                <Tr key={item.id}>
-                  <Td w={'350px'}>
-                    <Box fontSize={'xs'} w={'100%'} whiteSpace={'pre-wrap'} _notLast={{ mb: 1 }}>
+                  <Td>
+                    <Box fontSize={'xs'} w={'100%'} whiteSpace={'pre-wrap'}>
                      {item.q}
                    </Box>
                  </Td>
                  <Td minW={'200px'}>
-                    <Textarea
-                      w={'100%'}
-                      h={'100%'}
-                      defaultValue={item.text}
-                      fontSize={'xs'}
-                      resize={'both'}
-                      onBlur={(e) => {
-                        const oldVal = modelDataList.find((data) => item.id === data.id)?.text;
-                        if (oldVal !== e.target.value) {
-                          updateAnswer(item.id, e.target.value);
-                        }
-                      }}
-                    ></Textarea>
+                    <Box w={'100%'} fontSize={'xs'} whiteSpace={'pre-wrap'}>
+                      {item.text}
+                    </Box>
                  </Td>
-                  <Td w={'100px'}>{ModelDataStatusMap[item.status]}</Td>
+                  <Td>{ModelDataStatusMap[item.status]}</Td>
                  <Td>
+                    <IconButton
+                      mr={5}
+                      icon={<EditIcon />}
+                      variant={'outline'}
+                      aria-label={'delete'}
+                      size={'sm'}
+                      onClick={() =>
+                        setEditInputData({
+                          dataId: item.id,
+                          q: item.q,
+                          text: item.text
+                        })
+                      }
+                    />
                    <IconButton
                      icon={<DeleteIcon />}
                      variant={'outline'}
@@ -221,8 +215,13 @@ const ModelDataCard = ({ model }: { model: ModelSchema }) => {
      </Box>

      <Loading loading={isLoading} fixed={false} />
-      {isOpenInputModal && (
-        <InputModel modelId={model._id} onClose={onCloseInputModal} onSuccess={refetchData} />
+      {editInputData !== undefined && (
+        <InputModel
+          modelId={model._id}
+          defaultValues={editInputData}
+          onClose={() => setEditInputData(undefined)}
+          onSuccess={refetchData}
+        />
      )}
      {isOpenSelectFileModal && (
        <SelectFileModel