支持私有文件预览

src/views/doc/manage.vue

@@ -12,6 +12,7 @@ import { matterPage,matterInfo,respCreateShare,matterTree } from "@/api/doc/type
 import { h } from 'vue'
 import {
   Delete,
+  View,
   Download,
   Share,
   Search,
@@ -22,6 +23,7 @@ import {
 } from '@element-plus/icons-vue'
 import {ElSelect,ElOption, ElText,ElInput,TableInstance,ElMessage,UploadFile,UploadFiles,ElPagination,ElTree,TreeInstance} from "element-plus";
 import type { TreeNode } from 'element-plus/es/components/tree/src/tree.type'
+import preview from './preview.vue';
 
 //TODO: add file icons  done!
 //TODO: click on table-item， 1）preview on file .....................
@@ -51,7 +53,8 @@ const tabSelected=ref<matterInfo[]>([]) //table组件多选数据维护
 const treeData=ref<matterTree[]>([{name:'root',uuid:'root',children:[]}])
 const treeRef = ref();
 const currentNode=ref<matterTree>({})  //打开的路径层次
-
+const officeHost=import.meta.env.VITE_OFFICE_HOST
+const dynamicVNode = ref<VNode | null>(null) //permission 组件的父组件
 const multipleTableRef = ref<TableInstance>()
 const paginInfo = ref({ page: 0, total: 0 })
 const formHeaders=ref({
@@ -373,6 +376,22 @@ function onNodeClick(data:matterTree,node:TreeNode,self:any,env:any){
   })
 }
 
+//文件预览
+function onPrivateView(row:matterInfo){
+  let a = `${row.uuid}${row.name}`
+  let _token=document.cookie.match(/hxpan=([\w-]*)/)
+  if (_token&&_token.length>1){
+    _token=_token[1]
+  }
+
+  let _url=`${siteHost}${apiURL}/alien/download/${row.uuid}/${row.name}?access_token=${_token}&fullfilename=${a}`
+
+  dynamicVNode.value=h(preview,{
+    url:`${officeHost}/kkpreview/onlinePreview?url=`+window.btoa(unescape(encodeURIComponent(_url))),
+    closeFunc:()=>dynamicVNode.value=null
+  })
+}
+
 function handleMouseEnter(row:any){
   currentHoverRow.value=row.name
 }
@@ -481,6 +500,7 @@ const handleSelectionChange = (val:matterInfo[]) => {
           <template #default="scope">
             <div v-show="currentHoverRow === scope.row.name">
               <el-button size="small" :icon="Promotion" circle ></el-button>
+              <el-button size="small" :icon="View" circle @click="onPrivateView(scope.row)"></el-button>
               <el-button size="small" :icon="Share" circle @click="onShareMatter(scope.row)"></el-button>
               <el-button size="small" :icon="Download" circle @click="onDownload(scope.row)"></el-button>
               <el-button size="small" :icon="Edit" circle @click="onMatterRename(scope.row)"></el-button>
@@ -503,6 +523,9 @@ const handleSelectionChange = (val:matterInfo[]) => {
     </el-row>
   </div>
 
+    <div v-if="dynamicVNode">
+      <component :is="dynamicVNode" />
+    </div>
   </div>
 </template>