elizebeth/src/xt_pages/stock/stockInOrderDetailPrint.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" v-for="(it,index) in warehousingInfo" :key="index">
                    <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;">
                        单据编号：{{it.warehousing_order}}
                      </div>
                      <div style="text-align:right;margin-bottom:1px;font-size: 18px;">
                        打印时间：{{time_now}}
                      </div>
                    </div>
                    
                    <div class="table_panel">
                        <table class="table">
                            <thead>
                                <tr>
                                    <td style="line-height:18px;" width="80">耗材<br>名称</td>
                                    <td style="line-height:18px;" width="80">注册证号/批准文号/备案凭证号</td>
                                    <td style="line-height:18px;" width="80">规格<br>型号</td>
                                    <td style="line-height:18px;" width="80">生产<br>厂商</td>
                                    <td style="line-height:18px;" width="80">单位</td>
                                    <td style="line-height:18px;" width="80">进货价</td>
                                    <td style="line-height:18px;" width="80">入库<br>数量</td> 
                                    <td style="line-height:18px;" width="60">总价</td>
                                    <td style="line-height:18px;" width="80">批号</td>
                                    <td style="line-height:18px;" width="120">生产日期</td>
                                    <td style="line-height:18px;" width="120">有效日期</td>
                                    <td style="line-height:18px;" width="120">入库日期</td>
                                    <td style="line-height:18px;" width="60">质检<br>意见</td>
                                    <td style="line-height:18px;" width="60">验收<br>结论</td>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for='(item,index) in it.child' :key="index">
                                    <td style="line-height:18px;"><span v-if="item.good_id != 0">{{getTypeNameOne(item.good_id)}}</span></td>
                                    <td style="line-height:18px;">{{ item.license_number }}</td>
                                    <td style="line-height:18px;"><span v-if="item.good_id != 0">{{getSpecificationName(item.good_id)}}</span></td>
                                    <td style="line-height:18px;">{{ getManufacturer(item.good_id) }}</td>
                                    <td style="line-height:18px;"><span v-if="item.good_id!=0">{{item.GoodInfo.packing_unit}}</span></td>
                                    <td style="line-height:18px;">{{item.price}}</td>
                                    <td style="line-height:18px;">{{item.warehousing_count}}</td> 
                                    <td style="line-height:18px;">{{(item.warehousing_count*item.price).toFixed(2)}}</td>
                                    <td style="line-height:18px;">{{ item.number }}</td>
                                    <td style="line-height:18px;">{{ getTime(item.product_date) }}</td>
                                    <td style="line-height:18px;">{{ getTime(item.expiry_date) }}</td>
                                    <td style="line-height:18px;">{{ getTime(item.ctime) }}</td>
                                    <td style="line-height:18px;">正常<br>入库</td>
                                    <td style="line-height:18px;">合格</td>
                                </tr>
                                <tr>
                                  <td>合计</td>
                                  <td colspan="12" style="text-align:right;">{{getAllPice(it.id).toFixed(2)}}</td>
                               </tr>
                            </tbody>
                        </table>

                        <div style="display:flex;margin-top:1px;float:right;">
                            <div style="width:50px;">审批：</div><div style="width:100px;"></div>
                            <div style="width:80px;" v-if='orgId != 10024'>药材主任：</div><div style="width:100px;"></div>
                            <div style="width:50px;">会计：</div><div style="width:100px;"><span v-if='orgId == 10024'>徐立琼</span></div>
                            <div style="width:50px;">审核：</div><div style="width:100px;"><span v-if='orgId == 10024'>徐立琼</span></div>
                            <div style="width:70px;">制单人：</div><div style="width:100px;">{{ getXuserName(it.creater) }}</div>
                       </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import BreadCrumb from '@/xt_pages/components/bread-crumb'
import {
  GetAllConfig,
  getWarehouseInfoList,
  getGoodInfoList
} from "@/api/stock";
import { fetchAllAdminUsers } from "@/api/doctor";
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",
            goodType: [],
            goodInfo: [],
            manufacturer: [],
            dealer: [],
            Warehouse: {
                loading: false,
                warehouseDate: [],
                tableCurrentIndex: ""
            },

            WarehouseInfo: {
                loading: false,
                warehouseInfoDate: [],
                warehouse: {}
            },
            time_now:moment(new Date()).add('year',0).format("YYYY-MM-DD"),
            allPrice:0,
            page: 1,
            limit: 10000,
            keyword: "",
            is_use:"",
            good_kind:"",
            is_charge:"",
            list:[],
            orgName:'',
            orgId:'',
            adminUserOptions:[],
            warehousingInfo:[],
            warehousList:[]
        }
    },
    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}')
         }
      },
      
        GetConfigInfo: function() {
        GetAllConfig().then(response => {
            if (response.data.state == 0) {
            this.$message.error(response.data.msg);
            return false;
            } else {
            this.manufacturer = response.data.data.manufacturer;
            this.dealer = response.data.data.dealer;
            this.goodInfo = response.data.data.goodInfo;
            this.goodType = response.data.data.goodType;
           
           for(let i=0;i<this.goodInfo.length;i++){
               this.goodInfo[i].manufacturer_name = ""
            }
            for(let i=0;i<this.goodInfo.length;i++){
               for(let j=0;j<this.manufacturer.length;j++){
                  if(this.goodInfo[i].manufacturer == this.manufacturer[j].id){
                     this.goodInfo[i].manufacturer_name = this.manufacturer[j].manufacturer_name
                  }
               } 
            }
             console.log("商品信息",this.goodInfo)
            }
        });
        },
       
     GetOrderDetail: function(order_id) {

        const params = {
            id: order_id
        };
        getWarehouseInfoList(params).then(response => {
            if (response.data.state == 0) {
            this.$message.error(response.data.msg);
            return false;
            } else {
             var info = response.data.data.info
             console.log("info2222",info)
             var warehousing = response.data.data.warehousing
             console.log("warehousing",warehousing)
             this.warehousList = info
             for(let i=0;i<warehousing.length;i++){
                warehousing[i].child = []
              for(let j=0;j<info.length;j++){
                if(warehousing[i].id == info[j].warehousing_id){
                   warehousing[i].child.push(info[j])
                }
              }
             }
             this.warehousingInfo = warehousing
          
            }
        });
       },
      
    getSpecificationName: function(id) {
      let name = "";
      for (let i = 0; i < this.goodInfo.length; i++) {
        if (this.goodInfo[i].id == id) {
          name = this.goodInfo[i].specification_name;
        }
      }
      return name;
    },
    getTypeName: function(id) {
      let name = "";
      for (let i = 0; i < this.goodType.length; i++) {
        if (this.goodType[i].id == id) {
          name = this.goodType[i].type_name;
        }
      }
      return name;
    },
    getTypeNameOne:function(id){
      let name = "";
      for (let i = 0; i < this.goodInfo.length; i++) {
        if (this.goodInfo[i].id == id) {
          name = this.goodInfo[i].good_name;
        }
      }
      return name;
     },
     getList() {
        this.goodInfo.loading = true
        let params = {
          page: this.page,
          limit: this.limit,
          keyword: this.keywords,
          is_use:this.is_use,
          good_kind:this.good_kind,
          is_charge: this.is_charge,
        }
        getGoodInfoList(params).then(response => {
          if (response.data.state == 0) {
           
            this.$message.error(response.data.msg)
            return false
          } else {
            this.list = []
            for (let i = 0; i < response.data.data.list.length; i++) {
              this.list.push(response.data.data.list[i])
            }
            console.log("list22222",this.list)
          }
        })
      },
      getUnit(id){
        var name = ""
        for(let i=0;i<this.list.length;i++){
          if(id == this.list[i].id){
             name = this.list[i].good_unit
          }
        }
        return this.getGoodUnit(name)
      },
      getGoodUnit(id){
        for (let i = 0; i <this.$store.getters.good_unit.length; i++ ){
          if(id == this.$store.getters.good_unit[i].id){

            return this.$store.getters.good_unit[i].name
          }
        }
        return ""
      },
      // getManufacturer(id){
      //   let name = ''
      //   this.manufacturer.map(item => {
      //     if(item.id == id){
      //       name = item.manufacturer_name
      //     }
      //   })
      //   return name
      // },
     getManufacturer(id){
         let name = ""
         for(let i=0;i<this.goodInfo.length;i++){
             if(id == this.goodInfo[i].id){
                name  =this.goodInfo[i].manufacturer_name
             }
         }
         return name
      },
      fetchAllAdminUsers() {
        fetchAllAdminUsers().then(response => {
          console.log(response);
          if (response.data.state == 1) {
            this.adminUserOptions = response.data.data.users;
            var alen = this.adminUserOptions.length;
            for (let index = 0; index < alen; index++) {
              if (this.adminUserOptions[index].user_type == 2) {
                // this.doctorOptions.push(this.adminUserOptions[index]);
              }
            }
          }
        });
      },
      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;
      },
      getAllPice(id){
        var  total_price = 0 
        for(let i=0;i<this.warehousList.length;i++){
          if(id == this.warehousList[i].warehousing_id){
             total_price += this.warehousList[i].warehousing_count * this.warehousList[i].price
          }
        }
        return total_price
      }
    },
    created(){
      this.orgName = this.$store.getters.xt_user.org.org_name;
      this.orgId = this.$store.getters.xt_user.org.id;
      const order_id = this.$route.query.id;

      this.fetchAllAdminUsers()
      this.GetConfigInfo();
      this.GetOrderDetail(order_id);
      this.getList()
    }
}
</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>