cloud-web-corejs 1.0.280 → 1.0.282

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cloud-web-corejs",
   "private": false,
-  "version": "1.0.280",
+  "version": "1.0.282",
   "scripts": {
     "dev": "vue-cli-service serve",
     "lint": "eslint --ext .js,.vue src",

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/exportColumnMemory.js

@@ -0,0 +1,118 @@
+/**
+ * 导出字段勾选记忆的读写口径。
+ *
+ * 记忆存在表格的运行时状态里（随 addTableJson 落到服务端那条表格记录），历史上只有两条：
+ *   - `exportColumns`     主表导出，一张表只有一套表格列，整体重写即可；
+ *   - `exportItemColumns` 明细导出，**整张表共用一条扁平的 field→export 表**。
+ *
+ * 后者在"同一张表挂多个明细导出按钮、各配各的列"的用法下会串台：按钮 A 与按钮 B 只要
+ * 字段名有交集（order_no / create_date 这类基础字段几乎必然交集），A 的勾选就会被 B 覆盖。
+ * 且同一按钮内部若配了两条同字段的列（如「服务单价」「网点服务费」都取 site_amount），
+ * 保存时后者会覆盖前者，前者的勾选态永远存不下来。
+ *
+ * 现在改为按按钮分组存放：`exportItemColumnsMap = { [按钮名]: [{field, export}] }`，
+ * 组内条目**按该按钮的导出列顺序排列**，读取时同名字段按出现次序一一对应，重复字段互不干扰。
+ *
+ * 兼容：
+ *   - 旧记录里的扁平 `exportItemColumns` 仍然读，作为"该按钮还没有自己那组"时的回落；
+ *     回落匹配退化为首个同名条目（扁平表是跨按钮合并出来的，顺序本就没有意义）。
+ *   - 拿不到按钮名时（自定义脚本直接调 $excelExport）行为与改造前完全一致：读写扁平表。
+ */
+
+/** 表格状态里存放按钮分组记忆的键名。 */
+export const ITEM_MEMORY_MAP_KEY = "exportItemColumnsMap";
+/** 表格状态里存放扁平（跨按钮共用）记忆的键名，仅作回落。 */
+export const ITEM_MEMORY_FLAT_KEY = "exportItemColumns";
+/** 表格状态里存放主表导出记忆的键名。 */
+export const MAIN_MEMORY_KEY = "exportColumns";
+
+/**
+ * 把记忆条目整理成"字段 → 勾选态队列"，供按序取用。
+ * @param {Array} entries 记忆条目 `[{field, export}]`。
+ * @param {Boolean} ordered 同名字段是否按出现次序一一对应；false 时恒取首个。
+ * @returns {{next: function(String): (Boolean|undefined)}} 读取器；
+ *   `next(field)` 返回 true/false 表示记过，undefined 表示没记过（调用方按"新增列"处理）。
+ */
+export function createMemoryReader(entries, ordered = true) {
+  let queues = new Map();
+  (entries || []).forEach((item) => {
+    if (!item || !item.field) return;
+    if (!queues.has(item.field)) queues.set(item.field, []);
+    queues.get(item.field).push(!!item.export);
+  });
+  let cursors = new Map();
+  return {
+    next(field) {
+      let queue = queues.get(field);
+      if (!queue || !queue.length) return undefined;
+      if (!ordered) return queue[0];
+      let index = cursors.get(field) || 0;
+      // 记忆条目比当前同名列少（后来又加了一条同字段的列）：多出来的按"没记过"处理
+      if (index >= queue.length) return undefined;
+      cursors.set(field, index + 1);
+      return queue[index];
+    },
+  };
+}
+
+/**
+ * 取本次明细导出该用的勾选记忆。
+ * @param {Object} $vxeTableUtil 表格状态工具（$grid 上的读写口径收在这里）。
+ * @param {Object} $grid vxe-grid 实例。
+ * @param {String} [buttonName] 导出按钮标识；缺省时读扁平表。
+ * @returns {{next: function(String): (Boolean|undefined)}} 读取器。
+ */
+export function getItemMemoryReader($vxeTableUtil, $grid, buttonName) {
+  if (buttonName) {
+    let map = $vxeTableUtil.getTableStateValue($grid, ITEM_MEMORY_MAP_KEY);
+    let entries = map && map[buttonName];
+    // 该按钮已经有自己那组：按序匹配，重复字段互不干扰
+    if (entries && entries.length) return createMemoryReader(entries, true);
+  }
+  // 回落到改造前的扁平表（旧记录 / 无按钮标识）
+  let flat = $vxeTableUtil.getTableStateValue($grid, ITEM_MEMORY_FLAT_KEY);
+  return createMemoryReader(flat, false);
+}
+
+/**
+ * 保存本次明细导出的勾选记忆。
+ *
+ * 有按钮标识时整组重写（组内就是该按钮自己的列，重写可顺带清掉已删除的列），
+ * 其它按钮那几组原样保留；无按钮标识时沿用改造前的扁平表增量合并。
+ * @param {Object} $vxeTableUtil 表格状态工具。
+ * @param {Object} $grid vxe-grid 实例。
+ * @param {String} [buttonName] 导出按钮标识。
+ * @param {Array} entries 本次的记忆条目 `[{field, export}]`，须与导出列同序。
+ */
+export function saveItemMemory($vxeTableUtil, $grid, buttonName, entries) {
+  if (!entries || !entries.length) return;
+  if (buttonName) {
+    let oldMap = $vxeTableUtil.getTableStateValue($grid, ITEM_MEMORY_MAP_KEY);
+    let map = { ...(oldMap || {}) };
+    map[buttonName] = entries;
+    $vxeTableUtil.setTableState($grid, ITEM_MEMORY_MAP_KEY, map);
+    return;
+  }
+  // 扁平表是跨按钮共用的，整体覆盖会清掉别人的记忆，只能按字段增量合并
+  let flat = (
+    $vxeTableUtil.getTableStateValue($grid, ITEM_MEMORY_FLAT_KEY) || []
+  ).map((item) => ({ ...item }));
+  entries.forEach((entry) => {
+    let item = flat.find((t) => t.field === entry.field);
+    if (!item) {
+      item = { field: entry.field };
+      flat.push(item);
+    }
+    item.export = entry.export;
+  });
+  $vxeTableUtil.setTableState($grid, ITEM_MEMORY_FLAT_KEY, flat);
+}
+
+export default {
+  ITEM_MEMORY_MAP_KEY,
+  ITEM_MEMORY_FLAT_KEY,
+  MAIN_MEMORY_KEY,
+  createMemoryReader,
+  getItemMemoryReader,
+  saveItemMemory,
+};

package/src/components/excelExport/exportFieldDialog.vue

@@ -44,6 +44,12 @@
 <script>
 import xeUtils from "xe-utils";
 import { isItemExport } from "./exportType";
+import { getExportItemColumns } from "./exportItemConfigUtil";
+import {
+  MAIN_MEMORY_KEY,
+  getItemMemoryReader,
+  saveItemMemory,
+} from "./exportColumnMemory";
 export default {
   name: "exportFieldDialog",
   props: ["param"],
@@ -165,27 +171,24 @@ export default {
       let defaultCheckedKeys = [];
       let cols = [];
 
-      let yesFields = [];
-      let noFields = [];
-
-      let exportColumns =
-        this.$vxeTableUtil.getTableStateValue(
-          target,
-          !exportItem ? "exportColumns" : "exportItemColumns"
-        ) || [];
-
-      this.loopColumnHandle(exportColumns, (item) => {
-        if (item.field) {
-          if (item.export) {
-            yesFields.push(item.field);
-          } else {
-            noFields.push(item.field);
-          }
-        }
-      });
-
       if (!exportItem) {
         //导出主表数据
+        // 主表列一张表只有一套，记忆仍是一条扁平的 field→export 表
+        let yesFields = [];
+        let noFields = [];
+        let mainMemory = this.$vxeTableUtil.getTableStateValue(
+          target,
+          MAIN_MEMORY_KEY
+        );
+        this.loopColumnHandle(mainMemory || [], (item) => {
+          if (item.field) {
+            if (item.export) {
+              yesFields.push(item.field);
+            } else {
+              noFields.push(item.field);
+            }
+          }
+        });
 
         fullColumn.forEach((column) => {
           if (column.field && !column.params?.exportDisabled) {
@@ -203,20 +206,25 @@ export default {
         });
       } else {
         //导出子表数据
-        let originOption = target.params.originOption;
-        let oriExportItemColumns = originOption.exportItemConfig?.columns || [];
+        let oriExportItemColumns = this.getExportItemColumns();
 
         // 与主表分支一致的三态：记为导出→勾选，记为不导出→不勾，两者都无（新增列）→ 默认勾选。
         // 这里曾以 allFields.includes(field) 为前置门槛，但 allFields 只在 custom-config
         // 配了 checkMethod 时才有内容，而全库未配任何 checkMethod → 恒为空数组 → 明细列
         // 一个都勾不上，连 exportItemColumns 的勾选记忆也一并失效。明细列与主表列本就是两套
         // 字段，取交集没有意义，故去掉该门槛。
+        //
+        // 记忆按导出按钮分组存放（详见 exportColumnMemory.js）：next 必须按导出列顺序、
+        // 对每个有字段的列各调一次，重复字段才能按出现次序一一对应。
+        let reader = getItemMemoryReader(
+          this.$vxeTableUtil,
+          target,
+          this.getExportButtonName()
+        );
         this.loopColumnHandle(oriExportItemColumns, (item) => {
           item.id = this.generateId();
           if (!item.field) return;
-          let isYes = yesFields.includes(item.field);
-          let isNo = noFields.includes(item.field);
-          if (isYes || !isNo) {
+          if (reader.next(item.field) !== false) {
             defaultCheckedKeys.push(item.id);
           }
         });
@@ -260,24 +268,26 @@ export default {
             exportColumns.push(item);
           }
         });
-        this.$vxeTableUtil.setTableState($grid, "exportColumns", exportColumns);
+        this.$vxeTableUtil.setTableState($grid, MAIN_MEMORY_KEY, 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),
-              };
-              exportItemColumns.push(item);
-            }
+        let columns = this.getExportItemColumns();
+        if (columns.length) {
+          // 条目顺序必须与导出列一致：读取端靠这个顺序把同名字段一一对应上。
+          // 判定条件也要与读取端一致（只看 field），否则两端的游标会错位。
+          let entries = [];
+          this.loopColumnHandle(columns, (column) => {
+            if (!column.field) return;
+            entries.push({
+              field: column.field,
+              export: checkLeafIds.includes(column.id),
+            });
           });
-          this.$vxeTableUtil.setTableState(
+          saveItemMemory(
+            this.$vxeTableUtil,
             $grid,
-            "exportItemColumns",
-            exportItemColumns
+            this.getExportButtonName(),
+            entries
           );
         }
       }
@@ -298,13 +308,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 +365,20 @@ export default {
       });
       return cols;
     }, */
+    /**
+     * @returns {Array} 本次导出实际生效的明细导出列：导出按钮上单独维护时以按钮为准，
+     *   否则取数据表格属性上配的那套。
+     */
+    getExportItemColumns() {
+      return getExportItemColumns(this.param, this.getGrid());
+    },
+    /**
+     * @returns {String|null} 本次导出的按钮标识（勾选记忆按它分组）。自定义脚本直接调
+     *   $excelExport 时没有这一项，此时记忆退回改造前的表格级扁平表。
+     */
+    getExportButtonName() {
+      return this.param?.exportButtonName || null;
+    },
     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/index.js

@@ -4,17 +4,27 @@ import excelExport from "./index.vue";
 const moudule = {};
 const ExcelExportInstance = vue.extend(excelExport);
 let instance = null;
+/**
+ * 回收一个导出实例：销毁 vue 实例并摘掉 DOM。
+ * 只认传进来的这一个 —— 期间可能已经有新的导出把模块级 instance 顶掉，
+ * 那个新实例还在跑，不能连坐。
+ * @param {Object} target 要回收的导出实例
+ */
+function destroyInstance(target) {
+  if (!target) return;
+  try {
+    // $destroy 会走组件的 beforeDestroy：置终止标记、停定时器、掐在途请求、解页签锁
+    target.$destroy();
+    target.$el && target.$el.remove();
+  } catch (e) {
+    console.error(e);
+  }
+  if (instance === target) instance = null;
+}
+
 const initInstance = (containter) => {
   // 已有未销毁的导出实例时先销毁，避免覆盖引用造成旧实例与 DOM 泄漏
-  if (instance) {
-    try {
-      instance.$destroy();
-      instance.$el && instance.$el.remove();
-    } catch (e) {
-      console.error(e);
-    }
-    instance = null;
-  }
+  destroyInstance(instance);
   // 实例化vue实例
   instance = new ExcelExportInstance({ i18n: window.$vueRoot._i18n }).$mount();
   let dom = instance.$el;
@@ -29,6 +39,12 @@ function toDo(options) {
 
   let vueTarget = this && this.$el ? this : window.$vueRoot;
   let currentInstance = initInstance(containter);
+  // 导出实例是独立根实例：DOM 虽然 append 在宿主 $el 里，但两者没有父子关系。
+  // 宿主销毁（关页签、页面重建）只会把 DOM 带走，实例本身连同定时器、在途请求、
+  // 页签锁全都留着，要等下一次导出的 initInstance 才回收。把回收挂到宿主销毁上。
+  if (this && typeof this.$once === "function") {
+    this.$once("hook:beforeDestroy", () => destroyInstance(currentInstance));
+  }
   currentInstance.param = {};
   Object.assign(
     currentInstance.param,
@@ -39,11 +55,12 @@ function toDo(options) {
 }
 
 function destroyComponent(loadingObj) {
-  if (instance) {
+  // 必须在调用当时就捉住实例：下面的 setTimeout 里再读模块级 instance，
+  // 期间新开的一次导出会被误销毁
+  let target = instance;
+  if (target) {
     setTimeout(() => {
-      instance.$destroy(); // 触发销毁生命周期
-      instance.$el.remove(); // 移除 DOM 节点
-      instance = null;
+      destroyInstance(target);
       if (loadingObj) {
         setTimeout(function () {
           loadingObj.close();