<script lang="ts" setup>
|
import { reactive, toRefs } from 'vue';
|
|
import { downloadByUrl } from '@jnpf/utils';
|
|
import { $t } from '@vben/locales';
|
import { useAccessStore } from '@vben/stores';
|
|
import { globalShareState } from '@vben-core/shared/global-state';
|
|
import { Modal as AModal, message } from 'ant-design-vue';
|
|
import ModalClose from '../../../core/modal/src/components/ModalClose.vue';
|
|
interface State {
|
file: any;
|
loading: boolean;
|
title: string;
|
url: string;
|
visible: boolean;
|
}
|
const props = defineProps({
|
showDownload: { default: false, type: Boolean },
|
type: { default: 'annex', type: String },
|
});
|
defineEmits(['register']);
|
const { getDownloadUrl, previewFile } = globalShareState.getApi();
|
|
const accessStore = useAccessStore();
|
const state = reactive<State>({
|
file: {},
|
loading: false,
|
title: '',
|
url: '',
|
visible: false,
|
});
|
const { loading, title, url, visible } = toRefs(state);
|
|
defineExpose({ init });
|
|
function init(file) {
|
state.title = `文档预览 - ${file.name}`;
|
state.url = '';
|
state.file = file;
|
state.visible = true;
|
state.loading = true;
|
const query = {
|
fileDownloadUrl: file.url,
|
fileName: file.fileId,
|
fileVersionId: file.fileVersionId,
|
};
|
previewFile(query)
|
.then((res) => {
|
state.loading = false;
|
if (res.data) {
|
state.url = `${res.data}&token=${accessStore.accessToken}`;
|
} else {
|
message.warning('文件不存在');
|
handleCancel();
|
}
|
})
|
.catch(() => {
|
state.loading = false;
|
handleCancel();
|
});
|
}
|
function handleCancel() {
|
state.visible = false;
|
}
|
function handleDownload() {
|
if (!state.file.fileId) return;
|
getDownloadUrl(props.type, state.file.fileId).then((res) => {
|
downloadByUrl({ fileName: state.file.name, url: res.data.url });
|
});
|
}
|
</script>
|
<template>
|
<AModal
|
v-model:open="visible"
|
:closable="false"
|
:footer="null"
|
: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 :size="10" class="options">
|
<a-button v-if="showDownload" type="primary" @click="handleDownload()">下载</a-button>
|
<a-button @click="handleCancel()">{{ $t('common.cancelText') }}</a-button>
|
</a-space>
|
</div>
|
</template>
|
<div class="basic-content bg-white" v-loading="loading">
|
<iframe :src="url" frameborder="0" height="100%" width="100%"></iframe>
|
</div>
|
</AModal>
|
</template>
|
<style lang="scss">
|
.file-preview-modal {
|
.ant-modal-body {
|
padding: 10px !important;
|
}
|
|
.header-txt {
|
max-width: 80vw !important;
|
}
|
}
|
</style>
|
