ShutongInterconnectedChemicalCloudPlatform/src/views/doc/recentVisited.vue

<script lang="ts" setup>
import {
    Document,
    Delete,
    Edit,
    View,
  } from '@element-plus/icons-vue'
import { shareItem} from "@/api/doc/type"
import {fileType } from "./tools"

const apiURL=import.meta.env.VITE_APP_BASE_API+"/hxpan/api"
const siteHost=document.location.origin;
const officeHost=import.meta.env.VITE_OFFICE_HOST
const currentHoverRow=ref("")  //当前选择的table行
const visitList=ref<shareItem[]>([])
let _db:Object; //indexedDB

const props = withDefaults(defineProps<{
  uid:string,
  udprt:string,
}>(),{})

//在线预览
function onlyOfficeView(row:shareItem){
  const _type=fileType(row.name!)
  if(_type!==""){ //office file
    const info =btoa(encodeURIComponent(`${row.userUuid}/root${row.matters[0].path}`))
    const _url=`${siteHost}${apiURL}/share/zip?shareUuid=${row.uuid}&code=${row.code}&uid=${props.uid}&dprt=${props.udprt}&puuid=root&rootUuid=root`
    window.open(`/#/onlyoffice?name=${row.name}&dtype=${_type}&info=${info}&fileurl=`+encodeURIComponent(_url),"_blank")
  }else{
    //by kkFilePreview
    let a = row.name ?? '';
    if(a.endsWith('...')){
      a=`${row.uuid}-${row.code}.zip`
    }
    
    //由于预览服务在缓存文件时，直接按文件名缓存，所以同名文件就会出现覆盖错乱的问题
    a=a.match("(\.[a-zA-Z]+)$")
    if (a && a.length>0) {
      a=`${row.uuid}-${row.code}${a[0]}`
    }else{
      a=`${row.uuid}${row.name}`
    }

    let _url=`${siteHost}${apiURL}/share/zip?shareUuid=${row.uuid}&code=${row.code}&uid=${props.uid}&dprt=${props.udprt}&puuid=root&rootUuid=root&fullfilename=${a}`
    window.open(`${officeHost}/kkpreview/onlinePreview?url=`+window.btoa(encodeURIComponent(_url)),"_blank")
  }
}

//在线编辑
function onlyOfficeEdit(row:shareItem){
  const _type=fileType(row.name!)
  if(_type===""){
    alert("暂不支持该类型编辑")
    return 
  }
  
  const pstate=(row.permitList?.includes(props.uid)|| row.userUuid===atob(props.uid))
  if (!pstate){
    alert("你没有权限编辑")
    return
  }

  ElMessageBox.confirm("线上资源有限，确定继续线上编辑吗", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(()=>{
    //office file
    //base64 encode for MASK
    const _verify = btoa(row.uuid.match(/(\w+-\w+)/)[0]+`${pstate}`) //增加一个权限验证的标记
    const info =btoa(encodeURIComponent(`${row.userUuid}/root${row.matters[0].path}`))
    const _url=`${siteHost}${apiURL}/share/zip?shareUuid=${row.uuid}&code=${row.code}&uid=${props.uid}&dprt=${props.udprt}&puuid=root&rootUuid=root`
    window.open(`/#/onlyoffice?name=${row.name}&dtype=${_type}&info=${info}&verify=${_verify}&fileurl=`+encodeURIComponent(_url),"_blank") 
  })
}

//前端indexedDB的记录删除操作
function onClearHistory(row:shareItem){
  _db.transaction('vlist','readwrite').objectStore("vlist").delete(row.uuid);
  visitList.value=visitList.value.filter((item)=>{
    return item.uuid!==row.uuid
  })
}

function handleMouseEnter(row:any){
  currentHoverRow.value=row.uuid
}

onMounted(()=>{
  const request = indexedDB.open('visitList')
  request.onupgradeneeded = (event) => {
    // 首次创建或升级版本时触发
    _db = event.target.result;
    if (!_db.objectStoreNames.contains('vlist')) {
      // 创建对象仓库（类似表）
      const store = _db.createObjectStore('vlist', { 
        keyPath: 'uuid', // 主键
      });
    }
  };
  request.onsuccess = (e) => {
    if (!_db) _db= e.target.result;
    const store = _db.transaction('vlist', 'readonly').objectStore("vlist");

    store.openCursor().onsuccess = (event) => {
      const cursor = event.target.result;
      if (cursor) {
        visitList.value.push(cursor.value);
        cursor.continue();
      }
    };
  };
})

onUnmounted(()=>{
  if (_db) _db.close()
})

</script>

<template>
  <el-row :gutter="24">
      <el-table
        stripe
        :data="visitList"
        :header-cell-style="{ background: '#f5f8fd' }"
        style="width: 100%"
        row-key="uuid"
        :row-style ="() => ({ height: '30px' })"
        @cell-mouse-enter="handleMouseEnter">
        <el-table-column style="width: 70%;" property="name" label="最近访问">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <el-icon :size="20"><component :is="Document" /></el-icon>
              <span style="margin-left: 10px">{{scope.row.name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column width="250" align="center">
          <template #default="scope">
            <div v-show="currentHoverRow === scope.row.uuid">
              <el-button size="small" :icon="View" circle @click="onlyOfficeView(scope.row)"></el-button>
              <el-button size="small" :icon="Edit" circle @click="onlyOfficeEdit(scope.row)"></el-button>
              <el-button size="small" :icon="Delete" circle @click="onClearHistory(scope.row)"></el-button>  
            </div>
          </template>
        </el-table-column>
  
        <el-table-column width="100" prop="expireTime" label="失效日期">
          <template #default="scope">
            <span v-if="scope.row.expireTime">{{ scope.row.expireInfinity? '永久有效': scope.row.expireTime.slice(0,16) }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
</template>
<style>
    
</style>