Vue_New/src/xt_pages/outpatientCharges/invoiceTemplate/printTen.vue

<template>
  <div id='invoice-print' style="position: relative;">
      <div style="text-align: center;width: 573px;font-size: 20px; font-weight: bolder;">灵山盛康血液透析中心收费收据</div>
      <div style="display: flex;width: 575px;margin-bottom: 5px; position: relative;left: 506px;">
        {{printDate}}
      </div>
      <div style="border: 1px solid black;width: 573px;">
        <div style="display: flex; justify-content: space-between;width: 573px;border-bottom: 1px solid black; position: relative;padding: 5px;">
          <div >
            <span>姓名：{{paramsObj.name}}</span>
            <span style="margin-left: 60px;">性别：</span>
            <span style="" v-if="list.gender == 2">女</span>
            <span style="" v-else-if="list.gender == 1">男</span>
          </div>
          <div>
            <span style="margin-right: 60px;">NO：</span>
          </div>
        </div>
        <div style="display: flex;justify-content: space-around;width: 573px;  padding: 5px;border-bottom: 1px solid black;">
          <div>项目</div>
          <div>金额</div>
          <div>项目</div>
          <div>金额</div>
          <div>项目</div>
          <div>金额</div>
        </div>
        <div style=" width: 573px;min-height: 220px;">
          <div style="display:flex;justify-content: space-around;">
            
            <div style="">西药费</div>
            <div style="">{{ list.westernMedicineCostTotal ? list.westernMedicineCostTotal.toFixed(2) : '' }}</div>
            <div style="">检查费</div>
            <div style="">{{ list.checkCostTotal ? list.checkCostTotal.toFixed(2) : '' }}</div>
            <div style="position: relative;left: 16px">治疗费</div>
            <div style="position:  relative;left: 16px;">{{ list.treatCostTotal ? list.treatCostTotal.toFixed(2) : '' }}</div>
          </div>

          <div style="display:flex;justify-content: space-around;">
           
            <div style="">床位费</div>
            <div style="">{{ list.bedCostTotal ? list.bedCostTotal.toFixed(2) : '' }}</div>
            <div style="position:  relative;left: -15px;">中成药</div>
            <div style="">{{ list.chineseTraditionalMedicineCostTotal ? list.chineseTraditionalMedicineCostTotal.toFixed(2) : '' }}</div>
            <div style="position:  relative;left: -16px;">化验费</div>
            <div style="">{{ list.laboratoryCostTotal ? list.laboratoryCostTotal.toFixed(2) : '' }}</div>
          </div>

          <div style="display:flex;justify-content: space-around;">
            <div style="">手术费</div>
            <div style="">{{ list.operationCostTotal ? list.operationCostTotal.toFixed(2) : '' }}</div>
            <div style="position:  relative;left: -15px;">中成药</div>
            <div style="">{{ list.chineseTraditionalMedicineCostTotal ? list.chineseTraditionalMedicineCostTotal.toFixed(2) : '' }}</div>
            <div style="position:  relative;left: -16px;">其他费</div>
            <div style="">{{ list.otherCostTotal ? list.otherCostTotal.toFixed(2) : '' }}</div>
          </div>

          <div style="display:flex;justify-content: space-around;">
            <div style="position:  relative;left: -24px;">诊察费</div>
            <div style="position:  relative;left: -75px;">{{ list.zhenChaCostTotal ? list.zhenChaCostTotal.toFixed(2) : '' }}</div>
            <div style="position:  relative;left: -115px;">材料费</div>
            <div style="position:  relative;left: -169px;">{{ list.materialCostTotal ? list.materialCostTotal.toFixed(2) : '' }}</div>
          </div>
        </div>
        <div style="border-top:1px solid black;width: 573px;">
          
          <div style="border-right: 1px solid black;display: inline-block;width: 360px;padding: 5px;">
            <span>合计（大写）:</span>
            <span>
              <span v-if="zhongwen.indexOf('万') > -1 && zhongwen.indexOf('拾') > -1 && zhongwen.indexOf('拾') == 1">
                {{ zhongwen.substring(0,1) }} 拾
              </span>
            </span>
            <span>
              <span v-if="zhongwen.indexOf('万') > -1">
                {{ zhongwen.substring(zhongwen.indexOf('万') - 1,zhongwen.indexOf('万')) }} 万
              </span>
            </span>
            <span>
              <span v-if="zhongwen.indexOf('仟') > -1">
                {{ zhongwen.substring(zhongwen.indexOf('仟') - 1,zhongwen.indexOf('仟')) }} 仟
              </span>
            </span>
            <span>
              <span v-if="zhongwen.indexOf('佰') > -1">
                {{ zhongwen.substring(zhongwen.indexOf('佰') - 1,zhongwen.indexOf('佰')) }} 百
              </span>
            </span>
            <span>
              <span v-if="zhongwen.indexOf('拾') > -1">
                {{zhongwen.substring(zhongwen.indexOf('拾') - 1,zhongwen.indexOf('拾')) == '佰' ||  !zhongwen.substring(zhongwen.indexOf('拾') - 1,zhongwen.indexOf('拾'))? '壹' : zhongwen.substring(zhongwen.indexOf('拾') - 1,zhongwen.indexOf('拾')) }} 拾
              </span>
            </span>
            <span>
              <span v-if="zhongwen.indexOf('元') > -1 && zhongwen.substring(this.zhongwen.indexOf('元') - 1).substring(0,1)!= '拾'">
                {{ zhongwen.substring(zhongwen.indexOf('元') - 1,zhongwen.indexOf('元')) }} 元
              </span>
            </span>
            <span>
              <span v-if="zhongwen.indexOf('角') > -1">
                {{ zhongwen.substring(zhongwen.indexOf('角') - 1,zhongwen.indexOf('角')) }} 角
              </span>
            </span>
            <span>
              <span v-if="zhongwen.indexOf('分') > -1">
                {{ zhongwen.substring(zhongwen.indexOf('分') - 1,zhongwen.indexOf('分')) }} 分
              </span>
            </span>
          </div>
          <span style="position: relative;top:0px;left:0px">￥：{{totalPrice.toFixed(2)}}</span>
        </div>
      </div>
      <div style="width: 20px;font-size: 13px;position: absolute;top: 120px;left: -15px;">报销联加盖医院收费章有效</div>
      <div style="width: 20px;font-size: 13px;position: absolute;top: 100px;left: 575px;">白 &nbsp; 存根 &nbsp; 红 &nbsp; 收据 &nbsp; 黄 &nbsp; 记账</div>
      <div style="border-bottom: 1px solid black;width:573px;font-Size:12px">
        <div  style="display:flex;margin: 3px 0px;">
          <div style="width:140px">医保：门慢统筹：{{list.order.hifp_pay}}</div>
          <div style="width:140px">大病保险：{{list.order.hifmi_pay}}</div>
          <div style="width:140px">民政救助: </div>
          <div style="width:140px">兜底支付：</div>
        </div>
        <div style="display:flex;margin-bottom: 3px;">
          <div style="width:140px">个人自付：{{list.order.psn_part_amt}}</div>
          <div style="width:140px">个账支付：{{list.order.acct_pay}}</div>
          <div style="width:140px">个账余额：{{list.order.balc}}</div>
        </div>
      </div>
      <div style="width:573px;font-Size:12px">
        <div style="display:flex;margin: 3px 0px;">
          <div style="width:140px">现金支付：{{list.order.psn_cash_pay}}</div>
          <div style="width:140px">预存扣减：</div>
          <div style="width:140px">预存余额：</div>
        </div>
        <div style="display:flex;justify-content: space-between; margin: 3px 0px;">
          <div style="width:140px">收款单位（盖章）</div>
          <div style="width:140px">收款人：{{list.admin_user_name}}</div>
        </div>
      </div>
      
  </div>
</template>
<script>
import { getInvoice } from '@/api/project/project'
import { uParseTime } from '@/utils/tools'
export default {
  props:{
    paramsObj:Object
  },
  data(){
    return{
      gender:'',
      list:{},
      printDate:'',
      zhongwen:'',
      totalPrice:0.0,
      org_id:'',
      org_name:''
    }
  },
  created(){
    console.log('paramsObj',this.paramsObj)
    let params = {
      order_id: this.paramsObj.order_id,
      patient_id: this.paramsObj.patient_id,
      number: this.paramsObj.number,
    }
    this.getInvoice(params)
    this.org_id = this.$store.getters.xt_user.org_id
    this.org_name = this.$store.getters.xt_user.org.org_name
  },
  methods:{
    getInvoice(params){
      getInvoice(params).then((res) => {
        console.log('res',res)
        this.list = res.data.data
        this.totalPrice = this.list.westernMedicineCostTotal + this.list.checkCostTotal + this.list.treatCostTotal + this.list.bedCostTotal + this.list.chineseTraditionalMedicineCostTotal +
          this.list.laboratoryCostTotal + this.list.operationCostTotal + this.list.otherCostTotal + this.list.materialCostTotal + this.list.zhenChaCostTotal
        if(this.totalPrice == 0){

          this.totalPrice = this.list.medfee_sumamt
        }
        console.log( "this.totalPrice")

        this.smalltoBIG(this.totalPrice.toFixed(2))
        var data = new Date(res.data.data.date * 1000);
        var month =data.getMonth() < 9 ? "0" + (data.getMonth() + 1) : data.getMonth() + 1;
        var date = data.getDate() <= 9 ? "0" + data.getDate() : data.getDate();
        this.printDate = data.getFullYear() + "-" + month + "-" + date;
        this.gender = this.list.gender
      })
    },
    smalltoBIG(n) {
      // let fraction = ['角', '分'];
      // let digit = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'];
      // let unit = [['元.', '万,', '亿,'], ["元",'拾', '佰', '仟']];
      // let head = price < 0 ? '欠' : '';
      // price = Math.abs(price);
      // let upper = '';
      // for (let i = 0; i < fraction.length; i++) {
      // upper += (digit[Math.floor(price * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, '');
      // }
      // upper = upper || '整';
      // price = Math.floor(price);
      // for (let i = 0; i < unit[0].length && price > 0; i++) {
      // let p = '';
      // for (let j = 0; j < unit[1].length && price > 0; j++) {
      //     p = digit[price % 10] + unit[1][j] + p;
      //     price = Math.floor(price / 10);
      // }
      // upper = p.replace(/(零.)*零$/, '').replace(/^$/, '零') + unit[0][i] + upper;
      // }
      // this.zhongwen = head + upper.replace(/(零.)*零圆/, '圆').replace(/(零.)+/g, '零').replace(/^整$/, '零圆整')
      // console.log('6666',head + upper.replace(/(零.)*零圆/, '圆').replace(/(零.)+/g, '零').replace(/^整$/, '零圆整'))
      if (!/^(0|[1-9]\d*)(\.\d+)?$/.test(n)){
        return "数据非法";  //判断数据是否大于0
      }

      var unit = "仟佰拾亿仟佰拾万仟佰拾元角分", str = "";
      n += "00";

      var indexpoint = n.indexOf('.');  // 如果是小数，截取小数点前面的位数

      if (indexpoint >= 0){

        n = n.substring(0, indexpoint) + n.substr(indexpoint+1, 2);   // 若为小数，截取需要使用的unit单位
      }

      unit = unit.substr(unit.length - n.length);  // 若为整数，截取需要使用的unit单位
      for (var i=0; i < n.length; i++){
        str += "零壹贰叁肆伍陆柒捌玖".charAt(n.charAt(i)) + unit.charAt(i);  //遍历转化为大写的数字
      }

      this.zhongwen =  str.replace(/零(仟|佰|拾|角)/g, "零").replace(/(零)+/g, "零").replace(/零(万|亿|元)/g, "$1").replace(/(亿)万|壹(拾)/g, "$1$2").replace(/^元零?|零分/g, "").replace(/元$/g, "元整");
      console.log(this.zhongwen)
    },
    getTime(value, temp) {
      if (value == 0) {
        return ''
      }
      if (value != undefined) {
        return uParseTime(value, temp)
      }
      return ''
    },
  },
  watch:{
    paramsObj:{//深度监听，可监听到对象、数组的变化
      handler(val, oldVal){
        let params = {
          order_id: val.order_id,
          patient_id: val.patient_id,
          number: val.number,
        }
        this.getInvoice(params)

      },
      deep:true
    }
  }
}
</script>