elizebeth/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">医院(药店)编号：H8D50</p>
            <p class="infoP">名称：血液透析中心</p>
            <p class="infoP">医生工号：H8D50</p>
            <p class="infoP">门诊流水号：H8D50</p>
            <p class="infoP">科别：{{list.p_info.departments}}</p>
            <p class="infoP">处方单据号：H8D50</p>
            <p class="infoP">姓名：{{list.patient.name}}</p>
            <p class="infoP">医疗账号：98798798</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 in 3">
                        <p style="width:50%;">材料费</p>
                        <p style="width:50%;">122</p>
                    </div>
                    <div class="chargeUl" style="border-top:1px solid #000;"> 
                        <p style="width:50%;">费用合计</p>
                        <p style="width:50%;">123</p>
                    </div>
                    <div class="chargeUl" style="border-top:1px solid #000;">
                        <p style="width:50%;">记账支付</p>
                        <p style="width:50%;">123</p>
                    </div>
                    <div class="chargeUl" style="border-top:1px solid #000;">
                        <p style="width:50%;">个人账号</p>
                        <p style="width:50%;">123</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%;">123</p>
                    </div>
                </div>
                <div style="width:80%;display:flex;height:600px;">
                    <!-- <ul class="chargeUl" v-for="item in 4">
                        <li style="width:20%;">血压透析器（进口）FFX60</li>
                        <li style="width:20%;">次</li>
                        <li style="width:20%;">1个</li>
                        <li style="width:20%;">123</li>
                        <li style="width:20%;">123</li>
                    </ul> -->
                    <div style="border-left:1px solid #000;border-right:1px solid #000;width:40%;text-align:center;">
                        <p v-for="(item,i) in prescription" :key="i" class="chargeP">血压透析器（进口）FFX60</p>
                    </div>
                    <div style="border-right:1px solid #000;width:15%;text-align:center;">
                        <p v-for="(item,y) in prescription" :key="y" class="chargeP">次</p>
                    </div>
                    <div style="border-right:1px solid #000;width:15%;text-align:center;">
                        <p v-for="(item,z) in prescription" :key="z" class="chargeP">1个</p>
                    </div>
                    <div style="border-right:1px solid #000;width:15%;text-align:center;">
                        <p v-for="(item,f) in prescription" :key="f" class="chargeP">123</p>
                    </div>
                    <div style="width:15%;text-align:center;">
                        <p v-for="(item,d) in prescription" :key="d" class="chargeP">123</p>
                    </div>
                </div>
            </div>
            
        </div>
        <div class="moneyBox">
            <p>实收金：111</p>
            <p>记账前金额：111</p>
            <p>扣款金额：111</p>
            <p>记账后金额：111</p>
            <p>找赎金：111</p>
        </div>
        <div class="actionBar">
            <p>收费员：</p>
            <p>日期：</p>
        </div>
    </div>
</template>
<script>
 import { getChargePrint } from "@/api/project/project"
export default {
    data(){
      return{
          list:{},
          prescription:[]
      } 
    },
    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
            }
         })
       }
    },
    created(){
       var record_date =  this.$route.query.record_date
       console.log("record_date",record_date)
       var patient_id = this.$route.query.patient_id
       console.log("patient_id",patient_id)
       var prescription_id = this.$route.query.prescription_id
       this.getChargePrint(record_date,patient_id,prescription_id)

    }
}
</script>


<style lang="scss" scoped>
.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>