elizebeth/src/xt_pages/outpatientCharges/newTreatTemplate/printOne.vue

<template>
    <div>
        <div id='prescription-print' class="prescription-print">
            <div v-for='(i,index) in pageArr.length'>
                <div class="printTitle">&nbsp血液透析中心医药费收据及收费项目清单</div>
                <div class="infoMain">
                    <div class="infoP">医院(药店)编号：{{info.org_code}}</div>
                    <div class="infoP">名称：{{info.org_name}}</div>
                    <div class="infoP">医生工号：{{info.doctor_code}}</div>
                    <div class="infoP">门诊流水号：{{info.transBody.akc190}}</div>
                    <div class="infoP">科别: {{info.department}}</div>
                    <div class="infoP">处方单据号：{{info.order_number}}</div>
                    <div class="infoP">姓名：{{info.patient_name}}</div>
                    <div class="infoP">医疗账号：{{info.health_card_no}}</div>
                    <div class="infoP">医疗类别：{{info.yiliao_leibie}}</div>
                </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 info.transBody.outputlist2" :key="index">
                                <p style="width:50%;">{{getItemName(item.aka111)}}</p>
                                <p style="width:50%;">{{item.bka058?item.bka058:0}}元</p>
                            </div>
                            <div class="chargeUl" style="border-top:1px solid #000;">
                                <p style="width:50%;">费用合计</p>
                                <p style="width:50%;">{{info.transBody.akc264?info.transBody.akc264:0}}元</p>
                            </div>
                            <div class="chargeUl" style="border-top:1px solid #000;">
                                <p style="width:50%;">记账支付</p>
                                <p style="width:50%;">{{info.transBody.akb068?info.transBody.akb068:0}}元</p>
                            </div>
                            <div class="chargeUl" style="border-top:1px solid #000;">
                                <p style="width:50%;">个人账号</p>
                                <p style="width:50%;">{{info.transBody.akc266?info.transBody.akc266:0}}元</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%;">{{info.transBody.akb067?info.transBody.akb067:0}}元</p>
                            </div>
                        </div>
                        <div style="width:80%;display:flex;max-height:500px;">

                            <div style="border-left:1px solid #000;border-right:1px solid #000;width:40%;text-align:center;">
                                <p v-for="(item,i) in info.name_arr.slice(index * 13,(index * 13) + pageArr[index])" :key="i" class="chargeP">
                                    {{item}}</p>
                            </div>
                            <div style="border-right:1px solid #000;width:15%;text-align:center;">
                                <p v-for="(item,y) in info.spec_arr.slice(index * 13,(index * 13) + pageArr[index])" :key="y" class="chargeP">
                                    {{item}}</p>
                            </div>
                            <div style="border-right:1px solid #000;width:15%;text-align:center;">
                                <p v-for="(item,z) in info.count_arr.slice(index * 13,(index * 13) + pageArr[index])" :key="z" class="chargeP">
                                    {{item}}次</p>
                            </div>
                            <div style="border-right:1px solid #000;width:15%;text-align:center;">
                                <p v-for="(item,f) in info.price_arr.slice(index * 13,(index * 13) + pageArr[index])" :key="f" class="chargeP">{{item}}元</p>
                            </div>
                            <div style="width:15%;text-align:center;">
                                <p v-for="(item,d) in info.total_arr.slice(index * 13,(index * 13) + pageArr[index])" :key="d" class="chargeP">{{item}}元</p>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="moneyBox">
                    <p>实收金：{{info.transBody.akc264}}元</p>
                    <p>记账前金额：{{0.00}}元</p>
                    <p>扣款金额：{{0.00}}元</p>
                    <p>记账后金额：{{0.00}}元</p>
                    <p>找赎金：{{0.00}}元</p>
                </div>
                <div class="actionBar">
                    <div>收费员：{{info.doctor_name}}</div>
                    <div>日期：{{info.record_date}}</div>
                </div>
            </div>

        </div>
    </div>

</template>
<script>
  import axios from 'axios'
  import { getChargePrint } from '@/api/project/project'

  export default {
    data() {
      return {
        list: {},
        prescription: [],
        patient: {},
        orgname: '',

        result: {},
        org_code: '',
        patient_name: '',
        doctor_code: '',
        doctor_name: '',

        name_arr: [],
        spec_arr: [],
        count_arr: [],
        price_arr: [],
        total_arr: [],

        page:1,
        pageArr:[],

      }
    },
    props: {
      info: Object
    },
    methods: {
      getItemName(number) {
        switch (number) {
          case '01':
            return '床位费'
            break
          case '02':
            return '西药费'

            break
          case '03':
            return '中药费'

            break
          case '04':
            return '中成药费'

            break
          case '05':
            return '中草药费'

            break
          case '06':
            return '检查费'

            break
          case '07':
            return '治疗费'

            break
          case '08':
            return '放射费'

            break
          case '09':
            return '手术费'

            break
          case '10':
            return '化验费'

            break
          case '11':
            return '输血费'

            break
          case '12':
            return '输氧费'

            break
          case '13':
            return '其它费'

            break
          case '14':
            return '麻醉费'

            break
          case '15':
            return '材料费'

            break
          case '16':
            return '特殊检查费'

            break
          case '17':
            return '特殊治疗费'

            break
          case '18':
            return '诊疗费(诊查费)'

            break
          case '19':
            return '护理费'

            break
          case '20':
            return '诊金'

            break
          case '21':
            return '检查费（CT）'

            break
          case '22':
            return '检查费（MRT）'

            break
          case '23':
            return '检查费（其他）'

            break
          case '24':
            return '特需服务费'

            break
          case '25':
            return '杂费'

            break
          case '26':
            return '挂号费'
            break

        }

      },
      getPage(){
        if(this.info.name_arr.length <= 13){
            this.page = 1
            this.pageArr.push(this.info.name_arr.length)
        }else if(this.info.name_arr.length > 13){
            this.page = parseInt(this.info.name_arr.length / 13)
            let num = this.info.name_arr.length % 13
            for (var i=0;i<this.page;i++){
                this.pageArr.push(13)
            }
            if(num != 0){
                this.pageArr.push(num)
            }
        }
      }
    },
    created() {


    },
    watch:{
      info: {
        handler(newVal) {
            this.getPage()
        },
        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 div {
        width: 150px;
    }
</style>