gaoxing/UNIVPLMDataIntegration
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
zuohuaijun 2025-01-26 02:37:44 +08:00
parent c4ea5296cb
commit c4c0ebba0f
1 changed files with 13 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
Web/src/views/system/file/index.vue
View File

@ -124,13 +124,13 @@
</splitpanes> </splitpanes>
<el-drawer :title="state.fileName" v-model="state.docxVisible" size="70%" destroy-on-close> <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>
<el-drawer :title="state.fileName" v-model="state.xlsxVisible" size="70%" destroy-on-close> <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>
<el-drawer :title="state.fileName" v-model="state.pdfVisible" size="70%" destroy-on-close> <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-drawer>
<el-image-viewer v-if="state.showViewer" :url-list="state.previewList" :hideOnClickModal="true" @close="state.showViewer = false"></el-image-viewer> <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" /> <EditFile ref="editRef" title="编辑文件" @handleQuery="handleQuery" />
@ -169,6 +169,7 @@ const editRef = ref<InstanceType<typeof EditFile>>();
const fileTreeRef = ref<InstanceType<typeof FileTree>>(); const fileTreeRef = ref<InstanceType<typeof FileTree>>();
const state = reactive({ const state = reactive({
loading: false,
queryParams: { queryParams: {
fileName: undefined, fileName: undefined,
filePath: undefined, filePath: undefined,
@ -330,6 +331,7 @@ const handleNodeChange = async (node: any) => {
// 打开Pdf预览页面 // 打开Pdf预览页面
const showPreviewDialog = async (row: any) => { const showPreviewDialog = async (row: any) => {
state.loading = true;
if (row.suffix == '.pdf') { if (row.suffix == '.pdf') {
state.fileName = `【${row.fileName}${row.suffix}】`; state.fileName = `【${row.fileName}${row.suffix}】`;
state.pdfUrl = fetchFileUrl(row); 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> </script>