yh-hiprint 2.5.3 → 2.6.1

package/hiprintPreview.vue

@@ -134,26 +134,48 @@ async function getData(query) {
           list = [];
         }
       }
-      let html = hiprintTemplate.getHtml(list);
-      if (opener && returnHtml && html[0]) {
-        opener.postMessage({
-          type: 'sendPrintHTML',
-          data: html[0].innerHTML,
-        });
-        ElMessageBox.alert('渲染完成！确认后返回系统').then(() => {
-          window.close();
-        });
+
+      // 检查是否启用客户端打印
+      const useClientPrint = localStorage.getItem('useClientPrint') === 'true';
+
+      if (useClientPrint && hiprint.hiwebSocket.opened) {
+        // 使用客户端打印
+        loading.setText('正在连接打印客户端');
+
+        // 获取打印机列表
+        let printerList = hiprint.hiwebSocket.getPrinterList();
+        if (!printerList || printerList.length === 0) {
+          ElMessageBox.alert('未获取到打印机列表', '提示');
+          return;
+        }
+
+        loading.close();
+
+        // 显示打印机选择对话框
+        showPrinterSelectionDialog(printerList, hiprintTemplate, list);
       } else {
-        document.body.innerHTML = '';
-        document.body.appendChild(html[0]);
-        if (hasData) {
-          setTimeout(() => {
-            window.print();
-          }, 1000);
-        } else {
-          ElMessageBox.alert('数据源没有数据，打印将取消').then(() => {
+        // 默认浏览器打印
+        let html = hiprintTemplate.getHtml(list);
+        if (opener && returnHtml && html[0]) {
+          opener.postMessage({
+            type: 'sendPrintHTML',
+            data: html[0].innerHTML,
+          });
+          ElMessageBox.alert('渲染完成！确认后返回系统').then(() => {
             window.close();
           });
+        } else {
+          document.body.innerHTML = '';
+          document.body.appendChild(html[0]);
+          if (hasData) {
+            setTimeout(() => {
+              window.print();
+            }, 1000);
+          } else {
+            ElMessageBox.alert('数据源没有数据，打印将取消').then(() => {
+              window.close();
+            });
+          }
         }
       }
       success.value = false;
@@ -164,7 +186,9 @@ async function getData(query) {
     console.error(error);
     error.value = true;
   } finally {
-    loading.close();
+    if (loading) {
+      loading.close();
+    }
   }
 }
 </script>

package/index.js

@@ -1,12 +1,12 @@
-// @ts-check
 import './libs/jquery';
+import { ElDialog, ElSelect, ElOption, ElButton, ElMessageBox, ElLoading } from 'element-plus';
 export { hiprint, defaultElementTypeProvider, print, print2, usePaper, useScale, useDataSource } from './hooks/useHiprint';
 export { default as fontSize } from './font-size';
 export { default as scale } from './scale';
 export { default as zIndex } from './z-index';
 export { default as panel } from './panel';
 import { getPrintTemplate } from 'yh-hiprint/libs/index.js';
-import { ElMessageBox, ElLoading } from 'element-plus';
+import { createVNode, render, createApp } from 'vue';
 
 export function cLog (string, isError = false) {
   if (isError) {
@@ -17,42 +17,46 @@ export function cLog (string, isError = false) {
 }
 
 const hiprintFun = async ({ code, params, data, isCustom, returnHtml }) => {
-  let height = document.documentElement.clientHeight;
-  let width = 1200;
-  let left = (document.documentElement.clientWidth - 1200) / 2;
-  // 转换数组
-  let paramData = params;
-  if (!Array.isArray(params)) {
-    paramData = [params];
-  }
-  let url = '/hiprint/#/preview?code=' + encodeURIComponent(code);
-  if (params) {
-    url += `&params=${encodeURIComponent(JSON.stringify(paramData))}`;
-  }
-  if (data) {
-    url += `&data=${encodeURIComponent(JSON.stringify(data))}`;
-  }
-  if (isCustom) {
-    url += `&isCustom=${isCustom ? '1' : '0'}`;
-  }
-  if (returnHtml) {
-    url += `&returnHtml=${returnHtml ? '1' : '0'}`;
-  }
-  let windowOpen = window.open(url, 'hiprintWindow', `height=${height}, width=${width}, top=20, left=${left}, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no`);
-
-  return new Promise((resolve, reject) => {
-    if (!windowOpen) {
-      reject("预览窗口渲染失败！");
+  if (hiprint.hiwebSocket && hiprint.hiwebSocket.opened) {
+    clientPrintHandler(code, params, data);
+  } else {
+    let height = document.documentElement.clientHeight;
+    let width = 1200;
+    let left = (document.documentElement.clientWidth - 1200) / 2;
+    // 转换数组
+    let paramData = params;
+    if (!Array.isArray(params)) {
+      paramData = [params];
     }
-    function printHTMLHandler (e) {
-      let { type, data } = e.data;
-      if (type === "sendPrintHTML" && data) {
-        resolve(data);
-      }
-      window.removeEventListener('message', printHTMLHandler);
+    let url = '/hiprint/#/preview?code=' + encodeURIComponent(code);
+    if (params) {
+      url += `&params=${encodeURIComponent(JSON.stringify(paramData))}`;
     }
-    window.addEventListener('message', printHTMLHandler);
-  });
+    if (data) {
+      url += `&data=${encodeURIComponent(JSON.stringify(data))}`;
+    }
+    if (isCustom) {
+      url += `&isCustom=${isCustom ? '1' : '0'}`;
+    }
+    if (returnHtml) {
+      url += `&returnHtml=${returnHtml ? '1' : '0'}`;
+    }
+    let windowOpen = window.open(url, 'hiprintWindow', `height=${height}, width=${width}, top=20, left=${left}, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no`);
+
+    return new Promise((resolve, reject) => {
+      if (!windowOpen) {
+        reject("预览窗口渲染失败！");
+      }
+      function printHTMLHandler (e) {
+        let { type, data } = e.data;
+        if (type === "sendPrintHTML" && data) {
+          resolve(data);
+        }
+        window.removeEventListener('message', printHTMLHandler);
+      }
+      window.addEventListener('message', printHTMLHandler);
+    });
+  }
 };
 
 const silentHiprint = async ({ code, params = {}, data }) => {
@@ -90,15 +94,226 @@ const silentHiprint = async ({ code, params = {}, data }) => {
       loading = null;
     }
   }
-
 };
 
 window.silentHiprint = silentHiprint;
 
+// 客户端打印处理函数
+const clientPrintHandler = async (code, params, data) => {
+  let loading = null;
+  try {
+    loading = ElLoading.service({
+      text: "正在获取打印模板"
+    });
+    let reqParams = params ? JSON.parse(params) : [];
+    // 获取打印模板
+    let res = await getPrintTemplate(code, reqParams);
+    if (res.status !== 200 || !res.data || !res.data.json) {
+      ElMessageBox.alert(res.message || "获取打印模板失败", '提示');
+      return false;
+    }
+
+    loading.setText("正在连接打印客户端");
+
+    // 检查客户端是否连接
+    if (!hiprint.hiwebSocket.opened) {
+      loading?.close();
+      ElMessageBox.alert("打印客户端未连接", '提示');
+      return false;
+    }
+
+    // 获取打印机列表
+    let printerList = hiprint.hiwebSocket.getPrinterList();
+    if (!printerList || printerList.length === 0) {
+      loading?.close();
+      ElMessageBox.alert("未获取到打印机列表", '提示');
+      return false;
+    }
+
+    loading.close();
+    loading = null;
+
+    // 显示选择打印机的对话框
+    return await showPrinterSelectionDialog(printerList, res.data.json, res.data.list, res.data.name, data);
+  } catch (error) {
+    if (loading) {
+      loading.close();
+      loading = null;
+    }
+    console.error(error);
+    ElMessageBox.alert("客户端打印出错: " + error.message, '提示');
+    return false;
+  }
+};
+
+// 显示打印机选择对话框
+const showPrinterSelectionDialog = (printerList, templateJson, templateData, templateName, data) => {
+  return new Promise((resolve) => {
+    // 获取上次选择的打印机
+    const lastSelectedPrinter = localStorage.getItem('lastSelectedPrinter') || '';
+    // 创建挂载点
+    const mountPoint = document.createElement('div');
+    document.body.appendChild(mountPoint);
+
+    // 创建Vue组件
+    const PrinterSelectorComponent = {
+      components: {
+        ElDialog,
+        ElSelect,
+        ElOption,
+        ElButton
+      },
+      data () {
+        return {
+          visible: true,
+          selectedPrinter: lastSelectedPrinter,
+          printerList: printerList
+        };
+      },
+      methods: {
+        handlePrint: async function () {
+          if (!this.selectedPrinter) {
+            ElMessageBox.alert("请选择打印机", '提示');
+            return;
+          }
+          // 保存选择的打印机
+          localStorage.setItem('lastSelectedPrinter', this.selectedPrinter);
+
+          let loading = ElLoading.service({
+            text: "正在渲染打印内容"
+          });
+
+          try {
+            // 创建打印模板实例
+            let hiprintTemplate = new hiprint.PrintTemplate({ template: JSON.parse(templateJson) });
+
+            loading.setText("正在发送打印任务");
+
+            // 发送到客户端打印
+            hiprintTemplate.print2(data || templateData, {
+              printer: this.selectedPrinter,
+              title: templateName
+            });
+
+            // 监听打印结果
+            const printSuccessHandler = (result) => {
+              loading.close();
+              ElMessageBox.alert("打印任务已发送到打印机", '提示');
+              cleanup();
+              this.handleClose(true);
+            };
+
+            const printErrorHandler = (error) => {
+              loading.close();
+              ElMessageBox.alert("打印失败: " + (error.msg || "未知错误"), '提示');
+              cleanup();
+              this.handleClose(false);
+            };
+
+            // 注册事件监听器
+            hiprint.hiwebSocket.socket.on('success', printSuccessHandler);
+            hiprint.hiwebSocket.socket.on('error', printErrorHandler);
+
+            // 清理函数
+            const cleanup = () => {
+              hiprint.hiwebSocket.socket.off('success', printSuccessHandler);
+              hiprint.hiwebSocket.socket.off('error', printErrorHandler);
+            };
+
+          } catch (error) {
+            if (loading) {
+              loading.close();
+            }
+            console.error(error);
+            ElMessageBox.alert("打印过程中发生错误: " + error.message, '提示');
+            this.handleClose(false);
+          }
+        },
+        handleClose: function (result = false) {
+          this.visible = false;
+          // 延迟销毁，确保动画完成
+          setTimeout(() => {
+            app.unmount();
+            document.body.removeChild(mountPoint);
+            resolve(result);
+          }, 300);
+        }
+      },
+      render () {
+        return createVNode(ElDialog, {
+          modelValue: this.visible,
+          title: "选择打印机",
+          width: "500px",
+          onClose: () => this.handleClose(false),
+          onClosed: () => this.handleClose(false)
+        }, {
+          default: () => [
+            createVNode(ElSelect, {
+              modelValue: this.selectedPrinter,
+              "onUpdate:modelValue": (val) => { this.selectedPrinter = val; },
+              placeholder: "请选择打印机",
+              style: "width: 100%; margin-bottom: 15px;"
+            }, {
+              default: () => this.printerList.map(printer =>
+                createVNode(ElOption, {
+                  key: printer.name,
+                  label: printer.name,
+                  value: printer.name
+                })
+              )
+            })
+          ],
+          footer: () => [
+            createVNode("span", { class: "dialog-footer" }, [
+              createVNode(ElButton, {
+                onClick: () => this.handleClose(false)
+              }, {
+                default: () => "取消"
+              }),
+              createVNode(ElButton, {
+                type: "primary",
+                onClick: this.handlePrint
+              }, {
+                default: () => "打印"
+              })
+            ])
+          ]
+        });
+      }
+    };
+
+    // 创建应用实例
+    const app = createApp(PrinterSelectorComponent);
+
+    // 挂载应用
+    app.mount(mountPoint);
+  });
+};
+
+// window.silentHiprint = silentHiprint;
+
 export default {
-  install (app, { router, pinia, isAdmin }) {
+  install (app, { router, pinia, isAdmin, clientPrint = false, clientUrl = 'http://localhost:17521' }) {
     app.provide('$hiprint', hiprintFun);
     app.provide('$silentHiprint', silentHiprint);
+
+    // 如果启用了客户端打印，初始化连接
+    if (clientPrint) {
+      // 确保DOM加载完成后再启动连接
+      const initializeClientPrint = () => {
+        if (hiprint.hiwebSocket && !hiprint.hiwebSocket.opened) {
+          window.hiwebSocket.host = clientUrl;
+          hiprint.hiwebSocket.start();
+        }
+      };
+
+      if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', initializeClientPrint);
+      } else {
+        initializeClientPrint();
+      }
+    }
+
     if (router) {
       router.addRoute('Index', {
         path: 'hiprint/designer',
@@ -124,4 +339,4 @@ export default {
       }
     }
   },
-};
+};

package/libs/hiprint.bundle.js

@@ -8619,7 +8619,7 @@ var hiprint = (function (t) {
           return !0;
         },
         hasIo: function hasIo (t) {
-          return window.io;
+          return io;
         },
         send: function send (t) {
           try {
@@ -8670,7 +8670,7 @@ var hiprint = (function (t) {
           var t = this;
           window.WebSocket
             ? this.socket ||
-            ((this.socket = window.io(this.host, {
+            ((this.socket = io(this.host, {
               reconnectionAttempts: 5,
             })),
               this.socket.on('connect', function (e) {

package/libs/index.js

@@ -1,5 +1,5 @@
 import axios from '@/libs/api.request.js';
-export function getPrintTemplate(code, reqParams) {
+export function getPrintTemplate (code, reqParams) {
   return axios
     .request({
       url: `/printTemplate/data/${code}`,
@@ -11,3 +11,27 @@ export function getPrintTemplate(code, reqParams) {
       return res;
     });
 }
+
+// 获取打印机列表
+export function getPrinterList () {
+  // 从 hiprint 获取打印机列表
+  if (window.hiprint && window.hiprint.hiwebSocket) {
+    return window.hiprint.hiwebSocket.getPrinterList() || [];
+  }
+  return [];
+}
+
+// 刷新打印机列表
+export function refreshPrinterList () {
+  if (window.hiprint && window.hiprint.hiwebSocket) {
+    window.hiprint.hiwebSocket.refreshPrinterList();
+  }
+}
+
+// 检查客户端连接状态
+export function isClientConnected () {
+  if (window.hiprint && window.hiprint.hiwebSocket) {
+    return window.hiprint.hiwebSocket.opened || false;
+  }
+  return false;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yh-hiprint",
-  "version": "2.5.3",
+  "version": "2.6.1",
   "description": "Hiprint for Vue3 by NoahLiu in ForceCon in Hunan Changesha",
   "main": "index.js",
   "types": "index.d.ts",