cloud-web-corejs 1.0.54-dev.808 → 1.0.54-dev.809

package/package.json

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

package/src/components/table/plugins/cell-area/index.js

@@ -1007,6 +1007,20 @@ const cellAreaMixin = {
       return this.$nextTick();
     },
   },
+  created() {
+    // 只管开了区域选取的表格，不去动别的表格的编辑行为
+    if (!this.mouseConfig || !this.mouseOpts || !this.mouseOpts.area) return;
+    // 把 core 的 handleFocus 包一层，补一次兜底聚焦。
+    // 不能改成监听 edit-actived：mode=row 时 core 是在 checkValidate('blur').then() 里
+    // 异步调 handleActived 的，而且同一行换列走的是「不发事件、只 setTimeout(handleFocus)」
+    // 那条分支（edit/mixin.js:442）。包 handleFocus 才能覆盖双击/换列/API/键盘所有入口。
+    const rawHandleFocus = this.handleFocus;
+    const $table = this;
+    this.handleFocus = function (params, evnt) {
+      if (rawHandleFocus) rawHandleFocus.call($table, params, evnt);
+      if (params) focusCellEditor($table, params.row, params.column);
+    };
+  },
   updated() {
     // Vue 重渲染会把打在 td 上的高亮 class 冲掉，这里补回来
     if (this.mouseConfig && this.mouseOpts && this.mouseOpts.area) {

package/src/components/xform/form-designer/form-widget/field-widget/select-export-item-button-widget.vue

@@ -103,8 +103,12 @@ export default {
         targetRef: this.field.options.tableRef || null,
         pageSize: this.field.options.exportPageSize || null,
         showImageAtTable: this.field.options.showImageAtTable || null,
-        // 按钮上单独维护了导出列就以按钮为准，留空则沿用数据表格属性上那套
+        // 明细导出的列 / 脚本编码 / 取数参数三项各自独立：按钮上维护了哪项就以哪项为准，
+        // 留空的那项沿用数据表格属性上那套。参数脚本原样下发，由数据表格求值（this 是
+        // 表格组件，与配在表格属性上时同义）
         exportItemColumns: this.field.options.exportItemColumns || null,
+        exportItemScriptCode: this.field.options.exportItemScriptCode || null,
+        exportItemParam: this.field.options.exportItemParam || null,
       };
       let tableExportParam = this.handleCustomEvent(this.field.options.tableExportParam);
       let options = { ...opt, ...tableExportParam, type: type };

package/src/components/xform/form-designer/setting-panel/property-editor/container-data-table/data-table-editor.vue

@@ -320,7 +320,7 @@
     <el-form-item :label="i18nt('明细导出脚本编码')" class="form-item-label-top">
       <el-input v-model="optionModel.exportItemScriptCode"></el-input>
     </el-form-item>
-    <el-form-item label="自定义明细导出参数">
+    <el-form-item label="明细导出查询参数">
       <a
         href="javascript:void(0);"
         class="a-link link-oneLind"
@@ -1107,15 +1107,15 @@ export default {
 </style>
 
 <style scoped>
-.form-section-label {
-  margin: 16px 0 8px;
-  padding-left: 8px;
-  color: rgba(0, 0, 0, 0.65);
-  font-size: 13px;
-  font-weight: 600;
-  line-height: 1.3;
-  background: rgba(0, 0, 0, 0.04);
-  padding: 4px 0 4px 8px;
+.form-section-label {
+  margin: 16px 0 8px;
+  padding-left: 8px;
+  color: rgba(0, 0, 0, 0.65);
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.3;
+  background: rgba(0, 0, 0, 0.04);
+  padding: 4px 0 4px 8px;
 }
 
 .label-tip-icon {

package/src/components/xform/form-designer/setting-panel/property-editor/field-table-export-button/select-export-item-button-editor.vue

@@ -34,6 +34,19 @@
         <i class="el-icon-edit"></i>
       </a>
     </el-form-item>
+    <el-form-item label="明细导出脚本编码" class="form-item-label-top">
+      <el-input v-model="optionModel.exportItemScriptCode"></el-input>
+    </el-form-item>
+    <el-form-item label="明细导出查询参数">
+      <a
+        href="javascript:void(0);"
+        class="a-link link-oneLind"
+        @click="editEventHandler('exportItemParam', tableConfigParams)"
+      >
+        <span>{{ optionModel.exportItemParam }}</span>
+        <i class="el-icon-edit"></i>
+      </a>
+    </el-form-item>
     <el-form-item label="明细导出列维护">
       <a
         href="javascript:void(0);"
@@ -50,7 +63,7 @@
     </el-form-item>
     <el-form-item label-width="0">
       <div class="export-item-columns-tip">
-        不维护则按数据表格属性上的明细导出列导出；维护后本按钮只导出这里配的列。
+        脚本编码、查询参数、导出列三项各自独立：留空的那项沿用数据表格属性上配的，维护了就以本按钮为准。
       </div>
     </el-form-item>
     <exportItemColumnsDialog
@@ -82,6 +95,8 @@ export default {
   data() {
     return {
       eventParams: [],
+      // 与数据表格属性面板同一套：脚本里可直接用 dataId / formCode
+      tableConfigParams: ["dataId", "formCode"],
       showExportItemColumnsDialog: false,
     };
   },

package/src/components/xform/form-designer/widget-panel/widgetsConfig.js

@@ -3318,8 +3318,10 @@ export const advancedFields = [
       showImageAtTable: false,
       selectExportItemFlag: 1,
       exportItemConditionEnabled: !1,
-      // 按钮级明细导出列：留空时沿用数据表格属性上维护的那套
+      // 按钮级明细导出配置：三项各自独立，留空的那项沿用数据表格属性上维护的
       exportItemColumns: [],
+      exportItemScriptCode: null,
+      exportItemParam: "",
 
       onCreated: "",
       onMounted: "",

package/src/components/xform/form-render/container-item/data-table-mixin.js

@@ -2442,9 +2442,7 @@ modules = {
         };
       }
 
-      let exportItemConfig = this.buildExportItemConfig(
-        this.widget.options.exportItemColumns
-      );
+      let exportItemConfig = this.buildExportItemConfig();
       let rowConfig = {};
       if (this.widget.options.tableRowHeight) {
         rowConfig.height = this.widget.options.tableRowHeight;
@@ -3343,20 +3341,31 @@ modules = {
       });
     },
     /**
-     * 组装一份明细导出配置。列既可能来自表格属性，也可能来自导出按钮自身的配置（按钮优先），
-     * 但脚本编码与自定义参数始终取表格属性：按钮只决定导出哪些列，不另开取数通道。
-     * @param {Array} rawColumns 明细导出列。
-     * @returns {Object|null} 未维护列时返回 null。
+     * 组装一份明细导出配置。导出列、脚本编码、自定义导出参数三项都可以由导出按钮单独维护，
+     * 各自独立生效：按钮留空的那一项回落到表格属性，三项都留空就是表格属性上原来那套。
+     * @param {Object} [overrides] 按钮级配置。
+     * @param {Array} [overrides.columns] 明细导出列。
+     * @param {String} [overrides.scriptCode] 明细导出脚本编码。
+     * @param {String} [overrides.paramScript] 明细导出查询参数脚本。
+     * @returns {Object|null} 两处都没维护列时返回 null。
      */
-    buildExportItemConfig(rawColumns) {
-      if (!rawColumns || !rawColumns.length) return null;
+    buildExportItemConfig(overrides) {
       let options = this.widget.options;
+      let o = overrides || {};
+      let hasColumns = o.columns && o.columns.length;
+      let columns = hasColumns ? o.columns : options.exportItemColumns;
+      if (!columns || !columns.length) return null;
+      let scriptCode = o.scriptCode || options.exportItemScriptCode;
+      let paramScript = o.paramScript || options.exportItemParam;
       return {
-        scriptCode: options.exportItemScriptCode || options.formScriptCode,
-        columns: this.buildExportItemColumns(rawColumns),
+        scriptCode: scriptCode || options.formScriptCode,
+        columns: this.buildExportItemColumns(columns),
+        // 取数参数脚本与表格上其它脚本一样走 handleCustomEvent（它负责注入 dataId /
+        // formCode 并统一弹前端脚本异常）。原先写的 handleCustomParam 全库没有定义，
+        // 配了「明细导出查询参数」的表格一点导出就抛 TypeError。
         param: () => {
-          if (options.exportItemParam) {
-            return this.handleCustomParam(options.exportItemParam);
+          if (paramScript) {
+            return this.handleCustomEvent(paramScript);
           }
         },
       };
@@ -3364,16 +3373,27 @@ modules = {
     /**
      * 使用统一 Excel 导出器导出当前表格。
      * @param {Object} option 导出参数；prefix 为空时自动使用当前服务前缀。
-     *   option.exportItemColumns 为按钮上维护的明细导出列，传了就以它为准（同一张表格可以挂
-     *   多个明细导出按钮、各导各自的列），组装成 exportItemConfig 随导出参数下发，
-     *   下游（字段选择弹框 / 分页取数 / 脱敏剔除）一律优先读它，读不到才回落表格属性那套。
+     *   option.exportItemColumns / exportItemScriptCode / exportItemParam 为按钮上维护的
+     *   明细导出列、脚本编码与取数参数脚本，三项各自独立：传了哪项就以哪项为准（同一张表格
+     *   可以挂多个明细导出按钮、各导各自的列、各走各自的脚本），组装成 exportItemConfig 随
+     *   导出参数下发，下游（字段选择弹框 / 分页取数 / 脱敏剔除）一律优先读它，读不到才回落
+     *   表格属性那套。
      */
     exportData(option) {
       let exportOption = { ...option };
       let itemColumns = exportOption.exportItemColumns;
+      let itemScriptCode = exportOption.exportItemScriptCode;
+      let itemParam = exportOption.exportItemParam;
       delete exportOption.exportItemColumns;
-      if (isItemExport(exportOption.type) && itemColumns?.length) {
-        exportOption.exportItemConfig = this.buildExportItemConfig(itemColumns);
+      delete exportOption.exportItemScriptCode;
+      delete exportOption.exportItemParam;
+      let hasOverride = itemColumns?.length || itemScriptCode || itemParam;
+      if (isItemExport(exportOption.type) && hasOverride) {
+        exportOption.exportItemConfig = this.buildExportItemConfig({
+          columns: itemColumns,
+          scriptCode: itemScriptCode,
+          paramScript: itemParam,
+        });
       }
       this.markMaskedColumnsForExport(exportOption.exportItemConfig?.columns);
       let tableRef = this.getTableRef();

package/src/utils/pdfUtil.js

@@ -106,6 +106,132 @@ function pickScale(width, height, expected) {
   return Math.max(scale, 1);
 }
 
+//Safari(WebKit) 的 getComputedStyle 会把颜色序列化成 color(srgb …) / color(display-p3 …)，
+//而 html2canvas 1.4.1 只认 rgb/rgba/hsl/hsla 四种，撞上就抛
+//"Attempting to parse an unsupported color function" 直接整个导出失败。
+//项目源码里并没有写过 color()，是浏览器自己吐出来的，改样式没用——只能在克隆体上就地换算。
+const COLOR_FUNCTION = /color\([^()]*\)/g;
+
+//html2canvas 会按颜色解析的属性(format: 'color')，外加三个值里可能夹着颜色的：
+//渐变、阴影里的 color() 一样会把解析器打挂。
+const COLOR_PROPS = [
+  "color",
+  "background-color",
+  "border-top-color",
+  "border-right-color",
+  "border-bottom-color",
+  "border-left-color",
+  "text-decoration-color",
+  "-webkit-text-stroke-color",
+  "background-image",
+  "box-shadow",
+  "text-shadow",
+];
+
+//探针色：用来判断 canvas 到底认没认这个值(不认的话 fillStyle 会保持原样)
+const PROBE_COLOR = "#010203";
+
+function isWebKit() {
+  const ua = typeof navigator === "undefined" ? "" : navigator.userAgent || "";
+  //Chrome 系的 UA 里也有 AppleWebKit 字样，但它不会这么序列化，得排掉
+  return /AppleWebKit/.test(ua) && !/Chrome|Chromium|Edg\//.test(ua);
+}
+
+function probeContext() {
+  try {
+    const canvas = document.createElement("canvas");
+    return typeof canvas.getContext === "function" ? canvas.getContext("2d") : null;
+  } catch (err) {
+    return null;
+  }
+}
+
+function toByte(raw) {
+  const num = parseFloat(raw);
+  if (isNaN(num)) return 0;
+  const ratio = raw.indexOf("%") === -1 ? num : num / 100;
+  return Math.max(0, Math.min(255, Math.round(ratio * 255)));
+}
+
+function toAlpha(raw) {
+  const num = parseFloat(raw);
+  if (isNaN(num)) return 1;
+  const alpha = raw.indexOf("%") === -1 ? num : num / 100;
+  return Math.max(0, Math.min(1, alpha));
+}
+
+//浏览器不肯换算时的兜底：按 sRGB 直接取分量。
+//display-p3 这样算是近似(色域没做映射)，但截图里看不出差别，总好过整个导出失败。
+function fallbackColor(value) {
+  const inside = value.slice(value.indexOf("(") + 1, value.lastIndexOf(")"));
+  const parts = inside.split("/");
+  //第一段是色彩空间名(srgb / display-p3 …)，分量从第二段开始
+  const numbers = parts[0].trim().split(/\s+/).slice(1);
+  const channels = [0, 1, 2].map((i) => toByte(numbers[i] || "0"));
+  const alpha = parts.length > 1 ? toAlpha(parts[1]) : 1;
+  return "rgba(" + channels.join(", ") + ", " + alpha + ")";
+}
+
+function toLegacyColor(value, ctx) {
+  return value.replace(COLOR_FUNCTION, (match) => {
+    //优先让浏览器自己换：它认识 color()，换出来的 sRGB 值是准的
+    if (ctx) {
+      ctx.fillStyle = PROBE_COLOR;
+      ctx.fillStyle = match;
+      const converted = ctx.fillStyle;
+      const usable = typeof converted === "string" && converted.indexOf("color(") === -1;
+      if (usable && converted !== PROBE_COLOR) return converted;
+    }
+    return fallbackColor(match);
+  });
+}
+
+//在 html2canvas 的克隆体上把 color() 全部换成 rgba()，写成内联样式(优先级最高)。
+//只在需要时才挂上去：这一趟要给每个节点再算一次样式，白跑一遍就是白卡一下。
+export function normalizeColorFunctions(clonedDoc, clonedElement) {
+  const view = clonedDoc.defaultView;
+  if (!view || typeof view.getComputedStyle !== "function") return;
+  const ctx = probeContext();
+  const targets = [];
+  //除了目标元素，html2canvas 还会读 html/body 的背景色(parseBackgroundColor)，一起带上
+  if (clonedDoc.documentElement) targets.push(clonedDoc.documentElement);
+  if (clonedDoc.body) targets.push(clonedDoc.body);
+  targets.push(clonedElement);
+  const children = clonedElement.querySelectorAll("*");
+  for (let i = 0; i < children.length; i++) targets.push(children[i]);
+
+  for (let i = 0; i < targets.length; i++) {
+    const el = targets[i];
+    if (!el || !el.style) continue;
+    const style = view.getComputedStyle(el);
+    for (let j = 0; j < COLOR_PROPS.length; j++) {
+      const prop = COLOR_PROPS[j];
+      const value = style.getPropertyValue(prop);
+      if (!value || value.indexOf("color(") === -1) continue;
+      el.style.setProperty(prop, toLegacyColor(value, ctx));
+    }
+  }
+}
+
+function isUnsupportedColorError(err) {
+  const message = err && err.message ? err.message : String(err || "");
+  return message.indexOf("unsupported color function") !== -1;
+}
+
+function withColorFix(options) {
+  return Object.assign({}, options, { onclone: normalizeColorFunctions });
+}
+
+async function renderCanvas(dom, options, fixColors) {
+  try {
+    return await html2canvas(dom, fixColors ? withColorFix(options) : options);
+  } catch (err) {
+    //别的引擎哪天也开始这么序列化，兜一次；已经带着换算跑过就别再重来了
+    if (fixColors || !isUnsupportedColorError(err)) throw err;
+    return html2canvas(dom, withColorFix(options));
+  }
+}
+
 function buildIgnore(selectors) {
   let list = [LOADING_MASK];
   if (selectors) list = list.concat(selectors);
@@ -273,7 +399,7 @@ export async function exportPDF(option) {
     //只能靠文案说明进度，真要更快就得降 scale 或少截点内容。
     if (loading) loading.setText("正在渲染页面，请稍候…");
     await nextFrame();
-    const canvas = await html2canvas(dom, {
+    const options = {
       backgroundColor: "#ffffff",
       useCORS: true,
       logging: false,
@@ -285,7 +411,9 @@ export async function exportPDF(option) {
       windowWidth: Math.max(document.documentElement.clientWidth, fullWidth),
       windowHeight: fullHeight + 200,
       ignoreElements: buildIgnore(option.ignoreSelectors),
-    });
+    };
+    //WebKit 上直接带着颜色换算跑：先失败一次再重来，等于把那几秒的冻结再来一遍
+    const canvas = await renderCanvas(dom, options, isWebKit());
     await canvasToPdf(canvas, fileName, loading);
     return true;
   } catch (err) {