printPaymentVoucher.vue

<template>
  <div class="app-container" >
      <div id="print" style="font-size: 18px;">
        <div style="text-align: center;font-weight: bold;font-size: 20px;">{{ $t('付款单') }}</div>
        <div style="margin-top: 20px;">
          <div style="display: flex;width: 80%;align-items: center;margin-bottom: 10px;">
            <div style="flex:1"><div style="width: 120px;text-align: right;display:inline-block;">{{ $t('付款单号') }}：</div><span>{{ form.paymentNo || '-' }}</span></div>
            <div style="flex:1"><div style="width: 120px;text-align: right;display:inline-block;">{{ $t('最后付款日') }}：</div> <span>{{ form.latestPayAt || '-' }}</span></div>
          </div>
          <div style="display: flex;width: 80%;align-items: center;margin-bottom: 10px;">
            <div style="flex:1"><div style="width: 120px;text-align: right;display:inline-block;">{{ $t('申请日期') }}：</div> <span>{{ form.applicationAt || '-' }}</span></div>
            <div style="flex:1"><div style="width: 120px;text-align: right;display:inline-block;">{{ $t('结算方式') }}：</div><span>             <dict-tag
                :type="DICT_TYPE.CUSTOMER_BALANCE"
                v-model="form.settlementType"
              /></span></div>
          </div>
          <div style="display: flex;width: 80%;align-items: center;margin-bottom: 10px;">
            <div style="flex:1"><div style="width: 120px;text-align: right;display:inline-block;">{{ $t('付款公司') }}：</div><span>{{ form.supplierName || '-' }}</span></div>
            <div style="flex:1"><div style="width: 120px;text-align: right;display:inline-block;">{{ $t('银行户名') }}：</div><span>{{ form.supplierBankAccountName || '-' }}</span></div>
          </div>
          <div style="display: flex;width: 80%;align-items: center;margin-bottom: 10px;">
            <div style="flex:1"><div style="width: 120px;text-align: right;display:inline-block;">{{ $t('银行名称') }}：</div><span>{{ form.supplierBank|| '-' }}</span></div>
            <div style="flex:1"><div style="width: 120px;text-align: right;display:inline-block;">{{ $t('银行账号') }}：</div><span>{{ form.supplierBankAccount || '-' }}</span></div>
          </div>
          <!-- <div style="display: flex;width: 80%;align-items: center;margin-bottom: 10px;">
            <div style="flex:1"><div style="width: 120px;text-align: right;">{{ $t('水单号：') }}</div><span>{{form?form.accountBank:'无'}}</span></div>
            <div style="flex:1"><div style="width: 120px;text-align: right;">{{ $t('手续费：') }}</div><span>{{form?form.accountBank:'无'}}</span></div>
          </div> -->
          <div style="display: flex;width: 80%;align-items: center;">
            <div style="flex:1"><div style="width: 120px;text-align: right;display:inline-block;">{{ $t('备注') }}：</div><span>{{ form.notes || '-' }}</span></div>
          </div>
      </div>
      <table border="1" style="margin-top: 20px;width: 100%;text-align: center;border-collapse: collapse;line-height: 2 ">
          <tr>
            <th style="width: 6%;">{{ $t('序号') }}</th>
            <th style="width: 11%;">{{ $t('自编号') }}</th>
            <th style="width: 15%;">{{ $t('费用类型') }}</th>
            <th style="width: 10%;">{{ $t('币种') }}</th>
            <th style="width: 10%;">{{ $t('汇率') }}</th>
             <th style="width:10%;">{{ $t('税率') }}</th>
            <th style="width: 15%;">{{ $t('发票号') }}</th>
            <th style="width: 10%;">{{ $t('应付金额') }}</th>
            <th style="width: 10%;">{{ $t('申请金额') }}</th>
          </tr>
          <tr v-for="(item, index) in list" :key="index">
            <td>{{ index + 1 }}</td>
            <td>{{ item.payableNo }}</td>
            <td>
              <dict-tag
                :type="DICT_TYPE.FEE_TYPE"
                :value="item.feeType"
              ></dict-tag>
            </td>
            <td>{{getCurrencyLabel(item.currencyId)}}
              <!-- <dict-tag :type="DICT_TYPE.BOX_SHIPPING_PRICE_UNIT" :value="item.currencyId" /> -->
            </td>
            <td>{{ item.exchangeRate }}</td>
            <td>{{ item.taxRate }}</td>
            <td>{{ item.invoiceNumber }}</td>
            <td>{{ item.totalAmount }}</td>
            <td>{{ item.total }}</td>
          </tr>
          <tr>
            <td colspan="2">{{ $t('合计(大写)') }}</td>
            <td colspan="2">{{ convertCurrency(totalMoney()) }}</td>
            <td colspan="2">{{ $t('合计付款') }}</td>
            <td>{{ totalMoney() }}</td>
          </tr>
        </table>
        <div style="margin-top: 20px;">
          <div style="display: flex;width: 100%;align-items: center;">
            <div style="flex:1"><span style="width: 120px;">{{ $t('主管') }}：</span></div>
            <div style="flex:1"><span style="width: 120px;">{{ $t('会计') }}：</span></div>
            <div style="flex:1"><span style="width: 120px;">{{ $t('出纳') }}：</span></div>
            <div style="flex:1"><span style="width: 120px;">{{ $t('经手人') }}：</span></div>
          </div>
        </div>
      </div>
      <div slot="footer" class="card">
        <el-button type="primary" @click="print">{{ $t('确定打印') }}</el-button>
      </div>
  </div>
</template>

<script>
  import { userList } from "@/api/system/user"
  import {DICT_TYPE} from  '@/utils/dict'
  import CustomerSelector from '@/components/CustomerSelector'
  import { getBankAccountPage } from "@/api/ecw/bankAccount";
  import { listSimpleDepts } from "@/api/system/dept"
  // import { getReceipt} from "@/api/ecw/receipt";
  import { getPaymentInfoByIds, getPaymentItem } from "@/api/ecw/financial"
  import { getCurrencyPage } from "@/api/ecw/currency";
  import lodop from '@/utils/lodop'

  export default {
    name: "PrintVoucher",
  components: {
     CustomerSelector
  },
    data() {
      return {
        loadings: false,
        form:{},
        title:this.$t('收款单'),
         creatorData:[],
         list:[],
         fileList:[],
         bankData:[],
         params:{
           page:1,
           rows:20,
         },
        //  deptData:[],
        //  deptArr:[],
         id:0,
		  currencyList:[]
      }
    },
    created() {
      let that = this
      if(that.$route.query.id){
        that.id = that.$route.query.id
        that.getCollectionData()
      }
	  getCurrencyPage(this.params).then(res => this.currencyList = res.data.list)
      userList('salesman').then(res =>that.creatorData = 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 ''
		},
      getCollectionData(){
        let that = this
        getPaymentInfoByIds({id:that.id}).then(res =>{
          that.form = {
            ...res.data,
            latestPayAt: this.parseTime(res.data.latestPayAt, '{y}-{m}-{d}'),
            applicationAt: this.parseTime(res.data.applicationAt, '{y}-{m}-{d}')
          }
        })
        getPaymentItem({ id: this.id }).then(res => {
          this.list = [...res.data]
        })
      },
      print(){
        lodop().then(LODOP => {
          LODOP.PRINT_INIT();
          LODOP.SET_PRINT_STYLE("FontSize",18);
          LODOP.SET_PRINT_STYLE("Bold",1);
          // LODOP.ADD_PRINT_TEXT(50,231,260,39,"打印页面部分内容");
          // var stylePrint = "<style>table th,td{padding:0;margin:0;border:1px solid #000000;border-collapse:collapse;}</style>"
          var htmlContent = "<body>"+document.getElementById("print").innerHTML+"</body>"
          LODOP.ADD_PRINT_HTM("6mm", "6mm", "RightMargin:6mm", "BottomMargin:6mm", htmlContent);
          LODOP.PRINT();
          // this.$alert('已发起打印任务');
          // LODOP.PREVIEW(); // 预览
          /* LODOP.PRINTA(); // 选择打印机
            // 直接打印 */
          console.log('打印哦')
        }).catch(err => {
          console.error('lodop异常', err)
          alert(this.$t('请检查LODOP打印控件是否安装并启动'));
        })
      },
      findBank(val) {
        const t = this.bankData.find(v => v.id == val)
        console.log(t)
        return t || {}
      },
      totalMoney() {
        const t = this.list.map(v => v.total).reduce((prev, curr) => {
          return parseFloat(prev) + parseFloat(curr);
        }, 0)
        return t
      },
      convertCurrency(money) {
        //汉字的数字
        var cnNums = new Array(this.$t('零'), this.$t('壹'), this.$t('贰'), this.$t('叁'), this.$t('肆'), this.$t('伍'), this.$t('陆'), this.$t('柒'), this.$t('捌'), this.$t('玖'));
        //基本单位
        var cnIntRadice = new Array('', this.$t('拾'), this.$t('佰'), this.$t('仟'));
        //对应整数部分扩展单位
        var cnIntUnits = new Array('', this.$t('万'), this.$t('亿'), this.$t('兆'));
        //对应小数部分单位
        var cnDecUnits = new Array(this.$t('角'), this.$t('分'), 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
      },
    },

  }
</script>

<style scoped id="printStyle">
  .card{
    margin-top: 20px;
  }
  .dialog-footer{
    padding: 40px;
  }
  .card-title{
      font-size: 18px;
      font-weight: bold;
      text-align: center;
  }
  .header{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .lastRow{
    border-top:1px solid #dfe6ec;
    display: flex;
    width: 100%;
    height: 44px;
    text-align: center;
    align-items: center;
  }
  .lastRow div{
    height: 44px;
    line-height: 44px;
    border-right:1px solid #dfe6ec;
  }
</style>