elizebeth/src/xt_pages/dialysis/consumables_print.vue

<template>
    <div class="main-contain">
        <div class="position">
        <bread-crumb :crumbs="crumbs"></bread-crumb>
        <el-row style="float:right;">
            <el-col :span="24">
            <el-button size="small" icon="el-icon-printer" type="primary" @click="printAction">打印</el-button>
            </el-col>
        </el-row>
        </div>
        <div class="app-container" style="background-color: white;">
            <div id="print_content">
                <div class="print_main_content">
                    <div class="order_title_panl">
                        <span class="main_title">耗材统计表</span>
                    </div>
                    <div style="display:flex;justify-content: space-between;margin-bottom:10px;">
                        <p>统计时间:{{query.start_time}} - {{query.end_time}}</p>
                        <p>印单日期:{{print_time}}</p>
                    </div>
                    <div class="table_panel">
                        <table class="table">
                            <thead>
                                <tr>
                                  <td width="50">序号</td>
                                  <td width="50">商品类型</td>
                                  <td width="50">规格名称</td>
                                  <td width="50">耗材数量</td>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for='(item,index) in this.tableData' :key="index">
                                    <td>{{index + 1}}</td>
                                    <td>{{item.good_type_name}}</td>
                                    <td>{{item.good_name}}</td>
                                    <td>{{item.count}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>


                </div>
            </div>
        </div>
    </div>
</template>

<script>
import BreadCrumb from '@/xt_pages/components/bread-crumb'
import print from 'print-js'
const moment = require('moment')

import {getWareHouseOutList} from "@/api/consumable"
import { parseTime } from "@/utils";
import { GetDialysisGoodStatistics } from '@/api/dialysis'

export default {
    components:{
        BreadCrumb
    },
    data(){
        return{
          query:{
            start_time:0,
            end_time:0
          },
            crumbs: [
                { path: false, name: '耗材药品' },
                { path: false, name: '打印' }
            ],
            start_time:"",
            end_time:"",
            tableData:[],
           print_time:moment(new Date()).add('year', 0).format('YYYY-MM-DD'),
        }
    },
    methods:{
      calCount(query_warehouseout_info) {
        let total = 0
        var array = []
        array = query_warehouseout_info
        for (let i = 0; i < array.length; i++) {
          total = total + array[i].count
        }
        return total

      },
      GetDialysisGoodStatistics(){
        GetDialysisGoodStatistics(this.query).then(response => {
          if (response.data.state == 0) {
            this.$message.error(response.data.msg)
            return false
          } else {
            this.tableData = []
            for (let i = 0; i < response.data.data.stock_out.length; i++) {
              if (this.calCount(response.data.data.stock_out[i].query_warehouseout_info) > 0) {
                let obj = {
                  good_name: response.data.data.stock_out[i].specification_name,
                  good_type_name: response.data.data.stock_out[i].type.type_name,
                  count: this.calCount(response.data.data.stock_out[i].query_warehouseout_info)
                }
                this.tableData.push(obj)
              }
            }

          }

        })
      },
        printAction: function() {
            const style = '@media print { .print_main_content { background-color: white; width:960px;  margin:0 auto; padding: 0 0 20px 0; } .order_title_panl { text-align: center; } .main_title { font-size: 18px; line-height: 40px; font-weight: 500; } .table_panel { } .table { width: 100%; border: 1px solid; border-collapse: collapse; padding: 2px; } thead tr td { border: 1px solid; text-align: center; font-size: 20px; padding: 15px 5px; } tbody tr td { border: 1px solid; text-align: center; font-size: 18px; padding: 10px 5px; } .proj { padding: 5px 0; text-align: left; } .proj_title { font-size: 16px; font-weight: 500; line-height: 25px; } .proj_item { font-size: 15px; line-height: 20px; } .zone_name { font-weight: 500; } }'

            printJS({
            printable: 'print_content',
            type: 'html',
            documentTitle: '  ',
            style: style,
            scanStyles: false
            })
        },
        getlist(){
         var params = {
            start_time:this.start_time,
            end_time:this.end_time
          }
        getWareHouseOutList(params).then(response=>{
           if(response.data.state == 1){
             var wareoutlist = response.data.data.wareoutlist
             console.log("wareoutlist",wareoutlist)
             this.tableData = wareoutlist
           }
        })
       },
    },
    created(){
      var startime = this.$route.query.startime
       this.query.start_time = startime
      var endtime =  this.$route.query.endtime
      this.query.end_time = endtime
      this.GetDialysisGoodStatistics()
    }
}
</script>


<style rel="stylesheet/scss" lang="scss" scoped>
.print_main_content {
  background-color: white;
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 0 20px 0;

  .order_title_panl {
    text-align: center;

    .main_title {
      font-size: 18px;
      line-height: 40px;
      font-weight: 500;
    }
  }
  .table_panel {
    .table {
      width: 100%;
      border: 1px solid;
      border-collapse: collapse;
      padding: 2px;

      thead {
        tr {
          td {
            border: 1px solid;
            text-align: center;
            font-size: 20px;
            padding: 15px 5px;
          }
        }
      }
      tbody {
        tr {
          td {
            border: 1px solid;
            text-align: center;
            font-size: 18px;
            padding: 10px 5px;

            .proj {
              padding: 5px 0;
              text-align: left;

              .proj_title {
                font-size: 16px;
                font-weight: 500;
                line-height: 25px;
              }

              .proj_item {
                font-size: 15px;
                line-height: 20px;

                .zone_name {
                  font-weight: 500;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>