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

package/package.json

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

package/src/components/VabUpload/image-viewer.vue

@@ -29,7 +29,7 @@
             v-if="i === index"
             ref="img"
             class="el-image-viewer__img"
-            :key="url"
+            :key="url + '-' + i"
             :src="currentImg"
             :style="imgStyle"
             @load="handleImgLoad"

package/src/components/VabUpload/mixins.js

@@ -3,6 +3,11 @@ let tmixins, tViewMixins, pmixins;
 import axios from "axios";
 import SparkMD5 from "spark-md5";
 import settingConfig from "@/settings.js";
+import {
+  registerPreviewInstance,
+  unregisterPreviewInstance,
+  collectPreviewList,
+} from "./previewGroup.js";
 
 let imFun = {
   axios,
@@ -1372,6 +1377,8 @@ tViewMixins = {
       attachments: [],
       pictureList: [],
       pictureDtoList: [],
+      // 传给预览弹框的图片列表：可能跨字段汇总了整个表单的图片，见 previewGroup.js
+      previewList: [],
       showPropertiesDialog: false,
       editAttachment: null,
       showViewer: false,
@@ -1442,6 +1449,12 @@ tViewMixins = {
     this.initFileServerInfo();
     this.initFile();
   },
+  mounted() {
+    registerPreviewInstance(this);
+  },
+  beforeDestroy() {
+    unregisterPreviewInstance(this);
+  },
   methods: {
     pasteEvent(e) {
       e.stopPropagation();
@@ -1657,23 +1670,41 @@ tViewMixins = {
         .concat(this.pictureDtoList.slice(0, pictureIndex));
       return res;
     },
-    openImagePreView(index) {
-      // this.chooseIndex = index;
-      let pictureIndex = -1;
-      this.attachments.find((item, i) => {
-        let typeStr = Object.prototype.toString.call(item);
-        if (typeStr == "[object Object]") {
-          if (this.$commonFileUtil.isPictureFile(item.url)) {
-            pictureIndex++;
-          }
-        } else {
-          if (this.$commonFileUtil.isPictureFile(item)) {
-            pictureIndex++;
-          }
+    isPictureAttachment(attachment) {
+      if (!attachment) return false;
+      let typeStr = Object.prototype.toString.call(attachment);
+      if (typeStr == "[object Object]") {
+        return this.$commonFileUtil.isPictureFile(attachment.url);
+      }
+      return this.$commonFileUtil.isPictureFile(attachment);
+    },
+    /**
+     * 本字段当前的图片列表。现算而不用 pictureDtoList：后者靠 attachments 的引用监听维护，
+     * 删除(splice)、父组件直接改 file 数组都不会触发，拿到的可能是旧列表。
+     * previewGroup.js 汇总整表图片时也会调用它。
+     */
+    getPreviewPictureList() {
+      let list = [];
+      (this.attachments || []).forEach((item) => {
+        if (this.isPictureAttachment(item)) {
+          list.push(item);
         }
-        return index == i;
       });
-      this.chooseIndex = pictureIndex;
+      return list;
+    },
+    openImagePreView(index) {
+      let pictures = this.getPreviewPictureList();
+      // 点中的图片在本字段图片里的下标 = 它前面有几张图片
+      let pictureIndex = 0;
+      for (let i = 0; i < index; i++) {
+        if (this.isPictureAttachment(this.attachments[i])) {
+          pictureIndex++;
+        }
+      }
+      // 上一张 / 下一张要能翻遍整个表单，列表拼的是同组所有字段的图片
+      let { list, offset } = collectPreviewList(this, pictures);
+      this.previewList = list;
+      this.chooseIndex = offset + pictureIndex;
       this.showViewer = true;
     },
     openPropertiesDialog(attachment) {
@@ -1682,6 +1713,8 @@ tViewMixins = {
     },
     closeViewer() {
       this.showViewer = false;
+      // 列表里可能持有别的字段的附件对象，关掉就释放
+      this.previewList = [];
     },
     hasPreview(attachment) {
       let fileServerPreviewEnabled = this.getFileServerPreviewEnabled();

package/src/components/VabUpload/previewGroup.js

@@ -0,0 +1,128 @@
+/**
+ * 附件图片预览分组
+ *
+ * 单个附件字段(baseUpload)只持有自己的图片，预览弹框的「上一张 / 下一张」原先也只能在
+ * 本字段内翻页。这里维护一份已挂载 baseUpload 实例的登记表：打开预览时把同一表单范围内
+ * 的所有图片按 DOM 顺序拼成一个列表交给 el-image-viewer，翻页于是能跨字段覆盖整个表单。
+ *
+ * 分组范围 = 从自身向上找到的第一个「边界元素」(见 SCOPE_SELECTOR)。弹框 / 抽屉 / 表单
+ * 都算边界，保证背景页面的图片不会串进弹框的预览里，明细表编辑行里的附件也只跟同一行翻页。
+ *
+ * 组件上可用 preview-group 覆盖：
+ *   preview-group="xxx"    给同一字符串的实例强制同组(可跨边界)
+ *   :preview-group="false" 退回只翻本字段(旧行为)
+ */
+
+// 已挂载的 baseUpload 实例。组件 mounted 时登记、beforeDestroy 时注销
+const instances = new Set();
+
+// 分组边界：弹框、抽屉、表单
+const SCOPE_SELECTOR = ".el-dialog,.el-drawer,.el-form,form";
+
+export function registerPreviewInstance(vm) {
+  instances.add(vm);
+}
+
+export function unregisterPreviewInstance(vm) {
+  instances.delete(vm);
+}
+
+// 模板里写 preview-group 与 previewGroup 落到 $attrs 的 key 不同，两个都认
+function readGroupAttr(vm) {
+  let attrs = (vm && vm.$attrs) || {};
+  return attrs.previewGroup !== undefined
+    ? attrs.previewGroup
+    : attrs["preview-group"];
+}
+
+function isGroupEnabled(vm) {
+  let value = readGroupAttr(vm);
+  return value !== false && value !== "false";
+}
+
+function getScope(vm) {
+  let group = readGroupAttr(vm);
+  // 显式指定的分组名优先，此时不再看 DOM 位置
+  if (typeof group === "string") {
+    let name = group.trim();
+    if (name && name !== "true" && name !== "false") return name;
+  }
+  let el = vm.$el;
+  while (el && el.nodeType === 1) {
+    if (el.matches && el.matches(SCOPE_SELECTOR)) {
+      return el;
+    }
+    el = el.parentElement;
+  }
+  return (vm.$el && vm.$el.ownerDocument.body) || null;
+}
+
+/**
+ * 隐藏的实例不参与分组：看不见的图片(未激活的页签、折叠面板)混进来翻页只会莫名其妙。
+ * 不用 getClientRects / offsetParent 判定——jsdom 没有排版，那两个恒为空。
+ */
+function isHidden(el) {
+  if (!el || el.nodeType !== 1 || el.isConnected === false) return true;
+  let view = el.ownerDocument && el.ownerDocument.defaultView;
+  if (!view || !view.getComputedStyle) return false;
+  let node = el;
+  while (node && node.nodeType === 1) {
+    let style = view.getComputedStyle(node);
+    if (style && (style.display === "none" || style.visibility === "hidden")) {
+      return true;
+    }
+    node = node.parentElement;
+  }
+  return false;
+}
+
+function compareDomOrder(a, b) {
+  if (a === b) return 0;
+  let relation = a.compareDocumentPosition(b);
+  // 2 = DOCUMENT_POSITION_PRECEDING, 4 = DOCUMENT_POSITION_FOLLOWING
+  if (relation & 4) return -1;
+  if (relation & 2) return 1;
+  return 0;
+}
+
+function getPictures(vm) {
+  if (typeof vm.getPreviewPictureList !== "function") return [];
+  return vm.getPreviewPictureList() || [];
+}
+
+/**
+ * 汇总 vm 所在分组的图片列表
+ * @param {Object} vm 触发预览的 baseUpload 实例
+ * @param {Array} ownList vm 自己的图片列表(调用方已算好，避免重复计算)
+ * @returns {{list: Array, offset: Number}} 拼接后的列表与 vm 自己的图片在其中的起始下标
+ */
+export function collectPreviewList(vm, ownList) {
+  let own = ownList || [];
+  if (!isGroupEnabled(vm)) {
+    return { list: own, offset: 0 };
+  }
+  let scope = getScope(vm);
+  let members = [];
+  instances.forEach((item) => {
+    if (item === vm || !item.$el) return;
+    if (!isGroupEnabled(item)) return;
+    if (getScope(item) !== scope) return;
+    if (isHidden(item.$el)) return;
+    members.push(item);
+  });
+  members.push(vm);
+  members.sort((a, b) => compareDomOrder(a.$el, b.$el));
+
+  let list = [];
+  let offset = 0;
+  members.forEach((item) => {
+    let pictures = item === vm ? own : getPictures(item);
+    if (item === vm) {
+      offset = list.length;
+    }
+    if (pictures.length) {
+      list = list.concat(pictures);
+    }
+  });
+  return { list, offset };
+}

package/src/components/VabUpload/view.vue

@@ -172,7 +172,7 @@
       v-if="showViewer"
       :on-close="closeViewer"
       :initial-index.sync="chooseIndex"
-      :url-list="pictureDtoList"
+      :url-list="previewList"
     />
   </div>
 </template>

package/src/components/excelExport/exportFieldDialog.vue

@@ -44,6 +44,7 @@
 <script>
 import xeUtils from "xe-utils";
 import { isItemExport } from "./exportType";
+import { getExportItemColumns } from "./exportItemConfigUtil";
 export default {
   name: "exportFieldDialog",
   props: ["param"],
@@ -203,8 +204,7 @@ export default {
         });
       } else {
         //导出子表数据
-        let originOption = target.params.originOption;
-        let oriExportItemColumns = originOption.exportItemConfig?.columns || [];
+        let oriExportItemColumns = this.getExportItemColumns();
 
         // 与主表分支一致的三态：记为导出→勾选，记为不导出→不勾，两者都无（新增列）→ 默认勾选。
         // 这里曾以 allFields.includes(field) 为前置门槛，但 allFields 只在 custom-config
@@ -263,16 +263,21 @@ export default {
         this.$vxeTableUtil.setTableState($grid, "exportColumns", exportColumns);
       } else {
         //导出子表数据
-        let exportItemColumns = [];
-        if (originOption.exportItemConfig?.columns?.length) {
-          this.loopColumnHandle(originOption.exportItemConfig?.columns, (column) => {
-            if (column.field && column.title) {
-              let item = {
-                field: column.field,
-                export: checkLeafIds.includes(column.id),
-              };
+        let columns = this.getExportItemColumns();
+        if (columns.length) {
+          // 勾选记忆是整张表格共用的一条状态，而明细列可以按导出按钮各配一套，直接整体覆盖
+          // 会把其它按钮的记忆连带清掉，故按字段增量合并：本次导出涉及的字段更新，其余保留。
+          let exportItemColumns = (
+            this.$vxeTableUtil.getTableStateValue($grid, "exportItemColumns") || []
+          ).map((item) => ({ ...item }));
+          this.loopColumnHandle(columns, (column) => {
+            if (!column.field || !column.title) return;
+            let item = exportItemColumns.find((t) => t.field === column.field);
+            if (!item) {
+              item = { field: column.field };
               exportItemColumns.push(item);
             }
+            item.export = checkLeafIds.includes(column.id);
           });
           this.$vxeTableUtil.setTableState(
             $grid,
@@ -298,13 +303,12 @@ export default {
     },
     dialogConfirm() {
       let target = this.getGrid();
-      let originOption = target.params.originOption;
       let leafColumns = this.$refs.tree.getCheckedNodes(true);
       let checkIds = this.$refs.tree.getCheckedNodes(false, true).map((item) => item.id);
       let exportItem = isItemExport(this.param.type);
       let collectColumn = !exportItem
         ? target.getTableColumn().collectColumn
-        : originOption.exportItemConfig?.columns;
+        : this.getExportItemColumns();
       // 明细导出列未维护时这里是 undefined，下面 depthDo/loopDo 直接遍历会抛错
       collectColumn = collectColumn || [];
       // 按勾选后的实际层级算表头总行数（item.level 在导出明细列上不存在，不可依赖）
@@ -356,6 +360,13 @@ export default {
       });
       return cols;
     }, */
+    /**
+     * @returns {Array} 本次导出实际生效的明细导出列：导出按钮上单独维护时以按钮为准，
+     *   否则取数据表格属性上配的那套。
+     */
+    getExportItemColumns() {
+      return getExportItemColumns(this.param, this.getGrid());
+    },
     getGrid() {
       let that = this.param.vue;
       let tableRef = this.param.targetRef;

package/src/components/excelExport/exportItemConfigUtil.js

@@ -0,0 +1,30 @@
+/**
+ * 明细导出配置的取值口径。
+ *
+ * 明细导出列有两个来源：数据表格属性上的 `exportItemColumns`（表格级，历史唯一来源），
+ * 以及导出按钮自己维护的那份（按钮级，为的是同一张表格挂多个明细导出按钮、各导各自的列）。
+ * 按钮级的配置由 xform 的 exportData 组装好后随导出参数一路下发，表格级的挂在
+ * `$grid.params.originOption` 上，两者形状完全一致，**按钮优先**。
+ *
+ * 判定散在字段选择弹框、导出主流程、分页取数三处，口径必须一致，故收敛到这里。
+ */
+
+/**
+ * @param {Object} exportOption 本次导出的参数（$excelExport 的入参）。
+ * @param {Object} $grid vxe-grid 实例。
+ * @returns {Object|null} 本次导出实际生效的明细导出配置。
+ */
+export function getExportItemConfig(exportOption, $grid) {
+  let buttonConfig = exportOption?.exportItemConfig;
+  let tableConfig = $grid?.params?.originOption?.exportItemConfig;
+  return buttonConfig || tableConfig || null;
+}
+
+/**
+ * @param {Object} exportOption 本次导出的参数（$excelExport 的入参）。
+ * @param {Object} $grid vxe-grid 实例。
+ * @returns {Array} 本次导出实际生效的明细导出列；未维护时为空数组。
+ */
+export function getExportItemColumns(exportOption, $grid) {
+  return getExportItemConfig(exportOption, $grid)?.columns || [];
+}

package/src/components/excelExport/mixins.js

@@ -5,6 +5,7 @@ import indexUtil from "../../utils/index.js";
 import exportFieldDialog from "./exportFieldDialog.vue";
 import { getCellValue } from "@base/components/table/util/index";
 import { isItemExport, isRowExport, requiresCheckedRows } from "./exportType";
+import { getExportItemColumns } from "./exportItemConfigUtil";
 
 let configUtil = {
   baseUrl: process.env.VUE_APP_BASE_API,
@@ -110,10 +111,9 @@ function getGrid(that, tableRef) {
         // 明细导出的列来自 exportItemConfig，未维护时字段树为空、表头 JSON 也无从生成，
         // 必须在此拦掉：这里是所有导出的唯一入口，放行下去会在字段选择弹框里抛异常。
         if (isItemExport(this.option.type)) {
-          let originOption = $grid.params.originOption || {};
-          if (!originOption.exportItemConfig?.columns?.length) {
+          if (!getExportItemColumns(this.option, $grid).length) {
             this.$baseAlert(
-              this.$t1("未维护明细导出列，请先在数据表格属性中配置")
+              this.$t1("未维护明细导出列，请先在导出按钮或数据表格属性中配置")
             );
             this.param.destroyComponent();
             return;