Vue_New/src/xt_pages/stock/stockPrint.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="text-align:right;margin-bottom:20px;font-size: 18px;">
                      打印时间：{{time_now}}
                    </div>
                    <div class="table_panel">
                        <table class="table">
                            <thead>
                                <tr>
                                    <td width="80">耗材类型</td>
                                    <td width="80">耗材名称</td>
                                    <td width="80">规格&单位</td>
                                    <td width="80">进货单价</td>
                                    <td width="80">生产商</td>
                                    <td width="80">入库数量</td>
                                    <td width="80">出库数量</td>
                                    <td width="80">剩余库存</td>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for='(item,index) in tableList' :key="index">
                                   <td>{{getGoodType(item.good_type_id)}}</td>
                                   <td>{{item.good_name }}</td>
                                   <td><span>{{item.specification_name }} / {{item.packing_unit}}</span></td>
                                   <td>{{item.price}}</td>
                                   <td>{{getManufacture(item.manufacturer)}}</td>
                                   <td>{{getInCount(item.good_id)}}</td>
                                   <!-- <td><span>{{getOutCount(item.good_id) + getAutoCount(item.good_id)}}</span></td>  -->
                                   <td><span>{{getInCount(item.good_id) - getStockCount(item.good_id)}}{{item.packing_unit}}</span></td>
                                   <!-- <td>{{getInCount(item.good_id)- getOutCount(item.good_id) - getAutoCount(item.good_id)}}</td> -->
                                   <!-- <td>{{getCancelCount(item.good_id)}}{{item .packing_unit}}</td> -->
                                   <td> {{getStockCount(item.good_id)}} {{item.packing_unit}} </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import BreadCrumb from '@/xt_pages/components/bread-crumb'
import { getAllStockList,GetAllGoodType,getStockDrugCount } from "@/api/stock";
import print from 'print-js'
const moment = require('moment')
export default {
    components:{
        BreadCrumb
    },
    data(){
        return{
          crumbs: [
            { path: false, name: '库存管理' },
            { path: false, name: '库存查询' },
            { path: false, name: '库存查询打印' },
          ],
          start_time:"",
          end_time:"",
          drug_name:"",
          drug_spec:"",
          keyword:"",
          tableData:[],
          time_now:moment(new Date()).add('year',0).format("YYYY-MM-DD"),
          type_name:"",
          limit:"",
          page:"",
          WarehouseInfo: {
          loading: false,
          warehouseInfoDate: [],
         },
          tableList:[],
          goodType:[],
          manufacturerList:[],
          countList:[],
          outCountList:[],
          autoCountList:[],
          cancelCountList:[],
        }
    },
    methods:{
      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: 16px; padding: 15px 5px; } tbody tr td { border: 1px solid; text-align: center; font-size: 16px; padding: 10px 5px; white-space: pre-line;} .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(){
        const params = {
          page: this.page,
          limit: this.limit,
          keywords: this.keywords,
          start_time:this.start_time,
          end_time:this.end_time,
          type:this.type_name,
        }
        getAllStockList(params).then(response=>{
         if(response.data.state == 1){
           var list = response.data.data.list
           console.log("list22222",list)
           this.tableList = list
           var total = response.data.data.total
           console.log("total",total)
           this.total = total
           var manufacturerList = response.data.data.manufacturerList
           this.manufacturerList = manufacturerList
         }
       })
      },
      GetAllGoodType() {
        GetAllGoodType().then(response => {
          if (response.data.state == 0) {
            this.$message.error(response.data.msg);
            return false;
          } else {
            for (let i = 0; i < response.data.data.goodType.length; i++) {
              this.goodType.push(response.data.data.goodType[i]);
            }
          }
        });
      },
      stockInCount: function(row) {
      let total = 0;
      for (let i = 0; i < row.query_warehousing_info.length; i++) {
        total = total + row.query_warehousing_info[i].warehousing_count;
      }
      return total;
    },
    salesReturnCount: function(row) {
      let total = 0;
      for (let i = 0; i < row.query_sales_return_info.length; i++) {
        total = total + row.query_sales_return_info[i].count;
      }
      return total;
    },
    stockOutCount: function(row) {
      let total = 0;
      for (let i = 0; i < row.query_warehouseout_info.length; i++) {
        total = total + row.query_warehouseout_info[i].count;
      }
      return total;
    },
    cancelStockCount: function(row) {
      let total = 0;
      for (let i = 0; i < row.query_cancel_stock_info.length; i++) {
        total = total + row.query_cancel_stock_info[i].count;
      }
      return total;
    },
    getGoodType(id){
      var name = ""
      for(let i=0;i<this.goodType.length;i++){
        if(id == this.goodType[i].id){
           name = this.goodType[i].type_name
        }
      }
      return name
     },
    getManufacture(id){
       var name = ""
       for(let i=0;i<this.manufacturerList.length;i++){
         if(id == this.manufacturerList[i].id){
           name = this.manufacturerList[i].manufacturer_name
         }
       }
       return name
     },
     getStockDrugCount(){
        var params ={
          keywords: this.keywords,
          start_time:this.start_time,
          end_time:this.end_time,
        }
      getStockDrugCount(params).then(response=>{
         if(response.data.state == 1){
           var count = response.data.data.count
           console.log("入库统计",count)
           this.countList = count
           var outlist = response.data.data.outList
           console.log("出库数量",outlist)
           this.outCountList = outlist
           var autoCount = response.data.data.autoCount
           console.log("autoCount",autoCount)
           this.autoCountList = autoCount
           var totalCount = response.data.data.totalCount
           console.log("totalcount",totalCount)
           this.cancelCountList = totalCount
         }
      })
    },
      getInCount(id){
        var count= ""
      for(let i=0;i<this.countList.length;i++){
        if(id == this.countList[i].good_id){
            count = this.countList[i].count
        }
      }
      return count
      },
      getOutCount(id){
        var count = ""
        for(let i=0;i<this.outCountList.length;i++){
          if(id == this.outCountList[i].good_id){
            count = this.outCountList[i].count
          }
        }
        return count
      },
      getAutoCount(id){
        var count= ""
        for(let i=0;i<this.autoCountList.length;i++){
          if(id == this.autoCountList[i].good_id){
            count = this.autoCountList[i].count
          }
        }
        return count
      },
      getCancelCount(id){
        var count = 0
        for(let i=0;i<this.cancelCountList.length;i++){
          if(id == this.cancelCountList[i].good_id){
              count = this.cancelCountList[i].count
          }
        }
        return count
     },
    getStockCount(id){
     var stock_count = 0
     for(let i=0;i<this.countList.length;i++){
       if(id == this.countList[i].good_id){
         stock_count = this.countList[i].stock_count
       }
     }
     return stock_count
     }
    },
    created(){
      var starttime =  this.$route.query.start_time
      this.start_time = starttime
      var endtime =  this.$route.query.end_time
      this.end_time = endtime
      var type_name = this.$route.query.type_name
      this.type_name = type_name
      var keyword = this.$route.query.keyword
      this.keyword = keyword
      this.page = this.$route.query.page
      this.limit = this.$route.query.limit
      this.getlist()
      this.GetAllGoodType()
      this.getStockDrugCount()
    }
}
</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: 18px;
            padding: 15px 5px;
          }
        }
      }
      tbody {
        tr {
          td {
            border: 1px solid;
            text-align: center;
            font-size: 18px;
            padding: 10px 5px;
            white-space: pre-line;
            .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>