mj_firm_former/src/views/system/jbdScan/goods/chnangguirukudan.vue

<template>
  <div class="bg">
    <!-- 常规列表页面打印入库单 -->
    <el-dialog
      width="900px"
      height="12cm"
      :modal-append-to-body="false"
      title="采购入库单"
      :visible.sync="scanVisible"
      id="pageid"
    >
      <!-- 表单是否显示 -->
      <div style="height: 500px; width: 95%; margin: 0 auto"   >
        <div ref="qrcode" id="box">
          <vue-easy-print tableShow ref="easyPrint" :onePageRow="onePageRow">
            <div
              v-for="(item1, index1) in list"
              :key="index1"
              style="margin-bottom: 30px;width: 85%;margin: 0 auto;"
            >
              <div style="page-break-after: always">
                <div >
                  <table :border="1">                   
                    <thead>
                      <tr class="title" style="background:#ffffff">
                        <th colspan="15">
                          <h1 style="display:block">采购入库单</h1>
                        </th>
                      </tr>
                      <tr class="title" style="background:#ffffff">
                        <th colspan="15">
                          <span style="float: left;">
                            申购部门:<span style="margin-left: 10px">{{item1.shen_gou_bu_men_|bumenfilters(bumenList)}}</span>
                          </span>
                          <span style="float:right;padding-right: 8px;">日期 :{{item1.dao_huo_ri_qi_}}</span>
                        </th>
                      </tr>
                      <tr class="title" style="background:#ffffff">
                        <th colspan="15">
                          <span style="float:left;">供应商:<span style="margin-left: 10px">{{item1.gong_ying_shang_| gongyingshang(gongyingshangList)}}</span></span>
                          <span style="float:right;padding-right: 8px;">采购订单编号:{{item1.cai_gou_ding_dan_}}</span>
                        </th>
                      </tr>
                      <!-- <tr class="title" >
                        <th colspan="15">
                          <div class="word-title" style="background:#fff;">
                            <h4 style="display:block">采购入库单</h4>
                            <div class="tagBox">
                            <div>
                              <div style="font-size: 10px;text-align: left;">申购部门:
                                <span style="margin-left: 10px">{{item1.shen_gou_bu_men_|bumenfilters(bumenList)}}</span>
                              </div>
                              <div style="font-size: 10px">供应商:
                                <span style="margin-left: 10px">{{item1.gong_ying_shang_| gongyingshang(gongyingshangList)}}</span>
                              </div>
                            </div>
                            <div style="text-align: left;">
                              <div style="font-size: 10px; padding-right: 10px;">采购订单编号:
                               <span >{{item1.cai_gou_ding_dan_}}</span>
                              </div>
                              <div style="font-size: 10px; ">日期 :
                                <span >{{item1.dao_huo_ri_qi_}}</span>
                              </div>
                            </div>
                            </div>
                          </div>

                        </th>
                      </tr> -->
                      <tr >
                        <th  style="width: 40px">序号</th>
                        <th  style="font-weight: normal">物料编码</th>
                        <th  style="font-weight: normal">物料名称</th>
                        <th >货号</th>
                        <th >批号</th>
                        <th >规格/特征</th>
                        <th >生产商/品牌</th>
                        <th >数量</th>
                        <th >单位</th>
                        <th >单价（含税）</th>
                        <th >税率</th>
                        <th >单价</th>
                        <th >税额</th>
                        <th >金额</th>
                        <th >含税合计</th>
                      </tr>
                    </thead>
                    <!-- <thead>
                         <tr >
                        <th style="width: 40px">序号</th>
                        <th style="font-weight: normal">物料编码</th>
                        <th style="font-weight: normal">物料名称</th>
                        <th>货号</th>
                        <th>批号</th>
                        <th>规格/特征</th>
                        <th>生产商/品牌</th>
                        <th>数量</th>
                        <th>单位</th>
                        <th>单价（含税）</th>
                        <th>税率</th>
                        <th>单价</th>
                        <th>税额</th>
                        <th>金额</th>
                        <th>含税合计</th>
                      </tr>
                    </thead> -->
                    <tbody>
                      <tr v-for="(item, index) in item1" :key="index">
                        <td style="width: 30px">{{ index + 1 }}</td>
                        <td style="width: 70px">{{ item.wu_liao_bian_ma_ }}</td>
                        <td style="width: 120px">{{ item.wu_liao_ming_chen }}</td>
                        <td style="width: 60px">{{ item.huo_hao_ }}</td>
                        <td style="width: 60px">{{ item.pi_hao_ }}</td>
                        <td style="width: 80px">{{ item.gui_ge_xing_hao_ }}</td>
                        <td style="width: 120px"> {{ item.gong_ying_shang_| gongyingshang(gongyingshangList) }} </td>
                        <td style="width: 45px">{{ item.shu_liang_ }}</td>
                        <td style="width: 45px">{{ item.dan_wei_ }}</td>
                        <td style="width: 60px">{{ item.dan_jia_han_shui_ |numToFixed}}</td>
                        <td style="width: 45px">{{ item.shui_lv_ }}</td>
                        <td style="width: 45px">{{ item.dan_jia_|numToFixed}}</td>
                        <td style="width: 45px"> {{ item.dan_jia_han_shui_|shuieToFixed(item.shu_liang_,item.dan_jia_) }}</td>
                        <td style="width: 45px">{{ item.dan_jia_|jineToFixed(item.shu_liang_)}}</td>
                        <td style="width: 60px">{{ item.dan_jia_han_shui_|jineToFixed(item.shu_liang_) }}</td>
                      </tr>
                      <tr>
                        <td style="width: 30px"></td>
                        <td style="width: 70px"></td>
                        <td style="width: 120px"></td>
                        <td style="width: 60px"></td>
                        <td style="width: 60px"></td>
                        <td style="width: 80px"></td>
                        <td style="width: 120px"></td>
                        <td style="width: 45px"></td>
                        <td style="width: 45px"></td>
                        <td style="width: 60px"></td>
                        <td style="width: 45px"></td>
                        <td style="width: 45px">合计：</td>
                        <td style="width: 45px">{{ item1|addshuieToFixed}}</td>
                        <td style="width: 45px">{{ item1|addjineToFixed}}</td>
                        <td style="width: 60px">{{ item1|addhshjToFixed }}</td>
                      </tr>
                    </tbody>
                    <tfoot class="bottom">             
                      <tr>
                        <td colspan="6" style="text-align:left">
                          <div style="margin-top:10px">仓管员:{{ item1.name2 }}</div>
                        </td>
                        <td colspan="1" class="footer-row">
                          <div style="margin-top:10px" ref="innerRef"></div>
                        </td>
                        <td colspan="9" style="text-align:right">
                          <div style="margin-top:10px">审核人:{{ item1.name3 }} </div>
                        </td>
                      </tr>
                    </tfoot>
                  </table>
                </div>
              </div>
            </div>
          </vue-easy-print>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="printDemo">打印</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import VueBarcode from "vue-barcode";
import vueEasyPrint from "vue-easy-print";
import repostCurd from "@/business/platform/form/utils/custom/joinCURD.js";

export default {
  components: {
    VueBarcode,
    vueEasyPrint,
  },
  props: {
    obj: {
      default: [],
      type: Array,
    },
    onePageRow: {
      type: Number,
      default: 3,
    },
    blankLines: {
      type: Boolean,
      default: true,
    },
    scanVisible: {
      type: Boolean,
      default: false,
    },
    currentScan: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      // onePageRow: 1,
      value: "",
      id: "",
      list: [],
      visible: true,
      gongyingshangList: [],
      bumenList: [],
    };
  },
  created() {
    this.getInit();
    let sql = `select *  FROM  t_gysml`;
    repostCurd("sql", sql).then((res) => {
      this.gongyingshangList = res.variables.data;
    });
    let sql1 = `select ID_,NAME_ FROM  ibps_party_org `;
    repostCurd("sql", sql1).then((res) => {
      return (this.bumenList = res.variables.data);
    });
  },
  filters: {
    gongyingshang: function (value, list) {
      for (let i = 0; i < list.length; i++) {
        if (value == list[i].id_) {
          return list[i].gong_ying_shang_m;
        } else if (i == list.length - 1) {
          return value;
        }
      }
    },
    numToFixed: function (value) {
      return (value*1).toFixed(2)
    },
    jineToFixed:function(a,b){
     let value = (a * 1) * (b * 1);
     
     return value.toFixed(2)
    },
    shuieToFixed:function(a,b,c){
      let jine = b*1*(c*1);
      let hshj = b*1*(a*1);
      let value = hshj - jine;
      return value.toFixed(2);
    },
    addshuieToFixed:function(arr){
      let adds =0;
      arr.forEach(item=>{
        adds =adds+(((item.shu_liang_*1) * (item.dan_jia_han_shui_*1)) - ((item.shu_liang_*1) * (item.dan_jia_*1)) );
      })
      return adds.toFixed(2);
    },
    addjineToFixed(arr){  
      let adds =0;
      arr.forEach(item=>{
        adds =adds+((item.shu_liang_*1) * (item.dan_jia_*1));
      })
      return adds.toFixed(2);
    },
    addhshjToFixed(arr){
      let adds =0;
      arr.forEach(item=>{
        
        adds =adds+((item.shu_liang_*1) * (item.dan_jia_han_shui_*1));
      })
      return adds.toFixed(2);
    },
    bumenfilters: function (value, list) {
      // 
      for (let i = 0; i < list.length; i++) {
        if (value == list[i].ID_) {
          return list[i].NAME_;
        } else if (i == list.length - 1) {
          return value;
        }
      }
    },
  },
  watch: {
    obj() {
      this.getInit();
    },
  },
  methods: {
    printDemo() {
      this.$refs.easyPrint.print();
      // this.$refs.easyPrint.window.print()
    },
    toDecimal2(x) {
      var f = parseFloat(x);
      if (isNaN(f)) {
        return false;
      }
      var f = Math.round(x * 100) / 100;
      var s = f.toString();
      var rs = s.indexOf(".");
      if (rs < 0) {
        rs = s.length;
        s += ".";
      }
      while (s.length <= rs + 2) {
        s += "0";
      }
      return s;
    },
    addNumber(num1, num2) {
      let a = parseFloat(num1);
      let b = parseFloat(num2);
      return a.toFixed("2") * 1 + b.toFixed("2") * 1;
    },
    getInit() {
      var idStr = "";
      this.obj.forEach((item) => {idStr += item + ",";});
      idStr = idStr.substring(0, idStr.length - 1);
      this.getLook(idStr);
     
    },
    getLook(id) {
      this.list = [];
      let this_ = this;
      let sql = `select * FROM t_yszb WHERE FIND_IN_SET(id_,'${id}')`;
      let zhubiao = [];
      let name1, name2, name3;
      let time1, time2, time3;
      let addhanshuiheji = 0;
      let addjine = 0;
      let addshuie = 0;
      repostCurd("sql", sql).then((res) => {
        zhubiao = res.variables.data;
        zhubiao.forEach((item) => {
          let sql1 = `select * FROM t_cgysjlb  WHERE FIND_IN_SET(wai_jian_,'${item.id_}')`;
          repostCurd("sql", sql1).then((res) => {
            let data = res.variables.data;
            let s2 = `select a.NAME_,DATE_FORMAT(b.CREATE_TIME_,'%Y-%m-%d') AS CREATE_TIME_ FROM ibps_party_employee  as a join ibps_bpm_oper_log as b on a.ID_ = b.CREATE_BY_ where b.PROC_INST_ID_ = ( SELECT  PROC_INST_ID_  FROM ibps_bpm_bus_rel WHERE BUSINESSKEY_ = '${item.id_}' LIMIT 1) AND b.NODE_ID_ = 'Activity_04lhxla' ORDER BY b.CREATE_TIME_ DESC LIMIT 1`;
            repostCurd("sql", s2).then((res) => {
              name2 = res.variables.data[0].NAME_;
              time2 = res.variables.data[0].CREATE_TIME_;
              data["name2"] = name2;
              data["time2"] = time2;
              let s3 = `select a.NAME_,DATE_FORMAT(b.CREATE_TIME_,'%Y-%m-%d') AS CREATE_TIME_ FROM ibps_party_employee  as a join ibps_bpm_oper_log as b on a.ID_ = b.CREATE_BY_ where b.PROC_INST_ID_ = ( SELECT  PROC_INST_ID_  FROM ibps_bpm_bus_rel WHERE BUSINESSKEY_ = '${item.id_}' LIMIT 1) AND b.NODE_ID_ = 'Activity_1dk76gy' ORDER BY b.CREATE_TIME_ DESC LIMIT 1`;
              repostCurd("sql", s3).then((res) => {
                name3 = res.variables.data[0].NAME_;
                time3 = res.variables.data[0].CREATE_TIME_;
                data["name3"] = name3;
                data["time3"] = time3;
                data["gong_ying_shang_"] = item.gong_ying_shang_;
                data["shen_gou_bu_men_"] = item.shen_gou_bu_men_;
                data["cai_gou_ding_dan_"] = item.cai_gou_ding_dan_;
                data["dao_huo_ri_qi_"] = item.dao_huo_ri_qi_;
                data.forEach((it) => {
                  data["addhanshuiheji"] = this.addNumber(
                    addhanshuiheji,
                    it.han_shui_he_ji_
                  );
                  data["addjine"] = this.addNumber(addjine, it.jin_e_);
                  data["addshuie"] = this.addNumber(addshuie, it.shui_e_);
                  addhanshuiheji = data["addhanshuiheji"];
                  addjine = data["addjine"];
                  addshuie = data["addshuie"];
                });
                data["addhanshuiheji"] = this_.toDecimal2(
                  data["addhanshuiheji"]
                );
                data["addjine"] = this_.toDecimal2(data["addjine"]);
                data["addshuie"] = this_.toDecimal2(data["addshuie"]);
                this_.list.push(data);
                addhanshuiheji = 0;
                addjine = 0;
                addshuie = 0;
                // this_.getPage();
              });
            });
          });
        });
      });
   
    },
    getPage(){
      let bodyEle = document.getElementById("pageid");
        //获取页面总长度
        // this.$refs.innerRef[0].innerHTML ='11'
        let bodyHeight = bodyEle.clientHeight;
        //获取页数 1026：单页A4纸总高度（不同得浏览器打印高度不一致，根据自己需求调整）
     
        let count =parseInt((bodyHeight / 383)) +2;
        console.log(bodyHeight,count,"高度")
        //动态添加页码 通过绝对定位
        for (let i = 0; i < count; i++) {
            this.$refs.innerRef[i].innerHTML = i+1;
        }

    }
  },
};
</script>



<!-- <style scoped>

@page {
  size: auto; /* auto is the initial value */
  color: #fff;
}
</style> -->
<style lang="scss" scoped>

//  @page :first {
//   color: green;

// @top-left {
//     content: "foo" !important;
//     color: blue;
//   }
//   @top-right {
//     content: "bar";
//   }
// }



.bottom {
  margin-top: 15px;
  border-bottom: 1px solid #fff;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
}
.title{
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
}
// .word-title {
//   display: flex;
//   justify-content: center;
// }
thead {
  background: #f3f3f3;
}
.el-dialog__body {
  color: #0d0e0f;
  font-size: 10px !important;
  word-break: none;
}
thead > tr > th {
  font-size: 10px;
  text-align: center;
  font-weight: normal;
  color: #01060c;
}
.logo {
  position: absolute;
  top: -32px;
  left: 0;
}
.tagBox {
  position: relative;
  width: 100%;
  // border: 1px solid #000000;
  padding: 5px;
  // height: 30px;
  display: flex;
  justify-content: space-between;
  background-color: #fff;
}

.la {
  display: flex;
  align-items: center;
}

.lh {
  // line-height: auto;
  font-size: 12px;
  display: flex;
  align-items: center;
}

* {
  margin: 0;
  padding: 0;
}
table {
  border-collapse: collapse;
  text-align: center;
  border: 1px solid #01060c;
}

td {
  width: 120px;
  // height: 50px;
  text-align: center;
  font-size: 10px;
}
.friday {
  width: 100px;
  height: 50px;
}
</style>