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

<template>
    <div id="list-print" class="list-print">
        <div v-for='(i,index) in pageArr.length' :key="index" style="page-break-after: always;">
        <div class="listTitle">{{$store.getters.xt_user.org.org_name}}费用清单</div>
        <div class="listInfo">

            <div>患者姓名：{{patient.name}}</div>
            <div v-if="$store.getters.xt_user.org.id != 10191">透析号：{{patient.dialysis_no}}</div>
          <div v-if="$store.getters.xt_user.org.id == 10191">身份证号：{{patient.id_card_no}}</div>

          <div>性别：{{patient.gender == 1 ? '男': '女'}}</div>
            <div>年龄：{{patient.age}}  岁</div>
            <div v-if="order.settle_type == 1">收费日期：{{getTimes(order.settle_accounts_date)}}</div>
            <div v-if="order.settle_type == 2">收费日期：{{getTimes(order.settle_start_time)}} 至 {{getTimes(order.settle_end_time)}}</div>


        </div>
        <table class="listTable" border="1">
            <tr>
                <td style="width:15%">开方日期</td>
                <td style="width:10%">类别</td>
              <td style="width:10%">医保编码</td>
              <td style="width:30%">项目名称</td>
                <td style="width:10%">规格</td>
                <td style="width:10%">单价(元)</td>
                <td style="width:6%">数量</td>
                <td style="width:10%">金额(元)</td>
              <td v-if="$store.getters.xt_user.org_id == 10318 || $store.getters.xt_user.org_id == 0 " style="width:10%">医保类型</td>


            </tr>
            <tr v-for="item in list.slice(index * 16,(index * 16) + pageArr[index])">
                <td style="width:15%">{{item.p_time}}</td>
                <td style="width:10%">{{item.med_chrgitm_type}}</td>
                <td style="width:10%">{{item.code}}</td>
                <td style="width:30%">{{item.name}}</td>
                <td style="width:10%">{{item.spec}}</td>
                <td style="width:10%">{{item.price}}</td>
                <td style="width:6%">{{item.count}}{{item.unit}}</td>
                <td style="width:10%">{{(item.price * item.count).toFixed(2)}}</td>
              <td v-if="$store.getters.xt_user.org_id == 10318 || $store.getters.xt_user.org_id == 0 " style="width:10%">{{getMedicineInsuranceKind(item.type)}}</td>
            </tr>
        </table>
        <div class="tableBottom">
          <div class="tableBottomOne">制表人：{{admin.user_name}}</div>
          <div class="tableBottomOne" v-if="$store.getters.xt_user.org.id != 10318">制表日期：{{ getNowTime()}}</div>
          <div class="tableBottomOne">总费用：{{order.medfee_sumamt}}元</div>
          <div class="tableBottomOne">基金总额：{{order.fund_pay_sumamt}}元</div>
          <div class="tableBottomOne">统筹支付：{{order.hifp_pay}}元</div>
          <div class="tableBottomOne">医疗救助：{{order.maf_pay}}元</div>
          <div class="tableBottomOne">医保报销：{{order.fund_pay_sumamt}}元</div>
          <div class="tableBottomOne">个人支付：{{order.psn_cash_pay}}元</div>
        </div>
        </div>
    </div>
</template>

<script>
  import { uParseTime } from '@/utils/tools'

  export default {
    props: {
      list: {
        type: Array,
        default: function () {
          return [];
        }
      },
      patient: {
        type: Object,
        default: function () {
          return {};
        }
      }, order: {
        type: Object,
        default: function () {
          return {};
        }
      }, admin: {
        type: Object,
        default: function () {
          return {};
        }
      },
    },
    data(){
        return{
            page:1,
            pageArr:[],
        }
    },
    // mounted(){
    //     this.getPage()
    // },
    methods:{
      getMedicineInsuranceKind(type){
        switch (type) {
          case "01":
            return '甲类';
          case "02":
            return '乙类';
          case "03":
            return '自费';
            break;
        }

      },
      getNowTime: function () {
        let dateTime
        let yy = new Date().getFullYear()
        let mm = new Date().getMonth() + 1
        let dd = new Date().getDate()
        let hh = new Date().getHours()
        let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes()
          :
          new Date().getMinutes()
        let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds()
          :
          new Date().getSeconds()
        dateTime = yy + '-' + mm + '-' + dd
        return dateTime
      },
      getTimes(time) {
        return uParseTime(time, '{y}-{m}-{d}')
      },
      getPage(){

        if(this.list.length <= 16){
            this.page = 1
            this.pageArr.push(this.list.length)
        }else if(this.list.length > 16){
            this.page = parseInt(this.list.length / 16)
            let num = this.list.length % 16
            for (var i=0;i<this.page;i++){
                this.pageArr.push(16)
            }
            if(num != 0){
                this.pageArr.push(num)
            }
        }
        console.log('this.list',this.list);
        console.log('this.pageArr',this.pageArr);
      }

    },
    watch:{
        list: {
            handler(newVal) {
                this.getPage()
            },
            deep: true
        }
    }

  }


</script>

<style lang="scss" scoped>
.list-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;
}
.listTitle{
    font-size: 24px;
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
}
.listInfo{
    display: flex;
    font-size: 16px;
    justify-content: space-between;
    margin: 10px 0;
}
.listTable{
    width: 100%;
    text-align: center;
    border-collapse: collapse;
    line-height: 20px;
    font-size: 14px;
    border-color: #000;
    text-align: left;
}
.listTable tr td {
    padding: 0 5px;
}
.tableBottom{
    font-size: 12px;
    display: flex;
    margin-top: 20px;
}
.tableBottomOne{
    margin-right: 20px;
}
</style>