Browse Source

Merge branch 'develop_szhj08' of http://git.chelingzhu.com/jianguan-web/qpls-md-app into develop_szhj08

chenrui 2 năm trước cách đây
mục cha
commit
f484a418b3
2 tập tin đã thay đổi với 231 bổ sung5 xóa
  1. 22 5
      api/sales.js
  2. 209 0
      pages/common/pdfView.vue

+ 22 - 5
api/sales.js

@@ -184,14 +184,31 @@ export const salesStatistics = (params) => {
     method: 'post'
   })
 }
+
+// 销售 详情  打印
+export const salesDetailPrint = params => {
+  const data = {
+    url: `sales/print/${params.sn}/NEEDLE/${params.printOrgCode}/${params.printAllName}`,
+    method: 'get'
+  }
+  return axios.request(data)
+}
+// 销售 详情  导出
+export const salesDetailExport = params => {
+  return axios.request({
+    url: `sales/excel/${params.sn}`,
+    method: 'get',
+    responseType: 'blob'
+    })
+}
 //销售详情 -- 收款记录
 export const queryFlowByBizSn = (params) => {
 	const url = `settle/flow/queryFlowByBizSn/${params.pageNo}/${params.pageSize}`
 	delete params.pageNo
 	delete params.pageSize
-  return axios.request({
-    url: url,
-    data: params,
-    method: 'post'
-  })
+	  return axios.request({
+		url: url,
+		data: params,
+		method: 'post'
+	  })
 }

+ 209 - 0
pages/common/pdfView.vue

@@ -0,0 +1,209 @@
+<template>
+  <div class="common-pdfView-modal">
+	  <div>
+	    <div id="canvas"></div>
+	    <div class="tools">
+	      <div>
+	        调整比例:{{ Math.round(scalVal*100) }}%
+	        <div>
+	          <u-button :disabled="scalLoading" style="margin-right: 10px;" size="mini" @click="setScalVal(0)"><a-icon type="minus" /> 缩小</u-button>
+	          <u-button :disabled="scalLoading" size="mini" @click="setScalVal(1)"><a-icon type="plus" /> 放大</u-button>
+	        </div>
+	      </div>
+	      <div>
+	        <div v-if="hasClipboard">
+	          <u-button :disabled="scalLoading" size="mini" @click="handleCapture('export')"><a-icon type="export" /> 导出图片</u-button>
+	        </div>
+	      </div>
+	      <div>
+	      </div>
+	    </div>
+	    <div :style="{width: '100%',height: '70vh',margin:'0 auto',padding: '10px 0',overflow:'auto'}">
+	      <div v-if="loadedRatio > 0 && loadedRatio < 1" style="background-color: green; color: white; text-align: center" :style="{ width: loadedRatio * 100 + '%' }">{{ Math.floor(loadedRatio * 100) }}%</div>
+	      <pdf
+	        ref="pdf"
+	        v-for="(item,index) in pdfList"
+	        :key="'pdf-'+index"
+	        :style="{width: Math.round(scalVal*100)+'%',margin:'0 auto'}"
+	        :src="getUrl('data:application/pdf;base64,' + item)"
+	        :page="page"
+	        :rotate="rotate"
+	        @error="error"
+	      ></pdf>
+	    </div>
+	  </div>
+	  <div class="btn-box">
+	    <u-button size="large" style="margin-right: 25px;" @click="handleCommonCancel">取消</u-button>
+	    <u-button size="large" style="margin-right: 25px;" type="default" @click="handleCapture(hasClipboard?'copy':'export')">
+	      {{ hasClipboard?'复制截图':'导出图片' }}
+	    </u-button>
+	  </div>
+  </div>
+</template>
+
+<script>
+import moment from 'moment'
+import pdf from 'vue-pdf-signature'
+import CMapReaderFactory from 'vue-pdf-signature/src/CMapReaderFactory.js'
+export default {
+  components: {
+    pdf
+  },
+  name: 'PdfView',
+  data () {
+    return {
+      scalLoading: false,
+      pdfAllLoad: 0,
+      scalVal: 0.75,
+      show: true,
+      pdfList: [],
+      src: '',
+      loadedRatio: 0,
+      page: 1,
+      numPages: 0,
+      rotate: 0,
+      curpage: 1,
+      total: 3,
+    }
+  },
+  computed: {
+    hasClipboard () {
+      return typeof ClipboardItem !== 'undefined'
+    }
+  },
+  onload(opts){
+	  this.setData()
+  },
+  methods: {
+    // 缩放
+    setScalVal (t) {
+      if (!this.scalLoading) {
+        this.scalLoading = true
+        this.scalVal = this.scalVal + (t ? 0.05 : -0.05)
+        if (this.scalVal > 1) {
+          this.scalVal = 1
+        }
+        if (this.scalVal < 0.5) {
+          this.scalVal = 0.5
+        }
+        setTimeout(() => {
+          this.scalLoading = false
+        }, 1000)
+      }
+    },
+    getUrl (item) {
+      const src = pdf.createLoadingTask({ url: item, CMapReaderFactory })
+      return src
+    },
+    setData () {
+		this.pdfList = this.$store.state.vuex_tempData
+		this.curpage = 1
+		this.total = data.length
+    },
+    error: function (err) {
+      console.log(err)
+    },
+    // 取消
+    handleCommonCancel () {
+      this.pdfList = []
+	  uni.navigateBack()
+    },
+    // 截图
+    handleCapture (type) {
+      if (this.scalLoading) { return }
+      const pdf = this.$refs.pdf
+      const len = pdf.length
+      const imgsList = []
+      const canvas = document.createElement('canvas')
+      let maxHeight = 0
+      const maxWidth = pdf[0].$refs.canvas.width
+      for (let i = 0; i < len; i++) {
+        const imgs = pdf[i].$refs.canvas
+        maxHeight = maxHeight + imgs.height
+        imgsList.push(imgs)
+      }
+      // 设置画布宽度和高度
+      canvas.width = maxWidth
+      canvas.height = maxHeight
+      const ctx = canvas.getContext('2d')
+      // 开始合并
+      let y = 0
+      imgsList.map(item => {
+        ctx.drawImage(item, 0, y, item.width, item.height)
+        y = y + item.height
+      })
+      const base64Str = canvas.toDataURL('image/png')
+      // 复制图片
+      if (type == 'copy') {
+        this.copyImgBtn(base64Str)
+      }
+      // 下载图片
+      if (type == 'export') {
+        const fileName = moment().format('YYYYMMDDHHmmss')
+        this.downloadFile(fileName, base64Str)
+      }
+      // 清除画布
+      ctx.clearRect(0, 0, maxWidth, maxHeight)
+    },
+    downloadFile (fileName, base64Data) {
+      const aLink = document.createElement('a')
+      const blob = this.convertBase64ToBlob(base64Data.split(',')[1], 'image/png')
+      const evt = document.createEvent('HTMLEvents')
+      // initEvent 不加后两个参数在FF下会报错  事件类型,是否冒泡,是否阻止浏览器的默认行为
+      evt.initEvent('click', true, true)
+      aLink.download = fileName
+      aLink.href = URL.createObjectURL(blob)
+      aLink.click()
+    },
+    // 将照片复制到剪贴版
+    copyImgBtn (base64Data) {
+      const blobInput = this.convertBase64ToBlob(base64Data.split(',')[1], 'image/png')
+      if (navigator.clipboard) {
+        const clipboardItemInput = new ClipboardItem({ 'image/png': blobInput })
+        navigator.clipboard.write([clipboardItemInput])
+        this.$message.success('截图成功,可以右键去粘贴图片!')
+      } else {
+        const image = nativeImageElectron.createFromDataURL(base64Data)
+        clipboardElectron.writeImage(image)
+        this.$message.success('截图成功,可以右键去粘贴图片!')
+      }
+    },
+    convertBase64ToBlob (base64, type) {
+      var bytes = window.atob(base64)
+      var ab = new ArrayBuffer(bytes.length)
+      var ua = new Uint8Array(ab)
+      for (var i = 0; i < bytes.length; i++) {
+        ua[i] = bytes.charCodeAt(i)
+      }
+      return new Blob([ab], { type: type })
+    }
+  },
+  watch: {
+  }
+}
+</script>
+
+<style lang="less">
+  .common-pdfView-modal{
+    background-color: #666;
+    .tools{
+      padding: 10px;
+      display: flex;
+      align-items: center;
+      border-bottom: 1px solid #eee;
+      background-color: #f8f8f8;
+      justify-content: space-between;
+      > div{
+        display: flex;
+        align-items: center;
+        >div{
+          padding: 0 10px;
+        }
+      }
+    }
+    .btn-box{
+      text-align: center;
+      margin-top: 20px;
+    }
+  }
+</style>