paymentExamine.vue

<template>
  <div class="app-container examine-wrap">
    <el-card>
      <div slot="header" class="card-title">{{ $t('审核请款单') }}</div>
        <el-descriptions :column="3" class="card" border>
          <el-descriptions-item :label="$t('供应商')">
            {{ detail.supplierName }}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('部门')">
            {{ findDepartmentName(detail.departmentId) }}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('业务员')">
            {{ detail.salesmanName }}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('申请日期')">
            {{ detail.applicationAt }}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('供应商银行账号')" style="width: 50%">
            {{ detail.supplierBankAccountName+'('+detail.supplierBankAccount+')' }} 
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions :column="3" class="card" border>
          <el-descriptions-item :label="$t('最后付款日期')">
            {{ detail.latestPayAt }}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('结算方式')">
            <!-- {{ detail.settlementType }} -->
            <dict-tag :type="DICT_TYPE.CUSTOMER_BALANCE" :value="detail.settlementType"></dict-tag>
          </el-descriptions-item>
        </el-descriptions>
    </el-card>
    <el-card class="card">
      <div slot="header" class="card-title">{{ $t('费用信息') }}</div>
      <el-table v-loading="loadings" :data="list" border :show-summary="!!list.length" :summary-method="getSummaries">
        <el-table-column :label="$t('自编号')" align="center" prop="payableNo" />
        <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="invoiceNumber">
          <!-- <template slot-scope="scope">
            <el-input v-model="scope.row.invoiceNumber"></el-input>
          </template> -->
        </el-table-column>
        <el-table-column :label="$t('应付金额')" align="center" prop="totalAmount" />
        <el-table-column :label="$t('币种')" align="center" prop="currencyId">
          <template slot-scope="scope">
			  {{getCurrencyLabel(scope.row.currencyId)}}
            <!-- <dict-tag :type="DICT_TYPE.BOX_SHIPPING_PRICE_UNIT" :value="scope.row.currencyId" /> -->
          </template>
        </el-table-column>
        <el-table-column :label="$t('汇率')" align="center" prop="exchangeRate">
          <!-- <template slot-scope="scope">
            <el-input v-model="scope.row.exchangeRate"></el-input>
          </template> -->
        </el-table-column>
        <el-table-column :label="$t('税率')+'%'" align="center" prop="taxRate" >
          <!-- <template slot-scope="scope">
            <el-input v-model="scope.row.taxRate"></el-input>
          </template> -->
        </el-table-column>
        <el-table-column :label="$t('价税合计')+'(RMB)'" align="center" prop="total" />
      </el-table>

      <el-descriptions :column="1" class="card" border>
        <el-descriptions-item :label="$t('账单号')">
          {{ detail.accountNumber }}
        </el-descriptions-item>
        <el-descriptions-item :label="$t('发票')">
          {{ detail.invoiceStatus == 0 ? $t('未开票') : $t('已开票') }}
        </el-descriptions-item>
        <el-descriptions-item :label="$t('审核备注')">
          <el-input type="textarea" :rows="2" v-model="notes">
          </el-input>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <div slot="footer" style="margin: 20px 0">
      <el-button type="primary" @click="examine('y')">{{ $t('审核通过') }}</el-button>
      <el-button type="danger" @click="examine('n')">{{ $t('审核驳回') }}</el-button>
    </div>
  </div>
</template>

<script>
import { getBankAccountPage } from "@/api/ecw/bankAccount";
import { listSimpleDepts } from "@/api/system/dept";
import { getCurrencyPage } from "@/api/ecw/currency";
import { getPaymentInfoByIds, getPaymentItem, paymentVerify } from "@/api/ecw/financial"
export default {
  name: "CreatPayment",
  components: {
    // CustomerSelector
  },
  data() {
    return {
      id: 0,
      loadings: false,
      detail: {},
      list: [],
      bankData: [],
      params: {
        page: 1,
        rows: 20,
      },
	  currencyList:[],
      deptData: [],
      deptArr: [],
      notes: ''
    };
  },
  created() {
	  getCurrencyPage(this.params).then(res => this.currencyList = res.data.list)
    let that = this;

    if (that.$route.query.id && that.$route.query.id !== '0') {
      this.id = this.$route.query.id;
      getPaymentInfoByIds({ id: this.id }).then(res => {
        this.detail = {
          ...res.data,
          latestPayAt: this.parseTime(res.data.latestPayAt, '{y}-{m}-{d}'),
          applicationAt: this.parseTime(res.data.applicationAt, '{y}-{m}-{d}'),
          supplierBankAccount: Number(res.data.supplierBankAccount),
          invoiceStatus: String(res.data.invoiceStatus),
        }
      })
      getPaymentItem({ id: this.id }).then(res => {
        this.list = [...res.data]
      })
    }
    getBankAccountPage(that.params).then((res) => (that.bankData = res.data.list));
    listSimpleDepts().then((res) => {
      res.data.forEach((item) => {
        if (item.parentId == 0) {
          that.deptArr.push(item);
        } else {
          that.deptData.push(item);
        }
      });

      that.deptData.forEach((value) => {
        var dept = that.deptArr.filter((itt) => itt.id == value.parentId);
        if (dept.length > 0) {
          value.name = dept[0].name + " | " + value.name;
        }
      });
    });
  },
  methods: {
	  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 ''
	  },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = new Array(columns.length).map(v => '');
      const index = sums.length - 1
      sums[index - 1] = this.$t('价税合计大写')
      const t = data.map(v => v.total).reduce((prev, curr) => {
        return prev + curr;
      }, 0)
      sums[index] = this.convertCurrency(t)
      return sums;
    },
    examine(status) {
      const params = {
        notes: this.notes,
        paymentId: this.detail.id,
        verifyStatus: status
      }
      paymentVerify(params).then(res => {
        this.$modal.msgSuccess(this.$t('操作成功'));
        this.$router.back();
      })
    },
    convertCurrency(money) {
      //汉字的数字
      var cnNums = new Array('零', this.$t('壹'), this.$t('贰'), this.$t('叁'), this.$t('肆'), this.$t('伍'), this.$t('陆'), this.$t('柒'), this.$t('捌'), '玖');
      //基本单位
      var cnIntRadice = new Array('', this.$t('拾'), this.$t('佰'), '仟');
      //对应整数部分扩展单位
      var cnIntUnits = new Array('', this.$t('万'), this.$t('亿'), '兆');
      //对应小数部分单位
      var cnDecUnits = new Array('角', this.$t('分'), this.$t('毫'), '厘');
      //整数金额时后面跟的字符
      var cnInteger = this.$t('整');
      //整型完以后的单位
      var cnIntLast = this.$t('元');
      //最大处理的数字
      var maxNum = 999999999999999.9999;
      //金额整数部分
      var integerNum;
      //金额小数部分
      var decimalNum;
      //输出的中文金额字符串
      var chineseStr = '';
      //分离金额后用的数组，预定义
      var parts;
      // 传入的参数为空情况
      if(money === '') {
        return '';
      }
      money = parseFloat(money)
      if(money >= maxNum){
        return ''
      }
      // 传入的参数为0情况
      if (money === 0) {
        chineseStr = cnNums[0] + cnIntLast + cnInteger;
        return chineseStr
      }
      // 转为字符串
      money = money.toString();
      // indexOf 检测某字符在字符串中首次出现的位置 返回索引值（从0 开始） -1 代表无
      if (money.indexOf('.') == -1) {
        integerNum = money;
        decimalNum = ''
      }else{
        parts = money.split('.');
        integerNum = parts[0];
        decimalNum = parts[1].substr(0,4);
      }
      //转换整数部分
      if(parseInt(integerNum,10) > 0){
        let zeroCount  = 0;
        let IntLen = integerNum.length
        for(let i = 0; i < IntLen; i++){
          let n = integerNum.substr(i,1);
          let p = IntLen - i - 1;
          let q = p / 4;
          let m = p % 4;
          if( n == '0'){
            zeroCount ++ ;
          }else{
            if(zeroCount > 0){
                chineseStr += cnNums[0]
            }
            zeroCount = 0;
            chineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
          }
          if(m == 0 && zeroCount < 4){
            chineseStr += cnIntUnits[q];
          }
        }
        // 最后+ 元
        chineseStr += cnIntLast;
      }
      // 转换小数部分
      if(decimalNum != ''){
        let decLen = decimalNum.length;
        for(let i = 0; i <decLen; i++){
          let n = decimalNum.substr(i,1);
          if(n != '0'){
            chineseStr += cnNums[Number(n)] + cnDecUnits[i]
          }
        }
      }
      if(chineseStr == ''){
        chineseStr += cnNums[0] + cnIntLast + cnInteger;
      }else if(decimalNum == ''){
        chineseStr += cnInteger;
      }
      return chineseStr
    },
    findDepartmentName(val) {
      return this.deptData.find(v => v.id == val) ? this.deptData.find(v => v.id == val).name : ''
    },
    findBank(val) {
      const t = this.bankData.find(v => v.id == val)
      return t ? t.baAccountName + '(' + t.baAccountNum + ')' : ''
    }
  },
};
</script>

<style lang="scss" scoped>
.examine-wrap {
  ::v-deep .is-bordered-label {
    width: 200px;
  }
}
.card {
  margin-top: 20px;
}
.dialog-footer {
  padding: 40px;
}
.card-title {
  font-size: 18px;
  font-weight: bold;
}
</style>