bankDetail.vue

<template>
  <div class="app-container">
    <el-card>
      <div slot="header" class="card-title">{{ $t('银行实收明细详情') }}</div>
          <el-form ref="addForm" :data="addForm" label-width="250px">
            <el-form-item :label="$t('收款单号')">{{ form.receiptNo }}</el-form-item>
            <el-form-item :label="$t('剩余应收金额')">
              <template v-if="surplusData.length==0"> 0</template>
              <div v-if="surplusData.length>0">
                <div v-for="(amount, currency) in surplusData" :key="currency">
                   <span v-if="amount"> {{amount}}{{getCurrencyLabel(currency)}}</span>
                </div>
              </div>
            </el-form-item>
            <el-form-item :label="$t('收款账户')" prop="accountNo">
              <span>{{ addForm.accountNo}}{{'('+addForm.accountName+')' }}</span>
            </el-form-item>
            <el-form-item :label="$t('实收日期')" prop="amountDate">
              <span>{{ addForm.amountDate }}</span>
            </el-form-item>
            <div style="display: flex;">
              <el-form-item :label="$t('实收')" prop="amount">
                <span>{{ addForm.amount }}</span>
              </el-form-item>
              <el-form-item label-width="0px" prop="currencyId">
                <span>（{{getCurrencyLabel(addForm.currencyId)}}）</span>
              </el-form-item>
            </div>
            <el-form-item
              v-if="showCurrencyId != addForm.currencyId"
              prop="rate"
            >
              <template slot="label">
              <span :title="$t('实收币种与核销基准币种一样时，无需填写汇率，不一样需要填写汇率')">{{ $t('兑核销基准币种汇率') }}（{{getCurrencyLabel(showCurrencyId)}}）</span>
              </template>
              <span>{{ addForm.rate}}</span>
            </el-form-item>
            <el-form-item v-if="showCurrencyId != addForm.currencyId" >
              <template slot="label">
                {{ $t('兑核销基准币种金额') }}（{{getCurrencyLabel(showCurrencyId)}}）
              </template>
              <span>{{ addForm.writeOffAmount?parseFloat(addForm.writeOffAmount).toFixed(2):'' }}</span>
            </el-form-item>
            <el-form-item :label="$t('水单附件')" prop="attr">
              <div>
                <div v-for="(v, i) in addForm.attr" :key="i"><el-link :href="v.url" type="primary" target="_blank">{{ v.name }}</el-link></div>
              </div>
            </el-form-item>
            <el-form-item :label="$t('水单号')" prop="billNo">
              <span>{{ addForm.billNo }}</span>
            </el-form-item>
          </el-form>
    </el-card>
    <div slot="header" class="bpm-title">{{ $t('审核流程') }}</div>
     <work-flow  xmlkey="merge_order" v-model="selectedUsers"></work-flow>

     <div slot="footer" style="margin: 20px 0">
       <el-button type="primary" @click="submitForm(0)">{{$t('提交审核')}}</el-button>
       <el-button type="primary"  @click="$store.dispatch('tagsView/delCurrentView')">{{ $t('关闭') }}</el-button>
     </div>
  </div>
</template>

<script>
  import { getReceivableItem ,getInvoicingItem,getReceiptAccountList,getReceiptInfoByIds,financeReceiptItemWriteOff} from "@/api/ecw/financial";
  import { getCurrencyPage } from "@/api/ecw/currency";
  import WorkFlow from '@/components/WorkFlow/'
  import NP from 'number-precision'

  export default {
    components: {
      WorkFlow
    },
    data() {
      return {
        addForm:{},
        id:0,
        detailed:[],
         currencyList: [],
        surplusData:[],
        receiptAccountList:[],
        selectedUsers:[],
        list:[],
        params: {
          page: 1,
          rows: 20,
        },
        bankId:0,
        form:{}
      }
    },
    async created() {
        if (this.$route.query.id) {
          this.id = this.$route.query.id;
        }
        if (this.$route.query.bankId) {
          this.bankId = this.$route.query.bankId;
        }
        await getInvoicingItem({ id: this.id }).then(res => {
          this.list = [...res.data]
        })
        await getReceiptAccountList({ id: this.id }).then(res => {
            this.receiptAccountList = [...res.data]
          })
        await getCurrencyPage(this.params).then(res => this.currencyList = res.data.list)
        await this.getList()
        await getReceiptInfoByIds({ id: this.id }).then(res => {
          this.form = res.data
          })
    },
    methods:{
      getList() {
        getReceivableItem({ id: this.id }).then(res => {
          this.detailed = res.data.map(v => ({
            ...v,
            amountDate: this.parseTime(v.amountDate, '{y}-{m}-{d}'),
            rate:parseFloat(v.rate).toFixed(2),
            attr: v.attr ? v.attr.split(',').map(t => ({ name: t.slice(t.lastIndexOf('/') + 1), url: t })) : []
          }))
          console.log(this.detailed)
          this.addForm = this.detailed.find((itt) => itt.id == this.bankId);
          console.log(this.addForm)
          this.handleAddReceiptItem()
        })
      },
      getCurrencyLabel(id){
        var label = this.currencyList.filter(item=>item.id == id)
        if(label.length>0) return this.$i18n.locale=='zh_CN'?label[0].titleZh:label[0].titleEn
        return ''
      },
      submitForm(){
        this.$modal
          .confirm(this.$t('您确认要提交审核吗'+'?'))
          .then(() => {
            financeReceiptItemWriteOff({receiptId:this.id,receiptNo:this.form.receiptNo,receiptItemId:this.bankId}).then(res=>{
              this.$message.success(this.$t("提交成功"));
              this.$store.dispatch('tagsView/delCurrentView')
            });
          })
          .catch(() => {});
      },
      handleAddReceiptItem() {
        this.surplusData = []

        // 已收
        let recepted = []
        this.detailed.forEach(item => {

            if(!recepted[item.currencyId]){
              recepted[item.currencyId] = item.amount
            }else recepted[item.currencyId] = NP.plus(recepted[item.currencyId], item.amount)
        })
        console.log('rece',recepted)

        // 应收
        let collom = []
        // 从期望收费金额中提取应收币种和金额

       this.currencyList.forEach((item,index)=>{
          var nairaListByList = this.list.filter(v => v.currencyId === item.id)
          if(nairaListByList.length>0){
            var discountNaira = nairaListByList.reduce((total, currentValue) => NP.plus(total, currentValue.discountTotal || 0), 0)
          }
          var dollarList = this.receiptAccountList.filter(v => v.collectionCurrencyId == item.id)
          if(dollarList.length>0){
            var dollar = dollarList.reduce((total, currentValue) => NP.plus(total, currentValue.collectionAmount), 0).toFixed(2)
            if(dollar){
              collom[item.id] = dollar
            }else{
              collom.push(0)
            }
          }
        })
        console.log('collom',collom)
          recepted.forEach((amount,currency)=>{
            if(amount){
              if(collom[currency]){
                if((collom[currency]-amount)!=0) this.surplusData[currency] = +parseFloat((collom[currency]-amount).toPrecision(12))
              }else{
                this.surplusData[currency] = -amount
              }
            }

          })
          collom.forEach((amount,currency)=>{
            if(amount){
              if(!this.surplusData[currency]){
                if(recepted[currency]){
                 if((amount-recepted[currency])!=0)  this.surplusData[currency] = +parseFloat((amount-recepted[currency]).toPrecision(12))
                }else{
                this.surplusData[currency] = amount
              }

              }
            }
          })
      },
    },
    computed: {
      showCurrencyId() {
        let fieldList = [];
        let groupList=[];
        this.list.map((element)=>{
          if(fieldList.indexOf(element['currencyId'])===-1){
            fieldList.push(element['currencyId'])
          }
        })
        for(let i=0;i<fieldList.length;i++){
          let arr = this.list.filter((element)=>{
            return element['currencyId']===fieldList[i];
          })
          groupList.push({
            currencyId:arr[0].currencyId,
            list:arr
          })
        }
        if (groupList.length === 1) return groupList[0].currencyId
        else return 1
      },
    }
  }
</script>

<style>
  .card {
    margin-top: 20px;
  }
  .dialog-footer {
    text-align: left;
  }
  .card-title {
    font-size: 18px;
    font-weight: bold;
  }
  .bpm-title{
    font-size: 20px;
    font-weight: bold;
    color:#666;
    margin:20px 0;
  }
</style>