<script lang="ts" setup>
|
import { reactive, toRefs } from 'vue';
|
|
import { useMessage } from '@jnpf/hooks';
|
import { ModalClose } from '@jnpf/ui/modal';
|
|
import { useAccessStore } from '@vben/stores';
|
|
import { Modal as AModal } from 'ant-design-vue';
|
|
import { previewFile } from '#/api/core/common';
|
import { $t } from '#/locales';
|
|
interface State {
|
visible: boolean;
|
loading: boolean;
|
title: string;
|
url: string;
|
file: any;
|
}
|
|
const { createMessage } = useMessage();
|
const accessStore = useAccessStore();
|
const state = reactive<State>({
|
visible: false,
|
loading: false,
|
title: '',
|
url: '',
|
file: {},
|
});
|
const { visible, loading, title, url } = toRefs(state);
|
|
defineExpose({ init });
|
|
function init(file) {
|
state.title = `文档预览 - ${file.name}`;
|
state.url = '';
|
state.file = file;
|
state.visible = true;
|
state.loading = true;
|
const query = {
|
fileName: file.fileId,
|
fileVersionId: file.fileVersionId,
|
fileDownloadUrl: file.url,
|
};
|
previewFile(query)
|
.then((res) => {
|
state.loading = false;
|
if (res.data) {
|
state.url = `${res.data}&token=${accessStore.accessToken}`;
|
} else {
|
createMessage.warning('文件不存在');
|
handleCancel();
|
}
|
})
|
.catch(() => {
|
state.loading = false;
|
handleCancel();
|
});
|
}
|
function handleCancel() {
|
state.visible = false;
|
}
|
</script>
|
<template>
|
<AModal
|
v-model:open="visible"
|
:footer="null"
|
:closable="false"
|
:keyboard="false"
|
:mask-closable="false"
|
class="common-container-modal jnpf-full-modal full-modal file-preview-modal"
|
wrap-class-name="fullscreen-modal">
|
<template #closeIcon>
|
<ModalClose :can-fullscreen="false" @cancel="handleCancel" />
|
</template>
|
<template #title>
|
<div class="jnpf-full-modal-header">
|
<div class="header-title">
|
<p class="header-txt">{{ title }}</p>
|
</div>
|
<a-space class="options" :size="10">
|
<a-button @click="handleCancel()">{{ $t('common.cancelText') }}</a-button>
|
</a-space>
|
</div>
|
</template>
|
<div class="basic-content bg-white" v-loading="loading">
|
<iframe width="100%" height="100%" :src="url" frameborder="0"></iframe>
|
</div>
|
</AModal>
|
</template>
|
<style lang="scss">
|
.file-preview-modal {
|
.ant-modal-body {
|
padding: 10px !important;
|
}
|
|
.header-txt {
|
max-width: 80vw !important;
|
}
|
}
|
</style>
|
