elizebeth/src/xt_pages/supply/components/purchaseOrderPrint.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">
                        <div style="font-size:22px;font-weight:bold;">{{ orgName }}</div>
                        <span style="font-weight:500;font-size:18px;">购货单</span>
                    </div>
                    <div style="display:flex;justify-content: space-between;">
                      <div style="text-align:left;margin-bottom:1px;font-size: 18px;">
                        供应商：{{getSupplyName(supplier_id)}}
                      </div>
                      <div style="margin-bottom:1px;font-size: 18px;">
                        单据日期：{{rate_of_concession}}
                      </div>
                      <div style="margin-bottom:1px;font-size: 18px;">
                        单据编号：{{number}}
                      </div>
                      <div style="margin-bottom:1px;font-size: 18px;">
                        币别：RMB
                      </div>
                    </div>
                    
                    <div class="table_panel">
                        <table class="table">
                            <thead>
                                <tr>
                                    <td style="line-height:18px;" width="80">序号</td>
                                    <td style="line-height:18px;" width="80">商品</td>
                                    <td style="line-height:18px;" width="80">单位</td>
                                    <td style="line-height:18px;" width="80">数量</td>
                                    <td style="line-height:18px;" width="80">购货单价</td>
                                    <td style="line-height:18px;" width="80">折扣率</td>
                                    <td style="line-height:18px;" width="80">折扣额</td> 
                                    <td style="line-height:18px;" width="60">购物金额</td>
                                    <td style="line-height:18px;" width="80">仓库</td>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for='(item,index) in tableList' :key="index">
                                    <td style="line-height:18px;"><span>{{index+ 1}}</span></td>
                                    <td style="line-height:18px;"><span>{{item.supply_name}}</span></td>
                                    <td style="line-height:18px;"><span></span></td>
                                    <td style="line-height:18px;"><span>{{item.count}}</span></td>
                                    <td style="line-height:18px;"><span>{{item.price}}</span></td>
                                    <td style="line-height:18px;"><span></span></td>
                                    <td style="line-height:18px;"><span></span></td>
                                    <td style="line-height:18px;"><span></span></td>
                                    <td style="line-height:18px;"><span></span></td>
                                </tr>
                                <tr>
                                  <td>合计</td>
                                  <td colspan="12" style="text-align:right;"></td>
                               </tr>
                            </tbody>
                        </table>

                        <div style="margin-top:1px;">
                            <div style="width:100px;">折扣额：</div><div style="width:100px;"></div>
                            <div style="width:100px;">折扣金额：</div><div style="width:100px;"><span></span></div>
                            <div style="width:100px;">本次付款：</div><div style="width:100px;"><span></span></div>
                            <div style="width:100px;">本次欠款：</div><div style="width:100px;"></div>
                       </div>
                        <div style="margin-top:1px;">
                            <div style="width:100px;">备注</div><div style="width:100px;"></div>
                       </div>
                       <div style="margin-top:1px;">
                            <div style="width:100px;">制单人：</div><div style="width:100px;"></div>
                            <div style="width:100px;">收货人签字：</div><div style="width:100px;"><span></span></div>
                            <div style="width:100px;">供应商签字：</div><div style="width:100px;"><span></span></div>
                       </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import BreadCrumb from '@/xt_pages/components/bread-crumb'

import { fetchAllAdminUsers } from "@/api/doctor";
import {getPurchaseOrderDetail} from "@/api/supply"
import print from 'print-js'
const moment = require('moment')
import { uParseTime } from '@/utils/tools'
export default {
    components:{
        BreadCrumb
    },
    data(){
        return{
          crumbs: [
            { path: false, name: '库存管理' },
            { path: false, name: '耗材管理' },
            { path: false, name: '入库单打印' },
          ],
            isEdit: 0,
            checked: false,
            signAndWeighBoxPatients: "sign-and-weigh-box-patients", 
            time_now:moment(new Date()).add('year',0).format("YYYY-MM-DD"),
            orgName:'',
            orgId:'',
            adminUserOptions:[],
            tableList:[],
            number:"",
            id:"",
            supplier_id:"",
            rate_of_concession:"",
            discount_amount:"",
            supplyList:[],
            document_date:"",
        }
    },
    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: 14px; padding: 1px 5px; } tbody tr td { border: 1px solid; text-align: center; font-size: 12px; 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
          })
      },

      getTime(val) {
         if(val < 0){
           return ""
         }
         if(val == ""){
          return ""
         }else {
          return uParseTime(val, '{y}-{m}-{d}')
         }
      },
      fetchAllAdminUsers() {
        fetchAllAdminUsers().then(response => {
          if (response.data.state == 1) {
            this.adminUserOptions = response.data.data.users

          }
        })
      },
      getXuserName(id) {
        if (id <= 0) {
          return "";
        }
        var name = "";
        if (
          this.adminUserOptions == null ||
          typeof this.adminUserOptions.length === "undefined"
        ) {
          return name;
        }
        var leng = this.adminUserOptions.length;
        if (leng == 0) {
          return name;
        }
        for (let index = 0; index < leng; index++) {
          if (this.adminUserOptions[index].id == id) {
            name = this.adminUserOptions[index].name;
            break;
          }
        }
        return name;
      },
      getPurchaseOrderDetail(){
        var id = this.$route.query.id
        getPurchaseOrderDetail(id).then(response=>{
        if(response.data.state == 1){
            var info = response.data.data.info
            this.is_check = info.is_check
            this.number = info.number
            this.id = info.id
            this.supplier_id = info.supplier_id
            this.rate_of_concession = info.rate_of_concession
            this.discount_amount = info.discount_amount
            this.document_date = info.document_date
            var orderInfo = response.data.data.orderInfo
            var supplyList = response.data.data.supplyList
            this.supplyList = supplyList
            for(let i=0;i<orderInfo.length;i++){
                orderInfo[i].supply_count = orderInfo[i].count
                orderInfo[i].supply_price = orderInfo[i].price
                orderInfo[i].supply_remake = orderInfo[i].remark
                orderInfo[i].type = orderInfo[i].is_source
                orderInfo[i].project_id = orderInfo[i].project_id
            }
            console.log("orderINFO23323232",orderInfo)
            this.tableList = orderInfo
        }
      })  
    },
    getSupplyName(id){
      var name = ""
      for(let i=0;i<this.supplyList.length;i++){
        if(id == this.supplyList[i].id){
          name = this.supplyList[i].supplier_name
        }
      }
      return name
    },
    },
    created(){
      this.orgName = this.$store.getters.xt_user.org.org_name;
      this.orgId = this.$store.getters.xt_user.org.id;
      this.fetchAllAdminUsers()
      this.getPurchaseOrderDetail()
    
    }
}
</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: 1px 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>