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'
// Open media selection dialog
const openMediaDialog = (target = 'content') => {
const openMediaDialog = async (target = 'content') => {
mediaSelectionTarget.value = target;
mediaDialogVisible.value = true;
mediaCurrentPage.value = 1;
mediaFirst.value = 0;
// Set selected items based on target
selectedMediaItems.value = target === 'headImages' ? [...post.head_images] : [...post.selectedMedia];
loadMediaItems();
await 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
@@ -144,7 +146,8 @@ const confirmMediaSelection = () => {
toast.add({ severity: 'warn', summary: '提示', detail: '展示图片最多选择3张', life: 3000 });
return;
}
post.head_images = [...selectedMediaItems.value];
// Store only IDs
post.head_images = selectedMediaItems.value.map(item => item.id);
errors.head_images = '';
loadHeadImagePreviews();
} else {
@@ -169,8 +172,8 @@ const removeMedia = (media) => {
};
// Remove head image
const removeHeadImage = (media) => {
const index = post.head_images.findIndex(item => item.id === media.id);
const removeHeadImage = (mediaId) => {
const index = post.head_images.indexOf(mediaId);
if (index > -1) {
post.head_images.splice(index, 1);
loadHeadImagePreviews();
@@ -219,7 +222,6 @@ const savePost = async () => {
try {
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);
console.log(resp)
@@ -244,12 +246,12 @@ const cancelCreate = () => {
// Add head image preview loading
const loadHeadImagePreviews = async () => {
headImageUrls.value = [];
for (const media of post.head_images) {
for (const mediaId of post.head_images) {
try {
const url = await mediaService.getMediaPreviewUrl(media.id);
headImageUrls.value.push({ id: media.id, url });
const url = await mediaService.getMediaPreviewUrl(mediaId);
headImageUrls.value.push({ id: mediaId, url });
} 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>
</div>
<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">
<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"
class="absolute! top-2 right-2 p-button-rounded p-button-danger p-button-sm"
@click="removeHeadImage(media)" />
@click="removeHeadImage(mediaId)" />
</div>
</div>
</div>

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

@@ -137,14 +137,16 @@ const fetchPost = async (id) => {
};
// Open media selection dialog
const openMediaDialog = (target = 'content') => {
const openMediaDialog = async (target = 'content') => {
mediaSelectionTarget.value = target;
mediaDialogVisible.value = true;
mediaCurrentPage.value = 1;
mediaFirst.value = 0;
// Set selected items based on target
selectedMediaItems.value = target === 'headImages' ? [...post.head_images] : [...post.selectedMedia];
loadMediaItems();
await 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
@@ -172,7 +174,8 @@ const confirmMediaSelection = () => {
toast.add({ severity: 'warn', summary: '提示', detail: '展示图片最多选择3张', life: 3000 });
return;
}
post.head_images = [...selectedMediaItems.value];
// Store only IDs
post.head_images = selectedMediaItems.value.map(item => item.id);
errors.head_images = '';
loadHeadImagePreviews();
} else {
@@ -197,8 +200,8 @@ const removeMedia = (media) => {
};
// Remove a selected head image
const removeHeadImage = (media) => {
const index = post.head_images.findIndex(item => item.id === media.id);
const removeHeadImage = (mediaId) => {
const index = post.head_images.indexOf(mediaId);
if (index > -1) {
post.head_images.splice(index, 1);
loadHeadImagePreviews();
@@ -208,12 +211,12 @@ const removeHeadImage = (media) => {
// Load head image previews
const loadHeadImagePreviews = async () => {
headImageUrls.value = [];
for (const media of post.head_images) {
for (const mediaId of post.head_images) {
try {
const url = await mediaService.getMediaPreviewUrl(media.id);
headImageUrls.value.push({ id: media.id, url });
const url = await mediaService.getMediaPreviewUrl(mediaId);
headImageUrls.value.push({ id: mediaId, url });
} 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 {
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);
if (resp.status !== 200) {
@@ -278,10 +281,6 @@ const cancelEdit = () => {
router.push('/posts');
};
// File type badge severity mapping
const getBadgeSeverity = () => {
return 'info';
};
// Add pagination handler
const onMediaPage = (event) => {
@@ -343,13 +342,13 @@ onMounted(() => {
</span>
</div>
<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">
<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"
class="absolute! top-2 right-2 p-button-rounded p-button-danger p-button-sm"
@click="removeHeadImage(media)" />
@click="removeHeadImage(mediaId)" />
</div>
</div>
</div>