kd-aiot-frontend-eom/src/views/saleManage/saleOrder/invoice/components/print-template-ht.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;
      "
    >
      <div>
        <div
          style="
            font-size: 20px;
            font-weight: 800;
            padding-right: 20px;
            width: 400px;
            margin: 0 auto;
          "
          >{{ groupName }}{{ isPrintPrice ? '货物销售单' : '货物签收单' }}</div
        >
      </div>
      <div
        style="
          width: 100%;
          font-size: 12px;
          display: flex;
          justify-content: space-between;
          margin-bottom: 5px;
          margin-top: 5px;
        "
      >
        <span style="width: 55%">客户：{{ formData.contactName }}</span>
        
        <span style="width: 25%; text-align: right;">单据编码：{{ formData.docNo }}</span>
      </div>
      <div
        style="
          width: 100%;
          font-size: 12px;
          display: flex;
          justify-content: space-between;
          margin-bottom: 5px;
        "
      >
        <span style="width: 55%">项目：{{ formData.projectName }}</span>
        <span style="width: 25%; text-align: right;">单据日期：{{ formData.createTime ? formData.createTime.split(' ')[0] : '' }}</span>
      </div>
      <table
        cellspacing="0"
        border
        style="
          width: 100%;
          table-layout: fixed;
          word-break: break-all;
          word-wrap: break-word;
          font-size: 12px;
        "
      >
        <tbody>
          <tr align="center">
            <!-- <td style="padding: 5px; width: 15%"> 名称 </td> -->
             <td style="padding: 2px; width: 5%"> 序号 </td>
            <td style="padding: 2px; width: 24%"> 规格型号 </td>
            <td style="padding: 2px; width: 6%"> 单位</td>
            <td style="padding: 2px; width: 8%"> 数量</td>
            <td style="padding: 2px; width: 10%" v-if="isPrintPrice"> 单价</td>
            <td style="padding: 2px; width: 6%" v-if="isPrintPrice"> 税率</td>
            <td style="padding: 2px; width: 10%" v-if="isPrintPrice"> 金额</td>
            <td style="padding: 2px; width: 10%"> 颜色 </td>
            <!-- <td style="padding: 5px; width: 10%"> 机型 </td> -->
            <td style="padding: 2px; width: 12%"> 备注</td>
          </tr>

          <tr align="center" v-for="(item, index) in formData.productList">
            <!-- <td style="padding: 5px"> {{ item.productName }} </td> -->
             <td style="padding: 2px"> {{ index + 1 }}</td>
            <td style="padding: 2px">
              <!-- {{ item.specification }}/ -->
              {{ item.modelType }}
            </td>
            <td style="padding: 2px"> {{ item.saleUnit }}</td>
            <td style="padding: 2px"> {{ item.saleCount }}</td>
            <td style="padding: 2px;" v-if="isPrintPrice"> {{ item.singlePrice }}</td>
            <td style="padding: 2px;" v-if="isPrintPrice"> {{ item.taxRate }}{{ item.taxRate ? '%' : '0%' }}</td>
            <td style="padding: 2px;" v-if="isPrintPrice"> {{ item.totalPrice }}</td>
            <td style="padding: 2px"> {{ item.colorKey }}</td>
            <!-- <td style="padding: 5px"> {{ item.modelKey }}</td> -->
            <td style="padding: 2px"> {{ item.remark }}</td>
          </tr>
          <tr align="center">
            <td style="padding: 2px"> 合计 </td>
            <td style="padding: 2px">  </td>
            <td style="padding: 2px">{{ getTotalValue('totalCount', 2) }} </td>
            <td style="padding: 2px" v-if="isPrintPrice"> </td>
            <td style="padding: 2px" v-if="isPrintPrice"> </td>
            <td style="padding: 2px" v-if="isPrintPrice"> {{ getTotalValue('totalPrice', 2) }} </td>
            <td style="padding: 2px" colspan="2"> {{ isPrintPrice ? convertToChinese(getTotalValue('totalPrice', 2)) : '' }} </td>
            <td style="padding: 2px"> </td>
          </tr>
        </tbody>
      </table>
      <div
        style="
          width: 100%;
          font-size: 12px;
          display: flex;
          justify-content: space-between;
          margin-top: 5px;
        "
      >
        <div style="flex: 1">
          <div>业务员：{{ formData.saleOrderList[0]?.salesmanName }}</div>
        </div>
        <div style="flex: 1">
          <div>制单人：{{ formData.makerName }}</div>
        </div>
        <div style="flex: 1"> 核对人： </div>
        <div style="flex: 1"> 发货人： </div>
      </div>
      <div
        style="
          width: 100%;
          font-size: 12px;
          display: flex;
          justify-content: space-between;
          margin-top: 5px;
        "
      >
        <div style="width: 75%">
          <!-- <div>地址：{{ formData.receiveAddress }}</div> -->
          <div>地址：湖南湘江新区宁乡夏铎铺机械工业园</div>
        </div>
        <div style="width: 25%">
          <div>客户签字：</div>
        </div>
      </div>
    </div>

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

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

    methods: {
      async open(id, isPrintPrice) {
        this.formData = await getSendSaleOrderrecordDetailSplit(id);
        this.QRvisible = true;
        this.isPrintPrice = isPrintPrice;
        //包装维度
      },
      close() {
        this.QRvisible = false;
      },
      getTotalValue(key, num) {
        let val = this.formData?.productList?.reduce((total, item) => {
          return (total += Number(item[key]));
        }, 0);

        return (
          (val &&
            parseFloat(val)
              .toFixed(num)
              .replace(/\.?0+$/, '')) ||
          0
        );
      },
      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"></style>