askbot-dragon 1.6.54-beta → 1.6.56-beta

package/src/components/previewDoc.vue

@@ -1,243 +1,248 @@
-<template>
-  <div class="previewDoc">
-    <div class="footer">
-      <span>查看详情</span>
-      <section @click="close">
-        <i class="iconfont guoran-shanchu"></i>
-      </section>
-    </div>
-    <!-- <div v-if="fileType == 'VIDEO'" style="width: 100%;height: calc(100% - 70px)">
-      <video :src="url" controls width="100%;" height="98%"></video>
-    </div>
-    <template v-else-if="url.includes('https://www') || url.includes('http://www')">
-      <iframe class="preview_iframe"
-              :src="url"
-              width="100%"
-              height="100%"
-              scrolling="100%"
-              frameborder="no"
-              border="0"></iframe>
-    </template>
-    <template v-else>
-      <iframe class="preview_iframe" :src="previewUrl" style="border:none;"></iframe>
-    </template> -->
-    <div v-show="fileType == 'VIDEO'" style="width: 100%;height: calc(100% - 70px)">
-      <video :src="url" controls width="100%;" height="98%"></video>
-    </div>
-    <div style="width: 100%;height: calc(100% - 70px)" v-show="fileType !== 'VIDEO' && fileType !== 'OTHER' && (url.includes('https://www') || url.includes('http://www'))">
-      <iframe class="preview_iframe"
-              :src="fileType !== 'VIDEO' && fileType !== 'OTHER' && (url.includes('https://www') || url.includes('http://www')) ? url : ''"
-              width="100%"
-              height="100%"
-              scrolling="100%"
-              frameborder="no"
-              border="0"></iframe>
-    </div>
-    <div style="width: 100%;height: calc(100% - 70px)" v-show="fileType == 'OTHER' && !url.includes('https://www') && !url.includes('http://www')">
-      <iframe class="preview_iframe" :src="previewUrl" style="border:none;"></iframe>
-    </div>
-    <div class="onload_btn" @click="downLoad">
-      下载
-    </div>
-    <div id="text">
-      {{ copy }}
-    </div>
-  </div>
-</template>
-
-<script>
-import { Toast } from 'vant';
-import { isMobile } from "../assets/js/common";
-
-export default {
-  data () {
-    return {
-      previewShowPopup: false,
-      title:'工单附件',
-      copy:''
-    }
-  },
-  props: {
-    url: {
-      type: String,
-      required: true,
-    },
-    officePreviewType: {
-      type: String,
-      default: ''
-    }
-  },
-  computed: {
-    previewUrl () {
-      let url = process.env.VUE_APP_ENV === 'production' ? 'https://kkfileview.askbot.cn/onlinePreview?url=' : 'https://test.open.askbot.cn/kkfileview/onlinePreview?url='
-      if (this.url != '') {
-        // if (/[\u4E00-\u9FA5]+/g.test(this.url)) {
-        //   url += btoa(encodeURIComponent(this.url))
-        // } else {
-        //   url += btoa(this.url)
-        // }
-        // url += '&encodeURIComponent=true'
-        if(decodeURIComponent(this.url) == this.url) {
-          url += btoa(encodeURIComponent(this.url))
-          url += '&encodeURIComponent=true'
-        } else {
-          url += btoa(encodeURIComponent(decodeURIComponent(this.url)))
-          url += '&encodeURIComponent=true'
-        }
-      }
-      return url
-    },
-    fileType () {
-      const fileType = this.url.substring(this.url.lastIndexOf('.'));
-      if (fileType === '.mp4' || fileType === '.MP4' || fileType === '.MOV' || fileType === '.mov') {
-        return 'VIDEO'
-      } else if(fileType === '.html' || fileType === '.HTML') {
-        return 'HTML'
-      } else {
-        return 'OTHER'
-      }
-
-    }
-  },
-  methods: {
-    close () {
-      this.$emit('close')
-    },
-    loadIframe (item) {
-      let iframe = document.getElementsByClassName('preview_iframe')[0]
-      iframe.onload(() => {
-        iframe.contentWindow.postMessage({
-          type: "positionText",
-          data: item.text,
-          page: item.page
-        }, '*')
-      })
-      // if(preview) {
-      //   preview.postMessage({
-      //     type: "positionText",
-      //     data: ``
-      //   }, '*')
-      // }
-    },
-    downLoad () {
-      let url = this.url
-      if (decodeURIComponent(url) != url) {
-        url = decodeURIComponent(url)
-      }
-      const fileType = url.substring(url.lastIndexOf('.'));
-      this.$http.post('/knowledge-api/temporary-certificate/or-origin?expired=10', url, {
-        headers:{
-          "Content-Type": "application/json",
-        }
-      }).then(res => {
-        if (res.data) {
-          if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
-            this.copy = res.data
-            if(isMobile()) {
-              setTimeout(() =>{
-                const range = document.createRange();
-                range.selectNode(document.getElementById('text'));
-                const selection = window.getSelection();
-                //移除之前选中内容
-                if (selection.rangeCount > 0) selection.removeAllRanges();
-                selection.addRange(range);
-                document.execCommand('copy');
-                selection.removeAllRanges()
-                Toast('下载地址已复制，请前往Safari浏览器访问下载');
-                this.close()
-              },100)
-            } else {
-              navigator.clipboard.writeText(res.data)
-              this.$message.success({
-                message:'下载地址已复制，请前往Safari浏览器访问下载',
-              })
-            }
-            return
-          } else {
-            // setTimeout(() =>{
-            //   window.open(res.data,'下载', 'noopener')
-            // }, 2000)
-            // window.open(res.data,'下载', 'noopener')
-            if(isMobile()) { 
-              const iframe = document.createElement("iframe");
-              iframe.setAttribute("hidden", "hidden");
-              iframe.onload = () => {
-                  if (iframe) {
-                    console.log("iframe onload....")
-                    iframe.setAttribute('src', 'about:blank');
-                  }
-              };
-              document.body.insertBefore(iframe, null);
-              iframe.setAttribute("src", res.data);
-            } else {
-              let a = document.createElement('a')
-              a.href = res.data
-              a.download = (this.title) + fileType
-              a.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }))
-            }
-            this.close()
-          }
-        }
-      })
-    }
-  },
-  mounted() {
-    setTimeout(() =>{
-      let previewIframe = document.getElementsByClassName('preview_iframe')
-      Array.from(previewIframe).forEach(item =>{
-        item.onload = () =>{
-          item.style.backgroundImage = `url('')`
-        }
-      })
-    })
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.previewDoc{
-  height: 100%;
-  position: relative;
-}
-.preview_iframe {
-    width: 100%;
-    height: calc(100% - 65px);
-    overflow-y: scroll;
-    background-image: url('https://guoranopen-zjk.oss-cn-zhangjiakou.aliyuncs.com/cdn-common/images/loading.gif');
-    background-position: center;
-    background-size: 50px;
-    background-repeat: no-repeat;
-}
-.footer {
-    width: calc(100% - 40px);
-    height: 50px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    cursor: pointer;
-    padding: 0 20px;
-    border-bottom: 1px solid #cccccc;
-}
-/deep/.el-drawer__body{
-  height: 100%;
-}
-.onload_btn {
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  bottom: 40px;
-  width: 200px;
-  background-color: #366AFF;
-  color: white;
-  height: 48px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 28px;
-  cursor: pointer;
-  z-index: 9999;
-  i{
-      margin-right: 8px;
-  }
-}
+<!-- preview-document 
+  组件主要负责 富文本中配置的链接，图片 及上传附件下的附件列表中的单纯预览
+  走的是kkview项目预览或者iframe直接打开文件地址，不对预览文件解析不包含其他功能开发
+-->
+<template>
+
+  <div class="previewDoc">
+    <div class="footer">
+      <span>查看详情</span>
+      <section @click="close">
+        <i class="iconfont guoran-shanchu"></i>
+      </section>
+    </div>
+    <!-- <div v-if="fileType == 'VIDEO'" style="width: 100%;height: calc(100% - 70px)">
+      <video :src="url" controls width="100%;" height="98%"></video>
+    </div>
+    <template v-else-if="url.includes('https://www') || url.includes('http://www')">
+      <iframe class="preview_iframe"
+              :src="url"
+              width="100%"
+              height="100%"
+              scrolling="100%"
+              frameborder="no"
+              border="0"></iframe>
+    </template>
+    <template v-else>
+      <iframe class="preview_iframe" :src="previewUrl" style="border:none;"></iframe>
+    </template> -->
+    <div v-show="fileType == 'VIDEO'" style="width: 100%;height: calc(100% - 70px)">
+      <video :src="url" controls width="100%;" height="98%"></video>
+    </div>
+    <div style="width: 100%;height: calc(100% - 70px)" v-show="fileType !== 'VIDEO' && fileType !== 'OTHER' && (url.includes('https://www') || url.includes('http://www'))">
+      <iframe class="preview_iframe"
+              :src="fileType !== 'VIDEO' && fileType !== 'OTHER' && (url.includes('https://www') || url.includes('http://www')) ? url : ''"
+              width="100%"
+              height="100%"
+              scrolling="100%"
+              frameborder="no"
+              border="0"></iframe>
+    </div>
+    <div style="width: 100%;height: calc(100% - 70px)" v-show="fileType == 'OTHER' && !url.includes('https://www') && !url.includes('http://www')">
+      <iframe class="preview_iframe" :src="previewUrl" style="border:none;"></iframe>
+    </div>
+    <div class="onload_btn" @click="downLoad">
+      下载
+    </div>
+    <div id="text">
+      {{ copy }}
+    </div>
+  </div>
+</template>
+
+<script>
+import { Toast } from 'vant';
+import { isMobile } from "../assets/js/common";
+
+export default {
+  data () {
+    return {
+      previewShowPopup: false,
+      title:'工单附件',
+      copy:''
+    }
+  },
+  props: {
+    url: {
+      type: String,
+      required: true,
+    },
+    officePreviewType: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    previewUrl () {
+      let url = process.env.VUE_APP_ENV === 'production' ? 'https://kkfileview.askbot.cn/onlinePreview?url=' : 'https://test.open.askbot.cn/kkfileview/onlinePreview?url='
+      if (this.url != '') {
+        // if (/[\u4E00-\u9FA5]+/g.test(this.url)) {
+        //   url += btoa(encodeURIComponent(this.url))
+        // } else {
+        //   url += btoa(this.url)
+        // }
+        // url += '&encodeURIComponent=true'
+        if(decodeURIComponent(this.url) == this.url) {
+          url += btoa(encodeURIComponent(this.url))
+          url += '&encodeURIComponent=true'
+        } else {
+          url += btoa(encodeURIComponent(decodeURIComponent(this.url)))
+          url += '&encodeURIComponent=true'
+        }
+      }
+      return url
+    },
+    fileType () {
+      const fileType = this.url.substring(this.url.lastIndexOf('.'));
+      if (fileType === '.mp4' || fileType === '.MP4' || fileType === '.MOV' || fileType === '.mov') {
+        return 'VIDEO'
+      } else if(fileType === '.html' || fileType === '.HTML') {
+        return 'HTML'
+      } else {
+        return 'OTHER'
+      }
+
+    }
+  },
+  methods: {
+    close () {
+      this.$emit('close')
+    },
+    loadIframe (item) {
+      let iframe = document.getElementsByClassName('preview_iframe')[0]
+      iframe.onload(() => {
+        iframe.contentWindow.postMessage({
+          type: "positionText",
+          data: item.text,
+          page: item.page
+        }, '*')
+      })
+      // if(preview) {
+      //   preview.postMessage({
+      //     type: "positionText",
+      //     data: ``
+      //   }, '*')
+      // }
+    },
+    downLoad () {
+      let url = this.url
+      if (decodeURIComponent(url) != url) {
+        url = decodeURIComponent(url)
+      }
+      const fileType = url.substring(url.lastIndexOf('.'));
+      this.$http.post('/knowledge-api/temporary-certificate/or-origin?expired=10', url, {
+        headers:{
+          "Content-Type": "application/json",
+        }
+      }).then(res => {
+        if (res.data) {
+          if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
+            this.copy = res.data
+            if(isMobile()) {
+              setTimeout(() =>{
+                const range = document.createRange();
+                range.selectNode(document.getElementById('text'));
+                const selection = window.getSelection();
+                //移除之前选中内容
+                if (selection.rangeCount > 0) selection.removeAllRanges();
+                selection.addRange(range);
+                document.execCommand('copy');
+                selection.removeAllRanges()
+                Toast('下载地址已复制，请前往Safari浏览器访问下载');
+                this.close()
+              },100)
+            } else {
+              navigator.clipboard.writeText(res.data)
+              this.$message.success({
+                message:'下载地址已复制，请前往Safari浏览器访问下载',
+              })
+            }
+            return
+          } else {
+            // setTimeout(() =>{
+            //   window.open(res.data,'下载', 'noopener')
+            // }, 2000)
+            // window.open(res.data,'下载', 'noopener')
+            if(isMobile()) { 
+              const iframe = document.createElement("iframe");
+              iframe.setAttribute("hidden", "hidden");
+              iframe.onload = () => {
+                  if (iframe) {
+                    console.log("iframe onload....")
+                    iframe.setAttribute('src', 'about:blank');
+                  }
+              };
+              document.body.insertBefore(iframe, null);
+              iframe.setAttribute("src", res.data);
+            } else {
+              let a = document.createElement('a')
+              a.href = res.data
+              a.download = (this.title) + fileType
+              a.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }))
+            }
+            this.close()
+          }
+        }
+      })
+    }
+  },
+  mounted() {
+    setTimeout(() =>{
+      let previewIframe = document.getElementsByClassName('preview_iframe')
+      Array.from(previewIframe).forEach(item =>{
+        item.onload = () =>{
+          item.style.backgroundImage = `url('')`
+        }
+      })
+    })
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.previewDoc{
+  height: 100%;
+  position: relative;
+}
+.preview_iframe {
+    width: 100%;
+    height: calc(100% - 65px);
+    overflow-y: scroll;
+    background-image: url('https://guoranopen-zjk.oss-cn-zhangjiakou.aliyuncs.com/cdn-common/images/loading.gif');
+    background-position: center;
+    background-size: 50px;
+    background-repeat: no-repeat;
+}
+.footer {
+    width: calc(100% - 40px);
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+    padding: 0 20px;
+    border-bottom: 1px solid #cccccc;
+}
+/deep/.el-drawer__body{
+  height: 100%;
+}
+.onload_btn {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 40px;
+  width: 200px;
+  background-color: #366AFF;
+  color: white;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 28px;
+  cursor: pointer;
+  z-index: 9999;
+  i{
+      margin-right: 8px;
+  }
+}
 </style>