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">
              单据日期：{{ getTimes(document_date) }}
            </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="60">采购金额</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.name }}</span>
                  </td>
                  <td style="line-height: 18px">
                    <span>{{ item.supply_unit }}</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>{{ (item.count * item.price).toFixed(2) }}</span>
                  </td>
                </tr>
                <tr>
                  <td colspan="3" style="line-height: 18px">合计</td>
                  <td colspan="1" style="line-height: 18px">{{getAllCount()}}</td>
                  <td colspan="1" style="line-height: 18px"></td>
                  <td colspan="2" style="line-height: 18px">{{getTotalPrice()}}</td>
                </tr>
                 <tr>
                  <td colspan="6" style="line-height: 18px">合计  金额大写 {{getAllPrice()}}</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
            style="
              width: 100%;
              display: flex;
              flex: 1;
              justify-content: flex-start;
              flex-wrap: wrap;
            "
          >
            <div
              style="
                width: 25%;
                text-align: left;
                margin-bottom: 1px;
                font-size: 18px;
              "
            >
              优惠率：<span v-if="rate_of_concession>0">{{rate_of_concession}}%</span>
            </div>
            <div
              style="
                width: 25%;
                text-align: left;
                margin-bottom: 1px;
                font-size: 18px;
              "
            >
              优惠金额：<span v-if="discount_amount>0">{{discount_amount}}</span>
            </div>
            <div
              style="
                width: 100%;
                text-align: left;
                margin-bottom: 1px;
                font-size: 18px;
              "
            >
              备注：{{return_remake}}
            </div>
            <div
              style="
                width: 25%;
                text-align: left;
                margin-bottom: 1px;
                font-size: 18px;
              "
            >
              制单人：{{getXuserName(creater)}}
            </div>
            <div
              style="
                width: 25%;
                text-align: left;
                margin-bottom: 1px;
                font-size: 18px;
              "
            >
              收货人签字：
            </div>
            <div
              style="
                width: 25%;
                text-align: left;
                margin-bottom: 1px;
                font-size: 18px;
              "
            >
              供应商签字：
            </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";
import { getLodop } from "@/assets/LodopFuncs";
const moment = require("moment");
import { uParseTime } from "@/utils/tools";
export default {
  components: {
    BreadCrumb,
  },
  data() {
    return {
      size: "medium ",
      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: "",
      return_remake:"",
      creater:""
    };
  },
  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,
      });
    },
    // 打印功能
    btnClickPrint: function () {
      let LODOP = getLodop(); //调用getLodop获取LODOP对象
      LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_整页缩放打印输出");

      LODOP.ADD_PRINT_BARCODE(15, 15, 300, 300, "QRCode", "xxxxxxxxxxxxx");
      LODOP.SET_PRINT_STYLEA(0, "Stretch", 1); //(可变形)扩展缩放模式
      LODOP.PREVIEW(); //预览(预览打印无脚标)
      // LODOP.PRINT();  //打印
      LODOP.RINT_DESIGN();
    },

    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.return_remake = info.return_remake
          this.creater = info.creater
          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;
    },
    getTimes(time) {
      if (time === "") {
        return "";
      }
      return uParseTime(time, "{y}-{m}-{d}");
    },
    getAllPrice() {
      var total_price = 0;
      for (let i = 0; i < this.tableList.length; i++) {
        total_price +=(this.tableList[i].price *this.tableList[i].count)
      }
      this.total_price = total_price;
      if(total_price > 0){
         return this.smallToBIG(total_price.toFixed(2));
      }else{
        return ""
      }
     
    },
     smallToBIG(price) {
        let fraction = ['角', '分'];
        let digit = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'];
        let unit = [['元.', '万,', '亿,'], ['', '拾', '佰', '仟']];
        let head = price < 0 ? '欠' : '';
        price = Math.abs(price);
        console.log("price",price)
        let upper = '';
        for (let i = 0; i < fraction.length; i++) {
          upper += (digit[Math.floor(price * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, '');
        }
        upper = upper || '整';
        console.log("price",upper)
        price = Math.floor(price);
        for (let i = 0; i < unit[0].length && price > 0; i++) {
          let p = '';
          for (let j = 0; j < unit[1].length && price > 0; j++) {
            p = digit[price % 10] + unit[1][j] + p;
            price = Math.floor(price / 10);
          }
          upper = p.replace(/(零.)*零$/, '').replace(/^$/, '零') + unit[0][i] + upper;
        }
       
        var zhongwen = head + upper.replace(/(零.)*零元/, '元').replace(/(零.)+/g, '零').replace(/^整$/, '零元整')
      
        var ztr = zhongwen.replaceAll(".","");
    
        return ztr
      },
     getAllCount(){
      var total = 0
      for(let i=0;i<this.tableList.length;i++){
         total +=this.tableList[i].count
      }  
      if(total > 0){
       return total
      }else{
        return ""
      } 
    },
    getTotalPrice(){
     var total = 0
      for(let i=0;i<this.tableList.length;i++){
         total +=(this.tableList[i].count*this.tableList[i].price)
      }  
      if(total > 0){
       return total.toFixed(2)
      }else{
        return ""
      } 
    }
  },
  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;
                }
              }
            }
          }
        }
      }
    }
  }
}

.description {
  width: 100%;
  display: flex;
  flex: 1;
  justify-content: flex-start;
  flex-wrap: wrap;
  .content {
    width: 25%;
    text-align: left;
    margin-bottom: 1px;
    font-size: 18px;
  }
  .content_1 {
    width: 100%;
    text-align: left;
    margin-bottom: 1px;
    font-size: 18px;
  }
  // .content_2{
  //   width: 33%;
  // }
}
</style>