feat: select media by type
This commit is contained in:
yanghao05
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user