Vue_New/src/xt_pages/outpatientCharges/treatTemplate/printOne.vue

<template>
    <div id='prescription-print' class="prescription-print">
        <div class="printTitle">血液透析中心医药费收据及收费项目清单</div>
        <div class="infoMain">
            <p class="infoP">医院(药店)编号：</p>
            <p class="infoP">名称：血液透析中心</p>
            <p class="infoP">医生工号：</p>
            <p class="infoP">门诊流水号：</p>
            <p class="infoP">科别：{{list.p_info.departments}}</p>
            <p class="infoP">处方单据号：</p>
            <p class="infoP">姓名：{{patient.name}}</p>
            <p class="infoP">医疗账号：</p>
            <p class="infoP">医疗类别：普通</p>
        </div>
        <div class="chargeBox">
            <div style="display:flex;justify-content: space-between;border-bottom:1px solid #000;">
                <div class="chargeUl" style="width:20%;">
                    <p style="width:50%;border-right:1px solid #000;">费用类型</p>
                    <p style="width:50%;border-right:1px solid #000;">金额</p>
                </div>
                <div class="chargeUl" style="width:80%;">
                    <p style="width:40%;border-right:1px solid #000;">明细名称</p>
                    <p style="width:15%;border-right:1px solid #000;">规格</p>
                    <p style="width:15%;border-right:1px solid #000;">数量</p>
                    <p style="width:15%;border-right:1px solid #000;">单价</p>
                    <p style="width:15%;">金额</p>
                </div>
            </div>
            <div style="display:flex;justify-content: space-between;">
                <div style="width:20%;">
                    <div class="chargeUl" v-for="(item,index) in 1" :key="index">
                        <p style="width:50%;">材料费</p>
                        <p style="width:50%;"></p>
                    </div>
                    <div class="chargeUl" style="border-top:1px solid #000;"> 
                        <p style="width:50%;">费用合计</p>
                        <p style="width:50%;"></p>
                    </div>
                    <div class="chargeUl" style="border-top:1px solid #000;">
                        <p style="width:50%;">记账支付</p>
                        <p style="width:50%;"></p>
                    </div>
                    <div class="chargeUl" style="border-top:1px solid #000;">
                        <p style="width:50%;">个人账号</p>
                        <p style="width:50%;"></p>
                    </div>
                    <div class="chargeUl" style="border-top:1px solid #000;border-bottom:1px solid #000;">
                        <p style="width:50%;">现金支付</p>
                        <p style="width:50%;">{{list.order_info.psn_cash_pay}}</p>
                    </div>
                </div>
                <div style="width:80%;display:flex;height:600px;">
                  
                    <div style="border-left:1px solid #000;border-right:1px solid #000;width:40%;text-align:center;">
                        <p v-for="(item,i) in prescription[0].advices" :key="i" class="chargeP">{{item.advice_name}}</p>
                    </div>
                    <div style="border-right:1px solid #000;width:15%;text-align:center;">
                        <p v-for="(item,y) in prescription[0].advices" :key="y" class="chargeP">{{item.advice_desc}}</p>
                    </div>
                    <div style="border-right:1px solid #000;width:15%;text-align:center;">
                        <p v-for="(item,z) in prescription[0].advices" :key="z" class="chargeP">{{item.single_dose}}个</p>
                    </div>
                    <div style="border-right:1px solid #000;width:15%;text-align:center;">
                        <p v-for="(item,f) in prescription[0].advices" :key="f" class="chargeP">{{item.price}}</p>
                    </div>
                    <div style="width:15%;text-align:center;">
                        <p v-for="(item,d) in prescription[0].advices" :key="d" class="chargeP">{{item.single_dose * item.price}}</p>
                    </div>
                </div>
            </div>
            
        </div>
        <div class="moneyBox">
            <p>实收金：{{list.order_info.medfee_sumamt}}</p>
            <p>记账前金额：{{list.order_info.preselfpay_amt}}</p>
            <p>扣款金额：</p>
            <p>记账后金额：</p>
            <p>找赎金：</p>
        </div>
        <div class="actionBar">
            <p>收费员：</p>
            <p>日期：{{this.$route.query.record_date}}</p>
        </div>
    </div>
</template>
<script>
 import { getChargePrint } from "@/api/project/project"
export default {
    data(){
      return{
          list:{},
          prescription:[],
          patient:{},
      } 
    },
    props:{
        paramsObj:Object
    },
    methods:{
       getChargePrint(record_date,patient_id,prescription_id){
           var params = {
              record_date:record_date,
              patient_id:patient_id,
              prescription_id:prescription_id
           }
           console.log("params",params)
         getChargePrint(params).then(response=>{
            if(response.data.state == 1){
               var list = response.data.data.list
               console.log("list9999999999",list)
               this.list = list
               var prescription = response.data.data.prescription
               console.log("prescription",prescription)
               this.prescription = prescription
               var patient = response.data.data.patient
               console.log("patient",patient)
               this.patient  = patient
            }
         })
       }
    },
    created(){
       var record_date =  this.paramsObj.record_date
       console.log("record_date",record_date)
       var patient_id = this.paramsObj.patient_id
       console.log("patient_id",patient_id)
       var prescription_id = this.paramsObj.prescription_id
       this.getChargePrint(record_date,patient_id,prescription_id)

    },
    watch:{
        paramsObj:{//深度监听，可监听到对象、数组的变化
        handler(val, oldVal){
            this.paramsObj = val
            this.patient_id = this.paramsObj.patient_id
            var record_date = this.paramsObj.record
            this.record_date = record_date
            var prescription_id = this.paramsObj.prescription_id
            this.prescription_id = prescription_id
            
        },
        deep:true
        }
    }
}
</script>


<style lang="scss" scoped>
.prescription-print{
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.06) inset;
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; 
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
    margin-bottom: 20px;
    padding:20px 10px;
}
.printTitle{
    font-size: 22px;
    text-align: center;
    font-weight: bold;
}
.infoMain{
    display: flex;
    flex-wrap: wrap;
    padding:0 10px;
    margin-top:10px;
}
.infoMain .infoP{
    width: 33%;
    line-height: 24px;
}
.chargeBox{
    border: 1px solid #000;
}
.chargeUl{
    display:flex;
    justify-content: space-between;
    text-align: center;
}
.chargeUl p{
    height:40px;
    line-height: 40px;
}
.chargeP{
    height:40px;
    line-height: 40px;
}
.moneyBox{
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    background: #eee;
    height: 40px;
    align-items: center;
    border:1px solid #000;
    border-top:none
}
.actionBar{
    display: flex;
    justify-content: space-between; 
    line-height: 24px;
    padding:0 10px;
}
.actionBar p{
    width:150px;
}
</style>