vprint v1.4.9

要求

Vue version > 2.6

引入

npm install vprint -S

// main.js
import vprint from 'vprint'
Vue.use(vprint)

使用

<el-button-group>
  <el-button size="mini" type="default" @click="handlePrint">
    批量打印
  </el-button>
  <el-button
    icon="el-icon-s-tools"
    size="mini"
    type="primary"
    @click="handleConfig"
  />
</el-button-group>
<vprint
  class="vprint-wrap"
  v-if="isShowPrint"
  ref="vprint"
  :printData="printData"
  :isVisual="true"
  :encryptMethod="0"
>
    <template #cargo="{ item }">
      <div class="cargo-wrap">
        <div>托寄物：{{ item.content }}</div>
        <div v-if="!hideConfig.isHideRemark">{{ item.remark }}</div>
      </div>
    </template>
    <template #orderExts="{ item }">
      <div v-if="item.orderExts && item.orderExts.length">
        <span
          v-for="(v, i) in item.orderExts"
          :key="i"
          style="margin-right: 5px;"
        >
        {{ v.name }}:{{ v.value }}{{ item.currency }}
        </span>
      </div>
    </template>
</vprint>
<el-dialog
  width="900px"
  top="10px"
  title="打印设置"
  :append-to-body="true"
  :visible.sync="printVisible"
  :before-close="closeConfig"
>
  <div class="print-wrap" v-if="printVisible">
    <vprint
      ref="vconfig"
      :printData="printData"
      :isVisual="true"
      :encryptMethod="0"
    >
    </vprint>
  </div>
</el-dialog>

created () {
  this.hideConfig = JSON.parse(localStorage.getItem('hideConfig')) || {}
}

handlePrint () {
  this.isShowPrint = true
  this.$nextTick(() => {
    this.$refs.vprint.handlePrint()
  })
}

handleConfig () {
  this.printVisible = true
  this.$nextTick(() => {
    this.$refs.vconfig.handleConfig(
      // 此处可传一个数组来覆盖默认的预览打印数据
    )
  })
}

closeConfig () {
  this.hideConfig = JSON.parse(localStorage.getItem('hideConfig')) || {}
  this.printVisible = false
}

.vprint-wrap {
  position: absolute;
  top: -2000px;
  left: -2000px;
}
.print-wrap {
  padding: 20px;
  height: 700px;
  overflow-y: auto;
}
.cargo-wrap {
  position: relative;
  width: 50%;
  height: 100%;
  padding: 5px;
  border-bottom: 1px solid #000;
}

属性

打印字段

  isReturnTracking: false, // 是否为签回单 (v1.4.0及以上)
  isCustom: false, // 内容是否为整单自定义
  isImage: false, // 内容是否为图片
  imageUrl: '' // 图片地址
  isIntel: true, // 是否国际件
  isGAT: false, // 是否港澳台
  currency: 'USD', // 币种
  declaredValue: 5000, // 声明价值
  waybillFee: 20, // 运费
  expressTypeName: '国际标快-文件', // 国际件的产品类型名称
  orderExts: [ // 这里一般是自定义的增值服务(没用到)
    {
      name: 'DSS',
      value: '10.00',
      id: 11,
      type: 'AddedService',
      label: '',
      value1: '',
      value2: '',
      value3: '',
      value4: '',
      orderId: 'OD480685082101829632'
    },
    {
      name: 'SPP',
      value: '5',
      id: 12,
      type: 'AddedService',
      label: '',
      value1: '',
      value2: '',
      value3: '',
      value4: '',
      orderId: 'OD480685082101829632'
    }
  ], // 国际件增值服务
  times: 0, // 打印次数
  proCode: '特快', // 中文标签
  proName: '限时KC24', // 限时值
  destCountry: 'CN', // 收件国家代码
  destRouteLabel: '755W-755BFE', // 路由标签信息
  destTeamCode: '018', // 目的地单元区域
  codingMapping: 'D18', // 入港映射码
  sourceTransferCode: '755W', // 原寄地中转场(没用到)
  twoDimensionCode:
  "MMM={'k1':'755W','k2':'755BF','k3':'018','k4':'T4','k5':'444017634769','k6':'','k7':'56faa109'}", // 二维码
  abFlag: 'E', // A,B,E
  newAbflag: 'RE', // A，B，E,RE
  xbFlag: '1', // 快运转寄
  codingMappingOut: '1A', // 出港映射码
  // abFlag:A & newAbflag:燃 >融通&笼\蟹\生\易碎>>重点易碎>超重>>大客户>：药\防疫；> 柜
  printIcon: '00020001',
  newIcon: '01000000',
  orderId: '01343795412953600000', // 订单号(没用到)
  content: '测试物品', // 托寄物内容
  mailNo: 'SF8888888888888,SF8888888888881', // 运单号
  deliverCompany: '深圳仓', // 寄，公司
  deliverName: '测试账号1', // 寄，姓名
  deliverMobile: '15000000000', // 寄，手机号
  deliverProvince: '广东省', // 寄，省
  deliverCity: '深圳市', // 寄，市
  deliverCounty: '福田区', // 寄，区
  deliverAddress: '新洲十一区万基商务大厦', // 寄，地址
  consignerCompany: '小微科技组', // 收，公司
  consignerName: '测试', // 收，姓名
  consignerMobile: '15000000000', // 收，手机号
  consignerProvince: '广东省', // 收，省
  consignerCity: '深圳市', // 收，市
  consignerCounty: '福田区', // 收，区
  consignerAddress: '万基商务大厦', // 收，地址
  payMethod: 1, // 付款方式
  payMethodText: '寄付月结' // 优先级大于payMethod (v1.4.0及以上)
  monthAccount: '7551234567', // 月结卡号
  meterageWeight: null, // 计费重量
  cargoWeight: null, // 实际重量
  totalFee: 150, // 费用合计
  remark: '备注信息', // 备注
  cod: 1000, // /代收付款金额
  parcelQuantity: 2, // 包裹数，>1表示子母单
  cargoCount: null, // 物品数量
  expressTypeText: '顺丰标快', // 产品类型名称
  addedService: 'COD,1000' // 增值服务

自定义内容

插槽字段说明

使用示例

<!--
  <template #插槽名称="{ item }">
    自定义内容，其中item为printData数组的子元素
  </template>
-->
<vprint
  v-if="isShowPrint"
  ref="vprint"
  :printData="printData"
  :isVisual="true"
  :encryptMethod="0"
>
  <template #config>
    <div style="margin-bottom: 10px;">
      <el-radio v-model="temp_config" :label="0">
        测试0
      </el-radio>
      <el-radio v-model="temp_config" :label="1">
        测试1
      </el-radio>
    </div>
  </template>
  <!-- umd -->
  <template slot="custom" slot-scope="{item}">
    <div v-if="item.isCunGen">寄件存根禁止流通</div>
  </template>
  <!-- npm -->
  <template #cargo="{ item }">
    <div class="cargo-wrap">
      <div>托寄物：{{ item.content }}</div>
      <div v-if="!hideConfig.isHideRemark">{{ item.remark }}</div>
    </div>
  </template>
</vprint>

其他

获取打印机列表

this.$refs.vprint.getPrinters() // v1.2.0新增

选择非默认打印机打印

/* 打印机索引，默认值为-1 */
const printIndex = 0
this.$refs.vprint.handlePrint(printIndex) // v1.2.0新增

打印完成的回调函数

<vprint @handlecomplete="handlecomplete"></vprint>

methods: {
  // v1.3.7新增
  handlecomplete() {
    console.log('complete')
  }
}

版本

v1.3.3

2021-04-27

• 修复子单的二维码内容为子单号而非母单号

v1.3.4

2021-04-27

• 新增主动传入运单序号(subOrderNum字段)替换默认的值

v1.3.5

2021-04-29

• 控制台显示捕捉的异常信息

v1.3.6

2021-05-12

• 优化未安装插件的用户体验

v1.3.7

2021-05-28

• 修复打印完成后的回调函数

v1.3.8

2021-06-23

• 修复数字字母太长换行的问题
• 修复abFlag图片为空报错的问题

v1.3.9

2021-06-09

• 一联模板添加自定义字段
• 部分文字不需要换行

v1.4.0

2021-06-10

• isReturnTracking 是否为签回单：如果为签回单，则面单条形码下面的“单号”会变成“签回单号”
• payMethodText 付款方式中文名称：该字段有值则无视payMethod字段，直接显示payMethodText
• 添加topInfo插槽：自定义条形码下方的打印信息

v1.4.1

2021-07-06

• 处理abFlag、newAbflag、xbFlag、printIcon、newIcon字段返回的数值对应的图标

v1.4.2

2021-07-15

• 自定义加密，可分开对收寄件信息的姓名、手机、公司、省市区、地址进行加密

v1.4.3

2021-10-28

• 修复不选择打印机时会默认第一个打印机的bug

v1.4.4

2021-12-03

• 修复子单二维码不是子单号而是母单号的bug

v1.4.5

2022-05-23

• 修复一联单打印出来偏小的问题

v1.4.7

2022-07-27

• 修复一联单插件打印字体太大的问题

v1.4.8

2022-08-15

• 修复一联单插件备注文字过多的问题

v1.4.9

2023-03-23

• 支持整个面单完全自定义