Vue_New/src/xt_pages/outpatientCharges/statementTemplate/printFour.vue

<template>
    <div>
        <div id='prescription-print' class="prescription-print">
            <div v-for='(i,pageIndex) in pageArr.length' :key="pageIndex">
                <div class="printTitle">血液透析中心医药费收据及收费项目清单</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.number}}</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">医疗类别：</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-if="info.bed_cost_total > 0">
                                <p style="width:50%;">床位费</p>
                                <p style="width:50%;">{{info.bed_cost_total?info.bed_cost_total:0}}元</p>
                            </div>
                            <div class="chargeUl" v-if="info.operation_cost_total > 0">
                                <p style="width:50%;">手术费</p>
                                <p style="width:50%;">{{info.operation_cost_total?info.operation_cost_total:0}}元</p>
                            </div>
                            <div class="chargeUl" v-if="info.other_cost_total > 0">
                                <p style="width:50%;">其他费</p>
                                <p style="width:50%;">{{info.other_cost_total?info.other_cost_total:0}}元</p>
                            </div>
                            <div class="chargeUl" v-if="info.material_cost_total > 0">
                                <p style="width:50%;">材料费</p>
                                <p style="width:50%;">{{info.material_cost_total?info.material_cost_total:0}}元</p>
                            </div>
                            <div class="chargeUl" v-if="info.western_medicine_cost_total > 0">
                                <p style="width:50%;">西药费</p>
                                <p style="width:50%;">{{info.western_medicine_cost_total?info.western_medicine_cost_total:0}}元</p>
                            </div>
                            <div class="chargeUl" v-if="info.chinese_traditional_medicine_cost_total > 0">
                                <p style="width:50%;">中成费</p>
                                <p style="width:50%;">{{info.chinese_traditional_medicine_cost_total?info.chinese_traditional_medicine_cost_total:0}}元</p>
                            </div>
                            <div class="chargeUl" v-if="info.check_cost_total > 0">
                                <p style="width:50%;">检查费</p>
                                <p style="width:50%;">{{info.check_cost_total?info.check_cost_total:0}}元</p>
                            </div>
                            <div class="chargeUl" v-if="info.laboratory_cost_total > 0">
                                <p style="width:50%;">化验费</p>
                                <p style="width:50%;">{{info.laboratory_cost_total?info.laboratory_cost_total:0}}元</p>
                            </div>
                            <div class="chargeUl" v-if="info.treat_cost_total > 0">
                                <p style="width:50%;">治疗费</p>
                                <p style="width:50%;">{{info.treat_cost_total?info.treat_cost_total:0}}元</p>
                            </div>
                            <div class="chargeUl" style="border-top:1px solid #000;">
                                <p style="width:50%;">费用合计</p>
                                <p style="width:50%;">{{info.medfee_sumamt?info.medfee_sumamt:0}}元</p>
                            </div>
                            <div class="chargeUl" style="border-top:1px solid #000;">
                                <p style="width:50%;">记账支付</p>
                                <p style="width:50%;">{{info.fund_pay_sumamt?info.fund_pay_sumamt:0}}元</p>
                            </div>
                            <div class="chargeUl" style="border-top:1px solid #000;">
                                <p style="width:50%;">个人账号</p>
                                <p style="width:50%;">{{info.acct_pay?info.acct_pay: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.psn_cash_pay?info.psn_cash_pay:0}}元</p>
                            </div>
                        </div>
                        <div style="width:80%;max-height:500px;">
                            <div style="display:flex;" v-for="(item,i) in info.order_infos.slice(pageIndex * 13,(pageIndex * 13) + pageArr[pageIndex])" :key="i">
                                <div style="border-left:1px solid #000;border-right:1px solid #000;width:40%;text-align:center;">
                                    <p class="chargeP">
                                        <span v-if='item.type == 1'>{{item.advice.advice_name}}</span>
                                        <span v-if='item.type == 2'>{{item.project.project.project_name}}</span>
                                        <span v-if='item.type == 3'>{{item.project.good_info.specification_name}}</span>
                                    </p>
                                </div>
                                <div style="border-right:1px solid #000;width:15%;text-align:center;">
                                    <p class="chargeP">
                                        <span v-if='item.type == 1'>{{item.advice.drug.drug_spec}}</span>
                                        <span v-if='item.type == 2'>{{item.project.project.unit}}</span>
                                        <span v-if='item.type == 3'>{{item.project.unit}}</span>
                                    </p>
                                </div>
                                <div style="border-right:1px solid #000;width:15%;text-align:center;">
                                    <p class="chargeP">
                                        <span>{{item.cnt}}次</span>
                                    </p>
                                </div>
                                <div style="border-right:1px solid #000;width:15%;text-align:center;">
                                    <p class="chargeP">
                                        <span>{{item.pric}}元</span>
                                    </p>
                                </div>
                                <div style="width:15%;text-align:center;">
                                    <p class="chargeP">
                                        <span>{{item.cnt * item.pric}}元</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="moneyBox">
                    <p>实收金：{{info.medfee_sumamt?info.medfee_sumamt:0}}元</p>
                    <p>记账前金额：{{0.00}}元</p>
                    <p>扣款金额：{{0.00}}元</p>
                    <p>记账后金额：{{info.balc}}元</p>
                    <p>找赎金：{{0.00}}元</p>
                </div>
                <div class="actionBar">
                    <div>收费员：{{info.charge_admin.user_name}}</div>
                    <div>日期：{{info.setl_time ? info.setl_time.split(' ')[0] : ''}}</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(){
        this.page = 1
        this.pageArr = []
        if(this.info.order_infos.length <= 13){
            this.page = 1
            this.pageArr.push(this.info.order_infos.length)
            console.log('this.pageArr',this.pageArr)
        }else if(this.info.order_infos.length > 13){
            this.page = parseInt(this.info.order_infos.length / 13)
            let num = this.info.order_infos.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>