diff --git a/web/app/components/datasets/documents/detail/completed/batch-action.tsx b/web/app/components/datasets/documents/detail/completed/batch-action.tsx
index 542a861723..c158af3047 100644
--- a/web/app/components/datasets/documents/detail/completed/batch-action.tsx
+++ b/web/app/components/datasets/documents/detail/completed/batch-action.tsx
@@ -56,7 +56,7 @@ const BatchAction: FC<IBatchActionProps> = ({
         {onArchive && (
           <div className='flex items-center gap-x-0.5 px-3 py-2'>
             <RiArchive2Line className='w-4 h-4 text-components-button-ghost-text' />
-            <button className='px-0.5 text-components-button-ghost-text text-[13px] font-medium leading-[16px]' onClick={onBatchDisable}>
+            <button className='px-0.5 text-components-button-ghost-text text-[13px] font-medium leading-[16px]' onClick={onArchive}>
               {t(`${i18nPrefix}.archive`)}
             </button>
           </div>
diff --git a/web/app/components/datasets/documents/list.tsx b/web/app/components/datasets/documents/list.tsx
index ac3774cda8..ce35e78a8a 100644
--- a/web/app/components/datasets/documents/list.tsx
+++ b/web/app/components/datasets/documents/list.tsx
@@ -28,14 +28,14 @@ import Divider from '@/app/components/base/divider'
 import Popover from '@/app/components/base/popover'
 import Confirm from '@/app/components/base/confirm'
 import Tooltip from '@/app/components/base/tooltip'
-import { ToastContext } from '@/app/components/base/toast'
+import Toast, { ToastContext } from '@/app/components/base/toast'
 import type { ColorMap, IndicatorProps } from '@/app/components/header/indicator'
 import Indicator from '@/app/components/header/indicator'
 import { asyncRunSafe } from '@/utils'
 import { formatNumber } from '@/utils/format'
 import NotionIcon from '@/app/components/base/notion-icon'
 import ProgressBar from '@/app/components/base/progress-bar'
-import { ChuckingMode, DataSourceType, type DocumentDisplayStatus, type SimpleDocumentDetail } from '@/models/datasets'
+import { ChuckingMode, DataSourceType, DocumentActionType, type DocumentDisplayStatus, type SimpleDocumentDetail } from '@/models/datasets'
 import type { CommonResponse } from '@/models/common'
 import useTimestamp from '@/hooks/use-timestamp'
 import { useDatasetDetailContextWithSelector as useDatasetDetailContext } from '@/context/dataset-detail'
@@ -103,11 +103,11 @@ export const StatusItem: FC<{
         break
     }
     const [e] = await asyncRunSafe<CommonResponse>(opApi({ datasetId, documentId: id }) as Promise<CommonResponse>)
-    if (!e)
+    if (!e) {
       notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
-    else
-      notify({ type: 'error', message: t('common.actionMsg.modifiedUnsuccessfully') })
-    onUpdate?.(operationName)
+      onUpdate?.(operationName)
+    }
+    else { notify({ type: 'error', message: t('common.actionMsg.modifiedUnsuccessfully') }) }
   }
 
   const { run: handleSwitch } = useDebounceFn((operationName: OperationName) => {
@@ -219,13 +219,13 @@ export const OperationAction: FC<{
         break
     }
     const [e] = await asyncRunSafe<CommonResponse>(opApi({ datasetId, documentId: id }) as Promise<CommonResponse>)
-    if (!e)
+    if (!e) {
       notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
-    else
-      notify({ type: 'error', message: t('common.actionMsg.modifiedUnsuccessfully') })
+      onUpdate(operationName)
+    }
+    else { notify({ type: 'error', message: t('common.actionMsg.modifiedUnsuccessfully') }) }
     if (operationName === 'delete')
       setDeleting(false)
-    onUpdate(operationName)
   }
 
   const { run: handleSwitch } = useDebounceFn((operationName: OperationName) => {
@@ -462,6 +462,37 @@ const DocumentList: FC<IDocumentListProps> = ({
     else
       onSelectedIdChange(uniq([...selectedIds, ...localDocs.map(doc => doc.id)]))
   }, [isAllSelected, localDocs, onSelectedIdChange, selectedIds])
+  const { mutateAsync: archiveDocument } = useDocumentArchive()
+  const { mutateAsync: enableDocument } = useDocumentEnable()
+  const { mutateAsync: disableDocument } = useDocumentDisable()
+  const { mutateAsync: deleteDocument } = useDocumentDelete()
+
+  const handleAction = (actionName: DocumentActionType) => {
+    return async () => {
+      let opApi = deleteDocument
+      switch (actionName) {
+        case DocumentActionType.archive:
+          opApi = archiveDocument
+          break
+        case DocumentActionType.enable:
+          opApi = enableDocument
+          break
+        case DocumentActionType.disable:
+          opApi = disableDocument
+          break
+        default:
+          opApi = deleteDocument
+          break
+      }
+      const [e] = await asyncRunSafe<CommonResponse>(opApi({ datasetId, documentIds: selectedIds }) as Promise<CommonResponse>)
+
+      if (!e) {
+        Toast.notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
+        onUpdate()
+      }
+      else { Toast.notify({ type: 'error', message: t('common.actionMsg.modifiedUnsuccessfully') }) }
+    }
+  }
 
   return (
     <div className='relative w-full h-full overflow-x-auto'>
@@ -588,16 +619,10 @@ const DocumentList: FC<IDocumentListProps> = ({
         <BatchAction
           className='absolute left-0 bottom-16 z-20'
           selectedIds={selectedIds}
-          onArchive={() => { }}
-          onBatchEnable={() => {
-
-          }}
-          onBatchDisable={() => {
-
-          }}
-          onBatchDelete={() => {
-
-          }}
+          onArchive={handleAction(DocumentActionType.archive)}
+          onBatchEnable={handleAction(DocumentActionType.enable)}
+          onBatchDisable={handleAction(DocumentActionType.disable)}
+          onBatchDelete={handleAction(DocumentActionType.delete)}
           onCancel={() => {
             onSelectedIdChange([])
           }}
diff --git a/web/models/datasets.ts b/web/models/datasets.ts
index 3bcea75a4a..a57b6ed13b 100644
--- a/web/models/datasets.ts
+++ b/web/models/datasets.ts
@@ -620,11 +620,13 @@ export type UpdateDocumentParams = {
   documentId: string
 }
 
-export enum BatchActionType {
+// Used in api url
+export enum DocumentActionType {
   enable = 'enable',
   disable = 'disable',
   archive = 'archive',
   unArchive = 'un_archive',
+  delete = 'delete',
 }
 
 export type UpdateDocumentBatchParams = {
diff --git a/web/service/knowledge/use-document.ts b/web/service/knowledge/use-document.ts
index d90480dcd1..5b200d899d 100644
--- a/web/service/knowledge/use-document.ts
+++ b/web/service/knowledge/use-document.ts
@@ -4,7 +4,7 @@ import {
 } from '@tanstack/react-query'
 import { del, get, patch } from '../base'
 import type { SimpleDocumentDetail, UpdateDocumentBatchParams } from '@/models/datasets'
-import { BatchActionType } from '@/models/datasets'
+import { DocumentActionType } from '@/models/datasets'
 import type { CommonResponse } from '@/models/common'
 
 const NAME_SPACE = 'knowledge/document'
@@ -29,10 +29,10 @@ export const useDocumentList = (payload: {
 
 const toBatchDocumentsIdParams = (documentIds: string[] | string) => {
   const ids = Array.isArray(documentIds) ? documentIds : [documentIds]
-  return ids.map(id => `document_id=${id}`).join('=')
+  return ids.map(id => `document_id=${id}`).join('&')
 }
 
-export const useDocumentBatchAction = (action: BatchActionType) => {
+export const useDocumentBatchAction = (action: DocumentActionType) => {
   return useMutation({
     mutationFn: ({ datasetId, documentIds, documentId }: UpdateDocumentBatchParams) => {
       return patch<CommonResponse>(`/datasets/${datasetId}/documents/status/${action}?${toBatchDocumentsIdParams(documentId || documentIds!)}`)
@@ -41,19 +41,19 @@ export const useDocumentBatchAction = (action: BatchActionType) => {
 }
 
 export const useDocumentEnable = () => {
-  return useDocumentBatchAction(BatchActionType.enable)
+  return useDocumentBatchAction(DocumentActionType.enable)
 }
 
 export const useDocumentDisable = () => {
-  return useDocumentBatchAction(BatchActionType.disable)
+  return useDocumentBatchAction(DocumentActionType.disable)
 }
 
 export const useDocumentArchive = () => {
-  return useDocumentBatchAction(BatchActionType.archive)
+  return useDocumentBatchAction(DocumentActionType.archive)
 }
 
 export const useDocumentUnArchive = () => {
-  return useDocumentBatchAction(BatchActionType.unArchive)
+  return useDocumentBatchAction(DocumentActionType.unArchive)
 }
 
 export const useDocumentDelete = () => {