😎增加文件预览等待条Loading显示

This commit is contained in:
zuohuaijun 2025-01-26 02:37:44 +08:00
parent c4ea5296cb
commit c4c0ebba0f

View File

@ -124,13 +124,13 @@
</splitpanes>
<el-drawer :title="state.fileName" v-model="state.docxVisible" size="70%" destroy-on-close>
<vue-office-docx :src="state.docxUrl" style="height: calc(100vh - 37px)" @rendered="handleRendered" @error="handleError" />
<vue-office-docx v-loading="state.loading" :src="state.docxUrl" style="height: calc(100vh - 37px)" @rendered="handleRendered" @error="handleError" />
</el-drawer>
<el-drawer :title="state.fileName" v-model="state.xlsxVisible" size="70%" destroy-on-close>
<vue-office-excel :src="state.excelUrl" style="height: calc(100vh - 37px)" @rendered="handleRendered" @error="handleError" />
<vue-office-excel v-loading="state.loading" :src="state.excelUrl" style="height: calc(100vh - 37px)" @rendered="handleRendered" @error="handleError" />
</el-drawer>
<el-drawer :title="state.fileName" v-model="state.pdfVisible" size="70%" destroy-on-close>
<vue-office-pdf :src="state.pdfUrl" style="height: calc(100vh - 37px)" @rendered="handleRendered" @error="handleError" />
<vue-office-pdf v-loading="state.loading" :src="state.pdfUrl" style="height: calc(100vh - 37px)" @rendered="handleRendered" @error="handleError" />
</el-drawer>
<el-image-viewer v-if="state.showViewer" :url-list="state.previewList" :hideOnClickModal="true" @close="state.showViewer = false"></el-image-viewer>
<EditFile ref="editRef" title="编辑文件" @handleQuery="handleQuery" />
@ -169,6 +169,7 @@ const editRef = ref<InstanceType<typeof EditFile>>();
const fileTreeRef = ref<InstanceType<typeof FileTree>>();
const state = reactive({
loading: false,
queryParams: {
fileName: undefined,
filePath: undefined,
@ -330,6 +331,7 @@ const handleNodeChange = async (node: any) => {
// Pdf
const showPreviewDialog = async (row: any) => {
state.loading = true;
if (row.suffix == '.pdf') {
state.fileName = `${row.fileName}${row.suffix}`;
state.pdfUrl = fetchFileUrl(row);
@ -365,8 +367,14 @@ const handleEdit = (row: any) => {
};
//
const handleRendered = () => {};
const handleRendered = () => {
state.loading = false;
};
//
const handleError = () => {};
const handleError = () => {
ElMessage.error('预览失败');
state.loading = false;
state.docxVisible = false;
};
</script>