chore: update

src/hooks/useQuery.ts

@@ -121,7 +121,7 @@ export function useProcessProgressQuery(params: { function_name: string }) {
     },
     select: (res) => res.data,
     enabled,
-    refetchInterval: enabled ? 1000 : false,
+    refetchInterval: enabled ? 500 : false,
     staleTime: 0,
     gcTime: 0,
     placeholderData: (): any => {
@@ -144,7 +144,7 @@ export function useProcessProgressQuery(params: { function_name: string }) {
   }
   // 组件卸载时清理
   useEffect(() => {
-    if (query.data?.result === 'SUCCESS' || query.data?.result === 'FAIL' || query.data?.result === null) {
+    if (query.data?.result === 'SUCCESS' || query.data?.result === 'FAIL') {
       stop()
     }
     return () => {

src/modules/data/preprocess/error/api.ts

+import httpRequest from '@/utils/axios'
+import type { ProcessDataParams } from './types'
+
+// 缺省值处理
+export function processData(data: ProcessDataParams) {
+  return httpRequest.post('/api/resource/bi/v1/processing/pre-processing/abnormal', data)
+}

src/modules/data/preprocess/error/components/ButtonModal.tsx

@@ -5,6 +5,7 @@ import AppProgressSteps from '@/components/AppProgressSteps'
 import { useSearchParams } from 'react-router'
 import { useAI } from '@/hooks/useAI'
 import prompt from '@/utils/prompt'
+import { useProcessData } from '../query'
 
 export default function ButtonModal() {
   const [searchParams] = useSearchParams()
@@ -27,7 +28,7 @@ export default function ButtonModal() {
     })
   }
 
-  const { fieldOptions } = useDataFieldQuery()
+  const { fieldOptions, getFieldName } = useDataFieldQuery()
 
   const [open, setOpen] = useState(false)
   useEffect(() => {
@@ -38,25 +39,33 @@ export default function ButtonModal() {
   const [current, setCurrent] = useState(0)
   const [form] = Form.useForm()
   const initialValues = {
-    checked: '',
-    rule: '1',
+    action: '取该字段平均值',
   }
 
-  const checked = Form.useWatch('checked', form)
+  const field = Form.useWatch('field', form)
 
-  const ruleOptions = [
-    { label: '取该字段平均值', value: '1' },
-    { label: '删除逻辑错误值', value: '2' },
-    { label: '不处理', value: '3' },
-  ]
+  const ruleOptions = ['取该字段平均值', '删除逻辑错误值', '不处理']
+
+  const { mutate, isPending, progress, message, remove } = useProcessData()
+  // 开始处理
+  const handleStart = () => {
+    form.validateFields().then((values) => {
+      mutate(values)
+    })
+  }
 
-  const [step, setStep] = useState<number>(-1)
+  // 关闭并重置
+  const handleClose = () => {
+    setOpen(false)
+    setCurrent(0)
+    remove()
+  }
 
   const steps = [
     {
       title: '请选择逻辑错误值字段',
       content: (
-        <Form.Item name="checked" rules={[{ required: true, message: '请选择逻辑错误值字段' }]}>
+        <Form.Item name="field" rules={[{ required: true, message: '请选择逻辑错误值字段' }]}>
           <Radio.Group>
             <Row gutter={[10, 10]}>
               {fieldOptions.map((item) => (
@@ -73,8 +82,8 @@ export default function ButtonModal() {
       title: '配置处理规则',
       content: (
         <>
-          <Form.Item label="逻辑错误值处理字段">{checked}</Form.Item>
-          <Form.Item label="处理规则" name="rule" rules={[{ required: true, message: '请选择处理规则' }]}>
+          <Form.Item label="逻辑错误值处理字段">{getFieldName(field)}</Form.Item>
+          <Form.Item label="处理规则" name="action" rules={[{ required: true, message: '请选择处理规则' }]}>
             <Radio.Group options={ruleOptions} />
           </Form.Item>
         </>
@@ -84,29 +93,25 @@ export default function ButtonModal() {
       title: '处理执行',
       content: (
         <>
-          <p>逻辑错误值处理字段：{checked}</p>
+          <p>逻辑错误值处理字段：{getFieldName(field)}</p>
           <Flex vertical align="center" style={{ marginTop: '20px' }}>
-            <Button type="primary" onClick={() => setStep(1)}>
+            <Button type="primary" loading={isPending} onClick={handleStart}>
               开始处理
             </Button>
             <AppProgressSteps
-              current={step}
+              current={progress}
               items={[
                 {
-                  title: <>检查字段处理规则</>,
+                  title: '检查字段处理规则',
+                  description: message[1],
                 },
                 {
-                  title: <>逻辑错误值处理</>,
+                  title: '逻辑错误值处理',
+                  description: message[2],
                 },
                 {
-                  title: <>处理结果</>,
-                  description: (
-                    <>
-                      累计处理XX个字段
-                      <br />
-                      累计处理XX条记录
-                    </>
-                  ),
+                  title: '处理结果',
+                  description: message[3],
                 },
               ]}
             />
@@ -133,12 +138,12 @@ export default function ButtonModal() {
             )}
             {current > 0 && <Button onClick={() => setCurrent(current - 1)}>上一步</Button>}
             {current < steps.length - 1 && (
-              <Button type="primary" onClick={() => setCurrent(current + 1)} disabled={!checked}>
+              <Button type="primary" onClick={() => setCurrent(current + 1)} disabled={!field}>
                 下一步
               </Button>
             )}
             {current === steps.length - 1 && (
-              <Button type="primary" onClick={() => setOpen(false)}>
+              <Button type="primary" disabled={isPending} onClick={handleClose}>
                 关闭
               </Button>
             )}
@@ -146,7 +151,7 @@ export default function ButtonModal() {
         }
         destroyOnClose
         width={800}
-        onCancel={() => setOpen(false)}>
+        onCancel={handleClose}>
         <div style={{ minHeight: 300, padding: '20px 0' }}>
           <Form form={form} labelCol={{ span: 5 }} preserve={false} initialValues={initialValues}>
             {steps.map((item, index) => (

src/modules/data/preprocess/error/query.ts

+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { message } from 'antd'
+import { processData } from './api'
+import type { ProcessDataParams } from './types'
+import { useProcessProgressQuery } from '@/hooks/useQuery'
+
+// 处理数据
+export function useProcessData() {
+  const queryClient = useQueryClient()
+  const { data, start, remove } = useProcessProgressQuery({ function_name: 'abnormal' })
+
+  const query = useMutation({
+    mutationFn: (data: ProcessDataParams) => {
+      start()
+      return processData(data)
+    },
+    onSuccess: () => {
+      message.success('处理完成')
+      queryClient.invalidateQueries({ queryKey: ['data'] })
+    },
+  })
+
+  return { ...query, progress: data.progress, message: data.message, remove }
+}

src/modules/data/preprocess/error/types.ts

+export interface ProcessDataParams {
+  field: string
+  action: string
+}

src/modules/data/preprocess/max/api.ts

+import httpRequest from '@/utils/axios'
+import type { ProcessDataParams } from './types'
+
+// 缺省值处理
+export function processData(data: ProcessDataParams) {
+  return httpRequest.post('/api/resource/bi/v1/processing/pre-processing/out-of-range', data)
+}

src/modules/data/preprocess/max/components/ButtonModal.tsx

@@ -5,6 +5,7 @@ import AppProgressSteps from '@/components/AppProgressSteps'
 import { useSearchParams } from 'react-router'
 import { useAI } from '@/hooks/useAI'
 import prompt from '@/utils/prompt'
+import { useProcessData } from '../query'
 
 export default function ButtonModal() {
   const [searchParams] = useSearchParams()
@@ -27,7 +28,7 @@ export default function ButtonModal() {
     })
   }
 
-  const { fieldOptions } = useDataFieldQuery()
+  const { fieldOptions, getFieldName } = useDataFieldQuery()
 
   const [open, setOpen] = useState(false)
   useEffect(() => {
@@ -37,26 +38,35 @@ export default function ButtonModal() {
   }, [searchParams])
   const [current, setCurrent] = useState(0)
   const [form] = Form.useForm()
+
   const initialValues = {
-    checked: '',
-    rule: '1',
+    action: '取该字段平均值',
   }
 
-  const checked = Form.useWatch('checked', form)
+  const field = Form.useWatch('field', form)
 
-  const ruleOptions = [
-    { label: '取该字段平均值', value: '1' },
-    { label: '删除过大值', value: '2' },
-    { label: '不处理', value: '3' },
-  ]
+  const ruleOptions = ['取该字段平均值', '删除过大值', '不处理']
 
-  const [step, setStep] = useState<number>(-1)
+  const { mutate, isPending, progress, message, remove } = useProcessData()
+  // 开始处理
+  const handleStart = () => {
+    form.validateFields().then((values) => {
+      mutate(values)
+    })
+  }
+
+  // 关闭并重置
+  const handleClose = () => {
+    setOpen(false)
+    setCurrent(0)
+    remove()
+  }
 
   const steps = [
     {
       title: '请选择过大值字段',
       content: (
-        <Form.Item name="checked" rules={[{ required: true, message: '请选择过大值字段' }]}>
+        <Form.Item name="field" rules={[{ required: true, message: '请选择过大值字段' }]}>
           <Radio.Group>
             <Row gutter={[10, 10]}>
               {fieldOptions.map((item) => (
@@ -73,8 +83,8 @@ export default function ButtonModal() {
       title: '配置处理规则',
       content: (
         <>
-          <Form.Item label="过大值处理字段">{checked}</Form.Item>
-          <Form.Item label="处理规则" name="rule" rules={[{ required: true, message: '请选择处理规则' }]}>
+          <Form.Item label="过大值处理字段">{getFieldName(field)}</Form.Item>
+          <Form.Item label="处理规则" name="action" rules={[{ required: true, message: '请选择处理规则' }]}>
             <Radio.Group options={ruleOptions} />
           </Form.Item>
         </>
@@ -84,29 +94,25 @@ export default function ButtonModal() {
       title: '处理执行',
       content: (
         <>
-          <p>过大值处理字段：{checked}</p>
+          <p>过大值处理字段：{getFieldName(field)}</p>
           <Flex vertical align="center" style={{ marginTop: '20px' }}>
-            <Button type="primary" onClick={() => setStep(1)}>
+            <Button type="primary" loading={isPending} onClick={handleStart}>
               开始处理
             </Button>
             <AppProgressSteps
-              current={step}
+              current={progress}
               items={[
                 {
-                  title: <>检查字段处理规则</>,
+                  title: '检查字段处理规则',
+                  description: message[1],
                 },
                 {
-                  title: <>过大值处理</>,
+                  title: '过大值处理',
+                  description: message[2],
                 },
                 {
-                  title: <>处理结果</>,
-                  description: (
-                    <>
-                      累计处理XX个字段
-                      <br />
-                      累计处理XX条记录
-                    </>
-                  ),
+                  title: '处理结果',
+                  description: message[3],
                 },
               ]}
             />
@@ -133,12 +139,12 @@ export default function ButtonModal() {
             )}
             {current > 0 && <Button onClick={() => setCurrent(current - 1)}>上一步</Button>}
             {current < steps.length - 1 && (
-              <Button type="primary" onClick={() => setCurrent(current + 1)} disabled={!checked}>
+              <Button type="primary" onClick={() => setCurrent(current + 1)} disabled={!field}>
                 下一步
               </Button>
             )}
             {current === steps.length - 1 && (
-              <Button type="primary" onClick={() => setOpen(false)}>
+              <Button type="primary" disabled={isPending} onClick={handleClose}>
                 关闭
               </Button>
             )}
@@ -146,7 +152,7 @@ export default function ButtonModal() {
         }
         destroyOnClose
         width={800}
-        onCancel={() => setOpen(false)}>
+        onCancel={handleClose}>
         <div style={{ minHeight: 300, padding: '20px 0' }}>
           <Form form={form} labelCol={{ span: 5 }} preserve={false} initialValues={initialValues}>
             {steps.map((item, index) => (

src/modules/data/preprocess/max/query.ts

+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { message } from 'antd'
+import { processData } from './api'
+import type { ProcessDataParams } from './types'
+import { useProcessProgressQuery } from '@/hooks/useQuery'
+
+// 处理数据
+export function useProcessData() {
+  const queryClient = useQueryClient()
+  const { data, start, remove } = useProcessProgressQuery({ function_name: 'outOfRange' })
+
+  const query = useMutation({
+    mutationFn: (data: ProcessDataParams) => {
+      start()
+      return processData(data)
+    },
+    onSuccess: () => {
+      message.success('处理完成')
+      queryClient.invalidateQueries({ queryKey: ['data'] })
+    },
+  })
+
+  return { ...query, progress: data.progress, message: data.message, remove }
+}

src/modules/data/preprocess/max/types.ts

+export interface ProcessDataParams {
+  field: string
+  action: string
+}

src/modules/data/preprocess/min/api.ts

+import httpRequest from '@/utils/axios'
+import type { ProcessDataParams } from './types'
+
+// 缺省值处理
+export function processData(data: ProcessDataParams) {
+  return httpRequest.post('/api/resource/bi/v1/processing/pre-processing/under-range', data)
+}

src/modules/data/preprocess/min/components/ButtonModal.tsx

@@ -5,6 +5,7 @@ import AppProgressSteps from '@/components/AppProgressSteps'
 import { useSearchParams } from 'react-router'
 import { useAI } from '@/hooks/useAI'
 import prompt from '@/utils/prompt'
+import { useProcessData } from '../query'
 
 export default function ButtonModal() {
   const [searchParams] = useSearchParams()
@@ -27,7 +28,7 @@ export default function ButtonModal() {
     })
   }
 
-  const { fieldOptions } = useDataFieldQuery()
+  const { fieldOptions, getFieldName } = useDataFieldQuery()
 
   const [open, setOpen] = useState(false)
   useEffect(() => {
@@ -38,25 +39,33 @@ export default function ButtonModal() {
   const [current, setCurrent] = useState(0)
   const [form] = Form.useForm()
   const initialValues = {
-    checked: '',
-    rule: '1',
+    action: '取该字段平均值',
   }
 
-  const checked = Form.useWatch('checked', form)
+  const field = Form.useWatch('field', form)
 
-  const ruleOptions = [
-    { label: '取该字段平均值', value: '1' },
-    { label: '删除过小值', value: '2' },
-    { label: '不处理', value: '3' },
-  ]
+  const ruleOptions = ['取该字段平均值', '删除过小值', '不处理']
+
+  const { mutate, isPending, progress, message, remove } = useProcessData()
+  // 开始处理
+  const handleStart = () => {
+    form.validateFields().then((values) => {
+      mutate(values)
+    })
+  }
 
-  const [step, setStep] = useState<number>(-1)
+  // 关闭并重置
+  const handleClose = () => {
+    setOpen(false)
+    setCurrent(0)
+    remove()
+  }
 
   const steps = [
     {
       title: '请选择过小值字段',
       content: (
-        <Form.Item name="checked" rules={[{ required: true, message: '请选择过小值字段' }]}>
+        <Form.Item name="field" rules={[{ required: true, message: '请选择过小值字段' }]}>
           <Radio.Group>
             <Row gutter={[10, 10]}>
               {fieldOptions.map((item) => (
@@ -73,8 +82,8 @@ export default function ButtonModal() {
       title: '配置处理规则',
       content: (
         <>
-          <Form.Item label="过小值处理字段">{checked}</Form.Item>
-          <Form.Item label="处理规则" name="rule" rules={[{ required: true, message: '请选择处理规则' }]}>
+          <Form.Item label="过小值处理字段">{getFieldName(field)}</Form.Item>
+          <Form.Item label="处理规则" name="action" rules={[{ required: true, message: '请选择处理规则' }]}>
             <Radio.Group options={ruleOptions} />
           </Form.Item>
         </>
@@ -84,29 +93,25 @@ export default function ButtonModal() {
       title: '处理执行',
       content: (
         <>
-          <p>过小值处理字段：{checked}</p>
+          <p>过小值处理字段：{getFieldName(field)}</p>
           <Flex vertical align="center" style={{ marginTop: '20px' }}>
-            <Button type="primary" onClick={() => setStep(1)}>
+            <Button type="primary" loading={isPending} onClick={handleStart}>
               开始处理
             </Button>
             <AppProgressSteps
-              current={step}
+              current={progress}
               items={[
                 {
-                  title: <>检查字段处理规则</>,
+                  title: '检查字段处理规则',
+                  description: message[1],
                 },
                 {
-                  title: <>过小值处理</>,
+                  title: '过小值处理',
+                  description: message[2],
                 },
                 {
-                  title: <>处理结果</>,
-                  description: (
-                    <>
-                      累计处理XX个字段
-                      <br />
-                      累计处理XX条记录
-                    </>
-                  ),
+                  title: '处理结果',
+                  description: message[3],
                 },
               ]}
             />
@@ -133,12 +138,12 @@ export default function ButtonModal() {
             )}
             {current > 0 && <Button onClick={() => setCurrent(current - 1)}>上一步</Button>}
             {current < steps.length - 1 && (
-              <Button type="primary" onClick={() => setCurrent(current + 1)} disabled={!checked}>
+              <Button type="primary" onClick={() => setCurrent(current + 1)} disabled={!field}>
                 下一步
               </Button>
             )}
             {current === steps.length - 1 && (
-              <Button type="primary" onClick={() => setOpen(false)}>
+              <Button type="primary" disabled={isPending} onClick={handleClose}>
                 关闭
               </Button>
             )}
@@ -146,7 +151,7 @@ export default function ButtonModal() {
         }
         destroyOnClose
         width={800}
-        onCancel={() => setOpen(false)}>
+        onCancel={handleClose}>
         <div style={{ minHeight: 300, padding: '20px 0' }}>
           <Form form={form} labelCol={{ span: 5 }} preserve={false} initialValues={initialValues}>
             {steps.map((item, index) => (

src/modules/data/preprocess/min/query.ts

+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { message } from 'antd'
+import { processData } from './api'
+import type { ProcessDataParams } from './types'
+import { useProcessProgressQuery } from '@/hooks/useQuery'
+
+// 处理数据
+export function useProcessData() {
+  const queryClient = useQueryClient()
+  const { data, start, remove } = useProcessProgressQuery({ function_name: 'underRange' })
+
+  const query = useMutation({
+    mutationFn: (data: ProcessDataParams) => {
+      start()
+      return processData(data)
+    },
+    onSuccess: () => {
+      message.success('处理完成')
+      queryClient.invalidateQueries({ queryKey: ['data'] })
+    },
+  })
+
+  return { ...query, progress: data.progress, message: data.message, remove }
+}

src/modules/data/preprocess/min/types.ts

+export interface ProcessDataParams {
+  field: string
+  action: string
+}

src/modules/data/preprocess/null/components/ButtonModal.tsx

@@ -152,16 +152,9 @@ export default function ButtonModal() {
             <AppProgressSteps
               current={progress}
               items={[
-                {
-                  title: <>检查字段处理规则</>,
-                },
-                {
-                  title: <>缺失值处理</>,
-                },
-                {
-                  title: <>处理结果</>,
-                  description: <>{message[3]}</>,
-                },
+                { title: '检查字段处理规则', description: message[1] },
+                { title: '缺失值处理', description: message[2] },
+                { title: '处理结果', description: message[3] },
               ]}
             />
           </Flex>

src/modules/data/preprocess/repeat/api.ts

+import httpRequest from '@/utils/axios'
+import type { ProcessDataParams } from './types'
+
+// 缺省值处理
+export function processData(data: ProcessDataParams) {
+  return httpRequest.post('/api/resource/bi/v1/processing/pre-processing/duplicate', data)
+}

src/modules/data/preprocess/repeat/components/ButtonModal.tsx

@@ -4,6 +4,7 @@ import AppProgressSteps from '@/components/AppProgressSteps'
 import { useSearchParams } from 'react-router'
 import { useAI } from '@/hooks/useAI'
 import prompt from '@/utils/prompt'
+import { useProcessData } from '../query'
 
 export default function ButtonModal() {
   const [searchParams] = useSearchParams()
@@ -39,18 +40,28 @@ export default function ButtonModal() {
   const [current, setCurrent] = useState(0)
   const [form] = Form.useForm()
   const initialValues = {
-    rule: '1',
+    action: '保留1条，删除剩余重复数据',
   }
 
   const checkedList: string[] = Form.useWatch('checkedList', form) || []
 
-  const ruleOptions = [
-    { label: '保留1条，删除剩余重复数据', value: '1' },
-    { label: '全部删除', value: '2' },
-    { label: '不处理', value: '3' },
-  ]
+  const ruleOptions = ['保留1条，删除剩余重复数据', '全部删除', '不处理']
 
-  const [step, setStep] = useState<number>(-1)
+  const { mutate, isPending, progress, message, remove } = useProcessData()
+  // 开始处理
+  const handleStart = () => {
+    form.validateFields().then((values) => {
+      const params = { ...values }
+      mutate(params)
+    })
+  }
+
+  // 关闭并重置
+  const handleClose = () => {
+    setOpen(false)
+    setCurrent(0)
+    remove()
+  }
 
   const steps = [
     {
@@ -81,7 +92,7 @@ export default function ButtonModal() {
               </p>
             ))}
           </Form.Item>
-          <Form.Item label="处理规则" name="rule">
+          <Form.Item label="处理规则" name="action">
             <Radio.Group options={ruleOptions} />
           </Form.Item>
         </>
@@ -92,28 +103,15 @@ export default function ButtonModal() {
       content: (
         <>
           <Flex vertical align="center" style={{ marginTop: '20px' }}>
-            <Button type="primary" onClick={() => setStep(1)}>
+            <Button type="primary" loading={isPending} onClick={handleStart}>
               开始处理
             </Button>
             <AppProgressSteps
-              current={step}
+              current={progress}
               items={[
-                {
-                  title: <>检查字段处理规则</>,
-                },
-                {
-                  title: <>重复值处理</>,
-                },
-                {
-                  title: <>处理结果</>,
-                  description: (
-                    <>
-                      累计处理XX个字段
-                      <br />
-                      累计处理XX条记录
-                    </>
-                  ),
-                },
+                { title: '检查字段处理规则', description: message[1] },
+                { title: '重复值处理', description: message[2] },
+                { title: '处理结果', description: message[3] },
               ]}
             />
           </Flex>
@@ -144,7 +142,7 @@ export default function ButtonModal() {
               </Button>
             )}
             {current === steps.length - 1 && (
-              <Button type="primary" onClick={() => setOpen(false)}>
+              <Button type="primary" disabled={isPending} onClick={handleClose}>
                 关闭
               </Button>
             )}
@@ -152,7 +150,7 @@ export default function ButtonModal() {
         }
         destroyOnClose
         width={800}
-        onCancel={() => setOpen(false)}>
+        onCancel={handleClose}>
         <div style={{ minHeight: 300, padding: '20px 0' }}>
           <Form form={form} labelCol={{ span: 5 }} preserve={false} initialValues={initialValues}>
             {steps.map((item, index) => (

src/modules/data/preprocess/repeat/query.ts

+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { message } from 'antd'
+import { processData } from './api'
+import type { ProcessDataParams } from './types'
+import { useProcessProgressQuery } from '@/hooks/useQuery'
+
+// 处理数据
+export function useProcessData() {
+  const queryClient = useQueryClient()
+  const { data, start, remove } = useProcessProgressQuery({ function_name: 'duplicate' })
+
+  const query = useMutation({
+    mutationFn: (data: ProcessDataParams) => {
+      start()
+      return processData(data)
+    },
+    onSuccess: () => {
+      message.success('处理完成')
+      queryClient.invalidateQueries({ queryKey: ['data'] })
+    },
+  })
+
+  return { ...query, progress: data.progress, message: data.message, remove }
+}

src/modules/data/preprocess/repeat/types.ts

+export interface ProcessDataParams {
+  fields: string
+  action: string
+  rules: string
+  rule: string
+  specify: string
+}

src/modules/data/preprocess/sort/api.ts

+import httpRequest from '@/utils/axios'
+import type { ProcessDataParams } from './types'
+
+// 缺省值处理
+export function processData(data: ProcessDataParams) {
+  return httpRequest.post('/api/resource/bi/v1/processing/pre-processing/sort', data)
+}

src/modules/data/preprocess/sort/components/ButtonModal.tsx

@@ -8,6 +8,7 @@ import { Button, Flex, Modal, Form, Table, Radio } from 'antd'
 import { useDataFieldQuery } from '@/hooks/useQuery'
 import AppProgressSteps from '@/components/AppProgressSteps'
 import type { TableColumnsType } from 'antd'
+import { useProcessData } from '../query'
 
 interface DataType {
   key: number
@@ -44,7 +45,21 @@ export default function ButtonModal() {
   const [current, setCurrent] = useState(0)
   const [form] = Form.useForm()
   const [dataSource, setDataSource] = useState<DataType[]>([])
-  const [step, setStep] = useState<number>(-1)
+  const { mutate, isPending, progress, message, remove } = useProcessData()
+  // 开始处理
+  const handleStart = () => {
+    const fields = dataSource.map((item) => {
+      return { field: item.key, rule: item.new_value }
+    })
+    mutate({ fields: JSON.stringify(fields) })
+  }
+
+  // 关闭并重置
+  const handleClose = () => {
+    setOpen(false)
+    setCurrent(0)
+    remove()
+  }
 
   useEffect(() => {
     if (fields?.length) {
@@ -52,7 +67,7 @@ export default function ButtonModal() {
         fields.map((item: any, index) => ({
           key: index + 1,
           ...item,
-          new_value: '',
+          new_value: 'default',
         }))
       )
     }
@@ -82,9 +97,9 @@ export default function ButtonModal() {
   )
 
   const options = [
-    { label: '无序', value: '1' },
-    { label: '升序', value: '2' },
-    { label: '降序', value: '3' },
+    { label: '无序', value: 'default' },
+    { label: '升序', value: 'asc' },
+    { label: '降序', value: 'desc' },
   ]
 
   const columns: TableColumnsType<DataType> = [
@@ -128,13 +143,17 @@ export default function ButtonModal() {
       title: '处理执行',
       content: (
         <Flex vertical align="center" style={{ marginTop: '20px' }}>
-          <Button type="primary" onClick={() => setStep(1)}>
+          <Button type="primary" loading={isPending} onClick={handleStart}>
             开始处理
           </Button>
           <AppProgressSteps
             style={{ margin: '80px' }}
-            current={step}
-            items={[{ title: '第一步\n开始' }, { title: '第二步\n数据排序' }, { title: '第三步\n处理结果' }]}
+            current={progress}
+            items={[
+              { title: '第一步\n开始', description: message[1] },
+              { title: '第二步\n数据排序', description: message[2] },
+              { title: '第三步\n处理结果', description: message[3] },
+            ]}
           />
         </Flex>
       ),
@@ -158,7 +177,7 @@ export default function ButtonModal() {
               </Button>
             )}
             {current === steps.length - 1 && (
-              <Button type="primary" onClick={() => setOpen(false)}>
+              <Button type="primary" disabled={isPending} onClick={handleClose}>
                 关闭
               </Button>
             )}
@@ -166,7 +185,7 @@ export default function ButtonModal() {
         }
         destroyOnClose
         width={800}
-        onCancel={() => setOpen(false)}>
+        onCancel={handleClose}>
         <div style={{ minHeight: 300, padding: '20px 0' }}>
           <Form form={form} labelCol={{ span: 5 }} preserve={false}>
             {steps.map((item, index) => (

src/modules/data/preprocess/sort/query.ts

+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { message } from 'antd'
+import { processData } from './api'
+import type { ProcessDataParams } from './types'
+import { useProcessProgressQuery } from '@/hooks/useQuery'
+
+// 处理数据
+export function useProcessData() {
+  const queryClient = useQueryClient()
+  const { data, start, remove } = useProcessProgressQuery({ function_name: 'sort' })
+
+  const query = useMutation({
+    mutationFn: (data: ProcessDataParams) => {
+      start()
+      return processData(data)
+    },
+    onSuccess: () => {
+      message.success('处理完成')
+      queryClient.invalidateQueries({ queryKey: ['data'] })
+    },
+  })
+
+  return { ...query, progress: data.progress, message: data.message, remove }
+}

src/modules/data/preprocess/sort/types.ts

+export interface ProcessDataParams {
+  fields: string
+}

src/modules/data/preprocess/space/api.ts

+import httpRequest from '@/utils/axios'
+import type { ProcessDataParams } from './types'
+
+// 缺省值处理
+export function processData(data: ProcessDataParams) {
+  return httpRequest.post('/api/resource/bi/v1/processing/pre-processing/trim', data)
+}

src/modules/data/preprocess/space/components/ButtonModal.tsx

@@ -4,6 +4,7 @@ import { useDataFieldQuery } from '@/hooks/useQuery'
 import AppProgressSteps from '@/components/AppProgressSteps'
 import { useAI } from '@/hooks/useAI'
 import prompt from '@/utils/prompt'
+import { useProcessData } from '../query'
 
 export default function ButtonModal() {
   const { isLoading, post } = useAI({
@@ -24,33 +25,46 @@ export default function ButtonModal() {
     })
   }
 
-  const { fieldOptions } = useDataFieldQuery()
+  const { fieldOptions, getFieldName } = useDataFieldQuery()
 
   const [open, setOpen] = useState(false)
 
   const [current, setCurrent] = useState(0)
   const [form] = Form.useForm()
   const initialValues = {
-    checked: '',
-    rule: '1',
+    field: '',
+    rule: '开头去空格',
   }
 
-  const checked = Form.useWatch('checked', form)
+  const field = Form.useWatch('field', form)
 
   const ruleOptions = [
-    { label: '开头去空格', value: '1' },
-    { label: '结尾去空格', value: '2' },
-    { label: '中间去空格', value: '3' },
-    { label: '全部去空格', value: '4' },
+    { label: '开头去空格', value: '开头去空格' },
+    { label: '结尾去空格', value: '结尾去空格' },
+    { label: '中间去空格', value: '中间去空格' },
+    { label: '全部去空格', value: '全部去空格' },
   ]
 
-  const [step, setStep] = useState<number>(-1)
+  const { mutate, isPending, progress, message, remove } = useProcessData()
+  // 开始处理
+  const handleStart = () => {
+    form.validateFields().then((values) => {
+      mutate(values)
+    })
+  }
+
+  // 关闭并重置
+  const handleClose = () => {
+    setOpen(false)
+    setCurrent(0)
+    remove()
+  }
 
   const steps = [
     {
       title: '请选择数据去空格字段',
       content: (
-        <Form.Item name="checked" rules={[{ required: true, message: '请选择数据去空格字段' }]}>
+        <Form.Item name="field" rules={[{ required: true, message: '请选择数据去空格字段' }]}>
           <Radio.Group>
             <Row gutter={[10, 10]}>
               {fieldOptions.map((item) => (
@@ -67,7 +81,7 @@ export default function ButtonModal() {
       title: '配置处理规则',
       content: (
         <>
-          <Form.Item label="数据去空格处理字段">{checked}</Form.Item>
+          <Form.Item label="数据去空格处理字段">{getFieldName(field)}</Form.Item>
           <Form.Item label="处理规则" name="rule" rules={[{ required: true, message: '请选择处理规则' }]}>
             <Radio.Group options={ruleOptions} />
           </Form.Item>
@@ -78,29 +92,25 @@ export default function ButtonModal() {
       title: '处理执行',
       content: (
         <>
-          <p>数据去空格处理字段：{checked}</p>
+          <p>数据去空格处理字段：{getFieldName(field)}</p>
           <Flex vertical align="center" style={{ marginTop: '20px' }}>
-            <Button type="primary" onClick={() => setStep(1)}>
+            <Button type="primary" loading={isPending} onClick={handleStart}>
               开始处理
             </Button>
             <AppProgressSteps
-              current={step}
+              current={progress}
               items={[
                 {
-                  title: <>检查字段处理规则</>,
+                  title: '检查字段处理规则',
+                  description: message[1],
                 },
                 {
-                  title: <>数据去空格处理</>,
+                  title: '数据去空格处理',
+                  description: message[2],
                 },
                 {
-                  title: <>处理结果</>,
-                  description: (
-                    <>
-                      累计处理XX个字段
-                      <br />
-                      累计处理XX条记录
-                    </>
-                  ),
+                  title: '处理结果',
+                  description: message[3],
                 },
               ]}
             />
@@ -127,12 +137,12 @@ export default function ButtonModal() {
             )}
             {current > 0 && <Button onClick={() => setCurrent(current - 1)}>上一步</Button>}
             {current < steps.length - 1 && (
-              <Button type="primary" onClick={() => setCurrent(current + 1)} disabled={!checked}>
+              <Button type="primary" onClick={() => setCurrent(current + 1)} disabled={!field}>
                 下一步
               </Button>
             )}
             {current === steps.length - 1 && (
-              <Button type="primary" onClick={() => setOpen(false)}>
+              <Button type="primary" disabled={isPending} onClick={handleClose}>
                 关闭
               </Button>
             )}
@@ -140,7 +150,7 @@ export default function ButtonModal() {
         }
         destroyOnClose
         width={800}
-        onCancel={() => setOpen(false)}>
+        onCancel={handleClose}>
         <div style={{ minHeight: 300, padding: '20px 0' }}>
           <Form form={form} labelCol={{ span: 5 }} preserve={false} initialValues={initialValues}>
             {steps.map((item, index) => (

src/modules/data/preprocess/space/query.ts

+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { message } from 'antd'
+import { processData } from './api'
+import type { ProcessDataParams } from './types'
+import { useProcessProgressQuery } from '@/hooks/useQuery'
+
+// 处理数据
+export function useProcessData() {
+  const queryClient = useQueryClient()
+  const { data, start, remove } = useProcessProgressQuery({ function_name: 'trim' })
+
+  const query = useMutation({
+    mutationFn: (data: ProcessDataParams) => {
+      start()
+      return processData(data)
+    },
+    onSuccess: () => {
+      message.success('处理完成')
+      queryClient.invalidateQueries({ queryKey: ['data'] })
+    },
+  })
+
+  return { ...query, progress: data.progress, message: data.message, remove }
+}

src/modules/data/preprocess/space/types.ts

+export interface ProcessDataParams {
+  field: string
+  rule: string
+}

src/modules/data/preprocess/splice/api.ts

+import httpRequest from '@/utils/axios'
+import type { ProcessDataParams } from './types'
+
+// 缺省值处理
+export function processData(data: ProcessDataParams) {
+  return httpRequest.post('/api/resource/bi/v1/processing/pre-processing/merge', data)
+}

src/modules/data/preprocess/splice/components/ButtonModal.tsx

 import { useState } from 'react'
-import { Button, Flex, Modal, Radio, Input, Form, Select, message } from 'antd'
-import { useDataQuery, useDataFieldQuery } from '@/hooks/useQuery'
+import { Button, Flex, Modal, Radio, Input, Form, Select } from 'antd'
+import { useDataFieldQuery } from '@/hooks/useQuery'
 import AppProgressSteps from '@/components/AppProgressSteps'
+import { useProcessData } from '../query'
 
 export default function ButtonModal() {
-  const { data = { list: [] } } = useDataQuery() // Default value to prevent data being undefined
-  const { data: fields = [] } = useDataFieldQuery()
+  const { fieldOptions } = useDataFieldQuery()
 
   const [open, setOpen] = useState(false)
   const [current, setCurrent] = useState(0)
   const [form] = Form.useForm()
-  const [step, setStep] = useState(-1)
-  const [concatenatedFields, setConcatenatedFields] = useState<{ field: string; order: number }[]>([])
+  const [fields, setFields] = useState<{ field: string; order: number }[]>([])
 
-  // Process the concatenation
+  const { mutate, isPending, progress, message, remove } = useProcessData()
+  // 开始处理
   const handleStart = () => {
-    setStep(0)
-    // Simulate processing steps with timeouts
-    setTimeout(() => {
-      setStep(1)
-      setTimeout(() => {
-        setStep(3)
-        message.success('数据拼接处理完成！')
-      }, 1000)
-    }, 1000)
+    form.validateFields().then((values) => {
+      mutate({ ...values, fields: JSON.stringify(fields) })
+    })
+  }
+
+  // 关闭并重置
+  const handleClose = () => {
+    setOpen(false)
+    setCurrent(0)
+    remove()
+  }
+
+  // 下一步
+  const handleNext = async () => {
+    await form.validateFields()
+    setCurrent(current + 1)
   }
 
   // Add concatenation field
-  const addConcatenationField = () => {
+  const addField = () => {
     const newField = form.getFieldValue('fieldToAdd')
     if (!newField) {
       message.warning('请选择要添加的字段')
@@ -35,21 +42,21 @@ export default function ButtonModal() {
     }
 
     const updatedFields = [
-      ...concatenatedFields,
+      ...fields,
       {
         field: newField,
-        order: concatenatedFields.length,
+        order: fields.length,
       },
     ]
 
-    setConcatenatedFields(updatedFields)
+    setFields(updatedFields)
     form.setFieldsValue({ fieldToAdd: undefined })
   }
 
   // Move field up in order
   const moveFieldUp = (index: number) => {
     if (index <= 0) return
-    const newFields = [...concatenatedFields]
+    const newFields = [...fields]
     const temp = newFields[index]
     newFields[index] = newFields[index - 1]
     newFields[index - 1] = temp
@@ -59,13 +66,13 @@ export default function ButtonModal() {
       field.order = idx
     })
 
-    setConcatenatedFields(newFields)
+    setFields(newFields)
   }
 
   // Move field down in order
   const moveFieldDown = (index: number) => {
-    if (index >= concatenatedFields.length - 1) return
-    const newFields = [...concatenatedFields]
+    if (index >= fields.length - 1) return
+    const newFields = [...fields]
     const temp = newFields[index]
     newFields[index] = newFields[index + 1]
     newFields[index + 1] = temp
@@ -75,19 +82,19 @@ export default function ButtonModal() {
       field.order = idx
     })
 
-    setConcatenatedFields(newFields)
+    setFields(newFields)
   }
 
   // Remove field from list
   const removeField = (index: number) => {
-    const newFields = concatenatedFields.filter((_, idx) => idx !== index)
+    const newFields = fields.filter((_, idx) => idx !== index)
 
     // Update order property
     newFields.forEach((field, idx) => {
       field.order = idx
     })
 
-    setConcatenatedFields(newFields)
+    setFields(newFields)
   }
 
   // Steps definition
@@ -108,38 +115,32 @@ export default function ButtonModal() {
           <Form.Item
             label="拼接新字段类型"
             name="fieldType"
-            rules={[{ required: true, message: '请选择拼接新字段类型' }]}>
-            <Radio.Group options={[{ label: '文本', value: 'text' }]} />
+            rules={[{ required: true, message: '请选择拼接新字段类型' }]}
+            initialValue="string">
+            <Radio.Group options={[{ label: '文本', value: 'string' }]} />
           </Form.Item>
           <Form.Item
             label="请选择数据拼接字段"
-            name="selectedFields"
+            name="fields"
             rules={[
               {
                 required: true,
                 message: '请添加至少一个拼接字段',
-                validator: () =>
-                  concatenatedFields.length > 0 ? Promise.resolve() : Promise.reject('请添加至少一个拼接字段'),
+                validator: () => (fields.length > 0 ? Promise.resolve() : Promise.reject('请添加至少一个拼接字段')),
               },
             ]}>
             <div>
               <Flex gap={10}>
                 <Form.Item name="fieldToAdd" noStyle>
-                  <Select
-                    placeholder="选择要添加的字段"
-                    options={fields.map((item) => ({
-                      label: `${item.name} (${item.english_name})`,
-                      value: item.english_name,
-                    }))}
-                  />
+                  <Select placeholder="选择要添加的字段" options={fieldOptions} />
                 </Form.Item>
-                <Button type="primary" onClick={addConcatenationField}>
+                <Button type="primary" onClick={addField}>
                   添加拼接字段
                 </Button>
               </Flex>
 
-              {concatenatedFields.map((item, index) => {
-                const fieldInfo = fields.find((f) => f.english_name === item.field)
+              {fields.map((item, index) => {
+                const fieldInfo = fieldOptions.find((f) => f.value === item.field)
                 return (
                   <Flex key={index} gap={10} style={{ marginTop: '10px' }}>
                     <div style={{ flex: 1, border: '1px solid #d9d9d9', padding: '4px 11px', borderRadius: '6px' }}>
@@ -148,10 +149,7 @@ export default function ButtonModal() {
                     <Button type="text" disabled={index === 0} onClick={() => moveFieldUp(index)}>
                       上移
                     </Button>
-                    <Button
-                      type="text"
-                      disabled={index === concatenatedFields.length - 1}
-                      onClick={() => moveFieldDown(index)}>
+                    <Button type="text" disabled={index === fields.length - 1} onClick={() => moveFieldDown(index)}>
                       下移
                     </Button>
                     <Button type="text" danger onClick={() => removeField(index)}>
@@ -170,27 +168,23 @@ export default function ButtonModal() {
       content: (
         <>
           <Flex vertical align="center" style={{ marginTop: '20px' }}>
-            <Button type="primary" onClick={handleStart} disabled={step >= 0}>
+            <Button type="primary" loading={isPending} onClick={handleStart}>
               开始处理
             </Button>
             <AppProgressSteps
-              current={step}
+              current={progress}
               items={[
                 {
-                  title: <>新增字段</>,
+                  title: '新增字段',
+                  description: message[1],
                 },
                 {
-                  title: <>数据拼接</>,
+                  title: '数据拼接',
+                  description: message[2],
                 },
                 {
-                  title: <>处理结果</>,
-                  description: (
-                    <>
-                      累计处理{concatenatedFields.length}个字段
-                      <br />
-                      累计处理{data.list?.length || 0}条记录
-                    </>
-                  ),
+                  title: '处理结果',
+                  description: message[3],
                 },
               ]}
             />
@@ -200,28 +194,6 @@ export default function ButtonModal() {
     },
   ]
 
-  // Handle next button logic
-  const handleNext = async () => {
-    try {
-      if (current === 0) {
-        // Validate the first step form
-        await form.validateFields(['name', 'english_name', 'fieldType', 'selectedFields'])
-      }
-      setCurrent(current + 1)
-    } catch (error) {
-      // Form validation error handling
-      console.error('表单验证失败', error)
-    }
-  }
-
-  // Reset everything when modal closes
-  const handleCancel = () => {
-    setOpen(false)
-    setCurrent(0)
-    setStep(-1)
-    setConcatenatedFields([])
-  }
-
   return (
     <>
       <Button type="primary" onClick={() => setOpen(true)}>
@@ -239,7 +211,7 @@ export default function ButtonModal() {
               </Button>
             )}
             {current === steps.length - 1 && (
-              <Button type="primary" onClick={handleCancel}>
+              <Button type="primary" disabled={isPending} onClick={handleClose}>
                 关闭
               </Button>
             )}
@@ -247,7 +219,7 @@ export default function ButtonModal() {
         }
         destroyOnClose
         width={800}
-        onCancel={handleCancel}>
+        onCancel={handleClose}>
         <div style={{ minHeight: 300, padding: '20px 0' }}>
           <Form form={form} labelCol={{ span: 5 }} preserve={false}>
             {steps.map((item, index) => (

src/modules/data/preprocess/splice/query.ts

+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { message } from 'antd'
+import { processData } from './api'
+import type { ProcessDataParams } from './types'
+import { useProcessProgressQuery } from '@/hooks/useQuery'
+
+// 处理数据
+export function useProcessData() {
+  const queryClient = useQueryClient()
+  const { data, start, remove } = useProcessProgressQuery({ function_name: 'merge' })
+
+  const query = useMutation({
+    mutationFn: (data: ProcessDataParams) => {
+      start()
+      return processData(data)
+    },
+    onSuccess: () => {
+      message.success('处理完成')
+      queryClient.invalidateQueries({ queryKey: ['data'] })
+    },
+  })
+
+  return { ...query, progress: data.progress, message: data.message, remove }
+}

src/modules/data/preprocess/splice/types.ts

+export interface ProcessDataParams {
+  name: string
+  english_name: string
+  fields: string
+}

src/modules/data/preprocess/split/api.ts

+import httpRequest from '@/utils/axios'
+import type { ProcessDataParams } from './types'
+
+// 缺省值处理
+export function processData(data: ProcessDataParams) {
+  return httpRequest.post('/api/resource/bi/v1/processing/pre-processing/split', data)
+}

src/modules/data/preprocess/split/components/ButtonModal.tsx

@@ -2,36 +2,50 @@ import { useState } from 'react'
 import { Button, Flex, Modal, Radio, Form, Row, Col } from 'antd'
 import { useDataFieldQuery } from '@/hooks/useQuery'
 import AppProgressSteps from '@/components/AppProgressSteps'
+import { useProcessData } from '../query'
 
 export default function ButtonModal() {
-  const { fieldOptions } = useDataFieldQuery()
+  const { fieldOptions, getFieldName } = useDataFieldQuery()
 
   const [open, setOpen] = useState(false)
 
   const [current, setCurrent] = useState(0)
   const [form] = Form.useForm()
   const initialValues = {
-    checked: '',
-    rule: '1',
+    field: '',
+    char: ';',
   }
 
-  const checked = Form.useWatch('checked', form)
+  const field = Form.useWatch('field', form)
 
   const ruleOptions = [
-    { label: '分号“;”', value: '1' },
-    { label: '逗号“,”', value: '2' },
-    { label: '空格“ ”', value: '3' },
+    { label: '分号“;”', value: ';' },
+    { label: '逗号“,”', value: ',' },
+    { label: '空格“ ”', value: ' ' },
     // { label: '特定字符', value: '4' },
     // { label: '前几个字符', value: '5' },
   ]
 
-  const [step, setStep] = useState<number>(-1)
+  const { mutate, isPending, progress, message, remove } = useProcessData()
+  // 开始处理
+  const handleStart = () => {
+    form.validateFields().then((values) => {
+      mutate(values)
+    })
+  }
+
+  // 关闭并重置
+  const handleClose = () => {
+    setOpen(false)
+    setCurrent(0)
+    remove()
+  }
 
   const steps = [
     {
       title: '请选择数据拆分字段',
       content: (
-        <Form.Item name="checked" rules={[{ required: true, message: '请选择数据拆分字段' }]}>
+        <Form.Item name="field" rules={[{ required: true, message: '请选择数据拆分字段' }]}>
           <Radio.Group>
             <Row gutter={[10, 10]}>
               {fieldOptions.map((item) => (
@@ -48,8 +62,8 @@ export default function ButtonModal() {
       title: '配置处理规则',
       content: (
         <>
-          <Form.Item label="数据拆分字段">{checked}</Form.Item>
-          <Form.Item label="处理规则" name="rule" rules={[{ required: true, message: '请选择处理规则' }]}>
+          <Form.Item label="数据拆分字段">{getFieldName(field)}</Form.Item>
+          <Form.Item label="处理规则" name="char" rules={[{ required: true, message: '请选择处理规则' }]}>
             <Radio.Group options={ruleOptions} />
           </Form.Item>
         </>
@@ -59,34 +73,33 @@ export default function ButtonModal() {
       title: '处理执行',
       content: (
         <>
-          <p>数据拆分处理字段：{checked}</p>
+          <p>数据拆分处理字段：{getFieldName(field)}</p>
           <Flex vertical align="center" style={{ marginTop: '20px' }}>
-            <Button type="primary" onClick={() => setStep(3)}>
+            <Button type="primary" loading={isPending} onClick={handleStart}>
               开始处理
             </Button>
             <AppProgressSteps
-              current={step}
+              current={progress}
               items={[
                 {
-                  title: <>计算拆分字段</>,
+                  title: '计算拆分字段',
+                  description: message[1],
                 },
                 {
-                  title: <>数据库表增加拆分字段</>,
+                  title: '数据库表增加拆分字段',
+                  description: message[2],
                 },
                 {
-                  title: <>更新拆分字段</>,
+                  title: '更新拆分字段',
+                  description: message[3],
                 },
                 {
-                  title: <>更新原始字段</>,
+                  title: '更新原始字段',
+                  description: message[4],
                 },
                 {
-                  title: (
-                    <>
-                      第五步
-                      <br />
-                      处理结果
-                    </>
-                  ),
+                  title: '处理结果',
+                  description: message[5],
                 },
               ]}
             />
@@ -108,12 +121,12 @@ export default function ButtonModal() {
           <Flex justify="center" gap={20}>
             {current > 0 && <Button onClick={() => setCurrent(current - 1)}>上一步</Button>}
             {current < steps.length - 1 && (
-              <Button type="primary" onClick={() => setCurrent(current + 1)} disabled={!checked}>
+              <Button type="primary" onClick={() => setCurrent(current + 1)} disabled={!field}>
                 下一步
               </Button>
             )}
             {current === steps.length - 1 && (
-              <Button type="primary" onClick={() => setOpen(false)}>
+              <Button type="primary" disabled={isPending} onClick={handleClose}>
                 关闭
               </Button>
             )}
@@ -121,7 +134,7 @@ export default function ButtonModal() {
         }
         destroyOnClose
         width={800}
-        onCancel={() => setOpen(false)}>
+        onCancel={handleClose}>
         <div style={{ minHeight: 300, padding: '20px 0' }}>
           <Form form={form} labelCol={{ span: 5 }} preserve={false} initialValues={initialValues}>
             {steps.map((item, index) => (

src/modules/data/preprocess/split/query.ts

+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { message } from 'antd'
+import { processData } from './api'
+import type { ProcessDataParams } from './types'
+import { useProcessProgressQuery } from '@/hooks/useQuery'
+
+// 处理数据
+export function useProcessData() {
+  const queryClient = useQueryClient()
+  const { data, start, remove } = useProcessProgressQuery({ function_name: 'split' })
+
+  const query = useMutation({
+    mutationFn: (data: ProcessDataParams) => {
+      start()
+      return processData(data)
+    },
+    onSuccess: () => {
+      message.success('处理完成')
+      queryClient.invalidateQueries({ queryKey: ['data'] })
+    },
+  })
+
+  return { ...query, progress: data.progress, message: data.message, remove }
+}

src/modules/data/preprocess/split/types.ts

+export interface ProcessDataParams {
+  field: string
+  char: string
+  rule: string
+}

src/modules/data/preprocess/symbol/api.ts

+import httpRequest from '@/utils/axios'
+import type { ProcessDataParams } from './types'
+
+// 缺省值处理
+export function processData(data: ProcessDataParams) {
+  return httpRequest.post('/api/resource/bi/v1/processing/pre-processing/punctuation', data)
+}

src/modules/data/preprocess/symbol/components/ButtonModal.tsx

@@ -2,28 +2,42 @@ import { useState } from 'react'
 import { Button, Flex, Modal, Radio, Form, Row, Col, Input } from 'antd'
 import { useDataFieldQuery } from '@/hooks/useQuery'
 import AppProgressSteps from '@/components/AppProgressSteps'
+import { useProcessData } from '../query'
 
 export default function ButtonModal() {
-  const { fieldOptions } = useDataFieldQuery()
+  const { fieldOptions, getFieldName } = useDataFieldQuery()
 
   const [open, setOpen] = useState(false)
 
   const [current, setCurrent] = useState(0)
   const [form] = Form.useForm()
   const initialValues = {
-    checked: '',
-    rule: '',
+    field: '',
+    char: '',
   }
 
-  const checked = Form.useWatch('checked', form)
+  const field = Form.useWatch('field', form)
 
-  const [step, setStep] = useState<number>(-1)
+  const { mutate, isPending, progress, message, remove } = useProcessData()
+  // 开始处理
+  const handleStart = () => {
+    form.validateFields().then((values) => {
+      mutate(values)
+    })
+  }
+
+  // 关闭并重置
+  const handleClose = () => {
+    setOpen(false)
+    setCurrent(0)
+    remove()
+  }
 
   const steps = [
     {
       title: '请选择去标点字段',
       content: (
-        <Form.Item name="checked" rules={[{ required: true, message: '请选择去标点字段' }]}>
+        <Form.Item name="field" rules={[{ required: true, message: '请选择去标点字段' }]}>
           <Radio.Group>
             <Row gutter={[10, 10]}>
               {fieldOptions.map((item) => (
@@ -40,8 +54,8 @@ export default function ButtonModal() {
       title: '配置处理规则',
       content: (
         <>
-          <Form.Item label="数据去标点字段">{checked}</Form.Item>
-          <Form.Item label="处理规则" name="rule" rules={[{ required: true, message: '请输入处理规则' }]}>
+          <Form.Item label="数据去标点字段">{getFieldName(field)}</Form.Item>
+          <Form.Item label="处理规则" name="char" rules={[{ required: true, message: '请输入处理规则' }]}>
             <Input />
           </Form.Item>
         </>
@@ -51,22 +65,25 @@ export default function ButtonModal() {
       title: '处理执行',
       content: (
         <>
-          <p>数据去标点处理字段：{checked}</p>
+          <p>数据去标点处理字段：{getFieldName(field)}</p>
           <Flex vertical align="center" style={{ marginTop: '20px' }}>
-            <Button type="primary" onClick={() => setStep(1)}>
+            <Button type="primary" loading={isPending} onClick={handleStart}>
               开始处理
             </Button>
             <AppProgressSteps
-              current={step}
+              current={progress}
               items={[
                 {
-                  title: <>开始</>,
+                  title: '开始',
+                  description: message[1],
                 },
                 {
-                  title: <>数据去标点处理</>,
+                  title: '数据去标点处理',
+                  description: message[2],
                 },
                 {
-                  title: <>处理结果</>,
+                  title: '处理结果',
+                  description: message[3],
                 },
               ]}
             />
@@ -88,12 +105,12 @@ export default function ButtonModal() {
           <Flex justify="center" gap={20}>
             {current > 0 && <Button onClick={() => setCurrent(current - 1)}>上一步</Button>}
             {current < steps.length - 1 && (
-              <Button type="primary" onClick={() => setCurrent(current + 1)} disabled={!checked}>
+              <Button type="primary" onClick={() => setCurrent(current + 1)} disabled={!field}>
                 下一步
               </Button>
             )}
             {current === steps.length - 1 && (
-              <Button type="primary" onClick={() => setOpen(false)}>
+              <Button type="primary" disabled={isPending} onClick={handleClose}>
                 关闭
               </Button>
             )}
@@ -101,7 +118,7 @@ export default function ButtonModal() {
         }
         destroyOnClose
         width={800}
-        onCancel={() => setOpen(false)}>
+        onCancel={handleClose}>
         <div style={{ minHeight: 300, padding: '20px 0' }}>
           <Form form={form} labelCol={{ span: 5 }} preserve={false} initialValues={initialValues}>
             {steps.map((item, index) => (

src/modules/data/preprocess/symbol/query.ts

+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { message } from 'antd'
+import { processData } from './api'
+import type { ProcessDataParams } from './types'
+import { useProcessProgressQuery } from '@/hooks/useQuery'
+
+// 处理数据
+export function useProcessData() {
+  const queryClient = useQueryClient()
+  const { data, start, remove } = useProcessProgressQuery({ function_name: 'punctuation' })
+
+  const query = useMutation({
+    mutationFn: (data: ProcessDataParams) => {
+      start()
+      return processData(data)
+    },
+    onSuccess: () => {
+      message.success('处理完成')
+      queryClient.invalidateQueries({ queryKey: ['data'] })
+    },
+  })
+
+  return { ...query, progress: data.progress, message: data.message, remove }
+}

src/modules/data/preprocess/symbol/types.ts

+export interface ProcessDataParams {
+  field: string
+  rule: string
+}

src/modules/data/preprocess/type/api.ts

+import httpRequest from '@/utils/axios'
+import type { ProcessDataParams } from './types'
+
+// 缺省值处理
+export function processData(data: ProcessDataParams) {
+  return httpRequest.post('/api/resource/bi/v1/processing/pre-processing/type', data)
+}

src/modules/data/preprocess/type/components/ButtonModal.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react'
 import { Button, Flex, Modal, Form, Table, Select } from 'antd'
 import { useDataFieldQuery } from '@/hooks/useQuery'
 import AppProgressSteps from '@/components/AppProgressSteps'
+import { useProcessData } from '../query'
 
 export default function ButtonModal() {
   const { data: fields = [] } = useDataFieldQuery()
@@ -11,7 +12,20 @@ export default function ButtonModal() {
   const [current, setCurrent] = useState(0)
   const [form] = Form.useForm()
   const [dataSource, setDataSource] = useState<{ key: number; raw_value: string; new_value: string }[]>([])
-  const [step, setStep] = useState<number>(-1)
+  const { mutate, isPending, progress, message, remove } = useProcessData()
+  // 开始处理
+  const handleStart = () => {
+    form.validateFields().then((values) => {
+      mutate(values)
+    })
+  }
+
+  // 关闭并重置
+  const handleClose = () => {
+    setOpen(false)
+    setCurrent(0)
+    remove()
+  }
 
   useEffect(() => {
     if (fields?.length) {
@@ -34,12 +48,7 @@ export default function ButtonModal() {
     )
   }
 
-  const options = [
-    {
-      label: '文本',
-      value: 'text',
-    },
-  ]
+  const options = [{ label: '文本', value: 'string' }]
   const steps = [
     {
       title: '请选择转换字段',
@@ -76,21 +85,15 @@ export default function ButtonModal() {
       content: (
         <>
           <Flex vertical align="center" style={{ marginTop: '20px' }}>
-            <Button type="primary" onClick={() => setStep(1)}>
+            <Button type="primary" loading={isPending} onClick={handleStart}>
               开始处理
             </Button>
             <AppProgressSteps
-              current={step}
+              current={progress}
               items={[
-                {
-                  title: <>开始</>,
-                },
-                {
-                  title: <>数据类型转换</>,
-                },
-                {
-                  title: <>处理结果</>,
-                },
+                { title: '开始', description: message[1] },
+                { title: '数据类型转换', description: message[2] },
+                { title: '处理结果', description: message[3] },
               ]}
             />
           </Flex>
@@ -116,7 +119,7 @@ export default function ButtonModal() {
               </Button>
             )}
             {current === steps.length - 1 && (
-              <Button type="primary" onClick={() => setOpen(false)}>
+              <Button type="primary" disabled={isPending} onClick={handleClose}>
                 关闭
               </Button>
             )}
@@ -124,7 +127,7 @@ export default function ButtonModal() {
         }
         destroyOnClose
         width={800}
-        onCancel={() => setOpen(false)}>
+        onCancel={handleClose}>
         <div style={{ minHeight: 300, padding: '20px 0' }}>
           <Form form={form} labelCol={{ span: 5 }} preserve={false}>
             {steps.map((item, index) => (

src/modules/data/preprocess/type/query.ts

+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { message } from 'antd'
+import { processData } from './api'
+import type { ProcessDataParams } from './types'
+import { useProcessProgressQuery } from '@/hooks/useQuery'
+
+// 处理数据
+export function useProcessData() {
+  const queryClient = useQueryClient()
+  const { data, start, remove } = useProcessProgressQuery({ function_name: 'type' })
+
+  const query = useMutation({
+    mutationFn: (data: ProcessDataParams) => {
+      start()
+      return processData(data)
+    },
+    onSuccess: () => {
+      message.success('处理完成')
+      queryClient.invalidateQueries({ queryKey: ['data'] })
+    },
+  })
+
+  return { ...query, progress: data.progress, message: data.message, remove }
+}

src/modules/data/preprocess/type/types.ts

+export interface ProcessDataParams {
+  fields: string
+  action: string
+  rules: string
+  rule: string
+  specify: string
+}