feat: update post edit page
This commit is contained in:
yanghao05
@@ -1,7 +1,8 @@
|
||||
<script setup>
|
||||
import { mediaService } from '@/api/mediaService';
|
||||
import { postService } from '@/api/postService';
|
||||
import { useToast } from 'primevue/usetoast';
|
||||
import { onMounted, reactive, ref } from 'vue';
|
||||
import { computed, onMounted, reactive, ref } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
|
||||
// PrimeVue components
|
||||
@@ -13,6 +14,7 @@ import Dialog from 'primevue/dialog';
|
||||
import InputNumber from 'primevue/inputnumber';
|
||||
import InputText from 'primevue/inputtext';
|
||||
import ProgressSpinner from 'primevue/progressspinner';
|
||||
import RadioButton from 'primevue/radiobutton';
|
||||
import Textarea from 'primevue/textarea';
|
||||
import Toast from 'primevue/toast';
|
||||
|
||||
@@ -53,6 +55,16 @@ const selectedMediaItems = ref([]);
|
||||
const mediaLoading = ref(false);
|
||||
const mediaGlobalFilter = ref('');
|
||||
|
||||
// Add pagination state for media dialog
|
||||
const mediaFirst = ref(0);
|
||||
const mediaRows = ref(10);
|
||||
const mediaTotalRecords = ref(0);
|
||||
const mediaCurrentPage = ref(1);
|
||||
|
||||
const mediaTotalPages = computed(() => {
|
||||
return Math.ceil(mediaTotalRecords.value / mediaRows.value);
|
||||
});
|
||||
|
||||
// Sample media data - in a real app, this would come from an API
|
||||
const mediaItems = ref([
|
||||
{
|
||||
@@ -113,7 +125,7 @@ const fetchPost = async (id) => {
|
||||
post.title = postData.title;
|
||||
post.price = postData.price;
|
||||
post.discount = postData.discount || 100;
|
||||
post.introduction = postData.introduction;
|
||||
post.introduction = postData.description;
|
||||
post.status = postData.status;
|
||||
post.selectedMedia = postData.medias || [];
|
||||
post.medias = postData.medias?.map(media => media.id) || [];
|
||||
@@ -128,6 +140,8 @@ const fetchPost = async (id) => {
|
||||
// Open media selection dialog
|
||||
const openMediaDialog = () => {
|
||||
mediaDialogVisible.value = true;
|
||||
mediaCurrentPage.value = 1;
|
||||
mediaFirst.value = 0;
|
||||
loadMediaItems();
|
||||
};
|
||||
|
||||
@@ -135,13 +149,12 @@ const openMediaDialog = () => {
|
||||
const loadMediaItems = async () => {
|
||||
mediaLoading.value = true;
|
||||
try {
|
||||
// In a real app, this would be an API call
|
||||
// const response = await mediaApi.getMediaFiles();
|
||||
// mediaItems.value = response.data;
|
||||
|
||||
// Simulate API delay
|
||||
await new Promise(resolve => setTimeout(resolve, 500));
|
||||
// Using sample data already defined above
|
||||
const response = await mediaService.getMedias({
|
||||
page: mediaCurrentPage.value,
|
||||
limit: mediaRows.value
|
||||
});
|
||||
mediaItems.value = response.data.items;
|
||||
mediaTotalRecords.value = response.data.total;
|
||||
} catch (error) {
|
||||
toast.add({ severity: 'error', summary: '错误', detail: '加载媒体文件失败', life: 3000 });
|
||||
} finally {
|
||||
@@ -249,6 +262,27 @@ const getFileIcon = (file) => {
|
||||
return `pi ${map[file.fileType] || 'pi-file'}`;
|
||||
};
|
||||
|
||||
// Add pagination handler
|
||||
const onMediaPage = (event) => {
|
||||
mediaFirst.value = event.first;
|
||||
mediaRows.value = event.rows;
|
||||
mediaCurrentPage.value = Math.floor(event.first / event.rows) + 1;
|
||||
loadMediaItems();
|
||||
};
|
||||
|
||||
// Add format file size helper
|
||||
const formatFileSize = (bytes) => {
|
||||
if (!bytes && bytes !== 0) return '0 B';
|
||||
const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
|
||||
const base = 1024;
|
||||
let size = Number(bytes);
|
||||
if (isNaN(size)) return '0 B';
|
||||
|
||||
const i = Math.floor(Math.log(size) / Math.log(base));
|
||||
size = size / Math.pow(base, i);
|
||||
return `${size.toFixed(2)} ${sizes[i]}`;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
// Get post ID from route params
|
||||
const postId = route.params.id;
|
||||
@@ -373,9 +407,22 @@ onMounted(() => {
|
||||
</div>
|
||||
|
||||
<DataTable v-model:selection="selectedMediaItems" :value="mediaItems" :loading="mediaLoading" dataKey="id"
|
||||
selectionMode="multiple" :globalFilterFields="['fileName', 'fileType']"
|
||||
:filters="{ global: { value: mediaGlobalFilter, matchMode: 'contains' } }" stripedRows
|
||||
responsiveLayout="scroll">
|
||||
:paginator="true" v-model:first="mediaFirst" v-model:rows="mediaRows" :totalRecords="mediaTotalRecords"
|
||||
@page="onMediaPage" selectionMode="multiple"
|
||||
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport"
|
||||
:rows-per-page-options="[10, 25, 50]" currentPageReportTemplate="第 {first} 到 {last} 条，共 {totalRecords} 条"
|
||||
:lazy="true" :showCurrentPageReport="true">
|
||||
|
||||
<template #paginatorLeft>
|
||||
<div class="flex items-center">
|
||||
每页: {{ mediaRows }}
|
||||
</div>
|
||||
</template>
|
||||
<template #paginatorRight>
|
||||
<div class="flex items-center">
|
||||
第 {{ mediaCurrentPage }} 页，共 {{ mediaTotalPages }} 页
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #empty>
|
||||
<div class="text-center p-4">没有可用的媒体文件</div>
|
||||
@@ -392,27 +439,27 @@ onMounted(() => {
|
||||
|
||||
<Column field="fileName" header="文件名">
|
||||
<template #body="{ data }">
|
||||
<div class="flex items-center">
|
||||
<div v-if="data.thumbnailUrl" class="flex-shrink-0 h-10 w-10 mr-3">
|
||||
<img class="h-10 w-10 object-cover rounded" :src="data.thumbnailUrl" :alt="data.fileName">
|
||||
</div>
|
||||
<div v-else
|
||||
class="flex-shrink-0 h-10 w-10 mr-3 bg-gray-100 rounded flex items-center justify-center">
|
||||
<i :class="getFileIcon(data)" class="text-2xl"></i>
|
||||
</div>
|
||||
<div class="text-sm font-medium text-gray-900">{{ data.fileName }}</div>
|
||||
</div>
|
||||
<div class="text-sm font-medium text-gray-900">{{ data.name }}</div>
|
||||
</template>
|
||||
</Column>
|
||||
|
||||
<Column field="fileType" header="文件类型">
|
||||
<template #body="{ data }">
|
||||
<Badge :value="data.fileType" :severity="getBadgeSeverity(data.fileType)" />
|
||||
<Badge :value="data.file_type" :severity="getBadgeSeverity(data.file_type)" />
|
||||
</template>
|
||||
</Column>
|
||||
|
||||
<Column field="fileSize" header="文件大小"></Column>
|
||||
<Column field="uploadTime" header="上传时间"></Column>
|
||||
<Column field="fileSize" header="文件大小">
|
||||
<template #body="{ data }">
|
||||
{{ formatFileSize(data.file_size) }}
|
||||
</template>
|
||||
</Column>
|
||||
|
||||
<Column field="createdAt" header="上传时间">
|
||||
<template #body="{ data }">
|
||||
{{ new Date(data.upload_time).toLocaleString('zh-CN') }}
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
|
||||
<template #footer>
|
||||
|
||||
Reference in New Issue
Block a user