打印改版

src/api/modular/main/BookingLedger.js

@@ -568,3 +568,11 @@ export function BookingOrderAddOrUpdate(parameter) {
     data: parameter
   })
 }
+export function BookingOrderPrintTemplateList(parameter) {
+  return axios({
+    url: '/BookingOrder/PrintTemplateList',
+    method: 'get',
+    params: parameter
+  })
+}
+//

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

@@ -414,28 +414,30 @@
     <a-modal width="50vw" v-model="PrintModalVisible" title="打印">
       <template slot="footer"> <span></span> </template>
       <div class="PrintMain">
-        <div class="PrintRadio">
-          <a-radio-group default-value="1" button-style="solid" v-model="PrintType">
-            <a-radio-button value="1">
-              pdf
-            </a-radio-button>
-            <a-radio-button value="2">
-              xlsx
-            </a-radio-button>
-            <a-radio-button value="3">
-              docx
-            </a-radio-button>
-          </a-radio-group>
+        <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>
-        <span v-for="item in templateType" :key="item.id" @click="FnCilckTemplateType(item.code)" class="items">
-          {{ item.name }}
-        </span>
+        <a-row class="PrintMainBox">
+          <a-col
+            v-for="(item, index) in templateType"
+            :key="item.id"
+            @click="FnCilckTemplateType(item.typeCode)"
+            class="items"
+            :span="11"
+            :offset="index % 2 == 0 ? 0 : 1"
+          >
+            <span>·</span>{{ item.typeName }}
+          </a-col>
+        </a-row>
       </div>
-      <!-- <a-row>
-        <a-col class="Citems" :span="6" v-for="item in templateType" :key="item.id">
-          <span @click="FnCilckTemplateType(item.code)" class="items">{{ item.name }}</span>
-        </a-col>
-      </a-row> -->
     </a-modal>
     <!-- 打印弹窗 end -->
 
@@ -499,7 +501,8 @@ import {
   BookingOrderDownloadPrint,
   BookingOrderOcrUpFile,
   BookingOrderOcrGetImg,
-  BookingOrderOcrGetText
+  BookingOrderOcrGetText,
+  BookingOrderPrintTemplateList
 } from '@/api/modular/main/BookingLedger'
 
 import axios from 'axios'
@@ -597,7 +600,10 @@ export default {
   },
   mounted() {
     this.BCvData = [...this.CvData]
-    this.templateType = this.$options.filters['dictData']('booking_template_type')
+    // this.templateType = this.$options.filters['dictData']('booking_template_type')
+    BookingOrderPrintTemplateList().then(res => {
+      this.templateType = res.data
+    })
     // if (this.id) {
     //   this.getLetterYard()
     // }
@@ -710,23 +716,32 @@ export default {
             this.$message.error(res.message)
           } else {
             this.$message.success(`预览打印文件 ${res.data} 中...`)
-            console.log(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/pdf;chartset=UTF-8' })
-
-              // const exportName = res.data
-              // const link = document.createElement('a')
-              // link.download = exportName
-              // link.style.display = 'none'
-              // link.href = URL.createObjectURL(blob)
-              // console.log(URL.createObjectURL(blob))
-              window.open(URL.createObjectURL(blob), '_blank')
-              // link.setAttribute('download', exportName)
-              // document.body.appendChild(link)
-              // console.log(link)
-              // link.click()
-              // URL.revokeObjectURL(link.href)
-              // document.body.removeChild(link)
+              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)
+              }
             })
           }
         })
@@ -1301,18 +1316,41 @@ export default {
 .PrintMain {
   display: flex;
   flex-wrap: wrap;
-  max-height: 50vh;
-  overflow-y: auto;
-  .items {
-    display: inline-block;
-    height: 28px;
-    line-height: 26px;
-    border: 1px dashed #ccc;
-    border-radius: 4px;
-    padding: 0 10px;
-    font-size: 13px;
-    cursor: pointer;
-    margin: 5px 10px;
+
+  .PrintTitle {
+    width: 100%;
+    display: flex;
+    padding: 20px;
+    box-sizing: border-box;
+    background: #f7f8fe;
+    border: 2px dotted #cdcdcd;
+    p {
+      margin: 0;
+      &:nth-child(2) {
+        margin-left: 35px;
+      }
+      span {
+        color: #ff6646;
+      }
+    }
+  }
+  .PrintMainBox {
+    max-height: 50vh;
+    overflow-y: auto;
+    .items {
+      padding-left: 1rem;
+      height: 2.5rem;
+      line-height: 2.5rem;
+      border-bottom: 1px solid #ebebeb;
+      cursor: pointer;
+      &:hover {
+        color: #2f54eb;
+      }
+      span {
+        font-weight: bolder;
+        margin-right: 0.6rem;
+      }
+    }
   }
 }
 /*订舱弹窗文件功能对齐 */
@@ -1330,19 +1368,19 @@ export default {
 /deep/ .ant-modal-body .ant-input-affix-wrapper {
   position: relative;
   z-index: 1;
-  &::after{
-    content:'';
-    position:absolute;
+  &::after {
+    content: '';
+    position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: -1;
     background-color: @primary-color !important;
-    opacity: .04;
+    opacity: 0.04;
   }
 }
-/deep/ .ant-modal-body .ant-input{
+/deep/ .ant-modal-body .ant-input {
   background: none;
 }
 .PrintRadio {