预览 放大

src/components/addFileTempList/addFileTempList.vue

@@ -103,7 +103,7 @@ const getList = async () => {
 //   console.log("listData", listData.value);
 };
 const previewFileClick = (item)=>{
-    emit("getTempPreview",item.fileId);
+    emit("getTempPreview",item);
 }
 onMounted(() => {
   getTitle();

src/components/previewTemp/previewTemp.vue

@@ -0,0 +1,93 @@
+<template>
+  <div>
+    <!-- <el-dialog
+      v-model="props.showPreview"
+      width="30%"
+      @close="close"
+      title="11"
+    > -->
+    <jjtOnlyOffice :option="obj" />
+    <!-- </el-dialog> -->
+  </div>
+</template>
+
+<script setup>
+import jjtOnlyOffice from "@/components/OnlyOffice/index.vue";
+import { ref, toRaw, onMounted, inject, onActivated, watch } from "vue";
+import { useRouter, useRoute, onBeforeRouteUpdate } from "vue-router";
+import { ElMessage } from "element-plus";
+import useUserStore from "@/store/modules/user";
+const props = defineProps({
+  option: {
+    type: Object,
+    default: () => {},
+  },
+  showPreview: {
+    type: Boolean,
+    default: false,
+  },
+});
+const obj = ref({
+  key: "",
+  url: "", //在线文档地址
+  isEdit: true, //是否允许编辑
+  fileType: "", //文件扩展名
+  title: "", //文件标题
+  user: {
+    id: null, //用户ID
+    name: "", //用户姓名
+  },
+  userdata: "",
+  editUrl: "", //回调地址
+});
+const close = () => {};
+function handleOpen(itemObj) {
+  // console.log('isEdit',isEdit);
+  obj.value.isEdit = false;
+  obj.value.isCopy = true;
+  obj.value.url = `${window.location.origin}${
+    import.meta.env.VITE_APP_BASE_API
+  }/api/view/${itemObj.fileId}`;
+  obj.value.title = itemObj.tmplName;
+  obj.value.key = itemObj.fileId;
+  switch (itemObj.tmplType) {
+    case "word":
+      obj.value.fileType = "docx";
+      break;
+    case "excel":
+      obj.value.fileType = "xlsx";
+      break;
+    case "ppt":
+      obj.value.fileType = "pptx";
+      break;
+  }
+
+  obj.value.editUrl = `${window.location.origin}${
+    import.meta.env.VITE_APP_BASE_API
+  }/only-office/tmpl/callback/${itemObj.tmplId}?name=${useUserStore().uname}`;
+  // option.value.editUrl = `http://8.142.173.95:19527/only-office/callback/${obj.docId}?name=${useUserStore().uname}`;
+  obj.value.user = {
+    id: useUserStore().uid, //用户ID
+    name: useUserStore().uname, //用户姓名
+  };
+}
+onMounted(() => {
+  let route = useRoute();
+  console.log("route", route.query);
+  if (route.query.str) {
+    const objPre = JSON.parse(route.query.str);
+    // console.log("objPre", objPre);
+    obj.value = objPre;
+  } else if (route.query.itemStr) {
+    const itemObj = JSON.parse(route.query.itemStr);
+    console.log("itemObj", itemObj);
+    handleOpen(itemObj)
+  } else {
+    obj.value = props.option;
+    // console.log("obj", obj.value);
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+</style>

src/router/index.js

@@ -73,6 +73,21 @@ export const constantRoutes = [{
 	// }]
 },
 {
+	path: "/tempPre",
+	name: "tempPre",
+	// component: common,
+	component: () => import("@/components/previewTemp/previewTemp.vue"),
+	// children: [{
+	// 	path: '/fileEdit:docId(\\d+)',
+	// 	component: () => import("@/views/myfile/components/FileEdit.vue"),
+	// 	name: 'fileEdit',
+	// 	meta: {
+	// 		title: '文件预览',
+	// 		activeMenu: '/fileEdit'
+	// 	}
+	// }]
+},
+{
 	path: '',
 	component: () => import('@/layout/indexCommon.vue'),
 	redirect: '/index',

src/views/biz/template/index.vue

@@ -140,12 +140,34 @@
         </div>
       </template>
     </el-dialog>
+    <!-- <previewTemp v-if="showPreview" :showPreview="showPreview" :option="option"></previewTemp> -->
+    <!-- <jjtOnlyOffice v-if="show" :option="option"></jjtOnlyOffice> -->
+    <!-- 查看模板的iframe -->
+      <el-dialog
+        v-model="showPreview"
+        title="模板预览"
+        :close-delay='200'
+        :before-close="closeHis"
+        :fullscreen='fullscreen'
+    >
+    <template #header="{ titleId, titleClass }">
+      <div class="my-header">
+        <span :id="titleId" :class="titleClass">模板预览</span>
+        <el-icon class="icon" @click="toFull" v-if="!fullscreen"><FullScreen /></el-icon>
+        <el-icon class="icon" @click="delFull" v-else><CopyDocument /></el-icon>
+      </div>
+    </template>
+     <iframe :src="preUrl"  id="iframeHis" frameborder="0" width="1200px"
+     height="800px" class="iframeBox" ></iframe>
+    </el-dialog>
   </div>
 </template>
 
 <script setup name="Template">
 import { listTemplate, getTemplate, delTemplate, addTemplate, updateTemplate } from '@/api/biz/template'
 import jjtOnlyOffice from '@/components/OnlyOffice/index.vue'
+import previewTemp from '@/components/previewTemp/previewTemp.vue'
+import useUserStore from "@/store/modules/user";
 const { proxy } = getCurrentInstance()
 
 const templateList = ref([])
@@ -157,6 +179,22 @@ const single = ref(true)
 const multiple = ref(true)
 const total = ref(0)
 const title = ref('')
+const showPreview = ref(false)
+const fullscreen = ref(false)
+const preUrl = ref('')
+  let option = ref({
+    key: '',
+    url: '', //在线文档地址
+    isEdit: true, //是否允许编辑
+    fileType: '', //文件扩展名
+    title: '', //文件标题
+    user: {
+      id: null, //用户ID
+      name: '' //用户姓名
+    },
+    userdata: '',
+    editUrl: '' //回调地址
+  })
 
 const data = reactive({
   form: {},
@@ -246,19 +284,7 @@ function handleUpdate(row) {
 
 function handleOpen(row) {
   // console.log('isEdit',isEdit);
-  let option = ref({
-    key: '',
-    url: '', //在线文档地址
-    isEdit: props.onlyView, //是否允许编辑
-    fileType: '', //文件扩展名
-    title: '', //文件标题
-    user: {
-      id: null, //用户ID
-      name: '' //用户姓名
-    },
-    userdata: '',
-    editUrl: '' //回调地址
-  })
+
 	
   option.value.isEdit = true
   option.value.isCopy = true
@@ -285,7 +311,42 @@ function handleOpen(row) {
     id: useUserStore().uid, //用户ID
     name: useUserStore().uname //用户姓名
   }
+  const str = JSON.stringify(option.value)
+  preUrl.value = `${window.location.origin}/tempPre?str=${str}`
+  showPreview.value = true
+  setTimeout(() => {
+      iframeSize()
+  }, 1000);
+  // console.log('option111',option.value);
 }
+// 控制iframe大小
+  const iframeSize = () => {
+  // console.log('执行ifSize',par);
+  const outIframe = document.getElementById("iframeHis");
+  const inIframe =
+      outIframe.contentDocument.getElementsByTagName("iframe")[0];
+  if(inIframe==null){
+      // console.log('没有inF');
+      setTimeout(() => {
+      // console.log('==============');
+      iframeSize()
+      }, 200);
+      return
+  }
+  // console.log('outIframe', outIframe);
+  // console.error(outIframe.parentElement);
+  // inIframe.style.height = outIframe.style.height =
+  //     800 + "px";
+  // inIframe.style.width = outIframe.style.width =
+  //     1200 + "px";
+    inIframe.style.height = outIframe.style.height =
+    outIframe.parentElement.offsetHeight - 40 + "px";
+  inIframe.style.width = outIframe.style.width =
+    outIframe.parentElement.offsetWidth  - 80+ "px";
+  }
+  const closeHis = ()=>{
+    showPreview.value = false
+  }
 
 /** 提交按钮 */
 function submitForm() {
@@ -333,6 +394,27 @@ function handleExport() {
     `template_${new Date().getTime()}.xlsx`
   )
 }
-
+const toFull = ()=>{
+  fullscreen.value = true
+  setTimeout(() => {
+    iframeSize()
+  }, 200);
+}
+const delFull = ()=>{
+  fullscreen.value = false
+ setTimeout(() => {
+    iframeSize()
+  }, 200);
+}
 getList()
 </script>
+<style lang="scss" scoped>
+.my-header{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.icon{
+  margin-right: 16px;
+}
+</style>

src/views/myfile/MyFile.vue

@@ -549,10 +549,17 @@
       <el-dialog
         v-model="showTemp"
         title="模板预览"
-        width="1250px"
         :close-delay='200'
-        :before-close="closeHis"
+        :before-close="closeTemp"
+        :fullscreen='fullscreen'
     >
+    <template #header="{ titleId, titleClass }">
+      <div class="my-header">
+        <span :id="titleId" :class="titleClass">模板预览</span>
+        <el-icon class="icon" @click="toFull" v-if="!fullscreen"><FullScreen /></el-icon>
+        <el-icon class="icon" @click="delFull" v-else><CopyDocument /></el-icon>
+      </div>
+    </template>
      <iframe :key="nowTime" :src="tempIfarmeData.src" :name="nowTime" id="iframeHis" frameborder="0" width="1200px"
      height="800px" class="iframeBox" ></iframe>
     </el-dialog>
@@ -842,6 +849,7 @@ export default {
         const addTempId = ref()
         const tempIfarmeData = ref({})
         const showTemp = ref(false)
+        const fullscreen = ref(false)
         const hisIfarmeData = ref({
             // src: `${window.location.origin}/fileEdit?clickRowId=7567&canEdit=0&canCopy=0&history=0&fileId=0`,
         })
@@ -858,7 +866,7 @@ export default {
             // console.log(21);
             setTimeout(() => {
                 iframeSize()
-            }, 1000);
+            }, 200);
             // console.log('data',data);
         }
         // 控制iframe大小
@@ -878,9 +886,9 @@ export default {
         // console.log('outIframe', outIframe);
         // console.error(outIframe.parentElement);
         inIframe.style.height = outIframe.style.height =
-            800 + "px";
-        inIframe.style.width = outIframe.style.width =
-            1200 + "px";
+        outIframe.parentElement.offsetHeight - 40 + "px";
+         inIframe.style.width = outIframe.style.width =
+        outIframe.parentElement.offsetWidth  - 80+ "px";
         }
         const closeHis = ()=>{
             // hisIfarmeData.value = {}
@@ -2608,15 +2616,33 @@ export default {
             newAdd.value = true
         }
         // 获取预览的模板地址
-        const getTempPreview = (fileId)=>{
+        const getTempPreview = (item)=>{
+            const itemStr = JSON.stringify(item)
             tempIfarmeData.value = {
-                src:`${window.location.origin}${import.meta.env.VITE_APP_BASE_API}/api/view/${fileId}`
-                // src:`${window.location.origin}${import.meta.env.VITE_APP_BASE_API}/only-office/tmpl/callback/${
-                //         fileId
-                //     }?name=${useUserStore().uname}`
+                src:`${window.location.origin}/tempPre?itemStr=${itemStr}`
             }
             showTemp.value = true
-            console.log('getTempPreview',tempIfarmeData.value);
+            setTimeout(() => {
+                iframeSize()
+            }, 200);
+            // console.log('getTempPreview',tempIfarmeData.value);
+        }
+        const closeTemp = ()=>{
+            showTemp.value = false
+            tempIfarmeData.value = {}
+            
+        }
+        const toFull = ()=>{
+            fullscreen.value = true
+            setTimeout(() => {
+                iframeSize()
+            }, 200);
+        }
+        const delFull = ()=>{
+            fullscreen.value = false
+            setTimeout(() => {
+                iframeSize()
+            }, 200);
         }
         watch(() => folder.value, async(newValue, oldValue) => {
             // console.log('iFrameData 发生改变了', newValue, oldValue);
@@ -3024,7 +3050,11 @@ export default {
             getTempPreview,
             showTemp,
             addTempId,
-            getAddTempId
+            getAddTempId,
+            closeTemp,
+            fullscreen,
+            toFull,
+            delFull
         }
     },
     watch: {
@@ -3081,6 +3111,14 @@ p {
     justify-content: flex-start;
     overflow: hidden;
 }
+.my-header{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.icon{
+  margin-right: 16px;
+}
 // .iframeBox{
 //     position: fixed;
 //     top: 10%;