cui-print 1.0.28

package/dist/print-designer-api/print-global-style/print-form-component.less

@@ -0,0 +1,161 @@
+// 输入框
+.print-form_input {
+  .break;
+  position: relative;
+}
+// 多行输入框
+.print-form_textarea {
+  .break;
+  position: relative;
+  line-height: 1.3;
+}
+// 单选框
+.print-form_radio-group {
+  position: relative;
+  width: 100%;
+  height: auto;
+  display: flex;
+  flex-flow: row;
+  flex-wrap: wrap;
+  --wui-printing-radio-border: 1px solid #969696;
+  &.print-form_radio-group--large {
+    --wui-printing-radio-font-size: 14px;
+    --wui-printing-radio-icon-width: 14px;
+    --wui-printing-radio-icon-height: 14px;
+    --wui-printing-radio-min-height: 40px;
+  }
+  &.print-form_radio-group--default {
+    --wui-printing-radio-font-size: 14px;
+    --wui-printing-radio-icon-width: 14px;
+    --wui-printing-radio-icon-height: 14px;
+    --wui-printing-radio-min-height: 32px;
+  }
+  &.print-form_radio-group--small {
+    --wui-printing-radio-font-size: 12px;
+    --wui-printing-radio-icon-width: 12px;
+    --wui-printing-radio-icon-height: 12px;
+    --wui-printing-radio-min-height: 24px;
+  }
+  .print-form_radio {
+    display: flex;
+    flex-flow: row;
+    align-items: center;
+    margin-right: 10px;
+    &:last-of-type {
+      margin-right: 0;
+    }
+    .print-form_radio-icon {
+      width: var(--wui-printing-radio-icon-width);
+      height: var(--wui-printing-radio-icon-height);
+      border: var(--wui-printing-radio-border);
+      border-radius: 50%;
+      flex-shrink: 0;
+      flex-grow: 0;
+    }
+    .print-form_radio-label {
+      display: flex;
+      align-items: center;
+      padding-left: 8px;
+      line-height: 16px;
+      min-height: var(--wui-printing-radio-min-height);
+      font-size: var(--wui-printing-radio-font-size);
+    }
+  }
+  .print-form_radio.print-form_radio--active {
+    .print-form_radio-icon {
+      position: relative;
+      background: var(--wui-printing-color--primary);
+      border-color: var(--wui-printing-color--primary);
+      &::after {
+        content: "";
+        background-color: #fff;
+        width: 4px;
+        height: 4px;
+        border-radius: 50%;
+        position: absolute;
+        left: 4px;
+        top: 4px;
+      }
+    }
+  }
+}
+// 多选框
+.print-form_checkbox-group {
+  position: relative;
+  width: 100%;
+  height: auto;
+  display: flex;
+  flex-flow: row;
+  flex-wrap: wrap;
+  --wui-printing-checkbox-border: 1px solid #969696;
+  &.print-form_checkbox-group--large {
+    --wui-printing-checkbox-font-size: 14px;
+    --wui-printing-checkbox-icon-width: 14px;
+    --wui-printing-checkbox-icon-height: 14px;
+    --wui-printing-checkbox-min-height: 40px;
+  }
+  &.print-form_checkbox-group--default {
+    --wui-printing-checkbox-font-size: 14px;
+    --wui-printing-checkbox-icon-width: 14px;
+    --wui-printing-checkbox-icon-height: 14px;
+    --wui-printing-checkbox-min-height: 32px;
+  }
+  &.print-form_checkbox-group--small {
+    --wui-printing-checkbox-font-size: 12px;
+    --wui-printing-checkbox-icon-width: 12px;
+    --wui-printing-checkbox-icon-height: 12px;
+    --wui-printing-checkbox-min-height: 24px;
+  }
+  .print-form_checkbox {
+    display: flex;
+    flex-flow: row;
+    align-items: center;
+    margin-right: 10px;
+    &:last-of-type {
+      margin-right: 0;
+    }
+    .print-form_checkbox-icon {
+      width: var(--wui-printing-checkbox-icon-width);
+      height: var(--wui-printing-checkbox-icon-height);
+      border: var(--wui-printing-checkbox-border);
+      border-radius: 2px;
+      flex-shrink: 0;
+      flex-grow: 0;
+    }
+    .print-form_checkbox-label {
+      display: flex;
+      align-items: center;
+      padding-left: 8px;
+      line-height: 16px;
+      min-height: var(--wui-printing-checkbox-min-height);
+      font-size: var(--wui-printing-checkbox-font-size);
+    }
+  }
+  .print-form_checkbox.print-form_checkbox--active {
+    .print-form_checkbox-icon {
+      position: relative;
+      background: var(--wui-printing-color--primary);
+      border-color: var(--wui-printing-color--primary);
+      &::after {
+        content: "✔";
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        text-align: center;
+        line-height: 12px;
+        font-size: 10px;
+        color: #fff;
+      }
+    }
+  }
+}
+// 选择器
+.print-form_select {
+  position: relative;
+}
+// 日期时间
+.print-form_datetime {
+  position: relative;
+}

package/dist/print-designer-api/print-global-style/print-form-item.less

@@ -0,0 +1,162 @@
+.print-form-item {
+  width: 100%;
+  display: flex;
+  flex-flow: row;
+  & > .print-form-item_label {
+    padding-right: 12px;
+    display: inline-flex;
+    justify-content: flex-end;
+  }
+  & > .print-form-item_content {
+    width: 0;
+    flex: 1;
+  }
+}
+// 表单全局配置 标签-左
+.print-form_label-left {
+  .print-form-item {
+    display: flex;
+    flex-flow: row;
+    & > .print-form-item_label {
+      display: inline-flex;
+      justify-content: flex-start;
+    }
+    & > .print-form-item_content {
+      width: 0;
+      flex: 1;
+    }
+  }
+}
+// 表单全局配置 标签-右
+.print-form_label-right {
+  .print-form-item {
+    display: flex;
+    flex-flow: row;
+    & > .print-form-item_label {
+      display: inline-flex;
+      justify-content: flex-end;
+    }
+    & > .print-form-item_content {
+      width: 0;
+      flex: 1;
+    }
+  }
+}
+// 表单全局配置 标签-上
+.print-form_label-top {
+  .print-form-item {
+    display: flex;
+    flex-flow: column;
+    & > .print-form-item_label {
+      display: block;
+      text-align: left;
+      width: 100%;
+    }
+    & > .print-form-item_content {
+      width: 100%;
+    }
+  }
+}
+// 表单全局配置 表单尺寸 大
+.print-form-large {
+  &.print-form_label-top {
+    .print-form-item {
+      & > .print-form-item_label {
+        margin-bottom: 12px;
+      }
+    }
+  }
+  .print-form-item {
+    --wui-printing-font-size: 14px;
+    & > .print-form-item_label {
+      height: 40px;
+      line-height: 40px;
+      font-size: var(--wui-printing-font-size);
+    }
+    & > .print-form-item_content {
+      line-height: 40px;
+      min-height: 40px;
+      font-size: var(--wui-printing-font-size);
+    }
+  }
+}
+// 表单全局配置 表单尺寸 默认
+.print-form-default {
+  .print-form-item {
+    --wui-printing-font-size: 14px;
+    & > .print-form-item_label {
+      height: 32px;
+      line-height: 32px;
+      font-size: var(--wui-printing-font-size);
+    }
+    & > .print-form-item_content {
+      line-height: 32px;
+      min-height: 32px;
+      font-size: var(--wui-printing-font-size);
+    }
+  }
+}
+// 表单全局配置 表单尺寸 小
+.print-form-small {
+  .print-form-item {
+    --wui-printing-font-size: 12px;
+    & > .print-form-item_label {
+      height: 24px;
+      line-height: 24px;
+      font-size: var(--wui-printing-font-size);
+    }
+    & > .print-form-item_content {
+      line-height: 24px;
+      min-height: 24px;
+      font-size: var(--wui-printing-font-size);
+    }
+  }
+}
+// 表单项单独配置
+.print-form-item {
+  // 标签-左
+  &.print-form-item_label-left {
+    display: flex;
+    flex-flow: row;
+    & > .print-form-item_label {
+      display: inline-flex;
+      justify-content: flex-start;
+    }
+    & > .print-form-item_content {
+      width: 0;
+      height: auto;
+      flex: 1;
+    }
+  }
+  // 标签-右
+  &.print-form-item_label-right {
+    display: flex;
+    flex-flow: row;
+    & > .print-form-item_label {
+      display: inline-flex;
+      justify-content: flex-end;
+    }
+    & > .print-form-item_content {
+      width: 0;
+      height: auto;
+      flex: 1;
+    }
+  }
+  // 标签-上
+  &.print-form-item_label-top {
+    display: flex;
+    flex-flow: column;
+    & > .print-form-item_label {
+      height: auto;
+      line-height: 22px;
+      margin-bottom: 8px;
+      display: block;
+      text-align: left;
+    }
+    & > .print-form-item_content {
+      width: auto;
+      height: 0;
+      flex: 1;
+    }
+  }
+}

package/dist/print-designer-api/print-global-style/printing.less

@@ -0,0 +1,16 @@
+@media print {
+  body {
+    font-family: "Avenir", Helvetica, Arial, sans-serif;
+    font-size: 14px;
+  }
+  * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+  }
+  @page {
+    margin: 0 !important;
+  }
+}

package/dist/print-designer-api/print-soket.js

@@ -0,0 +1,31 @@
+import { io } from "socket.io-client";
+
+//连接
+const PrintSocket = io("http://localhost:17521", {
+  transports: ["websocket"],
+  auth: {
+    token: "" // 在此处填入你 client 设置的 token，缺省可留空
+  }
+});
+//连接成功
+PrintSocket.on("connect", () => {
+  console.log("PrintSocket-连接成功");
+});
+//连接断开
+PrintSocket.on("disconnect", () => {
+  // console.log("disconnect");
+});
+//获取客户端信息
+PrintSocket.on("clientInfo", (clientInfo) => {
+  //  console.log("PrintSocket-客户端信息", clientInfo);
+});
+//获取打印机列表
+PrintSocket.on("printerList", (printerList) => {
+  //  console.log("PrintSocket-打印机列表", printerList);
+});
+//连接错误
+PrintSocket.on("connect_error", (error) => {
+  // console.error("Connection error:", error);
+});
+window.WuiPrintSocket = PrintSocket;
+export default PrintSocket;

package/dist/print-designer-api/use-create-html/create-html-utils.js

@@ -0,0 +1,43 @@
+export const formatComponentClass = ({ componentItem, className }) => {
+  let classList = [];
+  if (!!className) {
+    classList.push(className);
+  }
+  let continueConfig = !!componentItem._continueConfig ? componentItem._continueConfig : false;
+  if (!!continueConfig) {
+    classList.push("print-continue-blank");
+  }
+  if (!!continueConfig && !!continueConfig.isBefore) {
+    classList.push("print-continue-blank--before");
+  }
+  if (!!continueConfig && !!continueConfig.isAfter) {
+    classList.push("print-continue-blank--after");
+  }
+  return classList.join(" ");
+};
+export const formatDate = ({ dateText, format } = {}) => {
+  if (!dateText) {
+    return dateText;
+  }
+  // 获取日期的各个部分
+  const dateInstance = new Date(dateText);
+  const year = dateInstance.getFullYear();
+  const month = String(dateInstance.getMonth() + 1).padStart(2, "0"); // 月份从0开始，所以要加1
+  const day = String(dateInstance.getDate()).padStart(2, "0");
+  const hours = String(dateInstance.getHours()).padStart(2, "0");
+  const minutes = String(dateInstance.getMinutes()).padStart(2, "0");
+  const seconds = String(dateInstance.getSeconds()).padStart(2, "0");
+
+  // 用格式化字符串中的占位符替换为具体的日期时间值
+  return format
+    .replace("YYYY", year)
+    .replace("MM", month)
+    .replace("DD", day)
+    .replace("HH", hours)
+    .replace("mm", minutes)
+    .replace("ss", seconds);
+};
+export default {
+  formatComponentClass,
+  formatDate
+};

package/dist/print-designer-api/use-create-html/index.js

@@ -0,0 +1,287 @@
+import useBaseComponentHelper from "./use-base-component-helper";
+import useFormComponentHelper from "./use-form-component-helper";
+import useComplexTableHelper from "./use-complex-table-helper/index.js";
+import useGridHelper from "./use-grid-helper";
+import useTableLayoutHelper from "./use-table-layout-helper";
+import useFormat from "./use-format/index.js";
+import { deepCopy } from "../print-designer-utils";
+export default ({
+  printData,
+  printConfig,
+  formConfig,
+  layoutConfig,
+  printedRowCount = 0,
+  printedRows = [],
+  continuePrintElements,
+  tablePaginationElements,
+  errorLogs
+} = {}) => {
+  // formatInstance会修改print，需要先将printData与外部数据断开引用
+  printData = deepCopy(printData);
+  if (typeof printedRowCount != "number" || printedRowCount < 0) {
+    printedRowCount = 0;
+  }
+  const formatInstance = useFormat({
+    printData,
+    printConfig,
+    formConfig,
+    layoutConfig,
+    printedRowCount,
+    printedRows,
+    continuePrintElements,
+    tablePaginationElements
+  });
+  const newLayoutConfig = formatInstance.formatLayoutConfig();
+  console.log("格式化后的打印配置==>", {
+    printData,
+    printConfig,
+    formConfig,
+    layoutConfig: deepCopy(newLayoutConfig),
+    printedRowCount,
+    printedRows,
+    continuePrintElements
+  });
+  const baseComponentHelper = useBaseComponentHelper({
+    printData,
+    printConfig,
+    formConfig,
+    layoutConfig: newLayoutConfig,
+    errorLogs
+  });
+  const formComponentHelper = useFormComponentHelper({
+    printData,
+    printConfig,
+    formConfig,
+    layoutConfig: newLayoutConfig,
+    errorLogs
+  });
+  const complexTableHelper = useComplexTableHelper({
+    printData,
+    printConfig,
+    formConfig,
+    layoutConfig: newLayoutConfig,
+    errorLogs
+  });
+  const createHtmlByComponentItem = (componentItem) => {
+    let newHtml = "";
+    // 分页上边距
+    if (componentItem.type == "pageTop") {
+      newHtml = baseComponentHelper.createPageTopHtml(componentItem);
+      return newHtml;
+    }
+    // 分页下边距
+    if (componentItem.type == "pageBottom") {
+      newHtml = baseComponentHelper.createPageBottomHtml(componentItem);
+      return newHtml;
+    }
+    // 分页
+    if (componentItem.type == "pageBreak") {
+      newHtml = baseComponentHelper.createPageBreakHtml(componentItem);
+      return newHtml;
+    }
+    // 文本
+    if (componentItem.type == "text") {
+      let nowComponentProps = componentItem.props;
+      if (!nowComponentProps) {
+        errorLogs.push(`【文本】【${componentItem.id}】，缺少配置【props】`);
+        return newHtml;
+      }
+      newHtml = baseComponentHelper.createTextHtml(componentItem);
+      return newHtml;
+    }
+    // 动态文本
+    if (componentItem.type == "dynamicText") {
+      let nowComponentProps = componentItem.props;
+      if (!nowComponentProps) {
+        errorLogs.push(`【动态文本】【${nowComponentProps.label}】【${componentItem.id}】，缺少配置【props】`);
+        return newHtml;
+      }
+      if (!nowComponentProps.field) {
+        errorLogs.push(`【动态文本】【${nowComponentProps.label}】【${componentItem.id}】，【props】中缺少配置【field】`);
+        return newHtml;
+      }
+      newHtml = baseComponentHelper.createDynamicTextHtml(componentItem);
+      return newHtml;
+    }
+    // 表格
+    if (componentItem.type == "table") {
+      let nowComponentProps = componentItem.props;
+      if (!nowComponentProps) {
+        errorLogs.push(`【表格】【${componentItem.id}】，缺少配置【props】`);
+        return newHtml;
+      }
+      if (!nowComponentProps.field) {
+        errorLogs.push(`【表格】【${componentItem.id}】，【props】中缺少配置【field】`);
+        return newHtml;
+      }
+      newHtml = baseComponentHelper.createTableHtml(componentItem);
+      return newHtml;
+    }
+    // 复杂表格
+    if (componentItem.type == "complexTable") {
+      let nowComponentProps = componentItem.props;
+      if (!nowComponentProps) {
+        errorLogs.push(`【复杂表格】【${componentItem.id}】，缺少配置【props】`);
+        return newHtml;
+      }
+      if (!nowComponentProps.field) {
+        errorLogs.push(`【复杂表格】【${componentItem.id}】，【props】中缺少配置【field】`);
+        return newHtml;
+      }
+      newHtml = complexTableHelper.createComplexTableHtml(componentItem);
+      return newHtml;
+    }
+    // 条形码
+    if (componentItem.type == "barcode") {
+      let nowComponentProps = componentItem.props;
+      if (!nowComponentProps) {
+        errorLogs.push(`【条形码】【${componentItem.id}】，缺少配置【props】`);
+        return newHtml;
+      }
+      if (!nowComponentProps.field) {
+        errorLogs.push(`【条形码】【${componentItem.id}】，【props】中缺少配置【field】`);
+        return newHtml;
+      }
+      newHtml = baseComponentHelper.createBarcodeHtml(componentItem);
+      return newHtml;
+    }
+    // 二维码
+    if (componentItem.type == "qrcode") {
+      let nowComponentProps = componentItem.props;
+      if (!nowComponentProps) {
+        errorLogs.push(`【二维码】【${componentItem.id}】，缺少配置【props】`);
+        return newHtml;
+      }
+      if (!nowComponentProps.field) {
+        errorLogs.push(`【二维码】【${componentItem.id}】，【props】中缺少配置【field】`);
+        return newHtml;
+      }
+      newHtml = baseComponentHelper.createQrcodeHtml(componentItem);
+      return newHtml;
+    }
+    // 图片
+    if (componentItem.type == "image") {
+      let nowComponentProps = componentItem.props;
+      if (!nowComponentProps) {
+        errorLogs.push(`【图片】【${componentItem.id}】，缺少配置【props】`);
+        return newHtml;
+      }
+      newHtml = baseComponentHelper.createImageHtml(componentItem);
+      return newHtml;
+    }
+    // 输入框
+    if (componentItem.type == "input") {
+      let nowComponentProps = componentItem.props;
+      let nowFormItemProps = componentItem.formItemProps;
+      if (!nowComponentProps) {
+        errorLogs.push(`【输入框】【${nowFormItemProps.label}】【${componentItem.id}】，缺少配置【props】`);
+        return newHtml;
+      }
+      if (!nowComponentProps.field) {
+        errorLogs.push(`【输入框】【${nowFormItemProps.label}】【${componentItem.id}】，【props】中缺少配置【field】`);
+        return newHtml;
+      }
+      newHtml = formComponentHelper.createInputHtml(componentItem);
+      return newHtml;
+    }
+    // 多行输入框
+    if (componentItem.type == "textarea") {
+      let nowComponentProps = componentItem.props;
+      let nowFormItemProps = componentItem.formItemProps;
+      if (!nowComponentProps) {
+        errorLogs.push(`【多行输入框】【${nowFormItemProps.label}】【${componentItem.id}】，缺少配置【props】`);
+        return newHtml;
+      }
+      if (!nowComponentProps.field) {
+        errorLogs.push(`【多行输入框】【${nowFormItemProps.label}】【${componentItem.id}】，【props】中缺少配置【field】`);
+        return newHtml;
+      }
+      newHtml = formComponentHelper.createTextareaHtml(componentItem);
+      return newHtml;
+    }
+    // 单选框
+    if (componentItem.type == "radio") {
+      let nowComponentProps = componentItem.props;
+      let nowFormItemProps = componentItem.formItemProps;
+      if (!nowComponentProps) {
+        errorLogs.push(`【单选框】【${nowFormItemProps.label}】【${componentItem.id}】，缺少配置【props】`);
+        return newHtml;
+      }
+      if (!nowComponentProps.field) {
+        errorLogs.push(`【单选框】【${nowFormItemProps.label}】【${componentItem.id}】，【props】中缺少配置【field】`);
+        return newHtml;
+      }
+      newHtml = formComponentHelper.createRadioHtml(componentItem);
+      return newHtml;
+    }
+    // 多选框
+    if (componentItem.type == "checkbox") {
+      let nowComponentProps = componentItem.props;
+      let nowFormItemProps = componentItem.formItemProps;
+      if (!nowComponentProps) {
+        errorLogs.push(`【多选框】【${nowFormItemProps.label}】【${componentItem.id}】，缺少配置【props】`);
+        return newHtml;
+      }
+      if (!nowComponentProps.field) {
+        errorLogs.push(`【多选框】【${nowFormItemProps.label}】【${componentItem.id}】，【props】中缺少配置【field】`);
+        return newHtml;
+      }
+      newHtml = formComponentHelper.createCheckboxHtml(componentItem);
+      return newHtml;
+    }
+    // 选择器
+    if (componentItem.type == "select") {
+      let nowComponentProps = componentItem.props;
+      let nowFormItemProps = componentItem.formItemProps;
+      if (!nowComponentProps) {
+        errorLogs.push(`【选择器】【${nowFormItemProps.label}】【${componentItem.id}】，缺少配置【props】`);
+        return newHtml;
+      }
+      if (!nowComponentProps.field) {
+        errorLogs.push(`【选择器】【${nowFormItemProps.label}】【${componentItem.id}】，【props】中缺少配置【field】`);
+        return newHtml;
+      }
+      newHtml = formComponentHelper.createSelectHtml(componentItem);
+      return newHtml;
+    }
+    // 选择器
+    if (componentItem.type == "datetime") {
+      let nowComponentProps = componentItem.props;
+      let nowFormItemProps = componentItem.formItemProps;
+      if (!nowComponentProps) {
+        errorLogs.push(`【日期时间】【${nowFormItemProps.label}】【${componentItem.id}】，缺少配置【props】`);
+        return newHtml;
+      }
+      if (!nowComponentProps.field) {
+        errorLogs.push(`【日期时间】【${nowFormItemProps.label}】【${componentItem.id}】，【props】中缺少配置【field】`);
+        return newHtml;
+      }
+      newHtml = formComponentHelper.createDatetimeHtml(componentItem);
+      return newHtml;
+    }
+  };
+  const gridHelper = useGridHelper({
+    printData,
+    printConfig,
+    formConfig,
+    layoutConfig: newLayoutConfig,
+    createHtmlByComponentItem,
+    errorLogs
+  });
+  const tableLayoutHelper = useTableLayoutHelper({
+    printData,
+    printConfig,
+    formConfig,
+    layoutConfig: newLayoutConfig,
+    createHtmlByComponentItem,
+    errorLogs
+  });
+  const formatLayoutConfig = () => {};
+  return {
+    createHtmlByComponentItem,
+    formatLayoutConfig,
+    gridHelper: gridHelper,
+    tableLayoutHelper: tableLayoutHelper,
+    layoutConfig: newLayoutConfig
+  };
+};