CollectionApproval.vue

<template>
  <div class="app-container">
      <el-descriptions :column="5" >
        <el-descriptions-item :label="$t('收款单编号')">{{ form.receiptNo }}</el-descriptions-item>
        <el-descriptions-item :label="$t('客户')">{{ form.customerName }}</el-descriptions-item>
        <el-descriptions-item :label="$t('创建时间')">
          <template >
            <span>{{ parseTime(form.createTime, '{y}-{m}-{d}') }}</span>
          </template></el-descriptions-item>
        <el-descriptions-item :label="$t('业务员')">{{ form.salesmanName }}</el-descriptions-item>
        <el-descriptions-item :label="$t('期望收款金额')">
          <template>
            <div sytle="display:flex">
              <div v-for="itemAmount in collectionAmount" :key="itemAmount.currencyNameZh">{{ itemAmount.amount}}{{$i18n.locale=='zh_CN'?itemAmount.currencyNameZh:itemAmount.currencyNameEn}}</div>
            </div>
          </template>
        </el-descriptions-item>
        <el-descriptions-item v-if="reason" :label="$t('申请理由')">{{reason}}</el-descriptions-item>
      </el-descriptions>
      <el-card class="card">
        <div slot="header" class="card-title">{{ $t('应收明细') }}</div>
        <el-table :data="list" border>
          <el-table-column :label="$t('订单号')" align="center" prop="orderNo" />
          <el-table-column :label="$t('提单号')" align="center" prop="tidanNo" />
          <el-table-column :label="$t('唛头')" align="center" prop="marks" />
          <el-table-column :label="$t('品名')" align="center" prop="title">
            <template slot-scope="scope">
              <span v-if="scope.row.feeType!=5">{{ scope.row.titleZh?(scope.row.titleZh + "(" + scope.row.titleEn + ")"):'' }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('箱数')" align="center" prop="num" />
          <el-table-column :label="$t('体积/重量')" align="center" prop="weight">
            <template slot-scope="scope">
               <span v-if="scope.row.feeType!=5"> {{ scope.row.volume + "/" + scope.row.weight }}</span>
              </template>
            </el-table-column>
          <el-table-column :label="$t('收入类型')" align="center" prop="feeType">
            <template slot-scope="scope">
              <dict-tag
                :type="DICT_TYPE.FEE_TYPE"
                :value="scope.row.feeType"
              ></dict-tag>
            </template>
          </el-table-column>
          <el-table-column :label="$t('单价金额')" align="center" prop="unitPrice">
            <template slot-scope="scope">
              <span>{{ scope.row.unitPrice }}</span>
              {{getCurrencyLabel(scope.row.currencyId)}}
            </template>
          </el-table-column>
          <el-table-column :label="$t('总金额')" align="center" prop="totalAmount">
            <template slot-scope="scope">
              <span>{{ scope.row.totalAmount }}</span>
              {{getCurrencyLabel(scope.row.currencyId)}}
            </template>
          </el-table-column>
          <el-table-column :label="$t('优惠金额')" align="center">
            <template slot-scope="scope">
              {{ scope.row.discountTotal ? `${scope.row.discountTotal}(${scope.row.discountRemark})` : 0 }}
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    <div class="btn">
      <el-button
        size="mini"
        type="primary"
        @click="$router.push('/financial/receiptDetail?id=' + receiptId)"
        >{{ $t('查看收款单')}}</el-button>
    </div>
  </div>
</template>

<script>

import {
  getReceiptInfoByIds,
  getInvoicingItem,
  getReceiptAccountList,
  getReceiptApprove
} from "@/api/ecw/financial";
import { getCurrencyPage } from "@/api/ecw/currency";
import NP from 'number-precision'


export default {
  props:{
      id: [String, Number]
  },
  data() {
    return {
      form: {},
      collectionAmount: [],
      currencyList:[],
      list:[],
      receiptId:0,
      reason:''
    }
  },
  watch:{
      id(){
          this.getCurrencyData()
      },
      currencyList(){
        this.getData()
      },
      form(){
        this.getListData()
      },
      list(){
        this.getCollectionData()
      }
  },
  created() {
      if(this.id){
        this.getCurrencyData()
      }
  },
  methods: {
   getData(){
     console.log(this.id)
     getReceiptApprove(this.id).then(res => {
         if(res.data.receiptId){
           this.receiptId = res.data.receiptId
           this.reason = res.data.reason
            this.getReceiptInfo()
         }
     })

   },
    // 获取汇率
   getCurrencyData(){
     getCurrencyPage(this.params).then(res => {this.currencyList = res.data.list})
   },
   getReceiptInfo(){
       getReceiptInfoByIds({ id: this.receiptId }).then(res => {
        this.form = res.data
      })
    },
    getListData(){
      getInvoicingItem({ id: this.receiptId }).then(res => {
        this.list = [...res.data]
      })
    },
    getCollectionData(){
      getReceiptAccountList({ id: this.receiptId }).then(res => {
        var n
        // 收款总计
        var amountList =[]
        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)
            n = res.data.find(v => v.currencyId == item.id)
            n && (n.discountTotal = discountNaira)
          }
          var dollarList = res.data.filter(v => v.collectionCurrencyId == item.id)

          if(dollarList.length>0){
            var dollar = dollarList.reduce((total, currentValue) => NP.plus(total, currentValue.collectionAmount), 0).toFixed(2)
             amountList.push({currencyId:item.id,currencyNameEn:item.titleEn,currencyNameZh:item.titleZh,amount:dollar})
          }

        })
        this.$set(this,'collectionAmount',amountList)
      })
      },
      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 ''
      },
    }
}
</script>

<style scoped lang="scss">
  .btn{
    margin-top: 20px;
  }
  .app-container {
    ::v-deep .el-descriptions-item__label {
      font-size:16px;
      font-weight:600;
    }
    ::v-deep .el-descriptions-item__content {
      font-size:16px;
      font-weight:600;
    }
  }
  .card {
    margin-top: 20px;
  }
  .card-title {
    font-size: 18px;
    font-weight: bold;
  }
</style>