集成kkFileView预览服务

.env.development

@@ -9,3 +9,4 @@ VITE_APP_BASE_API = '/dev-api'
 VITE_APP_BASE_URL = 'http://myvuetest.net'
 VITE_APP_TOKEN_KEY = 'offlineAccessSystemAppToken'
 VITE_APP_SJZT_URL = 'http://172.20.5.86/prod-api'
+VITE_OFFICE_HOST="http://192.168.56.101:8012"

.env.production

@@ -5,3 +5,4 @@ VITE_APP_PORT = 17777
 VITE_APP_BASE_API = ''
 VITE_APP_TOKEN_KEY = 'onlineAccessSystemAppToken'
 VITE_APP_SJZT_URL = 'http://120.224.6.6:29911/prod-api'
+VITE_OFFICE_HOST=''

.env.staging

@@ -4,3 +4,4 @@ NODE_ENV='staging'
 VITE_APP_TITLE = '数通智联化工云平台'
 VITE_APP_PORT = 3000
 VITE_APP_BASE_API = '/prod--api'
+VITE_OFFICE_HOST=''

src/views/doc/preview.vue

@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+
+import { ElDialog } from 'element-plus';
+
+const props = withDefaults(defineProps<{
+  url:string,   
+  closeFunc:()=>void,  //父级只需销毁组件
+}>(),{})
+
+onMounted(()=>{})
+
+</script>
+
+<template>
+  <el-dialog  :model-value="true" :style="{height: '90%',width:'90%'}" v-on:close="closeFunc()">
+    <template #default>
+        <iframe id="preivew" width="100%" height="100%" :src="props.url"></iframe>
+    </template>
+   
+  </el-dialog>
+</template>
+<style>
+    /* dialog的body内容样式设置*/
+    .el-dialog__body{
+        height: 90%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+    .el-dialog{
+      /* 让整个弹出窗口位置更高一些*/
+      --el-dialog-margin-top:7vh; 
+    }
+    
+</style>

src/views/doc/share.vue

@@ -16,16 +16,19 @@ import {
   Folder,
   Share,
   Avatar,
+  View,
 } from '@element-plus/icons-vue'
 import {ElText } from "element-plus";
 import {getFileIcon,checkExpirTime } from "./tools"
 import sharePermission from './sharePermission.vue';
+import preview from './preview.vue';
 
 const route = useRoute()
 const userStore = useUserStore();
 const uid=btoa("p0"+userStore.userInfoCont.userId);
 const siteHost=document.location.origin;
 const apiURL=import.meta.env.VITE_APP_BASE_API+"/hxpan/api"
+const officeHost=import.meta.env.VITE_OFFICE_HOST
 const matterList = ref<matterInfo[]>()  //文件列表
 const browerMode=ref(false)  //share模式  1)self-list(default) 2)brower
 const currentHoverRow=ref("")  //当前选择的table行
@@ -98,6 +101,18 @@ function onShareMember(row:matterInfo){
     })
 }
 
+//文件预览
+function onShareView(row:matterInfo){
+  if(row.name.endsWith('...')){
+    row.name="archive.zip"
+  }
+  let _url=`${siteHost}${apiURL}/share/zip?shareUuid=${row.uuid}&code=${row.code}&puuid=root&rootUuid=root&fullfilename=${row.name}`
+  dynamicVNode.value=h(preview,{
+    url:`${officeHost}/onlinePreview?url=`+encodeURIComponent(btoa(_url)),
+    closeFunc:()=>dynamicVNode.value=null
+  })
+}
+
 //加载文件列表
 function onLoadShareList(){
   let _page: matterPage = {
@@ -156,7 +171,8 @@ onMounted(() => {
         <el-table-column width="250" align="center">
           <template #default="scope">
             <div v-show="currentHoverRow === scope.row.uuid">
-              <el-button size="small" :icon="Avatar" circle @click="()=>{drawerModel=true; permitListRef=scope.row.permitInfos}"></el-button>              
+              <el-button size="small" :icon="Avatar" circle @click="()=>{drawerModel=true; permitListRef=scope.row.permitInfos}"></el-button>
+              <el-button size="small" :icon="View" circle @click="onShareView(scope.row)"></el-button>
               <el-button size="small" :icon="Share" circle @click="showShareMessage(scope.row)"></el-button>
               <el-button size="small" :icon="Delete" circle @click="onShareDelete(scope.row)"></el-button>
             </div>