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

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

@@ -0,0 +1,77 @@
+/**
+ * 自研区域选取的高亮样式。
+ *
+ * 高亮是把 class 直接打在 td 上（见同目录 index.js），而不是画绝对定位的遮罩：
+ * 业务表常配 row-config.height: auto + autosize 的 textarea，行高会在输入过程中变化，
+ * 遮罩会漂移；而且有固定列时同一个单元格在 left/main/right 三个 wrapper 里各有一份，
+ * 打 class 一次就能全覆盖。
+ *
+ * 边框走 ::after 伪元素而不是 border，避免占用盒模型把单元格内容挤动。
+ */
+$vxe-cell-area-color: #409eff !default;
+$vxe-cell-area-background-color: rgba(64, 158, 255, 0.12) !default;
+$vxe-cell-area-border-width: 2px !default;
+
+.vxe-table {
+  // 框选过程中禁掉文字选中，否则拖拽会连带选中单元格文本
+  &.drag--range {
+    .vxe-table--main-wrapper,
+    .vxe-table--fixed-left-wrapper,
+    .vxe-table--fixed-right-wrapper {
+      user-select: none;
+
+      * {
+        user-select: none;
+      }
+    }
+  }
+
+  .vxe-body--column {
+    &.col--area,
+    &.col--copy-area {
+      position: relative;
+
+      &::after {
+        content: "";
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        pointer-events: none;
+        z-index: 1;
+      }
+    }
+
+    &.col--area {
+      background-color: $vxe-cell-area-background-color;
+    }
+
+    // 只有落在选区边界上的单元格画对应那条边，四条拼起来就是完整矩形
+    &.col--area-t::after {
+      border-top: $vxe-cell-area-border-width solid $vxe-cell-area-color;
+    }
+
+    &.col--area-b::after {
+      border-bottom: $vxe-cell-area-border-width solid $vxe-cell-area-color;
+    }
+
+    &.col--area-l::after {
+      border-left: $vxe-cell-area-border-width solid $vxe-cell-area-color;
+    }
+
+    &.col--area-r::after {
+      border-right: $vxe-cell-area-border-width solid $vxe-cell-area-color;
+    }
+
+    // 锚点格：shift 扩选与方向键移动的基准，不铺底色以示区别
+    &.col--area-active {
+      background-color: transparent;
+    }
+
+    // 复制源：虚线框，粘贴或取消后清除
+    &.col--copy-area::after {
+      border: 1px dashed $vxe-cell-area-color;
+    }
+  }
+}

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

@@ -0,0 +1,224 @@
+/**
+ * 区域选取插件的纯函数部分：可选列/行的口径、矩形运算、剪贴板 TSV 编解码。
+ * 抽出来是为了能脱离 vxe 实例单测，index.js 只负责跟 vxe 的钩子对接。
+ */
+
+// 这些列没有业务值（复选框/单选/序号/展开），不参与区域选取与复制粘贴
+const NOT_AREA_COLUMN_TYPES = ["checkbox", "radio", "seq", "expand"];
+
+/**
+ * 参与区域选取的列。索引空间以本函数返回的数组为准，
+ * 复制粘贴的列对齐、方向键移动都按这个下标算。
+ */
+export function getAreaColumns(columns, excludeFields) {
+  let excludes = excludeFields || [];
+  return (columns || []).filter((column) => {
+    if (!column) return false;
+    let field = column.property || column.field;
+    if (!field) return false;
+    if (NOT_AREA_COLUMN_TYPES.includes(column.type)) return false;
+    return !excludes.includes(field);
+  });
+}
+
+export function getColumnField(column) {
+  return column ? column.property || column.field : null;
+}
+
+/**
+ * 下标钳制到 [0, size - 1]，size 为 0 时返回 -1 表示无可用格。
+ *
+ * 只接受**算术下标**（锚点 ± 偏移，越界钳回边界是对的，比如在第 0 行按 ↑ 得到 -1 应该停在 0）。
+ * **不要拿 indexOf 的结果喂它** —— 那里的 -1 是"找不到"，钳成 0 会把查找失败
+ * 静默变成"第 0 行"，选区反向铺开。
+ */
+export function clampIndex(index, size) {
+  if (!size || size < 1) return -1;
+  if (index < 0) return 0;
+  if (index > size - 1) return size - 1;
+  return index;
+}
+
+/**
+ * 由锚点与焦点格构造矩形。锚点是 shift 扩选与方向键移动的基准，
+ * 始终保留在区域里，不随 start/end 归一化而丢失。
+ */
+export function buildArea(anchorRow, anchorCol, focusRow, focusCol) {
+  return {
+    anchorRow: anchorRow,
+    anchorCol: anchorCol,
+    focusRow: focusRow,
+    focusCol: focusCol,
+    startRow: Math.min(anchorRow, focusRow),
+    endRow: Math.max(anchorRow, focusRow),
+    startCol: Math.min(anchorCol, focusCol),
+    endCol: Math.max(anchorCol, focusCol),
+  };
+}
+
+/** 折叠成单格 */
+export function buildCellArea(rowIndex, colIndex) {
+  return buildArea(rowIndex, colIndex, rowIndex, colIndex);
+}
+
+/** 以现有锚点扩选到目标格；没有区域时退化为单格 */
+export function extendArea(area, focusRow, focusCol) {
+  if (!area) return buildCellArea(focusRow, focusCol);
+  return buildArea(area.anchorRow, area.anchorCol, focusRow, focusCol);
+}
+
+/**
+ * 方向键移动。extend 为真时移动焦点边（Shift+方向键），
+ * 否则整体折叠成单格移动到新位置。
+ */
+export function moveArea(area, offsetRow, offsetCol, rowSize, colSize, extend) {
+  if (!area) return null;
+  if (extend) {
+    let focusRow = clampIndex(area.focusRow + offsetRow, rowSize);
+    let focusCol = clampIndex(area.focusCol + offsetCol, colSize);
+    return buildArea(area.anchorRow, area.anchorCol, focusRow, focusCol);
+  }
+  let rowIndex = clampIndex(area.anchorRow + offsetRow, rowSize);
+  let colIndex = clampIndex(area.anchorCol + offsetCol, colSize);
+  return buildCellArea(rowIndex, colIndex);
+}
+
+/**
+ * Tab/Enter 的顺序移动：列走到头换行。越界则停在原地。
+ */
+export function moveNextCell(area, isRowFirst, isBack, rowSize, colSize) {
+  if (!area) return null;
+  let rowIndex = area.anchorRow;
+  let colIndex = area.anchorCol;
+  let step = isBack ? -1 : 1;
+  if (isRowFirst) {
+    colIndex += step;
+    if (colIndex > colSize - 1) {
+      colIndex = 0;
+      rowIndex += 1;
+    } else if (colIndex < 0) {
+      colIndex = colSize - 1;
+      rowIndex -= 1;
+    }
+  } else {
+    rowIndex += step;
+  }
+  if (rowIndex < 0 || rowIndex > rowSize - 1) {
+    return area;
+  }
+  return buildCellArea(rowIndex, clampIndex(colIndex, colSize));
+}
+
+/**
+ * 粘贴时需要补几行：从 startRowIndex 起放下 pasteRowSize 行，超出当前行数的部分。
+ */
+export function getIncrementRowSize(startRowIndex, pasteRowSize, rowSize) {
+  let need = startRowIndex + pasteRowSize - rowSize;
+  return need > 0 ? need : 0;
+}
+
+const NEED_QUOTE_RE = /[\t\r\n"]/;
+
+/** 单元格文本 -> 剪贴板片段，按 Excel 约定转义 */
+export function encodeClipCell(value) {
+  let text = value === null || value === undefined ? "" : "" + value;
+  if (NEED_QUOTE_RE.test(text)) {
+    return '"' + text.replace(/"/g, '""') + '"';
+  }
+  return text;
+}
+
+/** 二维数组 -> TSV 文本 */
+export function encodeClipText(matrix) {
+  return (matrix || [])
+    .map((row) => (row || []).map(encodeClipCell).join("\t"))
+    .join("\n");
+}
+
+const HTML_ESCAPE_MAP = {
+  "&": "&amp;",
+  "<": "&lt;",
+  ">": "&gt;",
+  '"': "&quot;",
+};
+
+export function escapeClipHtml(value) {
+  let text = value === null || value === undefined ? "" : "" + value;
+  return text.replace(/[&<>"]/g, function (ch) {
+    return HTML_ESCAPE_MAP[ch];
+  });
+}
+
+/**
+ * 二维数组 -> HTML 表格片段。
+ * 官方 copyCellArea() 的返回值是 { text, html }，只写 text/plain 的话
+ * 粘进 Word / 邮件 / 富文本编辑器会丢掉表格结构，塌成一行文本。
+ */
+export function encodeClipHtml(matrix) {
+  let trList = (matrix || []).map(function (row) {
+    let tdList = (row || []).map(function (cell) {
+      // 格内换行要转 <br>，否则富文本里同样会被挤成一行
+      return "<td>" + escapeClipHtml(cell).replace(/\r?\n/g, "<br>") + "</td>";
+    });
+    return "<tr>" + tdList.join("") + "</tr>";
+  });
+  return "<table><tbody>" + trList.join("") + "</tbody></table>";
+}
+
+/**
+ * TSV 文本 -> 二维数组。走状态机而不是 split，
+ * 因为 Excel 会把含换行/制表符的单元格用引号包起来。
+ */
+export function decodeClipText(text) {
+  let source = text === null || text === undefined ? "" : "" + text;
+  if (!source) return [];
+  let rows = [];
+  let row = [];
+  let cell = "";
+  let inQuote = false;
+  let cellStart = true; // 只有单元格开头的引号才算包裹符
+  for (let i = 0; i < source.length; i++) {
+    let ch = source[i];
+    if (inQuote) {
+      if (ch === '"') {
+        if (source[i + 1] === '"') {
+          cell += '"';
+          i++;
+        } else {
+          inQuote = false;
+        }
+      } else {
+        cell += ch;
+      }
+      continue;
+    }
+    if (ch === '"' && cellStart) {
+      inQuote = true;
+      cellStart = false;
+      continue;
+    }
+    if (ch === "\t") {
+      row.push(cell);
+      cell = "";
+      cellStart = true;
+      continue;
+    }
+    if (ch === "\n" || ch === "\r") {
+      if (ch === "\r" && source[i + 1] === "\n") i++;
+      row.push(cell);
+      rows.push(row);
+      row = [];
+      cell = "";
+      cellStart = true;
+      continue;
+    }
+    cell += ch;
+    cellStart = false;
+  }
+  // 末尾没有换行时收尾；有换行时不要多造一个空行
+  if (cell !== "" || row.length || inQuote) {
+    row.push(cell);
+    rows.push(row);
+  }
+  return rows;
+}

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

@@ -103,6 +103,8 @@ export default {
         targetRef: this.field.options.tableRef || null,
         pageSize: this.field.options.exportPageSize || null,
         showImageAtTable: this.field.options.showImageAtTable || null,
+        // 按钮上单独维护了导出列就以按钮为准，留空则沿用数据表格属性上那套
+        exportItemColumns: this.field.options.exportItemColumns || 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/exportItemColumns-dialog.vue

@@ -353,7 +353,13 @@ export default {
           return;
         }
       }
-      this.optionModel.exportItemColumns = this.$baseLodash.cloneDeep(this.tableData);
+      // 用 $set：导出按钮是后加的宿主，历史表单 JSON 里没有 exportItemColumns 这个键，
+      // 直接赋值不会触发「已维护」文案更新
+      this.$set(
+        this.optionModel,
+        "exportItemColumns",
+        this.$baseLodash.cloneDeep(this.tableData)
+      );
       this.closeHandle();
     },
     generateRow() {

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

@@ -34,16 +34,46 @@
         <i class="el-icon-edit"></i>
       </a>
     </el-form-item>
+    <el-form-item label="明细导出列维护">
+      <a
+        href="javascript:void(0);"
+        class="a-link link-oneLind"
+        @click="showExportItemColumnsDialog = true"
+      >
+        <span>{{
+          optionModel.exportItemColumns && optionModel.exportItemColumns.length
+            ? "已维护"
+            : null
+        }}</span>
+        <i class="el-icon-edit"></i>
+      </a>
+    </el-form-item>
+    <el-form-item label-width="0">
+      <div class="export-item-columns-tip">
+        不维护则按数据表格属性上的明细导出列导出；维护后本按钮只导出这里配的列。
+      </div>
+    </el-form-item>
+    <exportItemColumnsDialog
+      v-if="showExportItemColumnsDialog"
+      :visiable.sync="showExportItemColumnsDialog"
+      :designer="designer"
+      :selectedWidget="selectedWidget"
+      :optionModel="optionModel"
+    />
   </div>
 </template>
 
 <script>
 import i18n from "../../../../utils/i18n";
 import eventMixin from "../event-handler/eventMixin";
+import exportItemColumnsDialog from "../container-data-table/exportItemColumns-dialog.vue";
 
 export default {
   name: "select-export-item-button-editor",
   mixins: [i18n, eventMixin],
+  components: {
+    exportItemColumnsDialog,
+  },
   props: {
     designer: Object,
     selectedWidget: Object,
@@ -52,6 +82,7 @@ export default {
   data() {
     return {
       eventParams: [],
+      showExportItemColumnsDialog: false,
     };
   },
   methods: {
@@ -71,4 +102,9 @@ export default {
 ::v-deep.export-divider .el-divider__text.is-center {
   width: 162px;
 }
+.export-item-columns-tip {
+  line-height: 18px;
+  color: #909399;
+  font-size: 12px;
+}
 </style>

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

@@ -3318,6 +3318,8 @@ export const advancedFields = [
       showImageAtTable: false,
       selectExportItemFlag: 1,
       exportItemConditionEnabled: !1,
+      // 按钮级明细导出列：留空时沿用数据表格属性上维护的那套
+      exportItemColumns: [],
 
       onCreated: "",
       onMounted: "",

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

@@ -2442,76 +2442,9 @@ modules = {
         };
       }
 
-      let exportItemConfig = null;
-      if (
-        this.widget.options.exportItemColumns &&
-        this.widget.options.exportItemColumns.length > 0
-      ) {
-        let formatKeys = [
-          "d1",
-          "d2",
-          "d3",
-          "d4",
-          "d5",
-          "n1",
-          "n2",
-          "n3",
-          "n4",
-          "n5",
-          "n6",
-          "n7",
-        ];
-        let exportItemColumns = this.widget.options.exportItemColumns.map(
-          (item) => {
-            let columnSlots = null;
-            let columnParams = {};
-            if (item.formatS === "render") {
-              let r = item.render
-                ? new Function("params", "h", item.render)
-                : null;
-              columnSlots = {
-                default: (params, h) => {
-                  return r ? r.call(this, params, h) : "";
-                },
-              };
-            } else if (formatKeys.includes(item.formatS)) {
-              columnSlots = {
-                default: (params, h) => {
-                  let cellValue = params.row[params.column.field];
-                  return this.getFormatterValue(
-                    cellValue,
-                    item.formatS,
-                    item.utcTransformEnabled
-                  );
-                },
-              };
-            }
-            if (item.exportType) {
-              columnParams.exportType = item.exportType;
-            }
-            return {
-              id: item.id,
-              title: item.title,
-              field: item.field,
-              params: columnParams,
-              slots: columnSlots,
-            };
-          }
-        );
-        exportItemConfig = {
-          scriptCode:
-            this.widget.options.exportItemScriptCode ||
-            this.widget.options.formScriptCode,
-          columns: exportItemColumns,
-          param: () => {
-            if (this.widget.options.exportItemParam) {
-              return this.handleCustomParam(
-                this.widget.options.exportItemParam
-              );
-            }
-          },
-        };
-      }
+      let exportItemConfig = this.buildExportItemConfig(
+        this.widget.options.exportItemColumns
+      );
       let rowConfig = {};
       if (this.widget.options.tableRowHeight) {
         rowConfig.height = this.widget.options.tableRowHeight;
@@ -3228,7 +3161,9 @@ modules = {
       if (isItemExport(exportType)) {
         let $grid = this.getGridTable();
         let originOption = $grid.params.originOption;
-        let exportItemConfig = originOption.exportItemConfig || {};
+        // 导出按钮上单独维护了明细列时，配置随导出参数下发，优先于表格属性那套
+        let btnConfig = customParam?.exportParam?.exportItemConfig;
+        let exportItemConfig = btnConfig || originOption.exportItemConfig || {};
         if (exportItemConfig.scriptCode) {
           scriptCode = exportItemConfig.scriptCode;
         }
@@ -3339,30 +3274,112 @@ modules = {
       let tableRef = this.widget.id;
       return tableRef;
     },
-    /** 导出前按脱敏规则剔除列，实现见 textMaskUtil.markMaskedExportColumns。 */
-    markMaskedColumnsForExport() {
+    /**
+     * 导出前按脱敏规则剔除列，实现见 textMaskUtil.markMaskedExportColumns。
+     * @param {Array} [exportItemColumns] 本次明细导出实际使用的列；不传则取表格属性上配的那套。
+     */
+    markMaskedColumnsForExport(exportItemColumns) {
       markMaskedExportColumns(
         this.getGridTable(),
         buildTextMaskContext(
           this.getFormRef(),
           this.$store.getters.companyCode
-        )
+        ),
+        exportItemColumns
       );
     },
+    /**
+     * 明细导出列配置 → vxe 列：formatS/render 转成渲染插槽，exportType 落到 params。
+     * @param {Array} rawColumns 设计器维护的明细导出列。
+     * @returns {Array} vxe 列定义。
+     */
+    buildExportItemColumns(rawColumns) {
+      let formatKeys = [
+        "d1",
+        "d2",
+        "d3",
+        "d4",
+        "d5",
+        "n1",
+        "n2",
+        "n3",
+        "n4",
+        "n5",
+        "n6",
+        "n7",
+      ];
+      return rawColumns.map((item) => {
+        let columnSlots = null;
+        let columnParams = {};
+        if (item.formatS === "render") {
+          let r = item.render ? new Function("params", "h", item.render) : null;
+          columnSlots = {
+            default: (params, h) => {
+              return r ? r.call(this, params, h) : "";
+            },
+          };
+        } else if (formatKeys.includes(item.formatS)) {
+          columnSlots = {
+            default: (params, h) => {
+              let cellValue = params.row[params.column.field];
+              return this.getFormatterValue(
+                cellValue,
+                item.formatS,
+                item.utcTransformEnabled
+              );
+            },
+          };
+        }
+        if (item.exportType) {
+          columnParams.exportType = item.exportType;
+        }
+        return {
+          id: item.id,
+          title: item.title,
+          field: item.field,
+          params: columnParams,
+          slots: columnSlots,
+        };
+      });
+    },
+    /**
+     * 组装一份明细导出配置。列既可能来自表格属性，也可能来自导出按钮自身的配置（按钮优先），
+     * 但脚本编码与自定义参数始终取表格属性：按钮只决定导出哪些列，不另开取数通道。
+     * @param {Array} rawColumns 明细导出列。
+     * @returns {Object|null} 未维护列时返回 null。
+     */
+    buildExportItemConfig(rawColumns) {
+      if (!rawColumns || !rawColumns.length) return null;
+      let options = this.widget.options;
+      return {
+        scriptCode: options.exportItemScriptCode || options.formScriptCode,
+        columns: this.buildExportItemColumns(rawColumns),
+        param: () => {
+          if (options.exportItemParam) {
+            return this.handleCustomParam(options.exportItemParam);
+          }
+        },
+      };
+    },
     /**
      * 使用统一 Excel 导出器导出当前表格。
      * @param {Object} option 导出参数；prefix 为空时自动使用当前服务前缀。
+     *   option.exportItemColumns 为按钮上维护的明细导出列，传了就以它为准（同一张表格可以挂
+     *   多个明细导出按钮、各导各自的列），组装成 exportItemConfig 随导出参数下发，
+     *   下游（字段选择弹框 / 分页取数 / 脱敏剔除）一律优先读它，读不到才回落表格属性那套。
      */
     exportData(option) {
-      this.markMaskedColumnsForExport();
+      let exportOption = { ...option };
+      let itemColumns = exportOption.exportItemColumns;
+      delete exportOption.exportItemColumns;
+      if (isItemExport(exportOption.type) && itemColumns?.length) {
+        exportOption.exportItemConfig = this.buildExportItemConfig(itemColumns);
+      }
+      this.markMaskedColumnsForExport(exportOption.exportItemConfig?.columns);
       let tableRef = this.getTableRef();
       let serviceName = this.getFormRef().reportTemplate.serviceName;
-      option.prefix = option.prefix || "/" + serviceName;
-      let exportTableTarget = this.$refs.exportTable;
-      let getExportTableRef = () => {
-        return exportTableTarget;
-      };
-      this.$excelExport({ targetRef: tableRef, ...option });
+      exportOption.prefix = exportOption.prefix || "/" + serviceName;
+      this.$excelExport({ targetRef: tableRef, ...exportOption });
     },
     async deleteRow(row, rowIndex) {
       let isTreeTable = this.widget.options.isTreeTable;

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

@@ -124,8 +124,10 @@ export function resolveTextMaskFlag(widgetOptions, ctx) {
  *
  * @param {Object} $grid vxe-grid 实例。
  * @param {Object} ctx 判定上下文，由 buildTextMaskContext 生成。
+ * @param {Array} [exportItemColumns] 本次明细导出实际使用的列（导出按钮上单独维护时由调用方
+ *   传入）；不传则回落到表格属性上配的那套。
  */
-export function markMaskedExportColumns($grid, ctx) {
+export function markMaskedExportColumns($grid, ctx, exportItemColumns) {
   if (!$grid || typeof $grid.getTableColumn !== "function") return;
 
   /** 打标记。列本就被其它规则（isNonDataExportColumn）剔除时不接管，避免撤销时误删。 */
@@ -174,6 +176,7 @@ export function markMaskedExportColumns($grid, ctx) {
     }
   };
   let originOption = $grid.params?.originOption;
-  let exportItemColumns = originOption?.exportItemConfig?.columns || [];
-  exportItemColumns.forEach(markItemColumn);
+  let tableItemColumns = originOption?.exportItemConfig?.columns;
+  let itemColumns = exportItemColumns || tableItemColumns || [];
+  itemColumns.forEach(markItemColumn);
 }

package/src/index.js

@@ -28,7 +28,12 @@ Vue.component("BaseKeepAlive", BaseKeepAlive);
 import VXETable from "vxe-table";
 import "vxe-table/lib/style.css";
 
-// 引入扩展插件
+// 区域选取/复制粘贴：自研实现，通过 window.VXETableMixin 挂载，
+// 必须在下面的 Vue.use(VXETable) 之前求值（core 在 install 时读取一次并 delete）
+import "@base/components/table/plugins/cell-area/index.js";
+import "@base/components/table/plugins/cell-area/index.scss";
+
+// 引入扩展插件（官方付费插件，已由上面的自研 cell-area 替代，保留仅作回退参考）
 // import "@base/components/table/plugins/extend-cell-area/vxe-table-extend-cell-area.es6.min.js";
 // import "@base/components/table/plugins/extend-cell-area/vxe-table-extend-cell-area.min.css";