rogee/quyun
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update form

Browse Source
This commit is contained in:
yanghao05
2025-04-18 20:23:25 +08:00
parent 3941babff6
commit a1537f9146
2 changed files with 35 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
frontend/admin/src/pages/PostCreatePage.vue
View File

@@ -100,14 +100,16 @@ const statusOptions = [
const mediaSelectionTarget = ref('content'); // 'content' or 'headImages' const mediaSelectionTarget = ref('content'); // 'content' or 'headImages'
// Open media selection dialog // Open media selection dialog
const openMediaDialog = (target = 'content') => { const openMediaDialog = async (target = 'content') => {
mediaSelectionTarget.value = target; mediaSelectionTarget.value = target;
mediaDialogVisible.value = true; mediaDialogVisible.value = true;
mediaCurrentPage.value = 1; mediaCurrentPage.value = 1;
mediaFirst.value = 0; mediaFirst.value = 0;
// Set selected items based on target await loadMediaItems();
selectedMediaItems.value = target === 'headImages' ? [...post.head_images] : [...post.selectedMedia];
loadMediaItems(); // Set selected items based on target and match with loaded media items
const selectedIds = target === 'headImages' ? post.head_images : post.selectedMedia.map(m => m.id);
selectedMediaItems.value = mediaItems.value.filter(item => selectedIds.includes(item.id));
}; };
// Load media items with pagination // Load media items with pagination
@@ -144,7 +146,8 @@ const confirmMediaSelection = () => {
toast.add({ severity: 'warn', summary: '提示', detail: '展示图片最多选择3张', life: 3000 }); toast.add({ severity: 'warn', summary: '提示', detail: '展示图片最多选择3张', life: 3000 });
return; return;
} }
post.head_images = [...selectedMediaItems.value]; // Store only IDs
post.head_images = selectedMediaItems.value.map(item => item.id);
errors.head_images = ''; errors.head_images = '';
loadHeadImagePreviews(); loadHeadImagePreviews();
} else { } else {
@@ -169,8 +172,8 @@ const removeMedia = (media) => {
}; };
// Remove head image // Remove head image
const removeHeadImage = (media) => { const removeHeadImage = (mediaId) => {
const index = post.head_images.findIndex(item => item.id === media.id); const index = post.head_images.indexOf(mediaId);
if (index > -1) { if (index > -1) {
post.head_images.splice(index, 1); post.head_images.splice(index, 1);
loadHeadImagePreviews(); loadHeadImagePreviews();
@@ -219,7 +222,6 @@ const savePost = async () => {
try { try {
post.medias = post.selectedMedia.map(media => media.id); post.medias = post.selectedMedia.map(media => media.id);
post.head_image_ids = post.head_images.map(media => media.id); // Add head image IDs
const resp = await postService.createPost(post); const resp = await postService.createPost(post);
console.log(resp) console.log(resp)
@@ -244,12 +246,12 @@ const cancelCreate = () => {
// Add head image preview loading // Add head image preview loading
const loadHeadImagePreviews = async () => { const loadHeadImagePreviews = async () => {
headImageUrls.value = []; headImageUrls.value = [];
for (const media of post.head_images) { for (const mediaId of post.head_images) {
try { try {
const url = await mediaService.getMediaPreviewUrl(media.id); const url = await mediaService.getMediaPreviewUrl(mediaId);
headImageUrls.value.push({ id: media.id, url }); headImageUrls.value.push({ id: mediaId, url });
} catch (error) { } catch (error) {
console.error('Failed to load preview for media:', media.id); console.error('Failed to load preview for media:', mediaId);
} }
} }
}; };
@@ -291,13 +293,13 @@ const loadHeadImagePreviews = async () => {
</span> </span>
</div> </div>
<div class="grid grid-cols-2 md:grid-cols-3 gap-4"> <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
<div v-for="(media, index) in post.head_images" :key="media.id" <div v-for="(mediaId, index) in post.head_images" :key="mediaId"
class="relative aspect-video"> class="relative aspect-video">
<img v-if="headImageUrls[index]" :src="headImageUrls[index].url" <img v-if="headImageUrls[index]" :src="headImageUrls[index].url"
class="w-full h-full object-cover rounded bg-gray-200" :alt="media.name"> class="w-full h-full object-cover rounded bg-gray-200" :alt="mediaId">
<Button icon="pi pi-times" <Button icon="pi pi-times"
class="absolute! top-2 right-2 p-button-rounded p-button-danger p-button-sm" class="absolute! top-2 right-2 p-button-rounded p-button-danger p-button-sm"
@click="removeHeadImage(media)" /> @click="removeHeadImage(mediaId)" />
</div> </div>
</div> </div>
</div> </div>

37
frontend/admin/src/pages/PostEditPage.vue
View File

@@ -137,14 +137,16 @@ const fetchPost = async (id) => {
}; };
// Open media selection dialog // Open media selection dialog
const openMediaDialog = (target = 'content') => { const openMediaDialog = async (target = 'content') => {
mediaSelectionTarget.value = target; mediaSelectionTarget.value = target;
mediaDialogVisible.value = true; mediaDialogVisible.value = true;
mediaCurrentPage.value = 1; mediaCurrentPage.value = 1;
mediaFirst.value = 0; mediaFirst.value = 0;
// Set selected items based on target await loadMediaItems();
selectedMediaItems.value = target === 'headImages' ? [...post.head_images] : [...post.selectedMedia];
loadMediaItems(); // Set selected items based on target and match with loaded media items
const selectedIds = target === 'headImages' ? post.head_images : post.selectedMedia.map(m => m.id);
selectedMediaItems.value = mediaItems.value.filter(item => selectedIds.includes(item.id));
}; };
// Load media items // Load media items
@@ -172,7 +174,8 @@ const confirmMediaSelection = () => {
toast.add({ severity: 'warn', summary: '提示', detail: '展示图片最多选择3张', life: 3000 }); toast.add({ severity: 'warn', summary: '提示', detail: '展示图片最多选择3张', life: 3000 });
return; return;
} }
post.head_images = [...selectedMediaItems.value]; // Store only IDs
post.head_images = selectedMediaItems.value.map(item => item.id);
errors.head_images = ''; errors.head_images = '';
loadHeadImagePreviews(); loadHeadImagePreviews();
} else { } else {
@@ -197,8 +200,8 @@ const removeMedia = (media) => {
}; };
// Remove a selected head image // Remove a selected head image
const removeHeadImage = (media) => { const removeHeadImage = (mediaId) => {
const index = post.head_images.findIndex(item => item.id === media.id); const index = post.head_images.indexOf(mediaId);
if (index > -1) { if (index > -1) {
post.head_images.splice(index, 1); post.head_images.splice(index, 1);
loadHeadImagePreviews(); loadHeadImagePreviews();
@@ -208,12 +211,12 @@ const removeHeadImage = (media) => {
// Load head image previews // Load head image previews
const loadHeadImagePreviews = async () => { const loadHeadImagePreviews = async () => {
headImageUrls.value = []; headImageUrls.value = [];
for (const media of post.head_images) { for (const mediaId of post.head_images) {
try { try {
const url = await mediaService.getMediaPreviewUrl(media.id); const url = await mediaService.getMediaPreviewUrl(mediaId);
headImageUrls.value.push({ id: media.id, url }); headImageUrls.value.push({ id: mediaId, url });
} catch (error) { } catch (error) {
console.error('Failed to load preview for media:', media.id); console.error('Failed to load preview for media:', mediaId);
} }
} }
}; };
@@ -258,7 +261,7 @@ const savePost = async () => {
try { try {
post.medias = post.selectedMedia.map(media => media.id); post.medias = post.selectedMedia.map(media => media.id);
post.head_image_ids = post.head_images.map(media => media.id); // Add head image IDs // Remove head_image_ids, use head_images directly since it now contains IDs
const resp = await postService.updatePost(post.id, post); const resp = await postService.updatePost(post.id, post);
if (resp.status !== 200) { if (resp.status !== 200) {
@@ -278,10 +281,6 @@ const cancelEdit = () => {
router.push('/posts'); router.push('/posts');
}; };
// File type badge severity mapping
const getBadgeSeverity = () => {
return 'info';
};
// Add pagination handler // Add pagination handler
const onMediaPage = (event) => { const onMediaPage = (event) => {
@@ -343,13 +342,13 @@ onMounted(() => {
</span> </span>
</div> </div>
<div class="grid grid-cols-2 md:grid-cols-3 gap-4"> <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
<div v-for="(media, index) in post.head_images" :key="media.id" <div v-for="(mediaId, index) in post.head_images" :key="mediaId"
class="relative aspect-video"> class="relative aspect-video">
<img v-if="headImageUrls[index]" :src="headImageUrls[index].url" <img v-if="headImageUrls[index]" :src="headImageUrls[index].url"
class="w-full h-full object-cover rounded bg-gray-200" :alt="media.name"> class="w-full h-full object-cover rounded bg-gray-200" :alt="mediaId">
<Button icon="pi pi-times" <Button icon="pi pi-times"
class="absolute! top-2 right-2 p-button-rounded p-button-danger p-button-sm" class="absolute! top-2 right-2 p-button-rounded p-button-danger p-button-sm"
@click="removeHeadImage(media)" /> @click="removeHeadImage(mediaId)" />
</div> </div>
</div> </div>
</div> </div>