cloud-web-corejs 1.0.54-dev.805 → 1.0.54-dev.807

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cloud-web-corejs",
   "private": false,
-  "version": "1.0.54-dev.805",
+  "version": "1.0.54-dev.807",
   "scripts": {
     "dev": "vue-cli-service serve",
     "dev:micro": "vue-cli-service serve --port 17527",

package/src/components/xform/form-designer/indexMixin.js

@@ -7,6 +7,7 @@ import {
   getQueryParam,
   traverseAllWidgets,
   traverseAllWidgetsNew,
+  flattenLeafColumns,
 } from "../../../components/xform/utils/util";
 import {
   MOCK_CASE_URL,
@@ -561,9 +562,12 @@ modules = {
             widget.tableField &&
             (widget.type === "data-table" || widget.type === "list-h5")
           ) {
-            let vailColumns = widget.options.tableColumns.filter(
-              (item) => item.prop && item.label
-            );
+            // 与 form-render/indexMixin 的 getFormTemplateTableDTOs 同口径：
+            // 分组表头自身 prop 为空，业务字段挂在 children 上，必须先展平叶子列，
+            // 否则「列全部分组」的表格算不出字段，子表不会写进模板表结构。
+            let vailColumns = flattenLeafColumns(
+              widget.options.tableColumns
+            ).filter((item) => item.prop && item.label);
             let itemFields = [];
             vailColumns.forEach((item) => {
               if (item.formatS === "editSearch") {

package/src/components/xform/form-render/indexMixin.js

@@ -25,6 +25,7 @@ import {
   traverseAllWidgetsNew,
   columnFormatMap,
   getColumnWidgetOptions,
+  flattenLeafColumns,
   applyColumnMetaToFieldWidget,
   applyColumnMetaToColumnRow,
   cloneColumnFieldWidget,
@@ -3888,9 +3889,12 @@ modules = {
           if (widget.type === "data-table" || widget.type === "list-h5") {
             let isTreeTable = widget.options.isTreeTable || false;
             if (submitFlag) {
-              let vailColumns = widget.options.tableColumns.filter(
-                (item) => item.prop && item.label
-              );
+              // 必须先展平叶子列：分组表头自身 prop 为空，业务字段全挂在 children 上。
+              // 只过滤顶层时，「列全部分组」的表格会算出 0 个字段，被下面的
+              // itemFields.length 判空拦掉，整张子表不进 DTO，保存报文里直接没有这张表。
+              let vailColumns = flattenLeafColumns(
+                widget.options.tableColumns
+              ).filter((item) => item.prop && item.label);
               let itemFields = [];
               vailColumns.forEach((item) => {
                 if (item.formatS === "editSearch") {

package/src/components/xform/utils/util.js

@@ -878,6 +878,29 @@ export function cloneColumnFieldWidget(fieldWidget) {
   return newWidget;
 }
 
+/**
+ * 展平数据表格列配置，只返回叶子列。
+ * tableColumns 里带 children 的是分组表头（自身 prop 为空），真正的业务字段挂在 children 上，
+ * 因此凡是按 prop 取字段的逻辑都必须先展平，不能只看顶层。
+ */
+export function flattenLeafColumns(columns) {
+  let result = [];
+  let loopDo = (cols) => {
+    (cols || []).forEach((item) => {
+      if (!item) {
+        return;
+      }
+      if (item.children && item.children.length) {
+        loopDo(item.children);
+      } else {
+        result.push(item);
+      }
+    });
+  };
+  loopDo(columns);
+  return result;
+}
+
 /** 将列级 label / keyName / required 同步到列内 field widget（动态列 label 在列顶层） */
 export function applyColumnMetaToFieldWidget(fieldWidget, row, isEdit = false) {
   if (!fieldWidget || !row) {

package/src/utils/pdfUtil.js

@@ -1,71 +1,301 @@
-import html2canvas from "html2canvas";
-import jspdf from "jspdf";
-export async function exportPDF(option) {
-  const dom = option.dom;
-  let fileName = option.fileName;
-  if (!dom) return
-  let height = "";
-  // 获取dom元素
-  let dom1 = dom.querySelector(".d-cont");
-  try {
-    if (dom1) {
-      height = dom1.style.height;
-      dom1.style.height = "auto";
-    }
-
-    if (dom) {
-      html2canvas(dom).then(async (canvas) => {
-        // A4纸，纵向
-        let pdf = new jspdf("p", "mm", "a4");
-        let ctx = canvas.getContext("2d");
-        let a4w = 190;
-        // A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277
-        let a4h = 277;
-        // 按A4显示比例换算一页图像的像素高度
-        let imgHeight = Math.floor((a4h * canvas.width) / a4w);
-        let renderedHeight = 0;
-        while (renderedHeight < canvas.height) {
-          let page = document.createElement("canvas");
-          page.width = canvas.width;
-          // 可能内容不足一页
-          page.height = Math.min(imgHeight, canvas.height - renderedHeight);
-          // 用getImageData剪裁指定区域，并画到前面创建的canvas对象中
-          page
-            .getContext("2d")
-            .putImageData(
-              ctx.getImageData(
-                0,
-                renderedHeight,
-                canvas.width,
-                Math.min(imgHeight, canvas.height - renderedHeight)
-              ),
-              0,
-              0
-            );
-          // 添加图像到页面，保留10mm边距
-          pdf.addImage(
-            page.toDataURL("image/jpeg", 1.0),
-            "JPEG",
-            10,
-            10,
-            a4w,
-            Math.min(a4h, (a4w * page.height) / page.width)
-          );
-
-          renderedHeight += imgHeight;
-          if (renderedHeight < canvas.height) {
-            // 如果后面还有内容，添加一个空页
-            pdf.addPage();
-          }
-          // delete page;
-        }
-        // 保存文件
-        pdf.save(`${fileName}.pdf`);
-      });
-    }
-  } catch (err) {
-    console.log(err);
-  } finally {
-    if (dom1) dom1.style.height = height;
-  }
+import html2canvas from "html2canvas";
+import jspdf from "jspdf";
+import { Message } from "element-ui";
+
+//A4 纵向 210mm x 297mm，四边各留 10mm 边距，正文区 190 x 277
+const PAGE_WIDTH = 190;
+const PAGE_HEIGHT = 277;
+const PAGE_MARGIN = 10;
+
+//浏览器对 canvas 有硬限制(Chrome：单边 16384px、总面积 2^28 像素)，
+//超过之后 toDataURL 直接返回空白图——长详情页很容易撞上，这里按内容尺寸回退 scale。
+const MAX_CANVAS_SIDE = 16384;
+const MAX_CANVAS_AREA = 268435456;
+
+const JPEG_QUALITY = 0.92;
+
+const OVERFLOW_CLIP = /auto|scroll|hidden|overlay/;
+
+//遮罩挂在导出根元素的父级上，正常不会进截图范围；这条是兜底，
+//防止根元素本身就没有父级(游离节点)时遮罩落进截图里
+const LOADING_MASK = ".el-loading-mask";
+
+function nextFrame() {
+  //改完内联样式要等浏览器重排完再截图，一帧不够(vxe-table 的 resize 监听在下一帧才补高度)
+  return new Promise((resolve) => {
+    requestAnimationFrame(() => requestAnimationFrame(resolve));
+  });
+}
+
+//纵向被裁掉内容的容器：详情页的 .d-cont、vxe-table 的 body-wrapper/fixed-wrapper 都属于这一类。
+//只放开纵向：横向滚动的宽表放开也没用——截图区域按根元素的宽度取，
+//溢出到根元素外面的列照样画不进去，反而会把版面撑乱。
+function isVerticallyClipped(el, style) {
+  return (
+    OVERFLOW_CLIP.test(style.overflowY) && el.scrollHeight > el.clientHeight + 1
+  );
+}
+
+//把 dom 自身、它的祖先、以及内部所有带纵向滚动/裁剪的容器统一放开高度，
+//返回一个还原函数。原实现只处理了 .d-cont 一层，且在 html2canvas 真正克隆 DOM 之前
+//就把高度还原了(没 await)，所以放开高度这一步等于没做，导出的永远只有可视区那一屏。
+export function expandForCapture(dom) {
+  //读写严格分成两趟：先只读地挑出要放开的元素，再统一写内联样式。
+  //边读 getComputedStyle/scrollHeight 边写样式，会让浏览器每个元素强制重排一次
+  //(layout thrashing)——详情页几千个节点就是几千次整页重排，点完按钮会明显卡住。
+  const targets = [];
+
+  //祖先：#containt / .app-main 这类布局层用 100vh、calc(100vh - n) 定死了高度，
+  //不放开的话 dom 自己 height:auto 也会被父级的滚动容器裁掉。
+  let parent = dom.parentElement;
+  while (parent && parent !== document.body && parent !== document.documentElement) {
+    const style = window.getComputedStyle(parent);
+    if (isVerticallyClipped(parent, style) || style.height !== "auto") {
+      targets.push(parent);
+    }
+    parent = parent.parentElement;
+  }
+
+  targets.push(dom);
+
+  const children = dom.querySelectorAll("*");
+  for (let i = 0; i < children.length; i++) {
+    const el = children[i];
+    const style = window.getComputedStyle(el);
+    if (isVerticallyClipped(el, style)) targets.push(el);
+  }
+
+  //读：scrollTop 也是会触发重排的读操作，必须留在这一趟里
+  const records = targets.map((el) => ({
+    el: el,
+    style: el.getAttribute("style"),
+    scrollTop: el.scrollTop,
+  }));
+
+  //写
+  for (let i = 0; i < records.length; i++) {
+    const el = records[i].el;
+    el.style.height = "auto";
+    el.style.maxHeight = "none";
+    el.style.overflow = "visible";
+  }
+
+  return function restore() {
+    //倒序还原，先还原内层再还原外层，避免中间态触发多余的重排
+    for (let i = records.length - 1; i >= 0; i--) {
+      const record = records[i];
+      if (record.style === null) {
+        record.el.removeAttribute("style");
+      } else {
+        record.el.setAttribute("style", record.style);
+      }
+      record.el.scrollTop = record.scrollTop;
+    }
+  };
+}
+
+function pickScale(width, height, expected) {
+  let scale = expected || Math.min(window.devicePixelRatio || 1, 2);
+  if (!width || !height) return scale;
+  scale = Math.min(
+    scale,
+    MAX_CANVAS_SIDE / width,
+    MAX_CANVAS_SIDE / height,
+    Math.sqrt(MAX_CANVAS_AREA / (width * height))
+  );
+  return Math.max(scale, 1);
+}
+
+function buildIgnore(selectors) {
+  let list = [LOADING_MASK];
+  if (selectors) list = list.concat(selectors);
+  const selector = list.join(",");
+  return function (el) {
+    return typeof el.matches === "function" && el.matches(selector);
+  };
+}
+
+//手写一层 element 样式的遮罩，而不是用 Loading.service，两个原因都躲不掉：
+//1. `Loading.service({ fullscreen: true })` 是全局单例，会被 request.js 里的请求收尾顺手关掉，
+//   而导出这几秒里页面上别的请求随时可能回来；
+//2. `Loading.service({ target: dom })` 会给 dom 加 el-loading-parent--relative(position:relative !important)，
+//   页面里 .slide-nav 这类绝对定位元素的包含块跟着变，位置会挪——而且是连截进 PDF 里的。
+//自己建的 DOM 节点两头都不沾，也不用担心被别处关掉。
+//挂载点取根元素的父级，不挂 body：微前端下 body 是主应用的，往上加节点算越界；
+//挂父级也让这个节点跟着页面走，页面被销毁时不会剩一层孤儿遮罩。
+//只遮导出的那块区域，不铺满视口：左侧菜单、页签这些跟导出无关的地方不该被压住。
+//做法是 fixed + 按导出元素的 getBoundingClientRect 圈定范围(取展开之前的可视位置)，
+//这样既不用给挂载点加 position:relative(会挪走 .slide-nav 这类绝对定位元素，
+//也正是不能用 Loading.service({ target }) 的原因)，也不会盖到别人头上。
+//为什么不挂根元素自己：加子节点会改变根元素下 :last-child 的匹配，
+//而那种样式差异是会被截进 PDF 的；挂在父级上则完全在截图范围之外。
+function openLoading(dom, option) {
+  if (option.loading === false) return null;
+  const host = dom.parentElement || dom;
+  //必须在 expandForCapture 之前量：展开之后元素会被撑到完整内容高度，量出来是没用的
+  const rect = dom.getBoundingClientRect();
+  const top = Math.max(rect.top, 0);
+  const left = Math.max(rect.left, 0);
+  const height = Math.min(rect.bottom, window.innerHeight) - top;
+  const width = Math.min(rect.right, window.innerWidth) - left;
+  const mask = document.createElement("div");
+  mask.className = "el-loading-mask";
+  //.el-loading-mask 自带 top/right/bottom/left:0，right/bottom 要显式清掉，
+  //否则宽高会被拉回视口边缘，又变成全屏
+  mask.style.position = "fixed";
+  mask.style.top = top + "px";
+  mask.style.left = left + "px";
+  mask.style.right = "auto";
+  mask.style.bottom = "auto";
+  mask.style.width = width + "px";
+  mask.style.height = height + "px";
+  mask.innerHTML = [
+    '<div class="el-loading-spinner">',
+    '<svg class="circular" viewBox="25 25 50 50">',
+    '<circle class="path" cx="50" cy="50" r="20" fill="none"></circle>',
+    "</svg>",
+    '<p class="el-loading-text"></p>',
+    "</div>",
+  ].join("");
+  const label = mask.querySelector(".el-loading-text");
+  label.textContent = option.loadingText || "正在生成PDF，请稍候…";
+  host.appendChild(mask);
+  return {
+    //分阶段换文案：截图那段主线程是整块占住的，转圈会定住，
+    //有个往前走的文案才看得出是在干活而不是卡死。调用方自带文案时不覆盖。
+    setText(next) {
+      if (!option.loadingText) label.textContent = next;
+    },
+    close() {
+      if (mask.parentNode) mask.parentNode.removeChild(mask);
+    },
+  };
+}
+
+//toDataURL 是同步编码，一整页 JPEG 能顶住主线程几百毫秒；
+//toBlob 是异步的，浏览器可以把编码挪到主线程之外，转圈动画就不会整段定住。
+//jsdom 和老浏览器没有 toBlob，退回同步版本。
+function encodeJpeg(canvas) {
+  return new Promise((resolve) => {
+    const sync = () => resolve(canvas.toDataURL("image/jpeg", JPEG_QUALITY));
+    if (typeof canvas.toBlob !== "function") return sync();
+    canvas.toBlob(
+      (blob) => {
+        if (!blob) return sync();
+        const reader = new FileReader();
+        reader.onload = () => resolve(reader.result);
+        reader.onerror = sync;
+        reader.readAsDataURL(blob);
+      },
+      "image/jpeg",
+      JPEG_QUALITY
+    );
+  });
+}
+
+async function canvasToPdf(canvas, fileName, loading) {
+  const pdf = new jspdf("p", "mm", "a4");
+  //按 A4 正文区的宽高比换算一页对应的像素高度
+  const pageImgHeight = Math.floor((PAGE_HEIGHT * canvas.width) / PAGE_WIDTH);
+  const total = Math.ceil(canvas.height / pageImgHeight);
+  let page$index = 0;
+  let rendered = 0;
+  while (rendered < canvas.height) {
+    page$index++;
+    if (loading) loading.setText(`正在生成第 ${page$index}/${total} 页…`);
+    //每页之前让出一帧：切图+编码是大块同步活，不让出的话文案和转圈都刷不出来
+    await nextFrame();
+    const sliceHeight = Math.min(pageImgHeight, canvas.height - rendered);
+    const page = document.createElement("canvas");
+    page.width = canvas.width;
+    page.height = sliceHeight;
+    const ctx = page.getContext("2d");
+    //JPEG 没有透明通道，不先铺白底的话，页面上透明的地方会变成黑块
+    ctx.fillStyle = "#ffffff";
+    ctx.fillRect(0, 0, page.width, page.height);
+    //用 drawImage 而不是 getImageData/putImageData：后者逐像素拷贝，长页面上很慢
+    ctx.drawImage(
+      canvas,
+      0,
+      rendered,
+      canvas.width,
+      sliceHeight,
+      0,
+      0,
+      canvas.width,
+      sliceHeight
+    );
+    const dataUrl = await encodeJpeg(page);
+    pdf.addImage(
+      dataUrl,
+      "JPEG",
+      PAGE_MARGIN,
+      PAGE_MARGIN,
+      PAGE_WIDTH,
+      Math.min(PAGE_HEIGHT, (PAGE_WIDTH * sliceHeight) / page.width)
+    );
+    rendered += sliceHeight;
+    if (rendered < canvas.height) pdf.addPage();
+  }
+  pdf.save(`${fileName}.pdf`);
+}
+
+/**
+ * 把 dom 整体(含被滚动容器裁掉的部分)截图并按 A4 分页导出 PDF
+ * @param {Object} option
+ * @param {HTMLElement} option.dom 要导出的根元素
+ * @param {String} option.fileName 文件名(不带扩展名)
+ * @param {Number} [option.scale] 截图倍率，默认取 devicePixelRatio(上限 2)，会按 canvas 上限自动回退
+ * @param {String|String[]} [option.ignoreSelectors] 不参与截图的元素选择器，如操作按钮区
+ * @param {Boolean} [option.loading] 是否在导出期间盖加载遮罩，默认 true
+ * @param {String} [option.loadingText] 遮罩文案
+ * @returns {Promise<Boolean>} 是否导出成功。内部已经提示过失败，调用方可以直接不管返回值
+ */
+export async function exportPDF(option) {
+  const dom = option && option.dom;
+  if (!dom) return false;
+  const fileName = option.fileName || "export";
+  const loading = openLoading(dom, option);
+  //展开放进 try 里：万一它自己抛了，遮罩也得摘掉，不能把页面永远糊住
+  let restore = null;
+  try {
+    //先让浏览器把遮罩画出来，再做展开和截图——这两步都是同步卡主线程的，
+    //不先出让一帧的话遮罩要等截图结束才显示，等于没有。
+    await nextFrame();
+    restore = expandForCapture(dom);
+    if (loading) loading.setText("正在展开页面内容…");
+    await nextFrame();
+    const fullWidth = Math.max(dom.scrollWidth, dom.offsetWidth);
+    const fullHeight = Math.max(dom.scrollHeight, dom.offsetHeight);
+    const scale = pickScale(fullWidth, fullHeight, option.scale);
+    //html2canvas 这一段是整块同步活：它对每个节点都要 getComputedStyle 三次(自身/:before/:after)
+    //克隆一遍，再整棵树画进 canvas，中途没有让出主线程的机会，页面必然定住几秒。
+    //只能靠文案说明进度，真要更快就得降 scale 或少截点内容。
+    if (loading) loading.setText("正在渲染页面，请稍候…");
+    await nextFrame();
+    const canvas = await html2canvas(dom, {
+      backgroundColor: "#ffffff",
+      useCORS: true,
+      logging: false,
+      scale: scale,
+      //克隆出来的 iframe 默认只有一屏高，页面里的 100vh / height:100% 会在克隆里重新把内容压回一屏，
+      //所以要把它撑到完整内容高度；scrollX/scrollY 归零避免按当前滚动位置偏移取景。
+      scrollX: 0,
+      scrollY: 0,
+      windowWidth: Math.max(document.documentElement.clientWidth, fullWidth),
+      windowHeight: fullHeight + 200,
+      ignoreElements: buildIgnore(option.ignoreSelectors),
+    });
+    await canvasToPdf(canvas, fileName, loading);
+    return true;
+  } catch (err) {
+    //不往外抛：调用方多是 @click 直接调用，抛出去只会变成一条 unhandledrejection
+    console.error("[exportPDF] 导出失败", err);
+    Message.error("导出PDF失败");
+    return false;
+  } finally {
+    //必须等 html2canvas 真正 resolve 之后再还原：它的 DOM 克隆是异步做的
+    if (restore) restore();
+    if (loading) loading.close();
+  }
 }