ol-base-components 2.9.4 → 3.1.0

package/src/package/index.js

@@ -3,6 +3,7 @@ import OlSearch from "./formSearch";
 import Dialog from "./dialog";
 import OlForm from "./form";
 import OlNumberRange from "./numberRange";
+import OlPrint, { Hiprint } from "./print";
 
 import SwaggerClient from "swagger-client";
 
@@ -204,7 +205,7 @@ function hideLoading() {
   }
 }
 
-const components = [OlTable, OlSearch, Dialog, OlForm, OlNumberRange];
+const components = [OlTable, OlSearch, Dialog, OlForm, OlNumberRange, OlPrint];
 const install = async function (Vue) {
   // 设置全局数据
   components.map(item => {
@@ -214,5 +215,5 @@ const install = async function (Vue) {
 };
 
 export default install;
-export { OlTable, OlSearch, Dialog, OlForm, OlNumberRange };
-export { swaggerInstall, swaggerUnload };
+export { OlTable, OlSearch, Dialog, OlForm, OlNumberRange, OlPrint };
+export { swaggerInstall, swaggerUnload, Hiprint };

package/src/package/print/index.js

@@ -0,0 +1,78 @@
+import OlPrint from "./src/index.vue";
+
+// 方式1：组件方式注册
+OlPrint.install = function (Vue) {
+  Vue.component("ol-print", OlPrint);
+};
+
+// 方式2：插件方式注册（全局方法）
+let printInstance = null;
+let container = null;
+
+const Hiprint = {
+  install(Vue) {
+    const hiprint = function (options) {
+      const { printData, onPrintData, defaultTemplate, onTemplate, onSubmit } = options;
+      // 销毁旧实例
+      if (printInstance) {
+        printInstance.$destroy();
+        if (container && container.parentNode) {
+          container.parentNode.removeChild(container);
+        }
+        printInstance = null;
+        container = null;
+      }
+
+      // 创建新实例
+      container = document.createElement("div");
+      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,
+      });
+
+      // 监听 submit 事件
+      if (onSubmit && typeof onSubmit === "function") {
+        printInstance.$on("submit", json => {
+          onSubmit(json);
+        });
+      }
+
+      printInstance.$mount(container);
+
+      // 返回实例，方便外部调用
+      return printInstance;
+    };
+    Vue.prototype.$hiprint = hiprint;
+
+    // 快捷方法：直接打印
+    Vue.prototype.$hiprint.print = function (options) {
+      const instance = hiprint(options);
+      instance.print();
+      instance.$nextTick(() => {
+        instance.close();
+      });
+    };
+  },
+};
+
+// 导出组件和插件
+export { OlPrint, Hiprint };
+export default OlPrint;

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>