PaymentApproval.vue

<template>
  <div class="app-container">
      <el-descriptions :column="5" >
        <el-descriptions-item :label="$t('付款单编号')">{{ form.paymentNo }}</el-descriptions-item>
        <el-descriptions-item :label="$t('供应商名称')">{{ form.supplierName }}</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('付款金额')">{{paymentMoney}}{{$t('人民币')}}</el-descriptions-item>
        <el-descriptions-item v-if="reason" :label="$t('申请理由')">{{reason}}</el-descriptions-item>
      </el-descriptions>
    <div class="btn">
      <el-button
        size="mini"
        type="primary"
        @click="$router.push('/financial/paymentDetail?id=' + paymentId)"
        >{{ $t('查看付款单')}}</el-button>
    </div>
  </div>
</template>

<script>
import {
  getPaymentApprove,
  getPaymentInfoByIds,
  getPaymentItem
} from "@/api/ecw/financial";


export default {
  props:{
      id: [String, Number]
  },
  data() {
    return {
      form: {},
      list:[],
      paymentId:0,
      paymentMoney:0,
      reason:''
    }
  },
  watch:{
      id(){
        this.getData()
      },
      form(){
        this.getListData()
      },
  },
  created() {
      if(this.id){
        this.getData()
      }
  },
  methods: {

   getData(){
     getPaymentApprove(this.id).then(res => {
         if(res.data.paymentId){
           this.paymentId = res.data.paymentId;
           this.reason = res.data.reason;
            this.getPayableInfo()
         }
     })

   },
   getPayableInfo(){
       getPaymentInfoByIds({ id: this.paymentId }).then(res => {
        this.form = res.data
      })
    },
    getListData(){
      getPaymentItem({ id: this.paymentId }).then(res => {
        this.list = [...res.data]
        const t = this.list.map(v => v.total).reduce((prev, curr) => {
          return parseFloat(prev) + parseFloat(curr);
        }, 0)
        this.paymentMoney = t
      })
    },

  }
}
</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;
    }
  }
</style>