yh-hiprint 2.6.13 → 2.6.14

package/{index.js → index.ts}

@@ -1,41 +1,114 @@
 import './libs/jquery';
-import { ElDialog, ElSelect, ElOption, ElButton, ElMessageBox, ElLoading } from 'element-plus';
-import { createApp, createVNode } from 'vue';
-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';
-
-export function guid () {
+import {
+  ElDialog,
+  ElSelect,
+  ElOption,
+  ElButton,
+  ElMessageBox,
+  ElLoading,
+  ElMessage,
+} from 'element-plus';
+import {createApp, createVNode} from 'vue';
+import {
+  hiprint,
+  defaultElementTypeProvider,
+  print,
+  print2,
+  usePaper,
+  useScale,
+  useDataSource,
+} from './hooks/useHiprint';
+export {hiprint, defaultElementTypeProvider, print, print2, usePaper, useScale, useDataSource};
+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 './libs/index.js';
+export {default as defaultPrintElement} from './store/defaultPrintElement';
+export {getPrintTemplate};
+
+export function guid(): string {
   return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (t) {
     var e = (16 * Math.random()) | 0;
     return ('x' == t ? e : (3 & e) | 8).toString(16);
   });
 }
 
-export function cLog (string, isError = false) {
+// 定义类型
+interface HiprintFunParams {
+  code: string;
+  params?: any;
+  data?: any;
+  isCustom?: boolean;
+  returnHtml?: boolean;
+}
+
+interface SilentHiprintParams {
+  code: string;
+  params?: any;
+  data?: any;
+}
+
+interface MessageEvent {
+  data: {
+    type: string;
+    data: any;
+  };
+}
+
+interface TemplateResponse {
+  status: number;
+  data?: {
+    json: string;
+  };
+  message?: string;
+}
+
+interface HiprintTemplate {
+  new (options: {template: any}): any;
+  getHtml(data: any): Array<{innerHTML: string}>;
+}
+
+interface CustomWindow extends Window {
+  silentHiprint: typeof silentHiprint;
+}
+
+export function cLog(string: string, isError: boolean = false): void {
   if (isError) {
-    console.error('%cyhHiprint：%c', 'font-size: 16px;font-weight: bold;color: #00ffff', 'font-size: 16px;font-weight: bold;color: #ccccc', string);
+    console.error(
+      '%cyhHiprint：%c',
+      'font-size: 16px;font-weight: bold;color: #00ffff',
+      'font-size: 16px;font-weight: bold;color: #ccccc',
+      string
+    );
   } else {
-    console.log('%cyhHiprint%c ' + string, 'font-size: 18px;font-weight: bold;color: #61AFEF', 'font-size: 12px;color: #999');
+    console.log(
+      '%cyhHiprint%c ' + string,
+      'font-size: 18px;font-weight: bold;color: #61AFEF',
+      'font-size: 12px;color: #999'
+    );
   }
 }
 
-const hiprintFun = async ({ code, params, data, isCustom, returnHtml }) => {
+const hiprintFun = async ({
+  code,
+  params,
+  data,
+  isCustom,
+  returnHtml,
+}: HiprintFunParams): Promise<any> => {
   if (window.electronBrowserAPI && window.electronBrowserAPI.print) {
-    clientPrintHandler(code, params, data);
+    return clientPrintHandler(code, params, data);
   } else {
-    let height = document.documentElement.clientHeight;
-    let width = 1200;
-    let left = (document.documentElement.clientWidth - 1200) / 2;
+    const height: number = document.documentElement.clientHeight;
+    const width: number = 1200;
+    const left: number = (document.documentElement.clientWidth - 1200) / 2;
     // 转换数组
-    let paramData = params;
+    let paramData: any = params;
     if (!Array.isArray(params)) {
       paramData = [params];
     }
-    let url = '/hiprint/#/preview?code=' + encodeURIComponent(code);
+    let url: string = '/hiprint/#/preview?code=' + encodeURIComponent(code);
     if (params) {
       url += `&params=${encodeURIComponent(JSON.stringify(paramData))}`;
     }
@@ -48,15 +121,20 @@ const hiprintFun = async ({ code, params, data, isCustom, returnHtml }) => {
     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`);
+    const 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("预览窗口渲染失败！");
+        reject('预览窗口渲染失败！');
+        return;
       }
-      function printHTMLHandler (e) {
-        let { type, data } = e.data;
-        if (type === "sendPrintHTML" && data) {
+      function printHTMLHandler(e: MessageEvent): void {
+        const {type, data} = e.data;
+        if (type === 'sendPrintHTML' && data) {
           resolve(data);
         }
         window.removeEventListener('message', printHTMLHandler);
@@ -66,28 +144,34 @@ const hiprintFun = async ({ code, params, data, isCustom, returnHtml }) => {
   }
 };
 
-const silentHiprint = async ({ code, params = {}, data }) => {
+const silentHiprint = async ({
+  code,
+  params = {},
+  data,
+}: SilentHiprintParams): Promise<string | boolean> => {
   if (!code || !data) {
-    ElMessageBox.alert("请正确的传递模板编号和打印数据", '提示');
+    ElMessageBox.alert('请正确的传递模板编号和打印数据', '提示');
     return false;
   }
-  let loading = null;
+  let loading: any = null;
   try {
     loading = ElLoading.service({
-      text: "正在获取打印模板"
+      text: '正在获取打印模板',
     });
-    let res = await getPrintTemplate(code, params);
+    const res: TemplateResponse = await getPrintTemplate(code, params);
     if (res.status === 200 && res.data && res.data.json) {
-      let json = res.data.json;
-      let hiprintTemplate = new hiprint.PrintTemplate({ template: JSON.parse(json) });
-      let html = hiprintTemplate.getHtml(data);
+      const json: string = res.data.json;
+      const hiprintTemplate: HiprintTemplate = new (hiprint as any).PrintTemplate({
+        template: JSON.parse(json),
+      });
+      const html: Array<{innerHTML: string}> = hiprintTemplate.getHtml(data);
       if (html[0]) {
         return html[0].innerHTML;
       } else {
-        ElMessageBox.alert("打印内容渲染失败", '提示');
+        ElMessageBox.alert('打印内容渲染失败', '提示');
       }
     } else {
-      ElMessageBox.alert(res.message || "获取打印模板失败", '提示');
+      ElMessageBox.alert(res.message || '获取打印模板失败', '提示');
     }
   } catch (error) {
     if (loading) {
@@ -101,16 +185,23 @@ const silentHiprint = async ({ code, params = {}, data }) => {
       loading = null;
     }
   }
+  return false;
 };
 
-window.silentHiprint = silentHiprint;
+(window as unknown as CustomWindow).silentHiprint = silentHiprint;
+
+interface InstallOptions {
+  router?: any;
+  pinia?: any;
+  isAdmin?: boolean;
+}
 
 // 客户端打印处理函数
 const clientPrintHandler = async (code, params, data) => {
   let loading = null;
   try {
     loading = ElLoading.service({
-      text: "正在获取打印模板"
+      text: '正在获取打印模板',
     });
     let reqParams = [];
     try {
@@ -121,17 +212,17 @@ const clientPrintHandler = async (code, params, data) => {
     // 获取打印模板
     let res = await getPrintTemplate(code, reqParams);
     if (res.status !== 200 || !res.data || !res.data.json) {
-      ElMessageBox.alert(res.message || "获取打印模板失败", '提示');
+      ElMessageBox.alert(res.message || '获取打印模板失败', '提示');
       return false;
     }
 
-    loading.setText("正在连接打印客户端");
+    loading.setText('正在连接打印客户端');
 
     // 获取打印机列表
     let printerList = await electronBrowserAPI.getPrinterList();
     if (!printerList || printerList.length === 0) {
       loading?.close();
-      ElMessageBox.alert("未获取到打印机列表", '提示');
+      ElMessageBox.alert('未获取到打印机列表', '提示');
       return false;
     }
 
@@ -139,20 +230,32 @@ const clientPrintHandler = async (code, params, data) => {
     loading = null;
 
     // 显示选择打印机的对话框
-    return await showPrinterSelectionDialog(printerList, res.data.json, res.data.list, res.data.name, data);
+    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, '提示');
+    ElMessageBox.alert('客户端打印出错: ' + error.message, '提示');
     return false;
   }
 };
 
 // 显示打印机选择对话框
-const showPrinterSelectionDialog = (printerList, templateJson, templateData, templateName, data) => {
+const showPrinterSelectionDialog = (
+  printerList,
+  templateJson,
+  templateData,
+  templateName,
+  data
+) => {
   return new Promise((resolve) => {
     // 获取上次选择的打印机
     const lastSelectedPrinter = localStorage.getItem('lastSelectedPrinter') || '';
@@ -177,33 +280,33 @@ const showPrinterSelectionDialog = (printerList, templateJson, templateData, tem
         ElDialog,
         ElSelect,
         ElOption,
-        ElButton
+        ElButton,
       },
-      data () {
+      data() {
         return {
           visible: true,
           selectedPrinter: lastSelectedPrinter,
-          printerList: printerList
+          printerList: printerList,
         };
       },
       methods: {
         handlePrint: async function () {
           if (!this.selectedPrinter) {
-            ElMessageBox.alert("请选择打印机", '提示');
+            ElMessageBox.alert('请选择打印机', '提示');
             return;
           }
           // 保存选择的打印机
           localStorage.setItem('lastSelectedPrinter', this.selectedPrinter);
 
           let loading = ElLoading.service({
-            text: "正在渲染打印内容"
+            text: '正在渲染打印内容',
           });
 
           try {
             // 创建打印模板实例
-            let hiprintTemplate = new hiprint.PrintTemplate({ template: json });
+            let hiprintTemplate = new hiprint.PrintTemplate({template: json});
 
-            loading.setText("正在发送打印任务");
+            loading.setText('正在发送打印任务');
             const newGuid = guid();
             const printOption = {
               printer: this.selectedPrinter,
@@ -213,8 +316,8 @@ const showPrinterSelectionDialog = (printerList, templateJson, templateData, tem
               templateId: newGuid,
               pageSize: {
                 width: (json?.panels[0]?.width || 210) * 1000,
-                height: (json?.panels[0]?.height || 297) * 1000
-              }
+                height: (json?.panels[0]?.height || 297) * 1000,
+              },
             };
             const pCss = `<style rel="stylesheet" type="text/css">${printCss}</style>`;
             const html = hiprintTemplate.getHtml(data || templateData, printOption)[0].outerHTML;
@@ -228,7 +331,7 @@ const showPrinterSelectionDialog = (printerList, templateJson, templateData, tem
                   case 'PRINT_SUCCESS':
                     loading.close();
                     this.handleClose(true);
-                    ElMessage.success("打印任务已发送到打印机");
+                    ElMessage.success('打印任务已发送到打印机');
                     // 移除事件监听器
                     window.removeEventListener('message', handlePrintResult);
                     clearTimeout(timeoutId);
@@ -236,7 +339,7 @@ const showPrinterSelectionDialog = (printerList, templateJson, templateData, tem
                   case 'PRINT_ERROR':
                     loading.close();
                     const error = event.data.data;
-                    ElMessageBox.alert("打印失败: " + (error.msg || "未知错误"), '提示');
+                    ElMessageBox.alert('打印失败: ' + (error.msg || '未知错误'), '提示');
                     this.handleClose(false);
                     // 移除事件监听器
                     window.removeEventListener('message', handlePrintResult);
@@ -255,7 +358,7 @@ const showPrinterSelectionDialog = (printerList, templateJson, templateData, tem
             const timeoutId = setTimeout(() => {
               window.removeEventListener('message', handlePrintResult);
               loading.close();
-              ElMessageBox.alert("打印超时", '提示');
+              ElMessageBox.alert('打印超时', '提示');
               this.handleClose(false);
             }, 60 * 1000); // 30秒超时
 
@@ -267,17 +370,15 @@ const showPrinterSelectionDialog = (printerList, templateJson, templateData, tem
               loading.close();
               window.removeEventListener('message', handlePrintResult);
               clearTimeout(timeoutId);
-              ElMessageBox.alert("客户端打印发送失败: " + error.message, '提示');
+              ElMessageBox.alert('客户端打印发送失败: ' + error.message, '提示');
               this.handleClose(false);
             }
-
-
           } catch (error) {
             if (loading) {
               loading.close();
             }
             console.error(error);
-            ElMessageBox.alert("打印过程中发生错误: " + error.message, '提示');
+            ElMessageBox.alert('打印过程中发生错误: ' + error.message, '提示');
             this.handleClose(false);
           }
         },
@@ -287,49 +388,68 @@ const showPrinterSelectionDialog = (printerList, templateJson, templateData, tem
           app.unmount();
           document.body.removeChild(mountPoint);
           resolve(result);
-        }
+        },
+      },
+      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: () => '打印',
+                  }
+                ),
+              ]),
+            ],
+          }
+        );
       },
-      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: () => "打印"
-              })
-            ])
-          ]
-        });
-      }
     };
 
     // 创建应用实例
@@ -342,12 +462,29 @@ const showPrinterSelectionDialog = (printerList, templateJson, templateData, tem
 
 // window.silentHiprint = silentHiprint;
 
+// 添加必要的类型定义
+interface ElectronBrowserAPI {
+  print: (options: any) => void;
+  getPrinterList: () => Promise<any[]>;
+}
+
+declare global {
+  interface Window {
+    electronBrowserAPI?: ElectronBrowserAPI;
+  }
+}
+
+// 导入打印样式
+import printCss from './libs/css/hiprint.css?inline';
+
 export default {
-  install (app, { router, pinia, isAdmin, clientPrint = false }) {
+  install(
+    app: any,
+    {router, pinia, isAdmin, clientPrint = false}: InstallOptions & {clientPrint?: boolean}
+  ): void {
     app.provide('$hiprint', hiprintFun);
     app.provide('$silentHiprint', silentHiprint);
 
-
     if (router) {
       router.addRoute('Index', {
         path: 'hiprint/designer',
@@ -356,7 +493,7 @@ export default {
           icon: 'md-planet',
           title: '打印设计器',
         },
-        component: () => import('yh-hiprint/HiprintDesigner.vue'),
+        component: () => import('./HiprintDesigner.vue'),
       });
       router.addRoute({
         path: '/preview',
@@ -365,7 +502,7 @@ export default {
           icon: 'md-planet',
           title: 'printView',
         },
-        component: () => import('yh-hiprint/hiprintPreview.vue'),
+        component: () => import('./hiprintPreview.vue'),
       });
     } else {
       if (!router) {
@@ -373,4 +510,4 @@ export default {
       }
     }
   },
-};
+};

package/libs/index.js

@@ -1,6 +1,6 @@
-import axios from '@/libs/api.request.js';
+import http from '@/libs/api.request';
 export function getPrintTemplate (code, reqParams) {
-  return axios
+  return http
     .request({
       url: `/printTemplate/data/${code}`,
       method: 'post',

package/libs/previewHiprint.ts

@@ -0,0 +1,55 @@
+// @ts-ignore
+import axios from '@/libs/api.request';
+import {ElMessage, ElMessageBox} from 'element-plus';
+import {hiprint} from 'yh-hiprint';
+
+export default async function (code) {
+  let {
+    data: {list, json},
+  } = await axios.request({
+    url: `/printTemplate/data/${code}`,
+    method: 'post',
+    type: 'json',
+    data: [
+      {
+        code: '50101820',
+      },
+    ],
+  });
+  if (json) {
+    if (Array.isArray(list) && list.length > 0) {
+      list = list.map((item) => {
+        let printData = {};
+        let datas = Object.entries(item);
+        datas.forEach((arr) => {
+          if (Array.isArray(arr[1])) {
+            printData[arr[0]] = arr[1];
+          } else {
+            if (arr[1] !== null && arr[1] !== undefined) {
+              let itemsEntries = Object.entries(arr[1]);
+              itemsEntries.forEach((cArr) => {
+                printData[`$${arr[0]}[${cArr[0]}]`] = cArr[1];
+              });
+            }
+          }
+        });
+        return printData;
+      });
+    } else {
+      list = [];
+    }
+    const htmlStr = new hiprint.PrintTemplate({template: JSON.parse(json)}).getHtml(list)[0].innerHTML;
+    ElMessageBox.alert(htmlStr, '打印预览', {
+      customClass: 'print-preview-dialog',
+      dangerouslyUseHTMLString: true,
+      closeOnClickModal: true,
+      closeOnPressEscape: true,
+      closeOnHashChange: true,
+      showConfirmButton: false,
+    });
+  } else {
+    ElMessage.warning({
+      message: '模板配置不存在，请检查',
+    });
+  }
+}

package/package.json

@@ -1,9 +1,14 @@
 {
   "name": "yh-hiprint",
-  "version": "2.6.13",
+  "version": "2.6.14",
   "description": "Hiprint for Vue3 by NoahLiu in ForceCon in Hunan Changesha",
-  "main": "index.js",
-  "types": "index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./index.ts",
+      "types": "./index.ts"
+    }
+  },
   "scripts": {
     "start": "npm run pub:aliyun && npm run pub:npm",
     "pub:aliyun": "npm publish --registry https://packages.aliyun.com/60765e0161a945067837bb5f/npm/npm-registry/ --tag latest --no-git-checks",
@@ -17,7 +22,8 @@
     "nzh": "1.0.9"
   },
   "peerDependencies": {
-    "vue": "^3.0.0"
+    "vue": "^3.5.0",
+    "element-plus": "^2.9.0"
   },
   "author": "Liubin"
 }