yh-hiprint 2.5.2 → 3.0.0

package/HiprintDesigner.vue

@@ -37,13 +37,13 @@
                 v-model="paperWidth"
                 type="number">
                 <template #prepend>宽</template>
-                <template #append>px</template>
+                <template #append>mm</template>
               </el-input>
               <el-input
                 v-model="paperHeight"
                 type="number">
                 <template #prepend>高</template>
-                <template #append>px</template>
+                <template #append>mm</template>
               </el-input>
               <el-button
                 type="primary"
@@ -437,6 +437,7 @@ import {useRoute, onBeforeRouteUpdate} from 'vue-router';
 import {toValue} from '@vueuse/core';
 import {ElMessageBox, ElMessage} from 'element-plus';
 import axios from '@/libs/api.request';
+import previewHiprint from './libs/previewHiprint';
 
 interface HiprintTemplate {
   setPaper: (width: number, height: number) => void;
@@ -449,11 +450,6 @@ const route = useRoute();
 const hiprintTemplate = shallowRef<HiprintTemplate | null>(null);
 
 const {paperType, paperTypeName, paperTypesObj, paperWidth, paperHeight, setPaper} = usePaper();
-function setPaperHandler(type) {
-  setPaper(type, () => {
-    hiprintTemplate.value?.setPaper(paperWidth.value, paperHeight.value);
-  });
-}
 
 const canvasRef = ref();
 const {scaleValue, scalePercentage, canZoomIn, canZoomOut, zoomIn, zoomOut} = useScale(() => {
@@ -461,50 +457,8 @@ const {scaleValue, scalePercentage, canZoomIn, canZoomOut, zoomIn, zoomOut} = us
   canvasRef?.value.update();
 });
 
-const previewShow = ref(false);
-const previewHtml = ref('');
 async function previewPrint() {
-  let {
-    data: {list, json},
-  } = await axios.request({
-    url: `/printTemplate/data/${detailData.value.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) {
-              let itemsEntries = Object.entries(arr[1]);
-              itemsEntries.forEach((cArr) => {
-                printData[`$${arr[0]}[${cArr[0]}]`] = cArr[1];
-              });
-            }
-          }
-        });
-        return printData;
-      });
-    } else {
-      list = [];
-    }
-    previewHtml.value = new hiprint.PrintTemplate({template: JSON.parse(json)}).getHtml(list)[0].innerHTML;
-    previewShow.value = true;
-  } else {
-    ElMessage.warning({
-      message: '模板配置不存在，请检查',
-    });
-  }
+  previewHiprint(detailData.value.code);
 }
 
 function saveConfig() {
@@ -538,13 +492,6 @@ function clearPrint() {
   hiprintTemplate.value?.clear();
 }
 
-function testUpdate() {
-  let els = hiprintTemplate.value.getSelectEls();
-  window.a = els[0];
-  a.options.top = a.options.top + 10;
-  hiprintJQuery(a.designTarget[0]).css('top', a.options.displayTop());
-}
-
 const {detailData, getDetail, listCode, dataSourceList, listColumns, formCode, formColumns, dataSourceForm, getDataSourceList} = useDataSource(axios);
 
 watch(
@@ -763,145 +710,7 @@ function tableColumnCancel() {
   selectedTableEle.value = null;
 }
 
-function init() {
-  try {
-    hiprint.init({
-      host: 'http://localhost:17521',
-      providers: [new defaultElementTypeProvider()],
-    });
-    hiprint.setConfig();
-    hiprint.setConfig({
-      optionItems: [fontSize, scale, zIndex],
-      movingDistance: 2.5,
-      text: {
-        tabs: [
-          {
-            options: [],
-          },
-          {
-            name: '样式',
-            options: [
-              {
-                name: 'scale',
-                after: 'transform',
-                hidden: false,
-              },
-            ],
-          },
-        ],
-        supportOptions: [
-          {
-            name: 'styler',
-            hidden: true,
-          },
-          {
-            name: 'scale',
-            after: 'transform',
-            hidden: false,
-          },
-          {
-            name: 'formatter',
-            hidden: true,
-          },
-        ],
-      },
-      image: {
-        tabs: [
-          {
-            replace: true,
-            name: '基本',
-            options: [
-              {
-                name: 'field',
-                hidden: false,
-              },
-              {
-                name: 'src',
-                hidden: false,
-              },
-              {
-                name: 'fit',
-                hidden: false,
-              },
-            ],
-          },
-        ],
-      },
-      table: {
-        tabs: [{options: [{name: 'field', hidden: true}]}],
-      },
-    });
-
-    hiprint.PrintElementTypeManager.buildByHtml(hiprintJQuery('.ep-draggable-item'));
-    hiprintJQuery('#hiprint-printTemplate').empty();
-    let template = JSON.parse(detailData.value.json) || panel;
-    hiprintTemplate.value = new hiprint.PrintTemplate({
-      template,
-      onImageChooseClick: (target) => {
-        console.log(target);
-      },
-      fontList: [
-        {title: '微软雅黑', value: 'Microsoft YaHei'},
-        {title: '黑体', value: 'STHeitiSC-Light'},
-        {title: '思源黑体', value: 'SourceHanSansCN-Normal'},
-        {title: '宋体', value: 'SimSun'},
-        {title: '华为楷体', value: 'STKaiti'},
-        {title: 'cursive', value: 'cursive'},
-        {title: 'Times New Roman', value: 'Times New Roman'},
-      ],
-      dataMode: 1,
-      history: true,
-      onDataChanged: (type, json) => {},
-      onUpdateError: (e) => {
-        console.error(e);
-      },
-      settingContainer: '#PrintElementOptionSetting',
-      paginationContainer: '.hiprint-printPagination',
-    });
-
-    hiprintTemplate.value?.design('#hiprint-printTemplate', {grid: true});
-    scaleValue.value = hiprintTemplate.value.editingPanel.scale || 1;
-    window.ht = hiprintTemplate.value;
-
-    if (formColumns.value) {
-      hiprintTemplate.value?.setFields(
-        formColumns.value.map((item) => {
-          return {
-            field: item,
-            text: item,
-          };
-        })
-      );
-    }
-    hiprintJQuery('.hiprint-designer').on('mousedown', '.hiprint-printElement', (e) => {
-      let t = e.currentTarget;
-      selectedEle.value = hiprintTemplate.value?.getSelectEls() || [];
-      let pes = hiprintTemplate.value?.editingPanel.printElements;
-      let index = pes.map((item) => item.designTarget[0]).findIndex((item) => t === item);
-      let pe = pes[index];
-      selectedTableEle.value = pe || null;
-      if (pe && pe.options.field) {
-        listCode.value = pe.options.field;
-      }
-    });
-    hiprintJQuery('#PrintElementOptionSetting').on('input', 'input[type=number]', ($el) => {
-      let val = parseInt($el.target.value);
-      if (val < 1) {
-        $el.target.value = 1;
-      }
-      if (val > 2000) {
-        $el.target.value = 2000;
-      }
-    });
-  } catch (error) {
-    console.log(error.message);
-    clearPrint();
-    hiprintTemplate.value = null;
-    if (error.message.indexOf('setTemplateId') > -1) {
-      ElMessageBox.alert('模板有错误，请返回列表手动修改或这清空模板！');
-    }
-  }
-}
+function init() {}
 
 let updateing = false;
 async function updateTemplate(code) {
@@ -953,7 +762,6 @@ const hasDataSource = computed(() => {
 });
 
 function wheelHandler(e: MouseEvent) {
-  console.log(e);
   if (e.ctrlKey) {
     const isZoomIn = e.wheelDelta < 0;
     const isZoomOut = e.wheelDelta > 0;
@@ -1141,6 +949,22 @@ onMounted(async () => {
   }
 }
 
+.print-preview-dialog {
+  min-width: 1000px;
+  max-width: 1200px;
+  .el-message-box__container {
+    justify-content: center;
+    background-color: #f2f2f2;
+  }
+  .hiprint-printPaper {
+    margin-top: 5px;
+    position: relative;
+    background-color: #fff;
+    &:last-child {
+      margin-bottom: 5px;
+    }
+  }
+}
 .paper-setting {
   display: flex;
   .paper-setting_types {

package/config.json

@@ -0,0 +1,399 @@
+{
+  "panels": [
+    {
+      "index": 0,
+      "name": 1,
+      "height": 297,
+      "width": 210,
+      "paperHeader": 7.5,
+      "paperFooter": 780,
+      "printElements": [
+        {
+          "options": {
+            "left": 20,
+            "top": 20,
+            "height": 9.75,
+            "width": 120,
+            "transform": 12,
+            "title": "文本",
+            "right": 139.9921875,
+            "bottom": 29.7421875,
+            "vCenter": 79.9921875,
+            "hCenter": 24.8671875,
+            "field": "1212",
+            "testData": "1212",
+            "coordinateSync": false,
+            "widthHeightSync": false,
+            "dataType": "datetime",
+            "format": "M/d",
+            "fontFamily": "Microsoft YaHei",
+            "fontSize": 4,
+            "fontWeight": "lighter",
+            "letterSpacing": 0.75,
+            "color": "#915c5c",
+            "backgroundColor": "#9e7272",
+            "textDecoration": "underline",
+            "textAlign": "center",
+            "textContentVerticalAlign": "middle",
+            "textContentWrap": "nowrap",
+            "lineHeight": 11.25,
+            "scale": 1,
+            "zIndex": 2,
+            "borderLeft": "solid",
+            "borderTop": "solid",
+            "borderRight": "solid",
+            "borderBottom": "solid",
+            "borderWidth": "0.75",
+            "borderColor": "#8f7b7b",
+            "contentPaddingLeft": 0.75,
+            "contentPaddingTop": 0.75,
+            "contentPaddingRight": 0.75,
+            "contentPaddingBottom": 0.75,
+            "barcodeMode": "CODE128A",
+            "qrCodeLevel": 1,
+            "pageBreak": true,
+            "showInPage": "first",
+            "unShowInPage": "first",
+            "axis": "h",
+            "upperCase": "0",
+            "formatter": "function(title,value,options.templateData.target){}\n",
+            "styler": "function(value,options.target.templateData){}"
+          },
+          "printElementType": {
+            "title": "文本",
+            "type": "text"
+          }
+        },
+        {
+          "options": {
+            "left": 20,
+            "top": 52.5,
+            "height": 9.75,
+            "width": 120,
+            "hideTitle": true,
+            "title": "值（文本）",
+            "right": 142.5,
+            "bottom": 63,
+            "vCenter": 82.5,
+            "hCenter": 58.125
+          },
+          "printElementType": {
+            "title": "值（文本）",
+            "type": "text"
+          }
+        },
+        {
+          "options": {
+            "left": 22.5,
+            "top": 85,
+            "height": 79.5,
+            "width": 61.5,
+            "right": 85.2421875,
+            "bottom": 165.24609375,
+            "vCenter": 54.4921875,
+            "hCenter": 125.49609375
+          },
+          "printElementType": {
+            "title": "图片",
+            "type": "image"
+          }
+        },
+        {
+          "options": {
+            "left": 22.5,
+            "top": 190,
+            "height": 42,
+            "width": 550,
+            "title": "长文"
+          },
+          "printElementType": {
+            "title": "长文",
+            "type": "longText"
+          }
+        },
+        {
+          "options": {
+            "left": 22.5,
+            "top": 240,
+            "height": 39,
+            "width": 550,
+            "field": "",
+            "columns": [
+              [
+                {
+                  "width": 275,
+                  "title": "阿恃多伐底",
+                  "field": "",
+                  "checked": true,
+                  "columnId": "asdf",
+                  "fixed": false,
+                  "rowspan": 1,
+                  "colspan": 1
+                },
+                {
+                  "width": 275,
+                  "title": "啊啊啊啊",
+                  "field": "",
+                  "checked": true,
+                  "columnId": "asdf",
+                  "fixed": false,
+                  "rowspan": 1,
+                  "colspan": 1
+                }
+              ],
+              [
+                {
+                  "width": 257.85949999999997,
+                  "checked": true,
+                  "fixed": false,
+                  "rowspan": 1,
+                  "colspan": 1
+                },
+                {
+                  "width": 292.14050000000003,
+                  "checked": true,
+                  "fixed": false,
+                  "rowspan": 1,
+                  "colspan": 1
+                }
+              ]
+            ]
+          },
+          "printElementType": {
+            "title": "表格",
+            "type": "table",
+            "editable": true,
+            "columnDisplayEditable": true,
+            "columnDisplayIndexEditable": true,
+            "columnTitleEditable": true,
+            "columnResizable": true,
+            "columnAlignEditable": true,
+            "isEnableEditField": true,
+            "isEnableContextMenu": true,
+            "isEnableInsertRow": true,
+            "isEnableDeleteRow": true,
+            "isEnableInsertColumn": true,
+            "isEnableDeleteColumn": true,
+            "isEnableMergeCell": true
+          }
+        },
+        {
+          "options": {
+            "left": 22.5,
+            "top": 272.5,
+            "height": 4,
+            "width": 550,
+            "field": "",
+            "coordinateSync": false,
+            "widthHeightSync": false,
+            "columns": [
+              [
+                {
+                  "width": 250.82074999999998,
+                  "title": "啊啊啊啊",
+                  "checked": true,
+                  "fixed": false,
+                  "rowspan": 1,
+                  "colspan": 1
+                },
+                {
+                  "width": 299.17925,
+                  "title": "啊啊啊啊",
+                  "checked": true,
+                  "fixed": false,
+                  "rowspan": 1,
+                  "colspan": 1
+                }
+              ]
+            ]
+          },
+          "printElementType": {
+            "title": "空白表格",
+            "type": "table",
+            "editable": true,
+            "columnDisplayEditable": true,
+            "columnDisplayIndexEditable": true,
+            "columnTitleEditable": true,
+            "columnResizable": true,
+            "columnAlignEditable": true,
+            "isEnableEditField": true,
+            "isEnableContextMenu": true,
+            "isEnableInsertRow": true,
+            "isEnableDeleteRow": true,
+            "isEnableInsertColumn": true,
+            "isEnableDeleteColumn": true,
+            "isEnableMergeCell": true
+          }
+        },
+        {
+          "options": {
+            "left": 22.5,
+            "top": 305,
+            "height": 90,
+            "width": 90,
+            "formatter": "function (data, options) {\n              return '<div></div>';\n            }",
+            "right": 114,
+            "bottom": 395.49609375,
+            "vCenter": 69,
+            "hCenter": 350.49609375
+          },
+          "printElementType": {
+            "title": "html",
+            "type": "html"
+          }
+        },
+        {
+          "options": {
+            "left": 30,
+            "top": 417.5,
+            "height": 9.75,
+            "width": 120,
+            "title": "自定义文本",
+            "right": 148.9921875,
+            "bottom": 426.24609375,
+            "vCenter": 88.9921875,
+            "hCenter": 421.37109375
+          },
+          "printElementType": {
+            "title": "自定义文本",
+            "type": "text"
+          }
+        },
+        {
+          "options": {
+            "left": 30,
+            "top": 462.5,
+            "height": 32,
+            "width": 120,
+            "field": "barcode",
+            "testData": "lkforntend",
+            "fontSize": 12,
+            "lineHeight": 18,
+            "textType": "barcode",
+            "title": "条形码"
+          },
+          "printElementType": {
+            "title": "条形码",
+            "type": "text"
+          }
+        },
+        {
+          "options": {
+            "left": 40,
+            "top": 552.5,
+            "height": 50,
+            "width": 50,
+            "testData": "力控元海-技术中心-前端",
+            "field": "qrcode",
+            "textType": "qrcode",
+            "title": "二维码"
+          },
+          "printElementType": {
+            "title": "二维码",
+            "type": "text"
+          }
+        },
+        {
+          "options": {
+            "left": 40,
+            "top": 645,
+            "height": 9,
+            "width": 90,
+            "right": 131.7421875,
+            "bottom": 654.4921875,
+            "vCenter": 86.7421875,
+            "hCenter": 649.9921875,
+            "coordinateSync": false,
+            "widthHeightSync": false,
+            "borderWidth": "2.25",
+            "borderStyle": "solid",
+            "borderColor": "#000000"
+          },
+          "printElementType": {
+            "title": "横线",
+            "type": "hline"
+          }
+        },
+        {
+          "options": {
+            "left": 215,
+            "top": 677.5,
+            "height": 90,
+            "width": 90,
+            "right": 303.99609375,
+            "bottom": 766.74609375,
+            "vCenter": 258.99609375,
+            "hCenter": 721.74609375,
+            "coordinateSync": false,
+            "widthHeightSync": false,
+            "borderWidth": "1.5",
+            "borderStyle": "solid",
+            "borderColor": "#000000"
+          },
+          "printElementType": {
+            "title": "矩形",
+            "type": "rect"
+          }
+        },
+        {
+          "options": {
+            "left": 122.5,
+            "top": 687.5,
+            "height": 90,
+            "width": 9,
+            "coordinateSync": false,
+            "widthHeightSync": false,
+            "borderWidth": "1.5",
+            "borderStyle": "solid",
+            "borderColor": "#000000"
+          },
+          "printElementType": {
+            "title": "竖线",
+            "type": "vline"
+          }
+        },
+        {
+          "options": {
+            "left": 382.5,
+            "top": 690,
+            "height": 90,
+            "width": 90,
+            "coordinateSync": false,
+            "widthHeightSync": false,
+            "borderWidth": "0.75",
+            "borderStyle": "solid",
+            "borderColor": "#000000"
+          },
+          "printElementType": {
+            "title": "椭圆",
+            "type": "oval"
+          }
+        }
+      ],
+      "paperNumberLeft": 565,
+      "paperNumberTop": 45,
+      "paperNumberContinue": false,
+      "paperNumberFormat": "1",
+      "panelPaperRule": "odd",
+      "panelPageRule": "none",
+      "firstPaperFooter": 1,
+      "evenPaperFooter": 1,
+      "oddPaperFooter": 1,
+      "lastPaperFooter": 1,
+      "topOffset": 1,
+      "fontFamily": "Microsoft YaHei",
+      "leftOffset": 1,
+      "orient": 1,
+      "watermarkOptions": {
+        "content": "阿恃多伐底",
+        "rotate": 25,
+        "timestamp": true,
+        "format": "YYYY-MM-DD HH:mm",
+        "fillStyle": "rgba(184, 184, 184, 0.3)",
+        "fontSize": "14px",
+        "width": 200,
+        "height": 200
+      }
+    }
+  ]
+}