80 lines
1.8 KiB
Vue
80 lines
1.8 KiB
Vue
|
<script setup lang="ts">
|
|||
|
|
|
|||
|
|
const model = defineModel({
|
|||
|
|
type: Boolean
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const props = defineProps<{
|
|||
|
|
row: FileInfo
|
|||
|
|
}>()
|
|||
|
|
|
|||
|
|
const transformData = (data: any) => {
|
|||
|
|
return new Promise((resolve) => {
|
|||
|
|
const reader = new FileReader()
|
|||
|
|
reader.readAsText(data, 'UTF-8')
|
|||
|
|
reader.onload = () => {
|
|||
|
|
resolve(reader.result)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const src = computed(() => bucketApi.detail.downloadUrl(props.row))
|
|||
|
|
|
|||
|
|
const { data } = useAsyncData(() =>
|
|||
|
|
$fetch(src.value, {
|
|||
|
|
responseType: 'blob',
|
|||
|
|
}).then(res=>{
|
|||
|
|
return transformData(res)
|
|||
|
|
}), {
|
|||
|
|
watch: [src],
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
|
|||
|
|
function rendered() {
|
|||
|
|
console.log('rendered')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<UModal v-model="model" fullscreen>
|
|||
|
|
<UCard
|
|||
|
|
:ui="{
|
|||
|
|
base: 'h-full flex flex-col',
|
|||
|
|
rounded: '',
|
|||
|
|
divide: 'divide-y divide-gray-100 dark:divide-gray-800',
|
|||
|
|
body: {
|
|||
|
|
base: 'grow !p-0 '
|
|||
|
|
}
|
|||
|
|
}"
|
|||
|
|
>
|
|||
|
|
<template #header>
|
|||
|
|
<div class="flex items-center justify-between">
|
|||
|
|
<div>
|
|||
|
|
<h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
|
|||
|
|
{{ row.Name }}
|
|||
|
|
<UTooltip text="文件为PDF文件，该页面仅提供预览，编辑请下载文件...">
|
|||
|
|
<UButton size="sm" @click="bucketApi.detail.download(row)">
|
|||
|
|
下载编辑
|
|||
|
|
</UButton>
|
|||
|
|
</UTooltip>
|
|||
|
|
</h3>
|
|||
|
|
</div>
|
|||
|
|
<UButton
|
|||
|
|
color="gray"
|
|||
|
|
variant="ghost"
|
|||
|
|
icon="i-heroicons-x-mark-20-solid"
|
|||
|
|
class="-my-1"
|
|||
|
|
@click="model = false"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
<div>
|
|||
|
|
<div class="txt p-4" style="white-space: pre-wrap;">
|
|||
|
|
{{ data }}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</UCard>
|
|||
|
|
</UModal>
|
|||
|
|
</template>
|