打印进度组件 IPrintProgress

介绍

用于打印Order时显示打印进度

代码演示

Print Task Progress

500 seconds left

基本使用

这是一个print-progress基本的使用例子

<template>
  <div>
    <div>{{ progress }}</div>
    <div>
      <el-button
        type="primary"
        @click="open"
        :disabled="progress?.isProgressVisible === true"
      >
        打开print progress进度框
      </el-button>
      <el-button style="margin-left: 10px" type="warning" @click="reset">
        reset
      </el-button>
      <el-button style="margin-left: 10px" type="success" @click="start">
        start
      </el-button>
      <el-button style="margin-left: 10px" type="danger" @click="stop">
        stop
      </el-button>
      <i-print-progress
        :fetchPrintStatus="fetchPrintStatus"
        :abortAllBtnloading="abortAllBtnloading"
        :abortPartBtnloading="abortPartBtnloading"
        @printSuccess="printSuccess"
        @abortAll="abortAll"
        @abortPart="abortPart"
        ref="printRef"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";

const printRef: any = ref(null);

const progress: any = ref(null);

const abortAllBtnloading = ref(false);
const abortPartBtnloading = ref(false);

let currentDoneOrderNumber = 0;
let orderNumber = 20;

// 打开打印进度条
function open() {
  progress.value = printRef.value.open();
  console.log(progress.value);
}

// 重置打印进度条
function reset() {
  currentDoneOrderNumber = 0;
  printRef.value.reset();
}

// 停止打印
function stop() {
  printRef.value.stop();
}

// 继续打印
function start() {
  printRef.value.start();
}

// 打印进度条打印完成回调
function printSuccess() {
  currentDoneOrderNumber = 0;
}

// 点击停止生成lable回调
function abortAll(batchId: string) {
  // 调用接口
  console.log("batchId", batchId);
  // 模拟请求
  abortAllBtnloading.value = true;
  setTimeout(() => {
    abortAllBtnloading.value = false;
  }, 3000);
}

// 点击停止部分生成label回调
function abortPart({
  batchId,
  selection,
}: {
  batchId: string;
  selection: Array<any>;
}) {
  // 调用接口
  console.log("batchId", batchId, "selection", selection);
  // 模拟请求
  abortPartBtnloading.value = true;
  setTimeout(() => {
    abortPartBtnloading.value = false;
  }, 3000);
}

function fetchPrintStatus() {
  return new Promise((resolve, reject) => {
    // 模拟每次获取状态列表更新的数据
    currentDoneOrderNumber++;
    resolve({
      batchId: "816880bb-48e9-443f-a767-b0e47c0ab875",
      printStatus: "PRINTING",
      orderDetails: [
        {
          id: null,
          orderNo: "SO100081925",
          accountId: null,
          merchantId: "1810590020273848322",
          cartId: null,
          dataChannel: "",
          status: "PRINTED",
          orderDate: "1720546192000",
          requiredShippingDate: null,
          source: "Created",
          sourceId: null,
          originalReferenceId: null,
          originalPurchaseOrderNumber: null,
          originalCustomerOrderNumber: null,
          originalShippingService: null,
          warehouseStatus: null,
          warehouseId: null,
          orderType: null,
          shipMethod: "",
          carrier: {
            name: "ENDI",
            scac: "ENDI",
          },
          deliveryService: "",
          shippingService: "ECON",
          shipToAddress: {
            id: null,
            firstName: null,
            lastName: null,
            name: null,
            company: null,
            address1: "Calaveras",
            address2: "",
            address3: "",
            email: "",
            phone: "1111111111",
            city: "Altaville",
            state: "CA",
            zipCode: "95221",
            country: "US",
            addressType: null,
          },
          billToAddress: {
            id: null,
            firstName: null,
            lastName: null,
            name: null,
            company: null,
            address1: "Alachua",
            address2: "",
            address3: "",
            email: "[email protected]",
            phone: "1111111111",
            city: "Gainesville",
            state: "CA",
            zipCode: "91744",
            country: "US",
            addressType: null,
          },
          shipFromAddress: {
            id: null,
            firstName: "Cubework",
            lastName: "CA test0402",
            company: "US",
            address1: "Los Angeles",
            address2: null,
            email: "",
            phone: "(800) 858-9889",
            city: "La Puente",
            state: "CA",
            zipCode: "91744",
            country: "US",
            isDefault: null,
            isSaveToAccount: null,
            appendString: null,
            defaultAccountId: null,
            departmentId: null,
            department: null,
          },
          itemLines: [
            {
              itemId: null,
              itemSequence: null,
              itemName: null,
              itemSku: "banana",
              itemDescription: "banana",
              poLineNo: "",
              uom: "",
              qty: 1,
              price: 0,
              discountAmount: 0,
              totalAmount: 0,
              length: 3,
              width: 3,
              height: 3,
              linearUom: "cm",
              weight: 3,
              weightUom: "lb",
            },
          ],
          totalAmount: 0,
          subtotalAmount: 0,
          discountAmount: 0,
          salesTaxAmount: null,
          shippingAmount: null,
          buyerFirstName: "",
          buyerLastName: "",
          note: null,
          createUser: null,
          createDate: null,
          updateUser: null,
          updateDate: null,
          orderLoadDate: null,
          orderSendToWarehouseDate: null,
          dataChannelText: null,
          cartName: null,
          linkerOrderStatus: null,
          rate: {
            success: null,
            message: null,
            carrier: "ENDI",
            serviceType: "GRNDADV",
            shipperAccount: "2552760",
            insurancePrice: 0,
            premium: null,
            accountId: null,
            billingCost: 7.32,
            totalPrice: null,
            markup: 0.2,
            providerPrice: 6.1,
            serviceDescription: "Ground Advantage",
            deliveryService: null,
            unisDeliveryService: "GRNDADV",
          },
          warehouseType: null,
          warehouse: null,
          warehouseName: null,
          merchantName: null,
          postdate: null,
          orderShipDate: null,
          trackingOrProNumber: null,
          shipments: null,
          shipmentPostDate: null,
          errorMessage: null,
          orderPrintStatus: "PRINTED",
          message:
            "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
        },
        {
          id: null,
          orderNo: "SO100081924",
          accountId: null,
          merchantId: "1810590020273848322",
          cartId: null,
          dataChannel: "",
          status: "New",
          orderDate: "1720546191000",
          requiredShippingDate: null,
          source: "Created",
          sourceId: null,
          originalReferenceId: null,
          originalPurchaseOrderNumber: null,
          originalCustomerOrderNumber: null,
          originalShippingService: null,
          warehouseStatus: null,
          warehouseId: null,
          orderType: null,
          shipMethod: "",
          carrier: {
            name: "ENDI",
            scac: "ENDI",
          },
          deliveryService: "",
          shippingService: "ECON",
          shipToAddress: {
            id: null,
            firstName: null,
            lastName: null,
            name: null,
            company: null,
            address1: "Calaveras",
            address2: "",
            address3: "",
            email: "",
            phone: "1111111111",
            city: "Altaville",
            state: "CA",
            zipCode: "95221",
            country: "US",
            addressType: null,
          },
          billToAddress: {
            id: null,
            firstName: null,
            lastName: null,
            name: null,
            company: null,
            address1: "Alachua",
            address2: "",
            address3: "",
            email: "[email protected]",
            phone: "1111111111",
            city: "Gainesville",
            state: "CA",
            zipCode: "91744",
            country: "US",
            addressType: null,
          },
          shipFromAddress: {
            id: null,
            firstName: "Cubework",
            lastName: "CA test0402",
            company: "US",
            address1: "Los Angeles",
            address2: null,
            email: "",
            phone: "(800) 858-9889",
            city: "La Puente",
            state: "CA",
            zipCode: "91744",
            country: "US",
            isDefault: null,
            isSaveToAccount: null,
            appendString: null,
            defaultAccountId: null,
            departmentId: null,
            department: null,
          },
          itemLines: [
            {
              itemId: null,
              itemSequence: null,
              itemName: null,
              itemSku: "banana",
              itemDescription: "banana",
              poLineNo: "",
              uom: "",
              qty: 1,
              price: 0,
              discountAmount: 0,
              totalAmount: 0,
              length: 3,
              width: 3,
              height: 3,
              linearUom: "cm",
              weight: 3,
              weightUom: "lb",
            },
          ],
          totalAmount: 0,
          subtotalAmount: 0,
          discountAmount: 0,
          salesTaxAmount: null,
          shippingAmount: null,
          buyerFirstName: "",
          buyerLastName: "",
          note: null,
          createUser: null,
          createDate: null,
          updateUser: null,
          updateDate: null,
          orderLoadDate: null,
          orderSendToWarehouseDate: null,
          dataChannelText: null,
          cartName: null,
          linkerOrderStatus: null,
          rate: {
            success: null,
            message: null,
            carrier: "ENDI",
            serviceType: "GRNDADV",
            shipperAccount: "2552760",
            insurancePrice: 0,
            premium: null,
            accountId: null,
            billingCost: 7.32,
            totalPrice: null,
            markup: 0.2,
            providerPrice: 6.1,
            serviceDescription: "Ground Advantage",
            deliveryService: null,
            unisDeliveryService: "GRNDADV",
          },
          warehouseType: null,
          warehouse: null,
          warehouseName: null,
          merchantName: null,
          postdate: null,
          orderShipDate: null,
          trackingOrProNumber: null,
          shipments: null,
          shipmentPostDate: null,
          errorMessage: null,
          orderPrintStatus: "PRINTED",
          message:
            "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
        },
      ],
      orderNumber: orderNumber,
      currentDoneOrderNumber: currentDoneOrderNumber,
      costTime: 6,
      leftTime: 2,
    });
  });
}

onMounted(() => {
  open();
});
</script>

注意：组件库暂时没有支持多语言，进度列表中若存在需要i18n翻译的字段，需要添加i18n映射字段由外部传入翻译后的文字，格式为 i18n: {'i18n-[field]': 'i18nFieldName'}

属性

属性	说明	类型	默认值
title	进度条顶部标题	String	Print Task Progress
description	进度条/列表提示文字	String	The printing is in progress and is expected to take approximately 600 seconds.
abortPrintBtnText	进度条停止打印的按钮名称	String	Abort Print
viewProgressBtnText	进度条查看进度列表的按钮名称	String	View Progress
abortAllBtnText	进度列表右上角停止所有打印的按钮名称	String	Abort All
abortAllBtnloading	进度列表右上角停止所有打印的按钮Loading状态	Boolean	false
AbortBtnText	进度列表右上角停止部分打印的名称	String	Abort
abortPartBtnloading	进度列表右上角停止部分打印的按钮Loading状态	Boolean	false
tableEmptyText	表格缺省名称	String	No Data
leftTime	剩余时间提示文字	String	500 seconds left
position	进度条浮窗展示的位置	Object	{ x: '100%', y: 60 }
duration	进度条轮询打印的间隔时间(秒)	Number	1000
fetchPrintStatus	进度条轮询打印调用的方法	Promise	{}
i18n	i18n映射字段由外部传入翻译后的文字，格式为 i18n: {'i18n-[field]': 'i18nFieldName'}	Object	{}

事件

事件名	说明	类型	默认值
printSuccess	打印完成触发的回调	Function	() => void
abortAll	点击停止全部打印触发的回调	Function	(batchId: string) => void
abortPart	点击停止部分打印触发的回调	Function	({batchId: string, selection: array}) => void

方法

方法名	说明	类型	默认值
open	打开进度条浮窗(调用后会返回响应式的progress进度信息对象)	Function	() => return progress
reset	重置打印进度条(会初始化打印状态并停止轮询)	Function	() => void
stop	暂停打印(会暂停轮询,可通过start再次开启)	Function	() => void
start	继续打印(会开始轮询,可通过stop暂停轮询)	Function	() => void