lilei 3 سال پیش
والد
کامیت
53be6b46da
2فایلهای تغییر یافته به همراه140 افزوده شده و 12 حذف شده
  1. 138 0
      src/views/common/pdfViewModal.vue
  2. 2 12
      src/views/salesManagement/salesQuery/detail.vue

+ 138 - 0
src/views/common/pdfViewModal.vue

@@ -0,0 +1,138 @@
+<template>
+  <a-modal
+    centered
+    class="common-modal"
+    :footer="null"
+    :maskClosable="false"
+    v-model="isShow"
+    :title="modalTit"
+    :bodyStyle="{padding: modalTit?'25px 32px 20px':'50px 32px 15px'}"
+    @cancle="handleCommonCancel"
+    width="60%">
+    <a-spin :spinning="spinning" tip="Loading...">
+      <div class="common-main">
+        <div style="width: 100%;height: 500px;overflow: auto;border: 1px solid #eee;">
+          {{ page }} <span @click="page=page+1">下一页</span>
+          <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: 100%;"
+            :src="getUrl('data:application/pdf;base64,' + item)"
+            :page="page"
+            :rotate="rotate"
+            @progress="loadedRatio = $event"
+            @error="error"
+            @num-pages="numPages = $event"
+            @link-clicked="page = $event"></pdf>
+        </div>
+      </div>
+      <div class="btn-box">
+        <a-button type="default" @click="handleCommonCancel" v-if="isCancel">{{ cancelText }}</a-button>
+        <a-button type="primary" class="button-error" @click="handleCommonOk">{{ okText }}</a-button>
+      </div>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+import pdf from 'vue-pdf'
+import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js'
+export default {
+  components: {
+    pdf
+  },
+  name: 'PdfViewModal',
+  props: {
+    openModal: { //  弹框显示状态
+      type: Boolean,
+      default: false
+    },
+    modalTit: { // 弹框标题
+      type: String,
+      default: '打印预览'
+    },
+    okText: { // 确定 按钮文字
+      type: String,
+      default: '打印'
+    },
+    cancelText: { // 取消 按钮文字
+      type: String,
+      default: '取消'
+    },
+    isCancel: { // 是否显示  取消 按钮
+      type: Boolean,
+      default: true
+    },
+    spinning: { // 加载中
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      isShow: this.openModal, //  是否打开弹框
+      show: true,
+      pdfList: [],
+      src: '',
+      loadedRatio: 0,
+      page: 1,
+      numPages: 0,
+      rotate: 0,
+      curpage: 1,
+      total: 3
+    }
+  },
+  methods: {
+    getUrl (item) {
+      return pdf.createLoadingTask({ url: item, CMapReaderFactory })
+    },
+    setData (data) {
+      this.pdfList = data
+      this.src = data[0]
+      this.curpage = 1
+      this.total = data.length
+    },
+    error: function (err) {
+      console.log(err)
+    },
+    // 确定
+    handleCommonOk () {
+      this.$emit('ok')
+    },
+    // 取消
+    handleCommonCancel () {
+      this.isShow = false
+      this.pdfList = []
+    },
+    // 下载
+    handleDownload () {
+
+    }
+  },
+  watch: {
+    //  父页面传过来的弹框状态
+    openModal (newValue, oldValue) {
+      this.isShow = newValue
+    },
+    //  重定义的弹框状态
+    isShow (newValue, oldValue) {
+      if (!newValue) {
+        this.$emit('cancel')
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less">
+  .common-modal{
+    .common-main{
+    }
+    .btn-box{
+      text-align: center;
+      margin-top: 20px;
+    }
+  }
+</style>

+ 2 - 12
src/views/salesManagement/salesQuery/detail.vue

@@ -81,8 +81,6 @@
         </s-table>
       </a-card>
     </a-spin>
-    <!-- 针式打印预览 -->
-    <pdfViewModal ref="pdfView" :openModal="pdfViewShow" @cancel="pdfViewShow=false" @ok="handlePrint('print','NEEDLE')"></pdfViewModal>
   </div>
 </template>
 
@@ -92,12 +90,11 @@ import { getOperationalPrecision } from '@/libs/tools.js'
 import { STable, VSelect } from '@/components'
 import { salesDetailBySn, salesDetailPrint, salesDetailExport } from '@/api/sales'
 import { salesDetailList } from '@/api/salesDetail'
-import pdfViewModal from '@/views/common/pdfViewModal.vue'
 import Print from '@/views/common/print.vue'
 import { hdPrint } from '@/libs/JGPrint'
 export default {
   name: 'SalesDetail',
-  components: { STable, VSelect, Print, pdfViewModal },
+  components: { STable, VSelect, Print },
   mixins: [commonMixin],
   props: {
     outBizSn: { //  有值则为弹框,无值则为页面
@@ -107,7 +104,6 @@ export default {
   },
   data () {
     return {
-      pdfViewShow: false,
       showPage: false,
       spinning: false,
       disabled: false,
@@ -173,15 +169,9 @@ export default {
       if (type == 'export') { //  导出
         url = salesDetailExport
       }
-
       // 打印或导出
-      hdPrint(printerType, type, url, params, '销售单', function (data) {
+      hdPrint(printerType, type, url, params, '销售单', function () {
         _this.spinning = false
-        console.log(data)
-        if (data && data.data.length) {
-          _this.pdfViewShow = true
-          _this.$refs.pdfView.setData(data.data)
-        }
       })
     },
     //  返回