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 {