Procházet zdrojové kódy

重构鱼苗删除功能,调整API接口以支持批量删除,同时在FishView.vue中添加批量删除确认弹窗,优化用户体验。

wuyi před 3 měsíci
rodič
revize
04b9319888
2 změnil soubory, kde provedl 126 přidání a 22 odebrání
  1. 4 4
      src/services/api.js
  2. 122 18
      src/views/FishView.vue

+ 4 - 4
src/services/api.js

@@ -180,13 +180,13 @@ export const batchUpdateFishOwner = async (ids, ownerId, ownerName) => {
   return response.data
 }
 
-export const deleteFish = async (id) => {
-  const response = await api.post('/fish/delete', { id })
+export const batchDeleteFish = async (ids) => {
+  const response = await api.post('/fish/batch-delete', { ids })
   return response.data
 }
 
-export const batchDeleteFish = async (ids) => {
-  const response = await api.post('/fish/batch-delete', { ids })
+export const deleteFish = async (id) => {
+  const response = await api.post('/fish/delete', { id })
   return response.data
 }
 

+ 122 - 18
src/views/FishView.vue

@@ -68,13 +68,21 @@
           />
           <Button icon="pi pi-search" @click="handleSearch" label="搜索" size="small" severity="secondary" />
           <Button icon="pi pi-refresh" @click="handleRefresh" label="刷新" size="small" />
-          <Button 
-            v-if="isAdmin" 
-            icon="pi pi-users" 
-            @click="openBatchUpdateDialog" 
-            label="批量更新所有者" 
-            size="small" 
-            severity="info" 
+          <Button
+            v-if="isAdmin"
+            icon="pi pi-users"
+            @click="openBatchUpdateDialog"
+            label="批量更新所有者"
+            size="small"
+            severity="info"
+          />
+          <Button
+            v-if="isAdmin"
+            icon="pi pi-trash"
+            @click="openBatchDeleteDialog"
+            label="批量删除"
+            size="small"
+            severity="danger"
           />
           <div class="flex-1"></div>
         </div>
@@ -242,7 +250,7 @@
               aria-label="编辑"
               @click="openEditDialog(slotProps.data)"
             />
-            <!-- <Button
+            <Button
               icon="pi pi-trash"
               severity="danger"
               size="small"
@@ -250,7 +258,7 @@
               rounded
               aria-label="删除"
               @click="confirmDelete(slotProps.data)"
-            /> -->
+            />
           </div>
         </template>
       </Column>
@@ -427,21 +435,58 @@
       <template #footer>
         <div class="flex justify-end gap-3">
           <Button label="取消" severity="secondary" @click="batchUpdateDialog = false" />
-          <Button 
-            label="确认更新" 
-            severity="success" 
-            @click="saveBatchUpdate" 
+          <Button
+            label="确认更新"
+            severity="success"
+            @click="saveBatchUpdate"
             :loading="batchUpdateLoading"
             :disabled="!batchUpdateForm.ownerId"
           />
         </div>
       </template>
     </Dialog>
+
+    <!-- 批量删除确认弹窗 -->
+    <Dialog
+      v-model:visible="batchDeleteDialog"
+      :modal="true"
+      header="批量删除确认"
+      :style="{ width: '500px' }"
+      position="center"
+    >
+      <div class="p-fluid">
+        <div class="mb-4">
+          <p class="text-sm text-gray-600 mb-2">确定要删除以下 {{ selectedFish.length }} 条鱼苗记录吗?</p>
+          <div class="max-h-32 overflow-y-auto bg-gray-50 p-3 rounded">
+            <div v-for="fish in selectedFish" :key="fish.id" class="text-sm mb-1">
+              <span class="font-medium">{{ fish.name }}</span>
+              <span class="text-gray-500 ml-2">({{ fish.id }})</span>
+            </div>
+          </div>
+          <p class="text-red-600 text-sm mt-2">
+            <i class="pi pi-exclamation-triangle mr-1"></i>
+            此操作不可撤销,请谨慎操作!
+          </p>
+        </div>
+      </div>
+
+      <template #footer>
+        <div class="flex justify-end gap-3">
+          <Button label="取消" severity="secondary" @click="batchDeleteDialog = false" />
+          <Button
+            label="确认删除"
+            severity="danger"
+            @click="saveBatchDelete"
+            :loading="batchDeleteLoading"
+          />
+        </div>
+      </template>
+    </Dialog>
   </div>
 </template>
 
 <script setup>
-import { listFish, deleteFish, updateFish, exportFishFriends, batchUpdateFishOwner } from '@/services/api'
+import { listFish, deleteFish, updateFish, exportFishFriends, batchUpdateFishOwner, batchDeleteFish } from '@/services/api'
 import { useDateFormat } from '@vueuse/core'
 import Button from 'primevue/button'
 import Column from 'primevue/column'
@@ -505,6 +550,10 @@ const batchUpdateForm = ref({
   ownerName: null
 })
 
+// 批量删除相关
+const batchDeleteDialog = ref(false)
+const batchDeleteLoading = ref(false)
+
 // 搜索表单
 const searchForm = ref({
   id: null,
@@ -880,7 +929,7 @@ const openBatchUpdateDialog = () => {
     })
     return
   }
-  
+
   batchUpdateForm.value = {
     ownerId: null,
     ownerName: null
@@ -927,16 +976,16 @@ const saveBatchUpdate = async () => {
 
   batchUpdateLoading.value = true
   try {
-    const ids = selectedFish.value.map(fish => fish.id)
+    const ids = selectedFish.value.map((fish) => fish.id)
     await batchUpdateFishOwner(ids, batchUpdateForm.value.ownerId, batchUpdateForm.value.ownerName)
-    
+
     toast.add({
       severity: 'success',
       summary: '成功',
       detail: `已成功更新 ${selectedFish.value.length} 条鱼苗的所有者`,
       life: 3000
     })
-    
+
     batchUpdateDialog.value = false
     selectedFish.value = []
     fetchData()
@@ -953,6 +1002,61 @@ const saveBatchUpdate = async () => {
   }
 }
 
+// 打开批量删除弹窗
+const openBatchDeleteDialog = () => {
+  if (selectedFish.value.length === 0) {
+    toast.add({
+      severity: 'warn',
+      summary: '警告',
+      detail: '请先选择要删除的鱼苗记录',
+      life: 3000
+    })
+    return
+  }
+  
+  batchDeleteDialog.value = true
+}
+
+// 保存批量删除
+const saveBatchDelete = async () => {
+  if (selectedFish.value.length === 0) {
+    toast.add({
+      severity: 'warn',
+      summary: '警告',
+      detail: '请先选择要删除的鱼苗记录',
+      life: 3000
+    })
+    return
+  }
+
+  batchDeleteLoading.value = true
+  try {
+    const ids = selectedFish.value.map((fish) => fish.id)
+    await batchDeleteFish(ids)
+    
+    toast.add({
+      severity: 'success',
+      summary: '成功',
+      detail: `已成功删除 ${selectedFish.value.length} 条鱼苗记录`,
+      life: 3000
+    })
+    
+    batchDeleteDialog.value = false
+    selectedFish.value = []
+    fetchData()
+  } catch (error) {
+    console.error('批量删除失败:', error)
+    toast.add({
+      severity: 'error',
+      summary: '错误',
+      detail: '批量删除失败,请重试',
+      life: 3000
+    })
+  } finally {
+    batchDeleteLoading.value = false
+  }
+}
+
 // 初始化
 onMounted(async () => {
   if (isAdmin.value) {