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'
      const types = this.paperTypes
      for (const key in types) {
        const item = types[key]
        const { 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', check = null) {
      this.$startLoading()
      let loadingLen
      // 兼容多个打印数据
      ids = ids instanceof Array ? ids : [ids]
      console.log(ids)
      // 清空之前打印的数据
      this.outputData = []
      // 筛选id
      let formatting = []

      // 仓库认证请求接口参数
      const 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, funcType, check)
            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()
            this.$errorMsg(error)
            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)
    },
    // 添加次数
    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
        }
      }
      let requestParams = {}
      try {
        if (funcType === 'getDtailPrintDis') {
          ids = [...new Set(this.addIds)]
          requestParams = {
            ids: ids.join(',')
          }
          funcType = addPrint
        } else {
          requestParams = {
            ids: ids.join(',')
          }
          funcType = addPrints
        }

        funcType(requestParams)
        // 清空当前克隆数据，避免重复添加次数
        this.clonelData = []
      } catch (error) {
        // console.error('添加打印次数失败')
        this.clonelData = []
        this.$errorMsg('添加打印次数失败' + JSON.stringify(requestParams))
      }
      return Promise.resolve()
    },
    /**
     * 设置纸张大小
     * @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, funcType, check) {
      let salesOrderId, invoiceId // 出库单号，发货单号 默认数据中的第一个
      salesOrderId = data.invoicePickBeans[0].salesOrderId
      invoiceId = data.invoicePickBeans[0].invoiceId
      let refUseUnit, refEnginRecordNo
      refUseUnit = data.refUseUnit || data.invoicePickBeans[0].refUseUnit || ''
      refEnginRecordNo = data.refEnginRecordNo || data.invoicePickBeans[0].refEnginRecordNo || ''
      let remark
      remark = funcType === 'getDtailPrintDis' ? data.invoicePickBeans[0].remark || '' : data.remark || ''
      console.log(data.invoicePickBeans[0], 'oo')
      const tuiHuoRen = data.createBy
      // 数量合计
      let total = 0
      // 初始化打印次数
      let printNum = 0
      // 避免数据发生改变
      this.clonelData.push(JSON.parse(JSON.stringify(data)))
      // 需要计算长度和数据裁切
      const invoicePickBeans = data.invoicePickBeans
      // 获取length向上取整
      const 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]
            total += Math.abs(+tempData.refundableQty)

            // 添加表格数据
            table.push({
              id: tempData.id,
              createTime: tempData.id ? this.dateToDayFilter(data.createTime) : '',
              enginOrderType:
                tempData.orderType == 'HOME' ||
                tempData.orderType == 'TRADE' ||
                tempData.orderType === 'REQUISITION_TRADE' ||
                tempData.orderType === 'REQUISITION_HOME'
                  ? 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,
          refUseUnit: refUseUnit,
          refEnginRecordNo: refEnginRecordNo,
          type: data.type,
          tiTui: data.type === 2 ? `退货人` : `提货人`,
          takerPhone: data.takerPhone || '',
          headerRemark: remark,
          total_num: data.total_num,
          total: total,
          company: data.type === 2 ? `${this.company}销售退货单` : `${this.company}销售发货单`,
          pickOrderWater: data.pickOrderWater,
          customerNumber: data.customerNumber,
          takerDa: '',
          nowDate: this.nowDate(),
          takerName:
            data.type === 2
              ? `退货人：${check == 0 ? data.pickLogistics || '' : tuiHuoRen || ''}`
              : `提货人：${check == 0 ? data.pickLogistics || '' : 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>
        `
    },
    /**
     * 备份方法
     * 获取需要打印数据详情
     * @param {Array} ids
     */
    async getDateils(ids, funcType = 'getDeliverDetail') {
      this.$startLoading()
      let loadingLen
      // 兼容多个打印数据
      ids = ids instanceof Array ? ids : [ids]
      console.log(ids)
      // 清空之前打印的数据
      this.outputData = []
      // 筛选id
      let formatting = []

      // 仓库认证请求接口参数
      const 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()
            this.$errorMsg(error)
            console.error('获取打印数据失败')
          }
          loadingLen--
        }
      }
      if (loadingLen == 0) {
        return Promise.resolve()
      }
    }
  }
}