elizebeth/src/xt_pages/stock/drugs/drugDamagePrint.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="printTitle">药品调价登记单</div>
                <div class="flex">
                    <div>药库类别：</div>
                    <div>调价日期：</div>
                </div>
                <div class="flex">
                    <div>单据编号：</div>
                    <div>打印日期：{{nowtime}}</div>
                </div>
                <div class="tableTitle">
                    <div style="width:8%">货号</div>
                    <div style="width:8%">药品名称</div>
                    <div style="width:8%">规格</div>
                    <div style="width:8%">单位</div>
                    <div style="width:8%">批次</div>
                    <div style="width:8%">调价数量</div>
                    <div style="width:8%">原进货价</div>
                    <div style="width:8%">新进货价</div>
                    <div style="width:8%">进货差价</div>
                    <div style="width:8%">原零售价</div>
                    <div style="width:8%">新零售价</div>
                    <div style="width:8%">零售差价</div>
                </div>
                <div class="tableTr" v-for="(item,index) in this.tableData" :key="index">
                    <div style="width:8%"></div>
                    <div style="width:8%">{{item.drug_name}}</div>
                    <div style="width:8%"></div>
                    <div style="width:8%">{{item.warehousing_unit}}</div>
                    <div style="width:8%">{{item.number}}</div>
                    <div style="width:8%">{{item.count}}</div>
                    <div style="width:8%">{{item.retail_price}}</div>
                    <div style="width:8%">{{item.new_price}}</div>
                    <div style="width:8%"></div>
                    <div style="width:8%">{{item.retail_price}}</div>
                    <div style="width:8%">{{item.new_price}}</div>
                    <div style="width:8%"></div>
                </div>
                <div class="tableBottom">
                    <div style="width:8%">合计：</div>
                    <div style="width:8%"></div>
                    <div style="width:8%"></div>
                    <div style="width:8%"></div>
                    <div style="width:8%"></div>
                    <div style="width:8%"></div>
                    <div style="width:8%"></div>
                    <div style="width:8%"></div>
                    <div style="width:8%"></div>
                    <div style="width:8%"></div>
                    <div style="width:8%"></div>
                    <div style="width:8%"></div>
                </div>
                <div style="display:flex;margin-top:1px;float:right;margin-top:10px;">
                    <div style="width:80px;">审批：</div><div style="width:100px;"></div>
                    <div style="width:100px;">药材主任：</div><div style="width:60px;"></div>
                    <div style="width:50px;">会计：</div><div style="width:100px;"></div>
                    <div style="width:50px;">审核：</div><div style="width:100px;"></div>
                    <div style="width:70px;">制单人：</div><div style="width:100px;"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import BreadCrumb from '@/xt_pages/components/bread-crumb'
const moment = require('moment');
import { uParseTime } from '@/utils/tools'
import { getDrugDamagePrint } from "@/api/drug/drug"
export default {
    components:{
        BreadCrumb
    },
    data(){
        return{
          crumbs: [
            { path: false, name: '库存管理' },
            { path: false, name: '耗材管理' },
            { path: false, name: '药品调价打印' },
          ],
          ids:"",
          tableData:[],
          nowtime: moment(new Date()).format('YYYY-MM-DD'),
        }
    },
    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;} }';
            printJS({
            printable: 'print_content',
            type: 'html',
            documentTitle: '  ',
            style: style,
            scanStyles: false
            })
        },
        getDrugDamagePrint(ids){
          var params = {
            ids:ids,
          }
          getDrugDamagePrint(params).then(response=>{
            if(response.data.state == 1){
             console.log("hhhhh",response.data.data.list)
              this.tableData = response.data.data.list
            }
          })
        }


    },
    created(){
     this.ids = this.$route.query.ids
     this.getDrugDamagePrint(this.ids)
    }
}
</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;}
</style>