改进 删除提示

src/pages/assistants/index.vue

@@ -4,15 +4,8 @@
   <v-btn color="primary" @click="to('/assistants/create')">创建助理</v-btn>
 
   <div class="mt-3">
-    <v-row
+    <v-row><v-slide-x-transition group>
-      ><v-slide-x-transition group>
+        <v-col v-for="assistant in assistants.data" :key="assistant.id" cols="12" md="4" sm="6">
-        <v-col
-          v-for="assistant in assistants.data"
-          :key="assistant.id"
-          cols="12"
-          md="4"
-          sm="6"
-        >
           <v-card>
             <v-card-title>{{ assistant.name }}</v-card-title>
             <v-card-text>
@@ -24,17 +17,12 @@
                 >对话</v-btn
               > -->
 
-              <v-btn color="primary" @click="editTool(assistant.id ?? 0)"
+              <v-btn color="primary" @click="editTool(assistant.id ?? 0)">工具</v-btn>
-                >工具</v-btn
+              <v-btn color="error" @click="deleteAssistant(assistant.id ?? 0)">删除</v-btn>
-              >
-              <v-btn color="error" @click="deleteAssistant(assistant.id ?? 0)"
-                >删除</v-btn
-              >
             </v-card-actions>
           </v-card>
         </v-col>
-      </v-slide-x-transition></v-row
+      </v-slide-x-transition></v-row>
-    >
   </div>
 
   <v-dialog v-model="dialog" max-width="290" persistent>
@@ -44,54 +32,61 @@
       <v-card-actions>
         <v-spacer></v-spacer>
         <v-btn color="green darken-1" @click="dialog = false">取消</v-btn>
-        <v-btn color="red darken-1" @click="deleteAssistantConfirmed"
+        <v-btn color="red darken-1" @click="deleteAssistantConfirmed">删除</v-btn>
-          >删除</v-btn
+      </v-card-actions>
-        >
+    </v-card>
+  </v-dialog>
+
+  <v-dialog v-model="deleteSuccess" max-width="290" persistent>
+    <v-card>
+      <v-card-title class="headline">正在删除</v-card-title>
+      <v-card-text>我们正在后台处理删除任务，可能需要一段时间才会从列表里面消失</v-card-text>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn color="green darken-1" @click="deleteSuccess = false">确定</v-btn>
+        
       </v-card-actions>
     </v-card>
   </v-dialog>
 </template>
 
 <script setup lang="ts">
-import { ApiV1AssistantsGet200Response } from "@/api";
+import { ApiV1AssistantsGet200Response } from "@/api"
-import { api } from "@/plugins/api";
+import { api } from "@/plugins/api"
-import router from "@/router";
+import router from "@/router"
 
-const assistants: Ref<ApiV1AssistantsGet200Response> = ref({});
+const assistants: Ref<ApiV1AssistantsGet200Response> = ref({})
 
 function refresh() {
   api.Assistant.apiV1AssistantsGet().then((res) => {
-    assistants.value = res.data;
+    assistants.value = res.data
-  });
+  })
 }
-refresh();
+refresh()
 
-const dialog = ref(false);
+const dialog = ref(false)
-const selectedAssistantId = ref(0);
+const selectedAssistantId = ref(0)
-
+const deleteSuccess = ref(false)
-function openDialog(assistantId: number | undefined) {
-  dialog.value = true;
-  selectedAssistantId.value = assistantId ?? 0;
-}
 
 function deleteAssistant(assistantId: number) {
-  selectedAssistantId.value = assistantId;
+  selectedAssistantId.value = assistantId
-  dialog.value = true;
+  dialog.value = true
 }
 
 function deleteAssistantConfirmed() {
   api.Assistant.apiV1AssistantsIdDelete(selectedAssistantId.value).then(() => {
-    refresh();
+    refresh()
-  });
+  })
-  dialog.value = false;
+  dialog.value = false
-  refresh();
+  deleteSuccess.value = true
+  refresh()
 }
 
 function editTool(assistantId: number) {
-  router.push(`/assistants/${assistantId}/tools`);
+  router.push(`/assistants/${assistantId}/tools`)
 }
 
 function to(path: string) {
-  router.push(path);
+  router.push(path)
 }
 </script>