elizebeth/src/xt_pages/outpatientCharges/invoiceTemplate/printtwelve.vue

<template>
  <div id='invoice-print' style="position: relative;">
    <!-- <div style="position: absolute;top:90px;left:81px;">
      阜阳经沃血液透析中心
    </div>
    <div style="display: flex;">
      <div style="position: absolute;top:120px;left:81px;">
        小米
      </div>
      <div style="position: absolute;top:120px;left:200px;">
        号码
      </div>
    </div>

    <div style="display: flex;">
      <div style="position: absolute;top:150px;left:81px;">
        医保证号:
      </div>
      <div style="position: absolute;top:150px;left:190px;">
        人员类别:
      </div>
      <div style="position: absolute;top:150px;left:252px;">
       2023-09-28
      </div>
    </div>
    <div style="display: flex;">
      <div style="position: absolute;top:170px;left:106px;">目录内</div>
      <div style="position: absolute;top:170px;left:146px;">目录外</div>
      <div style="position: absolute;top:170px;left:232px;">目录内</div>
      <div style="position: absolute;top:170px;left:272px;">目录外</div>
    </div>
    <div style="display: flex;">
      <div style="position: absolute;top:190px;left:106px;">目录内</div>
      <div style="position: absolute;top:190px;left:146px;">目录外</div>
      <div style="position: absolute;top:190px;left:232px;">目录内</div>
      <div style="position: absolute;top:190px;left:272px;">目录外</div>
    </div>
    <div style="display: flex;">
      <div style="position: absolute;top:210px;left:106px;">目录内</div>
      <div style="position: absolute;top:210px;left:146px;">目录外</div>
      <div style="position: absolute;top:210px;left:232px;">目录内</div>
      <div style="position: absolute;top:210px;left:272px;">目录外</div>
    </div>
    <div style="display: flex;">
      <div style="position: absolute;top:230px;left:106px;">目录内</div>
      <div style="position: absolute;top:230px;left:146px;">目录外</div>
      <div style="position: absolute;top:230px;left:232px;">目录内</div>
      <div style="position: absolute;top:230px;left:272px;">目录外</div>
    </div>
    <div style="display: flex;">
      <div style="position: absolute;top:250px;left:106px;">目录内</div>
      <div style="position: absolute;top:250px;left:146px;">目录外</div>
      <div style="position: absolute;top:250px;left:232px;">目录内</div>
      <div style="position: absolute;top:250px;left:272px;">目录外</div>
    </div>
    <div style="display: flex;">
      <div style="position: absolute;top:270px;left:106px;">目录内</div>
      <div style="position: absolute;top:270px;left:146px;">目录外</div>
      <div style="position: absolute;top:270px;left:232px;">目录内</div>
      <div style="position: absolute;top:270px;left:272px;">目录外</div>
    </div> -->
    <!--金额 -->
    <!-- <div style="display: flex;">
      <div style="position: absolute;top:290px;left:146px;">280</div>
      <div style="position: absolute;top:290px;left:242px;">个人支付：9.92</div>
    </div>
    <div style="position: absolute;top:310px;left:146px;">贰佰捌拾整</div>
    <div style="position: absolute;top:330px;left:190px;">目录内金额</div>
    <div style="position: absolute;top:350px;left:252px;">个人医保</div>
    <div style="display: flex;">
      <div style="position: absolute;top:370px;left:106px;">收款人员</div>
      <div style="position: absolute;top:370px;left:252px;">流水号</div>
    </div> -->
    <!-- 附件 -->
    <div v-for="(item,index) in Arr" :key="index">
      <div :style="{position: 'absolute',top:(90 + (index * 370))  + 'px',left:'81px'}">
        阜阳经沃血液透析中心
      </div>
      <div style="display: flex;">
        <div :style="{position: 'absolute',top:(120 + (index * 370))  + 'px',left:'81px'}">
          {{paramsObj.name}}
        </div>
        <div :style="{position: 'absolute',top:(120 + (index * 370))  + 'px',left:'200px'}">

        </div>
      </div>

      <div style="display: flex;">
        <div :style="{position: 'absolute',top:(150 + (index * 370))  + 'px',left:'81px'}">

        </div>
        <div :style="{position: 'absolute',top:(150 + (index * 370))  + 'px',left:'190px'}">

        </div>
        <div :style="{position: 'absolute',top:(150 + (index * 370))  + 'px',left:'252px'}">
        {{printDate}}
        </div>
      </div>
      <div style="display: flex;">
        <div :style="{position: 'absolute',top:(170+(index * 370))+'px',left:'106px'}">{{list.westernMedicineCostTotal?list.westernMedicineCostTotal:""}}</div>
        <div :style="{position: 'absolute',top:(170+(index * 370))+'px',left:'146px'}"></div>
        <div :style="{position: 'absolute',top:(170+(index * 370))+'px',left:'232px'}">{{ list.operationCostTotal?list.operationCostTotal:""}}</div>
        <div :style="{position: 'absolute',top:(170+(index * 370))+'px',left:'272px'}"></div>
      </div>
      <div style="display: flex;">
        <div :style="{position: 'absolute',top:(190+(index * 370))+'px',left:'106px'}">{{list.chineseTraditionalMedicineCostTotal?list.chineseTraditionalMedicineCostTotal:""}}</div>
        <div :style="{position: 'absolute',top:(190+(index * 370))+'px',left:'146px'}"></div>
        <div :style="{position: 'absolute',top:(190+(index * 370))+'px',left:'232px'}">{{list.laboratoryCostTotal?list.laboratoryCostTotal:""}}</div>
        <div :style="{position: 'absolute',top:(190+(index * 370))+'px',left:'272px'}"></div>
      </div>
      <div style="display: flex;">
        <div :style="{position: 'absolute',top:(210+(index * 370))+'px',left:'106px'}"></div>
        <div :style="{position: 'absolute',top:(210+(index * 370))+'px',left:'146px'}"></div>
        <div :style="{position: 'absolute',top:(210+(index * 370))+'px',left:'232px'}"></div>
        <div :style="{position: 'absolute',top:(210+(index * 370))+'px',left:'272px'}"></div>
      </div>
      <div style="display: flex;">
        <div :style="{position: 'absolute',top:(230+(index * 370))+'px',left:'106px'}"></div>
        <div :style="{position: 'absolute',top:(230+(index * 370))+'px',left:'146px'}"></div>
        <div :style="{position: 'absolute',top:(230+(index * 370))+'px',left:'232px'}"></div>
        <div :style="{position: 'absolute',top:(230+(index * 370))+'px',left:'272px'}"></div>
      </div>
      <div style="display: flex;">
        <div :style="{position: 'absolute',top:(250+(index * 370))+'px',left:'106px'}">{{list.checkCostTotal?list.checkCostTotal:""}}</div>
        <div :style="{position: 'absolute',top:(250+(index * 370))+'px',left:'146px'}"></div>
        <div :style="{position: 'absolute',top:(250+(index * 370))+'px',left:'232px'}"></div>
        <div :style="{position: 'absolute',top:(250+(index * 370))+'px',left:'272px'}"></div>
    </div>
    <div style="display: flex;">
      <div :style="{position: 'absolute',top:(270+(index * 370))+'px',left:'106px'}">{{list.treatCostTotal?list.treatCostTotal:""}}</div>
      <div :style="{position: 'absolute',top:(270+(index * 370))+'px',left:'146px'}"></div>
      <div :style="{position: 'absolute',top:(270+(index * 370))+'px',left:'232px'}">{{list.materialCostTotal?list.materialCostTotal:""}}</div>
      <div :style="{position: 'absolute',top:(270+(index * 370))+'px',left:'272px'}"></div>
    </div>
    <!--金额 -->
    <div style="display: flex;">
      <div :style="{position: 'absolute',top:(290+(index * 370))+'px',left:'146px',}">{{list.order.medfee_sumamt}}</div>
      <div :style="{position: 'absolute',top:(290+(index * 370))+'px',left:'242px'}">个人支付：{{list.order.psn_cash_pay}}</div>
    </div>
    <div :style="{position: 'absolute',top:(310+(index * 370))+'px',left:'146px'}">{{zhongwen}}</div>
    <div :style="{position: 'absolute',top:(330+(index * 370))+'px',left:'190px'}">{{'统筹支付:' + list.order.hifp_pay}}</div>
    <div :style="{position: 'absolute',top:(350+(index * 370))+'px',left:'252px'}">{{list.order.acct_pay}}</div>
    <div style="display: flex;">
      <div :style="{position: 'absolute',top:(370+(index * 370))+'px',left:'106px'}">{{list.admin_user_name}}</div>
      <div :style="{position: 'absolute',top:(370+(index * 370))+'px',left:'252px'}">{{list.order_number}}</div>
    </div>

      <div v-for="(ite,index2) in item" :key="index2" style="">

        <div :style="{position: 'absolute',top:(120 + (index * 370))  + 'px',left:(380 + (index2 * 110)) + 'px'}">{{list.order_number}}</div>
        <div :style="{position: 'absolute',top:(150 + (index * 370))  + 'px',left:(380 + (index2 * 110)) + 'px'}">{{ite.name}}</div>
        <div :style="{position: 'absolute',top:(170 + (index * 370))  + 'px',left:(380 + (index2 * 110)) + 'px'}">{{ite.item}}</div>
        <div :style="{position: 'absolute',top:(290 + (index * 370))  + 'px',left:(380 + (index2 * 110)) + 'px'}">{{ite.doctor_name}}</div>
        <div :style="{position: 'absolute',top:(310 + (index * 370))  + 'px',left:(380 + (index2 * 110)) + 'px'}">{{ite.total}}</div>
        <div :style="{position: 'absolute',top:(330 + (index * 370))  + 'px',left:(380 + (index2 * 110)) + 'px'}">{{ite.operator}}</div>
        <div :style="{position: 'absolute',top:(350 + (index * 370))  + 'px',left:(380 + (index2 * 110)) + 'px'}">{{ite.printDate}}</div>
        <!-- 附件 -->
        <!-- <div :style="{position: 'absolute',top:(120 + (index * 350))  + 'px',left:'490px'}">号码</div>
        <div :style="{position: 'absolute',top:(150 + (index * 350))  + 'px',left:'490px'}">{{ite}}</div>
        <div :style="{position: 'absolute',top:(170 + (index * 350))  + 'px',left:'490px'}">项目</div>
        <div :style="{position: 'absolute',top:(310 + (index * 350))  + 'px',left:'490px'}">金额</div>
        <div :style="{position: 'absolute',top:(330 + (index * 350))  + 'px',left:'490px'}">收款人</div>
        <div :style="{position: 'absolute',top:(350 + (index * 350))  + 'px',left:'490px'}">日期</div> -->
        <!-- 附件 -->
        <!-- <div :style="{position: 'absolute',top:(120 + (index * 350))  + 'px',left:'588px'}">号码</div>
        <div :style="{position: 'absolute',top:(150 + (index * 350))  + 'px',left:'588px'}">{{ite}}</div>
        <div :style="{position: 'absolute',top:(170 + (index * 350))  + 'px',left:'588px'}">项目</div>
        <div :style="{position: 'absolute',top:(310 + (index * 350))  + 'px',left:'588px'}">金额</div>
        <div :style="{position: 'absolute',top:(330 + (index * 350))  + 'px',left:'588px'}">收款人</div>
        <div :style="{position: 'absolute',top:(350 + (index * 350))  + 'px',left:'588px'}">日期</div> -->
      </div>

    </div>

  </div>
</template>
<script>
import { getInvoice } from '@/api/project/project'
export default {
  props:{
    paramsObj:Object
  },
  data(){
    return{
      list:{},
      printDate:'',
      zhongwen:'',
      totalPrice:0.0,
      org_id:'',
      org_name:'',
      pageArr:[],
      Arr:[],
    }
  },
  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)
    // var data = new Date();
    // 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.smalltoBIG(982732.21)
    this.org_id = this.$store.getters.xt_user.org_id
    this.org_name = this.$store.getters.xt_user.org.org_name
  },
  methods:{
    group(array, subGroupLength) {
      let index = 0;
      let newArray = [];
      while(index < array.length) {
        newArray.push(array.slice(index, index += subGroupLength));
      }
      return newArray;
    }, 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.smalltoBIG(this.totalPrice)
        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.getPage()

        this.pageArr = []
        if(this.list.westernMedicineCostTotal > 0){
          let obj = {
            name: this.paramsObj.name,
            total: this.list.westernMedicineCostTotal,
            item: "药品费",
            doctor_name:"医生 " + this.list.doctor_info.user_name,
            operator:this.list.admin_user_name,
            printDate:this.printDate,
          }
          this.pageArr.push(obj)
        }

        if(this.list.operationCostTotal > 0){
          let obj = {
            name: this.paramsObj.name,
            total: this.list.operationCostTotal,
            item: "手术费",
            doctor_name:"医生 " + this.list.doctor_info.user_name,
            operator:this.list.admin_user_name,
            printDate:this.printDate,
          }
          this.pageArr.push(obj)
        }


        if(this.list.chineseTraditionalMedicineCostTotal > 0){
          let obj = {
            name: this.paramsObj.name,
            total: this.list.chineseTraditionalMedicineCostTotal,
            item: "中成药费",
            doctor_name:"医生 " + this.list.doctor_info.user_name,
            operator:this.list.admin_user_name,
            printDate:this.printDate,
          }
          this.pageArr.push(obj)
        }


        if(this.list.laboratoryCostTotal > 0){
          let obj = {
            name:this.paramsObj.name,
            total: this.list.laboratoryCostTotal,
            item: "化验费",
            doctor_name:"医生 " + this.list.doctor_info.user_name,
            operator:this.list.admin_user_name,
            printDate:this.printDate,
          }
          this.pageArr.push(obj)
        }


        if(this.list.checkCostTotal > 0){
          let obj = {
            name: this.paramsObj.name,
            total: this.list.checkCostTotal,
            item: "检查费",
            doctor_name:"医生 " + this.list.doctor_info.user_name,
            operator:this.list.admin_user_name,
            printDate:this.printDate,
          }
          this.pageArr.push(obj)
        }

        if(this.list.treatCostTotal > 0){
          let obj = {
            name:this.paramsObj.name,
            total: this.list.treatCostTotal,
            item: "治疗费",
            doctor_name:"医生 " + this.list.doctor_info.user_name,
            operator:this.list.admin_user_name,
            printDate:this.printDate,
          }
          this.pageArr.push(obj)
        }


        if(this.list.materialCostTotal > 0){
          let obj = {
            name:this.paramsObj.name,
            total: this.list.materialCostTotal,
            item: "材料费",
            doctor_name:"医生 " + this.list.doctor_info.user_name,
            operator:this.list.admin_user_name,
            printDate:this.printDate,
          }
          this.pageArr.push(obj)
        }

        this.Arr = this.group(this.pageArr,Math.ceil(this.pageArr.length/4))
        console.log(this.Arr)



      })
    },
    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)
    },

  },
  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>