分单打印

src/views/main/BookingLedger/detail/modules/sedOperationArea.vue

@@ -4,12 +4,47 @@
       <div class="btn-list more-view">
         <button @click="copyFun"><span class="iconfont icon-fuzhi1"></span>复制</button>
         <button @click="saveFun"><span class="iconfont icon-icon_baocun"></span>保存</button>
-        <button><span class="iconfont icon-printing"></span>打印</button>
+        <button><span class="iconfont icon-printing" @click="FSnhowPrintModal"></span>打印</button>
       </div>
     </a-card>
+    <!-- 打印弹窗 start -->
+    <a-modal width="50vw" :maskClosable="false" v-model="PrintModalVisible" title="打印">
+      <template slot="footer"> <span></span> </template>
+      <div class="PrintMain">
+        <div class="PrintTitle">
+          <p>默认打印格式为<span>pdf</span>,如需其他格式请选择</p>
+          <p>
+            打印格式：
+            <a-radio-group v-model="PrintType" name="radioGroup">
+              <a-radio value="1">pdf</a-radio>
+              <a-radio value="2">xlsx</a-radio>
+              <a-radio value="3">docx</a-radio>
+            </a-radio-group>
+          </p>
+        </div>
+        <a-row class="PrintMainBox">
+          <a-col
+            v-for="(item, index) in templateType"
+            :key="item.typeCode"
+            @click="FnCilckTemplateType(item.typeCode)"
+            class="items"
+            :span="11"
+            :offset="index % 2 == 0 ? 0 : 1"
+          >
+            <span>·</span>{{ item.typeName }}
+          </a-col>
+        </a-row>
+      </div>
+    </a-modal>
+    <!-- 打印弹窗 end -->
   </div>
 </template>
 <script>
+import {
+  BookingOrderPrintTemplateList,
+  BookingOrderPrint,
+  BookingOrderDownloadPrint
+} from '@/api/modular/main/BookingLedger'
 export default {
   props: {
     details: {
@@ -21,10 +56,18 @@ export default {
   },
   data() {
     return {
-      id: this.$route.query.id
+      id: this.$route.query.id,
+      PrintModalVisible: false,
+      templateType: [],
+      PrintType: '1'
     }
   },
-  mounted() {},
+  mounted() {
+    BookingOrderPrintTemplateList().then(res => {
+      console.log(res.data)
+      this.templateType = res.data
+    })
+  },
   methods: {
     refreshPage() {
       this.$emit('refresh')
@@ -38,7 +81,52 @@ export default {
     },
     copyFun() {
       this.$emit('copy')
+    },
+    FSnhowPrintModal() {
+      this.PrintModalVisible = true
+      debugger
+    },
+    FnCilckTemplateType(typeCode) {
+      this.$message.success(`搜索文件中...`)
+      BookingOrderPrint({ typeCode, bookingId: this.id, type: this.PrintType })
+        .then(res => {
+          if (!res.success) {
+            this.$message.error(res.message)
+          } else {
+            this.$message.success(`预览打印文件 ${res.data} 中...`)
+            let PrintType = 'pdf'
+            switch (this.PrintType) {
+              case '1':
+                PrintType = 'pdf'
+                break
+              case '2':
+                PrintType = 'xlsx'
+                break
+              default:
+                PrintType = 'docx'
+                break
+            }
+            BookingOrderDownloadPrint({ fileName: res.data }).then(res2 => {
+              const blob = new Blob([res2], { type: `application/${PrintType};chartset=UTF-8` })
+              if (this.PrintType == '1') {
+                window.open(URL.createObjectURL(blob), '_blank')
+              } else {
+                const link = document.createElement('a')
+                link.style.display = 'none'
+                link.href = URL.createObjectURL(blob)
+                link.download = res.data
+                document.body.appendChild(link)
+                link.click()
+                URL.revokeObjectURL(link.href) // 释放URL对象
+                document.body.removeChild(link)
               }
+            })
+          }
+        })
+        .catch(err => {
+          console.log(err)
+        })
+    },
   }
 }
 </script>