feat(data): 实现数据导入功能

src/modules/data/write/upload/api.ts

+import httpRequest from '@/utils/axios'
+
+// 导入我的数据集
+export function importDataset(data: { name: string; file: string }) {
+  return httpRequest.post('/api/bi/v1/data/my/import', data)
+}

src/modules/data/write/upload/query.ts

+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { importDataset } from './api'
+import { message } from 'antd'
+
+// 导入
+export function useImportDataset() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: (data: { name: string; file: string }) => importDataset(data),
+    onSuccess: () => {
+      message.success('导入成功')
+      queryClient.invalidateQueries({ queryKey: ['data'] })
+      queryClient.invalidateQueries({ queryKey: ['data-filed'] })
+    },
+  })
+}

src/modules/data/write/upload/views/Index.tsx

@@ -4,6 +4,9 @@ import { InboxOutlined, PlusOutlined } from '@ant-design/icons'
 import { useState } from 'react'
 import { read, utils } from 'xlsx'
 import DataRender from '@/components/data/DataRender'
+import { useImportDataset } from '../query'
+import { upload } from '@/utils/upload'
+import { useNavigate } from 'react-router'
 
 export default function DataWriteUpload() {
   const [file, setFile] = useState<File | null>(null)
@@ -17,8 +20,7 @@ export default function DataWriteUpload() {
           align: 'center',
         }))
       : []
-  console.log(columns)
-  console.log(data)
+
   const props: UploadProps = {
     showUploadList: false,
     accept: '.xlsx,.csv',
@@ -35,12 +37,30 @@ export default function DataWriteUpload() {
     },
   }
 
+  const { mutate } = useImportDataset()
+
+  const [form] = Form.useForm()
+  const navigate = useNavigate()
+
+  const handleSave = () => {
+    if (!file) return
+    form.validateFields().then(async (values) => {
+      const url = await upload(file)
+      const params = { ...values, file: JSON.stringify({ name: file.name, url }) }
+      mutate(params, {
+        onSuccess: () => {
+          navigate('/data/write/my')
+        },
+      })
+    })
+  }
+
   return (
     <Card className="app-card" title="数据导入">
       {file ? (
         <div>
-          <Form layout="inline">
-            <Form.Item label="数据集名称">
+          <Form layout="inline" form={form}>
+            <Form.Item label="数据集名称" name="name" rules={[{ required: true, message: '请输入数据集名称' }]}>
               <Input placeholder="请输入" style={{ width: '220px' }}></Input>
             </Form.Item>
           </Form>
@@ -50,7 +70,9 @@ export default function DataWriteUpload() {
               <span style={{ marginLeft: '10px' }}>{file?.name}</span>
             </Upload>
             <p>共计：{data.length}条数据</p>
-            <Button type="primary">保存</Button>
+            <Button type="primary" onClick={handleSave}>
+              保存
+            </Button>
           </Flex>
           <DataRender dataSource={data} columns={columns}></DataRender>
         </div>