elizebeth/src/xt_pages/stock/drugs/drugStockOutOrderDetailPrin...

<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" v-for="(it,index) in tableList" :key="index">
         <div class="order-yy-name" style="font-size:22px;font-weight:bold;letter-spacing:0px;margin-top:40px">{{orgName}}</div>
          <div class="order-title" style="font-weight:500;font-size:18px;">药品出库登记表</div>

          <div style="float: left;margin-bottom: 1px;">单据编号：{{it.warehouse_out_order_number}}</div>
          <div style="float: right;margin-bottom: 1px;">{{getDateTwo()}}</div>

          <table class="print-table" border="1">
            <tbody>
            <tr>
              <td style="line-height: 50px" width="230">药品名称</td>
              <td style="line-height: 50px" width="230">规格型号</td>
              <td style="line-height: 50px" width="80">出货数量</td>
              <td style="line-height: 50px" width="50">单位</td>
              <td style="line-height:50px" width="80">出库价格</td>
              <td style="line-height: 50px" width="80">总价</td>
              <td style="line-height: 50px" width="80">批号</td>
              <td style="line-height: 50px" width="80">生产日期</td>
              <td style="line-height: 50px" width="80">有效日期</td>
            </tr>

            <tr v-for="(item,i) in it.child" :key="i">
              <td style="line-height: 50px">
                <span v-if="item.drug_id != 0">{{item.drug_name}}</span>
              </td>
              <td style="line-height: 50px">
                  <span v-if="item.drug_id != 0">{{item.dose}}{{item.dose_unit}}*{{item.min_number}}{{item.min_unit}}/{{item.max_unit}}</span>
              </td>
              <td style="line-height: 50px">
                  {{item.count}}
              </td>
              <td style="line-height: 50px">
                <span>{{item.count_unit}}</span>
              </td>
              <td style="line-height:50px">
                  {{item.last_price}}
              </td>
             <td  style="line-height:50px">
                {{(item.count * item.last_price).toFixed(2)}}
             </td>
             <td>{{item.batch_number}}</td>
             <td>{{(getTime(item.product_date))}}</td>
             <td>{{(getTime(item.expiry_date))}}</td>
            </tr>
             <tr>
               <td style="line-height:50px">合计</td>
               <td colspan="7"></td>
               <td>{{getAllPrince(it.id).toFixed(2)}}</td>
             </tr>
            </tbody>
          </table>


          <div v-if="orgId != 10024" style="display:flex;margin-top:1px;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 v-if="orgId == 10024" style="display:flex;margin-top:1px;float:right;">
            <div style="width:50px;">科室：</div><div style="width:60px;"></div>
            <div style="width:70px;">领料人：</div><div style="width:60px;"></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 } 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'
  import {  getDrugWarehouseOutInfo,getDrugWarehouseOrderInfo,getDrugOutOrderDetailPrint } from '@/api/drug/drug_stock'
  import {getBaseDrugLibList} from '@/api/data'
  export default {
    name: 'dialysisPrintOrder',
    components: {
      BreadCrumb

    },
    data() {
      return {
        crumbs: [
          { path: false, name: '出入库明细' },
          { path: false, name: '打印单' }
        ],
        isEdit: 0,
        checked: false,
        signAndWeighBoxPatients: 'sign-and-weigh-box-patients',
        goodType: [],
        goodInfo: [],
        manufacturer: [],
        dealer: [],

        warehousingOutInfo: {
          loading: false,
          warehousingOutData: [],
          info: {}
        },
        allPrice:0,
        start_time:"",
        end_time:"",
        list:[],
        is_use:"",
        is_charge:"",
        is_inject:"",
        page:1,
        limit:10000,
        keywords:"",
        orgId:'',
        orgName:"",
        drugOrderList:[],
        manufactureList:[],
        tableList:[],
        loading:false,
        warehouseList:[]
      }
    },
    methods: {
      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;font-weight:bold;}.dialysis-print-order .order-title{margin:auto;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
        })
      },

      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
      },
    GetOrderDetail: function(order_id) {
            const params = {
            'id': order_id
            };
            getDrugWarehouseOutInfo(params).then(response => {
            if (response.data.state == 0) {

                this.$message.error(response.data.msg);
                return false
            } else {
              for (let i = 0; i < response.data.data.list.length; i++) {
                this.warehousingOutInfo.warehousingOutData.push(response.data.data.list[i])
               }
               var total_price = 0;
               for(let i=0;i<this.warehousingOutInfo.warehousingOutData.length;i++){
                 total_price += this.warehousingOutInfo.warehousingOutData[i].count * this.warehousingOutInfo.warehousingOutData[i].price
               }
               this.allPrice = total_price;
               this.warehousingOutInfo.info = response.data.data.info;
               this.handleSpanTempArr()
            }
            })
        },
        getList() {
        let params = {
          page: this.page,
          limit: this.limit,
          keyword: this.keywords,
          is_use: this.is_use,
          is_charge: this.is_charge,
          is_inject: this.is_inject
        };
        getBaseDrugLibList(params).then(response => {
          if (response.data.state == 0) {
            this.$message.error(response.data.msg);
            return false
          } else {
            this.total = response.data.data.total;
            this.list = [];
            for (let i = 0; i < response.data.data.list.length; i++) {
              this.list.push(response.data.data.list[i])
            }
            console.log("list222222",this.list)
          }
        })
      },
      getUnit(id){
        var name = "";
        for(let i=0;i<this.list.length;i++){
          if(this.list[i].id == id){
            name = this.list[i].min_unit
          }
        }
        return name
      },
      handleSpanTempArr(){
        this.tempArr = [];

        for (let i = 0; i < this.warehousingOutInfo.warehousingOutData.length; i++) {
          if (i === 0) {
            this.tempArr.push(1);
            this.pos = 0
          } else {
            // 判断当前元素与上一个元素是否相同
            if (this.warehousingOutInfo.warehousingOutData[i].drug_id === this.warehousingOutInfo.warehousingOutData[i - 1].drug_id) {
              this.tempArr[this.pos] += 1;
              this.tempArr.push(0)
            } else {
              this.tempArr.push(1);
              this.pos = i
            }
          }
        }

        let sameRowArr = [], sIdx = 0;
        this.warehousingOutInfo.warehousingOutData.forEach((item, index) => {
          item.index = index;
          if (index === 0) {
            sameRowArr.push([index])
          } else {
            if (item.drug_id === this.warehousingOutInfo.warehousingOutData[index - 1].drug_id) {
              sameRowArr[sIdx].push(index)
            } else {
              sIdx = sIdx + 1;
              sameRowArr.push([index])
            }
          }
        });
        this.sameRowArr = sameRowArr
      },
      getDrugWarehouseOrderInfo(){
        getDrugWarehouseOrderInfo().then(response=>{
           if(response.data.state == 1){
             var list =  response.data.data.list
             console.log("入库单详情",list)
             this.drugOrderList = list
           }
        })
      },
      getNumber(id){
        var number = ""
        for(let i=0;i<this.drugOrderList.length;i++){
          if(id == this.drugOrderList[i].drug_id){
              number = this.drugOrderList[i].number
          }
        }
        return number
      },
      getProductDate(id){
        var product_date = ""
        for(let i=0;i<this.drugOrderList.length;i++){
           if(id == this.drugOrderList[i].drug_id){
             product_date = this.drugOrderList[i].product_date
           }
        }
        return this.getTime(product_date)
      },
      getExpiryDate(id){
         var expiry_date = ""
         for(let i=0;i<this.drugOrderList.length;i++){
           if(id == this.drugOrderList[i].drug_id){
             expiry_date = this.drugOrderList[i].expiry_date
           }
        }
        return this.getTime(expiry_date)
      },
      getTime(val) {
         if(val < 0){
           return ""
         }
         if(val == ""){
          return ""
         }else {
          return uParseTime(val, '{y}-{m}-{d}')
         }
      },

      getDrugOutOrderDetailPrint(order_id){
        var params = {
          id:order_id
        }
        getDrugOutOrderDetailPrint(params).then(response=>{
          if(response.data.state ==1){
             var info = response.data.data.info
             console.log("info",info)
            var warehousing = response.data.data.warehousing
            console.log("ware2232",warehousing)
            this.warehouseList = warehousing
            for(let i=0;i<info.length;i++){
               info[i].child = []
              for(let j=0;j<warehousing.length;j++){
                if(info[i].id == warehousing[j].warehouse_out_id){
                    info[i].child.push(warehousing[j])
                }
              }
            }
            
            var manufacturerList = response.data.data.manufacturerList
            console.log("manufacturelist",manufacturerList)
            this.manufactureList = manufacturerList
            console.log("列表",info)
            this.tableList = info
            this.loading = false
          }
        })
      },
      getAllPrince(id){
        var count = 0
        for(let i=0;i<this.warehouseList.length;i++){
          if(id == this.warehouseList[i].warehouse_out_id){
             count +=this.warehouseList[i].count * this.warehouseList[i].last_price
          }
        }
        return count
      }
    },
    created() {
      this.orgName = this.$store.getters.xt_user.org.org_name;
      const order_id = this.$route.query.id;
      this.orgId = this.$store.getters.xt_user.org.id;  
      this.getDrugOutOrderDetailPrint(order_id)
    }

  }
</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>