index.vue

<template>
  <c-page title="汇出汇款">
    <div class="eContainer">
      <el-form :model="model" ref="modelForm" :rules="rules" label-position="left" label-width="150px" size="small">
        <el-tabs v-model="activeName" type="card" @tab-click="onTabClick">

          <!-- 概况 -->
          <el-tab-pane label="概况" name="basic">
            <m-basic
              v-bind:model="model"
              v-bind:codes="codes" />
          </el-tab-pane>

          <!-- 报文 -->
          <el-tab-pane v-if="baowenType === 'Mt103'" label="报文" name="mt103">
            <m-mt103
              v-bind:model="model"
              v-bind:codes="codes" />
          </el-tab-pane>
          <el-tab-pane v-else-if="baowenType === 'Fmt100'" label="报文" name="fmt100">
            <m-fmt100
              v-bind:model="model"
              v-bind:codes="codes" />
          </el-tab-pane>
          <el-tab-pane v-else-if="baowenType === 'Cmt100'" label="报文" name="cmt100">
            <m-cmt100
              v-bind:model="model"
              v-bind:codes="codes" />
          </el-tab-pane>
           <template v-else-if="baowenType === '103202'">
            <el-tab-pane label="报文信息(103)" name="mt103">
              <m-mt103
                v-bind:model="model"
                v-bind:codes="codes" />
            </el-tab-pane>
            <el-tab-pane label="报文信息(202)" name="mt202">
              <m-mt202
                v-bind:model="model"
                v-bind:codes="codes" />
            </el-tab-pane>
          </template>

          <!-- 费用 -->
          <el-tab-pane label="费用" name="fee">
            <m-fee
              v-bind:model="model"
              v-bind:codes="codes" />
          </el-tab-pane>

          <!-- 会计分录 -->
          <el-tab-pane label="会计分录" name="gle">
            <m-glelst v-bind:model="model" />
          </el-tab-pane>

          <!-- 申报信息 -->
          <el-tab-pane label="申报信息" name="report">
            <m-report
              v-bind:model="model"
              v-bind:codes="codes"/>
          </el-tab-pane>

          <!-- 境外汇款申请书 -->
          <el-tab-pane v-if="model.bopmod.szflg === '1'" label="境外汇款申请书" name="dbb">
            <m-dbb
              v-bind:model="model"
              v-bind:codes="codes"/>
          </el-tab-pane>

          <!-- 境内汇款申请书 -->
          <el-tab-pane v-if="model.bopmod.szflg === '2'" label="境内汇款申请书" name="dbe">
            <m-dbe
              v-bind:model="model"
              v-bind:codes="codes"/>
          </el-tab-pane>

          <!-- 报送 -->
          <el-tab-pane v-if="model.rmbmod.rmbflg === '1'" label="报送信息" name="baosong">
            <m-baosong
              v-bind:model="model"
              v-bind:codes="codes"/>
          </el-tab-pane>

          <!-- 结汇申报 -->
          <el-tab-pane v-if="model.jspmod.jshtyp === '1'" label="结汇申报" name="dbj">
            <m-dbj
              v-bind:model="model"
              v-bind:codes="codes"/>
          </el-tab-pane>

          <!-- 购汇申报 -->
          <el-tab-pane v-if="model.jspmod.jshtyp === '2'" label="购汇申报" name="dbw">
            <m-dbw
              v-bind:model="model"
              v-bind:codes="codes"/>
          </el-tab-pane>

          <!-- 面函 -->
          <el-tab-pane label="面函" name="doc">
            <m-doc v-bind:model="model"/>
          </el-tab-pane>
        </el-tabs>
      </el-form>
      <el-col class="eContainer-func">
        <c-button
          v-if="activeName === 'basic' || activeName === 'fee' || activeName === 'gle' || activeName === 'doc'"
          type="primary"
          size="small"
          @click="submitForm('modelForm')"
        >提交</c-button>
        <c-button v-if="activeName !== 'baosong'" type="primary" size="small" @click="onChk">检核</c-button>
        <c-button v-if="activeName !== 'baosong'" type="primary" size="small" @click="onPed">暂存</c-button>
        <c-button v-if="activeName !== 'baosong'" type="primary" size="small" @click="onRtn">退出</c-button>
      </el-col>
    </div>
  </c-page>
</template>

<script>
import Basic from "./Basic"
import Report from "./Report"
import Glelst from "../../Public/Glelst"
import Doc from "../../Public/Doc"
import Fee from "../../Public/Fee"
import BaoSong from "./BaoSong"
import Dbb from "./Dbb"
import Dbe from "./Dbe"
import Dbj from "./Dbj"
import Dbw from "./Dbw"
import Mt103 from "./Mt103"
import Mt202 from "./Mt202"
import Fmt100 from "./Fmt100"
import Cmt100 from "./Cmt100"

import Cptopn,{descriptor,codes} from "~/model/Cptopn"

import Api from "~/service/Api"
import Utils from "~/utils"

const SWFTYP_MAP = {
  '103': 'Mt103',
  '103202': '103202',
  'F01': 'Mt103',
  'F00': 'Fmt100',
  'CM0': 'Cmt100',
  'C00': 'Cmt100',
  'C01': 'Cmt100',
}
export default {
  components:{
    "m-basic": Basic,
    "m-report": Report,
    "m-glelst": Glelst,
    "m-doc": Doc,
    "m-fee": Fee,
    "m-dbb": Dbb,
    "m-dbe": Dbe,
    "m-dbj": Dbj,
    "m-dbw": Dbw,
    "m-baosong": BaoSong,
    "m-mt103": Mt103,
    "m-mt202": Mt202,
    'm-fmt100': Fmt100,
    'm-cmt100': Cmt100
  },
  computed: {

  },
  data: function () {
    return {
      activeName: 'basic',
      model:new Cptopn().data,
      codes,
      rules:descriptor 
    }
  },
  computed: {
    baowenType: function () {
      if (this.model.cpdgrp.rec.swftyp) {
        let swftyp = this.model.cpdgrp.rec.swftyp
        return SWFTYP_MAP[swftyp]
      } else {
        return ''
      }
    }
  },
  methods: {
    async onTabClick () {
      console.log('tab change')
      // console.log(model)
      this.formBlur = true  //已触发表单提交处理
      const rtnmsg = await Api.post('cptopn/setmod_ast', { data: Utils.flatObject(this.model) })
      if (rtnmsg.code == SUCCESS) {
        // Utils.copyValueFromVO(this.model,rtnmsg.data)
        //费用明细
        this.model.setmod.setfeg.fegmod.feslst = rtnmsg.data.setmod_setfeg_fegmod_feslst
        //账务明细
        this.model.setmod.setglg.glgmod.glslst = rtnmsg.data.setmod_setglg_glgmod_glslst
        //会计分录
        this.model.setmod.glemod.glelst = rtnmsg.data.setmod_glemod_glelst
      }
      else {
        this.$notify.error({title: '错误',message: '服务请求失败！'})
      }
      //面函
      const rtnmsgdoc = await Api.post('cptopn/trndoc_reldoc', { data: Utils.flatObject(this.model) })
      if (rtnmsgdoc.code == SUCCESS) {
        // alert("doc:"+rtnmsgdoc.data.trnmod_trndoc_docmod_doclst[0].id)
        // Utils.copyValueFromVO(this.model.trnmod.trndoc.docmod.doclst,rtnmsgdoc.data.trnmod_trndoc_docmod_doclst)
        this.model.trnmod.trndoc.docmod.doclst=rtnmsgdoc.data.trnmod_trndoc_docmod_doclst
      }
      else {
        this.$notify.error({title: '错误',message: '服务请求失败！'})
      }

    },
    submitForm (formName) {
      console.log(this.model.cpdgrp.rec.orcacc)
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert('submit!');
          this.onSav();
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    async onSav () {
      console.log('提交')
      const rtnmsgdoc = await Api.post('cptopn/sav', { data: Utils.flatObject(this.model) })
      if (rtnmsgdoc.code == SUCCESS) {
        // this.model.trnmod.trndoc.docmod.doclst=rtnmsgdoc.data.trnmod_trndoc_docmod_doclst
        this.$notify.info('提交成功！')
        this.$router.push('office')
      }
      else {
        this.$notify.error({title: '错误',message: '服务请求失败！'})
      }
    },
    async onChk () {
      console.log('检核')
      const rtnmsgdoc = await Api.post('cptopn/chk', { data: Utils.flatObject(this.model) })
      if (rtnmsgdoc.code == SUCCESS) {
        // this.model.trnmod.trndoc.docmod.doclst=rtnmsgdoc.data.trnmod_trndoc_docmod_doclst
      }
      else {
        this.$notify.error({title: '错误',message: '服务请求失败！'})
      }
    },
    async onPed () {
      console.log('暂存')
      const rtnmsgdoc = await Api.post('cptopn/ped', { data: Utils.flatObject(this.model) })
      if (rtnmsgdoc.code == SUCCESS) {
        // this.model.trnmod.trndoc.docmod.doclst=rtnmsgdoc.data.trnmod_trndoc_docmod_doclst
      }
      else {
        this.$notify.error({title: '错误',message: '服务请求失败！'})
      }
    },
    async onRtn () {
      console.log('退出')
      const rtnmsgdoc = await Api.post('cptopn/rtn', {  })
      if (rtnmsgdoc.code == SUCCESS) {
        // this.model.trnmod.trndoc.docmod.doclst=rtnmsgdoc.data.trnmod_trndoc_docmod_doclst
      }
      else {
        this.$notify.error({title: '错误',message: '服务请求失败！'})
      }
    },
    tabClick(){

    },
  }
}
</script>

<style>
.eContainer {
  margin: 10px;
}
.eContainer-func {
  text-align: center;
  margin-top: 20px;
}
.m-inputbtn {
	position: relative
}
.m-inputbtn-input {
	padding-right: 64px;
	display: inline-block;
}
.m-inputbtn-btn {
	position: absolute;
	right: 0;
}
.m-cur-select {
  padding-right: 20px;
}
</style>