ol-base-components 3.0.0 → 3.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ol-base-components",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "private": false,
   "main": "src/package/index.js",
   "bin": {

package/src/App.vue

@@ -502,12 +502,146 @@ export default {
       }
     },
     aaa() {
-      this.$hiprint(
-        {
+      // const printEnpty = this.$hiprint({
+      //   printData: {
+      //     name: "CcSimple",
+      //     barcode: "33321323",
+      //     table: [
+      //       { id: "1", name: "王小可123", gender: "男", count: "120", amount: "9089元" },
+      //       { id: "2", name: "梦之遥", gender: "女", count: "20", amount: "89元" },
+      //     ],
+      //     table1: [
+      //       { id: "1", name: "王小可11", gender: "男", count: "120", amount: "9089元" },
+      //       { id: "2", name: "梦之遥", gender: "女", count: "20", amount: "89元" },
+      //     ],
+      //   },
+      //   onPrintData: data => {
+      //     return data;
+      //   },
+      //   onTemplate: data => {
+      //     return data;
+      //   },
+      //   defaultTemplate: {
+      //     panels: [
+      //       {
+      //         index: 0,
+      //         name: 1,
+      //         paperType: "A4",
+      //         height: 297,
+      //         width: 210,
+      //         paperHeader: 0,
+      //         paperFooter: 841.8897637795277,
+      //         printElements: [
+      //           {
+      //             options: {
+      //               left: 117,
+      //               top: 94.5,
+      //               height: 9.75,
+      //               width: 120,
+      //               field: "name",
+      //               testData: "内容",
+      //               title: "文本",
+      //               qid: "name",
+      //             },
+      //             printElementType: {
+      //               title: "文本",
+      //               type: "text",
+      //             },
+      //           },
+      //           {
+      //             options: {
+      //               left: 160.5,
+      //               top: 174,
+      //               height: 36,
+      //               width: 550,
+      //               fields: [],
+      //               field: "table",
+      //               qid: "table",
+      //               columns: [
+      //                 [
+      //                   {
+      //                     width: 137.5,
+      //                     title: "名称",
+      //                     field: "name",
+      //                     checked: true,
+      //                     columnId: "name",
+      //                     fixed: false,
+      //                     rowspan: 1,
+      //                     colspan: 1,
+      //                     align: "center",
+      //                   },
+      //                   {
+      //                     width: 137.5,
+      //                     title: "性别",
+      //                     field: "gender",
+      //                     checked: true,
+      //                     columnId: "gender",
+      //                     fixed: false,
+      //                     rowspan: 1,
+      //                     colspan: 1,
+      //                     align: "center",
+      //                   },
+      //                   {
+      //                     width: 137.5,
+      //                     title: "数量",
+      //                     field: "count",
+      //                     checked: true,
+      //                     columnId: "count",
+      //                     fixed: false,
+      //                     rowspan: 1,
+      //                     colspan: 1,
+      //                     align: "center",
+      //                   },
+      //                   {
+      //                     width: 137.5,
+      //                     title: "金额",
+      //                     field: "amount",
+      //                     checked: true,
+      //                     columnId: "amount",
+      //                     fixed: false,
+      //                     rowspan: 1,
+      //                     colspan: 1,
+      //                     align: "center",
+      //                   },
+      //                 ],
+      //               ],
+      //             },
+      //             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,
+      //             },
+      //           },
+      //         ],
+      //         paperNumberContinue: true,
+      //         watermarkOptions: {},
+      //         panelLayoutOptions: {},
+      //       },
+      //     ],
+      //   },
+      //   onSubmit: data => {
+      //     console.log(6666, data);
+      //   },
+      // });
+
+      this.$hiprint.print({
+        printData: {
           name: "CcSimple",
           barcode: "33321323",
           table: [
-            { id: "1", name: "王小可", gender: "男", count: "120", amount: "9089元" },
+            { id: "1", name: "王小可123", gender: "男", count: "120", amount: "9089元" },
             { id: "2", name: "梦之遥", gender: "女", count: "20", amount: "89元" },
           ],
           table1: [
@@ -515,10 +649,126 @@ export default {
             { id: "2", name: "梦之遥", gender: "女", count: "20", amount: "89元" },
           ],
         },
-        () => {
-          console.log(123);
-        }
-      );
+        onPrintData: data => {
+          return data;
+        },
+        onTemplate: data => {
+          return data;
+        },
+        defaultTemplate: {
+          panels: [
+            {
+              index: 0,
+              name: 1,
+              paperType: "A4",
+              height: 297,
+              width: 210,
+              paperHeader: 0,
+              paperFooter: 841.8897637795277,
+              printElements: [
+                {
+                  options: {
+                    left: 117,
+                    top: 94.5,
+                    height: 9.75,
+                    width: 120,
+                    field: "name",
+                    testData: "内容",
+                    title: "文本",
+                    qid: "name",
+                  },
+                  printElementType: {
+                    title: "文本",
+                    type: "text",
+                  },
+                },
+                {
+                  options: {
+                    left: 160.5,
+                    top: 174,
+                    height: 36,
+                    width: 550,
+                    fields: [],
+                    field: "table",
+                    qid: "table",
+                    columns: [
+                      [
+                        {
+                          width: 137.5,
+                          title: "名称",
+                          field: "name",
+                          checked: true,
+                          columnId: "name",
+                          fixed: false,
+                          rowspan: 1,
+                          colspan: 1,
+                          align: "center",
+                        },
+                        {
+                          width: 137.5,
+                          title: "性别",
+                          field: "gender",
+                          checked: true,
+                          columnId: "gender",
+                          fixed: false,
+                          rowspan: 1,
+                          colspan: 1,
+                          align: "center",
+                        },
+                        {
+                          width: 137.5,
+                          title: "数量",
+                          field: "count",
+                          checked: true,
+                          columnId: "count",
+                          fixed: false,
+                          rowspan: 1,
+                          colspan: 1,
+                          align: "center",
+                        },
+                        {
+                          width: 137.5,
+                          title: "金额",
+                          field: "amount",
+                          checked: true,
+                          columnId: "amount",
+                          fixed: false,
+                          rowspan: 1,
+                          colspan: 1,
+                          align: "center",
+                        },
+                      ],
+                    ],
+                  },
+                  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,
+                  },
+                },
+              ],
+              paperNumberContinue: true,
+              watermarkOptions: {},
+              panelLayoutOptions: {},
+            },
+          ],
+        },
+        onSubmit: data => {
+          console.log(6666, data);
+        },
+      });
     },
   },
 };

package/src/package/print/index.js

@@ -11,7 +11,8 @@ let container = null;
 
 const Hiprint = {
   install(Vue) {
-    Vue.prototype.$hiprint = function (data, template) {
+    const hiprint = function (options) {
+      const { printData, onPrintData, defaultTemplate, onTemplate, onSubmit } = options;
       // 销毁旧实例
       if (printInstance) {
         printInstance.$destroy();
@@ -27,26 +28,47 @@ const Hiprint = {
       document.body.appendChild(container);
 
       const PrintComponent = Vue.extend(OlPrint);
+      const propsData = {};
+      if (printData) {
+        propsData.printData = printData;
+      }
+      if (onPrintData) {
+        propsData.onPrintData = onPrintData;
+      }
+
+      if (onTemplate) {
+        propsData.onTemplate = onTemplate;
+      }
+
+      if (defaultTemplate) {
+        propsData.defaultTemplate = defaultTemplate;
+      }
+
       printInstance = new PrintComponent({
-        propsData: {
-          printData: data || {},
-          onTemplate: template,
-        },
+        propsData,
       });
 
+      // 监听 submit 事件
+      if (onSubmit && typeof onSubmit === "function") {
+        printInstance.$on("submit", json => {
+          onSubmit(json);
+        });
+      }
+
       printInstance.$mount(container);
+
+      // 返回实例，方便外部调用
+      return printInstance;
     };
+    Vue.prototype.$hiprint = hiprint;
 
-    // 提供销毁方法（可选）
-    Vue.prototype.$hiprint.destroy = function () {
-      if (printInstance) {
-        printInstance.$destroy();
-        if (container && container.parentNode) {
-          container.parentNode.removeChild(container);
-        }
-        printInstance = null;
-        container = null;
-      }
+    // 快捷方法：直接打印
+    Vue.prototype.$hiprint.print = function (options) {
+      const instance = hiprint(options);
+      instance.print();
+      instance.$nextTick(() => {
+        instance.close();
+      });
     };
   },
 };

package/src/package/print/src/components/PaperSelector.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="paper-selector">
+    <el-button-group>
+      <el-button
+        v-for="(value, type) in paperTypes"
+        :key="type"
+        :type="curPaperType === type ? 'primary' : 'default'"
+        size="small"
+        @click="setPaper(type, value)"
+      >
+        {{ type }}
+      </el-button>
+      <el-button
+        :type="curPaperType === 'other' ? 'primary' : 'default'"
+        size="small"
+        @click="showPaperPop"
+      >
+        自定义纸张
+      </el-button>
+    </el-button-group>
+
+    <el-dialog
+      title="设置纸张宽高(mm)"
+      :visible.sync="paperPopVisible"
+      width="400px"
+      :append-to-body="true"
+    >
+      <el-form label-width="80px">
+        <el-form-item label="纸张宽度">
+          <el-input v-model="paperWidth" type="number" placeholder="宽(mm)" />
+        </el-form-item>
+        <el-form-item label="纸张高度">
+          <el-input v-model="paperHeight" type="number" placeholder="高(mm)" />
+        </el-form-item>
+      </el-form>
+      <span slot="footer">
+        <el-button @click="hidePaperPop">取消</el-button>
+        <el-button type="primary" @click="setPaperOther">确定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "PaperSelector",
+  props: {
+    hiprintTemplate: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      curPaper: {
+        type: "A4",
+        width: 210,
+        height: 296.6,
+      },
+      paperTypes: {
+        A3: { width: 420, height: 296.6 },
+        A4: { width: 210, height: 296.6 },
+        A5: { width: 210, height: 147.6 },
+        B3: { width: 500, height: 352.6 },
+        B4: { width: 250, height: 352.6 },
+        B5: { width: 250, height: 175.6 },
+      },
+      paperPopVisible: false,
+      paperWidth: "220",
+      paperHeight: "80",
+    };
+  },
+  computed: {
+    curPaperType() {
+      let type = "other";
+      let types = this.paperTypes;
+      for (const key in types) {
+        let item = types[key];
+        let { width, height } = this.curPaper;
+        if (item.width === width && item.height === height) {
+          type = key;
+        }
+      }
+      return type;
+    },
+  },
+  methods: {
+    showPaperPop() {
+      this.paperPopVisible = true;
+    },
+    hidePaperPop() {
+      this.paperPopVisible = false;
+    },
+    setPaper(type, value) {
+      try {
+        if (Object.keys(this.paperTypes).includes(type)) {
+          this.curPaper = { type: type, width: value.width, height: value.height };
+          this.hiprintTemplate.setPaper(value.width, value.height);
+        } else {
+          this.curPaper = { type: "other", width: value.width, height: value.height };
+          this.hiprintTemplate.setPaper(value.width, value.height);
+        }
+        this.$emit("change", this.curPaper);
+      } catch (error) {
+        this.$message.error(`操作失败: ${error}`);
+      }
+    },
+    setPaperOther() {
+      let value = {};
+      value.width = Number(this.paperWidth);
+      value.height = Number(this.paperHeight);
+      this.paperPopVisible = false;
+      this.setPaper("other", value);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.paper-selector {
+  display: inline-block;
+}
+</style>

package/src/package/print/src/index.vue

@@ -14,21 +14,31 @@
         <i class="iconfont close-btn" @click="close">x</i>
       </div>
       <div class="print-dialog-body">
-        <div class="flex-row justify-center" style="margin-bottom: 10px">
-          <button class="secondary circle-10 button-item" @click.stop="print">
-            <i class="iconfont sv-printer" />
-            浏览器打印
-          </button>
-          <button class="api circle-10 ml-10" @click.stop="clearPaper">
-            <i class="iconfont sv-clear" />
-            清空纸张
-          </button>
-          <button class="api circle-10 ml-10 button-item" @click.stop="exportJson">
-            <i class="iconfont sv-export" />
-            导出模板 json
-          </button>
+        <div class="header-box" style="margin-bottom: 10px">
+          <paper-selector :hiprint-template="hiprintTemplate" ref="paperSelector" />
+          <div>
+            <slot
+              :hiprint-template="hiprintTemplate"
+              :print="print"
+              :clear-paper="clearPaper"
+              :export-json="exportJson"
+            >
+            </slot>
+            <el-button type="primary" size="small" @click="print">
+              <i class="iconfont sv-printer" />
+              浏览器预览
+            </el-button>
+            <el-button type="danger" size="small" @click="clearPaper" style="margin-left: 10px">
+              <i class="iconfont sv-clear" />
+              清空纸张
+            </el-button>
+            <el-button type="success" size="small" @click="exportJson" style="margin-left: 10px">
+              <i class="iconfont sv-export" />
+              保存
+            </el-button>
+          </div>
         </div>
-        <div class="flex-row" style="height: 87vh">
+        <div class="main flex-row" style="height: 87vh">
           <div class="flex-2 left flex-col">
             <!-- provider1 的容器; 加上 class "rect-printElement-types" 使用默认样式 -->
             <!-- 当然可以 重写 或者 自定义样式 -->
@@ -52,39 +62,56 @@
 // import { onMounted } from "vue";
 import { hiprint } from "vue-plugin-hiprint";
 import { provider1 } from "./provide/provider1.js";
+import PaperSelector from "./components/PaperSelector.vue";
+
 export default {
   name: "print",
+  components: {
+    PaperSelector,
+  },
   props: {
     // 打印数据
     printData: {
       type: Object,
-      default: () => ({
-        name: "CcSimple",
-        barcode: "33321323",
-        table: [
-          { id: "1", name: "王小可", gender: "男", count: "120", amount: "9089元" },
-          { id: "2", name: "梦之遥", gender: "女", count: "20", amount: "89元" },
-        ],
-        table1: [
-          { id: "1", name: "王小可11", gender: "男", count: "120", amount: "9089元" },
-          { id: "2", name: "梦之遥", gender: "女", count: "20", amount: "89元" },
-        ],
-      }),
+      default: () => {},
     },
-    // 模板加载前回调函数
-    onTemplate: {
+    // {
+    //     name: "CcSimple",
+    //     barcode: "33321323",
+    //     table: [
+    //       { id: "1", name: "王小可", gender: "男", count: "120", amount: "9089元" },
+    //       { id: "2", name: "梦之遥", gender: "女", count: "20", amount: "89元" },
+    //     ],
+    //     table1: [
+    //       { id: "1", name: "王小可11", gender: "男", count: "120", amount: "9089元" },
+    //       { id: "2", name: "梦之遥", gender: "女", count: "20", amount: "89元" },
+    //     ],
+    //   }
+    onPrintData: {
       type: Function,
+      default: null,
+    },
+    // {panels:[]}
+    defaultTemplate: {
+      type: Object,
       default: () => {},
     },
+    // 模板数据前置钩子
+    onTemplate: {
+      type: Function,
+      default: null,
+    },
+    grid: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
-      hiprintTemplate: null,
+      hiprintTemplate: {},
     };
   },
   created() {
-    console.log("初始化打印弹框");
-
     hiprint.init({
       //   providers: [defaultElementTypeProvider()],
       providers: [provider1()],
@@ -102,52 +129,63 @@ export default {
       // eslint-disable-next-line no-undef
       //   hiprint.PrintElementTypeManager.buildByHtml($(".ep-draggable-item"));
     },
-    buildDesigner() {
+    async buildDesigner() {
       // eslint-disable-next-line no-undef
       $("#hiprint-printTemplate").empty(); // 先清空, 避免重复构建
-      //   判断用户是否传了onTemplate
-      if (this.onTemplate) {
-        console.log(123123);
 
-        // this.onTemplate(this.hiprintTemplate);
+      let template = this.defaultTemplate;
+      if (this.onTemplate) {
+        try {
+          const result = await this.onTemplate(this.defaultTemplate);
+          if (result) {
+            template = result;
+          }
+        } catch (error) {
+          console.error("onTemplate 执行失败:", error);
+        }
       }
+
       this.hiprintTemplate = new hiprint.PrintTemplate({
+        template,
         settingContainer: "#PrintElementOptionSetting", // 元素参数容器
         // paginationContainer: ".hiprint-printPagination", //多页打印
         history: true,
         onDataChanged: (type, json) => {
-          // 模板发生改变回调
           console.log(type); // 新增、移动、删除、修改(参数调整)、大小、旋转
           console.log(json); // 返回 template
         },
-        // fontList: [
-        //   { title: "微软雅黑", value: "Microsoft YaHei" },
-        //   { title: "黑体", value: "STHeitiSC-Light" },
-        //   { title: "思源黑体", value: "SourceHanSansCN-Normal" },
-        //   { title: "王羲之书法体", value: "王羲之书法体" },
-        //   { title: "宋体", value: "SimSun" },
-        //   { title: "华为楷体", value: "STKaiti" },
-        //   { title: "cursive", value: "cursive" },
-        // ],
       });
+      this.$refs.paperSelector.curPaper = { width: 210, height: 296.6 };
       // 构建 并填充到 容器中
       // 可以先 console.log($("#hiprint-printTemplate")) 看看是否有该 dom
-      this.hiprintTemplate.design("#hiprint-printTemplate");
+      this.hiprintTemplate.design("#hiprint-printTemplate", {
+        grid: this.grid,
+      });
     },
-    print() {
+    async print() {
       // 使用外部传入的打印数据
       let data = this.printData;
+      if (this.onPrintData) {
+        try {
+          const result = await this.onPrintData(this.printData);
+          if (result) {
+            data = result;
+          }
+        } catch (error) {
+          console.error("onPrintData 执行失败:", error);
+        }
+      }
       // 参数: 打印时设置 左偏移量，上偏移量
       let options = { leftOffset: -1, topOffset: -1 };
       // 扩展
       let ext = {
-        callback: () => {
-          console.log("浏览器打印窗口已打开");
-        },
-        styleHandler: () => {
-          // 重写 文本 打印样式
-          return "<style>.hiprint-printElement-text{color:red !important;}</style>";
-        },
+        // callback: () => {
+        //   console.log("浏览器打印窗口已打开");
+        // },
+        // styleHandler: () => {
+        //   // 重写 文本 打印样式
+        //   return "<style>.hiprint-printElement-text{color:red !important;}</style>";
+        // },
       };
       // 调用浏览器打印
       this.hiprintTemplate.print(data, options, ext);
@@ -156,15 +194,18 @@ export default {
       const json = this.hiprintTemplate.getJson();
       const dataStr = JSON.stringify(json, null, 2);
       const blob = new Blob([dataStr], { type: "application/json" });
-      const url = URL.createObjectURL(blob);
-      const link = document.createElement("a");
-      link.href = url;
-      link.download = `print-template-${Date.now()}.json`;
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-      URL.revokeObjectURL(url);
-      alert("导出成功!");
+      console.log("保存", JSON.parse(dataStr));
+      this.$emit("submit", JSON.parse(dataStr));
+      this.close();
+      // const url = URL.createObjectURL(blob);
+      // const link = document.createElement("a");
+      // link.href = url;
+      // link.download = `print-template-${Date.now()}.json`;
+      // document.body.appendChild(link);
+      // link.click();
+      // document.body.removeChild(link);
+      // URL.revokeObjectURL(url);
+      // alert("导出成功!");
     },
     clearPaper() {
       this.hiprintTemplate.clear();
@@ -525,7 +566,7 @@ button i {
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 9999;
+  z-index: 2000;
 }
 
 .print-dialog {
@@ -563,6 +604,12 @@ button i {
   flex: 1;
   overflow: hidden;
   padding: 10px;
+  display: flex;
+  flex-direction: column;
+}
+.print-dialog-body .main {
+  flex: 1;
+  overflow: hidden;
 }
 </style>
 
@@ -570,4 +617,9 @@ button i {
 .button-item {
   height: 40px;
 }
+.header-box {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
 </style>