yh-hiprint 2.5.0 → 2.5.2

package/HiprintDesigner.vue

@@ -766,6 +766,7 @@ function tableColumnCancel() {
 function init() {
   try {
     hiprint.init({
+      host: 'http://localhost:17521',
       providers: [new defaultElementTypeProvider()],
     });
     hiprint.setConfig();

package/README.md

@@ -1,6 +1,6 @@
 ## yh-hiprint
 
-力控远海技术中心封装的 hiprint
+力控元海技术中心封装的 hiprint
 
 当前教程匹配 2+ 版本
 

package/hiprintPreview.vue

@@ -16,17 +16,26 @@ import {onMounted, ref} from 'vue';
 import {useRoute} from 'vue-router';
 import axios from '@/libs/api.request.js';
 import {hiprint} from 'yh-hiprint';
+import {getPrintTemplate} from 'yh-hiprint/libs/index.js';
 
 function getQuery() {
   let query = {};
   try {
-    decodeURIComponent(location.hash)
+    location.hash
       .split('?')[1]
       .split('&')
       .forEach((str) => {
         let index = str.indexOf('=');
         let key = str.substring(0, index);
-        let value = str.substring(index + 1);
+        let value = decodeURIComponent(str.substring(index + 1));
+        switch (key) {
+          case 'returnHtml':
+            value = value === '1';
+            break;
+          case 'isCustom':
+            value = value === '1';
+            break;
+        }
         query[key] = value;
       });
   } catch (error) {
@@ -62,77 +71,79 @@ let loading = ElLoading.service({
   text: '正在加载数据……',
 });
 
-function getData(query) {
-  let {code, params, data, isCustom} = query;
+async function getData(query) {
+  let {code, params, data, isCustom, returnHtml} = query;
   loading.setText('获取打印配置和数据');
   let reqParams = params ? JSON.parse(params) : [];
-
-  axios
-    .request({
-      url: `/printTemplate/data/${code}`,
-      method: 'post',
-      type: 'json',
-      data: reqParams,
-    })
-    .then(async (res) => {
-      loading.setText('格式化数据，初始化打印插件');
-      let {list, json} = res.data;
-      if (json) {
-        let hasData = false;
-        if (Array.isArray(list) && list.length > 0) {
-          list = list.map((item, index) => {
-            let printData = {};
-            let datas = Object.entries(item);
-            datas.forEach((arr) => {
-              if (Array.isArray(arr[1])) {
-                hasData = arr[1].length > 0;
-                printData[arr[0]] = arr[1];
-              } else {
-                if (arr[1] !== null) {
-                  hasData = true;
-                  let itemsEntries = Object.entries(arr[1]);
-                  itemsEntries.forEach((cArr) => {
-                    printData[`$${arr[0]}[${cArr[0]}]`] = cArr[1];
-                  });
-                }
-              }
-            });
-            return printData;
-          });
-        } else {
-          list = [];
-        }
-        let hiprintTemplate = new hiprint.PrintTemplate({template: JSON.parse(json)});
-        // 如若有本地数据，那么将本地数据替换远端数据。传入预览中。
-        if (isCustom === '1') {
-          await ElMessageBox.prompt('在下面输入框中输入您给的自定义数据', '自定义数据', {
-            inputType: 'textarea',
-            inputValue: localStorage.hiprintCustomValue || null,
-          }).then((e) => {
-            try {
-              hasData = true;
-              localStorage.hiprintCustomValue = e.value;
-              list = JSON.parse(e.value);
-            } catch (error) {
-              try {
+  try {
+    let res = await getPrintTemplate(code, reqParams);
+    loading.setText('格式化数据，初始化打印插件');
+    let {list, json} = res.data;
+    if (json) {
+      let hasData = false;
+      if (Array.isArray(list) && list.length > 0) {
+        list = list.map((item, index) => {
+          let printData = {};
+          let datas = Object.entries(item);
+          datas.forEach((arr) => {
+            if (Array.isArray(arr[1])) {
+              hasData = arr[1].length > 0;
+              printData[arr[0]] = arr[1];
+            } else {
+              if (arr[1] !== null) {
                 hasData = true;
-                list = JSON.parse(data);
-              } catch (error) {
-                hasData = false;
-                list = [];
+                let itemsEntries = Object.entries(arr[1]);
+                itemsEntries.forEach((cArr) => {
+                  printData[`$${arr[0]}[${cArr[0]}]`] = cArr[1];
+                });
               }
             }
           });
-        } else if (data) {
+          return printData;
+        });
+      } else {
+        list = [];
+      }
+      let hiprintTemplate = new hiprint.PrintTemplate({template: JSON.parse(json)});
+      // 如若有本地数据，那么将本地数据替换远端数据。传入预览中。
+      if (isCustom === '1') {
+        await ElMessageBox.prompt('在下面输入框中输入您给的自定义数据', '自定义数据', {
+          inputType: 'textarea',
+          inputValue: localStorage.hiprintCustomValue || null,
+        }).then((e) => {
           try {
             hasData = true;
-            list = JSON.parse(data);
+            localStorage.hiprintCustomValue = e.value;
+            list = JSON.parse(e.value);
           } catch (error) {
-            hasData = false;
-            list = [];
+            try {
+              hasData = true;
+              list = JSON.parse(data);
+            } catch (error) {
+              hasData = false;
+              list = [];
+            }
           }
+        });
+      } else if (data) {
+        try {
+          hasData = true;
+          list = JSON.parse(data);
+        } catch (error) {
+          hasData = false;
+          list = [];
         }
-        let html = hiprintTemplate.getHtml(list);
+      }
+      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) {
@@ -144,18 +155,17 @@ function getData(query) {
             window.close();
           });
         }
-        success.value = false;
-      } else {
-        error.value = true;
       }
-    })
-    .catch((err) => {
-      console.error(err);
+      success.value = false;
+    } else {
       error.value = true;
-    })
-    .finally(() => {
-      loading.close();
-    });
+    }
+  } catch (error) {
+    console.error(error);
+    error.value = true;
+  } finally {
+    loading.close();
+  }
 }
 </script>
 <style lang="scss"></style>

package/hooks/useHiprint.js

@@ -1,17 +1,16 @@
-import { hiprint as h, defaultElementTypeProvider as p } from "../libs/hiprint.bundle.js";
+import {hiprint as h, defaultElementTypeProvider as p} from '../libs/hiprint.bundle.js';
 // 调用浏览器打印js
-import "../libs/plugins/jquery.hiwprint.js";
+import '../libs/plugins/jquery.hiwprint.js';
 // 默认配置
-import "../libs/hiprint.config.js";
+import '../libs/hiprint.config.js';
 // 样式
-import "../libs/css/hiprint.css";
-import "../libs/css/print-lock.css";
-import { ref, computed, watch, reactive, nextTick } from "vue";
+import '../libs/css/hiprint.css';
+import {ref, computed, watch, reactive, nextTick} from 'vue';
 
 export const hiprint = h;
 export const defaultElementTypeProvider = p;
 
-export function print (provider = defaultElementTypeProvider, template, ...args) {
+export function print(provider = defaultElementTypeProvider, template, ...args) {
   hiprint.init({
     providers: [new provider()],
   });
@@ -22,7 +21,7 @@ export function print (provider = defaultElementTypeProvider, template, ...args)
   return hiprintTemplate;
 }
 
-export function print2 (provider = defaultElementTypeProvider, template, ...args) {
+export function print2(provider = defaultElementTypeProvider, template, ...args) {
   hiprint.init({
     providers: [new provider()],
   });
@@ -33,26 +32,26 @@ export function print2 (provider = defaultElementTypeProvider, template, ...args
   return hiprintTemplate;
 }
 
-export function usePaper () {
-  const paperType = ref("A4");
+export function usePaper() {
+  const paperType = ref('A4');
   const paperTypeName = computed(() => {
     const paperTypeObj = paperTypesObj.find((item) => item.value === paperType.value);
     if (paperTypeObj) {
       return paperTypeObj.label;
     } else {
-      return "自定义";
+      return '自定义';
     }
   });
   const paperWidth = ref(210);
   const paperHeight = ref(296.6);
 
   const paperTypesObj = reactive([
-    { label: "A3", value: "A3" },
-    { label: "A4", value: "A4" },
-    { label: "A5", value: "A5" },
-    { label: "B3", value: "B3" },
-    { label: "B4", value: "B4" },
-    { label: "B5", value: "B5" },
+    {label: 'A3', value: 'A3'},
+    {label: 'A4', value: 'A4'},
+    {label: 'A5', value: 'A5'},
+    {label: 'B3', value: 'B3'},
+    {label: 'B4', value: 'B4'},
+    {label: 'B5', value: 'B5'},
   ]);
 
   const paperTypes = {
@@ -82,9 +81,9 @@ export function usePaper () {
     },
   };
 
-  function setPaper (type, callback) {
-    if (type !== "other") {
-      let { width, height } = paperTypes[type];
+  function setPaper(type, callback) {
+    if (type !== 'other') {
+      let {width, height} = paperTypes[type];
       paperWidth.value = width;
       paperHeight.value = height;
     }
@@ -94,19 +93,19 @@ export function usePaper () {
   watch([paperWidth, paperHeight], ([width, height], [oldW, oldH]) => {
     nextTick(() => {
       if (width === 420 && height === 297) {
-        paperType.value = "A3";
+        paperType.value = 'A3';
       } else if (width === 210 && height === 297) {
-        paperType.value = "A4";
+        paperType.value = 'A4';
       } else if (width === 210 && height === 148) {
-        paperType.value = "A5";
+        paperType.value = 'A5';
       } else if (width === 500 && height === 353) {
-        paperType.value = "B3";
+        paperType.value = 'B3';
       } else if (width === 250 && height === 353) {
-        paperType.value = "B4";
+        paperType.value = 'B4';
       } else if (width === 250 && height === 176) {
-        paperType.value = "B5";
+        paperType.value = 'B5';
       } else {
-        paperType.value = "other";
+        paperType.value = 'other';
       }
     });
   });
@@ -121,7 +120,7 @@ export function usePaper () {
   };
 }
 
-export function useScale (callback) {
+export function useScale(callback) {
   const scaleValue = ref(1);
   const scalePercentage = computed(() => {
     return `${(scaleValue.value * 100).toFixed(0)}%`;
@@ -132,11 +131,11 @@ export function useScale (callback) {
   const canZoomOut = computed(() => {
     return scaleValue.value < 4;
   });
-  function zoomIn () {
+  function zoomIn() {
     scaleValue.value = scaleValue.value - 0.1;
     callback();
   }
-  function zoomOut () {
+  function zoomOut() {
     scaleValue.value = scaleValue.value + 0.1;
     callback();
   }
@@ -150,22 +149,22 @@ export function useScale (callback) {
   };
 }
 
-export function useDataSource (axios) {
+export function useDataSource(axios) {
   const detailData = ref();
-  function getDetail (id) {
+  function getDetail(id) {
     return axios
       .request({
         url: `/printTemplate/get/${id}`,
-        method: "post",
+        method: 'post',
       })
       .then((res) => {
         if (res.data.data && res.data.data.sourceCodes) {
-          let codes = res.data.data.sourceCodes.split(",");
+          let codes = res.data.data.sourceCodes.split(',');
           let formListCode = dataSourceForm.value.map((item) => item.value);
           codes = codes.filter((item) => formListCode.includes(item));
           formCode.value = codes;
         } else {
-          formCode.value = "";
+          formCode.value = '';
         }
         detailData.value = res.data.data;
         return Promise.resolve(res.data.data);
@@ -175,7 +174,7 @@ export function useDataSource (axios) {
   const dataSourceList = ref([]);
   const listColumns = computed(() => {
     return codeMapDataSource.value[listCode.value].map((item) => {
-      let index = item.indexOf("[");
+      let index = item.indexOf('[');
       return item.substring(index + 1, item.length - 1);
     });
   });
@@ -192,18 +191,18 @@ export function useDataSource (axios) {
   });
   const dataSourceForm = ref([]);
   const codeMapDataSource = ref({});
-  function getDataSourceList () {
+  function getDataSourceList() {
     return axios
       .request({
-        url: "/printTemplate/getDsList",
-        method: "post",
+        url: '/printTemplate/getDsList',
+        method: 'post',
       })
       .then((res) => {
         res.data.list.forEach((item) => {
           if (item.columns) {
-            codeMapDataSource.value[item.code] = item?.columns?.split(",")?.map((col) => `$${item.code}[${col.toUpperCase()}]`) || [];
+            codeMapDataSource.value[item.code] = item?.columns?.split(',')?.map((col) => `$${item.code}[${col.toUpperCase()}]`) || [];
           }
-          if (item.type === "LIST") {
+          if (item.type === 'LIST') {
             dataSourceList.value.push({
               label: item.name,
               value: item.code,

package/index.js

@@ -1,63 +1,125 @@
-import "./libs/jquery";
-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 './libs/jquery';
+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';
 
 export function cLog (string, isError = false) {
   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 hiprint = ({ code, params, data, isCustom }) => {
+const hiprintFun = async ({ code, params, data, isCustom, returnHtml }) => {
   let height = document.documentElement.clientHeight;
-  let width = (document.documentElement.clientWidth - 1200) / 2;
+  let width = 1200;
+  let left = (document.documentElement.clientWidth - 1200) / 2;
   // 转换数组
   let paramData = params;
   if (!Array.isArray(params)) {
     paramData = [params];
   }
-  let url = "/hiprint/#/preview?code=" + code;
+  let url = '/hiprint/#/preview?code=' + encodeURIComponent(code);
   if (params) {
-    url += `&params=${JSON.stringify(paramData)}`;
+    url += `&params=${encodeURIComponent(JSON.stringify(paramData))}`;
   }
   if (data) {
-    url += `&data=${JSON.stringify(data)}`;
+    url += `&data=${encodeURIComponent(JSON.stringify(data))}`;
   }
   if (isCustom) {
-    url += `&isCustom=${isCustom ? "1" : "0"}`;
+    url += `&isCustom=${isCustom ? '1' : '0'}`;
   }
-  let windowOpen = window.open(url, "hiprintWindow", `height=${height}, width=1200, top=20, left=${width}, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no`);
+  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 }) => {
+  if (!code || !data) {
+    ElMessageBox.alert("请正确的传递模板编号和打印数据", '提示');
+    return false;
+  }
+  let loading = null;
+  try {
+    loading = ElLoading.service({
+      text: "正在获取打印模板"
+    });
+    let res = 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);
+      if (html[0]) {
+        return html[0].innerHTML;
+      } else {
+        ElMessageBox.alert("打印内容渲染失败", '提示');
+      }
+    } else {
+      ElMessageBox.alert(res.message || "获取打印模板失败", '提示');
+    }
+  } catch (error) {
+    if (loading) {
+      loading.close();
+      loading = null;
+    }
+    console.error(error);
+  } finally {
+    if (loading) {
+      loading.close();
+      loading = null;
+    }
+  }
+
+};
+
+window.silentHiprint = silentHiprint;
+
 export default {
   install (app, { router, pinia, isAdmin }) {
-    app.provide("$hiprint", hiprint);
+    app.provide('$hiprint', hiprintFun);
+    app.provide('$silentHiprint', silentHiprint);
     if (router) {
-      router.addRoute("Index", {
-        path: "hiprint/designer",
-        name: "打印设计器",
+      router.addRoute('Index', {
+        path: 'hiprint/designer',
+        name: '打印设计器',
         meta: {
-          icon: "md-planet",
-          title: "打印设计器",
+          icon: 'md-planet',
+          title: '打印设计器',
         },
-        component: () => import("yh-hiprint/HiprintDesigner.vue"),
+        component: () => import('yh-hiprint/HiprintDesigner.vue'),
       });
       router.addRoute({
-        path: "/preview",
-        name: "printView",
+        path: '/preview',
+        name: 'printView',
         meta: {
-          icon: "md-planet",
-          title: "printView",
+          icon: 'md-planet',
+          title: 'printView',
         },
-        component: () => import("yh-hiprint/hiprintPreview.vue"),
+        component: () => import('yh-hiprint/hiprintPreview.vue'),
       });
     } else {
       if (!router) {
-        cLog("没有传递 router 对象，所以无法将路由添加到应用中", true);
+        cLog('没有传递 router 对象，所以无法将路由添加到应用中', true);
       }
     }
   },