elizebeth/src/xt_pages/hospitalStation/invoiceTemplate/printThree.vue

<template>
    <div id='invoice-print'>

        <div style="display:flex;justify-content: space-between;">

            <div style="position: absolute;top:5px;left:30px">
                <!-- 发票代码 -->

            </div>
                
            <div  style="position: absolute;top:40px;left:300px"></div>

            <div style="position: absolute;top:40px;left:560px"></div>
        </div>

        <div style="display:flex;justify-content: space-between;">
            <!-- 机构名称 -->
            <div style="position: absolute;top:70px;left:40px">机构名称：赤峰费森血液透析中心</div>
            <!-- 单据号 -->
            <!-- <div  style="position: absolute;top:70px;left:200px">单据号:{{ list.number }}</div> -->
            <!-- <div></div> -->
            <!-- 发票序号 -->
            <!-- <div  style="position: absolute;left:560px;top:70px;">

            </div> -->
             <div  style="position: absolute;left:650px;top:70px;">
            <!-- 类别(改成城乡医保或者职工医保，具体对应住院的挂号选的那个医保) -->
            类别：
            </div>
        </div>

        <div style="display:flex;justify-content: space-between;">
            <!-- 姓名 -->
            <div style="position: absolute;top:90px;left:40px;"> 姓名：{{ paramsObj.name }}</div>
            <!-- 个人电脑编号 -->
            <div style="position: absolute;top:90px;left:220px;">个人编号:{{psn_no}}</div>
            <!-- 科室 -->
            <div style="position: absolute;top:90px;left:530px;">科室：{{'血液透析室'}}</div>
            <!-- 床号 -->
            <div style="position: absolute;top:90px;left:700px;">床号：</div>
        </div>

        <div style="display:flex;justify-content: space-between;">
            <!-- 住院号 -->
            <div style="position: absolute;top:120px;left:40px;"> 住院号：{{ number?number:'' }}</div>
            <!-- 入院日期 -->
            <div style="position: absolute;top:120px;left:280px;">入院日期：{{in_hosptial_time?in_hosptial_time.split(' ')[0]:''}}</div>
            <!-- 出院日期 -->
            <div style="position: absolute;top:120px;left:460px;">出院日期：{{out_hosptial_time?out_hosptial_time.split(' ')[0]:''}}</div>
            <!-- 住院天数 -->
          <div style="position: absolute;top:120px;left:640px;">住院天数：{{getDay(in_hosptial_time.split(' ')[0] ,out_hosptial_time.split(' ')[0])}}</div>
        </div>

        <!-- <div style="display:flex;justify-content: space-between;">
            <div style="position: absolute;top:110px;left:260px;">{{ (totalPrice - list.psn_cash_money).toFixed(2) }}</div>
            <div style="position: absolute;top:110px;left:440px;">{{ list.psn_cash_money  }}</div>
            <div style="position: absolute;top:110px;left:580px;">门特</div>
        </div> -->


        <div style="display:flex;justify-content: space-between;">
            <div style="position: absolute;top:160px;left:40px">西药费</div>
            <div style="position: absolute;top:160px;left:110px">{{ list.westernMedicineCostTotal }}</div>
            <div style="position: absolute;top:160px;left:220px">检查费</div>
            <div style="position: absolute;top:160px;left:290px">{{ list.checkCostTotal }}</div>
            <div style="position: absolute;top:160px;left:400px">材料费</div>
            <div style="position: absolute;top:160px;left:470px"></div>
            <div style="position: absolute;top:160px;left:580px">麻醉费</div>
            <div style="position: absolute;top:160px;left:650px"></div>
        </div>
        <div style="display:flex;justify-content: space-between;">
            <div style="position: absolute;top:190px;left:40px">中成药费</div>
            <div style="position: absolute;top:190px;left:110px"></div>
            <div style="position: absolute;top:190px;left:220px">治疗费</div>
            <div style="position: absolute;top:190px;left:290px">{{list.treatCostTotal}}</div>
            <div style="position: absolute;top:190px;left:400px">护理费</div>
            <div style="position: absolute;top:190px;left:470px"></div>
            <div style="position: absolute;top:190px;left:580px">床位费</div>
            <div style="position: absolute;top:190px;left:650px"></div>
        </div>
        <div style="display:flex;justify-content: space-between;">
            <div style="position: absolute;top:220px;left:40px">中草药费</div>
            <div style="position: absolute;top:220px;left:110px"></div>
            <div style="position: absolute;top:220px;left:220px">手术费</div>
            <div style="position: absolute;top:220px;left:290px">{{ list.operationCostTotal }}</div>
            <div style="position: absolute;top:220px;left:400px">输血费</div>
            <div style="position: absolute;top:220px;left:470px"></div>
            <div style="position: absolute;top:220px;left:580px">取暖费</div>
            <div style="position: absolute;top:220px;left:650px"></div>
        </div>
        <div style="display:flex;justify-content: space-between;">
            <div style="position: absolute;top:250px;left:40px">高压氧费</div>
            <div style="position: absolute;top:250px;left:110px"></div>
            <div style="position: absolute;top:250px;left:220px">化验费</div>
            <div style="position: absolute;top:250px;left:290px">{{ list.laboratoryCostTotal }}</div>
            <div style="position: absolute;top:250px;left:400px">氧气费</div>
            <div style="position: absolute;top:250px;left:470px"></div>
            <div style="position: absolute;top:250px;left:580px">其他费</div>
            <div style="position: absolute;top:250px;left:650px">{{ list.otherCostTotal }}</div>
        </div>

        <div>
            <span>
            <span style="position: absolute;top:280px;left:40px">合计金额（大写）：</span>
            <span  style="position: absolute;top:280px;left:180px">
                <span v-if="zhongwen.indexOf('万') > -1 && zhongwen.indexOf('拾') > -1 && zhongwen.indexOf('拾') == 1">
                    {{ zhongwen.substring(0,1) }}十万
                </span>
                <span v-else>零十万</span>
            </span>
            <span  style="position: absolute;top:280px;left:230px">
                <span v-if="zhongwen.indexOf('万') > -1">
                    {{ zhongwen.substring(zhongwen.indexOf('万') - 1,zhongwen.indexOf('万')) }}万
                </span>
                <span v-else>零万</span>
            </span>
            <span  style="position: absolute;top:280px;left:270px">
                <span v-if="zhongwen.indexOf('仟') > -1">
                    {{ zhongwen.substring(zhongwen.indexOf('仟') - 1,zhongwen.indexOf('仟')) }}仟
                </span>
                <span v-else>零仟</span>
            </span>
            <span  style="position: absolute;top:280px;left:310px">
                <span v-if="zhongwen.indexOf('佰') > -1">
                    {{ zhongwen.substring(zhongwen.indexOf('佰') - 1,zhongwen.indexOf('佰')) }}佰
                </span>
                <span v-else>零佰</span>
            </span>
            <span style="position: absolute;top:280px;left:350px">
                <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('拾'))? '壹' : zhongwen.substring(zhongwen.indexOf('拾') - 1,zhongwen.indexOf('拾')) }}

                </span>
                <span v-else>零拾</span>
            </span>
            <span  style="position: absolute;top:280px;left:390px">
                <span v-if="zhongwen.indexOf('元') > -1 && zhongwen.substring(this.zhongwen.indexOf('元') - 1).substring(0,1)!= '拾'">
                    {{ zhongwen.substring(zhongwen.indexOf('元') - 1,zhongwen.indexOf('元')) }}
                </span>
                <span v-else>零元</span>
            </span>
            <span  style="position: absolute;top:280px;left:430px">
                <span v-if="zhongwen.indexOf('角') > -1">
                    {{ zhongwen.substring(zhongwen.indexOf('角') - 1,zhongwen.indexOf('角')) }}角
                </span>
                <span v-else>零角</span>
            </span>
            <span  style="position: absolute;top:280px;left:470px">
                <span v-if="zhongwen.indexOf('分') > -1">
                    {{ zhongwen.substring(zhongwen.indexOf('分') - 1,zhongwen.indexOf('分')) }}分
                </span>
                <span v-else>零分</span>
            </span>
            </span>
            <span style="position: absolute;top:280px;left:510px">合计：{{ list.order.medfee_sumamt }}</span>
        </div>


        <div style="position: absolute;top:310px;left:40px">
            <!-- 个人账户支付 -->
          个人账户支付：{{list.order.acct_pay?list.order.acct_pay:'0'}}
        </div>
        <div style="position: absolute;top:310px;left:250px">
            <!-- 统筹支付 -->
          统筹支付:{{list.order.hifp_pay?list.order.hifp_pay:'0'}}
        </div>
        <div style="position: absolute;top:310px;left:480px">
          现金支付:{{list.order.psn_cash_pay?list.order.psn_cash_pay:'0'}}
          <!-- 现金支付 -->
        </div>
        <div style="position: absolute;top:340px;left:40px">
          公务员补助:{{list.order.cvlserv_pay?list.order.cvlserv_pay:'0'}}
          <!-- 公务员补助 -->
        </div>
        <div style="position: absolute;top:340px;left:250px">
          医疗救助:{{list.order.maf_pay?list.order.maf_pay:'0'}}
          <!-- 医疗救助 -->
        </div>
        <!-- 大病 -->
        <!-- <div style="position: absolute;top:340px;left:500px">
          {{list.order.hifmi_pay?list.order.hifmi_pay:''}}
        </div> -->
        <!-- 其他基金支付 -->
        <!-- <div style="position: absolute;top:340px;left:560px">

          {{list.order.oth_pay?list.order.oth_pay:''}}

        </div> -->
        <div style="position: absolute;top:370px;left:40px">
            <!-- 预交款合计 -->
            预交款合计:0
        </div>
        <div style="position: absolute;top:370px;left:250px">
            <!-- 补交款 -->
            补交款:0
        </div>
        <div style="position: absolute;top:370px;left:480px">
            <!-- 应退款 -->
            应退款:0
        </div>
        <div>
            <div style="position: absolute;top:400px;left:40px">
                <!-- 开票日期 -->
              开票日期:{{printDate}}

            </div>
            <div style="position: absolute;top:400px;left:280px">
                <!-- 结算日期： -->
              结算日期：{{list.order.setl_time?list.order.setl_time.split(' ')[0]:''}}
            </div>
            <div style="position: absolute;top:400px;left:500px">
               经手人：<!-- 经手人： -->
              {{list.admin_user_name}}
            </div>
        </div>

        <div>
            <div style="position: absolute;top:600px;left:40px">
                <!-- 开票人: -->
            </div>
        </div>
    </div>
</template>

<script>
import { getInvoice } from '@/api/project/project'
export default {
    props:{
        paramsObj:Object
    },
    data(){
        return{
            list:null,
            printDate:'',
            zhongwen:'',
            totalPrice:0.0,
            org_id:'',
            org_name:'',
          psn_no:"",
          in_hosptial_time:'',
          out_hosptial_time:'',
          number:'',
        }
    },
    mounted(){
        console.log('paramsObj',this.paramsObj)
        let params = {
            order_id: this.paramsObj.order_id,
            patient_id: this.paramsObj.patient_id,
        }
        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:{
      getDay(dateString1,dateString2){
        var  startDate = Date.parse(dateString1);
        var  endDate = Date.parse(dateString2);
        if (startDate>endDate){
          return 0;
        }
        if (startDate==endDate){
          return 1;
        }
        var days=(endDate - startDate)/(1*24*60*60*1000);
        return  days;

      },
        getInvoice(params){
            getInvoice(params).then((res) => {
                console.log('res',res)
                this.list = res.data.data
                console.log(this.list)
              console.log(this.list.his_hospital_record)

              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.list.order.medfee_sumamt)
                // var data = new Date(res.data.data.date * 1000);
                var data = new Date(this.paramsObj.setl_time);
                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;

              if(this.list.his.id > 0){
                this.in_hosptial_time = this.getTime()
                this.out_hosptial_time = this.list.order.setl_time.split(' ')[0]
              }else{
                this.in_hosptial_time = this.list.his_hospital_record.in_hosptial_time.split(' ')[0]
                this.out_hosptial_time = this.list.his_hospital_record.out_hosptial_time.split(' ')[0]
              }

              this.id_card_no = this.list.his_hospital_record.id_card_no
              this.number = this.list.his_hospital_record.number
              this.psn_no = this.list.his_hospital_record.psn_no


              this.balance_accounts_type = this.list.his_hospital_record.balance_accounts_type
              this.gend= this.list.his_hospital_record.gend
            })
        },
        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,
                }
                this.getInvoice(params)

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