diff --git a/frontend/src/views/Batch/Batch.vue b/frontend/src/views/Batch/Batch.vue
index 0bb3093fe94c0d6a4ca61a9520c92c9620126aef..8c4f23c68b9062e03b5b587942953aed7a1891f9 100644
--- a/frontend/src/views/Batch/Batch.vue
+++ b/frontend/src/views/Batch/Batch.vue
@@ -38,25 +38,38 @@
                 </el-table-column>
                 <el-table-column prop="operation" label="操作">
                     <template #default="scope">
-                        <auth-button auth="batch_update">
+                        <auth-button auth="batch_update" @click="onEditBatch(scope.row.ID)">
                             编辑
                         </auth-button>
                     </template>
                 </el-table-column>
             </template>
         </PGTable>
+
+        <el-dialog title="编辑批次" v-model="showChangeBatchDialog">
+            <UpdateBatch :batchID="updateBatchID" />
+        </el-dialog>
     </div>
 </template>
 
 <script lang="ts" setup>
 import { ref, onMounted, toRaw } from "vue";
+import { ElMessage, ElMessageBox } from 'element-plus';
 import AuthButton from "@/components/AuthButton.vue";
 import PGTable from "@/components/PGTable.vue";
-import { ElMessage, ElMessageBox } from 'element-plus';
+import UpdateBatch from "./components/UpdateBatch.vue";
 
 import { RespCodeOK } from "@/request/request";
 import { getBatches, deleteBatch } from '@/request/batch';
 
+const showChangeBatchDialog = ref(false)
+const updateBatchID = ref(0)
+
+function onEditBatch(id: number) {
+    updateBatchID.value = id
+    showChangeBatchDialog.value = true
+}
+
 const batches = ref([])
 const currentPage = ref(1)
 const pageSize = ref(10)
@@ -95,13 +108,13 @@ function batchDelete() {
         })
         .then(() => {
             // TODO: fix proxy object problem
-            let params:number[] = [];
+            let params: number[] = [];
             (toRaw(selectedBatches.value) as any[]).forEach((item) => {
                 params.push(item.ID)
                 console.log(item)
             });
 
-            deleteBatch({BatchID:params}).then((resp: any) => {
+            deleteBatch({ BatchID: params }).then((resp: any) => {
                 if (resp.code === RespCodeOK) {
                     ElMessage.success('批次删除成功')
 
diff --git a/frontend/src/views/Cluster/Cluster.vue b/frontend/src/views/Cluster/Cluster.vue
index 0c30b6d0631e9216bc61f6d609ae45ae31dea538..09a8cff43c39fdadd9d18e2458eb1537eff1f657 100644
--- a/frontend/src/views/Cluster/Cluster.vue
+++ b/frontend/src/views/Cluster/Cluster.vue
@@ -58,8 +58,7 @@
         </div>
 
         <el-dialog title="主机部门变更" v-model="showChangeDepartDialog">
-            <change-depart>
-            </change-depart>
+            <change-depart />
         </el-dialog>
     </div>
 </template>
@@ -74,7 +73,7 @@ import PGTree from "@/components/PGTree.vue";
 import StateDot from "@/components/StateDot.vue";
 import ChangeDepart from "./components/ChangeDepart.vue";
 
-import {directTo} from "@/router/index"
+import { directTo } from "@/router/index"
 
 import { getPagedDepartMachines } from "@/request/cluster";
 import { RespCodeOK } from "@/request/request";
@@ -112,8 +111,8 @@ onMounted(() => {
     })
 })
 
-function machineDetail(info:any) {
-    directTo("/cluster/machine/"+info.uuid)
+function machineDetail(info: any) {
+    directTo("/cluster/machine/" + info.uuid)
 }
 
 </script>
diff --git a/frontend/src/views/User/User.vue b/frontend/src/views/User/User.vue
index 035d54e480792a6b5e1c4b5128d352bd06d83134..b88a2af84482f6ed2d9901d82266730d3c454dd2 100644
--- a/frontend/src/views/User/User.vue
+++ b/frontend/src/views/User/User.vue
@@ -33,7 +33,7 @@
         </PGTable>
 
         <el-dialog :title="title" v-model="display" width="560px">
-            <AddUser ></AddUser>
+            <AddUser />
         </el-dialog>
     </div>
 </template>
@@ -76,7 +76,7 @@ onMounted(() => {
 const display = ref(false)
 const title = ref("")
 
-function onAddUser(){
+function onAddUser() {
     title.value = "添加用户"
     display.value = true
 }