elizebeth/src/xt_pages/outpatientCharges/listTemplate/printTwo10265.vue

 <template>
  <div id="list-print" class="list-print">
    <div v-for="(i, index) in pageArr.length" :key="index">
      <div class="listTitle">{{$store.getters.xt_user.org.org_name}}费用清单</div>
      <!-- <div class="listTitle" :style="{position: 'absolute',top:(20 + (index * 160))  + 'px',left:200+ 'px',}">赤峰市肿瘤医院病人费用明细清单</div> -->
      <div class="listInfo">
        <div>病人ID:{{order.psn_no}}</div>
        <div>住院号：{{ order.mdtrt_id }}</div>
<!--        <div>次数：</div>-->
        <div>姓名：{{ order.psn_name }}</div>
        <div>性别：{{ patient.gender == 1 ? "男" : "女" }}</div>
      </div>

      <div class="listInfo">
        <div>入院科室：血液透析室</div>
        <div>出院科室：血液透析室</div>
        <!-- <div>入院日期：{{hospital_record.in_hosptial_time.split(' ')[0]}}</div> -->
        <!-- <div>出院日期：{{hospital_record.out_hosptial_time.split(' ')[0]}}</div> -->
        <!-- <div>住院天数:{{getDay(hospital_record.in_hosptial_time.split(' ')[0] ,hospital_record.out_hosptial_time.split(' ')[0])}}</div> -->
      </div>

      <div
        class="listInfo"
        style="padding-bottom: 10px; border-bottom: 1px solid"
      >
        <div>出院诊断：尿毒症</div>
        <div>床位号：</div>
        <div v-if="order&&order.insutype == '390'">费别：城乡居民基本医疗保险</div>
        <div v-if="order&&order.insutype == '310'">费别：职工基本医疗保险</div>

      </div>

      <table
        class="listTable"
        border="1"
        frame="hsides"
        rules="none"
        v-for="item in list"
        cellspacing="0"
      >
        <tr style="border: 1px solid" >
          <td style="width: 19%">账单名称：{{item.med_chrgitm_name}}</td>
          <td style="width: 21%">费用名称</td>
          <td style="width: 14%">规格</td>
          <td style="width: 10%">类别</td>
          <td style="width: 10%">单价(元)</td>
          <td style="width: 6%">数量</td>
          <td style="width: 20%">金额(元)</td>
        </tr>
        <tr v-for="subItem in item.details">
          <td style="width: 19%;white-space: nowrap;">{{subItem.name}}</td>
          <td style="width: 21%;white-space: nowrap;"></td>
          <td style="width: 14%">{{ subItem.spec }}</td>
          <td style="width: 10%;white-space: nowrap;">{{ subItem.medicine_insurance_kind }}</td>
          <td style="width: 10%">{{ subItem.price.toFixed(2) }}</td>
          <td style="width: 6%;white-space: nowrap;">{{ subItem.count }}{{ subItem.unit }}</td>
          <td style="width: 20%">{{ (subItem.price * subItem.count).toFixed(2) }}</td>
        </tr>

        <tr>
          <td style="width: 20%;white-space: nowrap;">甲类：{{item.jiaTotal}}</td>
          <td style="width: 20%;white-space: nowrap;">乙类药品：{{item.yiTotal}}</td>
          <td style="width: 5%;white-space: nowrap;">非药品：{{0.00}}</td>
          <td style="width: 5%;white-space: nowrap;">丙类：{{item.bingTotal}}</td>
          <td style="width: 5%;white-space: nowrap;">其他：{{0.00}}</td>
          <td></td>
          <td style="width: 20%;white-space: nowrap;">小计：{{item.total}}</td>

        </tr>
      </table>
      <table
          class="listTable"
          border="1"
          frame="below"
          rules="none"
          cellspacing="0"
      >
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td>总费用：{{order.medfee_sumamt}}</td>
        </tr>

        <tr>
          <td>报销类别费用合计</td>
          <td>甲类：{{getJaiTotal()}}</td>
          <td>乙类药品：{{getYiTotal()}}</td>
          <td>丙类：{{getBingTotal()}}</td>
          <td>非药品：0.00</td>
          <td></td>
          <td>其他：0.00</td>
        </tr>
      </table>
      <div class="tableBottom">
        <!-- <div class="tableBottomOne">制表人：{{ admin.user_name }}</div> -->
        <div class="tableBottomOne">制表日期：{{ getNowTime() }}</div>
        <!-- <div class="tableBottomOne">总费用：{{ order.medfee_sumamt }}元</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 {};
      },
    },hospital_record:{
      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: {
    getDay(dateString1,dateString2){
      var  startDate = Date.parse(dateString1);
      var  endDate = Date.parse(dateString2);
      if (startDate>endDate){
        return 0;
      }
      if (startDate==endDate){
        return 1;
      }
      var days=(endDate - startDate)/(1*24*60*60*1000);
      return  days;

    },
    getJaiTotal(){
      var total = 0
      for(let i =0; i < this.list.length; i++){
        total = parseFloat(total) + parseFloat(this.list[i].jiaTotal)

      }
      return total.toFixed(2)
    }, getYiTotal(){
      var total = 0
      for(let i =0; i<  this.list.length; i++){
        total = parseFloat(total) + parseFloat(this.list[i].yiTotal)

      }
      return total.toFixed(2)
    }, getBingTotal(){
      var total = 0
      for(let i =0; i < this.list.length; i++){
        total = parseFloat(total) + parseFloat(this.list[i].bingTotal)

      }
      return total.toFixed(2)
    },

    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 + " " + hh + ":" + mf + ":" + ss;
      return dateTime;
    },
    getTimes(time) {
      return uParseTime(time, "{y}-{m}-{d}");
    },
    getPage() {
      if (this.list.length <= 13) {
        this.page = 1;
        this.pageArr.push(this.list.length);
      } else if (this.list.length > 13) {
        this.page = parseInt(this.list.length / 13);
        let num = this.list.length % 13;
        for (var i = 0; i < this.page; i++) {
          this.pageArr.push(13);
        }
        if (num != 0) {
          this.pageArr.push(num);
        }
      }

      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: 40px;
  font-size: 14px;
  border-color: #000;
  text-align: left;
}
.listTable tr td {
  padding: 0 5px;
}
.tableBottom {
  font-size: 16px;
  display: flex;
  margin-top: 20px;
}
.tableBottomOne {
  margin-right: 40px;
}
</style>