three-trees-ui 1.0.0

package/packages/Preview/src/Loading.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="loading__container">
+    <div class="loading__container-div">
+      <!-- 6 -->
+      <div v-if="type == '6'" class="loader">
+        <svg
+          id="Layer_1"
+          version="1.1"
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+          x="0px"
+          y="0px"
+          width="24px"
+          height="30px"
+          viewBox="0 0 24 30"
+          style="enable-background:new 0 0 50 50;"
+          xml:space="preserve"
+        >
+          <rect x="0" y="13" width="4" height="5" :fill="color">
+            <animate
+              attributeName="height"
+              attributeType="XML"
+              values="5;21;5"
+              begin="0s"
+              dur="0.6s"
+              repeatCount="indefinite"
+            />
+            <animate
+              attributeName="y"
+              attributeType="XML"
+              values="13; 5; 13"
+              begin="0s"
+              dur="0.6s"
+              repeatCount="indefinite"
+            />
+          </rect>
+          <rect x="10" y="13" width="4" height="5" :fill="color">
+            <animate
+              attributeName="height"
+              attributeType="XML"
+              values="5;21;5"
+              begin="0.15s"
+              dur="0.6s"
+              repeatCount="indefinite"
+            />
+            <animate
+              attributeName="y"
+              attributeType="XML"
+              values="13; 5; 13"
+              begin="0.15s"
+              dur="0.6s"
+              repeatCount="indefinite"
+            />
+          </rect>
+          <rect x="20" y="13" width="4" height="5" :fill="color">
+            <animate
+              attributeName="height"
+              attributeType="XML"
+              values="5;21;5"
+              begin="0.3s"
+              dur="0.6s"
+              repeatCount="indefinite"
+            />
+            <animate
+              attributeName="y"
+              attributeType="XML"
+              values="13; 5; 13"
+              begin="0.3s"
+              dur="0.6s"
+              repeatCount="indefinite"
+            />
+          </rect>
+        </svg>
+      </div>
+      <span :style="fontColor">{{ tip }}</span>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'Loading',
+    props: {
+      type: {
+        type: String,
+        default: '6',
+      },
+      color: {
+        type: String,
+        default: '#ff6700',
+      },
+      tip: {
+        type: String,
+        default: '正在加载...',
+      },
+    },
+    computed: {
+      fontColor: function() {
+        return { color: this.color }
+      },
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  .loading__container {
+    height: 100%;
+    width: 100%;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    justify-content: center;
+
+    .loading__container-div {
+      display: inline-block;
+    }
+
+    .loader {
+      text-align: center;
+      margin-right: 1rem;
+      display: inline-block;
+      vertical-align: middle;
+    }
+  }
+</style>

package/packages/Preview/src/PdfViewer.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="pdf-container">
+    <div ref="pdfContainerBody" class="pdf-container__body">
+      <loading v-if="loading" />
+      <template v-for="item in pageNumber" v-else>
+        <vue-pdf
+          ref="pdf"
+          :key="item"
+          :src="vuePdfSrc"
+          :page="item"
+          @load="onLoad"
+        ></vue-pdf>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+  import Loading from './Loading.vue'
+  import watermark from './watermark'
+  import VuePdf from 'vue-pdf'
+  import mobileMode from 'three-trees-ui/src/mixins/mobileMode'
+  import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js'
+  import panzoom from 'panzoom'
+  import { createObjectURL } from 'three-trees-ui/src/util/brower.js'
+
+  export default {
+    name: 'PdfViewer',
+    components: {
+      Loading,
+      VuePdf,
+    },
+    mixins: [mobileMode],
+    props: {
+      src: {
+        type: String,
+        default: null,
+      },
+      headers: {
+        type: Object,
+        default: () => {
+          return {}
+        },
+      },
+      watermark: {
+        type: Boolean,
+        default: false,
+      },
+      watermarkOptions: {
+        type: Object,
+        default: () => {
+          return {}
+        },
+      },
+    },
+    data() {
+      return {
+        pdfSrc: '',
+        vuePdfSrc: null,
+        loading: false,
+        pageNumber: 1,
+      }
+    },
+    mounted() {
+      this.post()
+    },
+    methods: {
+      onLoad() {
+        panzoom(this.$refs.pdfContainerBody)
+      },
+      handlePaf() {
+        const this_ = this
+        const loadingPdf = VuePdf.createLoadingTask({
+          url: this_.pdfSrc,
+          CMapReaderFactory,
+        })
+        loadingPdf.promise
+          .then((pdf) => {
+            this_.vuePdfSrc = loadingPdf
+            this_.pageNumber = pdf.numPages
+          })
+          .finally(() => {
+            this.loading = false
+            this.$nextTick(() => this.watermarkRender())
+          })
+      },
+      post() {
+        this.$requestConfig
+          .request({
+            url: this.src,
+            headers: this.headers,
+            responseType: 'arraybuffer',
+          })
+          .then((response) => {
+            const { data, headers } = response
+            const type = headers['content-type']
+            if (type) {
+              this.pdfSrc = createObjectURL(new Blob([data], { type }))
+            } else {
+              this.pdfSrc = createObjectURL(new Blob([data]))
+            }
+            this.pdfSrc += '#toolbar=0'
+            this.handlePaf()
+          })
+          .catch((err) => {
+            this.$emit('preview-error', err)
+          })
+      },
+      watermarkRender() {
+        if (this.watermark) {
+          watermark('.pdf-container', this.watermarkOptions)
+        }
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .pdf-container {
+    height: 100%;
+    .pdf-container__body {
+      height: 100%;
+    }
+  }
+</style>

package/packages/Preview/src/TextViewer.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="text-container">
+    <loading v-if="loading" />
+    <pre v-else class="text-viewer__pre">{{ text }}</pre>
+  </div>
+</template>
+
+<script>
+  import Loading from './Loading.vue'
+  import watermark from './watermark'
+
+  export default {
+    name: 'TextViewer',
+    components: { Loading },
+    props: {
+      src: {
+        type: String,
+      },
+      headers: {
+        type: Object,
+        default: () => {
+          return {}
+        },
+      },
+      watermark: {
+        type: Boolean,
+        default: false,
+      },
+      watermarkOptions: {
+        type: Object,
+        default: () => {
+          return {}
+        },
+      },
+    },
+    data() {
+      return {
+        text: '',
+        loading: false,
+      }
+    },
+    watch: {
+      src: {
+        handler: function(newVal) {
+          if (newVal) {
+            const that = this
+            this.loading = true
+            this.$requestConfig
+              .request({
+                url: this.src,
+                headers: this.headers,
+                responseType: 'arraybuffer',
+              })
+              .then((response) => {
+                var reader = new FileReader()
+                reader.onload = function() {
+                  var content = reader.result
+                  that.$nextTick(() => {
+                    that.text = content
+                  })
+                }
+                const { data, headers } = response
+                const type = headers['content-type']
+                let textBlob = null
+                if (type) {
+                  textBlob = new Blob([data], { type })
+                } else {
+                  textBlob = new Blob([data])
+                }
+                reader.readAsText(textBlob)
+              })
+              .catch((err) => {
+                this.$emit('preview-error', err)
+              })
+              .finally(() => (this.loading = false))
+          }
+        },
+        immediate: true,
+      },
+    },
+    mounted() {
+      this.watermark && this.watermarkRender()
+    },
+    methods: {
+      watermarkRender() {
+        watermark('.text-container', this.watermarkOptions)
+      },
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  .text-container {
+    .text-viewer__pre {
+      word-wrap: break-word;
+      white-space: pre-wrap;
+      margin: 18px;
+    }
+  }
+</style>

package/packages/Preview/src/main.vue

@@ -0,0 +1,242 @@
+<template>
+  <el-dialog
+    :visible.sync="dialogVisible"
+    width="100%"
+    custom-class="preview__dialog"
+    :title="titleVal"
+    append-to-body
+    destroy-on-close
+    :show-close="closeable"
+    @close="handleClose"
+  >
+    <loading v-if="loading" />
+    <fill-page v-if="errorMessage" type="2" :tip="errorMessage" />
+    <!-- 预览pdf.word等文件格式 -->
+    <pdf-viewer
+      v-else-if="mode == 'pdf'"
+      :src="src"
+      :headers="headerVal"
+      :watermark="watermark"
+      :watermark-options="watermarkOptions"
+      @preview-error="handlePreviewErr"
+    />
+    <frame-viewer
+      v-else-if="mode == 'html' || mode == 'picture'"
+      :src="src"
+      :mode="mode"
+      :headers="headerVal"
+      :watermark="watermark"
+      :watermark-options="watermarkOptions"
+      @preview-error="handlePreviewErr"
+    />
+    <text-viewer
+      v-else-if="mode == 'txt'"
+      :src="src"
+      :headers="headerVal"
+      :watermark="watermark"
+      :watermark-options="watermarkOptions"
+      @preview-error="handlePreviewErr"
+    />
+  </el-dialog>
+</template>
+
+<script>
+  import Vue from 'vue'
+  import Loading from './Loading.vue'
+  import PdfViewer from './PdfViewer.vue'
+  import FrameViewer from './FrameViewer.vue'
+  import TextViewer from './TextViewer.vue'
+  import FillPage from './FillPage.vue'
+
+  const reg = new RegExp(/^(http.*?\/\/.*?)\/.*$/)
+  export default {
+    name: 'HtPreview',
+    components: {
+      PdfViewer,
+      FrameViewer,
+      TextViewer,
+      FillPage,
+      Loading,
+    },
+    props: {
+      title: {
+        type: String,
+        default: '附件预览',
+      },
+      closeable: {
+        type: Boolean,
+        default: true,
+      },
+      headers: {
+        type: Object,
+        default: null,
+      },
+      previewMethod: {
+        type: Function,
+        default: (url, headers, portalBaseUrl = '') => {
+          return new Promise((resolve, reject) => {
+            Vue.prototype.$requestConfig
+              .request({
+                url: url,
+                headers: headers,
+              })
+              .then((data) => {
+                const result = { src: null, mode: null, errorMessage: null }
+                const loadError = '加载要预览的附件时出错'
+                if (!data) {
+                  result.errorMessage = '要预览的附件不存在'
+                } else if (data.result == 'fileNotSupported') {
+                  result.errorMessage = '当前附件格式不支持预览'
+                } else if (
+                  typeof data == 'object' &&
+                  data.hasOwnProperty('state') &&
+                  (!data.state || !data.result)
+                ) {
+                  result.errorMessage = data.message || loadError
+                } else if (
+                  typeof data == 'object' &&
+                  data.hasOwnProperty('result') &&
+                  data.result === 'error'
+                ) {
+                  result.errorMessage = loadError
+                } else {
+                  const baseUrl = portalBaseUrl
+                    ? portalBaseUrl
+                    : reg.test(url)
+                    ? reg.exec(url)[1]
+                    : ''
+                  switch (data.result) {
+                    case 'html':
+                      result.src = `${baseUrl}${data.pdfUrl}`
+                      break
+                    case 'txt':
+                      result.src = `${baseUrl}${data.TxtUrl}`
+                      break
+                    case 'picture':
+                      result.src = `${baseUrl}${data.currentUrl}`
+                      break
+                    case 'compress':
+                      result.errorMessage = '不支持压缩文件的在线预览'
+                      break
+                    case 'media':
+                      result.errorMessage = '不支持视频的在线播放'
+                      break
+                    case 'pdf':
+                      result.src = `${baseUrl}${data.pdfUrl}`
+                      break
+                    default:
+                      result.errorMessage = '不支持预览'
+                      break
+                  }
+                  result.mode = data.result
+                }
+                resolve(result)
+              })
+              .catch((err) => {
+                reject(err)
+              })
+          })
+        },
+      },
+      watermark: {
+        type: Boolean,
+        default: false,
+      },
+      watermarkOptions: {
+        type: Object,
+        default: () => {
+          return { text: () => 'watermark' }
+        },
+      },
+      portalBaseUrl: {
+        type: String,
+        default: '',
+      },
+    },
+    data() {
+      return {
+        dialogVisible: false,
+        mode: null,
+        src: null,
+        loading: false,
+        tempTitle: null,
+        errorMessage: null,
+      }
+    },
+    computed: {
+      headerVal: function() {
+        return this.headers
+          ? this.headers
+          : this.$requestConfig.header
+          ? this.$requestConfig.header()
+          : null
+      },
+      titleVal: function() {
+        return this.tempTitle ? this.tempTitle : this.title
+      },
+    },
+    methods: {
+      handleClose() {
+        this.src = null
+        this.mode = null
+        this.errorMessage = null
+      },
+      handlePreviewErr(err) {
+        this.errorMessage = `预览失败：${err}`
+      },
+      preview(url, title) {
+        this.src = null
+        this.mode = null
+        this.errorMessage = null
+        this.tempTitle = title
+        this.loading = true
+        this.dialogVisible = true
+        this.previewMethod(url, this.headerVal, this.portalBaseUrl)
+          .then((resp) => {
+            this.mode = resp.mode
+            this.errorMessage = resp.errorMessage
+            this.src = resp.src
+          })
+          .catch((err) => {
+            this.errorMessage = `预览失败：${err}`
+          })
+          .finally(() => {
+            this.loading = false
+          })
+      },
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  .el-dialog__wrapper {
+    overflow: hidden;
+
+    ::v-deep .preview__dialog {
+      height: calc(100% - 20px);
+      background: transparent;
+      margin: 0 !important;
+
+      .el-dialog__header {
+        background: #000;
+        min-height: 20px;
+        padding: 10px;
+      }
+      .el-dialog__title {
+        color: #fff;
+      }
+      .el-dialog__headerbtn {
+        top: 10px;
+      }
+      .el-dialog__close {
+        color: #fff;
+      }
+      .el-dialog__body {
+        padding: 10px 0 20px 0;
+        background: #fff;
+        height: calc(100% - 50px);
+        margin: 0 auto;
+        overflow: auto;
+      }
+    }
+  }
+</style>