yh-hiprint 2.6.13 → 2.6.15

package/hiprintPreview.vue

@@ -11,165 +11,164 @@
     sub-title="请求参数或者返回数据错误"></el-result>
 </template>
 <script setup>
-import {ElLoading, ElResult, ElMessageBox} 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';
-import {getPrintTemplate} from 'yh-hiprint/libs/index.js';
+  import {ElLoading, ElResult, ElMessageBox} from 'element-plus';
+  import {onMounted, ref} from 'vue';
+  import {useRoute} from 'vue-router';
+  import {hiprint} from 'yh-hiprint';
+  import {getPrintTemplate} from 'yh-hiprint';
 
-function getQuery() {
-  let query = {};
-  try {
-    location.hash
-      .split('?')[1]
-      .split('&')
-      .forEach((str) => {
-        let index = str.indexOf('=');
-        let key = str.substring(0, index);
-        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) {
-    console.error('hiprint Preview getQuery on error:', error);
+  function getQuery() {
+    let query = {};
+    try {
+      location.hash
+        .split('?')[1]
+        .split('&')
+        .forEach((str) => {
+          let index = str.indexOf('=');
+          let key = str.substring(0, index);
+          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) {
+      console.error('hiprint Preview getQuery on error:', error);
+    }
+    return query;
   }
-  return query;
-}
 
-onMounted(() => {
-  let query = getQuery();
-  if (query.code) {
-    sessionStorage.printQuery = JSON.stringify(query);
-    getData(query);
-  } else {
-    if (sessionStorage.printQuery) {
-      query = JSON.parse(sessionStorage.printQuery);
+  onMounted(() => {
+    let query = getQuery();
+    if (query.code) {
+      sessionStorage.printQuery = JSON.stringify(query);
       getData(query);
     } else {
-      loading.close();
-      error.value = true;
+      if (sessionStorage.printQuery) {
+        query = JSON.parse(sessionStorage.printQuery);
+        getData(query);
+      } else {
+        loading.close();
+        error.value = true;
+      }
     }
-  }
-  window.addEventListener('afterprint', () => {
-    self.close();
+    window.addEventListener('afterprint', () => {
+      self.close();
+    });
   });
-});
 
-const route = useRoute();
-const success = ref(false);
-const error = ref(false);
+  const route = useRoute();
+  const success = ref(false);
+  const error = ref(false);
 
-let loading = ElLoading.service({
-  text: '正在加载数据……',
-});
+  let loading = ElLoading.service({
+    text: '正在加载数据……',
+  });
 
-async function getData(query) {
-  let {code, params, data, isCustom, returnHtml} = query;
-  loading.setText('获取打印配置和数据');
-  let reqParams = params ? JSON.parse(params) : [];
-  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) {
+  async function getData(query) {
+    let {code, params, data, isCustom, returnHtml} = query;
+    loading.setText('获取打印配置和数据');
+    let reqParams = params ? JSON.parse(params) : [];
+    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;
+                  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 {
                 hasData = true;
-                let itemsEntries = Object.entries(arr[1]);
-                itemsEntries.forEach((cArr) => {
-                  printData[`$${arr[0]}[${cArr[0]}]`] = cArr[1];
-                });
+                list = JSON.parse(data);
+              } catch (error) {
+                hasData = false;
+                list = [];
               }
             }
           });
-          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) => {
+        } else if (data) {
           try {
             hasData = true;
-            localStorage.hiprintCustomValue = e.value;
-            list = JSON.parse(e.value);
+            list = JSON.parse(data);
           } catch (error) {
-            try {
-              hasData = true;
-              list = JSON.parse(data);
-            } catch (error) {
-              hasData = false;
-              list = [];
-            }
+            hasData = false;
+            list = [];
           }
-        });
-      } else if (data) {
-        try {
-          hasData = true;
-          list = JSON.parse(data);
-        } catch (error) {
-          hasData = false;
-          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) {
-          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;
+      } else {
+        error.value = true;
       }
-      success.value = false;
-    } else {
+    } catch (error) {
+      console.error(error);
       error.value = true;
-    }
-  } catch (error) {
-    console.error(error);
-    error.value = true;
-  } finally {
-    if (loading) {
-      loading.close();
+    } finally {
+      if (loading) {
+        loading.close();
+      }
     }
   }
-}
 </script>
 <style lang="scss"></style>

package/hooks/useHipirntCanvas.ts

@@ -0,0 +1,3 @@
+export function useHipirntCanvas() {
+  return {};
+}

package/hooks/{useHiprint.js → useHiprint.ts}

@@ -1,17 +1,58 @@
-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/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 '../libs/css/print-lock.css';
+import {ref, computed, watch, reactive, nextTick} from 'vue';
+import useHiprintStore from '../store/useHiprintStore.js';
+
+// 定义类型
+interface PaperType {
+  label: string;
+  value: string;
+}
+
+interface PaperDimensions {
+  width: number;
+  height: number;
+}
+
+interface DataSourceItem {
+  columns?: string;
+  code: string;
+  name: string;
+  type: string;
+}
+
+interface DataSourceOption {
+  label: string;
+  value: string;
+}
+
+interface AxiosInstance {
+  request: (config: any) => Promise<any>;
+}
+
+interface Response {
+  data: {
+    data?: {
+      sourceCodes?: string;
+    };
+    list: DataSourceItem[];
+  };
+}
 
 export const hiprint = h;
 export const defaultElementTypeProvider = p;
 
-export function print (provider = defaultElementTypeProvider, template, ...args) {
+export function print(
+  provider: any = defaultElementTypeProvider,
+  template: any,
+  ...args: any[]
+): any {
   hiprint.init({
     providers: [new provider()],
   });
@@ -22,7 +63,11 @@ export function print (provider = defaultElementTypeProvider, template, ...args)
   return hiprintTemplate;
 }
 
-export function print2 (provider = defaultElementTypeProvider, template, ...args) {
+export function print2(
+  provider: any = defaultElementTypeProvider,
+  template: any,
+  ...args: any[]
+): any {
   hiprint.init({
     providers: [new provider()],
   });
@@ -33,9 +78,10 @@ export function print2 (provider = defaultElementTypeProvider, template, ...args
   return hiprintTemplate;
 }
 
-export function usePaper () {
-  const paperType = ref('A4');
-  const paperTypeName = computed(() => {
+export function usePaper() {
+  const hiprintStore = useHiprintStore();
+  const paperType = ref<string>('A4');
+  const paperTypeName = computed((): string => {
     const paperTypeObj = paperTypesObj.find((item) => item.value === paperType.value);
     if (paperTypeObj) {
       return paperTypeObj.label;
@@ -43,19 +89,19 @@ export function usePaper () {
       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' },
+  const paperWidth = ref<number>(210);
+  const paperHeight = ref<number>(296.6);
+
+  const paperTypesObj = reactive<PaperType[]>([
+    {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 = {
+  const paperTypes: Record<string, PaperDimensions> = {
     A3: {
       width: 420,
       height: 297,
@@ -82,11 +128,12 @@ export function usePaper () {
     },
   };
 
-  function setPaper (type, callback) {
+  function setPaper(type: string, callback: () => void): void {
     if (type !== 'other') {
-      let { width, height } = paperTypes[type];
+      const {width, height} = paperTypes[type];
       paperWidth.value = width;
       paperHeight.value = height;
+      hiprintStore.setPaperOption(width, height);
     }
     callback();
   }
@@ -121,22 +168,22 @@ export function usePaper () {
   };
 }
 
-export function useScale (callback) {
-  const scaleValue = ref(1);
-  const scalePercentage = computed(() => {
+export function useScale(callback: () => void) {
+  const scaleValue = ref<number>(1);
+  const scalePercentage = computed((): string => {
     return `${(scaleValue.value * 100).toFixed(0)}%`;
   });
-  const canZoomIn = computed(() => {
+  const canZoomIn = computed((): boolean => {
     return scaleValue.value > 0.5;
   });
-  const canZoomOut = computed(() => {
+  const canZoomOut = computed((): boolean => {
     return scaleValue.value < 4;
   });
-  function zoomIn () {
+  function zoomIn(): void {
     scaleValue.value = scaleValue.value - 0.1;
     callback();
   }
-  function zoomOut () {
+  function zoomOut(): void {
     scaleValue.value = scaleValue.value + 0.1;
     callback();
   }
@@ -150,58 +197,67 @@ export function useScale (callback) {
   };
 }
 
-export function useDataSource (axios) {
-  const detailData = ref();
-  function getDetail (id) {
+export function useDataSource(axios: AxiosInstance) {
+  const detailData = ref<any>();
+  function getDetail(id: string | number): Promise<any> {
     return axios
       .request({
         url: `/printTemplate/get/${id}`,
         method: 'post',
       })
-      .then((res) => {
+      .then((res: Response) => {
         if (res.data.data && res.data.data.sourceCodes) {
-          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;
+          const codes = res.data.data.sourceCodes.split(',');
+          const formListCode = dataSourceForm.value.map((item) => item.value);
+          const filteredCodes = codes.filter((item) => formListCode.includes(item));
+          formCode.value = filteredCodes;
         } else {
-          formCode.value = '';
+          formCode.value = [];
         }
         detailData.value = res.data.data;
         return Promise.resolve(res.data.data);
       });
   }
-  const listCode = ref([]);
-  const dataSourceList = ref([]);
-  const listColumns = computed(() => {
-    return codeMapDataSource.value[listCode.value].map((item) => {
-      let index = item.indexOf('[');
+  const listCode = ref<string[]>([]);
+  const dataSourceList = ref<DataSourceOption[]>([]);
+  const listColumns = computed((): string[] => {
+    if (
+      !codeMapDataSource.value[listCode.value[0]] ||
+      !Array.isArray(codeMapDataSource.value[listCode.value[0]])
+    ) {
+      return [];
+    }
+    return codeMapDataSource.value[listCode.value[0]].map((item) => {
+      const index = item.indexOf('[');
       return item.substring(index + 1, item.length - 1);
     });
   });
 
-  const formCode = ref([]);
-  const formColumns = computed(() => {
-    let arr = [];
+  const formCode = ref<string[]>([]);
+  const formColumns = computed((): string[] => {
+    const arr: string[] = [];
     if (formCode.value && formCode.value.length) {
       formCode.value.forEach((item) => {
-        arr = arr.concat(codeMapDataSource.value[item]);
+        if (codeMapDataSource.value[item] && Array.isArray(codeMapDataSource.value[item])) {
+          arr.push(...codeMapDataSource.value[item]);
+        }
       });
     }
     return arr;
   });
-  const dataSourceForm = ref([]);
-  const codeMapDataSource = ref({});
-  function getDataSourceList () {
+  const dataSourceForm = ref<DataSourceOption[]>([]);
+  const codeMapDataSource = ref<Record<string, string[]>>({});
+  function getDataSourceList(): Promise<void> {
     return axios
       .request({
         url: '/printTemplate/getDsList',
         method: 'post',
       })
-      .then((res) => {
+      .then((res: Response) => {
         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') {
             dataSourceList.value.push({
@@ -218,7 +274,7 @@ export function useDataSource (axios) {
       });
   }
 
-  const dataSource = ref([]);
+  const dataSource = ref<any[]>([]);
   return {
     detailData,
     getDetail,
@@ -234,4 +290,10 @@ export function useDataSource (axios) {
   };
 }
 
+declare global {
+  interface Window {
+    hiprint: any;
+  }
+}
+
 window.hiprint = hiprint;