elizebeth/src/xt_pages/stock/detail/print.vue

<template>
  <div class="main-contain">
    <div class="position">
      <bread-crumb :crumbs='crumbs'></bread-crumb>
      <el-button :loading="loading" size="small" icon="el-icon-printer" @click="printThisPage" type="primary">打印
      </el-button>
    </div>
    <div class="app-container ">
      <div id="dialysis-print-box">
        <div class="dialysis-print-order">
          <div class="order-yy-name">{{orgname}}</div>
          <div class="order-title" v-if="type == 1">入库单</div>
        
          <div class="order-title" v-if="type == 2">出库单</div>
          <div class="order-title" v-if="type == 4">退库单</div>

          <div style="float: left;margin-bottom: 10px;">{{getDateOne()}}</div>
          <div style="float: right;margin-bottom: 10px;">{{getDateTwo()}}</div>



          <table class="print-table" border="1">
            <tbody>
            <tr>
              <td style="line-height: 50px" width="50">序号</td>
              <td style="line-height: 50px" width="200">耗材名称</td>
              <td style="line-height: 50px" width="200">规格型号</td>
              <td style="line-height: 50px" width="80">数量</td>
              <td style="line-height: 50px" width="50">单位</td>
            
              <td style="line-height:50px" width="80">
                <span v-if="type == 1">进货价</span> 
                <span v-if="type == 2">出货价</span> 
                <span v-if="type == 4">退库价</span> 
              </td>
              <td style="line-height: 50px" width="80">总价</td>
              <td style="line-height: 50px" width="80">备 注</td>
            </tr>

            <tr v-for="(item,index) in stockDatas" :key="item.id">
              <td style="line-height: 50px">&nbsp;
                {{index+1}}
              </td>
              <td style="line-height: 50px">
                <!-- <span>{{item.GoodInfo.good_name}}</span> -->
                {{item.good_name}}
              </td>
              <td style="line-height: 50px">
                <!-- <span>{{item.GoodInfo.specification_name}}</span> -->
                {{item.specification_name}}
              </td>
             
              <td style="line-height: 50px">
                <span v-if="type == 1"> {{ item.warehousing_count }}</span>
                <span v-if="type == 2"> {{getStockCount(item.good_id) }}</span>
                <span v-if="type == 4"> {{ item.count }}</span>
              </td>
              <td style="line-height: 50px">
                <!-- <span>{{item.GoodInfo.packing_unit}}</span> -->
                {{item.packing_unit}}
              </td>
              <td style="line-height:50px">
                <span v-if="type == 1"> {{ item.price }}</span>
                <span v-if="type == 2"> {{ item.packing_price }}</span>
                 <span v-if="type == 4"> {{ item.price }}</span>
              </td>
              <td style="line-height:50px">
                <span v-if="type == 1">{{(item.warehousing_count * item.price).toFixed(2)}}</span>
                <span v-if="type == 2">{{(item.count * item.packing_price).toFixed(2)}}</span>
                <span v-if="type == 4">{{(item.count * item.price).toFixed(2)}}</span>
              </td>
              <td style="line-height: 50px">
                 <span v-if="type == 1">{{item.remark}}</span>
              </td>
            </tr>
            </tbody>
          </table>
          <table class="print-table" border="1">
            <tr>
              <td style="line-height: 50px" colspan="6" width="550">合计</td>
              <td width="80" style="line-height: 50px" >
                <span v-if="type == 1">{{getWareInfoTotal().toFixed(2)}}</span> 
                <span v-if="type == 2">{{getWareOutTotal().toFixed(2)}}</span> 
                <span v-if="type == 4">{{getWareOutTotal().toFixed(2)}}</span> 
              </td>
              <td width="80" style="line-height: 50px">

              </td>
            </tr>
          </table> 

          <div style="display:flex;margin-top:20px;float:right;">
            <div style="width:50px;">审批：</div><div style="width:100px;"></div>
            <div style="width:80px;">药材主任：</div><div style="width:100px;"></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>
  </div>

</template>

<script>
  import { getPrintStockGood,getGoodDetailPrintList,getStockDetail } from '@/api/stock'
  import { getDataConfig } from '@/utils/data'
  import { jsGetAge, uParseTime } from '@/utils/tools'
  import BreadCrumb from '@/xt_pages/components/bread-crumb'
  import print from 'print-js'

  export default {
    name: 'dialysisPrintOrder',
    components: {
      BreadCrumb

    },
    data() {
      return {
        crumbs: [
          { path: false, name: '出入库明细' },
          { path: false, name: '打印单' }
        ],
        loading: false,
        orgname: '',
        queryParams: {
          start_time: this.$route.query.start_time,
          end_time: this.$route.query.end_time,
          type: this.$route.query.type,
          limit:this.$route.query.limit,
          page:this.$route.query.page,
        },
        totalPrice: 0,
        stockDatas: [],
        goodUnit: [],
        type: this.$route.query.type,
        start_time: this.$route.query.start_time,
        end_time: this.$route.query.end_time,
        stockTotal:[],
        wareOutInfo:[],
        org_id:0,
        informationList:[]
      }
    },
    methods: {
      getDateOne(){
        if (this.type == 1){
          return "入库日期: "+this.start_time +"~"+this.end_time
        }else if(this.type == 2){
          return "退货日期: "+this.start_time +"~"+this.end_time
        }else if(this.type == 3){
          return "出库日期: "+this.start_time +"~"+this.end_time
        }else if(this.type == 4){
          return "退库日期: "+this.start_time +"~"+this.end_time
        }

      },
      getDateTwo(){
        var ptime = Math.round(new Date().getTime() / 1000)
        return "印单日期："+uParseTime(ptime, '{y}-{m}-{d}')
      },
      getTime(value, temp) {
        if (value == 0) {
          return ''
        }
        if (value != undefined) {
          return uParseTime(value, temp)
        }
        return ''
      },
      printThisPage() {
        var ptime = Math.round(new Date().getTime() / 1000)
        this.print_time = uParseTime(ptime, '{y}-{m}-{d} {h}:{i}')
        const style = '@media print {.dialysis-print-order{width:960px;margin:0 auto}.dialysis-print-order .order-yy-name{margin:auto;text-align:center;font-size:20px;letter-spacing:5px}.dialysis-print-order .order-title{margin:auto;font-weight:600;text-align:center;font-size:22px;padding:10px 20px 20px 20px}.dialysis-print-order .table-box{width:100%;line-height:23px;font-size:14px}.dialysis-print-order .print-table{width:100%;text-align:center;border-collapse:collapse;line-height:25px;font-size:14px}.dialysis-print-order .print-table-no{width:100%;text-align:center;border-collapse:collapse;font-size:14px}.dialysis-print-order .under-line{border-bottom:1px solid #999;width:95%;text-align:center;margin-left:2px}.dialysis-print-order .title-box{text-align:center;font-size:16px;border:1px solid #666}.dialysis-print-order .radio-lebel-box{font-weight:400;cursor:pointer}.dialysis-print-order .radio-no{opacity:0;outline:0;position:absolute;margin:0;width:0;height:0;z-index:-1}.dialysis-print-order .radio-inner{white-space:nowrap;cursor:pointer;outline:0;display:inline-block;line-height:1;position:relative;vertical-align:middle}.dialysis-print-order .radio-fang{display:inline-block;position:relative;border:1px solid #000;box-sizing:border-box;width:14px;height:14px;background-color:#fff;z-index:1;transition:border-color .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s cubic-bezier(.71,-.46,.29,1.46)}.dialysis-print-order .is-checked-radio::after{content:"√";font-size:15px}}.dialysis-print-order .print-table-no tr td { padding: 8px 5px; line-height: 25px; }.es-img{height: 20px; }.advice-name{text-align: left;}.advice-children{display:flex;} .dialysis-print-order .print-table tr td{padding: 0px 0px;} .print-template-two tr {line-height: 30px;}   .title-box-pro{border: 0 #fff;line-height: 40px;height: 40px;text-align: left;padding-left: 10px !important;}  .text-align-left{text-align: left !important;padding-left:10px !important;font-size: 14px !important;line-height: 25px;}'
        printJS({
          printable: 'dialysis-print-box',
          type: 'html',
          style: style,
          scanStyles: false
        })
      },
      getDialysisRecord() {
        this.loading = true
        
        getPrintStockGood(this.queryParams).then(response => {
          if (response.data.state == 1) {
            var stockTotal = response.data.data.stockTotal
          
            this.stockTotal = stockTotal
           
            var info = response.data.data.info
           
            this.wareOutInfo = info
            var org_id = response.data.data.orgid
          
            this.org_id = org_id

            var informationlist = response.data.data.infomationList
           
            this.informationList = informationlist
            this.stockDatas = []
            for (let i = 0; i < response.data.data.list.length; i++) {
              if (this.type == 1) {
                if (response.data.data.list[i].query_warehousing_info.length > 0) {
                  this.stockDatas.push(response.data.data.list[i])
                }
                console.log("入库打印数据源",this.stockDatas)
              } else if (this.type == 2) {
                if (response.data.data.list[i].query_sales_return_info.length > 0) {
                  this.stockDatas.push(response.data.data.list[i])
                }

              } else if (this.type == 3) {
                
                if (response.data.data.list[i].query_warehouseout_info.length > 0) {
                  this.stockDatas.push(response.data.data.list[i])
                }
               
                console.log("出库打印数据源",this.stockDatas)

                
              } else if (this.type == 4) {
                if (response.data.data.list[i].query_cancel_stock_info.length > 0) {
                  this.stockDatas.push(response.data.data.list[i])
                }
              }

            }
            var obj =  null
            for(let i = 0; i <this.stockDatas.length;i++){
              obj = this.stockDatas[i]
            }
           console.log("9999999",this.stockDatas)
           
           var newArr =  this.unique(this.stockDatas)
           console.log("耗材出库去重",newArr)

           this.stockDatas = newArr
            // if (this.stockDatas.length < 50) {
            //   var nl = 50 - this.stockDatas.length
            //   for (let index = 0; index < nl; index++) {
            //     this.stockDatas.push([])
            //   }
            // }
            this.loading = false
          } else {
            this.loading = false
            this.$message.error('请求数据失败')
            return false
          }
        })
      }, 
      calCount(stock) {
      
        let total = 0
        var array = []
        if (this.type == 1) {
          array = stock.query_warehousing_info
        } else if (this.type == 2) {
          array = stock.query_sales_return_info
        } else if (this.type == 3) {
          array = stock.query_warehouseout_info
        } else if (this.type == 4) {
          array = stock.query_cancel_stock_info
        }

        for (let i = 0; i < array.length; i++) {
          if (this.type == 1) {
            total = total + array[i].warehousing_count
          } else if (this.type == 2) {
            total = total + array[i].count
          } else if (this.type == 3) {
            total = total + array[i].count

          } else if (this.type == 4) {
            total = total + array[i].count
          }
        }
        return total

      }, calTotal(stock) {

        console.log(stock)

        var array = []
        if (this.type == 1) {
          array = stock.query_warehousing_info
        } else if (this.type == 3) {
          array = stock.query_warehouseout_info
        }

        let total_price = 0.0
        for (let i = 0; i < array.length; i++) {
          if(this.type == 1) {
            total_price = total_price + array[i].warehousing_count * array[i].price
          }else if(this.type == 3){
            total_price = total_price + array[i].count * array[i].price

          }
        }
        return  Math.floor(total_price * 100) / 100
      },
       calTotalPrice() {

        var amountPrice = 0
        for (let i = 0; i < this.stockDatas.length; i++) {
          var obj = this.stockDatas[i]
          var len = 0
          if (this.type == 1) {
            len = obj.query_warehousing_info.length
          } else if (this.type == 3) {
            len = obj.query_warehouseout_info.length
          }
          let total_price = 0.0
          for (let a = 0; a < len; a++) {
            if (this.type == 1) {
              total_price = total_price + obj.query_warehousing_info[a].total_price
            } else if (this.type == 3) {
              total_price = total_price + obj.query_warehouseout_info[a].total_price
            }
          }

          amountPrice = amountPrice +  Math.floor(total_price* 100) / 100
        }
        return Math.floor(amountPrice* 100) / 100
      }, getTotal: function(price, total) {
        var m = 0, r1, r2
        var s1 = price.toString()
        var s2 = total.toString()
        try {
          m += s1.split('.')[1].length
        } catch (e) {

        }
        try {
        } catch (e) {
          m += s2.split('.')[1].length
        }
        r1 = Number(price.toString().replace('.', ''))
        r2 = Number(total.toString().replace('.', ''))
        return r1 * r2 / Math.pow(10, m)
      },
      getUnit(id){
        var name = ""
        for(let i=0;i<this.goodUnit.length;i++){
          if(this.goodUnit[i].id == id){
            name = this.goodUnit[i].name
          }
        }
        return name
      },

     getStockCount(id){
       
       var count = ""
       for(let i=0;i<this.stockTotal.length;i++){
          if(id == this.stockTotal[i].good_id){
             count = this.stockTotal[i].count
          }
       }
       return count
     },
     getWareOut(id){
      var count = ""
      for(let i=0;i<this.wareOutInfo.length;i++){
         if(id == this.wareOutInfo[i].good_id){
            count = this.wareOutInfo[i].count
         }
      }
      return count
     },
     getPrice(id){
       var sum = ""
       for(let i=0;i<this.informationList.length;i++){
        for(let j=0;j<this.wareOutInfo.length;j++){
           if(this.informationList[i].id == this.wareOutInfo[j].good_id){
             this.wareOutInfo[j].buy_price =  this.informationList[i].buy_price 
           }
        }
       }
      
       for(let j=0;j<this.wareOutInfo.length;j++){
         if(id == this.wareOutInfo[j].good_id){
            sum += (this.wareOutInfo[j].buy_price * this.wareOutInfo[j].count).toFixed(2)
         }
       }
       
       return sum
       
     },
     getReailPrice(id){
       var price = 0
       for(let i=0;i<this.informationList.length;i++){
          if(id == this.informationList[i].id){
             price = this.informationList[i].buy_price
          }
       }
       return price
     },
     getTotalPrice(){
       var total_price = 0
       for(let i=0;i<this.stockDatas.length;i++){
         total_price += (this.getStockCount(this.stockDatas[i].id) * this.getReailPrice(this.stockDatas[i].id))
       }
       return total_price
     },
     getTotalPriceOne(){
       var total_price = 0
       for(let i=0;i<this.stockDatas.length;i++){
         total_price +=(this.getWareOut(this.stockDatas[i].id) * this.getReailPrice(this.stockDatas[i].id))
       }
       return total_price
     },
     unique(arr) {
        const res = new Map();
        return arr.filter((arr) => !res.has(arr.id) && res.set(arr.id, 1));
     },
     getGoodDetailPrintList(){
      getGoodDetailPrintList(this.queryParams).then(response=>{
         if(response.data.state == 1){
           var list = response.data.data.list
           console.log("新的",list)
           this.stockDatas = list
           var stockTotal = response.data.data.stockTotal
          this.stockTotal = stockTotal
           
           
         }
      })
     },

     getStockDetail(){
      getStockDetail(this.queryParams).then(response=>{
        if(response.data.state == 1){
          var total =   response.data.data.total
          var list = response.data.data.list
          this.stockDatas = list
        }
      })
     },
     getWareInfoTotal(){
       var total = 0
       for(let i=0;i<this.stockDatas.length;i++){
         total+= this.stockDatas[i].warehousing_count * this.stockDatas[i].price
       }
       return total
     },
     getWareOutTotal(){
       var total = 0
       for(let i=0;i<this.stockDatas.length;i++){
         total+= this.stockDatas[i].count * this.stockDatas[i].packing_price
       }
       return total
     }
    },
    created() {
      var xtuser = this.$store.getters.xt_user
      this.orgname = xtuser.org.org_name
      this.goodUnit = this.$store.getters.good_unit

      // this.getDialysisRecord()
      this.getGoodDetailPrintList()
      // this.getStockDetail()
    }

  }
</script>

<style>
  .dialysis-print-order {
    width: 960px;
    margin: 0 auto
  }

  .dialysis-print-order .order-yy-name {
    margin: auto;
    text-align: center;
    font-size: 20px;
    letter-spacing: 5px;
  }

  .dialysis-print-order .order-title {
    margin: auto;
    font-weight: 600;
    text-align: center;
    font-size: 22px;
    padding: 10px 20px 20px 20px;
  }

  .dialysis-print-order .table-box {

    width: 100%;
    line-height: 23px;
    font-size: 14px;
  }

  .dialysis-print-order .print-table {
    width: 100%;
    text-align: center;
    border-collapse: collapse;
    line-height: 40px;
    font-size: 14px;
  }

  .dialysis-print-order .print-table-no {
    width: 100%;
    text-align: center;
    border-collapse: collapse;
    font-size: 14px;
  }

  .dialysis-print-order .under-line {
    border-bottom: 1px solid #999;
    width: 95%;
    text-align: center;
    margin-left: 2px;


  }

  .dialysis-print-order .title-box {
    text-align: center;
    font-size: 16px;
  }

  .dialysis-print-order .radio-lebel-box {
    font-weight: 400;
    cursor: pointer;
  }

  .dialysis-print-order .radio-no {
    opacity: 0;
    outline: none;
    position: absolute;
    margin: 0;
    width: 0;
    height: 0;
    z-index: -1;
  }

  .dialysis-print-order .radio-inner {
    white-space: nowrap;
    cursor: pointer;
    outline: none;
    display: inline-block;
    line-height: 1;
    position: relative;
    vertical-align: middle;
  }

  .dialysis-print-order .radio-fang {
    display: inline-block;
    position: relative;
    border: 1px solid #000;
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    background-color: #fff;
    z-index: 1;
    transition: border-color .25s cubic-bezier(.71, -.46, .29, 1.46), background-color .25s cubic-bezier(.71, -.46, .29, 1.46);
  }

  .dialysis-print-order .is-checked-radio::after {
    content: "√";
    font-size: 15px;
  }


  .dialysis-print-order .print-table-no tr td {
    padding: 8px 5px;
    line-height: 25px;
  }

  .dialysis-print-order .print-table tr td {
    padding: 1px 1px;
    /*line-height: 25px;*/
  }

  .es-img {
    height: 25px;
  }

  .advice-name {
    text-align: left;
  }

  .advice-children {
    display: flex;
  }

  .title-box-pro {
    border: 0 #fff;
    line-height: 25px;
    height: 25px;
    text-align: left;
    padding-left: 10px !important;
  }

  .title-box-pro-tr {
    border: 0 #fff;
  }

  .text-align-left {
    text-align: left !important;
    padding-left: 10px !important;
    font-size: 14px !important;
    line-height: 25px;
  }

  .print-table-tr-new td {
    line-height: 20px !important;
  }

  .border-top-solid {
    border: solid 1px #000;
  }

  .print-template-two tr {
    line-height: 30px;
  }
</style>