Jelajahi Sumber

feat(BannersView): 添加删除功能并优化操作按钮布局

- 在 BannersView 中增加删除按钮,支持删除轮播图
- 优化操作列的布局,使用 flexbox 使按钮排列更美观
- 添加删除确认弹窗,提升用户体验
wuyi 5 bulan lalu
induk
melakukan
dac15a6bc8
2 mengubah file dengan 56 tambahan dan 5 penghapusan
  1. 23 3
      src/views/BannersView.vue
  2. 33 2
      src/views/SeriesView.vue

+ 23 - 3
src/views/BannersView.vue

@@ -12,9 +12,12 @@
         </ElTableColumn>
         <ElTableColumn prop="desc" label="描述" min-width="120" />
         <ElTableColumn prop="createdAt" label="创建时间" :formatter="timeFormatter" width="150" />
-        <ElTableColumn label="操作" align="center" width="120">
+        <ElTableColumn label="操作" align="center" width="160">
             <template #default="{ row }">
-                <ElButton @click="onEdit(row)">编辑</ElButton>
+                <div class="flex items-center justify-center gap-2">
+                    <ElButton @click="onEdit(row)" size="small">编辑</ElButton>
+                    <ElButton type="danger" @click="onDelete(row)" size="small">删除</ElButton>
+                </div>
             </template>
         </ElTableColumn>
     </PagingTable>
@@ -41,7 +44,7 @@ import { Plus } from '@vicons/tabler'
 import EditDialog from '@/components/EditDialog.vue'
 import { setupEditDialog } from '@/utils/editDialog'
 import { http } from '@/plugins/http'
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import RImage from '@/components/RImage.vue'
 import SingleUpload from '@/components/SingleUpload.vue'
 const query = ref({})
@@ -63,4 +66,21 @@ async function submit() {
         : await http.post('/banners', model.value)
     ElMessage.success('保存成功')
 }
+
+async function onDelete(row) {
+    try {
+        await ElMessageBox.confirm('确定删除该轮播图吗?', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+        })
+        await http.delete(`/banners/${row.id}`)
+        ElMessage.success('删除成功')
+        table.value?.refresh()
+    } catch (e) {
+        if (e && e.message) {
+            ElMessage.error(e.message)
+        }
+    }
+}
 </script>

+ 33 - 2
src/views/SeriesView.vue

@@ -199,10 +199,41 @@ async function onEdit(row) {
     showEditDialog.value = true
 }
 async function submit() {
+    const isHttpUrl = (val) => typeof val === 'string' && /^http/.test(val)
+    const buildPayload = () => {
+        const payload = { ...model.value }
+        if (Array.isArray(model.value.categories)) {
+            const original = model.value.categories
+            const mapped = original
+                .map((c) => (typeof c === 'object' ? c.id : c))
+                .map((id) => (typeof id === 'string' ? id.trim() : id))
+            const filtered = mapped.filter(
+                (id) => id !== undefined && id !== null && id !== '' && id !== 'undefined' && id !== 'null'
+            )
+            const asNumbers = filtered.map((id) => Number(id))
+            const finalIds = asNumbers.filter((id) => Number.isInteger(id) && id > 0)
+            const finalObjects = finalIds.map((id) => ({ id }))
+            payload.categories = finalObjects
+        }
+        if (model.value.cover === null) {
+            payload.cover = null
+        } else if (isHttpUrl(model.value.cover)) {
+            delete payload.cover
+        }
+        if (model.value.landscapeCover === null) {
+            payload.landscapeCover = null
+        } else if (isHttpUrl(model.value.landscapeCover)) {
+            delete payload.landscapeCover
+        }
+        return payload
+    }
+
+    const payload = buildPayload()
+
     if (model.value.id) {
-        await http.put(`/series/${model.value.id}`, model.value)
+        await http.put(`/series/${model.value.id}`, payload)
     } else {
-        await http.post('/series', model.value)
+        await http.post('/series', payload)
     }
     ElMessage.success('保存成功')
 }