index.vue

<template>
  <div class="eibs-tab">
    <c-col :span="24" style="">
      <el-table :data="stmData.data">
        <el-table-column label="介质" width="110px">
          <template slot-scope="scope">
            <el-form-item
              label-width="0"
              :prop="'docpan.doceot.' + scope.$index + '.cortyp'"
            >
              <c-select
                v-model="scope.row.cortyp"
                style="width: 100%"
                disabled
                placeholder="请选择"
              >
                <el-option
                  v-for="item in codes.doceotCortyp"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </c-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="报文格式" width="150px">
          <template slot-scope="scope">
            <c-select
              v-model="scope.row.docsnf"
              style="width: 100%"
              placeholder="请选择"
              @change="executeDefault('docpan.doccur.docsnf')"
            >
              <el-option
                v-for="item in codes.docsnf"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </c-select>
          </template>
        </el-table-column>
        <el-table-column label="语言" width="150px">
          <template slot-scope="scope">
            <c-select
              v-model="scope.row.docuil"
              style="width: 100%"
              placeholder="请选择"
            >
              <el-option
                v-for="item in codes.uiltxt1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </c-select>
          </template>
        </el-table-column>
        <el-table-column label="传送方式" width="110px">
          <template slot-scope="scope">
            <el-form-item
              label-width="0"
              :prop="'docpan.doceot.' + scope.$index + '.apf'"
            >
              <c-select
                v-model="scope.row.apf"
                disabled
                style="width: 100%"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in codes.apftxt"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </c-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="发送份数" width="70">
          <template slot-scope="scope">
            <c-input
              v-model="scope.row.apfcpy1"
              :readonly="true"
              style="width: 100%"
              placeholder="请选择"
            >
            </c-input>
          </template>
        </el-table-column>
        <el-table-column label="抄送份数" width="70">
          <template slot-scope="scope">
            <c-input
              v-model="scope.row.apfcpy2"
              style="width: 100%"
              placeholder="请选择"
            >
            </c-input>
          </template>
        </el-table-column>
        <el-table-column label="" width="110px">
          <template slot-scope="scope">
            <el-form-item
              label-width="0"
              :prop="'docpan.doceot.' + scope.$index + '.staflg'"
            >
              <c-select
                v-model="scope.row.staflg"
                style="width: 100%"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in codes.swttlx"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </c-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200px" fixed="right">
          <template slot-scope="scope">
            <c-button
              type="primary"
              size="small"
              :disabled="
                (scope.row.pandsc == 'MT799' &&
                  model.didgrp &&
                  model.didgrp.rec &&
                  model.didgrp.rec.elcflg == 'Y') ||
                suppress
              "
              @click="
                handleDisplay(scope.$index, scope.row)"
              style="margin-right: 10px"
              >预览</c-button
            >
            <!-- 2023.4.13临时注释，为了当次演示使用，后期详情接口做完了在放开注释联调 -->
            <!-- <c-button
              size="small"
              type="primary"
              style="margin-left: 0"
              @click="handleDetail(scope.row.index, scope.row)"
              >详情</c-button
            > -->
          </template>
        </el-table-column>
      </el-table>
    </c-col>
    <c-col :span="12" style="margin-top: 20px">
      <c-col :span="24">
        <el-form-item
          label="国内证落款"
          prop="docpan.advnam"
          v-if="
            root.trnName == 'DITCAN' ||
            root.trnName == 'BDTSET' ||
            root.trnName == 'TRTAME' ||
            root.trnName == 'TRTSET' ||
            root.trnName == 'DETOPN' ||
            root.trnName == 'DETAME' ||
            root.trnName == 'BFTDRV' ||
            root.trnName == 'BFTSND' ||
            root.trnName == 'BPTOPN' ||
            root.trnName == 'BPTAME' ||
            root.trnName == 'BPTSET' ||
            root.trnName == 'BFTACC' ||
            root.trnName == 'DFTAME' ||
            root.trnName == 'DFTSET'
          "
        >
          <c-input
            v-model="model.docpan.advnam"
            maxlength="50"
            placeholder="请输入"
          ></c-input>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <el-form-item
          label="修改申请人名称"
          prop="docpan.amdapl"
          v-if="root.trnName == 'detame' || root.trnName == 'bftsnd'"
        >
          <c-input
            v-model="model.docpan.amdapl"
            maxlength="100"
            placeholder="请输入"
          ></c-input>
        </el-form-item>
      </c-col>
      <c-col :span="24">
        <el-form-item
          label="国内证通知书"
          prop="docpan.advdoc"
          v-if="root.trnName == 'detopn' || root.trnName == 'detame'"
        >
          <c-select
            v-model="model.docpan.advdoc"
            placeholder="请选择"
            style="width: 100%"
            :code="codes.trndoc_advdoc"
          >
          </c-select>
        </el-form-item>
      </c-col>
    </c-col>
    <template>
      <el-dialog
        :title="title"
        :visible.sync="centerDialogVisible"
        width="60%"
        center
      >
        <el-form label-width="100px" :model="dialog" :disabled="suppress">
          <c-row>
            <c-col :span="12">
              <c-col>
                <el-form-item label="介质">
                  <c-select
                    disabled
                    v-model="dialog.cortyp"
                    :code="codes.doceotCortyp"
                  >
                  </c-select>
                </el-form-item>
              </c-col>
              <c-col>
                <el-form-item label="表单集合">
                  <!-- <el-input
                                      disabled
                                      v-model="dialog.cortyp"
                                  /> -->
                  <c-select
                    disabled
                    v-model="dialog.cortyp"
                    :code="codes.doceotCortyp"
                  >
                  </c-select>
                </el-form-item>
              </c-col>
              <c-col v-if="title != 'elcs.101.001.01'">
                <el-form-item>
                  <el-input disabled style="width: 150px" value="Original" />
                  <el-input
                    v-model="dialog.apfcpy1"
                    style="width: 100px; margin-left: 20px"
                  />
                </el-form-item>
                <el-form-item>
                  <el-input
                    disabled
                    style="width: 150px"
                    value="Customer Copy"
                  />
                  <el-input
                    v-model="dialog.apfcpy2"
                    style="width: 100px; margin-left: 20px"
                  />
                </el-form-item>
                <el-form-item>
                  <el-input disabled style="width: 150px" value="File Copy" />
                  <el-input
                    v-model="dialog.apfcpy3"
                    style="width: 100px; margin-left: 20px"
                  />
                </el-form-item>
                <el-form-item>
                  <el-input
                    disabled
                    style="width: 150px"
                    value="Internal Copy"
                  />
                  <el-input
                    v-model="dialog.apfcpy4"
                    style="width: 100px; margin-left: 20px"
                  />
                </el-form-item>
              </c-col>
            </c-col>

            <c-col :span="12">
              <el-form-item label="发送至" label-width="150px">
                <!-- <el-input disabled v-model="dialog.roladr" /> -->
                <c-select disabled v-model="dialog.roladr" :code="codes.payrol">
                </c-select>
              </el-form-item>
              <el-form-item
                label-width="150px"
                v-if="title == 'elcs.101.001.01'"
              >
                <c-fullbox>
                  <c-input
                    v-model="dialog.rcv.pts.extkey"
                    @keyup.enter.native="
                      showGridPromptDialog('docpan.doccur.rcv.pts.extkey')
                    "
                  />
                  <template slot="footer">
                    <c-button
                      size="small"
                      type="primary"
                      icon="el-icon-search"
                    ></c-button>
                    <c-button size="small" type="primary"> 详情 </c-button>
                  </template>
                </c-fullbox>
              </el-form-item>
              <el-form-item v-else label="BIC编码" label-width="150px">
                <el-input v-model="dialog.rcv.pts.extkey" />
              </el-form-item>
              <el-form-item
                v-if="
                  title == 'elcs.101.001.01' ||
                  (title != 'elcs.101.001.01' && dialog.rcv.pts.bankno != '')
                "
                label="联行行号"
                label-width="150px"
              >
                <el-input v-model="dialog.rcv.pts.bankno" />
              </el-form-item>
              <el-form-item label-width="30px">
                <el-input
                  :value="
                    title == 'elcs.101.001.01'
                      ? dialog.rcv.namelc
                      : dialog.rcv.pts.jigomc
                  "
                  :disabled="title != 'elcs.101.001.01'"
                  type="textarea"
                  :rows="2"
                />
                <br />
                <el-input
                  :value="
                    title == 'elcs.101.001.01'
                      ? dialog.rcv.adrelc
                      : dialog.rcv.pts.dizzhii
                  "
                  :disabled="title == 'MT799'"
                  type="textarea"
                  :rows="2"
                />
              </el-form-item>
              <el-form-item label="参考号" label-width="100px">
                <el-input disabled v-model="dialog.adrref" />
              </el-form-item>
              <el-form-item label="介质" label-width="100px">
                <!-- <el-input
                                  disabled
                                  style="width: 40%"
                                  v-model="dialog.cortyp"
                              /> -->
                <c-select
                  disabled
                  style="width: 40%"
                  v-model="dialog.cortyp"
                  :code="codes.doceotCortyp"
                >
                </c-select>
                <!-- <el-input
                                  disabled
                                  v-model="dialog.docuil"
                                  style="width: 40%; margin-left: 20px"
                              /> -->
                <c-select
                  disabled
                  style="width: 40%; margin-left: 20px"
                  v-model="dialog.docuil"
                  :code="codes.payuil"
                >
                </c-select>
              </el-form-item>
            </c-col>

            <c-col>&nbsp;</c-col>
            <c-col :span="12" v-if="title != 'MT799'">
              <el-form-item label="地址修改" label-width="120px">
                <el-input type="textarea" v-model="dialog.adrblk" :rows="4" />
              </el-form-item>
            </c-col>
            <c-col :span="12" v-else>
              <el-form-item label="BIC编码">
                <el-input disabled v-model="dialog.adrbic" />
              </el-form-item>
              <el-form-item label="Authenticator"
                ><el-input disabled v-model="dialog.adrbicaut"
              /></el-form-item>
              <el-form-item label="优先级"
                ><el-input disabled v-model="dialog.msgpri"
              /></el-form-item>
            </c-col>
            <c-col :span="12">
              <el-form-item label-width="30px">
                <el-table
                  :data="dialog.rcv.ptyinftxt.rows"
                  size="mini"
                  stripe
                  :border="true"
                  empty-text=" "
                  max-height="430px"
                >
                  <el-table-column label="报文类型" sortable> </el-table-column>
                  <el-table-column label="地址" sortable> </el-table-column>
                  <el-table-column label="Authentication" sortable>
                  </el-table-column>
                </el-table>
              </el-form-item>
            </c-col>
            <c-col v-if="title != 'MT799'"
              ><el-form-item label="面函日期">
                <el-date-picker type="date" v-model="dialog.docdat">
                </el-date-picker
              ></el-form-item>
            </c-col>
            <c-col v-if="this.suppress != true"
              ><el-form-item label="Contact"
                ><el-input v-model="dialog.ptcnam"
              /></el-form-item>
            </c-col>
            <c-col :span="22" v-if="this.suppress != true"
              ><el-form-item
                :label="
                  title == 'MT799' ? 'Sender to Rec. information' : 'Remark'
                "
              >
                <div v-if="title == 'MT799'">
                  <el-input
                    type="textarea"
                    :rows="10"
                    disabled
                    v-model="dialog.addtxt"
                  />
                </div>
                <div v-else>
                  <el-input
                    type="textarea"
                    :rows="10"
                    v-model="dialog.addtxt"
                  />
                </div>
              </el-form-item>
            </c-col>
            <c-col :span="2" v-if="this.suppress != true">
              <c-button size="mini" icon="el-icon-more"> </c-button>
            </c-col>
          </c-row>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <c-button type="primary" @click="saveDialog">确 定</c-button>
            <c-button
              type="primary"
              @click="activateDialog"
              v-if="dialog.delflg == 'D'"
              >应用</c-button
            >
            <c-button
              type="primary"
              @click="suppressDialog"
              v-else-if="dialog.lev == '1' || dialog.mliflg != ''"
              >禁用</c-button
            >
            <c-button type="primary" @click="activateDialog" v-else
              >删除</c-button
            >
            <c-button @click="centerDialogVisible = false">取 消</c-button>
          </span>
        </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>
import commonProcess from '~/mixin/commonProcess';
import Api from '~/service/Api';
export default {
  inject: ['root'],
  props: ['model', 'codes'],
  mixins: [commonProcess],
  data() {
    return {
      index: 0,
      title: '',
      dialog: {
        rcv: {
          pts: {},
          ptyinftxt: {},
        },
      },
      centerDialogVisible: false,
      stmData: {
        columns: [],
        data: [],
      },
      suppress: false,
      // 预览相关
      previewVisible: false,
      previewType: '',
      textContext: '',
      viewPdfurl: '',
      formatData: [],
      tabName:"format0",
      dialogVisible: true

    };
  },
  watch: {
    'model.docpan.doceot': {
      handler(val, oldVal) {
        this.stmData.data = val;
      },
      immediate: true,
    },
  },
  methods: {
    saveDialog() {
      this.centerDialogVisible = false;
      this.model.docpan.doceot.splice(this.index, 1, this.dialog);
      this.executeRule('docpan.doccur.butaddok').then((res) => {
        if (res.respCode == SUCCESS) {
          //TODO
        } else {
          this.$notify.error({ title: '错误', message: '服务请求失败！' });
        }
      });
    },
    activateDialog() {
      this.executeRule(`docpan.doceot(${this.index + 1}).butdel`).then(
        (res) => {
          if (res.respCode == SUCCESS) {
            //TODO
            this.updateModel(res.data);
            this.dialog = this.model.docpan.doceot[this.index];
            this.suppress = false;
          } else {
            this.$notify.error({ title: '错误', message: '服务请求失败！' });
          }
        }
      );
    },
    suppressDialog() {
      this.executeRule(`docpan.doceot(${this.index + 1}).butdel`).then(
        (res) => {
          if (res.respCode == SUCCESS) {
            //TODO
            this.updateModel(res.data);
            this.dialog = this.model.docpan.doceot[this.index];
            this.suppress = true;
          } else {
            this.$notify.error({ title: '错误', message: '服务请求失败！' });
          }
        }
      );
    },
    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)
      //后续要根据快照模式切换请求方式
      let cortyp = row.cortyp;
      let docnam = row.docnam;
      docnam = docnam
        .substr(docnam.indexOf('\\') + 1)
        .toLowerCase()
        .replaceAll('\\', '_');
      let rtnmsg;
      // if (cortyp == 'SWT' || cortyp == 'FMT' || cortyp == 'CMT') {
      //     // this.model.setmod.msgmod.doccod = row.id
      //     rtnmsg = await Api.post(`${this.requestPrefix}/msgmod_butshw`, this.wrapper())
      // } else {
      //     // this.model.docpan.doccod = row.id
      //     // this.model.docpan.cortyp = cortyp

      // }
      let params = {
        docVo: row,
        [this.model.busType + 'grp']: this.model[this.model.busType + 'grp'],
        [this.model.busType + 'p']: this.model[this.model.busType + 'p'],
        trnmodVo: this.model.trnmod,
        addbcb: this.model.addbcb,
        cnybop: this.model.cnybop,
        doceot: this.model.docpan.doceot,
      };
      rtnmsg = await Api.post(
        `${this.requestPrefix}/executeDocpan`,
        params
      );
      if (rtnmsg.respCode == SUCCESS) {
        if (cortyp == 'SWT' || cortyp == 'FMT' || cortyp == 'CMT') {
          // let viewurl = rtnmsg.data.setmod_msgmod_docpth;
          let viewurl = '/#/docpan/swift';
          // this.viewurl = viewurl
          // window.sessionStorage.docTXT = rtnmsg.data.lidgrp_blk_feetxt + rtnmsg.data.lidgrp_blk_insbnk ;
          let doctxt = rtnmsg.data.trnmod_trndoc_doceot[index]['doctxt'];
          window.sessionStorage.docTXT = doctxt.rows
            .filter((d) => d != '')
            .join('\n');
          this.title = '报文';
          window.open(
            viewurl,
            'newwindow',
            'height=1200,width=800,top=100,left=100,toolbar=no,resizable=no,menubar=no,location=no, status=no'
          );
        } else if (cortyp == 'ELC') {
          Modal.info({
            title: '电证报文',
            content: (
              <div style={{ height: 400, overflow: 'auto' }}>
                <ELCMessage
                  mty={row.id}
                  message={rtnmsg.data['\\trnmod\\trndoc\\docinf']}
                />
              </div>
            ),
            width: 1000,
          });
        } else {
          this.title = '面函';
          let viewurl = '/#/docpan/show';
          let base64Str = rtnmsg.data.executeDocpan;
          let bstr = window.atob(base64Str); // 解码 base-64 编码的字符串，base-64 编码使用方法是 btoa()
          let length = bstr.length;
          let u8arr = new Uint8Array(length); // 创建初始化为0的，包含length个元素的无符号整型数组
          while (length--) {
            u8arr[length] = bstr.charCodeAt(length); // 返回在指定的位置的字符的 Unicode 编码
          }
          let blob = new Blob([u8arr]);
          let param = {
            blob: blob,
            docnam: row.docnam,
          };
          window['params'] = param;
          window.open(
            viewurl,
            'newwindow',
            'height=1200,width=800,top=100,left=100,toolbar=no,resizable=no,menubar=no,location=no, status=no'
          );
        }
        this.dialogOpen = true;
      } else {
        this.$notify.error({ title: '错误', message: '服务请求失败！' });
      }
    },
    async handleDetail(index, row) {
      const params = {
        index: row.idx,
      };
      let rtnmsg = await Api.post(
        `${this.requestPrefix}/executeDocpanDetail`,
        this.wrapper(params)
      );
      if (rtnmsg.respCode == SUCCESS) {
        this.title = row.pandsc;
        (this.centerDialogVisible = true), this.updateModel(rtnmsg.data);
        this.dialog = this.model.docpan.doceot[row.idx];
        this.index = row.idx;
      }
    },
  },
  created: function () {},
};
</script>
<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>