feat: POD订单(USA)

src/App.vue

@@ -4,11 +4,16 @@
   </el-config-provider>
 </template>
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import zhCn from 'element-plus/es/locale/lang/zh-cn.mjs'
 import en from 'element-plus/es/locale/lang/en.mjs'
+
 const language = ref('zh-cn')
 const locale = computed(() => (language.value === 'zh-cn' ? zhCn : en))
+// 在组件挂载时清空 localStorage
+onMounted(() => {
+  localStorage.removeItem('socket_connect')
+})
 </script>
 <style lang="scss">
 body {

src/api/axios.ts

@@ -60,7 +60,13 @@ export function getFilePath() {
     import.meta.env.VITE_API_BASE_URL + import.meta.env.VITE_API_BASE_UPLOAD_URL
   )
 }
-
+export function getWsUrl() {
+  if (location.protocol === 'https:') {
+    return 'wss://' + location.host
+  } else {
+    return 'ws://' + location.host
+  }
+}
 export const filePath = getFilePath()
 
 export default axios

src/api/podUsOrder.ts

@@ -7,6 +7,7 @@ import {
   LogListData,
 } from '@/types/api/podUsOrder'
 import axios from './axios'
+import { PodMakeOrderData } from '@/types/api/podMakeOrder'
 
 export function getOrderTabData() {
   return axios.get<never, BaseRespData<Tab[]>>(
@@ -109,3 +110,63 @@ export function printProductionOrderApi(orderIds: number[]) {
     orderIds,
   )
 }
+export function getOrderDetailById(id: number) {
+  return axios.get<never, BaseRespData<ProductList>>(
+    `factory/podJomallOrderProductUs/getProductUsById?id=${id}`,
+  )
+}
+export function getPackingDataApi(
+  code: string,
+  factoryNo: number,
+  box: number | null,
+) {
+  return axios.get<never, BaseRespData<PodMakeOrderData>>(
+    '/factory/podJomallOrderUs/getPodBoxDetailsBySkuOrNo',
+    {
+      params: {
+        podJomallUsNo: code,
+        box,
+        factoryNo,
+      },
+    },
+  )
+}
+export function getPodBoxListApi(factoryNo: number | string) {
+  return axios.get<never, BaseRespData<PodMakeOrderData[]>>(
+    'factory/podJomallOrderUs/getPodBoxOrderDetails',
+    {
+      params: { factoryNo },
+    },
+  )
+}
+
+export function submitInspectionApi(
+  data: { id: number; version?: number }[],
+  boxIndex: number | null,
+) {
+  return axios.post<never, BaseRespData<never>>(
+    `factory/podJomallOrderUs/podPrintOrderComplete?box=${boxIndex}`,
+    {
+      orderParamList: data,
+    },
+  )
+}
+export function clearBoxApi(factoryNo: number, box: number | null) {
+  return axios.get<never, BaseRespData<never>>(
+    'factory/podJomallOrderUs/delPodBoxOrderDetailsByBox',
+    {
+      params: { factoryNo, box },
+    },
+  )
+}
+export function clearAllBoxApi() {
+  return axios.get<never, BaseRespData<never>>(
+    'factory/podJomallOrderUs/delPodBoxOrderDetails',
+  )
+}
+export function updateRemarkApi(id: number, content: string) {
+  return axios.post<never, BaseRespData<never>>(
+    'factory/podJomallOrderUs/addRemark',
+    { id, content },
+  )
+}

src/store/order.ts

+import { defineStore } from 'pinia'
+import {
+  OrderData,
+  PodMakeOrderData,
+  ProductList,
+} from '@/types/api/podMakeOrder'
+import { getPodBoxListApi } from '@/api/podUsOrder'
+export interface OrderStoreState {
+  podBoxList?: PodMakeOrderData[]
+  podBoxIndex?: number | null
+  socketConnect?: string
+}
+const useOrderStore = defineStore('order', {
+  state: () => {
+    return {
+      podBoxList: [],
+      podBoxIndex: null,
+      socketConnect: '',
+    } as OrderStoreState
+  },
+  actions: {
+    async setPodBoxList(content: {
+      boxList: PodMakeOrderData[] | OrderData | null
+      factoryNo: number | string
+      box?: number
+      data?: OrderData
+    }) {
+      const { factoryNo, boxList, box, data } = content
+      if (Array.isArray(boxList)) {
+        this.podBoxList = boxList
+      } else {
+        const index = this.podBoxList?.findIndex((item) => item.box === box)
+        if (index === -1) {
+          try {
+            const res = await getPodBoxListApi(factoryNo)
+            const boxList = res.data.map((item) => {
+              if (res.data) {
+                const productList = item?.data?.productList || []
+                const pickingNumber = productList.reduce(
+                  (prev: number, item1: ProductList) => {
+                    if (item1.count) {
+                      return prev + item1.count
+                    }
+                    return prev
+                  },
+                  0,
+                )
+                if (item.data) {
+                  item.data.pickingNumber = pickingNumber
+                }
+              }
+
+              return item
+            })
+            this.podBoxList = boxList
+            this.podBoxIndex = box
+          } catch (error) {
+            console.error(error)
+          }
+        } else if (box !== 0 && box !== undefined) {
+          const arr = this.podBoxList
+          if (arr) {
+            arr[box - 1] = {
+              box,
+              data: data || boxList || null,
+            }
+          }
+          console.log('222arr1111', arr)
+          this.podBoxList = arr
+          this.podBoxIndex = box
+        }
+      }
+    },
+    // 清空所有箱子
+    clearPodBoxList() {
+      this.podBoxList = []
+    },
+    // 设置当前箱子
+    setPodBox(box: number) {
+      this.podBoxIndex = box
+    },
+    // 清空当前箱子
+    clearPodBox() {
+      this.podBoxIndex = null
+    },
+    setSocketConnect(connect: string) {
+      this.socketConnect = connect
+    },
+  },
+})
+
+export default useOrderStore

src/types/api/podMakeOrder.ts

+export interface PodMakeOrderData {
+  data: OrderData | null
+  warehouseId?: number
+  box?: number
+  addDate?: string
+}
+
+export interface OrderData {
+  shipmentsNote?: string
+  filePath?: string
+  fileData?: string
+  logisticsWayName?: string
+  orderStatus?: number
+  salesPlatform?: string
+  logisticsCompanyId?: number
+  blocked?: boolean
+  logisticsCompanyName?: string
+  logisticsWayNameId?: number
+  shopNumber?: string
+  id?: number
+  shopId?: number
+  systemWeight?: number
+  trackingNumber?: string
+  productList?: ProductList[]
+  purchaseNumber?: number
+  pickingNumber?: number
+  printResult?: string
+  remark?: string
+  version?: number
+}
+
+export interface ProductList {
+  warehouseSkuImage: string
+  warehouseSku: string
+  orderItemId: string
+  warehouseSkuName: string
+  productMark: string
+  podJomallNo: string
+  id: number
+  mainSku: string
+  imageAry: string
+  purchaseNumber: number
+  count?: number
+  power?: boolean
+  variantImage?: string
+}

src/types/api/podUsOrder.ts

@@ -13,6 +13,9 @@ export interface SearchForm {
   sku: string
   factorySubOrderNumber: string
   status: string
+  customizedQuantity: string
+  startTime: string | null
+  endTime: string | null
 }
 export interface PodUsOrderListData {
   id: number
@@ -87,6 +90,10 @@ export interface ProductList {
   remark?: string | null
   version?: number
   subOrderNumber?: string
+  craftName?: string | null
+  lanshouAddress?: string | null
+  shopNumber?: string | null
+  factoryOrderNumber?: string | null
 }
 export interface cardImages {
   title: string

src/utils/hooks/useLodop.ts

+import { onMounted } from 'vue'
+
+export interface LODOPObject extends HTMLObjectElement {
+  VERSION: string;
+  CVERSION: string;
+  SET_LICENSES: (companyName: string, licenseA: string, licenseB: string, licenseC: string) => void;
+  GET_PRINTER_COUNT: () => number;
+  GET_PRINTER_NAME: (index: number) => string;
+  PRINT_INIT: (printName: string) => void;
+  SET_PRINTER_INDEX: (printerName: string) => void | string | number | boolean;
+  SET_PRINT_MODE: (mode: string, value: boolean) => void;
+  On_Return: (id: string, value: string) => void;
+  On_Return_Remain: boolean;
+  SEND_PRINT_RAWDATA: (data: string) => void;
+  ADD_PRINT_PDF: (x: number, y: number, width: string, height: string, url: string) => void;
+  GET_VALUE: (valueType: string, valueIndex: string | unknown) => string;
+  PRINT: () => string;
+  PRINTA: () => string;
+}
+
+export interface CLodopObject {
+  CVERSION: string;
+  GET_STATUS: () => number;
+  GET_VALUE: (valueType: string, valueIndex: string | unknown) => string;
+}
+
+declare global {
+  interface Window {
+    LODOP: new () => LODOPObject;
+    CLODOP: CLodopObject;
+    getCLodop: () => LODOPObject;
+  }
+}
+
+export default function useLodop() {
+  let CLodopJsState: 'loading' | 'complete' | null = null
+  let CLodopIsLocal = false
+  let CreatedOKLodopObject: LODOPObject | null = null
+  // 检查是否需要使用 CLODOP
+  const checkNeedCLodop = (): boolean => {
+    try {
+      const ua = navigator.userAgent
+      if (ua.match(/Windows\sPhone/i)) return true
+      if (ua.match(/iPhone|iPod|iPad/i)) return true
+      if (ua.match(/Android/i)) return true
+      if (ua.match(/Edge\D?\d+/i)) return true
+
+      const verTrident = ua.match(/Trident\D?\d+/i)
+      const verIE = ua.match(/MSIE\D?\d+/i)
+      let verOPR = ua.match(/OPR\D?\d+/i)
+      let verFF = ua.match(/Firefox\D?\d+/i)
+      const x64 = ua.match(/x64/i)
+      if (!verTrident && !verIE && x64) return true
+      else if (verFF) {
+        verFF = verFF[0].match(/\d+/)
+        if ((verFF && parseInt(verFF[0]) >= 41) || x64) return true
+      } else if (verOPR) {
+        verOPR = verOPR[0].match(/\d+/)
+        if (verOPR && parseInt(verOPR[0]) >= 32) return true
+      } else if (!verTrident && !verIE) {
+        let verChrome = ua.match(/Chrome\D?\d+/i)
+        if (verChrome) {
+          verChrome = verChrome[0].match(/\d+/)
+          if (verChrome && parseInt(verChrome[0]) >= 41) return true
+        }
+      }
+      return false
+    } catch (err) {
+      return true
+    }
+  }
+  const needCLodop = checkNeedCLodop()
+  const showMsg = (msg: string) => {
+    ElMessageBox.alert(msg, '提示', {
+      dangerouslyUseHTMLString: true,
+      closeOnClickModal: false,
+      center: true,
+    })
+  }
+  // 初始化 LODOP
+  const initLodop = () => {
+    if (CLodopJsState == 'loading' || CLodopJsState == 'complete') return
+    CLodopJsState = 'loading'
+    const head =
+      document.head ||
+      document.getElementsByTagName('head')[0] ||
+      document.documentElement
+    const JS1 = document.createElement('script')
+    const JS2 = document.createElement('script')
+
+    if (window.location.protocol == 'https:') {
+      JS1.src = 'https://localhost.lodop.net:8443/CLodopfuncs.js'
+      JS2.src = 'https://localhost.lodop.net:8444/CLodopfuncs.js'
+    } else {
+      JS1.src = 'http://localhost:8000/CLodopfuncs.js'
+      JS2.src = 'http://localhost:18000/CLodopfuncs.js'
+    }
+    JS1.onload = JS2.onload = function () {
+      CLodopJsState = 'complete'
+    }
+    JS1.onerror = JS2.onerror = function () {
+      CLodopJsState = 'complete'
+    }
+    head.insertBefore(JS1, head.firstChild)
+    head.insertBefore(JS2, head.firstChild)
+    CLodopIsLocal = !!(JS1.src + JS2.src).match(/\/\/localho|\/\/127.0.0./i)
+  }
+  const getCLodop = (oOBJECT: LODOPObject | null, oEMBED: LODOPObject | null): LODOPObject | null => {
+    const strFontTag = '<font _#_>打印控件'
+    const strLodopInstall =
+      strFontTag +
+      '未安装!点击这里<a href=http://www.c-lodop.com/download/CLodop_Setup_for_Win64NT_6.623EN.zip target=_self>执行安装</a>'
+
+    const strLodopUpdate =
+      strFontTag +
+      '需要升级!点击这里<a href=install_lodop32.exe target=_self>执行升级</a>'
+
+    const strLodop64Install =
+      strFontTag +
+      '未安装!点击这里<a href=install_lodop64.exe target=_self>执行安装</a>'
+
+    const strLodop64Update =
+      strFontTag +
+      '需要升级!点击这里<a href=install_lodop64.exe target=_self>执行升级</a>'
+
+    const strCLodopInstallA =
+      '<font >Web打印服务CLodop未安装启动，点击下列按钮执行安装<br><a href=http://www.c-lodop.com/download/lodop6.226_Clodop6.623.zip target=_self>安装32位</a> <a href=http://www.c-lodop.com/download/CLodop_Setup_for_Win64NT_6.623EN.zip target=_blank>安装64位</a><br>'
+
+    const strCLodopInstallB =
+      '（若此前已安装过，可点这里直接<a href=CLodop.protocol:setup target=_self>再次启动</a>）'
+
+    const strCLodopUpdate =
+      '<font >Web打印服务CLodop需升级!点击这里<a href=CLodop_Setup_for_Win32NT.exe target=_self>执行升级</a>'
+
+    const strLodop7FontTag = '<font >Web打印服务Lodop7'
+    const strLodop7HrefX86 =
+      '点击这里<a href=https://www.c-lodop.com/download/Lodop7.105_Linux_X86_64_CN.deb.zip target=_self>下载安装</a>(下载后解压，点击lodop文件开始执行)'
+
+    const strLodop7HrefARM =
+      '点击这里<a href=https://www.c-lodop.com/download/Lodop7.105_Linux_ARM64_CN.deb.zip target=_self>下载安装</a>(下载后解压，点击lodop文件开始执行)'
+
+    const strLodop7Install_X86 =
+      strLodop7FontTag + '未安装启动，' + strLodop7HrefX86
+    const strLodop7Install_ARM =
+      strLodop7FontTag + '未安装启动，' + strLodop7HrefARM
+    const strLodop7Update_X86 = strLodop7FontTag + '需升级，' + strLodop7HrefX86
+    const strLodop7Update_ARM = strLodop7FontTag + '需升级，' + strLodop7HrefARM
+    const strInstallOK = '，成功后请刷新本页面或重启浏览器。</font>'
+    let LODOP: LODOPObject | null = null
+    try {
+      const isWinIE =
+        /MSIE/i.test(navigator.userAgent) ||
+        /Trident/i.test(navigator.userAgent)
+      const isWinIE64 = isWinIE && /x64/i.test(navigator.userAgent)
+      const isLinuxX86 =
+        /Linux/i.test(navigator.userAgent) && /x86_64/i.test(navigator.userAgent)
+      const isLinuxARM =
+        /Linux/i.test(navigator.userAgent) && /aarch64/i.test(navigator.userAgent)
+
+      if (needCLodop || isLinuxX86 || isLinuxARM) {
+        try {
+          LODOP = window.getCLodop()
+        } catch (err) {
+          console.error(err)
+        }
+        if (!LODOP && CLodopJsState !== 'complete') {
+          if (CLodopJsState == 'loading')
+            alert('网页还没下载完毕，请稍等一下再操作.')
+          else alert('未曾加载Lodop主JS文件，请先调用loadCLodop过程.')
+          return null
+        }
+        let strAlertMessage
+        if (!LODOP) {
+          if (isLinuxX86) strAlertMessage = strLodop7Install_X86
+          else if (isLinuxARM) strAlertMessage = strLodop7Install_ARM
+          else
+            strAlertMessage =
+              strCLodopInstallA + (CLodopIsLocal ? strCLodopInstallB : '')
+          showMsg(strAlertMessage + strInstallOK)
+          return null
+        } else {
+          if (isLinuxX86 && LODOP.CVERSION < '7.0.4.3')
+            strAlertMessage = strLodop7Update_X86
+          else if (isLinuxARM && LODOP.CVERSION < '7.0.4.3')
+            strAlertMessage = strLodop7Update_ARM
+          else if (window.CLODOP.CVERSION < '4.1.6.1')
+            strAlertMessage = strCLodopUpdate
+
+          if (strAlertMessage) showMsg(strAlertMessage + strInstallOK)
+        }
+      } else {
+        //==如果页面有Lodop插件就直接使用,否则新建:==
+        if (oOBJECT || oEMBED) {
+          if (isWinIE) LODOP = oOBJECT
+          else LODOP = oEMBED
+        } else if (!CreatedOKLodopObject) {
+          LODOP = document.createElement('object') as unknown as LODOPObject
+          LODOP.setAttribute('width', '0')
+          LODOP.setAttribute('height', '0')
+          LODOP.setAttribute(
+            'style',
+            'position:absolute;left:0px;top:-100px;width:0px;height:0px;',
+          )
+          if (isWinIE)
+            LODOP.setAttribute(
+              'classid',
+              'clsid:2105C259-1E0C-4534-8141-A753534CB4CA',
+            )
+          else LODOP.setAttribute('type', 'application/x-print-lodop')
+          document.documentElement.appendChild(LODOP)
+          CreatedOKLodopObject = LODOP
+        } else LODOP = CreatedOKLodopObject
+        //==Lodop插件未安装时提示下载地址:==
+        if (!LODOP || !LODOP.VERSION) {
+          showMsg(
+            (isWinIE64 ? strLodop64Install : strLodopInstall) + strInstallOK,
+          )
+
+          return null
+        }
+        if (LODOP.VERSION < '6.2.2.6') {
+          showMsg(
+            (isWinIE64 ? strLodop64Update : strLodopUpdate) + strInstallOK,
+          )
+        }
+      }
+
+      if (location.host.indexOf('jomalls.com') !== -1) {
+        LODOP.SET_LICENSES('', '90D9E6991E35971D8FC86B525F637C8A9F9', '', '')
+      } else {
+        LODOP.SET_LICENSES('', 'A9F23BF819622E36A8775E717685989E9FC', '', '')
+      }
+      return LODOP
+    } catch (err) {
+      alert('getLodop出错:' + err)
+    }
+    return null
+  }
+  onMounted(() => {
+    initLodop()
+  })
+  return {
+    getCLodop,
+  }
+}

src/utils/websocket.ts

+import { getWsUrl } from '../api/axios'
+import useOrderStore from '../store/order'
+
+interface NotificationOptions {
+  body: string
+  icon: string
+  data: string
+  requireInteraction: boolean
+}
+
+export interface WebSocketMessage {
+  code?: string
+  content?: string
+  type?: string
+  data?: unknown
+  [key: string]: string | unknown | undefined
+}
+
+interface InitOptions {
+  account: string
+  factoryNo: string
+}
+
+type MessageCallback = (
+  data: WebSocketMessage,
+  sendSystemMessage: (msg: string) => void,
+) => void
+type OpenCallback = () => void
+
+function sendSystemMessage(msg: string): void {
+  if (window.Notification && Notification.permission === 'granted') {
+    const notificationOptions: NotificationOptions = {
+      body: msg,
+      icon: './favicon.ico',
+      data: 'I like peas.',
+      requireInteraction: true,
+    }
+
+    const n = new Notification('消息通知', notificationOptions)
+
+    n.onclick = (event: Event) => {
+      event.preventDefault()
+      window.open('/home', '_blank')
+    }
+
+    setTimeout(() => {
+      n.close()
+    }, 10000)
+  }
+}
+
+const showReconnectingMsg = (): void => {
+  ElMessageBox.alert('消息服务已断开，正在重新连接，请稍候', {
+    showClose: true,
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  })
+}
+
+class Im {
+  private socket: WebSocket | null = null
+  private _wsUrl: string = ''
+  private userId: string = ''
+  private _onMessageCallback?: MessageCallback
+  private _onOpenCallback?: OpenCallback
+  private _heartbeatTimer: number | null = null
+  private _heartbeatTimeoutTimer: number | null = null
+  private _reconnectingTimer: number | null = null
+  private num: number = 0
+
+  constructor() {
+    this._onWsOpen = this._onWsOpen.bind(this)
+    this._onWsMessage = this._onWsMessage.bind(this)
+    this._onWsClose = this._onWsClose.bind(this)
+    this._onWsError = this._onWsError.bind(this)
+  }
+
+  private _onWsOpen(): void {
+    console.log('服务器连接成功')
+    localStorage.setItem('socket_connect', 'online')
+    this._onOpenCallback?.()
+    this._startHeartbeat()
+  }
+
+  private _onWsMessage(event: MessageEvent): void {
+    let data: WebSocketMessage = {}
+    if (typeof event.data === 'string') {
+      try {
+        data = JSON.parse(event.data)
+      } catch (error) {
+        data = {}
+      }
+    }
+    this._onHeartbeatMessage()
+    this._onMessageCallback?.(data, sendSystemMessage)
+  }
+
+  private _onWsClose(): void {
+    console.log('服务器关闭')
+    this._destroyWebSocket(true)
+  }
+
+  private _onWsError(): void {
+    console.log('连接出错')
+    this._destroyWebSocket(true)
+  }
+
+  private _sendHeartbeat(): void {
+    if (!this.socket) return
+    this.send({ code: 'HEALTH' })
+
+    if (this._heartbeatTimeoutTimer) {
+      window.clearTimeout(this._heartbeatTimeoutTimer)
+    }
+
+    this._heartbeatTimeoutTimer = window.setTimeout(() => {
+      this._destroyWebSocket(true)
+    }, 5 * 1000)
+  }
+
+  private _onHeartbeatMessage(): void {
+    console.log('心跳')
+    useOrderStore().setSocketConnect('online')
+    if (this._heartbeatTimeoutTimer) {
+      window.clearTimeout(this._heartbeatTimeoutTimer)
+    }
+  }
+
+  private _startHeartbeat(): void {
+    this._stopHeartbeat()
+    this._sendHeartbeat()
+    this._heartbeatTimer = window.setInterval(
+      () => this._sendHeartbeat(),
+      10 * 1000,
+    )
+  }
+
+  private _stopHeartbeat(): void {
+    if (this._heartbeatTimer) {
+      window.clearInterval(this._heartbeatTimer)
+    }
+    if (this._heartbeatTimeoutTimer) {
+      window.clearTimeout(this._heartbeatTimeoutTimer)
+    }
+  }
+
+  private _scheduleReconnect(): void {
+    if (!this.num) this.num = 0
+    this.num++
+
+    if (this.num > 5) {
+      ElMessageBox.alert('尝试重连消息服务失败，请刷新重试')
+      return
+    }
+
+    showReconnectingMsg()
+    this._reconnectingTimer = window.setTimeout(() => {
+      this._createWebSocket()
+    }, 2000)
+  }
+
+  private _destroyWebSocket(reconnect?: boolean): void {
+    if (!this.socket) return
+    this._stopHeartbeat()
+
+    if (this._reconnectingTimer) {
+      window.clearTimeout(this._reconnectingTimer)
+    }
+
+    this.socket.removeEventListener('open', this._onWsOpen)
+    this.socket.removeEventListener('message', this._onWsMessage)
+    this.socket.removeEventListener('close', this._onWsClose)
+    this.socket.removeEventListener('error', this._onWsError)
+    this.socket.close(1000)
+    this.socket = null
+    localStorage.removeItem('socket_connect')
+    useOrderStore().setSocketConnect('offline')
+
+    if (reconnect) this._scheduleReconnect()
+  }
+
+  private _createWebSocket(): void {
+    if (!this._wsUrl) return
+
+    const socket = new WebSocket(this._wsUrl)
+    socket.addEventListener('open', this._onWsOpen)
+    socket.addEventListener('message', this._onWsMessage)
+    socket.addEventListener('close', this._onWsClose)
+    socket.addEventListener('error', this._onWsError)
+    this.socket = socket
+  }
+
+  init(
+    options: InitOptions,
+    msgfunc?: MessageCallback,
+    openfunc?: OpenCallback,
+  ): void {
+    const { account, factoryNo } = options
+    this.userId = account
+    const socket_connect = localStorage.getItem('socket_connect')
+    if (socket_connect === 'online') return
+
+    if (!window.WebSocket) return
+
+    this._onMessageCallback = msgfunc
+    this._onOpenCallback = openfunc
+
+    this._destroyWebSocket()
+    this._wsUrl = `${getWsUrl()}/ws/websocket/${factoryNo}/${account}`
+    this._createWebSocket()
+  }
+
+  send(options: WebSocketMessage): void {
+    this.socket?.send(JSON.stringify(options))
+  }
+
+  close(): void {
+    this._destroyWebSocket()
+  }
+}
+
+export default new Im()

src/views/Home.vue

@@ -9,6 +9,52 @@
 </template>
 <script setup lang="ts">
 import NavMenu from '@/components/NavMenu.vue'
+import { onMounted } from 'vue'
+import socket from '@/utils/websocket'
+import { ElMessageBox } from 'element-plus'
+import useUserStore from '@/store/user'
+import useOrderStore from '@/store/order'
+import type { WebSocketMessage } from '@/utils/websocket'
+onMounted(() => {
+  console.log('onMounted')
+  const user = useUserStore().user
+  if (!user) {
+    ElMessageBox.alert('请先登录')
+    return
+  }
+  socket.init(
+    { account: user.account.toString(), factoryNo: user.factoryId.toString() },
+    messageChange,
+  )
+})
+const messageChange = (data: WebSocketMessage) => {
+  if (!data) return
+  const { code, ...more } = data
+
+  if (code === 'POD_PRINT_ORDER') {
+    try {
+      if (typeof more.txt === 'string') {
+        console.log(
+          '%conWebSocketMessage',
+          'font-size: 20px; color: red;',
+          JSON.parse(more.txt),
+        )
+      }
+    } catch (e) {
+      console.error(e)
+    }
+    setPodBoxList(more)
+  }
+}
+const setPodBoxList = (data: WebSocketMessage) => {
+  const obj = data.txt
+  if (obj && typeof obj === 'string') {
+    console.log('obj', obj)
+    const parsedData = JSON.parse(obj)
+    console.log('parsedData', parsedData)
+    useOrderStore().setPodBoxList(parsedData)
+  }
+}
 </script>
 <style lang="scss" scoped>
 .home {

src/views/order/podUs/FastProduction.vue

 <template>
   <el-dialog
     v-model="dialogVisible"
-    title="快捷生产"
+    :title="fastKey === 'detail' ? '查看详情' : '快捷生产'"
     top="140px"
     :fullscreen="true"
     :close-on-click-modal="false"
@@ -44,7 +44,7 @@
           </div>
         </div>
         <div class="right">
-          <div class="input">
+          <div v-if="fastKey === 'fastProduction'" class="input">
             <el-input
               ref="trackingNumberRef"
               v-model="TrackingNumber"
@@ -130,7 +130,12 @@
           </div>
 
           <div class="btn">
-            <div class="btn-sure">
+            <div
+              :style="{
+                visibility: fastKey === 'fastProduction' ? 'visible' : 'hidden',
+              }"
+              class="btn-sure"
+            >
               <el-button
                 style="width: 100%; height: 100%; font-size: 18px"
                 size="large"
@@ -152,6 +157,7 @@
               <el-button
                 style="width: 100%; height: 100%; font-size: 18px"
                 type="primary"
+                size="large"
                 @click="handleDownload"
               >
                 下载素材
@@ -231,10 +237,6 @@ const audios = {
 }
 const TrackingNumber = ref('')
 const props = defineProps({
-  title: {
-    default: '',
-    type: String,
-  },
   type: {
     default: 0,
     type: Number,
@@ -243,6 +245,14 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
+  detailData: {
+    default: null,
+    type: Object,
+  },
+  fastKey: {
+    default: '',
+    type: String,
+  },
 })
 const emit = defineEmits(['update:detailVisible', 'close', 'onSuccess'])
 
@@ -256,7 +266,7 @@ watch(
       historyData.value = history ? JSON.parse(history) : []
 
       const len = historyData.value
-      if (len.length > 0) {
+      if (len.length > 0 && props.fastKey === 'fastProduction') {
         confirmQuery(len, 0)
       }
       placeholderText.value =
@@ -270,7 +280,31 @@ watch(
     }
   },
 )
-
+watch(
+  () => props.detailData,
+  (newVal) => {
+    detail.value = {
+      id: -1,
+      podJomallOrderUsId: -1,
+      imgList: [],
+    }
+    if (newVal && Object.keys(newVal).length > 0) {
+      const d = JSON.parse(JSON.stringify(newVal))
+      if (d.note) {
+        d.note = JSON.parse(d.note)
+      } else {
+        d.note = []
+      }
+      if (d.imageAry) {
+        d.imgList = d.imageAry
+      } else {
+        d.imgList = []
+      }
+      detail.value = d
+    }
+  },
+  { deep: true },
+)
 const confirmQuery = (len: HistoryDataItem[], i: number) => {
   const el = len[i]
   showConfirm(`生产单号 ${el.orderNumber} 未生产完成，取消则不提醒?`, {
@@ -339,7 +373,6 @@ const setData = async (orderNumber: string) => {
       imgList: [] as cardImages[],
     }
     TrackingNumber.value = ''
-    isAutoSure.value = false
     isDownloadImage.value = false
     trackingNumberRef.value && trackingNumberRef.value.focus()
   } catch (e) {
@@ -659,6 +692,7 @@ const onOpened = () => {
         height: auto;
         width: 100%;
         max-height: 90%;
+        object-fit: contain;
       }
 
       b {

src/views/order/podUs/PodMakeOrder.vue

+<template>
+  <ElDialog
+    v-model="visible"
+    title="POD打单"
+    fullscreen
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :before-close="handleClose"
+    style="top: 60px"
+    modal-class="pod-make-order-dialog"
+    @opened="handleOpened"
+    @close="onClose"
+  >
+    <template #title>
+      <div class="title">
+        <span>POD打单</span>
+        <span v-if="socketConnect === 'online'" class="online">[在线]</span>
+        <span v-else class="offline">[离线]</span>
+      </div>
+    </template>
+    <div class="pod-make-order-content">
+      <div class="left-content">
+        <div class="head-form">
+          <div class="form-item">
+            <ElSelect
+              v-model="sheetPrinter"
+              placeholder="请选择打印机"
+              style="width: 200px"
+              @change="handlePrinterChange"
+            >
+              <ElOption
+                v-for="item in printDeviceList"
+                :key="item"
+                :label="item"
+                :value="item"
+              />
+            </ElSelect>
+          </div>
+          <div class="form-item" style="flex: 1">
+            <ElInput
+              ref="productionOrderRef"
+              v-model="productionOrder"
+              placeholder="请输入生产单号"
+              clearable
+              style="width: 100%"
+              @keyup.enter="handleSearch"
+            />
+          </div>
+          <div class="form-item">
+            <ElButton type="primary" @click="handleSearch">查询</ElButton>
+          </div>
+          <div class="form-item">
+            <ElButton type="danger" @click="clearAllBox">清空所有箱子</ElButton>
+          </div>
+        </div>
+        <div class="basic-info">
+          <div class="basic-info-item">
+            <span>物流跟踪号：</span>
+            <span>{{ podOrderDetailsData?.trackingNumber }}</span>
+          </div>
+          <div class="basic-info-item">
+            <span>店铺单号：</span>
+            <span>{{ podOrderDetailsData?.shopNumber }}</span>
+          </div>
+          <div class="basic-info-item">
+            <span>商品总数量：</span>
+            <span>{{ podOrderDetailsData?.purchaseNumber }}</span>
+          </div>
+          <div class="basic-info-item">
+            <span>拣货数量：</span>
+            <span>{{ podOrderDetailsData?.pickingNumber }}</span>
+          </div>
+          <!-- <div class="basic-info-item">
+            <span>物流公司：</span>
+            <span></span>
+          </div>
+          <div class="basic-info-item">
+            <span>物流方式：</span>
+            <span></span>
+          </div> -->
+          <div class="basic-info-item">
+            <span>发货备注：</span>
+            <span>{{ podOrderDetailsData?.remark }}</span>
+          </div>
+        </div>
+        <div class="table-content">
+          <TableView
+            ref="tableRef"
+            :paginated-data="podOrderDetailsData?.productList || []"
+            :columns="podOrderDetailsColumns"
+            highlight-current-row
+            @row-click="handleRowClick"
+            @current-change="handleCurrentChange"
+          >
+            <template #image="{ row }">
+              <img :src="row.variantImage" alt="" />
+            </template>
+            <template #verifyResult="{ row }">
+              <el-icon
+                v-if="row.power"
+                style="color: #00cc00; font-size: 24px; font-weight: 900"
+                ><Check
+              /></el-icon>
+            </template>
+          </TableView>
+        </div>
+      </div>
+      <div class="middle-content">
+        <div class="box-top">
+          <div class="box-top-item">
+            <span class="box-top-item-box-index">
+              {{ boxIndex }}
+            </span>
+            <span class="box-top-item-box-index-text">号箱</span>
+
+            <span style="font-size: 30px">放入第</span>
+            <div class="box-top-item-box-index-number">
+              {{ podOrderDetailsData?.pickingNumber }}
+            </div>
+            <span style="font-size: 30px">件商品</span>
+          </div>
+          <div class="box-top-item-status">
+            <span
+              v-if="
+                podOrderDetailsData?.pickingNumber &&
+                podOrderDetailsData?.purchaseNumber &&
+                podOrderDetailsData?.pickingNumber ===
+                  podOrderDetailsData?.purchaseNumber
+              "
+            >
+              <span v-if="podOrderDetailsData?.printResult">
+                面单{{ renderPrintResult(podOrderDetailsData?.printResult) }}
+              </span>
+              <span v-else>面单打印中。。。</span>
+            </span>
+            <span v-else>验货中。。。</span>
+          </div>
+          <div class="box-top-item-btn">
+            <ElButton
+              type="primary"
+              @click="podOrderDetailsData && print(podOrderDetailsData, true)"
+              >手动打印</ElButton
+            >
+            <ElButton type="success" @click="handlePrintFinish"
+              >打单完成</ElButton
+            >
+            <ElButton type="danger" @click="handleClearBox">清空箱子</ElButton>
+          </div>
+          <div
+            v-if="
+              podOrderDetailsData?.productList?.length &&
+              podOrderDetailsData?.productList?.length > 1
+            "
+            class="multiple-title"
+          >
+            <span class="multiple-title-text">多</span>
+          </div>
+        </div>
+        <div class="order-image">
+          <img :src="coverImage" alt="" />
+        </div>
+      </div>
+      <div class="right-content">
+        <div class="box-list">
+          <div
+            v-for="(item, index) in podBoxList"
+            :key="item.box"
+            class="box-list-item"
+            :class="{
+              active: item.box && boxIndex == item.box,
+              isNull: !item.data,
+              badge: handleProduct(item.data || {}),
+            }"
+            @click="handleBoxClick(item)"
+          >
+            <span style="font-weight: bold" :title="index + 1 + '号箱'">
+              {{ index + 1 }}
+            </span>
+            <span v-if="item.data" class="number">
+              {{ item.data.pickingNumber }}/{{ item.data.purchaseNumber }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </ElDialog>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, ref, watch } from 'vue'
+import useLodop from '@/utils/hooks/useLodop'
+import TableView from '@/components/TableView.vue'
+import {
+  OrderData,
+  PodMakeOrderData,
+  ProductList,
+} from '@/types/api/podMakeOrder'
+import useOrderStore from '@/store/order'
+import {
+  clearBoxApi,
+  clearAllBoxApi,
+  getPackingDataApi,
+  getPodBoxListApi,
+  submitInspectionApi,
+} from '@/api/podUsOrder'
+import useUserStore from '@/store/user'
+import { Check } from '@element-plus/icons-vue'
+import socket from '@/utils/websocket'
+
+const { getCLodop } = useLodop()
+
+const props = defineProps<{
+  modelValue: boolean
+  printOrder: (data: OrderData, callback: (status: boolean) => void) => void
+}>()
+const emit = defineEmits(['update:modelValue', 'set-printer', 'refresh'])
+const visible = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    emit('update:modelValue', value)
+  },
+})
+
+const printDeviceList = ref<string[]>([])
+const sheetPrinter = ref<string>('')
+const productionOrder = ref<string>('')
+const podOrderDetailsData = ref<OrderData>()
+const podOrderDetailsColumns = computed(() => [
+  {
+    label: '图片',
+    prop: 'image',
+    width: 60,
+    slot: 'image',
+    align: 'center',
+    fixed: 'left',
+  },
+  {
+    label: 'base SKU',
+    prop: 'baseSku',
+    width: 140,
+    align: 'center',
+  },
+  {
+    label: 'variant SKU',
+    prop: 'variantSku',
+    width: 140,
+    align: 'center',
+  },
+  {
+    label: '商品名称',
+    prop: 'productName',
+  },
+
+  {
+    label: '生产单号',
+    prop: 'podJomallUsNo',
+    width: 150,
+    align: 'center',
+  },
+  {
+    label: '购买数量',
+    prop: 'purchaseNumber',
+    width: 90,
+    align: 'center',
+  },
+  {
+    label: '拣货数量',
+    prop: 'count',
+    width: 90,
+    align: 'center',
+  },
+  {
+    label: '验证结果',
+    slot: 'verifyResult',
+    width: 90,
+    align: 'center',
+  },
+])
+const boxChange = ref<boolean>(false)
+const boxIndex = ref<number | null>(null)
+const orderStore = useOrderStore()
+const isLock = ref<boolean>(false)
+const renderLock = ref<boolean>(false)
+const productionOrderRef = ref()
+const socketConnect = computed(() => orderStore.socketConnect)
+const podBoxList = computed(() => orderStore.podBoxList)
+const coverImage = ref<string>('')
+let currentCode = ''
+const tableRef = ref()
+watch(visible, (value: boolean) => {
+  if (value) {
+    podOrderDetailsData.value = {}
+    currentCode = ''
+    if (userStore.user?.factory.id) {
+      socket.send({
+        code: 'STARTORDER',
+        factoryNo: userStore.user?.factory.id,
+      })
+    }
+    initOrderDetailBox()
+    initPrintDevice()
+  } else {
+    if (userStore.user?.factory.id) {
+      socket.send({
+        code: 'ENDORDER',
+        factoryNo: userStore.user?.factory.id,
+      })
+    }
+  }
+})
+watch(boxIndex, (value: number | null) => {
+  if (value) {
+    console.log('boxIndex', value, boxChange.value)
+    const bool = !boxChange.value
+    boxChange.value = false
+    renderItemBox(bool)
+  }
+})
+watch(
+  podBoxList,
+  (value) => {
+    if (value) {
+      const item = value.find((item) => item.box === podBoxIndex.value)
+      console.log('podBoxList', value, podBoxIndex.value, item)
+      if (item?.data) {
+        renderItemBox(true)
+      } else {
+        if (boxIndex.value === podBoxIndex.value) {
+          podOrderDetailsData.value = {}
+          boxIndex.value = null
+        }
+      }
+    }
+  },
+  { deep: true },
+)
+const podBoxIndex = computed(() => orderStore.podBoxIndex)
+const renderItemBox = (bool: boolean) => {
+  if (
+    !podBoxList.value ||
+    podBoxList.value.length === 0 ||
+    !boxIndex.value ||
+    (bool && boxIndex.value !== podBoxIndex.value)
+  )
+    return
+  if (renderLock.value) return
+  renderLock.value = true
+  let boxItem = podBoxList.value.find((item) => item.box === boxIndex.value)
+  if (!boxItem) boxItem = { data: { productList: [] } }
+  const { data } = boxItem
+  if (!data) {
+    renderLock.value = false
+    currentCode = ''
+    podOrderDetailsData.value = {}
+    return
+  }
+  const { productList = [] } = data
+  const pickingNumber = productList.reduce((prev, product) => {
+    return prev + (product.count || 0)
+  }, 0)
+  data.pickingNumber = pickingNumber
+  coverImage.value = productList[0].variantImage || ''
+  for (const product of productList) {
+    if (product.count === product.purchaseNumber) {
+      product.power = true
+    }
+  }
+  if (currentCode) {
+    for (const product of productList) {
+      if (product.podJomallNo === currentCode) {
+        coverImage.value = product.variantImage || ''
+        nextTick(() => {
+          tableRef.value?.setCurrentRow(product)
+        })
+        break
+      }
+    }
+    currentCode = ''
+  }
+  podOrderDetailsData.value = data
+  if (productList.every((item) => item.power)) {
+    print(data)
+  }
+  renderLock.value = false
+}
+
+const initPrintDevice = () => {
+  const lodop = getCLodop(null, null)
+  if (!lodop) return
+  const arr = []
+  // 获取打印机数量
+  const length = lodop.GET_PRINTER_COUNT()
+  for (let i = 0; i < length; i++) {
+    // 根据设备序号获取设备名
+    const name = lodop.GET_PRINTER_NAME(i)
+    arr.push(name)
+  }
+  console.log('arr', arr, lodop.GET_PRINTER_NAME(1))
+  // 获取默认打印机
+  sheetPrinter.value = lodop.GET_PRINTER_NAME(0)
+  printDeviceList.value = arr
+}
+const handleProduct = (val: OrderData) => {
+  if (val && val.productList && val.productList.length > 0) {
+    return val.productList?.some((item) => {
+      return item.productMark == 'normal'
+    })
+  } else {
+    return false
+  }
+}
+const handleSearch = () => {
+  const code = productionOrder.value
+  if (!code) {
+    ElMessage.warning('请输入生产单号')
+    productionOrderRef.value.focus()
+    return
+  }
+  if (isLock.value) {
+    ElMessage.warning('请稍后再试')
+    productionOrderRef.value.focus()
+    return
+  }
+  productionOrder.value = ''
+  isLock.value = true
+  const everyPower = podOrderDetailsData.value?.productList?.every(
+    (item) => item.power,
+  )
+  if (everyPower) {
+    /**
+     * printSuccess 打印成功
+     * printFail 打印失败
+     * printIng 打印中
+     * notPrintSuccess 未能获取打印状态
+     */
+    if (podOrderDetailsData.value?.printResult === 'printSuccess') {
+      submitInspection(() => {
+        getPackingData(code)
+      })
+    } else {
+      ElMessage.warning('未获取到打印结果')
+      isLock.value = false
+    }
+  } else {
+    getPackingData(code)
+  }
+}
+const userStore = useUserStore()
+const getPackingData = async (code: string) => {
+  const loading = ElLoading.service({
+    fullscreen: true,
+  })
+  currentCode = code
+  try {
+    const factoryNo = userStore.user?.factory.id
+    if (!factoryNo) {
+      isLock.value = false
+      productionOrder.value = ''
+      return
+    }
+    const res = await getPackingDataApi(code, factoryNo, boxIndex.value)
+    if (res.code !== 200) {
+      ElMessage.warning(res.message)
+      isLock.value = false
+      productionOrder.value = ''
+      return
+    }
+    const { box } = res.data
+    if (box) {
+      boxIndex.value = box
+    }
+  } catch (error) {
+    console.log(error)
+  } finally {
+    isLock.value = false
+    productionOrder.value = ''
+    loading.close()
+    productionOrderRef.value.focus()
+  }
+}
+// 提交打单
+const submitInspection = async (callback: () => void) => {
+  const factoryNo = userStore.user?.factory.id
+  if (!factoryNo) {
+    return
+  }
+  const data = podOrderDetailsData.value?.id
+    ? [
+        {
+          id: podOrderDetailsData.value.id,
+          version: podOrderDetailsData.value?.version,
+        },
+      ]
+    : []
+  try {
+    const res = await submitInspectionApi(data, boxIndex.value)
+    if (res.code !== 200) return
+    ElMessage.warning(res.message)
+    isLock.value = false
+    coverImage.value = ''
+    podOrderDetailsData.value = {}
+    productionOrderRef.value.focus()
+
+    callback && callback()
+  } catch (error) {
+    isLock.value = false
+    productionOrderRef.value.focus()
+    console.error(error)
+  }
+}
+const isBillLading = ref<boolean>(false)
+const initOrderDetailBox = async () => {
+  const factoryNo = userStore.user?.factory.id
+  if (!factoryNo) {
+    return
+  }
+  const loading = ElLoading.service({
+    fullscreen: true,
+  })
+  try {
+    const res = await getPodBoxListApi(factoryNo)
+    if (res.code !== 200) {
+      ElMessage.warning(res.message)
+      return
+    }
+    orderStore.setPodBoxList({
+      boxList: res.data,
+      factoryNo,
+    })
+    const boxList = res.data.map((item) => {
+      if (item.data) {
+        if (!item.data.filePath) {
+          isBillLading.value = true
+        } else {
+          isBillLading.value = false
+        }
+        const productList = item?.data?.productList || []
+        const pickingNumber = productList.reduce((prev, product) => {
+          if (product.count === product.purchaseNumber) {
+            product.power = true
+          }
+          if (product.count) {
+            return prev + product.count
+          }
+          return prev
+        }, 0)
+
+        item.data.pickingNumber = pickingNumber
+      }
+      return item
+    })
+
+    podOrderDetailsData.value =
+      boxList.find((item) => item.data)?.data || undefined
+    boxIndex.value = boxList.find((item) => item.data)?.box || null
+    coverImage.value =
+      boxList.find((item) => item.data)?.data?.productList?.[0]?.variantImage ||
+      ''
+    if (
+      podOrderDetailsData.value &&
+      podOrderDetailsData.value.pickingNumber ===
+        podOrderDetailsData.value.purchaseNumber
+    ) {
+      podOrderDetailsData.value.printResult = 'notPrintSuccess'
+    }
+    const pickFinished = boxList.filter((item) => {
+      return item.data?.productList?.every((product) => product.power)
+    })
+    const boxs = pickFinished.map((item) => item.box)
+    if (boxs.length > 0) {
+      nextTick(async () => {
+        try {
+          await ElMessageBox.alert(
+            `检测到${boxs.join(',')}号箱验货完成，请及时处理`,
+            '提示',
+            {
+              confirmButtonText: '确定',
+            },
+          )
+          productionOrderRef.value.focus()
+        } catch (error) {
+          productionOrderRef.value.focus()
+          console.error(error)
+        }
+      })
+    }
+
+    renderLock.value = false
+    productionOrder.value = ''
+    isLock.value = false
+    productionOrderRef.value.focus()
+  } catch (error) {
+    console.error(error)
+  } finally {
+    loading.close()
+  }
+}
+const renderPrintResult = (printResult: string) => {
+  switch (printResult) {
+    case 'printSuccess':
+      return '打印成功'
+    case 'printFail':
+      return '打印失败'
+    case 'printIng':
+      return '打印中'
+    case 'notPrintSuccess':
+      return '未能获取打印状态'
+    default:
+      return '未知'
+  }
+}
+const handleOpened = () => {
+  productionOrderRef.value.focus()
+}
+const handleClose = (done: () => void) => {
+  nextStep(() => {
+    done()
+  })
+}
+const onClose = () => {
+  emit('refresh')
+}
+// 下一步
+const nextStep = async (callback: () => void) => {
+  const everyPicked = podOrderDetailsData.value?.productList?.every(
+    (item) => item.count === item.purchaseNumber,
+  )
+  if (
+    everyPicked &&
+    (podOrderDetailsData.value?.printResult === 'printSuccess' ||
+      podOrderDetailsData.value?.printResult === 'notPrintSuccess')
+  ) {
+    try {
+      await ElMessageBox.alert(
+        '当前订单验货完成并打印面单成功，是否转至已完成',
+        '提示',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+        },
+      )
+      submitInspection(() => {
+        callback && callback()
+      })
+    } catch (error) {
+      productionOrderRef.value.focus()
+      console.error(error)
+    }
+  } else {
+    callback && callback()
+  }
+}
+const handleBoxClick = (item: PodMakeOrderData) => {
+  const { box, data } = item
+  isBillLading.value = !data?.filePath
+  nextStep(() => {
+    if (!data) {
+      ElMessage.warning('暂无数据')
+      return
+    }
+    boxIndex.value = box || null
+    boxChange.value = true
+    productionOrderRef.value.focus()
+  })
+}
+const handleClearBox = async () => {
+  try {
+    await ElMessageBox.alert('确定清空当前箱子吗？', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+    })
+  } catch {
+    return
+  }
+  const factoryNo = userStore.user?.factory.id
+  if (!factoryNo) {
+    return
+  }
+  try {
+    const res = await clearBoxApi(factoryNo, boxIndex.value || null)
+    if (res.code !== 200) {
+      ElMessage.warning(res.message)
+      return
+    }
+    ElMessage.success('清空成功')
+    orderStore.setPodBoxList({
+      boxList: null,
+      factoryNo,
+      box: boxIndex.value || undefined,
+    })
+    boxIndex.value = null
+    podOrderDetailsData.value = {}
+    coverImage.value = ''
+    productionOrderRef.value.focus()
+  } catch (error) {
+    productionOrderRef.value.focus()
+    console.error(error)
+  }
+}
+const handlePrintFinish = async () => {
+  try {
+    await ElMessageBox.alert('确定打单完成吗？', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+    })
+    submitInspection(() => {
+      productionOrderRef.value.focus()
+    })
+  } catch {
+    productionOrderRef.value.focus()
+    return
+  }
+}
+const handlePrinterChange = (value: string) => {
+  emit('set-printer', value)
+}
+
+const print = (data: OrderData, forcePrint = false) => {
+  const _boxIndex = boxIndex.value
+
+  if (!forcePrint && data.printResult) return
+
+  props.printOrder(data, (status: boolean) => {
+    const item = podBoxList.value?.find((item) => item.box === _boxIndex)
+    if (item && item.data) {
+      if (status) {
+        item.data.printResult = 'printSuccess'
+      } else {
+        item.data.printResult = 'printFail'
+      }
+    }
+    const factoryNo = userStore.user?.factory.id
+    if (!factoryNo) return
+    orderStore.setPodBoxList({
+      boxList: item ? item.data : null,
+      factoryNo,
+      box: _boxIndex || undefined,
+    })
+  })
+}
+const clearAllBox = async () => {
+  try {
+    await ElMessageBox.alert('确定清空所有箱子吗？', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+    })
+  } catch {
+    productionOrderRef.value.focus()
+    return
+  }
+  try {
+    const res = await clearAllBoxApi()
+    if (res.code !== 200) return
+    orderStore.setPodBoxList({
+      boxList: res.data,
+      factoryNo: userStore.user?.factory.id || '',
+    })
+    productionOrderRef.value.focus()
+    podOrderDetailsData.value = {}
+    coverImage.value = ''
+    boxIndex.value = null
+  } catch (error) {
+    productionOrderRef.value.focus()
+    console.error(error)
+  }
+}
+const handleRowClick = () => {
+  productionOrderRef.value.focus()
+}
+const handleCurrentChange = (row: ProductList) => {
+  if (row) {
+    coverImage.value = row.variantImage || ''
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.title {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.online {
+  color: green;
+  font-size: 14px;
+  font-weight: 600;
+}
+.offline {
+  color: red;
+  font-size: 14px;
+  font-weight: 600;
+}
+.pod-make-order-content {
+  display: flex;
+  height: 100%;
+  overflow: hidden;
+  gap: 10px;
+}
+.left-content {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: calc(100% - 900px - 20px);
+}
+.head-form {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.table-content {
+  flex: 1;
+  overflow: hidden;
+}
+.middle-content {
+  width: 500px;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+.right-content {
+  width: 400px;
+}
+.basic-info {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 10px;
+  .basic-info-item {
+    display: flex;
+    align-items: center;
+
+    span:last-child {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+}
+.box-top {
+  position: relative;
+  border: 1px solid #ddd;
+  background: rgb(50 50 50);
+  border-radius: 5px;
+  padding: 10px 15px;
+  box-sizing: border-box;
+  font-size: 16px;
+  color: #fff;
+  overflow: hidden;
+}
+.multiple-title {
+  position: absolute;
+  top: 0;
+  right: 0;
+  &::after {
+    position: absolute;
+    top: -31px;
+    right: -30px;
+    content: '';
+    border-width: 30px;
+    border-style: solid;
+    border-color: transparent transparent red transparent;
+    transform: rotate(45deg);
+  }
+  .multiple-title-text {
+    position: absolute;
+    z-index: 2;
+    color: #fff;
+    left: -20px;
+  }
+}
+.box-top-item {
+  display: flex;
+  height: 80px;
+  align-items: center;
+  margin-bottom: 10px;
+}
+.box-top-item-box-index {
+  font-size: 60px;
+  color: red;
+  text-align: center;
+  width: 120px;
+  font-weight: 600;
+}
+.box-top-item-box-index-text {
+  margin-right: 15px;
+  font-size: 30px;
+}
+.box-top-item-box-index-number {
+  font-size: 60px;
+  color: red;
+  display: inline-block;
+  text-align: center;
+  width: 90px;
+  font-weight: 600;
+}
+.box-top-item-status {
+  margin-bottom: 15px;
+}
+.order-image {
+  flex: 1;
+  overflow: hidden;
+  border: 1px solid #ddd;
+  background: #eee;
+}
+.box-list {
+  display: grid;
+  grid-template-columns: repeat(7, 50px);
+  gap: 8px;
+  position: relative;
+}
+.box-list-item {
+  position: relative;
+  border: 1px solid #ddd;
+  cursor: pointer;
+  font-size: 18px;
+  line-height: 30px;
+  height: 46px;
+  text-align: center;
+  box-sizing: border-box;
+  border-radius: 5px;
+  &:not(.isNull) {
+    background: #819aff;
+    color: #fff;
+  }
+  &.active {
+    background: #ff9900;
+    color: #fff;
+  }
+
+  &.badge::after {
+    position: absolute;
+    content: '';
+    right: 4px;
+    top: 4px;
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background-color: red;
+  }
+  .number {
+    position: absolute;
+    bottom: 3px;
+    right: 0;
+    left: 0;
+    text-align: center;
+    font-size: 12px;
+    line-height: 14px;
+    color: #ddd;
+  }
+}
+</style>
+<style lang="scss">
+.pod-make-order-dialog {
+  .el-dialog {
+    display: flex;
+    flex-direction: column;
+    height: calc(100% - 60px);
+  }
+  .el-dialog__body {
+    flex: 1;
+    overflow: hidden;
+  }
+}
+</style>

src/views/order/podUs/index.vue

@@ -2,6 +2,34 @@
   <div class="card flex-column h-100 overflow-hidden">
     <div class="header-filter-form">
       <ElForm :model="searchForm" size="default" inline>
+        <ElFormItem>
+          <el-select
+            v-model="searchForm.timeType"
+            style="width: 100px; margin-right: 5px"
+            clearable
+            placeholder="时间类型"
+          >
+            <el-option :value="1" label="创建时间"></el-option>
+            <el-option :value="2" label="确认时间"></el-option>
+            <el-option :value="3" label="完成时间"></el-option>
+          </el-select>
+          <el-date-picker
+            v-model="timeRange"
+            :default-time="[
+              new Date(0, 0, 0, 0, 0, 0),
+              new Date(0, 0, 0, 23, 59, 59),
+            ]"
+            placeholder="收货人"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            type="datetimerange"
+            style="width: 280px"
+            :shortcuts="pickerOptions.shortcuts"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            clearable
+          >
+          </el-date-picker>
+        </ElFormItem>
         <ElFormItem label="客户">
           <el-select
             v-model="searchForm.userMark"
@@ -66,7 +94,17 @@
             style="width: 180px"
           />
         </ElFormItem>
-
+        <ElFormItem label="定制类型">
+          <ElSelect
+            v-model="searchForm.customizedQuantity"
+            placeholder="定制类型"
+            clearable
+            style="width: 180px"
+          >
+            <ElOption label="单面" value="single" />
+            <ElOption label="多面" value="multiple" />
+          </ElSelect>
+        </ElFormItem>
         <ElFormItem>
           <ElButton type="primary" @click="search">查询</ElButton>
         </ElFormItem>
@@ -91,30 +129,38 @@
         <span v-if="status === 'TO_BE_CONFIRMED'" class="item">
           <ElButton type="success" @click="confirmOrder"> 确认 </ElButton>
         </span>
-        <span v-if="status === 'EXCEPTION'" class="item">
+        <span v-if="status === 'EXCEPTION_ORDER'" class="item">
           <ElButton type="success" @click="updateOrder"> 更新 </ElButton>
         </span>
-        <span v-if="status === 'IN_PRODUCTION'" class="item">
-          <ElButton type="primary" @click="printProductionOrder"> 打印生产单 </ElButton>
+        <span v-if="status === 'TO_BE_CONFIRMED'" class="item">
+          <ElButton type="primary" @click="printProductionOrder">
+            打印生产单
+          </ElButton>
         </span>
         <span v-if="status === 'TO_BE_CONFIRMED'" class="item">
           <ElButton type="warning" @click="changeExceptionOrder">
             转为异常单
           </ElButton>
         </span>
-        <span v-if="status === 'TO_BE_CONFIRMED' || status === 'EXCEPTION'" class="item">
+        <span
+          v-if="status === 'TO_BE_CONFIRMED' || status === 'EXCEPTION_ORDER'"
+          class="item"
+        >
           <ElButton type="danger" @click="cancelOrder">取消</ElButton>
         </span>
-        <span v-if="status !== 'IN_PRODUCTION'" class="item">
+        <!-- <span v-if="status !== 'IN_PRODUCTION'" class="item">
           <ElButton type="success" @click="handleUpdateRemark">
             添加内部标签
           </ElButton>
-        </span>
+        </span> -->
         <span v-if="status === 'IN_PRODUCTION'" class="item">
           <ElButton type="warning" @click="onFastProduction">
             快捷生产
           </ElButton>
         </span>
+        <span v-if="status === 'WAIT_SHIPMENT'" class="item">
+          <ElButton type="warning" @click="printPodOrder"> POD打单 </ElButton>
+        </span>
         <span class="item">
           <ElButton type="primary" @click="downloadMaterial">下载素材</ElButton>
         </span>
@@ -173,7 +219,10 @@
 
                     <div class="goods-item-info-item">
                       <span class="goods-item-info-item-label">备注:</span>
-                      <span class="goods-item-info-item-value">
+                      <span
+                        class="goods-item-info-item-value"
+                        :title="item.remark"
+                      >
                         {{ item.remark }}
                       </span>
                       <el-icon
@@ -187,7 +236,10 @@
                   <div class="goods-item-info">
                     <div class="goods-item-info-item">
                       <span class="goods-item-info-item-label">生产单号:</span>
-                      <span class="goods-item-info-item-value">
+                      <span
+                        class="goods-item-info-item-value"
+                        :title="item.factorySubOrderNumber"
+                      >
                         {{ item.factorySubOrderNumber }}
                       </span>
                       <el-icon
@@ -200,7 +252,10 @@
                       <span class="goods-item-info-item-label"
                         >第三方生产单号:</span
                       >
-                      <span class="goods-item-info-item-value">
+                      <span
+                        class="goods-item-info-item-value"
+                        :title="item.thirdSubOrderNumber"
+                      >
                         {{ item.thirdSubOrderNumber }}
                       </span>
                       <el-icon
@@ -236,9 +291,21 @@
                       </span>
                     </div>
                     <div class="goods-item-info-item">
-                      <span class="goods-item-info-item-label">数量:</span>
+                      <span class="goods-item-info-item-label">{{
+                        status === 'TO_BE_CONFIRMED'
+                          ? '未生产数量:'
+                          : status === 'EXCEPTION_ORDER'
+                          ? '数量:'
+                          : '已生产数量:'
+                      }}</span>
                       <span class="goods-item-info-item-value">
-                        {{ item.num }}
+                        {{
+                          status === 'TO_BE_CONFIRMED'
+                            ? item.notPassNum
+                            : status === 'EXCEPTION_ORDER'
+                            ? item.num
+                            : item.passNum
+                        }}
                       </span>
                     </div>
                   </div>
@@ -250,7 +317,10 @@
             <div class="order-detail-box">
               <div class="order-detail-item">
                 <span class="order-detail-item-label">订单号:</span>
-                <span class="order-detail-item-value">
+                <span
+                  class="order-detail-item-value"
+                  :title="row.factoryOrderNumber"
+                >
                   {{ row.factoryOrderNumber }}
                 </span>
                 <el-icon
@@ -261,7 +331,10 @@
               </div>
               <div class="order-detail-item">
                 <span class="order-detail-item-label">第三方订单号:</span>
-                <span class="order-detail-item-value">
+                <span
+                  class="order-detail-item-value"
+                  :title="row.thirdOrderNumber"
+                >
                   {{ row.thirdOrderNumber }}
                 </span>
                 <el-icon class="icon" @click="copy(row.thirdOrderNumber || '')"
@@ -270,7 +343,7 @@
               </div>
               <div class="order-detail-item">
                 <span class="order-detail-item-label">店铺单号:</span>
-                <span class="order-detail-item-value">
+                <span class="order-detail-item-value" :title="row.shopNumber">
                   {{ row.shopNumber }}
                 </span>
                 <el-icon class="icon" @click="copy(row.shopNumber || '')"
@@ -279,27 +352,35 @@
               </div>
               <div class="order-detail-item">
                 <span class="order-detail-item-label">收货人:</span>
-                <span class="order-detail-item-value">
+                <span class="order-detail-item-value" :title="row.receiverName">
                   {{ row.receiverName }}
                 </span>
               </div>
               <div class="order-detail-item">
                 <span class="order-detail-item-label">收货人电话:</span>
-                <span class="order-detail-item-value">
+                <span
+                  class="order-detail-item-value"
+                  :title="row.receiverPhone"
+                >
                   {{ row.receiverPhone }}
                 </span>
               </div>
               <div class="order-detail-item">
                 <span class="order-detail-item-label">收货人邮编:</span>
-                <span class="order-detail-item-value">
+                <span
+                  class="order-detail-item-value"
+                  :title="row.receiverPostCode"
+                >
                   {{ row.receiverPostCode }}
                 </span>
               </div>
               <div class="order-detail-item">
                 <span class="order-detail-item-label">收货地址:</span>
-                <span class="order-detail-item-value">
-                  {{ row.receiverCountry }}{{ row.receiverProvince
-                  }}{{ row.receiverCity }}{{ row.receiverDistrict }}
+                <span
+                  class="order-detail-item-value"
+                  :title="row.lanshouAddress"
+                >
+                  {{ row.lanshouAddress }}
                 </span>
               </div>
             </div>
@@ -323,16 +404,22 @@
                 </span>
               </div>
               <div class="order-time-item">
-                <span class="order-time-item-label">更新时间：</span>
+                <span class="order-time-item-label">确认时间：</span>
                 <span class="order-time-item-value">
-                  {{ row.updateTime }}
+                  {{ row.startStockingTime }}
                 </span>
               </div>
-              <div class="order-time-item">
+              <!-- <div class="order-time-item">
                 <span class="order-time-item-label">支付时间：</span>
                 <span class="order-time-item-value">
                   {{ row.paymentTime }}
                 </span>
+              </div> -->
+              <div class="order-time-item">
+                <span class="order-time-item-label">完成时间：</span>
+                <span class="order-time-item-value">
+                  {{ row.finishTime }}
+                </span>
               </div>
             </div>
           </template>
@@ -409,7 +496,7 @@
                     <title>操作日志</title>
                   </template>
                 </Icon>
-                <Icon name="chakanxiangqing">
+                <Icon name="chakanxiangqing" @click="openDetail(cardItem.id)">
                   <template #title>
                     <title>查看详情</title>
                   </template>
@@ -450,6 +537,28 @@
                       {{ cardItem?.baseSku }}
                     </span>
                   </div>
+                  <div class="grid-item" title="工艺">
+                    <span class="grid-item-label">工艺：</span>
+                    <span class="grid-item-value">
+                      {{ cardItem?.craftName }}
+                    </span>
+                  </div>
+                  <div class="grid-item">
+                    <span title="Variant SKU" class="grid-item-value">
+                      {{ cardItem?.variantSku }}
+                    </span>
+                  </div>
+                  <div class="grid-item" title="店铺单号">
+                    <span class="grid-item-value">
+                      {{ cardItem?.shopNumber }}
+                    </span>
+                  </div>
+                  <div class="grid-item" title="订单号">
+                    <span class="grid-item-value">
+                      {{ cardItem?.factoryOrderNumber }}
+                    </span>
+                  </div>
+
                   <div class="grid-item">
                     <span
                       :title="`第三方生产单号:${cardItem?.thirdSubOrderNumber}`"
@@ -461,11 +570,6 @@
                       {{ cardItem?.thirdSubOrderNumber }}
                     </span>
                   </div>
-                  <div class="grid-item">
-                    <span title="Variant SKU" class="grid-item-value">
-                      {{ cardItem?.variantSku }}
-                    </span>
-                  </div>
                 </div>
               </template>
             </CommonCard>
@@ -499,9 +603,17 @@
   <FastProduction
     v-model:detailVisible="detailVisible"
     :current-status="status"
+    :detail-data="detailData"
+    :fast-key="fastKey"
     @on-success="handleSuccess"
     @close="fastClose"
   ></FastProduction>
+  <PodMakeOrder
+    v-model="podOrderVisible"
+    :print-order="printOrder"
+    @set-printer="handlePrinterChange"
+    @refresh="onFastRefresh"
+  />
 </template>
 <script setup lang="ts">
 import { getUserMarkList } from '@/api/common'
@@ -516,6 +628,8 @@ import {
   downloadMaterialApi,
   updateExceptionOrderApi,
   printProductionOrderApi,
+  getOrderDetailById,
+  updateRemarkApi,
 } from '@/api/podUsOrder'
 import TableView from '@/components/TableView.vue'
 import {
@@ -534,9 +648,26 @@ import { Column } from 'element-plus'
 import { computed, onMounted, ref } from 'vue'
 import FastProduction from './FastProduction.vue'
 import { filePath } from '@/api/axios'
-
+import PodMakeOrder from './PodMakeOrder.vue'
+import { OrderData } from '@/types/api/podMakeOrder'
+import useLodop, { LODOPObject } from '@/utils/hooks/useLodop'
+import dayjs from 'dayjs'
+declare global {
+  interface Window {
+    ActiveXObject: {
+      new (type: string): XMLHttpRequest
+    }
+    VBS_BinaryToArray: {
+      (data: unknown): { toArray(): number[] }
+    }
+  }
+  interface XMLHttpRequest {
+    responseBody?: unknown
+  }
+}
 const tabsNav = ref<Tab[]>()
 const status = ref('TO_BE_CONFIRMED')
+const detailData = ref({})
 const [searchForm] = useValue<SearchForm>({
   timeType: null,
   shopNumber: '',
@@ -547,9 +678,81 @@ const [searchForm] = useValue<SearchForm>({
   sku: '',
   factorySubOrderNumber: '',
   status: '',
+  customizedQuantity: '',
+  startTime: null,
+  endTime: null,
 })
 const userMarkList = ref<string[]>([])
 const selection = ref<PodUsOrderListData[]>([])
+const pickerOptions = {
+  shortcuts: [
+    {
+      text: '今日',
+      value: () => getDateRange(0),
+    },
+    {
+      text: '昨天',
+      value: () => getDateRange(1),
+    },
+    {
+      text: '最近7天',
+      value: () => getDateRange(6),
+    },
+    {
+      text: '最近14天',
+      value: () => getDateRange(13),
+    },
+    {
+      text: '最近30天',
+      value: () => getDateRange(29),
+    },
+    {
+      text: '本周',
+      value: () => getWeekRange(0),
+    },
+    {
+      text: '上周',
+      value: () => getWeekRange(1),
+    },
+    {
+      text: '本月',
+      value: () => getMonthRange(0),
+    },
+    {
+      text: '上月',
+      value: () => getMonthRange(1),
+    },
+    {
+      text: '历史',
+      value: () => {
+        const end = dayjs().endOf('day').toDate()
+        const start = dayjs('2000-01-01').startOf('day').toDate()
+        return [start, end]
+      },
+    },
+  ],
+}
+const timeRange = ref<string[]>([])
+const getDateRange = (days = 0, type: 'past' | 'future' = 'past') => {
+  const end = dayjs()
+  const start =
+    type === 'past' ? end.subtract(days, 'day') : end.add(days, 'day')
+  return [start.startOf('day').toDate(), end.endOf('day').toDate()]
+}
+
+const getMonthRange = (months = 0, type: 'past' | 'future' = 'past') => {
+  const now = dayjs()
+  const start =
+    type === 'past' ? now.subtract(months, 'month') : now.add(months, 'month')
+  return [start.startOf('month').toDate(), start.endOf('month').toDate()]
+}
+
+const getWeekRange = (weeks = 0, type: 'past' | 'future' = 'past') => {
+  const now = dayjs()
+  const start =
+    type === 'past' ? now.subtract(weeks, 'week') : now.add(weeks, 'week')
+  return [start.startOf('week').toDate(), start.endOf('week').toDate()]
+}
 const tableColumns = computed(() => [
   {
     label: '商品',
@@ -575,7 +778,7 @@ const tableColumns = computed(() => [
     slot: 'time',
     width: 300,
     prop: 'time',
-    align: 'center',
+    align: 'left',
   },
   {
     label: '内部便签',
@@ -655,6 +858,14 @@ const {
       return getOrderList(
         {
           ...searchForm.value,
+          startTime:
+            timeRange.value && timeRange.value.length > 0
+              ? timeRange.value[0]
+              : null,
+          endTime:
+            timeRange.value && timeRange.value.length > 0
+              ? timeRange.value[1]
+              : null,
           status: status.value,
         },
         page,
@@ -664,6 +875,14 @@ const {
       return getCardOrderList(
         {
           ...searchForm.value,
+          startTime:
+            timeRange.value && timeRange.value.length > 0
+              ? timeRange.value[0]
+              : null,
+          endTime:
+            timeRange.value && timeRange.value.length > 0
+              ? timeRange.value[1]
+              : null,
           status: status.value,
         },
         page,
@@ -676,8 +895,22 @@ const copy = (text: string) => {
   navigator.clipboard.writeText(text)
   ElMessage.success('复制成功')
 }
-const handleUpdateRemark = (item: PodUsOrderListData) => {
-  console.log(item)
+const handleUpdateRemark = async (item: ProductList) => {
+  ElMessageBox.prompt('请输入备注', '提示', {
+    confirmButtonText: '确认',
+    cancelButtonText: '取消',
+    inputPattern: /^.{1,2000}$/,
+    inputErrorMessage: '请输入备注',
+  }).then(async ({ value }) => {
+    try {
+      const res = await updateRemarkApi(item.id, value)
+      if (res.code !== 200) return
+      ElMessage.success('操作成功')
+      search()
+    } catch (e) {
+      console.error(e)
+    }
+  })
 }
 const confirmOrder = async () => {
   if (selection.value.length === 0) {
@@ -728,10 +961,10 @@ const updateOrder = async () => {
   }
 }
 const printProductionOrder = async () => {
-  if (cardSelection.value.length === 0) {
+  if (selection.value.length === 0) {
     return ElMessage.warning('请选择数据')
   }
-  const orderIds = cardSelection.value.map((item) => item.id)
+  const orderIds = selection.value.map((item) => item.id)
   try {
     const res = await printProductionOrderApi(orderIds)
     if (res.code !== 200) return
@@ -825,19 +1058,23 @@ const handleChangeImages = (item: cardImages | null, cardItem: ProductList) => {
     item?.url || JSON.parse(cardItem.imageAry || '')[0].url
 }
 const detailVisible = ref(false)
-
+const fastKey = ref('')
 const onFastProduction = () => {
   detailVisible.value = true
+  fastKey.value = 'fastProduction'
+  detailData.value = {}
 }
 // 下载稿件
 const downloadMaterial = async () => {
   let selectedIds = []
   if (status.value === 'IN_PRODUCTION') {
-    selectedIds = cardSelection.value.map(
-      (item: ProductList) => item.podJomallOrderUsId,
-    )
+    selectedIds = cardSelection.value.map((item: ProductList) => item.id)
   } else {
-    selectedIds = selection.value.map((item: PodUsOrderListData) => item.id)
+    selectedIds = selection.value
+      .map((item: PodUsOrderListData) => item.productList)
+      .flat()
+      .map((e) => e?.id)
+      .filter((e) => e !== undefined)
   }
   if (selectedIds.length === 0) {
     return ElMessage({
@@ -876,6 +1113,198 @@ const fastClose = () => {
   loadTabData()
   detailVisible.value = false
 }
+const podOrderVisible = ref(false)
+const printPodOrder = async () => {
+  const lodop = getCLodop(null, null)
+  if (!lodop) return
+
+  sheetPrinter.value = lodop.GET_PRINTER_NAME(0)
+  podOrderVisible.value = true
+}
+const sheetPrinter = ref('')
+const handlePrinterChange = (value: string) => {
+  sheetPrinter.value = value
+}
+const { getCLodop } = useLodop()
+const printOrder = async (
+  data: OrderData,
+  callback: (status: boolean) => void,
+) => {
+  const lodop = getCLodop(null, null)
+  if (!lodop) return
+  lodop.PRINT_INIT('打印内容')
+  const printerIndex = lodop.SET_PRINTER_INDEX(sheetPrinter.value)
+  console.log(
+    'printerIndex',
+    printerIndex,
+    `sheetPrinter.value:${sheetPrinter.value}`,
+  )
+  if (!printerIndex) {
+    ElMessage.error('打印机设置失败')
+    callback && callback(false)
+    return
+  }
+  if (data.filePath) {
+    const strURL = filePath + data.filePath
+    console.log('strURL', strURL, data)
+    lodop.ADD_PRINT_PDF(
+      0,
+      0,
+      '100%',
+      '100%',
+      /(https):\/\/([^/]+)/i.test(strURL) ? downloadPDF(strURL) : strURL,
+    )
+  } else {
+    lodop.SEND_PRINT_RAWDATA(data.fileData || '')
+  }
+  console.log('lodop.CVERSION', lodop.CVERSION)
+  if (lodop.CVERSION) {
+    const startTime = Date.now()
+    const jobCode = await lodopCall((lodop) => {
+      lodop.SET_PRINT_MODE('CATCH_PRINT_STATUS', true)
+      return lodop.PRINT()
+    })
+    console.log('jobCode', jobCode)
+    // eslint-disable-next-line no-constant-condition
+    while (true) {
+      const ok = await lodopCall((lodop) =>
+        lodop.GET_VALUE('PRINT_STATUS_OK', jobCode),
+      )
+      console.log('PRINT_STATUS_OK:', jobCode, `ok: ${ok}`)
+      if (ok == 1) {
+        console.log('打印成功')
+        // 打印状态：成功
+        callback && callback(true)
+        return
+      }
+      // 如果打印状态表示未成功或者返回了空，继续获取任务是否存在
+      const exist = await lodopCall((lodop) =>
+        lodop.GET_VALUE('PRINT_STATUS_EXIST', jobCode),
+      )
+      console.log(
+        '[LODOP] PRINT_STATUS OK,EXIST',
+        jobCode,
+        `ok:${ok}`,
+        `exist:${exist}`,
+        `jobCode:${jobCode}`,
+        `(${Date.now() - startTime}ms)`,
+      )
+      if (exist == 0) {
+        console.log('任务不存在了', `exist:${exist}`)
+        // 任务不存在了
+        callback && callback(true)
+        return
+      }
+
+      await new Promise((r) => setTimeout(r, 500))
+      if (Date.now() - startTime >= 30000) {
+        console.log('打印超时(30秒)')
+        ElMessage.error('打印超时(30秒)')
+        callback && callback(false)
+        return
+      }
+    }
+  } else {
+    lodop.PRINT()
+    callback && callback(false)
+  }
+}
+let _lodop: LODOPObject | null = null
+let _lodopCallback: { [key: string]: (value: string) => void } = {}
+const lodopCall = (fn: (lodop: LODOPObject) => string) => {
+  if (!_lodop) {
+    _lodop = getCLodop(null, null)
+    if (!_lodop) return
+    _lodop.On_Return_Remain = true
+    _lodop.SET_PRINT_MODE('CATCH_PRINT_STATUS', true)
+    _lodopCallback = {}
+    _lodop.On_Return = (id, value) => {
+      console.log('lodopCall return', id, JSON.stringify(value))
+      const cb = _lodopCallback[id]
+      if (!cb) return
+      delete _lodopCallback[id]
+      cb(value)
+    }
+  }
+
+  return new Promise((resolve) => {
+    if (!_lodop) return
+    const id = fn(_lodop)
+    console.log('lodopCall', id)
+    _lodopCallback[id] = resolve
+  })
+}
+const downloadPDF = (url: string) => {
+  if (!/^https?:/i.test(url)) return url
+  let xhr,
+    arrybuffer = false,
+    dataArray = null
+  if (window.XMLHttpRequest) {
+    xhr = new XMLHttpRequest()
+  } else {
+    xhr = new window.ActiveXObject('MSXML2.XMLHTTP')
+  }
+  xhr.open('GET', url, false) //同步方式
+  if (xhr.overrideMimeType)
+    try {
+      xhr.responseType = 'arraybuffer'
+      arrybuffer = true
+    } catch (err) {
+      xhr.overrideMimeType('text/plain; charset=x-user-defined')
+    }
+  xhr.send(null)
+  const data = xhr.response || xhr.responseBody
+  if (typeof Uint8Array !== 'undefined') {
+    if (arrybuffer) {
+      dataArray = new Uint8Array(data)
+    } else {
+      dataArray = new Uint8Array(data.length)
+      for (let i = 0; i < dataArray.length; i++) {
+        dataArray[i] = data.charCodeAt(i)
+      }
+    }
+  } else {
+    dataArray = window.VBS_BinaryToArray(data).toArray() //兼容IE低版本
+  }
+  const digits =
+    'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='
+  let strData = ''
+  for (let i = 0, ii = dataArray.length; i < ii; i += 3) {
+    if (isNaN(dataArray[i])) break
+    const b1 = dataArray[i] & 0xff,
+      b2 = dataArray[i + 1] & 0xff,
+      b3 = dataArray[i + 2] & 0xff
+    const d1 = b1 >> 2,
+      d2 = ((b1 & 3) << 4) | (b2 >> 4)
+    const d3 = i + 1 < ii ? ((b2 & 0xf) << 2) | (b3 >> 6) : 64
+    const d4 = i + 2 < ii ? b3 & 0x3f : 64
+    strData +=
+      digits.substring(d1, d1 + 1) +
+      digits.substring(d2, d2 + 1) +
+      digits.substring(d3, d3 + 1) +
+      digits.substring(d4, d4 + 1)
+  }
+  return strData
+}
+const openDetail = async (id: number) => {
+  try {
+    const res = await getOrderDetailById(id)
+    if (res.code == 200) {
+      if (res.data.imageAry) {
+        res.data.imageAry = JSON.parse(res.data.imageAry as string)
+      }
+      detailData.value = res.data || {}
+      detailVisible.value = true
+      fastKey.value = 'detail'
+    }
+  } catch (e) {
+    //showError(e)
+  }
+}
+const onFastRefresh = () => {
+  loadTabData()
+  search()
+}
 onMounted(() => {
   loadTabData()
   getUserMark()