swordpass-ui 1.0.0

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 'sword-vue-ui/src/mixins/mobileMode'
+  import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js'
+  import panzoom from 'panzoom'
+  import { createObjectURL } from 'sword-vue-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: 'ClPreview',
+    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>

package/packages/Preview/src/watermark.js

@@ -0,0 +1,124 @@
+export default function watermark(teleport, options = {}) {
+  //默认设置
+  const defaultOptions = {
+    text: () => 'watermark',
+    watermark_x: 20, //水印起始位置x轴坐标
+    watermark_y: 80, //水印起始位置Y轴坐标
+    watermark_rows: 0, //水印行数
+    watermark_cols: 0, //水印列数
+    watermark_x_space: 50, //水印x轴间隔
+    watermark_y_space: 50, //水印y轴间隔
+    watermark_color: '#ccc', //水印字体颜色
+    watermark_alpha: 0.4, //水印透明度
+    watermark_fontsize: '14px', //水印字体大小
+    watermark_font: '微软雅黑', //水印字体
+    watermark_width: 166, //水印宽度
+    watermark_height: 100, //水印长度
+    watermark_angle: 20, //水印倾斜度数
+  }
+  const settings = Object.assign(defaultOptions, options)
+  const container = document.querySelector(teleport)
+  const containerWidth = container.clientWidth
+  const offsetLeft = container.offsetLeft
+  settings.watermark_x = offsetLeft
+  if (arguments.length === 1 && typeof arguments[0] === 'object') {
+    const src = arguments[0] || {}
+    for (const key in src) {
+      if (src[key] && settings[key] && src[key] === settings[key]) continue
+      else if (src[key]) settings[key] = src[key]
+    }
+  }
+  const oTemp = document.createDocumentFragment()
+  //获取页面最大宽度
+  let page_width = containerWidth
+  //获取页面最大高度
+  let page_height = Math.max(
+    document.body.scrollHeight,
+    document.body.clientHeight
+  ) //+ 450;
+  page_height = Math.max(page_height, window.innerHeight - 30)
+  //如果将水印列数设置为0，或水印列数设置过大，超过页面最大宽度，则重新计算水印列数和水印x轴间隔
+  if (
+    settings.watermark_cols == 0 ||
+    parseInt(
+      settings.watermark_x +
+        settings.watermark_width * settings.watermark_cols +
+        settings.watermark_x_space * (settings.watermark_cols - 1)
+    ) > page_width
+  ) {
+    settings.watermark_cols = parseInt(
+      (page_width - settings.watermark_x + settings.watermark_x_space) /
+        (settings.watermark_width + settings.watermark_x_space)
+    )
+    settings.watermark_x_space = parseInt(
+      (page_width -
+        settings.watermark_x -
+        settings.watermark_width * settings.watermark_cols) /
+        (settings.watermark_cols - 1)
+    )
+  }
+  //如果将水印行数设置为0，或水印行数设置过大，超过页面最大长度，则重新计算水印行数和水印y轴间隔
+  if (
+    settings.watermark_rows == 0 ||
+    parseInt(
+      settings.watermark_y +
+        settings.watermark_height * settings.watermark_rows +
+        settings.watermark_y_space * (settings.watermark_rows - 1)
+    ) > page_height
+  ) {
+    settings.watermark_rows = parseInt(
+      (settings.watermark_y_space + page_height - settings.watermark_y) /
+        (settings.watermark_height + settings.watermark_y_space)
+    )
+    settings.watermark_y_space = parseInt(
+      (page_height -
+        settings.watermark_y -
+        settings.watermark_height * settings.watermark_rows) /
+        (settings.watermark_rows - 1)
+    )
+  }
+  let x
+  let y
+  for (var i = 0; i < settings.watermark_rows; i++) {
+    y =
+      settings.watermark_y +
+      (settings.watermark_y_space + settings.watermark_height) * i
+    for (var j = 0; j < settings.watermark_cols; j++) {
+      x =
+        settings.watermark_x +
+        (settings.watermark_width + settings.watermark_x_space) * j
+      const mask_div = document.createElement('div')
+      mask_div.id = 'mask_div' + i + j
+      mask_div.className = 'mask_div'
+      mask_div.appendChild(document.createTextNode(settings.text()))
+      //设置水印div倾斜显示
+      mask_div.style.webkitTransform =
+        'rotate(-' + settings.watermark_angle + 'deg)'
+      mask_div.style.MozTransform =
+        'rotate(-' + settings.watermark_angle + 'deg)'
+      mask_div.style.msTransform =
+        'rotate(-' + settings.watermark_angle + 'deg)'
+      mask_div.style.OTransform = 'rotate(-' + settings.watermark_angle + 'deg)'
+      mask_div.style.transform = 'rotate(-' + settings.watermark_angle + 'deg)'
+      mask_div.style.visibility = ''
+      mask_div.style.position = 'absolute'
+      mask_div.style.left = x + 'px'
+      mask_div.style.top = y + 'px'
+      mask_div.style.overflow = 'hidden'
+      mask_div.style.zIndex = '9999'
+      //让水印不遮挡页面的点击事件
+      mask_div.style.pointerEvents = 'none'
+      mask_div.style.opacity = settings.watermark_alpha
+      mask_div.style.fontSize = settings.watermark_fontsize
+      mask_div.style.fontFamily = settings.watermark_font
+      mask_div.style.fontWeight = 'bold'
+      mask_div.style.color = settings.watermark_color
+      mask_div.style.textAlign = 'center'
+      mask_div.style.width = settings.watermark_width + 'px'
+      mask_div.style.height = settings.watermark_height + 'px'
+      mask_div.style.display = 'block'
+      oTemp.appendChild(mask_div)
+    }
+  }
+  container.appendChild(oTemp)
+}

package/packages/ProcessRecord/index.js

@@ -0,0 +1,7 @@
+import ProcessRecord from './src/main.vue'
+
+ProcessRecord.install = function(Vue) {
+  Vue.component(ProcessRecord.name, ProcessRecord)
+}
+
+export default ProcessRecord