面函预览和打回调试

package.json

@@ -19,6 +19,8 @@
     "element-ui": "^2.13.2",
     "es6-promise": "^4.2.8",
     "js-cookie": "^3.0.1",
+    "less": "^3.9.0",
+    "less-loader": "^4.1.0",
     "lodash": "^4.17.21",
     "moment": "^2.27.0",
     "quill": "^1.3.7",
@@ -27,7 +29,8 @@
     "vue-i18n": "^8.26.7",
     "vue-router": "^3.2.0",
     "vuedraggable": "^2.24.3",
-    "vuex": "^3.4.0"
+    "vuex": "^3.4.0",
+    "webpack": "^4.0.0"
   },
   "engines": {
     "node": ">=8.9",

src/business/litopn/event/index.js

@@ -31,7 +31,7 @@ export default {
         transName: this.trnName,
         userId: window.sessionStorage.userId || 'ZL',
       });
-      loading.close();
+      // loading.close();
       if (!res.data) {
         return
       }

src/business/litopn/model/index.js

@@ -194,6 +194,10 @@ export default class Litopn {
       liaall: new Pub().data.Liaall,
       liaccv: new Pub().data.Liaccv,
       docpan: new Pub().data.Docpan,
+      spt: {
+        inr : "",
+        sta: ""
+      }
     };
   }
 }

src/components/business/docpan/views/index.vue

@@ -139,7 +139,7 @@
                 suppress
               "
               @click="
-                handleDisplay(scope.row.index, scope.row)"
+                handleDisplay(scope.$index, scope.row)"
               style="margin-right: 10px"
               >预览</c-button
             >
@@ -477,6 +477,84 @@
         </template>
       </el-dialog>
     </template>
+    <!-- el-dialog和el-tab-pane配合使用版本不对，el-dialog在关闭时候会导致浏览器卡死，用slot title替换掉el-dialog默认自带的关闭按钮，参照文档https://www.jianshu.com/p/63cbaa172351/ -->
+    <el-dialog  v-if="previewVisible" :visible.sync="dialogVisible" center class="preview" :show-close="false"  width="70%">
+      <div slot="title" class="dialog-title">
+        <span>预览</span>
+        <i class="el-icon-close" style="float:right;" @click="previewVisible=false"></i>
+      </div>
+      <div v-if="previewType === 'pdf'">
+          <iframe  class="printEm" :src="viewPdfUrl" frameborder="0" height="600px;" width="100%"></iframe>
+      </div>
+      <div v-else> 
+         <div class="eContainer">
+          <el-button @click="print" style="float:right;position:relative;z-index:99" type="primary">打印</el-button>
+          <el-tabs type="card"  v-model="tabName">
+            <el-tab-pane v-for="(item,index) in formatData" :key="'F'+index" :label="`MT ${item.mt} 格式化文本`" :name="`format${index}`">        
+             <div class="printEm" :ref="`format${index}Div`" style="line-height:2em">
+              <el-divider><b>Message Header</b></el-divider>  
+              <el-row>
+                <el-col :offset="5" :span="6">Correspondents BIC / TID</el-col>
+                <el-col :span="2">
+                  :I0:
+                </el-col>
+                <el-col :span="11">
+                  <b>{{item.rcvbic}}</b>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :offset="5" :span="6">0wn Bic / TID</el-col>
+                <el-col :span="2">
+                  :II:
+                </el-col>
+                <el-col :span="11">
+                  <b>{{item.sndbic}}</b>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :offset="5" :span="6">SWIFT Message Prority</el-col>
+                <el-col :span="2">
+                  :MP:
+                </el-col>
+                <el-col :span="11">
+                  <b>{{item.lvl}}</b>
+                </el-col>
+              </el-row>
+              <el-row>
+                <el-col :offset="5" :span="6">SWIFT Message Type</el-col>
+                <el-col :span="2">
+                  :{{item.mt}}:
+                </el-col>
+                <el-col :span="11">
+                  <b>{{item.mtdesp}}</b>
+                </el-col>
+              </el-row>
+              <el-divider><b>Message Body</b></el-divider> 
+              <el-row :key="index" v-for="(tagDesp,index) in item.tagDespList">
+                <el-col :offset="5" :span="6">
+                  <pre v-html="tagDesp.desp"></pre>
+                </el-col>
+                <el-col :span="2">
+                  <pre>:{{tagDesp.tag}}:</pre>
+                </el-col>
+                <el-col :span="11">
+                  <div>
+                    <pre><b>{{tagDesp.value || " "}}</b></pre>
+                  </div>
+                </el-col>
+              </el-row> 
+            </div>
+            </el-tab-pane> 
+            <el-tab-pane v-for="(item,index) in formatData" :key="'S'+index" :label="`MT ${item.mt} 原报`"
+            :name="`source${index}`">
+            <div :ref="`source${index}Div`" style="line-height:2em">
+              <pre v-html="item.message"></pre>
+            </div>
+            </el-tab-pane>
+          </el-tabs>
+         </div>
+      </div>
+    </el-dialog>  
   </div>
 </template>
 <script>
@@ -502,6 +580,15 @@ export default {
         data: [],
       },
       suppress: false,
+      // 预览相关
+      previewVisible: false,
+      previewType: '',
+      textContext: '',
+      viewPdfurl: '',
+      formatData: [],
+      tabName:"format0",
+      dialogVisible: true
+
     };
   },
   watch: {
@@ -553,6 +640,73 @@ export default {
       );
     },
     async handleDisplay(index, row) {
+      
+      this.textContext = "";
+      this.previewType = "";
+
+      let inr = this.$route.query.inr || this.$route.query.businessInr;
+      // this.model.docpan.doceot[o].cortyp = "SWT"
+      let params = {
+        ...this.model,
+        transName: this.root.trnName,
+        spt: {
+          inr: this.$route.query.businessInr,
+        },
+        doceot: this.model.docpan.doceot,
+        liaallg: this.model.liaall.liaallg,
+        setglg: this.model.setmod.setglg
+      };
+      let res = await Api.post(
+        // '${this.requestPrefix}/showDocs?idx=${index}',
+        `${this.requestPrefix}/showDocs?idx=${index}`,
+        params
+      );  
+      console.log(res);
+      if (res.respCode === SUCCESS){
+        this.previewVisible = true;
+        if (res.data.format === "pdf") {
+          this.previewType = res.data.format;
+          this.viewPdf(res.data.data);
+        }else{
+          this.previewType = "";
+          this.textContext = res.data.data;
+          this.formatData = res.data.formatData;
+        }
+      }
+     
+    },
+
+    print(){
+
+    },
+
+    viewPdf(content){
+        if (!content){
+          console.log(content);
+          this.$message.error("暂无预览详情");
+          return;
+        }
+        const blob = this.base64ToBlob(content);
+        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
+          window.navigator.msSaveOrOpenBlob(blob);
+        }else{
+          const fileURL = URL.createObjectURL(blob);
+          this.viewPdfUrl = fileURL;
+        }
+    },
+
+    base64ToBlob(code) {
+      code = code.replace(/[\n\r]/g,"");
+      const raw = window.atob(code);
+      const rawLength = raw.length;
+      const uInt8Array = new Uint8Array(rawLength);
+      for (let i = 0; i < rawLength; ++i) {
+          uInt8Array[i] = raw.charCodeAt(i);
+      }
+      return new Blob([uInt8Array], {type: "application/pdf"});
+    },
+
+    async handleDisplayOld(index, row) {
       console.log('row', row)
       console.log('ind', index)
       //后续要根据快照模式切换请求方式
@@ -659,4 +813,12 @@ export default {
   created: function () {},
 };
 </script>
-<style></style>
+<style lang="less" scoped>
+.preview /deep/ .el-dialog--center .el-dialog_body {
+  width: 100%;
+  height: calc(100% - 54px);
+}
+.preview /deep/ .el-dialog--center .el-dialog_body div {
+  height: 100%;
+}
+</style>