cloud-web-corejs 1.1.0-dev.11 → 1.1.0-dev.13

package/package.json

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

package/src/components/VabUpload/view.vue

@@ -176,20 +176,20 @@
     />
     <!-- H5 非图片文件预览：结构与 mobile/wf/content.vue 的流程图预览一致，
          样式走 xform/styles/h5.scss 块 L 的 .pop-box（全屏 fixed + 内部 flex）。
-         只在宿主传了 h5Preview 时才会被 openPreview 打开，PC 上永远不渲染。 -->
-    <el-dialog
-      title="文件预览"
-      :modal-append-to-body="false"
-      :close-on-click-modal="false"
-      :visible.sync="showFilePreviewDialog"
-      :modal="false"
-      custom-class="dialog-style h5view-dialog"
-      width="100%"
-      top="0px"
-      v-el-drag-dialog
-      v-el-dialog-center
-      :append-to-body	="true"
-      :destroy-on-close="true"
+         只在宿主传了 h5Preview 时才会被 openPreview 打开，PC 上永远不渲染。 -->
+    <el-dialog
+      title="文件预览"
+      :modal-append-to-body="false"
+      :close-on-click-modal="false"
+      :visible.sync="showFilePreviewDialog"
+      :modal="false"
+      custom-class="dialog-style h5view-dialog"
+      width="100%"
+      top="0px"
+      v-el-drag-dialog
+      v-el-dialog-center
+      :append-to-body	="true"
+      :destroy-on-close="true"
     >
         <div class="flex">
           <div class="form-box">
@@ -201,17 +201,17 @@
               :src="previewFileUrl"
             ></iframe>
           </div>
-        </div>
-        <span slot="footer" class="dialog-footer">
-          <el-button
-            type="primary"
-            plain
-            class="button-sty"
-            icon="el-icon-close"
-            @click="showFilePreviewDialog = false"
-            >{{$t2('关 闭', 'system.button.close2')}}</el-button
-          >
-        </span>
+        </div>
+        <span slot="footer" class="dialog-footer">
+          <el-button
+            type="primary"
+            plain
+            class="button-sty"
+            icon="el-icon-close"
+            @click="showFilePreviewDialog = false"
+            >{{$t2('关 闭', 'system.button.close2')}}</el-button
+          >
+        </span>
       </el-dialog>
   </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

@@ -45,6 +45,11 @@
 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"],
@@ -166,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) {
@@ -211,12 +213,18 @@ export default {
         // 配了 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,29 +268,26 @@ export default {
             exportColumns.push(item);
           }
         });
-        this.$vxeTableUtil.setTableState($grid, "exportColumns", exportColumns);
+        this.$vxeTableUtil.setTableState($grid, MAIN_MEMORY_KEY, exportColumns);
       } else {
         //导出子表数据
         let columns = this.getExportItemColumns();
         if (columns.length) {
-          // 勾选记忆是整张表格共用的一条状态，而明细列可以按导出按钮各配一套，直接整体覆盖
-          // 会把其它按钮的记忆连带清掉，故按字段增量合并：本次导出涉及的字段更新，其余保留。
-          let exportItemColumns = (
-            this.$vxeTableUtil.getTableStateValue($grid, "exportItemColumns") || []
-          ).map((item) => ({ ...item }));
+          // 条目顺序必须与导出列一致：读取端靠这个顺序把同名字段一一对应上。
+          // 判定条件也要与读取端一致（只看 field），否则两端的游标会错位。
+          let entries = [];
           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);
+            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
           );
         }
       }
@@ -367,6 +372,13 @@ export default {
     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/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();