diff --git a/frontend/src/components/PGTable.vue b/frontend/src/components/PGTable.vue
index 50f9401ecad179b24c1d9bc6433089820bcdd57f..00b68d8450ada54a9d7ca95ebf0523087d5256c8 100644
--- a/frontend/src/components/PGTable.vue
+++ b/frontend/src/components/PGTable.vue
@@ -22,6 +22,7 @@
 </template>
 
 <script lang="ts" setup>
+import { toRaw } from "vue";
 
 const props = defineProps({
     title: String,
@@ -32,7 +33,7 @@ const props = defineProps({
     },
     data: Array,
     selectedData: {
-        type: Array as any,
+        type: Array,
         default: [],
     },
 
@@ -54,8 +55,15 @@ const props = defineProps({
     }
 })
 
-const onSelectionChange = (val: []) => {
-    props.selectedData.value = val
+const emit = defineEmits(['update:selectedData'])
+
+const onSelectionChange = (val: any[]) => {
+    let d:any[] = []
+    val.forEach((item:any)=> {
+        d.push(toRaw(item))
+    })
+
+    emit('update:selectedData', d)
 }
 
 </script>
diff --git a/frontend/src/views/Batch/Batch.vue b/frontend/src/views/Batch/Batch.vue
index 9ed8667aa67861577cc8a955914ed67062cb58df..4251424f7d38f427711113006f66984ccb635969 100644
--- a/frontend/src/views/Batch/Batch.vue
+++ b/frontend/src/views/Batch/Batch.vue
@@ -1,6 +1,7 @@
 <template>
     <div class="container">
-        <PGTable :data="batches" title="批次列表" :showSelect="true" :total="total" :currentPage="currentPage">
+        <PGTable :data="batches" title="批次列表" :showSelect="true" :total="total" :currentPage="currentPage"
+            v-model:selectedData="selectedBatches">
             <template v-slot:action>
                 <el-dropdown>
                     <el-button type="primary">
@@ -48,13 +49,13 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted } from "vue";
+import { ref, onMounted, toRaw } from "vue";
 import AuthButton from "@/components/AuthButton.vue";
 import PGTable from "@/components/PGTable.vue";
 import { ElMessage, ElMessageBox } from 'element-plus';
 
 import { RespCodeOK } from "@/request/request";
-import { getBatches } from '@/request/batch';
+import { getBatches, deleteBatch } from '@/request/batch';
 
 const batches = ref([])
 const currentPage = ref(1)
@@ -77,6 +78,8 @@ onMounted(() => {
     })
 })
 
+const selectedBatches = ref<any[]>()
+
 function batchDelete() {
     ElMessageBox.confirm(
         '确定要删除该批次？',
@@ -87,12 +90,26 @@ function batchDelete() {
             type: 'warning',
         })
         .then(() => {
-            ElMessage({
-                type: 'success',
-                message: '批次删除成功',
+            // TODO: fix proxy object problem
+            let params:number[] = [];
+            (toRaw(selectedBatches.value) as any[]).forEach((item) => {
+                params.push(item.ID)
+                console.log(item)
+            });
+
+            deleteBatch({BatchID:params}).then((resp: any) => {
+                if (resp.code === RespCodeOK) {
+                    ElMessage.success('批次删除成功')
+                } else {
+                    ElMessage.error("failed to delete batch: " + resp.msg)
+                }
+            }).catch((err) => {
+                ElMessage.error("failed to delete batch: " + err.msg)
             })
         })
-        .catch(() => { })
+        .catch(() => {
+            // 取消删除批次
+        })
 }
 
 </script>