yh-hiprint 1.0.9

package/README.md

@@ -0,0 +1,14 @@
+## yh-hiprint
+
+力控远海技术中心封装的 hiprint
+
+## 安装
+
+配置好[云效NPM私有仓库](https://packages.aliyun.com/npm/npm-registry/guide)后,直接执行如下命令安装
+```shell
+npm install yh-hiprint
+```
+
+## 使用
+
+参考[中控项目](https://codeup.aliyun.com/60765e0161a945067837bb5f/Core/Core-Service) `中控系统/02-Src/web/src/view/hiprint/designer.vue`

package/column-field.js

@@ -0,0 +1,40 @@
+import $ from "jquery";
+
+export default function (tableFields) {
+  function t() {
+    this.name = "field";
+  }
+
+  return (
+    (t.prototype.createTarget = function (t, i, e) {
+      //  t: 元素对象，i: 元素options, e: 元素printElementType
+      return (
+        (this.target = $(
+          `<div class="hiprint-option-item">
+  <div class="hiprint-option-item-label">字段选择</div>
+  <div class="hiprint-option-item-field">
+    <select class="auto-submit">${tableFields.value.map((item) => {
+      return `<option value="${item}">${item}</option>`;
+    })}</select>
+  </div>
+</div>`
+        )),
+        this.target
+      );
+    }),
+    // 获取值
+    (t.prototype.getValue = function () {
+      var t = this.target.find("select").val();
+      if (t) return t;
+    }),
+    // 设置值
+    (t.prototype.setValue = function (t) {
+      this.target.find("select").val(t);
+    }),
+    // 销毁 DOM
+    (t.prototype.destroy = function () {
+      this.target.remove();
+    }),
+    t
+  );
+}

package/font-size.js

@@ -0,0 +1,46 @@
+import $ from "jquery";
+export default (function () {
+  function t() {
+    this.name = "fontSize"; // 重写的参数 key
+  }
+  // 涉及修改元素样式， 添加一个 css 方法
+  return (
+    (t.prototype.css = function (t, e) {
+      if (t && t.length) {
+        if (e) return t.css("font-size", e + "pt"), "font-size:" + e + "pt";
+        t[0].style.fontSize = "";
+      }
+      return null;
+    }),
+    // 创建 DOM
+    (t.prototype.createTarget = function () {
+      let list = [8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 26, 28, 36, 48, 72];
+      let fontSizeList = '\n            <option value="" >默认</option>';
+      list.forEach(function (e) {
+        fontSizeList += '\n            <option value="' + e + '">' + e + "pt</option>";
+      });
+      this.target = $(
+        ' <div class="hiprint-option-item">\n        <div class="hiprint-option-item-label">\n        字体大小\n        </div>\n        <div class="hiprint-option-item-field">\n        <select class="auto-submit">        </select>\n        </div>\n    </div>'
+      );
+      this.target.find(".auto-submit").append($(fontSizeList));
+      return this.target;
+    }),
+    // 获取值
+    (t.prototype.getValue = function () {
+      var t = this.target.find("select").val();
+      if (t) return parseFloat(t.toString());
+    }),
+    // 设置值
+    (t.prototype.setValue = function (t) {
+      t &&
+        (this.target.find('option[value="' + t + '"]').length ||
+          this.target.find("select").prepend('<option value="' + t + '" >' + t + "</option>"));
+      this.target.find("select").val(t);
+    }),
+    // 销毁 DOM
+    (t.prototype.destroy = function () {
+      this.target.remove();
+    }),
+    t
+  );
+})();

package/hooks/useHiprint.js

@@ -0,0 +1,210 @@
+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 } from "vue";
+
+export const hiprint = h;
+export const defaultElementTypeProvider = p;
+
+export function print(
+  provider = defaultElementTypeProvider,
+  template,
+  ...args
+) {
+  hiprint.init({
+    providers: [new provider()],
+  });
+  const hiprintTemplate = new hiprint.PrintTemplate({
+    template: template,
+  });
+  hiprintTemplate.print(...args);
+  return hiprintTemplate;
+}
+
+export function print2(
+  provider = defaultElementTypeProvider,
+  template,
+  ...args
+) {
+  hiprint.init({
+    providers: [new provider()],
+  });
+  const hiprintTemplate = new hiprint.PrintTemplate({
+    template: template,
+  });
+  hiprintTemplate.print2(...args);
+  return hiprintTemplate;
+}
+
+export function usePaper() {
+  const paperType = ref("A4");
+  const paperWidth = ref(210);
+  const paperHeight = ref(296.6);
+
+  const 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,
+    },
+  };
+
+  function setPaper(type, callback) {
+    if (type !== "other") {
+      let { width, height } = paperTypes[type];
+      paperWidth.value = width;
+      paperHeight.value = height;
+    }
+    callback();
+  }
+
+  return {
+    paperType,
+    paperWidth,
+    paperHeight,
+    setPaper,
+  };
+}
+
+export function useScale(callback) {
+  const scaleValue = ref(1);
+  const scalePercentage = computed(() => {
+    return `${(scaleValue.value * 100).toFixed(0)}%`;
+  });
+  const canZoomIn = computed(() => {
+    return scaleValue.value > 0.5;
+  });
+  const canZoomOut = computed(() => {
+    return scaleValue.value < 1.5;
+  });
+  function zoomIn() {
+    scaleValue.value = scaleValue.value - 0.1;
+    callback();
+  }
+  function zoomOut() {
+    scaleValue.value = scaleValue.value + 0.1;
+    callback();
+  }
+  return {
+    scaleValue,
+    scalePercentage,
+    canZoomIn,
+    canZoomOut,
+    zoomIn,
+    zoomOut,
+  };
+}
+
+export function useDataSource(axios) {
+  const detailData = ref();
+  function getDetail(id) {
+    return axios
+      .request({
+        url: `/printTemplate/get/${id}`,
+        method: "post",
+      })
+      .then((res) => {
+        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;
+        } else {
+          formCode.value = "";
+        }
+        detailData.value = res.data.data;
+      });
+  }
+  const listCode = ref([]);
+  const dataSourceList = ref([]);
+  const listColumns = computed(() => {
+    return codeMapDataSource.value[listCode.value].map((item) => {
+      let index = item.indexOf("[");
+      return item.substring(index + 1, item.length - 1);
+    });
+  });
+
+  const formCode = ref([]);
+  const formColumns = computed(() => {
+    let arr = [];
+    if (formCode.value && formCode.value.length) {
+      formCode.value.forEach((item) => {
+        arr = arr.concat(codeMapDataSource.value[item]);
+      });
+    }
+    return arr;
+  });
+  const dataSourceForm = ref([]);
+  const codeMapDataSource = ref({});
+  function getDataSourceList() {
+    return axios
+      .request({
+        url: "/printTemplate/getDsList",
+        method: "post",
+      })
+      .then((res) => {
+        res.data.list.forEach((item) => {
+          if (item.columns) {
+            codeMapDataSource.value[item.code] = item?.columns
+              ?.split(",")
+              ?.map((col) => `$${item.code}[${col.toUpperCase()}]`) || [];
+          }
+          if (item.type === "LIST") {
+            dataSourceList.value.push({
+              label: item.name,
+              value: item.code,
+            });
+          } else {
+            dataSourceForm.value.push({
+              label: item.name,
+              value: item.code,
+            });
+          }
+        });
+      });
+  }
+
+  const dataSource = ref([]);
+  return {
+    detailData,
+    getDetail,
+    listCode,
+    dataSourceList,
+    listColumns,
+    formCode,
+    formColumns,
+    dataSourceForm,
+    codeMapDataSource,
+    getDataSourceList,
+    dataSource,
+  };
+}
+
+window.hiprint = hiprint;

package/index.d.ts

@@ -0,0 +1,58 @@
+declare module "yh-hiprint";
+
+/** JQuery 简化dom操作的库 */
+export declare const jquery: JQuery;
+
+/** hiprint 字体大小配置 */
+export declare const fontSize;
+/** hiprint 缩放配置 */
+export declare const scale;
+/** hiprint 层级配置 */
+export declare const zIndex;
+/** hiprint 侧边栏配置 */
+export declare const panel;
+
+export declare const hiprint;
+export declare const defaultElementTypeProvider: (options: any) => {
+  addElementTypes: (context) => void;
+};
+export declare const print;
+export declare const print2;
+export declare const usePaper;
+
+/**
+ * 打印组件的缩放
+ * @param callback 每次缩放后都会执行的回调函数
+ */
+export declare const useScale: (callback: () => void) => {
+  /** 当前缩放值 */
+  scaleValue: Ref<number>;
+  /** 当前百分比展示字符串 */
+  scalePercentage: ComputedRef<string>;
+  /** 当前是否能缩小 */
+  canZoomIn: ComputedRef<boolean>;
+  /** 当前是否能放大 */
+  canZoomOut: ComputedRef<boolean>;
+  /** 缩小 */
+  zoomIn: () => void;
+  /** 放大 */
+  zoomOut: () => void;
+};
+
+/**
+ * 打印组件数据源
+ * @param axios 系统中的请求实体 `src/libs/api.request.js`
+ */
+export declare const useDataSource: (axios) => {
+  detailData: Ref<any>;
+  getDetail: (id) => void;
+  listCode: Ref<any[]>;
+  dataSourceList: Ref<any[]>;
+  listColumns: ComputedRef<string[]>;
+  formCode: Ref<any[]>;
+  formColumns: ComputedRef<string[]>;
+  dataSourceForm: Ref<any[]>;
+  codeMapDataSource: Ref<any>;
+  getDataSourceList: () => void;
+  dataSource: Ref<string[]>;
+};

package/index.js

@@ -0,0 +1,15 @@
+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";