Merge branch 'settle-test-20230110' of http://114.115.138.98:8900/fukai/vue-gjjs…

Merge branch 'settle-test-20230110' of http://114.115.138.98:8900/fukai/vue-gjjs into settle-test-20230110

src/business/bctcan/event/buildCommons.js

+export default {
+  buildPtspta (ptsptaObj) {
+    let pts = ptsptaObj.pts;
+    let ptspta = {
+      rol: pts.rol,
+      name: pts.nam,
+      ptyinr: pts.ptyinr,
+      ptainr: pts.ptainr,
+      extkey: pts.extkey,
+      dftdsp: pts.dftdsp,
+      dftcur: pts.dftcur,
+      dftact: pts.dftact,
+      dftfeecur: pts.dftfeecur,
+      dftactptainr: pts.dftactptainr,
+      glggrpflg: pts.glggrpflg,
+      adrblk: pts.adrblk
+    };
+    return ptspta;
+  },
+  buildCommonData (model, trnName) {
+    let ptsptaList = [];
+    if (model.bcdgrp.dre.pts.extkey) {
+      ptsptaList.push(this.buildPtspta(model.bcdgrp.dre));
+    }
+    if (model.bcdgrp.rmi.pts.extkey) {
+      ptsptaList.push(this.buildPtspta(model.bcdgrp.rmi));
+    }
+    if (model.bcdgrp.drr.pts.extkey) {
+      ptsptaList.push(this.buildPtspta(model.bcdgrp.drr));
+    }
+    let dataObj = {
+      rec: {
+        objtyp: 'BCD',
+         objinr: model.bcdgrp.rec.inr,
+        ownref: model.bcdgrp.rec.ownref,
+        opndat: model.bcdgrp.rec.opndat,
+        expdat: model.bcdgrp.rec.expdat,
+        branchInr: model.bcdgrp.rec.branchinr,
+        nam: model.bcdgrp.rec.nam,
+        oridre: model.bcdgrp.rec.oridre,
+        rejtypsel: model.rejtypsel,
+        // bflg: model.cbsdcr.bflg,
+        mattxtflg:model.bcdgrp.rec.mattxtflg,
+        doccur: model.setmod.doccur,
+        docamt: model.setmod.docamt,
+
+      },
+      cbsMap: {
+        MAX: model.bcdgrp.cbs.max,
+        OPN1: model.bcdgrp.cbs.opn1,
+        // MAC: model.bcdgrp.cbs.mac,
+        // MAC2: model.bcdgrp.cbs.mac2,
+        // OPC2: model.bcdgrp.cbs.opc2,
+        // CNF: model.bcdgrp.cbs.cnf,
+      },
+      ptsList: ptsptaList,
+      transName: trnName,
+      userId: window.sessionStorage.userId ? window.sessionStorage.userId : 'ZL'
+    };
+    return dataObj
+  },
+  buildSetfeg (model, trnName) {
+    let params = {
+      ...this.buildCommonData(model, trnName),
+      liaall: model.liaall,
+      liaccv: model.liaccv,
+      doceot: model.trnmod.trndoc.doceot,
+    };
+    return params
+  },
+  buildSetglg (model, trnName) {
+    let params = {
+      ...this.buildCommonData(model, trnName),
+      setfeg: model.setmod.setfeg,
+      liaall: model.liaall,
+      liaccv: model.liaccv,
+    };
+    return params
+  },
+  buildGlentry (model, trnName) {
+    let params = {
+      ...this.buildCommonData(model, trnName),
+      liaallg: model.liaall.liaallg,
+      setfog: model.setmod.setfog,
+      setfeg: model.setmod.setfeg,
+      setglg: model.setmod.setglg,
+    };
+    return params
+  },
+  buildEngp (model, trnName) {
+    let params = {
+      ...this.buildCommonData(model, trnName),
+      liaallg: model.liaall.liaallg,
+    };
+    return params
+  },
+  buildDocpan (model, trnName) {
+    let params = {
+      ...this.buildCommonData(model, trnName),
+    };
+    return params
+  },
+  buildCcvpan (model, trnName) {
+    let params = {
+      ...this.buildCommonData(model, trnName),
+      liaccvg: model.liaccv.liaccvg,
+      oldamt: model.liaccv.oldamt,
+      chgamt: model.liaccv.chgamt,
+      concur: model.liaccv.concur,
+    };
+    return params
+  },
+  buildLimitbody (model, trnName) {
+    let params = {
+      ...this.buildCommonData(model, trnName),
+      rec: {
+        objtyp: 'BCD',
+        objinr: model.bcdgrp.rec.inr,
+        ownref: model.bcdgrp.rec.ownref,
+      },
+    };
+    return params
+  },
+  buildDoctre (model, trnName) {
+    let params = {
+      ...this.buildCommonData(model, trnName),
+      rec: {
+        objtyp: 'BCD',
+        objinr: model.bcdgrp.rec.inr,
+        ownref: model.bcdgrp.rec.ownref,
+        // swiftflg: model.gitp.swiftflg,
+      },
+    };
+    return params
+  },
+  // 公共组件setmod中dsp字段改变，触发联动时候的入参
+  buildSetgllAccts (model, trnName, setglg) {
+    let params = {
+      ...this.buildCommonData(model, trnName),
+      setglg
+    };
+    return params
+  }
+}      
\ No newline at end of file

src/business/bctcan/event/index.js

+import Api from '~/service/Api';
+import commonFunctions from '~/mixin/commonFunctions.js';
+import buildFn from './buildCommons.js';
+import setmod from '~/components/business/setmod/event';
+import glentry from '~/components/business/glentry/event';
+import engp from '~/components/business/engp/event';
+import docpan from '~/components/business/docpan/event';
+import ccvpan from '~/components/business/ccvpan/event';
+import limitbody from '~/components/business/limitbody/event';
+import doctre from '~/components/business/doctre/event';
+import Utils from "~/utils"
+
+export default {
+  mixins: [commonFunctions],
+  methods: {
+    ...setmod,
+    ...glentry,
+    ...engp,
+    ...docpan,
+    ...ccvpan,
+    ...limitbody,
+    ...doctre,
+    async init () {
+
+      const params = {
+        spt: JSON.parse(localStorage.getItem('row_' + this.trnName)),
+        // trnmod:{
+        //   trn:JSON.parse(localStorage.getItem('review_'+this.trnName))
+        // }
+      }
+      const res = await Api.post('/service/bctcan/init', {
+        ...params,
+        transName: this.trnName,
+        userId: window.sessionStorage.userId || 'ZL',
+        bcdgrp:{
+          rec:{
+            inr: this.$route.query.inr
+          }
+        },
+      });
+      if (!res.data) {
+        return
+      }
+      this.copyValueFromVoData(this.model, res.data)
+      this.copyValueFromVoData(this.model.setmod.setfeg, res.data.setfeg)
+      this.copyValueFromVoData(this.model.setmod.setfog, res.data.setfog)
+      this.copyValueFromVoData(this.model.setmod.setglg, res.data.setglg)
+    },
+    // 兼容处理在前端model中定义了字段，后端返回的数据中不存在字段的问题
+    copyValueFromVoData (model, data) {
+      let keysList = Object.keys(model)
+      keysList.map((key) => {
+        if (data[key]) {
+          if (Utils.typeOf(model[key]) === 'Object') {
+            this.copyValueFromVoData(model[key], data[key])
+          } else {
+            this.$set(model, key, data[key])
+          }
+        }
+      })
+    },
+    async tabClick(tab) {
+      if (this.isInDisplay) {
+        return;
+      }
+      let name = tab.name;
+      switch (name) {
+        case 'ccvpan':
+          let ccvpanRequest = buildFn.buildCcvpan(this.model, this.trnName);
+          this.processLiaccv(ccvpanRequest);
+          break;
+        case 'engp':
+          let engpRequest = buildFn.buildEngp(this.model, this.trnName);
+          this.processLiaall(engpRequest);
+          break;
+        case 'setmod':
+          let setfegRequest = buildFn.buildSetfeg(this.model, this.trnName);
+          // 此处利用回调是为了等setfeg的接口调用完成后才去获取setglg参数，由于setglg参数依赖于setfeg函数的返回值
+          this.processSetpan(setfegRequest, () => {
+            return buildFn.buildSetglg(this.model, this.trnName);
+          });
+          break;
+        case 'docpan':
+          let docpanRequest = buildFn.buildDocpan(this.model, this.trnName);
+          this.processTrndoc(docpanRequest);
+          break;
+        case 'glepan':
+          let glentryRequest = buildFn.buildGlentry(this.model, this.trnName);
+          this.processGlentry(glentryRequest);
+          break;
+        case 'limitbody':
+          let limitbodyRequest = buildFn.buildLimitbody(this.model, this.trnName);
+          this.processLimitbody(limitbodyRequest);
+          break;
+        case 'doctre':
+          let doctreRequest = buildFn.buildDoctre(this.model, this.trnName);
+          this.processDoctre(doctreRequest);
+          break;
+        default:
+          return;
+      }
+    },
+    // 点击获取按钮拉取当前key字段下的表单数据
+    queryFormData(key) {
+      console.log(key);
+    },
+    // // 业务信息=》基本信息=》编号-----获取编号
+    // async queryOwnref() {
+    //   let params = {
+    //     ptainr: this.model.gidgrp.apl.pts.ptainr,
+    //     businessType: 'LG',保函用的是LG
+    //     tbl: 'LG',
+    //   };
+    //   const loading = this.loading();
+    //   let res = await Api.post('/service/gitopn/getOwnRef', params);
+    //   if (res.respCode == SUCCESS) {
+    //     loading.close();
+    //     this.model.gidgrp.rec.ownref = res.data;
+    //   }
+    // },
+
+    // 获取弹框表格数据
+    async queryGridEtyPromptDialogData(type, ptytyp) {
+      let params = {
+        userId: window.sessionStorage.userId || 'ZL',
+        ptytyp: ptytyp,
+        extkey: this.model.bcdgrp[type.toLowerCase()].pts.extkey,
+      };
+      let res = await Api.post('/service/ptspta/list', params);
+      if (res.respCode == SUCCESS) {
+        this.root.$refs['etyDialog'].show = true;
+        this.root.promptData.data = res.data.ptaInfos;
+        this.root.promptData.type = type;
+      }
+    },
+    // 选中弹框表格的行数据
+    async selectGridEtyPromptData(row) {
+      let params = {
+        ...row,
+      };
+      let res = await Api.post('/service/ptspta/fetch', params);
+      if (res.respCode == SUCCESS) {
+        this.$set(this.model.bcdgrp, row.role.toLowerCase(), res.data);
+      }
+    },
+    // 业务信息=》基本信息=》支出目的
+    purposChange(key, value) {
+      this.handleChangeForm(key, value);
+    },
+    // 初始化保函开立类型码表下拉列表
+    async queryHndtypCodeTableList(trnName) {
+      let params = {
+        botp: {
+          swiftflg: this.model.botp.swiftflg,
+        },
+        bcdgrp: {
+          rec: {
+            purpos: this.model.bcdgrp.rec.purpos,
+          },
+        },
+        transName: trnName.toUpperCase(),
+      };
+      let res = await Api.post('/service/bctdav/initHndtyp', params);
+      if (res.respCode == SUCCESS) {
+        this.$set(this.codes, 'voHndtyp', res.data);
+      }
+    },
+    // 是否SWIFT格式修改--联动保函开立类型
+    handleChangeSwiftflg() {
+      this.queryHndtypCodeTableList(this.root.trnName);
+    },
+    // 支出目的修改--联动保函开立类型
+    handleChangePurpos() {
+      this.queryHndtypCodeTableList(this.root.trnName);
+    },
+    buildLiaccv () {
+      let params = {
+        ...buildFn.buildCommonData(this.model, this.trnName),
+        liaccvg: this.model.liaccv.liaccvg,
+        oldamt: this.model.liaccv.oldamt,
+        chgamt: this.model.liaccv.chgamt,
+        concur: this.model.liaccv.concur,
+      };
+      
+      return params
+    },
+    // 公共组件setmod处理方式改变触发联动
+    changeSetmodModel (emitParams) {
+      let reqParams = {}
+      switch (emitParams.code) {
+        case 'processMethods':
+          reqParams = buildFn.buildSetglg(this.model, this.trnName);
+          this.calcPayDetail(reqParams)
+          break
+        case 'changeDsp':
+          let index = emitParams.index;
+          let setglgRequest = buildFn.buildSetglg(this.model, this.trnName);
+          setglgRequest.setglg = {setgll:  emitParams.list};
+          this.setgllAccts(setglgRequest, index);
+          break
+          default:
+          return
+      }
+    }
+  },
+};

src/business/bctcan/model/index.js

+import Pts from '~/components/business/commonModel/Pts';
+import Pub from '~/components/business/commonModel/index.js';
+export default class Bctcan {
+	constructor() {
+		this.data = {
+			setmod: new Pub().data.Setmod,
+            mtabut: new Pub().data.Mtabut,
+            trnmod: new Pub().data.Trnmod,
+            liaall: new Pub().data.Liaall,
+            liaccv: new Pub().data.Liaccv,
+            docpan: new Pub().data.Docpan,
+						bcdgrp:{
+							rec:{
+								inr:"",
+								branchinr:"",
+								ownref:"",			//  Collection Number		.bcdgrp.rec.ownref
+								nam:"",					//  Name		.bcdgrp.rec.nam
+								rcvdat:"",			//  Docs Received on		.bcdgrp.rec.rcvdat
+								advdat:"",			//  Date of Advice of Documents Received		.bcdgrp.rec.advdat
+								matdat:"",			//  Maturity Date		.bcdgrp.rec.matdat
+								predat:"",			//  Maturity Date		.bcdgrp.rec.predat
+								doctypcod:"",		//  Payment Condition		.bcdgrp.rec.doctypcod
+								docsta:"",			//  Document Status		.bcdgrp.rec.docsta
+							},
+							cbs:{
+								max:{
+									cur:"",				//  Document Amount		.bcdgrp.cbs.max.cur
+									amt:"",				//  Document Amount		.bcdgrp.cbs.max.amt
+								},
+								opn1:{
+									cur:"",				//  Open Amount		.bcdgrp.cbs.opn1.cur
+									amt:"",				//  Open Amount		.bcdgrp.cbs.opn1.amt
+								},
+							},
+							dre:{
+								pts:new Pts().data,
+							},
+							rmi:{
+								pts:new Pts().data,
+							},
+							drr:{
+								pts:new Pts().data,
+							},
+						},
+						bctp0:{
+							recget:{
+								sdamod:{
+									seainf:"",		//  .bctp0.recget.sdamod.seainf
+									dadsnd:"",		//  Drag  Drop Sender		.bctp0.recget.sdamod.dadsnd
+								},
+							},
+							matp:{
+								mattxtlab:"",		//  Label for MATTXT		.bctp0.matp.mattxtlab
+							},
+						},
+						sndmsg:"",					//  Send message		.sndmsg
+						strinf:"",					//  Narrative		.strinf
+						pageId: ""					// 	ctx的key
+				}
+		
+	
+			}
+	}

src/business/bctcan/views/Addbcb.vue

+<template>
+  <div class="eibs-tab">
+    <el-collapse v-model="activeNames" @change="handleChange">
+
+      <!--el-collapse-item title="备查表" name="addbcb1">
+          <m-addbcb1 :model="model" :codes="codes" />
+      </el-collapse-item-->
+
+      <el-collapse-item title="附言" name="coninfp">
+        <m-coninfp :model="model" :codes="codes" />
+      </el-collapse-item>
+
+
+    </el-collapse>
+
+  </div>
+</template>
+
+<script>
+import Api from "~/service/Api";
+import commonProcess from "~/mixin/commonProcess";
+import Utils from "~/utils";
+import Event from "~/model/Litcan/Event";
+//import Addbcb1 from "~/views/Public/Addbcb1";
+import Coninfp from "~/views/Public/Coninfp";
+
+export default {
+  components: {
+
+    "m-coninfp": Coninfp,
+    //"m-addbcb1": Addbcb1,
+  },
+  inject: ["root"],
+  props: ["model", "codes"],
+  mixins: [commonProcess],
+  data() {
+    return {
+
+      activeNames: ["coninfp"],
+    };
+
+  },
+  methods: {
+    ...Event,
+    handleChange(val) {
+      console.log(val);
+    },
+  },
+  created: function () {},
+};
+</script>
+
+<style>
+</style>
\ No newline at end of file

src/business/bctcan/views/Canp.vue

+<template>
+  <div class="eibs">
+    <el-col :span="12" style="padding-right: 20px">
+      <c-col :span="24">
+        <el-form-item label="代收闭卷编号" prop="bcdgrp.rec.ownref">
+          <c-fullbox>
+            <c-input
+            disabled
+              v-model="model.bcdgrp.rec.ownref"
+              maxlength="16"
+              placeholder="请输入代收闭卷编号"
+            ></c-input>
+            <template slot="footer">
+              <c-button
+                size="small"
+                style="margin-left: 10px; padding: 0 10px"
+                type="primary"
+              >
+                <i class="el-icon-info"></i>
+              </c-button>
+            </template>
+          </c-fullbox>
+        </el-form-item>
+      </c-col>
+      <c-col :span="14">
+        <el-form-item label="代收币种及金额" prop="bcdgrp.cbs.max.cur">
+          <c-select
+          disabled
+            v-model="model.bcdgrp.cbs.max.cur"
+            style="width: 100%"
+            placeholder="请选择代收币种及金额"
+          >
+          </c-select>
+        </el-form-item>
+      </c-col>
+      <c-col :span="10">
+        <el-form-item label="" label-width="0" style="margin-left: 5px" prop="bcdgrp.cbs.max.amt">
+          <c-input
+          disabled
+            v-model="model.bcdgrp.cbs.max.amt"
+            placeholder="请输入代收币种及金额"
+          ></c-input>
+        </el-form-item>
+      </c-col>
+      <c-col :span="14">
+        <el-form-item label="代收币种及余额" prop="bcdgrp.cbs.opn1.cur">
+          <c-select
+          disabled
+            v-model="model.bcdgrp.cbs.opn1.cur"
+            style="width: 100%"
+            placeholder="请选择代收币种及余额"
+          >
+          </c-select>
+        </el-form-item>
+      </c-col>
+
+      <c-col :span="10">
+        <el-form-item label="" label-width="0" style="margin-left: 5px" prop="bcdgrp.cbs.opn1.amt">
+          <c-input
+          disabled
+            v-model="model.bcdgrp.cbs.opn1.amt"
+            placeholder="请输入代收币种及余额"
+          ></c-input>
+        </el-form-item>
+      </c-col>
+      <c-col :span="12">
+        <el-form-item label="收单日期" prop="bcdgrp.rec.rcvdat">
+          <c-date-picker
+          disabled
+            type="date"
+            v-model="model.bcdgrp.rec.rcvdat"
+            style="width: 100%"
+            placeholder="请选择收单日期"
+          ></c-date-picker>
+        </el-form-item>
+      </c-col>
+
+      <c-col :span="12">
+        <el-form-item label="通知日期" prop="bcdgrp.rec.advdat">
+          <c-date-picker
+          disabled
+            type="date"
+            v-model="model.bcdgrp.rec.advdat"
+            style="width: 100%"
+            placeholder="请选择"
+          ></c-date-picker>
+        </el-form-item>
+      </c-col>
+      <c-col :span="12">
+        <el-form-item label="单据到期日" prop="bcdgrp.rec.matdat">
+          <c-date-picker
+          disabled
+            type="date"
+            v-model="model.bcdgrp.rec.matdat"
+            style="width: 100%"
+            placeholder="请选择单据到期日"
+          ></c-date-picker>
+        </el-form-item>
+      </c-col>
+
+      <c-col :span="12">
+        <el-form-item label="托收日期" prop="bcdgrp.rec.predat">
+          <c-date-picker
+          disabled
+            type="date"
+            v-model="model.bcdgrp.rec.predat"
+            style="width: 100%"
+            placeholder="请选择"
+          ></c-date-picker>
+        </el-form-item>
+      </c-col>
+
+      <c-col :span="24">
+        <el-form-item label="支付条件" prop="bcdgrp.rec.doctypcod">
+          <c-select
+          disabled
+          :code="codes.doctypcod"
+            v-model="model.bcdgrp.rec.doctypcod"
+            style="width: 100%"
+            placeholder="请选择支付条件"
+          >
+          </c-select>
+        </el-form-item>
+      </c-col>
+      <c-col :span="24">
+        <el-form-item label="单据状态" prop="bcdgrp.rec.docsta">
+          <c-select
+          disabled
+          :code="codes.docstabot"
+            v-model="model.bcdgrp.rec.docsta"
+            style="width:100%"
+            placeholder="请输入单据状态"
+          ></c-select>
+        </el-form-item>
+      </c-col>
+      <c-col :span="24">
+        <el-form-item label="描述" prop="strinf">
+          <c-fullbox>
+            <c-input
+            disabled
+              :rows="6"
+              type="textarea"
+              v-model="model.strinf"
+              maxlength="50"
+              show-word-limit
+              placeholder="请输入描述"
+            ></c-input>
+            <template slot="footer">
+              <c-button 
+              disabled
+              size="small" type="primary">
+                <i class="el-icon-more"></i>
+              </c-button>
+            </template>
+          </c-fullbox>
+        </el-form-item>
+      </c-col>
+    </el-col>
+
+    <el-col :span="12" style="padding-left: 20px">
+      <c-col :span="24">
+        <el-form-item label="简略信息" prop="bcdgrp.rec.nam">
+          <c-input
+          disabled
+            v-model="model.bcdgrp.rec.nam"
+            maxlength="40"
+            placeholder="请输入简略信息"
+          ></c-input>
+        </el-form-item>
+      </c-col>
+      <c-col :span="24">
+        <el-form-item label="付款人参考号" prop="bcdgrp.dre.pts.ref">
+          <c-input
+          disabled
+            v-model="model.bcdgrp.dre.pts.ref"
+            maxlength="16"
+            placeholder="请输入付款人参考号"
+          ></c-input>
+        </el-form-item>
+      </c-col>
+      <c-col :span="24">
+        <el-form-item label="付款人名称" prop="bcdgrp.dre.pts.nam">
+          <c-input
+          disabled
+            v-model="model.bcdgrp.dre.pts.nam"
+            maxlength="40"
+            placeholder="请输入付款人名称"
+          ></c-input>
+        </el-form-item>
+      </c-col>
+      <c-col :span="24">
+        <el-form-item label="托收行参考号" prop="bcdgrp.rmi.pts.ref">
+          <c-input
+          disabled
+            v-model="model.bcdgrp.rmi.pts.ref"
+            maxlength="16"
+            placeholder="请输入托收行参考号"
+          ></c-input>
+        </el-form-item>
+      </c-col>
+
+      <c-col :span="24">
+        <el-form-item label="托收行名称" prop="bcdgrp.rmi.pts.nam">
+          <c-input
+          disabled
+            v-model="model.bcdgrp.rmi.pts.nam"
+            maxlength="40"
+            placeholder="请输入托收行名称"
+          ></c-input>
+        </el-form-item>
+      </c-col>
+      <c-col :span="24">
+        <el-form-item label="收款人参考号" prop="bcdgrp.drr.pts.ref">
+          <c-input
+          disabled
+            v-model="model.bcdgrp.drr.pts.ref"
+            maxlength="16"
+            placeholder="请输入收款人参考号"
+          ></c-input>
+        </el-form-item>
+      </c-col>
+
+      <c-col :span="24">
+        <el-form-item label="收款人名称" prop="bcdgrp.drr.pts.nam">
+          <c-input
+          disabled
+            v-model="model.bcdgrp.drr.pts.nam"
+            maxlength="40"
+            placeholder="请输入收款人名称"
+          ></c-input>
+        </el-form-item>
+      </c-col>
+    </el-col>
+  </div>
+</template>
+<script>
+import Api from "~/service/Api";
+import commonProcess from "~/mixin/commonProcess";
+import CodeTable from "~/config/CodeTable";
+import Event from "~/model/Bctcan/Event";
+
+export default {
+  inject: ["root"],
+  props: ["model", "codes"],
+  mixins: [commonProcess],
+  data() {
+    return {};
+  },
+  methods: { ...Event },
+  created: function () {},
+};
+</script>
+<style></style>

src/business/bctcan/views/Ovwp.vue

+<template>
+  <div class="eibs-tab">
+    <el-collapse v-model="activeNames" @change="handleChange">
+      <el-collapse-item title="取消" name="canp">
+        <m-canp :model="model" :codes="codes" />
+      </el-collapse-item>
+    </el-collapse>
+  </div>
+</template>
+
+<script>
+import Canp from "./Canp";
+import commonProcess from "~/mixin/commonProcess";
+import Event from "~/model/Litopn/Event";
+export default {
+  components: {
+    "m-canp": Canp,
+  },
+  inject: ["root"],
+  props: ["model", "codes"],
+  mixins: [commonProcess],
+  data() {
+    return {
+      flag: true,
+      activeNames: ["canp"],
+    }
+  },
+  methods: {
+    ...Event,
+    handleChange(val) {
+      console.log(val)
+    }
+  },
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file

src/business/bctcan/views/Shisuan.vue

+<template>
+  <div class="eibs-tab">
+                              
+       <c-col :span="24">
+        <div class="e-table-wrapper">
+            <el-table
+                :data="model.liaall.limmod.limpfp.clmcbe"
+                style="width: 100%"
+                >
+                <el-table-column
+                  prop="limtyp"
+                  label="限制类型"
+                  sortable
+                  width="150">
+                </el-table-column>
+                <el-table-column
+                  prop="cur"
+                  label="业务币种"
+                  sortable
+                  width="80">
+                </el-table-column>
+                <el-table-column
+                  prop="cbeamt"
+                  label="业务发生额"
+                  sortable
+                  width="90">
+                </el-table-column>
+                <el-table-column
+                  prop="reqtyp1"
+                  label="Req.Typel"
+                  sortable
+                  width="100">
+                </el-table-column>
+                <el-table-column
+                  prop="limcbeamt"
+                  label="额度发生额"
+                  sortable
+                  width="100">
+                </el-table-column>
+                <el-table-column
+                  prop="reqtyp2"
+                  label="Req.Type2"
+                  sortable
+                  width="100">
+                </el-table-column>
+                <el-table-column
+                  prop="ckcbeamt"
+                  label="敞口发生额"
+                  sortable
+                  width="100">
+                </el-table-column>
+                <el-table-column
+                  prop="credat"
+                  label="额度日期"
+                  sortable
+                  width="100">
+                </el-table-column>
+                <el-table-column
+                  prop="ptyextkey"
+                  label="客户编号"
+                  sortable
+                  width="100">
+                </el-table-column>
+                <el-table-column
+                  prop="ptynam"
+                  label="客户名称"
+                  sortable
+                  width="100">
+                </el-table-column>
+                <el-table-column
+                  prop="ownref"
+                  label="业务编号"
+                  sortable
+                  width="100">
+                </el-table-column>
+                <el-table-column
+                  prop="ccvbl"
+                  label="合同保证金比例"
+                  sortable
+                  width="100">
+                </el-table-column>
+                <el-table-column
+                  prop="limvar"
+                  label="额度类型"
+                  sortable
+                  width="100">
+                </el-table-column>
+                <el-table-column
+                  prop="dgzylimref"
+                  label="额度编号"
+                  sortable
+                  width="100">
+                </el-table-column>
+              </el-table>
+              <el-pagination
+                 layout="prev, pager, next"
+                 :total="pager.liaall_limmod_limpfp_clmcbe.total">
+              </el-pagination>
+       </div>
+       </c-col>
+                  
+       <c-col :span="24">
+        <div class="e-table-wrapper">
+            <el-table
+                :data="model.liaall.limmod.limpfp.clmcbb"
+                style="width: 100%"
+                >
+                <el-table-column
+                  prop="dgzylimvar"
+                  label="额度品种"
+                  sortable
+                  width="100">
+                </el-table-column>
+                <el-table-column
+                  prop="tzhamt"
+                  label="调整后业务余额"
+                  sortable
+                  width="100">
+                </el-table-column>
+                <el-table-column
+                  prop="tzhccv"
+                  label="调整后保证金比例"
+                  sortable
+                  width="100">
+                </el-table-column>
+                <el-table-column
+                  prop="tzhlimamt"
+                  label="调整后拟占用额度"
+                  sortable
+                  width="100">
+                </el-table-column>
+                <el-table-column
+                  prop="tzhlimck"
+                  label="调整后拟占用敞口"
+                  sortable
+                  width="100">
+                </el-table-column>
+                <el-table-column
+                  prop="tzqamt"
+                  label="调整前业务余额"
+                  sortable
+                  width="100">
+                </el-table-column>
+                <el-table-column
+                  prop="tzqccv"
+                  label="调整后保证金比例"
+                  sortable
+                  width="100">
+                </el-table-column>
+                <el-table-column
+                  prop="tzqlimamt"
+                  label="调整前已占用额度"
+                  sortable
+                  width="100">
+                </el-table-column>
+                <el-table-column
+                  prop="tzqlimck"
+                  label="调整前已占用敞口"
+                  sortable
+                  width="100">
+                </el-table-column>
+              </el-table>
+              <el-pagination
+                 layout="prev, pager, next"
+                 :total="pager.liaall_limmod_limpfp_clmcbb.total">
+              </el-pagination>
+       </div>
+       </c-col>
+                  
+       <c-col :span="24">
+        <div class="e-table-wrapper">
+            <el-table
+                :data="model.liaall.limmod.limpfp.clmpty"
+                style="width: 100%"
+                >
+                <el-table-column
+                  prop="limvar"
+                  label="额度类型"
+                  sortable
+                  width="100">
+                </el-table-column>
+                <el-table-column
+                  prop="dgzylimvar"
+                  label="额度品种"
+                  sortable
+                  width="100">
+                </el-table-column>
+                <el-table-column
+                  prop="dglimcur"
+                  label="额度币种"
+                  sortable
+                  width="100">
+                </el-table-column>
+                <el-table-column
+                  prop="dgsxlimamt"
+                  label="授信额度"
+                  sortable
+                  width="100">
+                </el-table-column>
+                <el-table-column
+                  prop="dgyylimamt"
+                  label="已用额度"
+                  sortable
+                  width="100">
+                </el-table-column>
+                <el-table-column
+                  prop="dgkylimamt"
+                  label="可用额度"
+                  sortable
+                  width="100">
+                </el-table-column>
+                <el-table-column
+                  prop="dgcklimamt"
+                  label="授信敞口"
+                  sortable
+                  width="100">
+                </el-table-column>
+                <el-table-column
+                  prop="dgyylimck"
+                  label="已用敞口"
+                  sortable
+                  width="100">
+                </el-table-column>
+                <el-table-column
+                  prop="dgkylimck"
+                  label="可用敞口"
+                  sortable
+                  width="100">
+                </el-table-column>
+                <el-table-column
+                  prop="dghfxh"
+                  label="恢复序号"
+                  sortable
+                  width="100">
+                </el-table-column>
+                <el-table-column
+                  prop="dgzylimref"
+                  label="额度编号"
+                  sortable
+                  width="100">
+                </el-table-column>
+                <el-table-column
+                  prop="dgzyliminfref"
+                  label="额度明细编号"
+                  sortable
+                  width="100">
+                </el-table-column>
+                <el-table-column
+                  prop="dgccvbl"
+                  label="保证金比例"
+                  sortable
+                  width="100">
+                </el-table-column>
+              </el-table>
+              <el-pagination
+                 layout="prev, pager, next"
+                 :total="pager.liaall_limmod_limpfp_clmpty.total">
+              </el-pagination>
+       </div>
+       </c-col>
+  </div>
+</template>
+<script>
+import Api from "~/service/Api"
+import commonProcess from "~/mixin/commonProcess";
+import CodeTable from "~/config/CodeTable"
+import Event from "~/model/Bptcan/Event"
+
+export default {
+    inject: ['root'],
+    props:["model","codes"],
+    mixins: [commonProcess],
+    data(){
+        return {
+
+        }
+    },
+    methods:{...Event},
+    created:function(){
+
+    }
+}
+</script>
+<style>
+
+</style>

src/business/bctcan/views/index.vue

+<template>
+  <div class="eContainer">
+  <c-page title="进口代收注销">
+
+      <el-form
+        :model="model"
+        :rules="rules"
+        ref="modelForm"
+        label-width="120px"
+        label-position="right"
+        size="small"
+        :validate-on-rule-change="false"
+      >
+        <c-tabs v-model="tabVal" ref="elment" type="card" @tab-click="tabClick">
+          <!--取消 -->
+<!--          <el-tab-pane label="取消" name="canp">-->
+<!--            <m-canp :model="model" :codes="codes" />-->
+<!--          </el-tab-pane>-->
+          <el-tab-pane label="业务信息" name="ovwp">
+            <c-content>
+              <m-ovwp :model="model" :codes="codes" />
+            </c-content>
+          </el-tab-pane>
+
+          <!--表外记账 -->
+<!--          <el-tab-pane label="表外记账" name="engp">-->
+<!--            <m-engp :model="model" :codes="codes" />-->
+<!--          </el-tab-pane>-->
+
+<!--          <el-tab-pane label="结算" name="setpan">-->
+<!--            <c-content>-->
+<!--              <m-setpan :model="model" :codes="codes" />-->
+<!--            </c-content>-->
+<!--          </el-tab-pane>-->
+
+<!--          &lt;!&ndash;账务 &ndash;&gt;-->
+<!--          <el-tab-pane label="账务" name="glepan">-->
+<!--            <m-glepan :model="model" :codes="codes" />-->
+<!--          </el-tab-pane>-->
+
+         <el-tab-pane label="表外记账" name="engp">
+            <c-content>
+              <!-- 表外记账 -->
+              <m-engp :model="model" :codes="codes" />
+            </c-content>
+          </el-tab-pane>
+
+          <!--PD000027 -->
+          <el-tab-pane label="费用/账务" name="setmod">
+            <c-content>
+              <m-setmod
+                  :model="model"
+                  :codes="codes"
+                  @changeSetmodModel="changeSetmodModel"
+              />
+            </c-content>
+          </el-tab-pane>
+
+          <!--PD000027 -->
+          <el-tab-pane label="会计分录" name="glepan">
+            <c-content>
+              <m-glentry :model="model" :codes="codes" />
+            </c-content>
+          </el-tab-pane>
+          <!--提示信息 -->
+          <el-tab-pane label="备查/附言" name="coninfp">
+            <c-content>
+              <m-coninfp :model="model" :codes="codes" />
+            </c-content>
+          </el-tab-pane>
+
+          <!--报文和面函 -->
+          <el-tab-pane label="报文/面函" name="docpan">
+            <c-content>
+              <m-docpan :model="model" :codes="codes" />
+            </c-content>
+          </el-tab-pane>
+
+          <!--附件 -->
+          <el-tab-pane label="附件信息" name="doctre">
+            <c-content>
+              <m-doctre :model="model" :codes="codes" />
+            </c-content>
+          </el-tab-pane>
+        </c-tabs>
+      </el-form>
+      <c-function-btn
+          :handleSubmit="handleSubmit"
+          :handleCheck="handleCheck"
+          :handleStash="handleStash"
+      >
+      </c-function-btn>
+
+  </c-page>
+  </div>
+</template>
+<script>
+import Api from "~/service/Api";
+import CodeTable from "~/config/CodeTable";
+import Bctcan from "../model";
+
+import formRules from '../model/check'
+// import Canp from "./Canp";
+import Engp from "~/components/business/engp/views";
+import Setmod from "~/components/business/setmod/views"
+import Glentry from "~/components/business/glentry/views";
+import Coninfp from "~/components/business/coninfp/views";
+import Docpan from "~/components/business/docpan/views";
+import Doctre from "~/views/Public/Doctre"
+
+import event from "../event";
+import operationFunc from "@/mixin/operationFunc";
+import Ovwp from "./Ovwp";
+
+export default {
+  name: "Bctcan",
+  components: {
+    // "m-canp": Canp,
+    "m-ovwp": Ovwp,
+    "m-engp": Engp,
+    "m-glentry": Glentry,
+    "m-setmod": Setmod,
+    "m-coninfp": Coninfp,
+    "m-docpan": Docpan,
+    "m-doctre": Doctre,
+  },
+  provide() {
+    return {
+      root: this,
+    };
+  },
+  mixins: [operationFunc, event], // 里面包含了Default、Check等的公共处理
+  data() {
+    return {
+      activeNames:["engp"],
+      tabVal: "ovwp",
+      trnName: "bctcan",
+      model: new Bctcan().data,
+      rules: formRules,
+      codes: { ...CodeTable },
+    };
+  },
+  methods: {
+    mimeTabClick(tab) {
+      this.tabClick(tab);
+      const name = tab.name;
+      let rulePath;
+     if (name === "doctre") {
+        rulePath = "trnmod.trndoc.doctre"
+      }
+     
+      if (!!rulePath) {
+        this.executeRule(rulePath).then((res) => {
+          if (res.respCode == SUCCESS) {
+            this.updateModel(res.data);
+          }
+        });
+      }
+    },
+  },
+  created: async function () {
+    console.log("进入bctcan交易");
+    let rtnmsg = await this.init({});
+    if (rtnmsg.respCode == SUCCESS) {
+      //TODO 处理数据逻辑
+      //更新数据
+      this.updateModel(rtnmsg.data);
+      if (this.isInDisplay) {
+        this.restoreDisplay();
+      }
+    } else {
+      this.$notify.error({ title: "错误", message: "服务请求失败！" });
+    }
+  },
+    mounted () {
+    this.init()
+    // this.queryHndtypCodeTableList(this.trnName)
+  },
+};
+</script>
+<style>
+</style>

src/business/infcld/event/index.js

+import Api from '~/service/Api';
+import { getTrnNameByInr } from "~/service/business/common";
+import moment from 'moment';
+
+export default {
+  methods: {
+    async handleSearch() {
+      let opndatfrom = this.model.infcon.opndatfrom;
+      if (!opndatfrom || opndatfrom == '') {
+        this.$notify.error({ title: '错误', message: '查询开始日期必输！' });
+        return;
+      }
+      let opndatto = this.model.infcon.opndatto;
+      if (!opndatto || opndatto == '') {
+        this.$notify.error({ title: '错误', message: '查询结束日期必输！' });
+        return;
+      }
+      let params = {
+        ...this.model.infcon,
+        pageIndex: this.pagination.pageIndex,
+        pageSize: this.pagination.pageSize,
+        opndatfrom:moment(opndatfrom).format('YYYY-MM-DD'),
+        opndatto:moment(opndatto).format('YYYY-MM-DD'),
+      };
+      let rtnmsg = await Api.post('/service/infcld/getList', params);
+      if (rtnmsg.respCode == SUCCESS) {
+        this.stmData.data = [];
+        this.stmData.data = rtnmsg.data.list;
+        // debugger
+        this.pagination.total = rtnmsg.data.total;
+      } else {
+        this.$notify.error({ title: '错误', message: '服务请求失败！' });
+      }
+    },
+
+    async handleReset() {
+      this.model.infcon.seaownref = '';
+      this.model.infcon.opndatfrom = new Date();
+      this.model.infcon.opndatto = new Date();
+      this.model.infcon.searef = '';
+      this.model.infcon.pty.extkey = '';
+      this.model.infcon.usr.extkey = '';
+      this.model.infcon.searol = '';
+      this.model.infcon.pty.nam = '';
+      this.model.infcon.seapty = '';
+      this.model.infcon.curtxt1 = '';
+      this.model.infcon.nam = '';
+      this.model.infcon.seaamtfr = '';
+      this.model.infcon.seaamtto = '';
+      this.model.infcon.seasta = '';
+      this.model.infcon.doctypcod = '';
+
+    },
+
+    // pageSize改变
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+      this.pagination.pageIndex = 1;
+      this.pagination.pageSize = val;
+      this.handleSearch();
+    },
+    // 页码改变
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+      this.pagination.pageIndex = val;
+      this.handleSearch();
+    },
+
+    // 详情
+    async details(row) {
+      const params = {
+        //根据xx字段 查询详情表的数据
+        inr:row.inr,
+        userId: window.sessionStorage.userId || 'ZL',
+        ownref: row.ownref,
+      };
+      const res = await Api.post('/service/infcld/getDetail', params);
+      if (res.respCode === SUCCESS) {
+        this.trnData.data = res.data;
+      }
+    },
+
+    toBotdav() {
+      // 点击开立，清空从待经办进来的时候带的行参数
+      localStorage.setItem('row_botdav', null)
+      localStorage.setItem('review_botdav',null)
+      this.$router.history.push('/business-new/bottdav');
+    },
+
+    // 关闭详情弹框
+    closeDetailsDialog(refId) {
+      this.$refs[refId].doClose();
+      console.log('close');
+    },
+
+    // 处理
+    async handler(row) {
+      this.initdialog = true;
+      this.currentHandleRow = row
+      const params = {
+        //根据xx字段 查询处理的数据
+        seaownref: row.seaownref,
+      };
+      const res = await Api.post('/service/infcld/dealWithByOwnref', params);
+      if (res.respCode === SUCCESS) {
+        if (res.data) {
+          this.handlerDataList = []
+          Object.keys(res.data).map((item) => {
+            this.handlerDataList.push({
+              label: item,
+              value: res.data[item]
+            })
+          })
+        }
+      }
+    },
+
+    handleClick (btn) {
+      if (btn.value === 'N') {
+        return
+      }
+      let filterRoute = this.btnRouteMap.filter((item) => {
+        return item.label === btn.label
+      })
+      this.$router.history.push({
+        path: filterRoute[0].route,
+        query: {
+          inr: this.currentHandleRow.inr
+        }
+      });
+    },
+    // 关闭处理弹框
+    closeHandlerDialog() {
+      this.initdialog = false;
+    },
+
+    /**
+     * 打开详情页面
+     * @param {string} inr
+     */
+    display(inr) {
+      getTrnNameByInr({ inr }).then((res) => {
+        if (res.respCode == SUCCESS) {
+          const trnName = res.data.toLowerCase();
+          let viewurl = "/#/display/" + trnName + "?trn=" + inr
+          window.open(viewurl, 'newwindow', 'height=1500,width=1200,top=100,left=100,toolbar=no,resizable=no,menubar=no,location=no, status=no');
+        }
+      });
+    },
+
+  },
+};

src/business/infcld/views/BusNavbar.vue

+<template>
+    <el-dialog
+      :visible.sync="initdialog"
+      :title="'交易列表'"
+      append-to-body
+      :before-close="beforeClose"
+      @opened="opened"
+    >
+      <div class="m-list-btns">
+        <div class="busnavbar">
+          <div class="busnavbar-items">
+            <c-button
+              style="margin-left: 7px"
+              size="medium"
+              type="primary"
+              class="medium_bcs"
+              v-for="(item, index) in navcode"
+              v-bind:key="index"
+              @click.native="onNarBtnClick(item.code, item.index)"
+              :title="item.title"
+              :disabled="item.isDis === 'N'"
+              >{{ item.label }}</c-button
+            >
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+  </template>
+  <script>
+  import Api from "~/service/Api";
+  import commonProcess from "~/mixin/commonProcess";
+  
+  import _ from "~/utils/Lodash"
+  
+  export default {
+    props: {
+      ownref: {
+        required: true,
+      },
+      trnCode: {
+        required: true,
+      },
+      model: {
+        required: true,
+      },
+      ownrefPath: {
+        required: false,
+        default: "didgrp",
+      },
+      tabIndex: {
+        required: false,
+        default: 1,
+      },
+      amt: {
+        required: false,
+        default: 0,
+      },
+      inr: {
+        required: false,
+        default: '',
+      },
+      opndat: {
+        required: false,
+        default: 0.000,
+      },
+    },
+    components: {},
+    mixins: [commonProcess], // 里面包含了Default、Check等的公共处理
+    data() {
+      return {
+        initdialog: false,
+        navcode: [
+          // {code:"",label:"",isDis:"",title:""},
+        ],
+      };
+    },
+    methods: {
+      //各入口按钮请求
+      async onNarBtnClick(code, i) {
+        this.model.cfgfil[`subtrn${i}`] = code;
+        let rtnmsg = await this.executeRule(`cfgfil.hotsub${i}`);
+        if (rtnmsg.respCode == SUCCESS) {
+          this.navcode = [];
+          this.$emit("onChoose", code.toLowerCase(), this.model.pageId);
+        } else {
+          this.$notify.error({ title: "错误", message: "服务请求失败！" });
+        }
+      },
+      getIndex(module) {
+        for (let i = 1; i <= 12; i++) {
+          var temp = this.model.cfgfil[`subtxt${i}`];
+          if (module == temp) {
+            return i;
+          }
+        }
+        return 1;
+      },
+      opened() {
+        this.tState = []
+        this.$emit("childmethods");
+      },
+      beforeClose() {
+        this.navcode = [];
+        this.initdialog = false;
+      },
+    },
+    mounted() {
+      this.trnName = this.trnCode;
+      this.$nextTick(function () {
+        this.$on("childmethods", async function () {
+          this.model.cldgrp.cbs.opn1.amt = this.amt;
+          this.model.cldgrp.rec.inr = this.inr;
+          this.model.cldgrp.rec.ownref = this.ownref;
+          this.model.cldgrp.rec.opndat = this.opndat;
+          let res = await this.executeRule(`cfgfil.hotreg${this.tabIndex}`);
+          if (res.respCode == SUCCESS) {
+            this.updateModel(res.data);
+          } else {
+            this.$notify.error({
+              title: "错误",
+              message: "服务请求失败！",
+            });
+          }
+  
+          this.navcode = [];
+          //请求按钮数据
+          let rulePath
+          if (this.ownrefPath.endsWith(".ownref")) {
+            _.set(this.model, this.ownrefPath, this.ownref);
+            rulePath = this.ownrefPath
+          } else {
+            this.model[this.ownrefPath].rec.ownref = this.ownref;
+            rulePath = this.ownrefPath + ".rec.ownref"
+          }
+          let rtnmsg = await this.executeRule(rulePath); //didgrp_rec_ownref
+          if (rtnmsg.respCode == SUCCESS) {
+            //重置数组
+            this.navcode = [];
+            this.updateModel(rtnmsg.data);
+            //this.model.cfgfil.btnstm = rtnmsg.data.cfgfil_btnstm.rows
+            //给inr赋值,后面弹窗里面的按钮请求会用到
+            //this.model.didgrp.rec.inr = rtnmsg.data.didgrp_rec_inr
+            const length = this.model.cfgfil.btnstm.rows.length;
+            let btnStr = this.model.cfgfil.btnstm.rows;
+            for (let i = 0; i < length; i++) {
+              let arr = btnStr[i].split("\t");
+              var index = this.getIndex(arr[1]);
+              let newList = {
+                code: arr[0],
+                label: arr[1],
+                isDis: arr[2],
+                title: arr[3],
+                index: index,
+              };
+              this.navcode.push(newList);
+            }
+            // 交易状态信息
+          const selbut = this.model.selbut ?? {}
+          const arr = Object.keys(selbut)
+                            .filter(key => key.startsWith("dsp"))
+                            .map(key => selbut[key] || "")
+                            .filter(s => s.trim()!== "")
+          this.tState = arr
+          } else {
+            this.navcode = [];
+            this.$notify.error({ title: "错误", message: "服务请求失败！" });
+          }
+        });
+      });
+    },
+  };
+  </script>
+  <style>
+  </style>
+  
\ No newline at end of file

src/business/infcld/views/index.vue

+<template>
+     <div class="eContainer">
+          <el-form :model="model" :rules="rules" ref="modelForm" label-width="120px" label-position="right" size="small"
+               :validate-on-rule-change="false">
+               <!--PD000006 -->
+               <c-content>
+                    <m-infsea v-show="!showPanel" :model="model" :codes="codes" ref="infsea" />
+               </c-content>
+
+               <c-tabs v-model="tabVal" v-show="showPanel" ref="elment" type="card" @tab-click="tabClick">
+                    
+               </c-tabs>
+          </el-form>
+     </div>
+</template>
+<script>
+import Api from "~/service/Api"
+import CodeTable from "~/config/CodeTable"
+import Infcld from "~/model/Infcld"
+import commonProcess from "~/mixin/commonProcess"
+import Check from "~/model/Infcld/Check"
+import Default from "~/model/Infcld/Default"
+import Pattern from "~/model/Infcld/Pattern"
+import Infsea from "./Infsea"
+
+
+export default {
+     name: "Infcld",
+     components: {
+          "m-infsea": Infsea,
+     },
+     provide() {
+          return {
+               root: this
+          }
+     },
+     mixins: [commonProcess],    // 里面包含了Default、Check等的公共处理
+     data() {
+          return {
+               tabVal: "infsea",
+               trnName: "infcld",
+               model: new Infcld().data,
+               checkRules: Check,
+               defaultRules: Default,
+               pattern: Pattern,
+               rules: null,
+               showPanel: false,
+               codes: {
+                    ...CodeTable
+               },
+          }
+     },
+     methods: {
+          tabClick() {
+          }
+     },
+     created: async function () {
+          console.log("进入infcld交易");
+          let rtnmsg = await this.init({})
+          if (rtnmsg.respCode == SUCCESS) {
+               //TODO 处理数据逻辑
+               this.updateModel(rtnmsg.data);
+
+          }
+          else {
+               this.$notify.error({ title: '错误', message: '服务请求失败！' });
+          }
+     }
+}
+</script>
+<style>
+</style>