supply-front/src/mixin/print.js

import {
  disAutoConnect,
  hiprint,
  defaultElementTypeProvider,
} from "vue-plugin-hiprint";
disAutoConnect();
import panel from "@/utils/panel";
import { addPrint, getDtailPrintDis } from "@/api/supply/pickup";
import { getDeliverDetail } from "@/api/supply/deliver";
import { addPrints } from "@/api/supply/pickup";
import { getCompanyList } from "@/api/user";

export default {
  data() {
    return {
      company: "", // 公司名称
      clonelData: [], // 克隆数据
      outputData: [], // 打印数据
      curPaper: {
        type: "A5",
        width: 500,
        height: 147.6,
      },
      paperTypes: {
        A3: {
          width: 420,
          height: 296.6,
        },
        A4: {
          width: 210,
          height: 296.6,
        },
        A5: {
          width: 210,
          height: 147.6,
        },
        B3: {
          width: 500,
          height: 352.6,
        },
        B4: {
          width: 250,
          height: 352.6,
        },
        B5: {
          width: 250,
          height: 175.6,
        },
      },
      scaleValue: 1,
      scaleMax: 5,
      scaleMin: 0.5,
      loading: false,
      hiprintTemplate: "",
      addIds: [],
    };
  },
  computed: {
    curPaperType() {
      let type = "other";
      let types = this.paperTypes;
      for (const key in types) {
        let item = types[key];
        let { width, height } = this.curPaper;
        if (item.width === width && item.height === height) {
          type = key;
        }
      }
      return type;
    },
  },
  created() {
    this.getCompanyLists();
  },
  methods: {
    // 初始化打印模板
    initPrint() {
      hiprint.init({
        providers: [new defaultElementTypeProvider()],
      });
      // 替换配置
      hiprint.setConfig({
        movingDistance: 2.5,
        text: {
          supportOptions: [
            {
              name: "styler",
              hidden: true,
            },
            {
              name: "formatter",
              hidden: true,
            },
          ],
        },
      });
      // eslint-disable-next-line no-undef
      hiprint.PrintElementTypeManager.buildByHtml($(".ep-draggable-item"));
      this.hiprintTemplate = new hiprint.PrintTemplate({
        template: panel,
        settingContainer: "#PrintElementOptionSetting",
        paginationContainer: ".hiprint-printPagination",
      });
      this.hiprintTemplate.design("#hiprint-printTemplate");
      // 获取当前放大比例, 当zoom时传true 才会有
      // this.scaleValue = hiprintTemplate.editingPanel.scale || 1;
    },
    /**
     * 获取需要打印数据详情
     * @param {Array} ids
     */
    async getDateil(ids, funcType = "getDeliverDetail") {
      this.$startLoading();
      let loadingLen;
      // 兼容多个打印数据
      ids = ids instanceof Array ? ids : [ids];
      console.log(ids);
      // 清空之前打印的数据
      this.outputData = [];
      // 筛选id
      let formatting = [];

      // 仓库认证请求接口参数
      let params = [];

      // 获取数据id
      for (let i = ids.length; i > 0; i--) {
        formatting.push(ids[i - 1].id || ids[i - 1]);
        if (funcType === "getDtailPrintDis") {
          params.push({
            id: ids[i - 1].id,
            invoiceId: ids[i - 1].invoiceId,
          });
          this.addIds.push(ids[i - 1].id);
        }
      }

      if (funcType === "getDtailPrintDis") {
        const requestParams = params;
        try {
          const { data } = await getDtailPrintDis(requestParams);
          loadingLen = data.length;
          for (let i = data.length; i > 0; i--) {
              const newData = data[i - 1];
              await this.setPrintData(newData);
            loadingLen--;
          }
        } catch (error) {
          this.$endLoading();
          console.error("获取打印数据失败");
        }
      } else {
        // id 去重
        formatting = [...new Set(formatting)];
        loadingLen = formatting.length;
        for (let i = formatting.length; i > 0; i--) {
            const requestParams = {
              id: formatting[i - 1],
            };
            try {
              const { data } = await getDeliverDetail(requestParams);
              this.setPrintData(data);
            } catch (error) {
              this.$endLoading();
              console.error("获取打印数据失败");
            }
          loadingLen--;
        }
      }
      if (loadingLen == 0) {
        return Promise.resolve();
      }
    },
    // 获取公司名称
    async getCompanyLists() {
      try {
        const { data } = await getCompanyList();
        this.company = data ? data[0].companyName : "";
      } catch (error) {
        console.error("获取公司名称失败");
      }
    },
    // 获取当前时间
    nowDate() {
      var date = new Date();
      var seperator1 = "-";
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var currentdate = year + seperator1 + month + seperator1 + strDate;
      return currentdate;
    },
    // 格式化时间
    dateToDayFilter(date) {
      if (!date) {
        return "";
      }
      return date.slice(0, 10);
    },
    // 添加次数
    async addPrint(funcType = "getDeliverDetail") {
      let ids = [];
      for (let i = this.clonelData.length; i > 0; i--) {
        const tempData = this.clonelData[i - 1].invoicePickBeans;
        if (tempData.length) {
          for (let e = tempData.length; e > 0; e--) {
            const newTempData = tempData[e - 1];
            ids.push(newTempData.id);
          }
        } else {
          return (
            this.clonelData[i - 1].invoiceOrderId || this.clonelData[i - 1].id
          );
        }
      }
      try {
        let requestParams = {};
        if (funcType === "getDtailPrintDis") {
          ids = [...new Set(this.addIds)];
          requestParams = {
            ids: ids.join(","),
          };
          funcType = addPrint;
        } else {
          requestParams = {
            ids: ids.join(","),
          };
          funcType = addPrints;
        }
        await funcType(requestParams);
      } catch (error) {
        console.error("添加打印次数失败");
      }
    },
    /**
     * 设置纸张大小
     * @param type [A3, A4, A5, B3, B4, B5, other]
     * @param value {width,height} mm
     */
    setPaper(type, value) {
      try {
        if (Object.keys(this.paperTypes).includes(type)) {
          this.curPaper = {
            type: type,
            width: value.width,
            height: value.height,
          };
          this.hiprintTemplate.setPaper(value.width, value.height);
        } else {
          this.curPaper = {
            type: "other",
            width: value.width,
            height: value.height,
          };
          this.hiprintTemplate.setPaper(value.width, value.height);
        }
      } catch (error) {
        this.$message.error(`操作失败: ${error}`);
      }
    },
    /**
     * 方法1
     * 自定义模板数据
     * @param {object} data
     * this.outputData 打印数据
     */
    setPrintData(data) {
      let salesOrderId , invoiceId
      salesOrderId=data.invoicePickBeans[0].salesOrderId
      invoiceId=data.invoicePickBeans[0].invoiceId
      // 初始化打印次数
      let printNum = 0;
      //避免数据发生改变
      this.clonelData.push(JSON.parse(JSON.stringify(data)));
      // 需要计算长度和数据裁切
      let invoicePickBeans = data.invoicePickBeans;
      // 获取length向上取整
      let len = Math.ceil(invoicePickBeans.length / 5);
      for (let index = 0; index < len; index++) {
        const table = [];
        //  length <= 0 则不执行打印
        if (invoicePickBeans.length) {
          // 取第一个条数据printNum
          printNum = invoicePickBeans[0].printNum;
          const newInvoicePickBeans = invoicePickBeans.splice(0, 5);
          for (let e = newInvoicePickBeans.length; e > 0; e--) {
            const tempData = newInvoicePickBeans[e - 1];

            //添加表格数据
            table.push({

              id: tempData.id,
              createTime: tempData.id
                ? this.dateToDayFilter(data.createTime)
                : "",
              enginOrderType:
                tempData.orderType == "HOME" || tempData.orderType == "TRADE"
                  ? tempData.enginOrderNo
                  : tempData.mainOrderId,
              materialName: tempData.materialName,
              specification: tempData.specification,
              refundableQty: tempData.refundableQty,
              pjxh1Text: tempData.pjxh1Text,
            });
          }
        }

        // 添加print输出数据
        this.outputData.push({
          pageNumber: `${len}-${index + 1}`,
          printNum:printNum + 1,
          salesId: salesOrderId,
          invoiceId: invoiceId,
          type: data.type,
          tiTui: data.type === 2 ? `退货人：${data.createBy}` : `提货人`,
          takerPhone: data.takerPhone || "",
          headerRemark: data.remark,
          total_num: data.total_num,
          company:
            data.type === 2
              ? `${this.company}销售退货单`
              : `${this.company}销售发货单`,
          pickOrderWater: data.pickOrderWater,
          customerNumber: data.customerNumber,
          takerDa: "",
          nowDate: this.nowDate(),
          takerName:
            data.type === 2
              ? `退货人：${data.takerName || ""}`
              : `提货人：${data.takerName || ""}`,
          customerName: data.customerName || "",
          correspondName: data.correspondName,
          correspondNames: "",
          pickCar: data.pickCar || "",
          createBy: JSON.parse(localStorage.getItem("supply_user")).nickName,
          table,
        });
      }
    },
    /**
     * 方法2
     * 自定义打印模板
     * @param {object} data
     * @returns HtmlDom
     */
    setPrintDom(data) {
      return `
         <div style="font-family:'黑体';">
            <h1 style="text-align:center">${this.company}其他收款单</h1>
            <div>
                <div>
                  <span style="wdith:50%"></span>
                  <span style="wdith:50%"></span>
                </div>
                <div>
                  <span style="wdith:50%"></span>
                  <span style="wdith:50%"></span>
                </div>
            </div>
            <div >
              <table border=".5" cellspacing="0" width="856" height="250"
               style="border-color: rgb(0,0,0);
                border-collapse: collapse;
                border-style: none;
                border: 1px solid rgb(0,0,0);
                font-weight: normal;
                direction: ltr;
                padding-bottom: 0pt;
                padding-left: 4pt;
                padding-right: 4pt;
                padding-top: 0pt;
                text-decoration: none;
                vertical-align: middle;
                box-sizing: border-box;
                word-wrap: break-word;
                word-break: break-all;">
                  <tr>
                    <td>单据编号</td>
                    <td>${data.billNo}</td>
                    <td>业务日期</td>
                    <td>${data.theTime}</td>
                    <td>打印日期</td>
                    <td>${data.createTime}</td>
                  </tr>
                  <tr>
                    <td>付款单位</td>
                    <td colspan="3">${data.customerName}</td>
                    <td>项目费用名称</td>
                    <td>${data.customerType}</td>
                  </tr>
                  <tr>
                    <td>钱包</td>
                    <td>${data.walletName}</td>
                    <td>实收金额</td>
                    <td style="text-align:right">${numToFixed(data.amount)}</td>
                    <td colspan="2">${data.amount}</td>
                  </tr>
                  <tr>
                    <td>备注</td>
                    <td colspan="5">${data.remark}</td>
                  </tr>
              </table>
            </div>
            <div style="margin:100px 0 0 0">
                <div>
                  <div>
                    <span style="wdith:50%"></span>
                    <span style="wdith:50%"></span>
                  </div>
                  <div>
                    <span style="wdith:50%"></span>
                    <span style="wdith:50%"></span>
                  </div>
                </div>
            </div>
         </div>
        `;
    },
  },
};