kd-aiot-frontend-eom/src/views/saleManage/saleOrder/invoice/components/print-template-by.vue

<template>
  <ele-modal
    title="出库单"
    :visible.sync="QRvisible"
    v-if="QRvisible"
    width="90%"
  >
    <div
      id="printSection"
      style="
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
      "
    >
      <table
        cellspacing="0"
        style="
          width: 100%;
          table-layout: fixed;
          word-break: break-all;
          word-wrap: break-word;
          font-size: 12px;
        "
      >
        <tbody>
          <tr align="center">
            <td colspan="3">
              <div
                style="
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                <img
                  style="width: 80px; height: 80px"
                  src="@/assets/logo.jpg"
                  alt=""
                  v-if="groupName.includes('宝悦')"
                />
                <div>
                  <div style="font-size: 14px">{{
                    groupName || '湖南宝悦新型建材有限公司'
                  }}</div>
                  <div style="font-size: 10px" v-if="groupName.includes('宝悦')"
                    >HUNAN BAO YUE BULIDING MATERAIL</div
                  >
                </div>
              </div>
            </td>
            <td colspan="3" style="font-size: 24px">
              <div style="border-bottom: 2px solid #000; width: 150px"
                >销 售 发 货 单</div
              >
            </td>
            <td colspan="3"><svg id="print"></svg></td>
          </tr>
          <tr>
            <td colspan="3" style="padding: 1px">
              发货单号：{{ formData.docNo }}
            </td>
            <td colspan="3" style="padding: 1px">
              项目: {{ formData.projectName }}</td
            >
            <td colspan="3" style="padding: 1px">
              日期：{{ getNowFormatDate() }}
            </td>
          </tr>
          <tr>
            <td colspan="3" style="padding: 1px 1px 10px 1px">
              客户：{{ formData.contactName }}</td
            >
            <td colspan="3" style="padding: 1px 1px 10px 1px">
              联系电话: {{ formData.linkPhone }}</td
            >
            <td colspan="3" style="padding: 1px 1px 10px 1px">
              车牌号： {{ formData.carNo }}</td
            >
          </tr>
        </tbody>
      </table>
      <table
        border
        cellspacing="0"
        style="
          width: 100%;
          table-layout: fixed;
          word-break: break-all;
          word-wrap: break-word;
          font-size: 12px;
        "
      >
        <tbody>
          <tr align="center">
            <td style="padding: 1px; width: 120px"> 产品编码 </td>
            <td style="padding: 1px"> 产品名称 </td>
            <td style="padding: 1px; width: 130px"> 规格 </td>
            <!-- <td style="padding: 1px"> 型号 </td> -->
            <td style="padding: 1px"> 单位 </td>
            <td style="padding: 1px"> 数量 </td>
            <td style="padding: 1px"> 块数 </td>
            <td style="padding: 1px"> 强度 </td>
            <td style="padding: 1px"> 密度 </td>
            <td style="padding: 1px" v-if="isPrintPrice"> 单价（元） </td>
            <td style="padding: 1px" v-if="isPrintPrice"> 金额（元） </td>
            <td style="padding: 1px"> 备注 </td>
          </tr>
          <tr align="center" v-for="(item, index) in codeList">
            <td style="padding: 1px">{{ item.productCode }}</td>
            <td style="padding: 1px">{{ item.productName }}</td>
            <td style="padding: 1px">{{ item.specification }}</td>
            <!-- <td style="padding: 1px">{{ item.modelType }}</td> -->
            <td style="padding: 1px">{{ item.measuringUnit }}</td>
            <td style="padding: 1px">{{ item.totalCount }}</td>
            <td style="padding: 1px">{{ item.blockCount }}</td>
            <td style="padding: 1px">{{ item.extField.packagingStrength }}</td>
            <td style="padding: 1px">{{ item.extField.packagingDensity }}</td>
            <td style="padding: 1px" v-if="isPrintPrice">{{
              item.discountSinglePrice
            }}</td>
            <td style="padding: 1px" v-if="isPrintPrice">{{
              item.discountTotalPrice
            }}</td>
            <td style="padding: 1px">{{ item.remark }}</td>
          </tr>
          <tr align="center">
            <td colspan="4" style="padding: 1px"> 合计 </td>
            <td colspan="1" style="padding: 1px">
              {{ getTotalValue('totalCount', 4) }}
            </td>
            <td style="padding: 1px"> {{ getTotalValue('blockCount',1) }}</td>
            <td colspan="2" style="padding: 1px"></td>
            <td colspan="1" style="padding: 1px" v-if="isPrintPrice">
              {{
                codeList.reduce((total, item) => {
                  return (total += item.discountTotalPrice);
                }, 0)
              }}
            </td>
            <td colspan="1" v-if="isPrintPrice" style="padding: 1px"></td>
          </tr>
          <tr align="center">
            <td colspan="3" style="padding: 1px">
              注意事项：遗失托盘赔偿260/个
            </td>
            <td colspan="2" style="padding: 1px">
              装车托盘数：{{ formData.trayNum }}</td
            >
            <td style="padding: 1px"></td>
            <td style="padding: 1px"> 带回托盘数： </td>
            <td :colspan="isPrintPrice ? 3 : 1" style="padding: 1px"></td>
          </tr>
        </tbody>
      </table>
      <table
        cellspacing="0"
        style="
          width: 100%;
          table-layout: fixed;
          word-break: break-all;
          word-wrap: break-word;
          font-size: 12px;
        "
      >
        <tbody>
          <tr>
            <td colspan="3" style="padding: 1px">
              承运人：{{ this.formData.driverNames }}</td
            >
            <td colspan="3" style="padding: 1px">
              装卸工：{{ this.formData.carName }}</td
            >
            <td colspan="3" style="padding: 1px"> 签收人：</td>
            <td colspan="3" style="padding: 1px">
              制单人：{{ this.formData.markerName }}</td
            >
          </tr>
          <tr>
            <td colspan="8" style="padding: 1px"
              >物流服务评价：<input
                type="checkbox"
                id="vehicle1"
                name="vehicle1"
                value="Bike"
                style="padding: 1px 1px"
              />
              <span>满意</span>

              <input
                type="checkbox"
                id="vehicle2"
                name="vehicle2"
                value="Car"
                style="padding: 1px 1px"
              /><span>不满意</span>
            </td>
            <td colspan="4" style="padding: 1px"
              >打印时间：{{ getNowFormatDate() }}</td
            >
          </tr>
          <tr>
            <td colspan="2" style="padding: 1px"> (白)记账联 </td>
            <td colspan="2" style="padding: 1px"> (红)客户留存联 </td>
            <td colspan="2" style="padding: 1px"> (蓝)结算联 </td>
            <td colspan="2" style="padding: 1px"> (绿)运费联 </td>
            <td colspan="2" style="padding: 1px"> (黄)装卸联 </td>
            <td colspan="2" style="padding: 1px"> (白)出门联 </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div slot="footer">
      <el-button @click="print">打印预览</el-button>
      <el-button @click="close">关闭</el-button>
    </div>
  </ele-modal>
</template>

<script>
  import { mapGetters } from 'vuex';
  import JsBarcode from 'jsbarcode';
  import { getSendSaleOrderrecordDetailSplit } from '@/api/saleManage/saleordersendrecord';
  export default {
    name: 'print',
    computed: {
      ...mapGetters(['user'])
    },
    props: {
      groupName: ''
    },
    data() {
      return {
        checked: '',
        QRvisible: false,
        isPrintPrice: false,
        codeList: [],
        formData: {},
        carName: ''
      };
    },

    methods: {
      open(id, isPrintPrice) {
        this.isPrintPrice = isPrintPrice;
        getSendSaleOrderrecordDetailSplit(id).then((data) => {
          if (JSON.stringify(data) != '{}') {
            this.formData = data;
            this.formData['carName'] = data.carList
              .map((item) => item.name)
              .toString();
            this.formData.projectName = data.saleOrderList?.[0]?.projectName;
            this.formData.driverNames = data.logisticTrakListNoteVOList
              .map((item) => item.driverName)
              .join(','); // 承运人
            this.codeList = data.productList;
            this.formData.markerName = this.user.info.name;
          }
          this.QRvisible = true;
          this.$nextTick(() => {
            JsBarcode('#print', data.docNo, {
              format: 'CODE39', //选择要使用的条形码类型
              width: 0.8, //设置条之间的宽度
              height: 50, //高度
              displayValue: false, //是否在条形码下方显示文字
              text: '', //覆盖显示的文本
              fontOptions: 'bold italic', //使文字加粗体或变斜体
              font: 'fantasy', //设置文本的字体
              textAlign: 'right', //设置文本的水平对齐方式
              textPosition: 'top', //设置文本的垂直位置
              textMargin: 1, //设置条形码和文本之间的间距
              fontSize: 15, //设置文本的大小
              background: '#fff', //设置条形码的背景
              lineColor: '#000', //设置条和文本的颜色。
              margin: 2 //设置条形码周围的空白边距
            });
          });
        });
      },
      close() {
        this.QRvisible = false;
      },
      getTotalValue(key, num) {
        let val = this.codeList.reduce((total, item) => {
          return (total += item[key]);
        }, 0);
        return val.toFixed(4).replace(/\.?0+$/, '');
      },
      //获取当前日期函数
      getNowFormatDate() {
        let date = new Date(),
          obj = {
            year: date.getFullYear(), //获取完整的年份(4位)
            month: date.getMonth() + 1, //获取当前月份(0-11,0代表1月)
            strDate: date.getDate(), // 获取当前日(1-31)
            week: '星期' + '日一二三四五六'.charAt(date.getDay()), //获取当前星期几(0 ~ 6,0代表星期天)
            hour: date.getHours(), //获取当前小时(0 ~ 23)
            minute: date.getMinutes(), //获取当前分钟(0 ~ 59)
            second: date.getSeconds() //获取当前秒数(0 ~ 59)
          };
        Object.keys(obj).forEach((key) => {
          if (obj[key] < 10) obj[key] = `0${obj[key]}`;
        });
        // return `${obj.year}年${obj.month}月${obj.strDate}日 ${obj.hour}:${obj.minute}:${obj.second}`;
        return `${obj.year}-${obj.month}-${obj.strDate}`;
      },
      print() {
        const printSection = document.getElementById('printSection');
        // 创建打印任务
        const printWindow = window.open('', '_blank');
        printWindow.document.open();
        printWindow.document.write('<html><head><title>打印预览</title>');
        printWindow.document.write(
          '<link rel="stylesheet" href="your-stylesheet-url.css" type="text/css" />'
        );
        printWindow.document.write('</head><body>');
        printWindow.document.write(printSection.innerHTML);
        printWindow.document.write('</body></html>');
        printWindow.document.close();
        printWindow.onload = function () {
          printWindow.print();
        };
      }
    }
  };
</script>

<style lang="scss">
  #printSection {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    .table_box {
      width: 70%;
      table-layout: fixed;
      word-break: break-all;
      word-wrap: break-word;
    }
    th,
    td {
      padding: 20px;
      position: relative;
    }
    .barCode {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
    }
    .person {
      width: 70%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 10px;
      > div {
        flex: 1;
      }
    }
  }
</style>