elizebeth/src/xt_pages/stock/drugs/inventoryPrint.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">

                <table class="printTable" border="1">
                    <tr>
                        <td>序号</td>
                        <td>名称</td>
                        <td>规格</td>
                        <td>批号</td>
                        <td>生产日期</td>
                        <td>有效日期</td>
                        <td>生产企业</td>
                        <td>国药准字</td>
                        <td>单位</td>
                        <td>库存量</td>
                    </tr>
                    <tr v-for="(item,index) in tableData" :key="index">
                        <td>{{index+1}}</td>
                        <td>{{item.drug_name}}</td>
                        <td>{{item.specification_name}}</td>
                        <td>{{item.batch_number}}</td>
                        <td>{{getTime(item.product_date)}}</td>
                        <td>{{getTime(item.expiry_date)}}</td>
                        <td>{{getManufacturerName(item.manufacturer)}}</td>
                        <td>{{item.number}}</td>
                        <td>{{item.max_unit}}</td>
                        <td></td>
                    </tr>
                </table>

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

<script>
import BreadCrumb from '@/xt_pages/components/bread-crumb'
const moment = require('moment');
import print from "print-js";
import { uParseTime } from '@/utils/tools'
import { getInventoryModeList } from "@/api/drug/drug"
export default {
    components:{
        BreadCrumb
    },
    data(){
        return{
          crumbs: [
            { path: false, name: '库存管理' },
            { path: false, name: '药品管理' },
            { path: false, name: '药品盘点打印' },
          ],
          ids:"",
          tableData:[],
          manufacturerList:[],
        }
    },
    methods:{
        printAction: function() {
            const style = '@media print { .printTitle{font-size: 22px;text-align: center;}.flex{display: flex;justify-content: space-between;}.tableTitle{display: flex;border-top:1px solid #000;border-bottom: 1px solid #000;padding: 10px 0;}.tableTr{display: flex;border-bottom: 1px dashed #000;padding: 10px 0;}.tableBottom{display: flex;border-bottom: 1px solid #000;padding: 10px 0;}.printTable td{padding:5px;} }';
            printJS({
            printable: 'print_content',
            type: 'html',
            documentTitle: '  ',
            style: style,
            scanStyles: false
            })
        },
        getlist(){
          getInventoryModeList().then(response=>{
             if(response.data.state == 1){
               var list = response.data.data.list
               console.log("list23232323",list)
               this.manufacturerList = response.data.data.manufacturerList
               for(let i=0;i<list.length;i++){
                 list[i].specification_name = ""
                 list[i].specification_name = list[i].dose +list[i].dose_unit+"*"+list[i].min_number+ list[i].min_unit+"/"+list[i].max_unit
               }
               this.tableData = list
             }
          })
        },
     getTime(val) {
         if(val < 0){
           return ""
         }
         if(val == ""){
          return ""
         }else {
          return uParseTime(val, '{y}-{m}-{d}')
         }
      },
      getManufacturerName(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
        }


     },
    created(){
      this.getlist()
    }
}
</script>


<style rel="stylesheet/scss" lang="scss" scoped>
.printTitle{font-size: 22px;text-align: center;}
.flex{display: flex;justify-content: space-between;}
.tableTitle{display: flex;border-top:1px solid #000;border-bottom: 1px solid #000;padding: 10px 0;}
.tableTr{display: flex;border-bottom: 1px dashed #000;padding: 10px 0;}
.tableBottom{display: flex;border-bottom: 1px solid #000;padding: 10px 0;}
.printTable{width:100%;border-collapse: collapse;}
.printTable td{padding:5px;}
</style>