知识库图片预览,自定义瓦片渲染

src/views/quality/knowledgeDocument/index.vue

@@ -100,7 +100,7 @@
                   <el-button
                     type="primary"
                     v-auth="'/zm/api/v1/system/documentData/get'"
-                    v-if="state.acceptType.includes(scope.row.fileSuffix)"
+                    v-if="acceptType.includes(scope.row.fileSuffix)"
                     link
                     @click="handleView(scope.row)"
                     ><el-icon><View /></el-icon>查看</el-button
@@ -108,7 +108,7 @@
                   <el-button
                     type="primary"
                     v-auth="'/zm/api/v1/system/documentData/complaintBoxAdd'"
-                    v-if="state.acceptType.includes(scope.row.fileSuffix)"
+                    v-if="state.wordType.includes(scope.row.fileSuffix)"
                     link
                     @click="updataView(scope.row)"
                     ><el-icon><EditPen /></el-icon>修改文件</el-button
@@ -159,6 +159,15 @@
       <RecyclingStation ref="recylingRef"></RecyclingStation>
     </el-tab-pane>
   </el-tabs>
+  <el-image-viewer
+    ref="imageRef"
+    style="width: 100%; height: 100%"
+    :url-list="[imgUrl]"
+    v-if="imgUrl"
+    show-progress
+    fit="cover"
+    @close="imgUrl = ''"
+  />
 </template>
 
 <script setup name="KnowledgeDocument" lang="ts">
@@ -203,6 +212,8 @@ const uploadParams = computed(() => {
   };
 });
 
+const imgUrl = ref<string>('');
+
 const filterText = ref('');
 const treeRef = ref();
 const documentDetailRef = ref();
@@ -243,11 +254,15 @@ const state = reactive({
   parentName: '',
   selectedNodeId: null,
   projectId: currentProject.value?.id || '',
-  acceptType: ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'],
+  imgType: ['jpg', 'png', 'jpeg', 'gif', 'svg'],
+  wordType: ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'],
+  browserViewableType: ['html', 'htm', 'txt', 'log', 'md', 'json', 'xml', 'css', 'js'],
+
   draggableCheck: true,
   activeName: ''
 });
 
+const acceptType = computed(() => [...state.imgType, ...state.wordType, ...state.browserViewableType]);
 watch(filterText, (val: any) => {
   treeRef.value!.filter(val);
 });
@@ -416,10 +431,17 @@ const updateName = (row) => {
   editName(row, '请输入文件名称', 1);
 };
 const handleView = (row) => {
-  state.showDocumentDetail = true;
-  nextTick(() => {
-    documentDetailRef.value.openDialog(row);
-  });
+  if (state.imgType.includes(row.fileSuffix)) {
+    imgUrl.value = row.fileUrl;
+    return;
+  } else if (state.wordType.includes(row.fileSuffix)) {
+    state.showDocumentDetail = true;
+    nextTick(() => {
+      documentDetailRef.value.openDialog(row);
+    });
+  } else {
+    window.open(row.fileUrl);
+  }
 };
 // 关闭在线编辑弹框
 const onClose = () => {