【增加】AI Image 列表增加删除

Author: cherishsince

src/api/ai/image/index.ts

@@ -52,4 +52,8 @@ export const ImageApi = {
   dall: async (data: ImageDallReqVO)=> {
     return await request.post({ url: `/ai/image/dall`, data })
   },
+  // 删除
+  deleteImage: async (id: number)=> {
+    return await request.delete({ url: `/ai/image/delete?id=${id}`})
+  },
 }

src/views/ai/image/ImageTask.vue

@@ -2,7 +2,11 @@
 <template>
   <el-card class="dr-task" body-class="task-card" shadow="never">
     <template #header>绘画任务</template>
-    <ImageTaskCard v-for="image in imageList" :key="image" :image-detail="image" @on-btn-click="handlerImageBtnClick" />
+    <ImageTaskCard
+      v-for="image in imageList"
+      :key="image"
+      :image-detail="image"
+      @on-btn-click="handlerImageBtnClick" />
   </el-card>
   <!-- 图片 detail 抽屉 -->
   <ImageDetailDrawer
@@ -16,6 +20,8 @@ import ImageDetailDrawer from './ImageDetailDrawer.vue'
 import ImageTaskCard from './ImageTaskCard.vue'
 import {bool} from "vue-types";
 
+const message = useMessage() // 消息弹窗
+
 const imageList = ref<ImageDetailVO[]>([]) // image 列表
 const imageListInterval = ref<any>() // image 列表定时器，刷新列表
 const showTaskDetail = ref<bool>(false) // 是否显示 task 详情
@@ -55,6 +61,11 @@ const getImageList = async () => {
 const handlerImageBtnClick = async (type, imageDetail: ImageDetailVO) => {
   if (type === 'more') {
     await handlerDrawerOpen()
+  } else if (type === 'delete') {
+    await message.confirm(`是否删除照片?`)
+    await ImageApi.deleteImage(imageDetail.id)
+    await getImageList()
+    await message.success("删除成功!")
   }
 }
 //

src/views/ai/image/index.vue

@@ -6,7 +6,9 @@
         <el-segmented v-model="selectModel" :options="modelOptions" />
       </div>
       <div class="modal-switch-container">
-        <Dall3 v-if="selectModel === 'DALL3绘画'" @on-draw-start="handlerDrawStart" @on-draw-complete="handlerDrawComplete" />
+        <Dall3 v-if="selectModel === 'DALL3绘画'"
+               @on-draw-start="handlerDrawStart"
+               @on-draw-complete="handlerDrawComplete" />
         <Midjourney v-if="selectModel === 'MJ绘画'" />
       </div>
     </div>