ShutongInterconnectedChemicalCloudPlatform/src/views/doc/share.vue

<!--
@ 作者: han2015
@ 时间: 2025-05-12 15:39:13
@ 备注: 文档管理组件
-->
<script lang="ts" setup>

import { useRoute } from 'vue-router'

import { useUserStore } from "@/store/modules/user";
import { getShareList,postDelMatter,getShareBrowse,postShareDelete} from "@/api/doc/index"
import { matterPage,matterInfo,respCreateShare } from "@/api/doc/type"
import { h } from 'vue'
import {
  Delete,
  Folder,
  Share,
} from '@element-plus/icons-vue'
import {ElText } from "element-plus";
import { getExpirTime, getFileIcon,checkExpirTime } from "./tools"

const route = useRoute()
const userStore = useUserStore();
const uid="p0"+userStore.userInfoCont.userId;
const siteHost=import.meta.env.VITE_APP_BASE_URL
const apiURL=import.meta.env.VITE_APP_BASE_API+"/hxpan/api"
const matterList = ref<matterInfo[]>()
const browerMode=ref(false)  //share模式  1)self-list(default) 2)brower
const currentHoverRow=ref("")


function showShareMessage(row:{uuid:string,code:string,name:string,expireTime:string}){
  let _shareURL=`${siteHost}/#/doc/share?uuid=${row.uuid}&code=${row.code}`
  ElMessageBox({
    title: '分享详情',
    customStyle: { '--el-messagebox-width':'800px',padding:'40px'},
    message: () => h('div',{style:{display:'flex','flex-direction':'column','line-height':'34px', width:'600px'}},[
     h(ElText,{style:{'align-self':'flex-start'}},()=>row.name),
     h(ElText,{style:{'align-self':'flex-start'}},()=>"失效时间："+row.expireTime),
     h(ElText,{style:{'align-self':'flex-start'}},()=>"链接："+_shareURL),
     h(ElButton, {
       type: 'primary',
       style: {  width: '20%' },
       onClick: () => {
        let _url=apiURL+`/share/zip?shareUuid=${row.uuid}&code=${row.code}&puuid=root&rootUuid=root`
        window.open(_url)
       }
     },()=>'下载')
    ]),
    confirmButtonText: '复制分享链接',
    showCancelButton: true
  }).then(()=>{
    navigator.clipboard.writeText(_shareURL)
  }).catch(() => {
    if (browerMode.value){
      location.href=`/#/doc/share`
    }
  });
}

//----------------------------------------
//删除分享
function onShareDelete(row:matterInfo){
  if (row.uuid){
    ElMessageBox.confirm("确认要取消此文件分享！", "警告", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(()=>{
      postShareDelete(uid,{
        "uuid":row.uuid
      }).then(()=>onLoadShareList())
    })
  }
}

//加载文件列表
function onLoadShareList(){
  let _page: matterPage = {
    page: 0,
    pageSize: 100,
    orderCreateTime: "DESC",
    orderDir: "DESC",
  }

  getShareList(uid,_page).then((resp)=>{
    matterList.value=resp.data.data
  })
}

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

onMounted(() => {
  const query = route.query
  //只是分享链接的请求
  if (query.uuid && query.code){
    browerMode.value=true
    getShareBrowse("",{shareUuid:query.uuid,code:query.code,puuid:'root',rootUuid:'root'}).then((resp)=>{ 
      showShareMessage(resp.data) 
    })
    return
  }
  browerMode.value=false
  onLoadShareList()
})
</script>

<template>
  <div class="app_container">
    <el-row :gutter="24" v-if="!browerMode">
      <el-table
        stripe
        :data="matterList"
        :header-cell-style="{ background: '#f5f8fd' }"
        style="width: 100%"
        row-key="value"
        :row-style ="() => ({ height: '55px' })"
        @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="26">
                <component v-if="scope.row.dir" :is="Folder" />
                <component v-else :is="getFileIcon(scope.row.name)" />
              </el-icon>
              <span style="margin-left: 10px">{{ checkExpirTime(scope.row)?scope.row.name+' (已过期)':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.name">
              <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>
          </template>
        </el-table-column>
  
        <el-table-column 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>
  </div>

</template>

<style lang="scss" scoped>
.app_container {
  padding: 10px 30px 0px 30px;
  height: calc(100% - 10px);
  overflow: hidden;
  overflow-y: auto;
  width: 100%;
}

</style>