From cc557198f7d04ce06bc7090de13ffc074ab06b5e Mon Sep 17 00:00:00 2001
From: yanghao05 <yanghao05@qianxin.com>
Date: Wed, 9 Apr 2025 19:15:45 +0800
Subject: [PATCH] feat: select media by type

---
 frontend/admin/src/pages/PostCreatePage.vue | 146 ++++++++++++--------
 1 file changed, 88 insertions(+), 58 deletions(-)

diff --git a/frontend/admin/src/pages/PostCreatePage.vue b/frontend/admin/src/pages/PostCreatePage.vue
index eacdc56..623c3fd 100644
--- a/frontend/admin/src/pages/PostCreatePage.vue
+++ b/frontend/admin/src/pages/PostCreatePage.vue
@@ -1,6 +1,7 @@
 <script setup>
+import { mediaService } from '@/api/mediaService';
 import { useToast } from 'primevue/usetoast';
-import { reactive, ref } from 'vue';
+import { computed, reactive, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
 // PrimeVue components
@@ -12,6 +13,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';
 
@@ -23,7 +25,8 @@ const post = reactive({
     title: '',
     price: 0,
     introduction: '',
-    selectedMedia: []
+    selectedMedia: [],
+    status: 'draft' // Add status field with default value
 });
 
 // Validation state
@@ -38,68 +41,42 @@ const mediaDialogVisible = ref(false);
 const selectedMediaItems = ref([]);
 const mediaLoading = ref(false);
 const mediaGlobalFilter = ref('');
+const mediaItems = ref([]);
 
-// Sample media data - in a real app, this would come from an API
-const mediaItems = ref([
-    {
-        id: 1,
-        fileName: 'sunset-beach.jpg',
-        fileType: 'Image',
-        thumbnailUrl: 'https://via.placeholder.com/300x225',
-        fileSize: '2.4 MB',
-        uploadTime: 'Today, 10:30 AM'
-    },
-    {
-        id: 2,
-        fileName: 'presentation.pdf',
-        fileType: 'PDF',
-        thumbnailUrl: null,
-        fileSize: '4.8 MB',
-        uploadTime: 'Yesterday, 3:45 PM'
-    },
-    {
-        id: 3,
-        fileName: 'promo_video.mp4',
-        fileType: 'Video',
-        thumbnailUrl: null,
-        fileSize: '24.8 MB',
-        uploadTime: 'Aug 28, 2023'
-    },
-    {
-        id: 4,
-        fileName: 'report_q3.docx',
-        fileType: 'Document',
-        thumbnailUrl: null,
-        fileSize: '1.2 MB',
-        uploadTime: 'Aug 25, 2023'
-    },
-    {
-        id: 5,
-        fileName: 'podcast_interview.mp3',
-        fileType: 'Audio',
-        thumbnailUrl: null,
-        fileSize: '18.5 MB',
-        uploadTime: 'Aug 20, 2023'
-    }
-]);
+// 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);
+});
+
+// Status options
+const statusOptions = [
+    { label: '发布', value: 'published' },
+    { label: '草稿', value: 'draft' }
+];
 
 // Open media selection dialog
 const openMediaDialog = () => {
     mediaDialogVisible.value = true;
+    mediaCurrentPage.value = 1;
+    mediaFirst.value = 0;
     loadMediaItems();
 };
 
-// Load media items
+// Load media items with pagination
 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.items;
+        mediaTotalRecords.value = response.total;
     } catch (error) {
         toast.add({ severity: 'error', summary: '错误', detail: '加载媒体文件失败', life: 3000 });
     } finally {
@@ -107,6 +84,14 @@ const loadMediaItems = async () => {
     }
 };
 
+// Handle media pagination
+const onMediaPage = (event) => {
+    mediaFirst.value = event.first;
+    mediaRows.value = event.rows;
+    mediaCurrentPage.value = Math.floor(event.first / event.rows) + 1;
+    loadMediaItems();
+};
+
 // Confirm media selection
 const confirmMediaSelection = () => {
     if (selectedMediaItems.value.length) {
@@ -201,6 +186,21 @@ const getFileIcon = (file) => {
     };
     return `pi ${map[file.fileType] || 'pi-file'}`;
 };
+
+// Format file size helper
+const formatFileSize = (bytes) => {
+    if (bytes === 0) return '0 B';
+    const k = BigInt(1024);
+    const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+    const bytesValue = BigInt(bytes);
+    let i = 0;
+    let size = bytesValue;
+    while (size >= k && i < sizes.length - 1) {
+        size = size / k;
+        i++;
+    }
+    return `${Number(size).toLocaleString('en-US')} ${sizes[i]}`;
+};
 </script>
 
 <template>
@@ -224,8 +224,20 @@ const getFileIcon = (file) => {
                     <small v-if="errors.title" class="p-error">{{ errors.title }}</small>
                 </div>
 
+                <!-- Status -->
+                <div class="col-span-2">
+                    <label class="block text-sm font-medium text-gray-700 mb-1">状态</label>
+                    <div class="flex gap-4">
+                        <div v-for="option in statusOptions" :key="option.value" class="flex items-center">
+                            <RadioButton :value="option.value" v-model="post.status"
+                                :inputId="'status_' + option.value" />
+                            <label :for="'status_' + option.value" class="ml-2">{{ option.label }}</label>
+                        </div>
+                    </div>
+                </div>
+
                 <!-- Price -->
-                <div class="col-span-1">
+                <div class="col-span-2">
                     <label for="price" class="block text-sm font-medium text-gray-700 mb-1">价格 (¥)</label>
                     <InputNumber id="price" v-model="post.price" mode="currency" currency="CNY" :minFractionDigits="2"
                         class="w-full" />
@@ -290,9 +302,22 @@ const getFileIcon = (file) => {
         </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>
@@ -328,7 +353,12 @@ const getFileIcon = (file) => {
                 </template>
             </Column>
 
-            <Column field="fileSize" header="文件大小"></Column>
+            <Column field="file_size" header="文件大小">
+                <template #body="{ data }">
+                    {{ formatFileSize(data.file_size) }}
+                </template>
+            </Column>
+
             <Column field="uploadTime" header="上传时间"></Column>
         </DataTable>