yh-hiprint 1.0.10 → 2.0.0

package/hiprint.js

@@ -0,0 +1,35 @@
+import { createApp } from "vue";
+import { createRouter, createWebHashHistory } from "vue-router";
+import { setTitle } from "@/libs/util";
+import "element-plus/dist/index.css";
+
+import App from "./hiprint.vue";
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes: [
+    {
+      path: "/",
+      redirect: "/preview",
+    },
+    {
+      path: "/preview",
+      name: "printView",
+      meta: {
+        title: "打印",
+      },
+      component: () => import("yh-hiprint/hiprintPreview.vue"),
+    },
+  ],
+});
+
+router.beforeEach((to, from, next) => {
+  next();
+});
+
+router.afterEach((to) => {
+  setTitle(to);
+  window.scrollTo(0, 0);
+});
+const app = createApp(App);
+app.use(router);
+app.mount("#app");

package/hiprint.vue

@@ -0,0 +1,13 @@
+<template>
+  <router-view></router-view>
+</template>
+<script setup></script>
+<style lang="scss">
+html,
+body,
+#app {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+}
+</style>

package/hiprintPreview.vue

@@ -0,0 +1,108 @@
+<template>
+  <el-result
+    v-if="success"
+    icon="success"
+    title="成功"
+    sub-title="已成功调用系统打印"></el-result>
+  <el-result
+    v-if="error"
+    icon="error"
+    title="错误"
+    sub-title="请求参数或者返回数据错误"></el-result>
+</template>
+<script setup>
+import { ElLoading, ElResult } from "element-plus";
+import { onMounted, ref } from "vue";
+import { useRoute } from "vue-router";
+import axios from "@/libs/api.request.js";
+import { hiprint } from "yh-hiprint";
+
+onMounted(() => {
+  let query = route.query;
+  if (query.code) {
+    sessionStorage.printQuery = JSON.stringify(query);
+    getData(query);
+  } else {
+    if (sessionStorage.printQuery) {
+      query = JSON.parse(sessionStorage.printQuery);
+      getData(query);
+    } else {
+      loading.close();
+      error.value = true;
+    }
+  }
+});
+
+const route = useRoute();
+const success = ref(false);
+const error = ref(false);
+
+let loading = ElLoading.service({
+  text: "正在加载数据……",
+});
+
+function getData(query) {
+  let { code, params } = query;
+  loading.setText("获取打印配置和数据");
+  let reqParams = JSON.parse(params);
+
+  axios
+    .request({
+      url: `/printTemplate/data/${code}`,
+      method: "post",
+      type: "json",
+      data: reqParams,
+    })
+    .then((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 reqData = reqParams[index];
+            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) });
+        let html = hiprintTemplate.getHtml(list);
+        document.body.innerHTML = "";
+        document.body.appendChild(html[0]);
+        if (hasData) {
+          setTimeout(() => {
+            window.print();
+          }, 1000);
+        }
+        success.value = false;
+      } else {
+        error.value = true;
+      }
+    })
+    .catch((err) => {
+      console.error(err);
+      error.value = true;
+    })
+    .finally(() => {
+      loading.close();
+    });
+}
+</script>
+<style lang="scss"></style>

package/hooks/useHiprint.js

@@ -6,7 +6,7 @@ import "../libs/hiprint.config.js";
 // 样式
 import "../libs/css/hiprint.css";
 import "../libs/css/print-lock.css";
-import { ref, computed } from "vue";
+import { ref, computed, watch } from "vue";
 
 export const hiprint = h;
 export const defaultElementTypeProvider = p;
@@ -41,27 +41,27 @@ export function usePaper() {
   const paperTypes = {
     A3: {
       width: 420,
-      height: 296.6,
+      height: 297,
     },
     A4: {
       width: 210,
-      height: 296.6,
+      height: 297,
     },
     A5: {
       width: 210,
-      height: 147.6,
+      height: 148,
     },
     B3: {
       width: 500,
-      height: 352.6,
+      height: 353,
     },
     B4: {
       width: 250,
-      height: 352.6,
+      height: 353,
     },
     B5: {
       width: 250,
-      height: 175.6,
+      height: 176,
     },
   };
 
@@ -74,6 +74,24 @@ export function usePaper() {
     callback();
   }
 
+  watch([paperWidth, paperHeight], (width, height) => {
+    if (width === 420 && height === 297) {
+      paperType.value = "A3";
+    } else if (width === 210 && height === 297) {
+      paperType.value = "A4";
+    } else if (width === 210 && height === 148) {
+      paperType.value = "A5";
+    } else if (width === 500 && height === 353) {
+      paperType.value = "B3";
+    } else if (width === 250 && height === 353) {
+      paperType.value = "B4";
+    } else if (width === 250 && height === 176) {
+      paperType.value = "B5";
+    } else {
+      paperType.value = "other";
+    }
+  });
+
   return {
     paperType,
     paperWidth,

package/index.js

@@ -1,15 +1,46 @@
-export {
-  hiprint,
-  defaultElementTypeProvider,
-  print,
-  print2,
-  usePaper,
-  useScale,
-  useDataSource,
-} from "./hooks/useHiprint";
+import { install } from "vant";
+
+export { hiprint, defaultElementTypeProvider, print, print2, usePaper, useScale, useDataSource } from "./hooks/useHiprint";
 
 export { default as jquery } from "jquery";
 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";
+
+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);
+  } else {
+    console.log("%cyhHiprint%c " + string, "font-size: 18px;font-weight: bold;color: #61AFEF", "font-size: 12px;color: #999");
+  }
+}
+
+export default {
+  install(app, { router, pinia, isAdmin }) {
+    if (router) {
+      router.addRoute("Index", {
+        path: "hiprint/designer",
+        name: "打印设计器",
+        meta: {
+          icon: "md-planet",
+          title: "打印设计器",
+        },
+        component: () => import("yh-hiprint/HiprintDesigner.vue"),
+      });
+      router.addRoute({
+        path: "/preview",
+        name: "printView",
+        meta: {
+          icon: "md-planet",
+          title: "printView",
+        },
+        component: () => import("yh-hiprint/hiprintPreview.vue"),
+      });
+    } else {
+      if (!router) {
+        cLog("没有传递 router 对象，所以无法将路由添加到应用中", true);
+      }
+    }
+  },
+};