feat：接入vue-plugin-hiprint打印组件、二维码预览打印组件封装

package.json

@@ -72,6 +72,7 @@
     "vue": "3.5.12",
     "vue-dompurify-html": "^4.1.4",
     "vue-i18n": "9.10.2",
+    "vue-plugin-hiprint": "^0.0.60",
     "vue-router": "4.4.5",
     "vue-types": "^5.1.1",
     "vuedraggable": "^4.1.0",

pnpm-lock.yaml

@@ -146,6 +146,9 @@ importers:
       vue-i18n:
         specifier: 9.10.2
         version: 9.10.2(vue@3.5.12(typescript@5.3.3))
+      vue-plugin-hiprint:
+        specifier: ^0.0.60
+        version: 0.0.60
       vue-router:
         specifier: 4.4.5
         version: 4.4.5(vue@3.5.12(typescript@5.3.3))
@@ -911,6 +914,11 @@ packages:
   '@carbon/icons@11.71.0':
     resolution: {integrity: sha512-PwOJ7C2MNQbHvaOsPhiKHNikJ9flGtyVeGIsOHIkyNndcxAUOleppHcGofOo4NvCeIUZwnr+EN8fMaU+ZdsH9w==}
 
+  '@claviska/jquery-minicolors@2.3.6':
+    resolution: {integrity: sha512-8Ro6D4GCrmOl41+6w4NFhEOpx8vjxwVRI69bulXsFDt49uVRKhLU5TnzEV7AmOJrylkVq+ugnYNMiGHBieeKUQ==}
+    peerDependencies:
+      jquery: '>= 1.7.x'
+
   '@codemirror/autocomplete@6.20.0':
     resolution: {integrity: sha512-bOwvTOIJcG5FVo5gUUupiwYh8MioPLQ4UcqbcRf7UQ98X90tCa9E1kZ3Z7tqwpZxYyOvh1YTYbmZE9RTfTp5hg==}
 
@@ -1658,6 +1666,9 @@ packages:
   '@sinclair/typebox@0.27.8':
     resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==}
 
+  '@socket.io/component-emitter@3.1.2':
+    resolution: {integrity: sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==}
+
   '@swc/core-darwin-arm64@1.15.7':
     resolution: {integrity: sha512-+hNVUfezUid7LeSHqnhoC6Gh3BROABxjlDNInuZ/fie1RUxaEX4qzDwdTgozJELgHhvYxyPIg1ro8ibnKtgO4g==}
     engines: {node: '>=10'}
@@ -1882,6 +1893,9 @@ packages:
   '@types/qs@6.14.0':
     resolution: {integrity: sha512-eOunJqu0K1923aExK6y8p6fsihYEn/BYuQ4g0CxAAgFc4b/ZLN4CrsRZ55srTdqoiLzU2B2evC+apEIxprEzkQ==}
 
+  '@types/raf@3.4.3':
+    resolution: {integrity: sha512-c4YAvMedbPZ5tEyxzQdMoOhhJ4RD3rngZIdwC2/qDN3d7JpEhB6fiBRKVY1lg5B7Wk+uPBjn5f39j1/2MY1oOw==}
+
   '@types/semver@7.7.1':
     resolution: {integrity: sha512-FmgJfu+MOcQ370SD0ev7EI8TlCAfKYU+B4m5T3yXc1CiRN94g/SZPtsCkk506aUDtlMnFZvasDwHHUcZUEaYuA==}
 
@@ -2342,6 +2356,10 @@ packages:
       slate: ^0.72.0
       snabbdom: ^3.1.0
 
+  '@wtto00/html2canvas@1.4.3':
+    resolution: {integrity: sha512-jwsb+xL8N+gjrSNABSaFdxmWtE4c7RNFjP20lo1G7gs63Qqo1phhxVBTzxc/apDVh6LgXsU2l5bwKtXd9uz65w==}
+    engines: {node: '>=8.0.0'}
+
   '@xmldom/xmldom@0.8.11':
     resolution: {integrity: sha512-cQzWCtO6C8TQiYl1ruKNn2U6Ao4o4WBBcbL61yJl84x+j5sOWWFU9X7DpND8XZG3daDppSsigMdfAIl2upQBRw==}
     engines: {node: '>=10.0.0'}
@@ -2523,6 +2541,10 @@ packages:
   balanced-match@2.0.0:
     resolution: {integrity: sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==}
 
+  base64-arraybuffer@1.0.2:
+    resolution: {integrity: sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==}
+    engines: {node: '>= 0.6.0'}
+
   base@0.11.2:
     resolution: {integrity: sha512-5T6P4xPgpp0YDFvSWwEZ4NoE3aM4QBQXDzmVbraCkFj8zHM+mba8SyqB5DbZWyR7mYHo6Y7BdQo3MoA4m0TeQg==}
     engines: {node: '>=0.10.0'}
@@ -2593,9 +2615,18 @@ packages:
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
 
+  btoa@1.2.1:
+    resolution: {integrity: sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g==}
+    engines: {node: '>= 0.4.0'}
+    hasBin: true
+
   buffer-from@1.1.2:
     resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
 
+  bwip-js@4.8.0:
+    resolution: {integrity: sha512-gUDkDHSTv8/DJhomSIbO0fX/Dx0MO/sgllLxJyJfu4WixCQe9nfGJzmHm64ZCbxo+gUYQEsQcRmqcwcwPRwUkg==}
+    hasBin: true
+
   cac@6.7.14:
     resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
     engines: {node: '>=8'}
@@ -2640,6 +2671,10 @@ packages:
   caniuse-lite@1.0.30001761:
     resolution: {integrity: sha512-JF9ptu1vP2coz98+5051jZ4PwQgd2ni8A+gYSN7EA7dPKIMf0pDlSUxhdmVOaV3/fYK5uWBkgSXJaRLr4+3A6g==}
 
+  canvg@3.0.11:
+    resolution: {integrity: sha512-5ON+q7jCTgMp9cjpu4Jo6XbvfYwSB2Ow3kzHKfIyJfaCAOHLbdKPQqGKgfED/R5B+3TFFfe8pegYA+b423SRyA==}
+    engines: {node: '>=10.0.0'}
+
   chalk@1.1.3:
     resolution: {integrity: sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==}
     engines: {node: '>=0.10.0'}
@@ -2867,6 +2902,9 @@ packages:
     resolution: {integrity: sha512-IQOkD3hbR5KrN93MtcYuad6YPuTSUhntLHDuLEbFWE+ff2/XSZNdZG+LcbbIW5AXKg/WFIfYItIzVoHngHXZzA==}
     engines: {node: '>=12 || >=16'}
 
+  css-line-break@2.1.0:
+    resolution: {integrity: sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==}
+
   css-select@4.3.0:
     resolution: {integrity: sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==}
 
@@ -3197,6 +3235,9 @@ packages:
     resolution: {integrity: sha512-rmvrrmWQPD/X1A/nPBfIVg4r05792QdG9Z4Prk6oQG0F9zBMDkr0GKAdds1wjb2dq1rTz/ywc4ZxpZbgz0tttg==}
     engines: {node: '>=18'}
 
+  dompurify@2.5.9:
+    resolution: {integrity: sha512-i6mvVmWN4xo9LrhCOZrDgSs9noW6nOahbrmzjRbPF36YPyj5Ue5lgok0MHDWkG7xzpWFO2OYttXdzM7rJxHvNA==}
+
   dompurify@3.3.1:
     resolution: {integrity: sha512-qkdCKzLNtrgPFP1Vo+98FRzJnBRGe4ffyCea9IwHB1fyxPOeNTHpLKYGd4Uk9xvNoH0ZoOjwZxNptyMwqrId1Q==}
 
@@ -3270,6 +3311,13 @@ packages:
     resolution: {integrity: sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==}
     engines: {node: '>= 4'}
 
+  engine.io-client@6.6.4:
+    resolution: {integrity: sha512-+kjUJnZGwzewFDw951CDWcwj35vMNf2fcj7xQWOctq1F2i1jkDdVvdFG9kM/BEChymCH36KgjnW0NsL58JYRxw==}
+
+  engine.io-parser@5.2.3:
+    resolution: {integrity: sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==}
+    engines: {node: '>=10.0.0'}
+
   entities@1.1.2:
     resolution: {integrity: sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==}
 
@@ -3518,6 +3566,9 @@ packages:
   feelin@3.2.0:
     resolution: {integrity: sha512-GFDbHsTYk7YXO1tyw1dOjb7IODeAZvNIosdGZThUwPx5XcD/XhO0hnPZXsIbAzSsIdrgGlTEEdby9fZ2gixysA==}
 
+  fflate@0.8.2:
+    resolution: {integrity: sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==}
+
   file-entry-cache@11.1.1:
     resolution: {integrity: sha512-TPVFSDE7q91Dlk1xpFLvFllf8r0HyOMOlnWy7Z2HBku5H3KhIeOGInexrIeg2D64DosVB/JXkrrk6N/7Wriq4A==}
 
@@ -3803,6 +3854,10 @@ packages:
   html-void-elements@2.0.1:
     resolution: {integrity: sha512-0quDb7s97CfemeJAnW9wC0hw78MtW7NU3hqtCD75g2vFlDLt36llsYD7uB7SUzojLMP24N5IatXf7ylGXiGG9A==}
 
+  html2canvas@1.4.1:
+    resolution: {integrity: sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==}
+    engines: {node: '>=8.0.0'}
+
   htmlparser2@3.10.1:
     resolution: {integrity: sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==}
 
@@ -4109,6 +4164,9 @@ packages:
     resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==}
     hasBin: true
 
+  jquery@3.7.1:
+    resolution: {integrity: sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==}
+
   js-base64@2.6.4:
     resolution: {integrity: sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==}
 
@@ -4131,6 +4189,9 @@ packages:
     resolution: {integrity: sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==}
     hasBin: true
 
+  jsbarcode@3.12.3:
+    resolution: {integrity: sha512-CuHU9hC6dPsHF5oVFMo8NW76uQVjH4L22CsP4hW+dNnGywJHC/B0ThA1CTDVLnxKLrrpYdicBLnd2xsgTfRnvg==}
+
   jsencrypt@3.5.4:
     resolution: {integrity: sha512-kNjfYEMNASxrDGsmcSQh/rUTmcoRfSUkxnAz+MMywM8jtGu+fFEZ3nJjHM58zscVnwR0fYmG9sGkTDjqUdpiwA==}
 
@@ -4174,6 +4235,9 @@ packages:
     resolution: {integrity: sha512-POQXvpdL69+CluYsillJ7SUhKvytYjW9vG/GKpnf+xP8UWgYEM/RaMzHHofbALDiKbbP1W8UEYmgGl39WkPZsg==}
     engines: {'0': node >= 0.2.0}
 
+  jspdf@2.5.2:
+    resolution: {integrity: sha512-myeX9c+p7znDWPk0eTrujCzNjT+CXdXyk7YmJq5nD5V7uLLKmSXnlQ/Jn/kuo3X09Op70Apm0rQSnFWyGK8uEQ==}
+
   katex@0.16.27:
     resolution: {integrity: sha512-aeQoDkuRWSqQN6nSvVCEFvfXdqo1OQiCmmW1kc9xSdjutPv7BGO7pqY9sQRJpMOGrEdfDgF2TfRXe5eUAD2Waw==}
     hasBin: true
@@ -4603,6 +4667,9 @@ packages:
   nth-check@2.1.1:
     resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
 
+  nzh@1.0.14:
+    resolution: {integrity: sha512-wKgaqCSZdrySvB4RWop5g+v6IDv2IErsT6rjq06Bg0yiT9hiHYZO12GMGx/xweGVLcO2lDjX5RqWD0S/Jy9z5Q==}
+
   object-assign@4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
@@ -4764,6 +4831,9 @@ packages:
   perfect-debounce@1.0.0:
     resolution: {integrity: sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==}
 
+  performance-now@2.1.0:
+    resolution: {integrity: sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==}
+
   picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
@@ -4971,6 +5041,9 @@ packages:
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
+  raf@3.4.1:
+    resolution: {integrity: sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==}
+
   rd@2.0.1:
     resolution: {integrity: sha512-/XdKU4UazUZTXFmI0dpABt8jSXPWcEyaGdk340KdHnsEOdkTctlX23aAK7ChQDn39YGNlAJr1M5uvaKt4QnpNw==}
 
@@ -5000,6 +5073,9 @@ packages:
   regenerate@1.4.2:
     resolution: {integrity: sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==}
 
+  regenerator-runtime@0.13.11:
+    resolution: {integrity: sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==}
+
   regenerator-runtime@0.14.1:
     resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
 
@@ -5084,6 +5160,10 @@ packages:
   rfdc@1.4.1:
     resolution: {integrity: sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==}
 
+  rgbcolor@1.0.1:
+    resolution: {integrity: sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==}
+    engines: {node: '>= 0.8.15'}
+
   rimraf@3.0.2:
     resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
     deprecated: Rimraf versions prior to v4 are no longer supported
@@ -5263,6 +5343,14 @@ packages:
     resolution: {integrity: sha512-FtyOnWN/wCHTVXOMwvSv26d+ko5vWlIDD6zoUJ7LW8vh+ZBC8QdljveRP+crNrtBwioEUWy/4dMtbBjA4ioNlg==}
     engines: {node: '>=0.10.0'}
 
+  socket.io-client@4.8.3:
+    resolution: {integrity: sha512-uP0bpjWrjQmUt5DTHq9RuoCBdFJF10cdX9X+a368j/Ft0wmaVgxlrjvK3kjvgCODOMMOz9lcaRzxmso0bTWZ/g==}
+    engines: {node: '>=10.0.0'}
+
+  socket.io-parser@4.2.6:
+    resolution: {integrity: sha512-asJqbVBDsBCJx0pTqw3WfesSY0iRX+2xzWEWzrpcH7L6fLzrhyF8WPI8UaeM4YCuDfpwA/cgsdugMsmtz8EJeg==}
+    engines: {node: '>=10.0.0'}
+
   sortablejs@1.14.0:
     resolution: {integrity: sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==}
 
@@ -5310,6 +5398,10 @@ packages:
     resolution: {integrity: sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==}
     deprecated: 'Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility'
 
+  stackblur-canvas@2.7.0:
+    resolution: {integrity: sha512-yf7OENo23AGJhBriGx0QivY5JP6Y1HbrrDI6WLt6C5auYZXlQrheoY8hD4ibekFKz1HOfE48Ww8kMWMnJD/zcQ==}
+    engines: {node: '>=0.1.14'}
+
   static-extend@0.1.2:
     resolution: {integrity: sha512-72E9+uLc27Mt718pMHt9VMNiAL4LMsmDbBva8mxWUCkT07fSzEGMYUCk0XWY6lp0j6RBAG4cJ3mWuZv2OE3s0g==}
     engines: {node: '>=0.10.0'}
@@ -5438,6 +5530,10 @@ packages:
   svg-baker@1.7.0:
     resolution: {integrity: sha512-nibslMbkXOIkqKVrfcncwha45f97fGuAOn1G99YwnwTj8kF9YiM6XexPcUso97NxOm6GsP0SIvYVIosBis1xLg==}
 
+  svg-pathdata@6.0.3:
+    resolution: {integrity: sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==}
+    engines: {node: '>=12.0.0'}
+
   svg-tags@1.0.0:
     resolution: {integrity: sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==}
 
@@ -5476,6 +5572,9 @@ packages:
     resolution: {integrity: sha512-te/NtwBwfiNRLf9Ijqx3T0nlqZiQ2XrrtBvu+cLL8ZRrGkO0NHTug8MYFKyoSrv/sHTaSKfilUkizV6XhxMJ3g==}
     engines: {node: '>=8'}
 
+  text-segmentation@1.0.3:
+    resolution: {integrity: sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==}
+
   text-table@0.2.0:
     resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
 
@@ -5690,6 +5789,9 @@ packages:
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
+  utrie@1.0.2:
+    resolution: {integrity: sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==}
+
   uuid@10.0.0:
     resolution: {integrity: sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==}
     hasBin: true
@@ -5801,6 +5903,10 @@ packages:
     peerDependencies:
       vue: ^3.0.0
 
+  vue-plugin-hiprint@0.0.60:
+    resolution: {integrity: sha512-a5uOMn6Nr4qlYYaVNbQKwRZJa8UcNMTflfi6J430/NDtySJB+5ArE8I8+NLjgVV56x3/qdUBs/GWuZCX5Umv1w==}
+    engines: {node: '>=16'}
+
   vue-router@4.4.5:
     resolution: {integrity: sha512-4fKZygS8cH1yCyuabAXGUAsyi1b2/o/OKgu/RUb+znIYOxPRxdkytJEx+0wGcpBE1pX6vUgh5jwWOKRGvuA/7Q==}
     peerDependencies:
@@ -5913,6 +6019,18 @@ packages:
     resolution: {integrity: sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
 
+  ws@8.18.3:
+    resolution: {integrity: sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: '>=5.0.2'
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+
   xml-js@1.6.11:
     resolution: {integrity: sha512-7rVi2KMfwfWFl+GpPg6m80IVMWXLRjO+PxTq7V2CDhoGak0wzYzFgUY2m4XJ47OGdXd8eLE8EmwfAmdjw7lC1g==}
     hasBin: true
@@ -5921,6 +6039,10 @@ packages:
     resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==}
     engines: {node: '>=12'}
 
+  xmlhttprequest-ssl@2.1.2:
+    resolution: {integrity: sha512-TEU+nJVUUnA4CYJFLvK5X9AOeH4KvDvhIfm0vV1GaQRtchnG0hgK5p8hw/xjv8cunWYCsiPCSDzObPyhEwq3KQ==}
+    engines: {node: '>=0.4.0'}
+
   y18n@4.0.3:
     resolution: {integrity: sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==}
 
@@ -6757,6 +6879,10 @@ snapshots:
     dependencies:
       '@ibm/telemetry-js': 1.10.2
 
+  '@claviska/jquery-minicolors@2.3.6(jquery@3.7.1)':
+    dependencies:
+      jquery: 3.7.1
+
   '@codemirror/autocomplete@6.20.0':
     dependencies:
       '@codemirror/language': 6.12.1
@@ -7459,6 +7585,8 @@ snapshots:
 
   '@sinclair/typebox@0.27.8': {}
 
+  '@socket.io/component-emitter@3.1.2': {}
+
   '@swc/core-darwin-arm64@1.15.7':
     optional: true
 
@@ -7673,6 +7801,8 @@ snapshots:
 
   '@types/qs@6.14.0': {}
 
+  '@types/raf@3.4.3': {}
+
   '@types/semver@7.7.1': {}
 
   '@types/svgo@2.6.4':
@@ -8383,6 +8513,11 @@ snapshots:
       slate: 0.72.8
       snabbdom: 3.6.3
 
+  '@wtto00/html2canvas@1.4.3':
+    dependencies:
+      css-line-break: 2.1.0
+      text-segmentation: 1.0.3
+
   '@xmldom/xmldom@0.8.11': {}
 
   '@zxcvbn-ts/core@3.0.4':
@@ -8558,6 +8693,8 @@ snapshots:
 
   balanced-match@2.0.0: {}
 
+  base64-arraybuffer@1.0.2: {}
+
   base@0.11.2:
     dependencies:
       cache-base: 1.0.1
@@ -8660,8 +8797,12 @@ snapshots:
       node-releases: 2.0.27
       update-browserslist-db: 1.2.3(browserslist@4.28.1)
 
+  btoa@1.2.1: {}
+
   buffer-from@1.1.2: {}
 
+  bwip-js@4.8.0: {}
+
   cac@6.7.14: {}
 
   cache-base@1.0.1:
@@ -8717,6 +8858,17 @@ snapshots:
 
   caniuse-lite@1.0.30001761: {}
 
+  canvg@3.0.11:
+    dependencies:
+      '@babel/runtime': 7.28.4
+      '@types/raf': 3.4.3
+      core-js: 3.47.0
+      raf: 3.4.1
+      regenerator-runtime: 0.13.11
+      rgbcolor: 1.0.1
+      stackblur-canvas: 2.7.0
+      svg-pathdata: 6.0.3
+
   chalk@1.1.3:
     dependencies:
       ansi-styles: 2.2.1
@@ -8952,6 +9104,10 @@ snapshots:
 
   css-functions-list@3.2.3: {}
 
+  css-line-break@2.1.0:
+    dependencies:
+      utrie: 1.0.2
+
   css-select@4.3.0:
     dependencies:
       boolbase: 1.0.0
@@ -9322,6 +9478,9 @@ snapshots:
 
   domify@2.0.0: {}
 
+  dompurify@2.5.9:
+    optional: true
+
   dompurify@3.3.1:
     optionalDependencies:
       '@types/trusted-types': 2.0.7
@@ -9430,6 +9589,20 @@ snapshots:
 
   emojis-list@3.0.0: {}
 
+  engine.io-client@6.6.4:
+    dependencies:
+      '@socket.io/component-emitter': 3.1.2
+      debug: 4.4.3
+      engine.io-parser: 5.2.3
+      ws: 8.18.3
+      xmlhttprequest-ssl: 2.1.2
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+
+  engine.io-parser@5.2.3: {}
+
   entities@1.1.2: {}
 
   entities@2.2.0: {}
@@ -9816,6 +9989,8 @@ snapshots:
       lezer-feel: 1.9.0
       luxon: 3.7.2
 
+  fflate@0.8.2: {}
+
   file-entry-cache@11.1.1:
     dependencies:
       flat-cache: 6.1.19
@@ -10112,6 +10287,12 @@ snapshots:
 
   html-void-elements@2.0.1: {}
 
+  html2canvas@1.4.1:
+    dependencies:
+      css-line-break: 2.1.0
+      text-segmentation: 1.0.3
+    optional: true
+
   htmlparser2@3.10.1:
     dependencies:
       domelementtype: 1.3.1
@@ -10390,6 +10571,8 @@ snapshots:
 
   jiti@2.6.1: {}
 
+  jquery@3.7.1: {}
+
   js-base64@2.6.4: {}
 
   js-beautify@1.15.4:
@@ -10410,6 +10593,8 @@ snapshots:
     dependencies:
       argparse: 2.0.1
 
+  jsbarcode@3.12.3: {}
+
   jsencrypt@3.5.4: {}
 
   jsesc@3.1.0: {}
@@ -10445,6 +10630,18 @@ snapshots:
 
   jsonparse@1.3.1: {}
 
+  jspdf@2.5.2:
+    dependencies:
+      '@babel/runtime': 7.28.4
+      atob: 2.1.2
+      btoa: 1.2.1
+      fflate: 0.8.2
+    optionalDependencies:
+      canvg: 3.0.11
+      core-js: 3.47.0
+      dompurify: 2.5.9
+      html2canvas: 1.4.1
+
   katex@0.16.27:
     dependencies:
       commander: 8.3.0
@@ -10896,6 +11093,8 @@ snapshots:
     dependencies:
       boolbase: 1.0.0
 
+  nzh@1.0.14: {}
+
   object-assign@4.1.1: {}
 
   object-copy@0.1.0:
@@ -11047,6 +11246,8 @@ snapshots:
 
   perfect-debounce@1.0.0: {}
 
+  performance-now@2.1.0: {}
+
   picocolors@1.1.1: {}
 
   picomatch@2.3.1: {}
@@ -11241,6 +11442,10 @@ snapshots:
 
   queue-microtask@1.2.3: {}
 
+  raf@3.4.1:
+    dependencies:
+      performance-now: 2.1.0
+
   rd@2.0.1:
     dependencies:
       '@types/node': 10.17.60
@@ -11276,6 +11481,8 @@ snapshots:
 
   regenerate@1.4.2: {}
 
+  regenerator-runtime@0.13.11: {}
+
   regenerator-runtime@0.14.1: {}
 
   regex-not@1.0.2:
@@ -11349,6 +11556,8 @@ snapshots:
 
   rfdc@1.4.1: {}
 
+  rgbcolor@1.0.1: {}
+
   rimraf@3.0.2:
     dependencies:
       glob: 7.2.3
@@ -11591,6 +11800,24 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  socket.io-client@4.8.3:
+    dependencies:
+      '@socket.io/component-emitter': 3.1.2
+      debug: 4.4.3
+      engine.io-client: 6.6.4
+      socket.io-parser: 4.2.6
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+
+  socket.io-parser@4.2.6:
+    dependencies:
+      '@socket.io/component-emitter': 3.1.2
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
   sortablejs@1.14.0: {}
 
   sortablejs@1.15.6: {}
@@ -11628,6 +11855,8 @@ snapshots:
 
   stable@0.1.8: {}
 
+  stackblur-canvas@2.7.0: {}
+
   static-extend@0.1.2:
     dependencies:
       define-property: 0.2.5
@@ -11813,6 +12042,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  svg-pathdata@6.0.3: {}
+
   svg-tags@1.0.0: {}
 
   svg.js@2.7.1: {}
@@ -11857,6 +12088,10 @@ snapshots:
 
   text-extensions@2.4.0: {}
 
+  text-segmentation@1.0.3:
+    dependencies:
+      utrie: 1.0.2
+
   text-table@0.2.0: {}
 
   through@2.3.8: {}
@@ -12124,6 +12359,10 @@ snapshots:
 
   util-deprecate@1.0.2: {}
 
+  utrie@1.0.2:
+    dependencies:
+      base64-arraybuffer: 1.0.2
+
   uuid@10.0.0: {}
 
   vary@1.1.2: {}
@@ -12257,6 +12496,23 @@ snapshots:
       '@vue/devtools-api': 6.6.4
       vue: 3.5.12(typescript@5.3.3)
 
+  vue-plugin-hiprint@0.0.60:
+    dependencies:
+      '@claviska/jquery-minicolors': 2.3.6(jquery@3.7.1)
+      '@wtto00/html2canvas': 1.4.3
+      bwip-js: 4.8.0
+      canvg: 3.0.11
+      jquery: 3.7.1
+      jsbarcode: 3.12.3
+      jspdf: 2.5.2
+      lodash: 4.17.21
+      nzh: 1.0.14
+      socket.io-client: 4.8.3
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+
   vue-router@4.4.5(vue@3.5.12(typescript@5.3.3)):
     dependencies:
       '@vue/devtools-api': 6.6.4
@@ -12400,12 +12656,16 @@ snapshots:
       imurmurhash: 0.1.4
       signal-exit: 4.1.0
 
+  ws@8.18.3: {}
+
   xml-js@1.6.11:
     dependencies:
       sax: 1.4.3
 
   xml-name-validator@4.0.0: {}
 
+  xmlhttprequest-ssl@2.1.2: {}
+
   y18n@4.0.3: {}
 
   y18n@5.0.8: {}

src/components/HiprintPreviewDialog/index.vue

@@ -0,0 +1,397 @@
+<template>
+  <Dialog v-model="dialogVisible" :title="dialogTitle" width="92%" :fullscreen="false" top="4vh">
+    <div class="hiprint-preview">
+      <div class="hiprint-toolbar">
+        <div class="hiprint-paper">
+          <el-button
+            v-for="(value, type) in paperTypes"
+            :key="type"
+            size="small"
+            :type="curPaperType === type ? 'primary' : 'default'"
+            @click="setPaper(type, value)"
+          >
+            {{ type }}
+          </el-button>
+          <el-popover placement="bottom-start" :width="260" trigger="click" v-model:visible="paperPopVisible">
+            <template #reference>
+              <el-button size="small" :type="curPaperType === 'other' ? 'primary' : 'default'">自定义纸张</el-button>
+            </template>
+            <div class="paper-pop">
+              <div class="paper-pop-title">设置纸张宽高(mm)</div>
+              <div class="paper-pop-form">
+                <el-input-number v-model="paperWidth" :precision="1" :min="1" controls-position="right" />
+                <span>x</span>
+                <el-input-number v-model="paperHeight" :precision="1" :min="1" controls-position="right" />
+              </div>
+              <el-button class="mt-8px" size="small" type="primary" @click="setPaperOther">确定</el-button>
+            </div>
+          </el-popover>
+        </div>
+        <div class="hiprint-zoom">
+          <el-button size="small" @click="changeScale(false)">
+            <Icon icon="ep:zoom-out" />
+          </el-button>
+          <div class="zoom-value">{{ (scaleValue * 100).toFixed(0) }}%</div>
+          <el-button size="small" @click="changeScale(true)">
+            <Icon icon="ep:zoom-in" />
+          </el-button>
+        </div>
+        <el-button type="primary" size="small" @click="handlePrint">
+          <Icon icon="ep:printer" class="mr-4px" />
+          浏览器打印
+        </el-button>
+      </div>
+
+      <div class="hiprint-body">
+        <div class="hiprint-left">
+          <div class="hiprint-title">基础元素</div>
+          <div :id="dragContainerId" class="hiprint-drag-wrap">
+            <div v-for="item in baseElements" :key="item.tid" class="ep-draggable-item hiprint-item" :tid="item.tid">
+              <span>{{ item.label }}</span>
+            </div>
+          </div>
+        </div>
+        <div class="hiprint-center">
+          <div :id="designerContainerId"></div>
+        </div>
+        <div class="hiprint-right">
+          <div :id="settingContainerId"></div>
+        </div>
+      </div>
+    </div>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { defaultElementTypeProvider, hiprint } from 'vue-plugin-hiprint'
+
+interface HiprintPreviewOpenOptions {
+  title?: string
+  printData?: Record<string, any> | Record<string, any>[]
+  withDefaultQrcodeLayout?: boolean
+  templateJson?: Record<string, any>
+  paperSize?: {
+    width: number
+    height: number
+  }
+}
+
+const message = useMessage()
+
+const baseElements = [
+  { tid: 'defaultModule.text', label: '文本' },
+  { tid: 'defaultModule.image', label: '图片' },
+  { tid: 'defaultModule.longText', label: '长文' },
+  { tid: 'defaultModule.table', label: '表格' },
+  { tid: 'defaultModule.html', label: 'HTML' },
+  { tid: 'defaultModule.hline', label: '横线' },
+  { tid: 'defaultModule.vline', label: '竖线' },
+  { tid: 'defaultModule.rect', label: '矩形' },
+  { tid: 'defaultModule.oval', label: '圆形' }
+]
+
+const dialogVisible = ref(false)
+const dialogTitle = ref('打印预览')
+const currentPrintData = ref<Record<string, any> | Record<string, any>[]>({})
+const withDefaultQrcodeLayout = ref(false)
+const currentTemplateJson = ref<Record<string, any> | undefined>(undefined)
+
+const instanceId = `hiprint-preview-${Math.random().toString(36).slice(2)}`
+const dragContainerId = `${instanceId}-drag`
+const designerContainerId = `${instanceId}-designer`
+const settingContainerId = `${instanceId}-setting`
+
+const paperTypes = {
+  A3: { width: 420, height: 296.6 },
+  A4: { width: 210, height: 296.6 },
+  A5: { width: 210, height: 147.6 },
+  B3: { width: 500, height: 352.6 },
+  B4: { width: 250, height: 352.6 },
+  B5: { width: 250, height: 175.6 }
+}
+const curPaper = ref({
+  type: 'A4',
+  width: 210,
+  height: 296.6
+})
+const paperPopVisible = ref(false)
+const paperWidth = ref(220)
+const paperHeight = ref(80)
+const curPaperType = computed(() => {
+  let type = 'other'
+  for (const [key, value] of Object.entries(paperTypes)) {
+    if (value.width === curPaper.value.width && value.height === curPaper.value.height) {
+      type = key
+      break
+    }
+  }
+  return type
+})
+
+const scaleValue = ref(1)
+const scaleMax = 5
+const scaleMin = 0.5
+
+let hiprintInited = false
+let hiprintTemplate: any
+
+const ensureInit = () => {
+  if (hiprintInited) {
+    return
+  }
+  hiprint.init({
+    providers: [defaultElementTypeProvider()]
+  })
+  hiprintInited = true
+}
+
+const buildLeftElement = () => {
+  const jquery = (window as any).$
+  if (!jquery) {
+    message.warning('未检测到 jQuery，无法加载拖拽元素')
+    return
+  }
+  hiprint.PrintElementTypeManager.buildByHtml(jquery(`#${dragContainerId} .ep-draggable-item`))
+}
+
+const buildDesigner = () => {
+  const jquery = (window as any).$
+  if (!jquery) {
+    message.warning('未检测到 jQuery，无法初始化打印设计器')
+    return
+  }
+  jquery(`#${designerContainerId}`).empty()
+  const template =
+    currentTemplateJson.value || (withDefaultQrcodeLayout.value ? buildDefaultQrcodeTemplateJson() : undefined)
+  hiprintTemplate = new hiprint.PrintTemplate({
+    template,
+    settingContainer: `#${settingContainerId}`
+  })
+  hiprintTemplate.design(`#${designerContainerId}`)
+  setPaper(curPaperType.value, { width: curPaper.value.width, height: curPaper.value.height })
+  hiprintTemplate.zoom(scaleValue.value)
+}
+
+const buildDefaultQrcodeTemplateJson = () => ({
+  panels: [
+    {
+      index: 0,
+      name: 1,
+      width: 80,
+      height: 60,
+      paperHeader: 0,
+      paperFooter: 170.07874015748033,
+      printElements: [
+        {
+          options: {
+            left: 20,
+            top: 6,
+            height: 36,
+            width: 36,
+            textType: 'qrcode',
+            title: '二维码',
+            field: 'qrcodeContent',
+            testData: 'XS888888888'
+          },
+          printElementType: {
+            title: '二维码',
+            type: 'text'
+          }
+        },
+        {
+          options: {
+            left: 8,
+            top: 46,
+            height: 8,
+            width: 60,
+            title: 'ID',
+            field: 'printId',
+            testData: 'ID: 1001',
+            textAlign: 'center',
+            fontSize: 10
+          },
+          printElementType: {
+            title: '文本',
+            type: 'text'
+          }
+        }
+      ],
+      paperNumberLeft: 196,
+      paperNumberTop: 148,
+      paperNumberDisabled: true,
+      paperNumberContinue: true,
+      watermarkOptions: {},
+      panelLayoutOptions: {}
+    }
+  ]
+})
+
+const setPaper = (type: string, value: { width: number; height: number }) => {
+  if (!hiprintTemplate) {
+    return
+  }
+  const width = Number(value.width)
+  const height = Number(value.height)
+  curPaper.value = { type, width, height }
+  hiprintTemplate.setPaper(width, height)
+}
+
+const setPaperOther = () => {
+  paperPopVisible.value = false
+  setPaper('other', { width: Number(paperWidth.value), height: Number(paperHeight.value) })
+}
+
+const changeScale = (isZoomIn: boolean) => {
+  if (!hiprintTemplate) {
+    return
+  }
+  let nextScale = scaleValue.value
+  if (isZoomIn) {
+    nextScale += 0.1
+    if (nextScale > scaleMax) nextScale = scaleMax
+  } else {
+    nextScale -= 0.1
+    if (nextScale < scaleMin) nextScale = scaleMin
+  }
+  scaleValue.value = nextScale
+  hiprintTemplate.zoom(nextScale)
+}
+
+const handlePrint = () => {
+  if (!hiprintTemplate) {
+    return
+  }
+  hiprintTemplate.print(currentPrintData.value, { leftOffset: -1, topOffset: -1 })
+}
+
+const resetState = () => {
+  scaleValue.value = 1
+  curPaper.value = {
+    type: 'A4',
+    width: 210,
+    height: 296.6
+  }
+  paperWidth.value = 220
+  paperHeight.value = 80
+  paperPopVisible.value = false
+}
+
+const open = async (options: HiprintPreviewOpenOptions = {}) => {
+  dialogTitle.value = options.title || '打印预览'
+  currentPrintData.value = options.printData || {}
+  withDefaultQrcodeLayout.value = !!options.withDefaultQrcodeLayout
+  currentTemplateJson.value = options.templateJson
+  resetState()
+  if (options.paperSize?.width && options.paperSize?.height) {
+    const width = Number(options.paperSize.width)
+    const height = Number(options.paperSize.height)
+    curPaper.value = {
+      type: 'other',
+      width,
+      height
+    }
+    paperWidth.value = width
+    paperHeight.value = height
+  }
+  dialogVisible.value = true
+  await nextTick()
+  ensureInit()
+  buildLeftElement()
+  buildDesigner()
+}
+
+defineExpose({ open })
+</script>
+
+<style scoped lang="scss">
+.hiprint-preview {
+  width: 100%;
+}
+
+.hiprint-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.hiprint-paper {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.hiprint-zoom {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.zoom-value {
+  width: 56px;
+  text-align: center;
+  font-size: 13px;
+  color: var(--el-text-color-regular);
+}
+
+.paper-pop-title {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.paper-pop-form {
+  margin-top: 8px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.hiprint-body {
+  height: 75vh;
+  display: grid;
+  grid-template-columns: 220px 1fr 300px;
+  gap: 12px;
+}
+
+.hiprint-left,
+.hiprint-center,
+.hiprint-right {
+  background: var(--el-bg-color);
+  border: 1px solid var(--el-border-color-light);
+  border-radius: 8px;
+  overflow: auto;
+}
+
+.hiprint-center {
+  padding: 16px;
+}
+
+.hiprint-right {
+  padding: 12px;
+}
+
+.hiprint-title {
+  padding: 10px 10px 0;
+  font-weight: 600;
+}
+
+.hiprint-drag-wrap {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+  padding: 10px;
+}
+
+.hiprint-item {
+  min-height: 56px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  border: 1px solid var(--el-border-color);
+  background: var(--el-fill-color-light);
+  color: var(--el-text-color-primary);
+  cursor: grab;
+}
+</style>

src/components/QrcodeActionCard/index.vue

@@ -0,0 +1,224 @@
+<template>
+  <div class="qrcode-action-card">
+    <el-image
+      v-if="imageUrl"
+      :src="imageUrl"
+      :preview-src-list="[imageUrl]"
+      preview-teleported
+      fit="cover"
+      class="qrcode-action-card__img"
+    >
+      <template #error>
+        <div class="qrcode-action-card__error">{{ emptyText }}</div>
+      </template>
+    </el-image>
+    <div v-else class="qrcode-action-card__error">{{ emptyText }}</div>
+    <div class="qrcode-action-card__mask">
+      <el-button circle :disabled="!imageUrl" @click="handlePreview">
+        <Icon icon="ep:zoom-in" />
+      </el-button>
+      <el-button circle :disabled="!imageUrl || printDisabled" @click="handlePrint">
+        <Icon icon="ep:printer" />
+      </el-button>
+      <el-button circle :loading="refreshLoading" :disabled="refreshDisabled || refreshLoading" @click="handleRefresh">
+        <Icon icon="ep:refresh" />
+      </el-button>
+    </div>
+  </div>
+  <HiprintPreviewDialog ref="hiprintPreviewDialogRef" />
+</template>
+
+<script setup lang="ts">
+import request from '@/config/axios'
+import HiprintPreviewDialog from '@/components/HiprintPreviewDialog/index.vue'
+import { createImageViewer } from '@/components/ImageViewer'
+import { ElLoading } from 'element-plus'
+
+const { t } = useI18n()
+const message = useMessage()
+
+const props = withDefaults(
+  defineProps<{
+    imageUrl?: string
+    printId?: string | number
+    printTitle?: string
+    emptyText?: string
+    refreshUrl?: string
+    refreshMethod?: 'post' | 'put' | 'get'
+    refreshDisabled?: boolean
+    printDisabled?: boolean
+    refreshConfirmText?: string
+  }>(),
+  {
+    imageUrl: '',
+    printId: '',
+    printTitle: '二维码打印预览',
+    emptyText: '',
+    refreshUrl: '',
+    refreshMethod: 'post',
+    refreshDisabled: false,
+    printDisabled: false,
+    refreshConfirmText: ''
+  }
+)
+
+const emit = defineEmits<{
+  (e: 'refresh-success', data: any): void
+}>()
+
+const hiprintPreviewDialogRef = ref()
+const refreshLoading = ref(false)
+
+const buildQrcodeTemplateJson = (qrcodeUrl: string, printId: string | number) => ({
+  panels: [
+    {
+      index: 0,
+      name: 1,
+      width: 80,
+      height: 80,
+      paperHeader: 0,
+      paperFooter: 0,
+      printElements: [
+        {
+          options: {
+            left: 0,
+            top: 0,
+            width: 100,
+            height: 100,
+            src: qrcodeUrl,
+            field: 'qrcodeUrl',
+            title: '二维码图片',
+            testData: qrcodeUrl
+          },
+          printElementType: {
+            title: '图片',
+            type: 'image'
+          }
+        },
+         {
+          options: {
+            left: 20,
+            top: 100,
+            height: 8,
+            width: 60,
+            testData: printId,
+            title: 'ID',
+            field: 'printId',
+            textAlign: 'center',
+            fontSize: 10
+          },
+          printElementType: {
+            title: '文本',
+            type: 'text'
+          }
+        }
+      ],
+      paperNumberDisabled: true,
+      paperNumberContinue: true,
+      watermarkOptions: {},
+      panelLayoutOptions: {}
+    }
+  ]
+})
+
+const handlePreview = () => {
+  if (!props.imageUrl) return
+  createImageViewer({
+    zIndex: 9999999,
+    urlList: [props.imageUrl]
+  })
+}
+
+const handlePrint = () => {
+  if (!props.imageUrl) return
+  hiprintPreviewDialogRef.value?.open({
+    title: props.printTitle,
+    printData: {
+      qrcodeUrl: props.imageUrl,
+      printId: props.printId ? String(props.printId) : ''
+    },
+    templateJson: buildQrcodeTemplateJson(props.imageUrl,props.printId),
+    withDefaultQrcodeLayout: false,
+    paperSize: {
+      width: 80,
+      height: 80
+    }
+  })
+}
+
+const handleRefresh = async () => {
+  if (!props.refreshUrl || props.refreshDisabled) return
+  try {
+    await message.confirm(props.refreshConfirmText || '确认刷新二维码吗？')
+  } catch {
+    return
+  }
+  refreshLoading.value = true
+  const loading = ElLoading.service({
+    lock: true,
+    text: t('common.loading'),
+    background: 'rgba(0, 0, 0, 0.3)'
+  })
+  try {
+    let data
+    if (props.refreshMethod === 'get') {
+      data = await request.get({ url: props.refreshUrl })
+    } else if (props.refreshMethod === 'put') {
+      data = await request.put({ url: props.refreshUrl })
+    } else {
+      data = await request.post({ url: props.refreshUrl })
+    }
+    emit('refresh-success', data)
+    message.success(t('common.updateSuccess'))
+  } finally {
+    loading.close()
+    refreshLoading.value = false
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.qrcode-action-card {
+  position: relative;
+  height: 150px;
+  width: fit-content;
+  min-width: 150px;
+  border-radius: 10px;
+  overflow: hidden;
+  border: 1px solid var(--el-border-color-lighter);
+  background: var(--el-fill-color-blank);
+}
+
+.qrcode-action-card__img {
+  height: 150px;
+  width: auto;
+  display: block;
+}
+
+.qrcode-action-card__error {
+  height: 150px;
+  min-width: 150px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--el-text-color-secondary);
+  font-size: 12px;
+  padding: 0 12px;
+}
+
+.qrcode-action-card__mask {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  background: rgba(0, 0, 0, 0.35);
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.qrcode-action-card:hover .qrcode-action-card__mask {
+  opacity: 1;
+}
+</style>

src/locales/en.ts

@@ -1,5 +1,6 @@
 export default {
   common: {
+    loading: 'Loading...',
     inputText: 'Please input',
     selectText: 'Please select',
     startTimeText: 'Start time',

src/locales/zh-CN.ts

@@ -1,5 +1,6 @@
 export default {
   common: {
+    loading: '加载中...',
     inputText: '请输入',
     selectText: '请选择',
     startTimeText: '开始时间',

src/main.ts

@@ -41,6 +41,8 @@ import '@/plugins/tongji' // 百度统计
 import Logger from '@/utils/Logger'
 
 import VueDOMPurifyHTML from 'vue-dompurify-html' // 解决v-html 的安全隐患
+import { hiPrintPlugin } from 'vue-plugin-hiprint'
+import 'vue-plugin-hiprint/dist/print-lock.css'
 
 // 创建实例
 const setupAll = async () => {
@@ -56,6 +58,9 @@ const setupAll = async () => {
 
   setupFormCreate(app)
 
+  app.use(hiPrintPlugin, '$hiprint', false)
+  hiPrintPlugin.disAutoConnect()
+
   setupRouter(app)
 
   // directives 指令

src/views/erp/product/product/ProductForm.vue

@@ -135,42 +135,16 @@
         </el-col>
         <el-col v-if="formType === 'update'" :span="24">
           <el-form-item :label="t('FactoryModeling.ProductInformation.qrcode')" prop="qrcodeUrl">
-            <div class="product-form-qrcode-wrap">
+            <QrcodeActionCard
-              <el-image
+              :image-url="formData.qrcodeUrl"
-                v-if="formData.qrcodeUrl"
+              :print-id="formData.id"
-                :src="formData.qrcodeUrl"
+              :print-title="`${formData.name || '产品'}二维码打印预览`"
-                :preview-src-list="[formData.qrcodeUrl]"
+              :empty-text="t('FactoryModeling.ProductInformation.qrcodeEmpty')"
-                preview-teleported
+              :refresh-url="getQrcodeRefreshUrl()"
-                fit="cover"
+              :refresh-disabled="!formData.id || !formData.barCode"
-                class="product-form-qrcode-img"
+              refresh-confirm-text="确认刷新该产品二维码吗？"
-              >
+              @refresh-success="handleQrcodeRefreshSuccess"
-                <template #error>
+            />
-                  <div class="product-form-qrcode-error">
-                    {{ t('FactoryModeling.ProductInformation.qrcodeLoadError') }}
-                  </div>
-                </template>
-              </el-image>
-              <div v-else class="product-form-qrcode-error">
-                {{ t('FactoryModeling.ProductInformation.qrcodeEmpty') }}
-              </div>
-              <div class="product-form-qrcode-mask">
-                <el-button
-                  circle
-                  :disabled="!formData.qrcodeUrl"
-                  @click="handlePreviewQrcode"
-                >
-                  <Icon icon="ep:zoom-in" />
-                </el-button>
-                <el-button
-                  circle
-                  :loading="regenerateCodeLoading"
-                  :disabled="regenerateCodeLoading"
-                  @click="handleRegenerateCode"
-                >
-                  <Icon icon="ep:refresh" />
-                </el-button>
-              </div>
-            </div>
           </el-form-item>
         </el-col>
         <el-col :span="24">
@@ -190,7 +164,7 @@
 import { ProductApi, ProductVO } from '@/api/erp/product/product'
 import { ProductCategoryApi, ProductCategoryVO } from '@/api/erp/product/category'
 import { ProductUnitApi, ProductUnitVO } from '@/api/erp/product/unit'
-import { createImageViewer } from '@/components/ImageViewer'
+import QrcodeActionCard from '@/components/QrcodeActionCard/index.vue'
 import { CommonStatusEnum } from '@/utils/constants'
 import { defaultProps, handleTree } from '@/utils/tree'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
@@ -205,7 +179,6 @@ const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
-const regenerateCodeLoading = ref(false)
 const formData = ref({
   id: undefined,
   name: undefined,
@@ -276,30 +249,20 @@ const handleCodeAutoChange = (value: boolean) => {
   formRef.value?.clearValidate('barCode')
 }
 
-const handleRegenerateCode = async () => {
+const getQrcodeRefreshUrl = () => {
-  if (!formData.value.id || !formData.value.barCode) return
+  if (!formData.value.id || !formData.value.barCode) return ''
-  regenerateCodeLoading.value = true
+  return `/erp/product/regenerate-code?id=${formData.value.id}&code=${encodeURIComponent(String(formData.value.barCode))}`
-  try {
-    const data = await ProductApi.regenerateCode(formData.value.id, formData.value.barCode)
-    if (data?.qrcodeUrl) {
-      formData.value.qrcodeUrl = data.qrcodeUrl
-    } else {
-      const productData = await ProductApi.getProduct(formData.value.id)
-      formData.value.qrcodeUrl = productData?.qrcodeUrl
-      formData.value.barCode = productData?.barCode ?? formData.value.barCode
-    }
-    message.success(t('common.updateSuccess'))
-  } finally {
-    regenerateCodeLoading.value = false
-  }
 }
 
-const handlePreviewQrcode = () => {
+const handleQrcodeRefreshSuccess = async (data: any) => {
-  if (!formData.value.qrcodeUrl) return
+  if (!formData.value.id) return
-  createImageViewer({
+  if (data?.qrcodeUrl) {
-    zIndex: 9999999,
+    formData.value.qrcodeUrl = data.qrcodeUrl
-    urlList: [formData.value.qrcodeUrl]
+    return
-  })
+  }
+  const productData = await ProductApi.getProduct(formData.value.id)
+  formData.value.qrcodeUrl = productData?.qrcodeUrl
+  formData.value.barCode = productData?.barCode ?? formData.value.barCode
 }
 
 /** 提交表单 */
@@ -348,48 +311,4 @@ const resetForm = () => {
   formRef.value?.resetFields()
 }
 </script>
-<style scoped lang="scss">
+<style scoped lang="scss"></style>
-.product-form-qrcode-wrap {
-  position: relative;
-  height: 150px;
-  width: fit-content;
-  min-width: 150px;
-  border-radius: 10px;
-  overflow: hidden;
-  border: 1px solid var(--el-border-color-lighter);
-  background: var(--el-fill-color-blank);
-}
-
-.product-form-qrcode-img {
-  height: 150px;
-  width: auto;
-  display: block;
-}
-
-.product-form-qrcode-error {
-  height: 150px;
-  min-width: 150px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--el-text-color-secondary);
-  font-size: 12px;
-  padding: 0 12px;
-}
-
-.product-form-qrcode-mask {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-  background: rgba(0, 0, 0, 0.35);
-  opacity: 0;
-  transition: opacity 0.2s ease;
-}
-
-.product-form-qrcode-wrap:hover .product-form-qrcode-mask {
-  opacity: 1;
-}
-</style>