``

package.json

@@ -18,6 +18,7 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "2.1.0",
+    "@layui/layui-vue": "^2.18.3",
     "@tato30/vue-pdf": "^1.10.0",
     "@vant/auto-import-resolver": "^1.2.1",
     "@vueup/vue-quill": "1.2.0",

src/components/pdfview/index.vue

@@ -1,10 +1,10 @@
 <template>
-  <div style="width: 100%;height:100%;position:absolute;text-align: center">
+  <div style="width: 100%;height:100%;position:absolute;text-align: center;overflow: auto">
     <el-watermark :font="font" :content="watertext" style="width: 100%;height:100%;position:absolute">
       <el-image :src="props.src" v-if="ismobile && ispic"></el-image>
       <!--      <PicShow :src="props.src" v-if="ispic && !ismobile" />-->
       <div v-if="ispic && !ismobile" style="position:relative;">
-        <el-button style="position:fixed;top:15vh;left: 6%;" @click="showjb=!showjb">{{!showjb?"查看局部":"返回"}}</el-button>
+        <el-button style="position:fixed;top:15vh;left: 20px;" @click="showjb=!showjb">{{!showjb?"查看局部":"返回"}}</el-button>
         <el-image v-if="!showjb" :src="props.src" :preview-src-list="[props.src]" :fit="'cover'" style="max-width:80%;"></el-image>
         <PicShow v-if="showjb" :src="props.src" />
       </div>

src/main.ts

@@ -32,6 +32,8 @@ import { parseTime, addDateRange, handleTree, selectDictLabel, selectDictLabels
 
 // 国际化
 import i18n from '@/lang/index';
+import layer from '@layui/layer-vue';
+import '@layui/layer-vue/lib/index.css';
 
 const app = createApp(App);
 // 全局方法挂载
@@ -50,6 +52,7 @@ app.use(ElementIcons);
 app.use(router);
 app.use(store);
 app.use(i18n);
+app.use(layer);
 app.use(plugins);
 // 自定义指令
 directive(app);

src/router/index.ts

@@ -64,6 +64,11 @@ export const constantRoutes: RouteOption[] = [
   },
 
   {
+    path: '/file/preview',
+    component: () => import('@/views/filepreview/index.vue'),
+    hidden: true
+  },
+  {
     path: '/h5',
     hidden: true,
     redirect: '/h5/login',

src/views/filepreview/index.vue

@@ -0,0 +1,137 @@
+<template>
+  <div style="position:relative;    height: 100%;padding-bottom: 73px;">
+    <div style="position: relative;min-height:70vh;height: 100%">
+      <el-affix :offset="300" style="width: 100%;">
+        <div style="position: absolute;">
+          <el-button type="primary" icon="DArrowLeft" :disabled="ccindex<=0" @click="fileindexlook(ccindex-1)"></el-button>
+        </div>
+        <div style="float: right;">
+          <el-button type="primary" icon="DArrowRight" :disabled="ccindex+1>=filelist.length" @click="fileindexlook(ccindex+1)"></el-button>
+        </div>
+
+        <el-button
+          v-if="currentfile!=null && (currentfile.fileSuffix+'').indexOf('pdf')==-1 && isdownload != 0"
+          type="primary"
+          style="position:absolute;right: 10px;top: -44vh;z-index: 11"
+          @click="printfile(currentfile)"
+          >打印</el-button
+        >
+      </el-affix>
+      <pdfview
+        v-if="currentfile!=null"
+        :src="currentfile.url"
+        :ispic="(currentfile.fileSuffix+'').indexOf('pdf')==-1"
+        :isprint="isdownload"
+        :size="currentfile.size"
+      ></pdfview>
+
+      <div v-if="isdownload != 1" style="position:absolute;right: 0px;top: 0px;z-index: 11;width:120px;height: 50px;background: #323639"></div>
+    </div>
+    <!-- <div><el-affix :offset="120" position="bottom"><el-button type="text" icon="DArrowRight"></el-button></el-affix></div>
+  </div> -->
+    <div class="dialog-footer">
+      <el-button @click="close">关闭</el-button>
+
+      <el-button v-if="isdownload != 0" type="primary" @click="downloadfile(currentfile)"> 下载 </el-button>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import pdfview from "@/components/pdfview/index.vue"
+import {ElLoading} from "element-plus";
+import {listByIds} from "@/api/system/oss";
+import printJS from "print-js";
+import {layer} from "@layui/layer-vue";
+const ccindex = ref(0);
+const currentfile = ref<any>(null);
+const filelist = ref([]);
+const isdownload = ref(0);
+
+const route = useRoute();
+
+const close=()=>{
+  if(currentid.value){
+    layer.close(currentid.value)
+    parent.layer.close(currentid.value)
+  }
+
+}
+
+const printfile = (file:any)=>{
+  listByIds(file.ossId).then((res) => {
+    printJS({
+      printable: [
+        res.data[0].url
+      ],
+      type: "image",
+      header: "",
+      imageStyle: "width:100%;height:100%; margin-bottom:0px;",
+    });
+  });
+}
+
+const downloadfile = (file:any)=>{
+
+  const loadingInstance1 = ElLoading.service({ fullscreen: true,text:"下载中..." })
+  // currentfile.value = file;
+  listByIds(file.ossId).then((res) => {
+    fetch(res.data[0].url)
+      .then(response => response.blob())
+      .then(blob => {
+        loadingInstance1.close();
+        const link = document.createElement('a');
+        link.href = URL.createObjectURL(blob);
+        link.download = file.originalName;
+        link.target = "_blank"; // 可选，如果希望在新窗口中下载文件，请取消注释此行
+        link.click();
+      });
+    // window.open( res.data[0].url);
+  });
+}
+
+const fileindexlook = (index:number)=>{
+  var item = filelist.value[index]
+  filepreview(item);
+}
+
+const filepreview = (file:any) => {
+  ccindex.value = filelist.value.indexOf(file)
+  currentfile.value = file;
+  listByIds(file.ossId).then((res) => {
+    currentfile.value.url = res.data[0].url;
+    parent.document.getElementsByClassName("layui-layer")[currentid.value].getElementsByClassName("layui-layer-title")[0].innerHTML = currentfile.value.originalName;
+  });
+}
+const currentid = ref<string|null>("");
+
+onMounted(()=>{
+  if(route.query&&route.query.isdownload){
+
+    isdownload.value = parseInt(route.query.isdownload+"");
+    try{
+      currentid.value = localStorage.getItem(route.query.current+"");
+      localStorage.removeItem(route.query.current+"")
+    }catch (e){ /* empty */ }
+  }
+  let index =  localStorage.getItem("ccindex");
+  if(index){
+    ccindex.value = parseInt(index)
+  }
+  let currentfiles =  localStorage.getItem("currentfile");
+  if(currentfiles){
+    currentfile.value = JSON.parse(currentfiles)
+  }
+  let filelists =  localStorage.getItem("filelist");
+  if(filelists){
+    filelist.value = JSON.parse(filelists);
+  }
+
+})
+</script>
+
+<style lang="scss" scoped>
+.dialog-footer{
+  text-align: right;
+  padding: 20px;
+}
+</style>

src/views/project/list/index.vue

@@ -456,6 +456,9 @@ import moment from "moment";
 import {ElLoading} from "element-plus";
 import auth from "@/plugins/auth";
 import printJS from "print-js";
+import {layer} from "@layui/layer-vue";
+import router from "@/router";
+import {hasPermi} from "@/directive/permission";
 
 
 
@@ -798,14 +801,13 @@ const handleCloseupload = (done) => {
 };
 
 const handleClose = (done) => {
+  layer.closeAll();
+  for(var i=0; i<localStorage.length;i++){
+    if(localStorage.key(i) && localStorage.key(i)!.startsWith("c_")){
+      localStorage.removeItem(localStorage.key(i)!)
+    }
+  }
   done();
-    // ElMessageBox.confirm('确定关闭文件查看?')
-    // .then(() => {
-    //   done()
-    // })
-    // .catch(() => {
-    //   // catch error
-    // })
 };
 
 const currentfile = ref();
@@ -820,7 +822,23 @@ const filepreview = (file) => {
   currentfile.value = file;
    listByIds(file.ossId).then((res) => {
     currentfile.value.url = res.data[0].url;
-    pdfviewshow.value = true;
+    //TODO
+     let current = "c_"+ moment().valueOf()+"";
+     localStorage.setItem("currentfile", JSON.stringify(currentfile.value))
+     localStorage.setItem("ccindex", ccindex.value+"")
+     localStorage.setItem("filelist", JSON.stringify(filelist.value))
+     window["layer"] = layer;
+     let id = layer.open({
+       type: 2,
+       maxmin: true,
+       shadeClose: false,
+       moveOut:true,
+       title: file.originalName,
+       area: ["90vw", "80vh"],
+       content: `/file/preview?isdownload=${hsp(["filemanager.project.file.download"])?1:0}&current=${current}`
+     });
+     localStorage.setItem(current+"", id)
+    // pdfviewshow.value = true;
   });
 }
 

vite.config.ts

@@ -26,8 +26,8 @@ export default defineConfig(({ mode, command }: ConfigEnv): UserConfig => {
       open: true,
       proxy: {
         [env.VITE_APP_BASE_API]: {
-          target: 'http://localhost:8080',
-          // target: 'https://filesystem.njdnyjs.com/api',
+          // target: 'http://localhost:8080',
+          target: 'https://filesystem.njdnyjs.com/api',
           changeOrigin: true,
           ws: true,
           rewrite: (path) => path.replace(new RegExp('^' + env.VITE_APP_BASE_API), '')