@idooel/components 0.0.2-beta.29 → 0.0.2-beta.30

package/dist/@idooel/components.esm.js

@@ -2129,7 +2129,8 @@ var script$D = {
       type: Number
     },
     x: {
-      type: Number,
+      // ant-design-vue: scroll.x 支持 number | string（如 'max-content'）
+      type: [Number, String],
       default: 1200
     },
     y: {
@@ -2182,7 +2183,11 @@ var script$D = {
       innerPageSize: 10,
       innerCurrentPage: 1,
       tableContentHeight: 0,
-      obs: []
+      obs: [],
+      // 容器宽度，用于智能判断是否需要 fixed 列
+      containerWidth: 0,
+      // 用于强制重新渲染表格（当 fixed 列状态切换时）
+      tableRenderKey: 0
     };
   },
   computed: {
@@ -2217,12 +2222,120 @@ var script$D = {
     isFlexColumn() {
       return this.columns.every(col => !col.width);
     },
+    /**
+     * 计算所有列的总宽度（包括 rowSelection 的 checkbox 列和操作列）
+     */
+    totalColumnsWidth() {
+      const cols = this.innerColumns || [];
+      let total = cols.reduce((sum, col) => {
+        const w = col && col.width;
+        return sum + (typeof w === 'number' ? w : 0);
+      }, 0);
+      // rowSelection 的 checkbox/radio 列，antd 默认约 60px
+      if (this.rowSelection) total += 60;
+      // 操作列（operations）的宽度
+      if (this.operations && this.operations.width && typeof this.operations.width === 'number') {
+        total += this.operations.width;
+      }
+      return total;
+    },
+    /**
+     * 是否需要横向滚动：容器宽度 < 列总宽度
+     */
+    needHorizontalScroll() {
+      // 未获取容器宽度前，先假定需要滚动（保守策略）
+      if (!this.containerWidth) return true;
+      // 加一点容差
+      return this.containerWidth < this.totalColumnsWidth - 5;
+    },
+    /**
+     * 智能列配置：
+     * - 当需要横向滚动时，保留原始 fixed 属性
+     * - 当容器足够宽时，移除 fixed 属性，让表格自动铺满
+     */
+    smartColumns() {
+      if (this.needHorizontalScroll) {
+        // 需要滚动，保留原始配置
+        return this.innerColumns;
+      }
+      // 不需要滚动，移除所有 fixed 属性
+      return this.innerColumns.map(col => {
+        if (col.fixed) {
+          const {
+            fixed,
+            ...rest
+          } = col;
+          return rest;
+        }
+        return col;
+      });
+    },
+    /**
+     * 智能 scroll 配置：
+     * - 当需要横向滚动时，设置 scroll.x
+     * - 当容器足够宽时，不设置 scroll.x，避免产生空白区域
+     */
+    smartScroll() {
+      if (!this.needHorizontalScroll) {
+        // 不需要横向滚动，只保留 y 方向（如果需要）
+        if (this.height && this.needScrollY) {
+          const availableHeight = this.tableHeaderHeight && this.paginationHeight ? this.getScrollHeightByHeight : this.height - 100;
+          if (availableHeight > 50) {
+            return {
+              y: availableHeight
+            };
+          }
+        }
+        return {};
+      }
+      // 需要横向滚动，使用原有逻辑
+      return this.getScroll;
+    },
+    /**
+     * 智能 rowSelection 配置：
+     * - 当需要横向滚动时，保留原始 fixed 属性
+     * - 当容器足够宽时，移除 fixed 属性
+     */
+    smartRowSelection() {
+      if (!this.rowSelection) return null;
+      if (this.needHorizontalScroll) {
+        return this.rowSelection;
+      }
+      // 不需要滚动，移除 fixed 属性
+      if (this.rowSelection.fixed) {
+        const {
+          fixed,
+          ...rest
+        } = this.rowSelection;
+        return rest;
+      }
+      return this.rowSelection;
+    },
     getScroll() {
       if (this.scroll) {
         return this.scroll;
       } else {
         // 固定列需要 scroll.x 才能正确同步行高，始终设置一个有效值
-        const baseX = this.x || 1200;
+        let baseX = this.x === '' || this.x === null || this.x === undefined ? 1200 : this.x;
+
+        // 解决“x 给太大导致操作列前出现大块空白”的问题：
+        // 当所有列都给了明确 width 时，scroll.x 取列宽总和最合理；大于总和会产生多余区域。
+        if (typeof baseX === 'number') {
+          const cols = this.innerColumns || [];
+          const total = cols.reduce((sum, col) => {
+            const w = col && col.width;
+            return sum + (typeof w === 'number' ? w : 0);
+          }, 0);
+
+          // rowSelection 的 checkbox/radio 列是 antd 自动加的，给一个经验宽度避免误差
+          const selectionWidth = this.rowSelection ? 60 : 0;
+
+          // 只有当所有列都明确给了宽度（total > 0）时才 clamp
+          if (total > 0) {
+            const minX = total + selectionWidth;
+            if (baseX > minX) baseX = minX;
+          }
+        }
         if (this.height && this.needScrollY) {
           const availableHeight = this.tableHeaderHeight && this.paginationHeight ? this.getScrollHeightByHeight : this.height - 100;
           if (availableHeight > 50) {
@@ -2244,6 +2357,20 @@ var script$D = {
         this.innerPageSize = pageSize;
       },
       immediate: true
+    },
+    /**
+     * 监听 needHorizontalScroll 变化，强制重新渲染表格
+     * 当从"需要固定列"切换到"不需要固定列"或反之时，antd 的 a-table 需要完全重新渲染
+     */
+    needHorizontalScroll(newVal, oldVal) {
+      if (newVal !== oldVal) {
+        // 更新 key 强制 Vue 销毁并重建 a-table 组件
+        this.tableRenderKey++;
+        // 使用重试机制确保固定列完全渲染
+        this.$nextTick(() => {
+          this.retrySyncFixedColumns(newVal);
+        });
+      }
     }
   },
   methods: {
@@ -2285,19 +2412,195 @@ var script$D = {
       this.innerCurrentPage = page;
       this.innerPageSize = pageSize;
       this.$emit('change-page', page, pageSize);
+    },
+    syncFixedColumns() {
+      // 强制 ant-design-vue 重新计算固定列的宽度
+      this.$nextTick(() => {
+        const tableEl = this.$el.querySelector('.ant-table');
+        if (tableEl) {
+          // 触发窗口 resize 事件，让 ant-design-vue 重新计算
+          window.dispatchEvent(new Event('resize'));
+        }
+      });
+    },
+    /**
+     * 带重试的固定列同步机制
+     * antd 的 a-table 在 key 变化后重新渲染固定列需要一定时间，
+     * 这里通过重试确保固定列渲染完成后再同步。
+     * @param {boolean} needFixed - 是否需要固定列
+     * @param {number} retries - 当前重试次数
+     */
+    retrySyncFixedColumns(needFixed, retries = 0) {
+      const MAX_RETRIES = 5;
+      const DELAY = 100; // 每次延迟 100ms
+
+      setTimeout(() => {
+        this.syncFixedColumns();
+        this.syncHeaderTableWidth();
+        this.bindScrollSync();
+
+        // 如果需要固定列，检查是否已渲染
+        if (needFixed && retries < MAX_RETRIES) {
+          const hasFixedLeft = this.$el.querySelector('.ant-table-fixed-left .ant-table-body tbody tr');
+          const hasFixedRight = this.$el.querySelector('.ant-table-fixed-right .ant-table-body tbody tr');
+
+          // 如果有固定列配置但还没渲染出来，继续重试
+          const hasFixedConfig = this.innerColumns.some(c => c.fixed) || this.rowSelection && this.rowSelection.fixed;
+          if (hasFixedConfig && !hasFixedLeft && !hasFixedRight) {
+            this.retrySyncFixedColumns(needFixed, retries + 1);
+          }
+        }
+      }, DELAY);
+    },
+    /**
+     * 修复 x: 'max-content' 场景下表头不跟着横向滚动的问题。
+     * 原因：ant-design-vue 的 header table 和 body table 各自算 max-content，
+     *       header 按表头文字算、body 按实际数据算，二者宽度不同时 header 就"滚不动"。
+     * 方案：数据渲染后把 header table 的 width 强制设成和 body table 一样。
+     */
+    syncHeaderTableWidth() {
+      this.$nextTick(() => {
+        const headerTable = this.$el.querySelector('.ant-table-scroll .ant-table-header table');
+        const bodyTable = this.$el.querySelector('.ant-table-scroll .ant-table-body table');
+        if (!headerTable || !bodyTable) return;
+        const bodyW = bodyTable.getBoundingClientRect().width;
+        const headerW = headerTable.getBoundingClientRect().width;
+
+        // 始终同步表头宽度到表体宽度，确保窗口变大/变小时都能正确响应
+        // 只有当宽度差异超过 2px 时才更新，避免频繁设置样式
+        if (Math.abs(bodyW - headerW) > 2) {
+          headerTable.style.width = `${bodyW}px`;
+          headerTable.style.minWidth = `${bodyW}px`;
+        }
+      });
+    },
+    /**
+     * 监听表体横向滚动，同步到表头（防止 antd 自带同步失效）
+     */
+    bindScrollSync() {
+      const body = this.$el.querySelector('.ant-table-scroll .ant-table-body');
+      const header = this.$el.querySelector('.ant-table-scroll .ant-table-header');
+      if (!body || !header) return;
+      if (this._scrollHandler) return; // 已绑定
+      this._scrollHandler = () => {
+        header.scrollLeft = body.scrollLeft;
+      };
+      body.addEventListener('scroll', this._scrollHandler, {
+        passive: true
+      });
+    },
+    unbindScrollSync() {
+      const body = this.$el.querySelector('.ant-table-scroll .ant-table-body');
+      if (body && this._scrollHandler) {
+        body.removeEventListener('scroll', this._scrollHandler);
+        this._scrollHandler = null;
+      }
+    },
+    /**
+     * 测量容器宽度
+     */
+    measureContainerWidth() {
+      const wrapper = this.$refs.tableWrapper;
+      if (wrapper) {
+        this.containerWidth = wrapper.clientWidth;
+      }
+    },
+    /**
+     * 使用 ResizeObserver 监听容器宽度变化
+     */
+    observeContainerWidth() {
+      const wrapper = this.$refs.tableWrapper;
+      if (!wrapper || typeof ResizeObserver === 'undefined') return;
+      if (this._containerResizeObserver) return; // 已绑定
+
+      this._containerResizeObserver = new ResizeObserver(entries => {
+        for (const entry of entries) {
+          const newWidth = entry.contentRect.width;
+          // 只有宽度变化超过阈值才触发更新，避免微小变化导致频繁重渲染
+          if (Math.abs(newWidth - this.containerWidth) > 10) {
+            const oldNeedScroll = this.needHorizontalScroll;
+            this.containerWidth = newWidth;
+            // 容器宽度变化会触发 needHorizontalScroll 的重新计算
+            // needHorizontalScroll 的 watcher 会处理表格重新渲染和列宽同步
+            // 这里不需要直接调用 syncFixedColumns，避免与 watcher 的执行时机冲突
+            // 无论 needHorizontalScroll 是否变化，都立即同步表头宽度
+            // 确保窗口变大/变小时表头都能及时响应
+            this.$nextTick(() => {
+              // 使用 requestAnimationFrame 确保在浏览器重绘后同步表头宽度
+              // 这样能确保表体宽度已经更新完成
+              requestAnimationFrame(() => {
+                this.syncHeaderTableWidth();
+              });
+
+              // 如果 needHorizontalScroll 状态没有变化，说明只是列宽需要调整，直接同步
+              // 如果状态变化了，watcher 会处理重新渲染
+              if (this.needHorizontalScroll === oldNeedScroll) {
+                // 防抖：延迟同步固定列，避免频繁调用
+                if (this._resizeDebounceTimer) {
+                  clearTimeout(this._resizeDebounceTimer);
+                }
+                this._resizeDebounceTimer = setTimeout(() => {
+                  this.syncFixedColumns();
+                  this.syncHeaderTableWidth();
+                  this.bindScrollSync();
+                }, 150);
+              }
+            });
+          }
+        }
+      });
+      this._containerResizeObserver.observe(wrapper);
+    },
+    /**
+     * 断开容器宽度监听
+     */
+    unobserveContainerWidth() {
+      if (this._containerResizeObserver) {
+        this._containerResizeObserver.disconnect();
+        this._containerResizeObserver = null;
+      }
+      // 清理防抖定时器
+      if (this._resizeDebounceTimer) {
+        clearTimeout(this._resizeDebounceTimer);
+        this._resizeDebounceTimer = null;
+      }
     }
   },
   mounted() {
     this.$nextTick(() => {
+      // 先测量容器宽度，用于智能判断是否需要 fixed 列
+      this.measureContainerWidth();
+      this.observeContainerWidth();
       this.setPaginationHeight();
       setTimeout(() => {
         this.setTableTbodyHeight();
         this.setPaginationHeight();
+        // 强制同步固定列和主表的列宽
+        this.syncFixedColumns();
+        // 同步表头 table 宽度（修复 max-content 场景）
+        this.syncHeaderTableWidth();
+        // 绑定横向滚动同步
+        this.bindScrollSync();
       }, 200);
     });
+
+    // 监听数据变化，重新同步列宽
+    this.$watch('dataSource', () => {
+      this.$nextTick(() => {
+        setTimeout(() => {
+          this.syncFixedColumns();
+          this.syncHeaderTableWidth();
+          this.bindScrollSync();
+        }, 100);
+      });
+    }, {
+      deep: true
+    });
   },
   destroyed() {
     this.obs.forEach(ob => ob.disconnect());
+    this.unbindScrollSync();
+    this.unobserveContainerWidth();
   }
 };
 
@@ -2311,20 +2614,25 @@ var __vue_render__$D = function () {
   var _c = _vm._self._c || _h;
   return _c(
     "div",
-    { staticClass: "g-table__wrapper", style: _vm.wrapperStyle },
+    {
+      ref: "tableWrapper",
+      staticClass: "g-table__wrapper",
+      style: _vm.wrapperStyle,
+    },
     [
       _c("a-table", {
+        key: _vm.tableRenderKey,
         class: [_vm.isNoData && "g-table__no-data"],
         attrs: {
           bordered: _vm.bordered,
           pagination: false,
           loading: _vm.loading,
           size: "middle",
-          columns: _vm.innerColumns,
-          "row-selection": _vm.rowSelection,
+          columns: _vm.smartColumns,
+          "row-selection": _vm.smartRowSelection,
           "row-class-name": _vm.setRowClassName,
           "data-source": _vm.dataSource,
-          scroll: _vm.getScroll,
+          scroll: _vm.smartScroll,
         },
         scopedSlots: _vm._u([
           {
@@ -2371,6 +2679,7 @@ var __vue_render__$D = function () {
                   pageSize: _vm.innerPageSize,
                   current: _vm.innerCurrentPage,
                   pageSizeOptions: _vm.pageSizeOptions,
+                  data: _vm.dataSource.length,
                   total: _vm.total,
                 },
                 on: {
@@ -2391,11 +2700,11 @@ __vue_render__$D._withStripped = true;
   /* style */
   const __vue_inject_styles__$D = function (inject) {
     if (!inject) return
-    inject("data-v-9fb141ac_0", { source: "@charset \"UTF-8\";\n.g-table__wrapper[data-v-9fb141ac] {\n  /* 强制统一行高，确保主表和固定列对齐 */\n}\n.g-table__wrapper[data-v-9fb141ac]  .ant-table-tbody > tr > td {\n  height: 54px;\n  padding: 8px 16px;\n  vertical-align: middle;\n  box-sizing: border-box;\n}\n.g-table__wrapper[data-v-9fb141ac] {\n  /* 固定列使用相同的行高 */\n}\n.g-table__wrapper[data-v-9fb141ac]  .ant-table-fixed .ant-table-tbody > tr > td {\n  height: 54px;\n  padding: 8px 16px;\n  vertical-align: middle;\n  box-sizing: border-box;\n}\n.g-table__wrapper[data-v-9fb141ac] {\n  /* 表头也统一高度 */\n}\n.g-table__wrapper[data-v-9fb141ac]  .ant-table-thead > tr > th {\n  height: 54px;\n  padding: 8px 16px;\n  vertical-align: middle;\n  box-sizing: border-box;\n}\n.g-table__wrapper[data-v-9fb141ac]  .ant-table-fixed .ant-table-thead > tr > th {\n  height: 54px;\n  padding: 8px 16px;\n  vertical-align: middle;\n  box-sizing: border-box;\n}\n.g-table__wrapper[data-v-9fb141ac] {\n  /* 分页区域固定在底部 */\n}\n.g-table__wrapper .g-table__pagination[data-v-9fb141ac] {\n  display: flex;\n  flex-direction: row;\n  justify-content: end;\n  border-top: unset;\n  padding-top: 8px;\n  padding-bottom: 8px;\n  background: #fff;\n}\n.g-table__wrapper[data-v-9fb141ac] {\n  /* 空数据状态顶部显示 */\n}\n.g-table__wrapper .g-table__no-data[data-v-9fb141ac] {\n  position: relative;\n}\n.g-table__wrapper .g-table__no-data[data-v-9fb141ac]  .ant-table-placeholder {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -40%);\n  width: 100%;\n  height: 100%;\n  text-align: center;\n  color: #999;\n  font-size: 14px;\n  font-weight: normal;\n  line-height: 20px;\n  overflow: hidden;\n  border: unset;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["index.vue","E:\\code\\OnlineStudy-Base\\base-elearning-frontend-model\\packages\\components\\packages\\table\\src\\index.vue"],"names":[],"mappings":"AAAA,gBAAgB;AC2OhB;EACA,sBAAA;ADzOA;AC0OA;EACA,YAAA;EACA,iBAAA;EACA,sBAAA;EACA,sBAAA;ADxOA;ACkOA;EASA,eAAA;ADxOA;ACyOA;EACA,YAAA;EACA,iBAAA;EACA,sBAAA;EACA,sBAAA;ADvOA;ACyNA;EAiBA,YAAA;ADvOA;ACwOA;EACA,YAAA;EACA,iBAAA;EACA,sBAAA;EACA,sBAAA;ADtOA;ACyOA;EACA,YAAA;EACA,iBAAA;EACA,sBAAA;EACA,sBAAA;ADvOA;AC0MA;EAgCA,cAAA;ADvOA;ACwOA;EACA,aAAA;EACA,mBAAA;EACA,oBAAA;EACA,iBAAA;EACA,gBAAA;EACA,mBAAA;EACA,gBAAA;ADtOA;AC8LA;EA2CA,cAAA;ADtOA;ACuOA;EACA,kBAAA;ADrOA;ACsOA;EACA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,gCAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,WAAA;EACA,eAAA;EACA,mBAAA;EACA,iBAAA;EACA,gBAAA;EACA,aAAA;ADpOA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["@charset \"UTF-8\";\n.g-table__wrapper {\n  /* 强制统一行高，确保主表和固定列对齐 */\n}\n.g-table__wrapper ::v-deep .ant-table-tbody > tr > td {\n  height: 54px;\n  padding: 8px 16px;\n  vertical-align: middle;\n  box-sizing: border-box;\n}\n.g-table__wrapper {\n  /* 固定列使用相同的行高 */\n}\n.g-table__wrapper ::v-deep .ant-table-fixed .ant-table-tbody > tr > td {\n  height: 54px;\n  padding: 8px 16px;\n  vertical-align: middle;\n  box-sizing: border-box;\n}\n.g-table__wrapper {\n  /* 表头也统一高度 */\n}\n.g-table__wrapper ::v-deep .ant-table-thead > tr > th {\n  height: 54px;\n  padding: 8px 16px;\n  vertical-align: middle;\n  box-sizing: border-box;\n}\n.g-table__wrapper ::v-deep .ant-table-fixed .ant-table-thead > tr > th {\n  height: 54px;\n  padding: 8px 16px;\n  vertical-align: middle;\n  box-sizing: border-box;\n}\n.g-table__wrapper {\n  /* 分页区域固定在底部 */\n}\n.g-table__wrapper .g-table__pagination {\n  display: flex;\n  flex-direction: row;\n  justify-content: end;\n  border-top: unset;\n  padding-top: 8px;\n  padding-bottom: 8px;\n  background: #fff;\n}\n.g-table__wrapper {\n  /* 空数据状态顶部显示 */\n}\n.g-table__wrapper .g-table__no-data {\n  position: relative;\n}\n.g-table__wrapper .g-table__no-data ::v-deep .ant-table-placeholder {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -40%);\n  width: 100%;\n  height: 100%;\n  text-align: center;\n  color: #999;\n  font-size: 14px;\n  font-weight: normal;\n  line-height: 20px;\n  overflow: hidden;\n  border: unset;\n}\n\n/*# sourceMappingURL=index.vue.map */","<template>\r\n  <div class=\"g-table__wrapper\" :style=\"wrapperStyle\">\r\n    <a-table\r\n      :bordered=\"bordered\"\r\n      :class=\"[isNoData && 'g-table__no-data']\"\r\n      :pagination=\"false\"\r\n      :loading=\"loading\"\r\n      size=\"middle\"\r\n      :columns=\"innerColumns\"\r\n      :row-selection=\"rowSelection\"\r\n      :row-class-name=\"setRowClassName\"\r\n      :data-source=\"dataSource\"\r\n      :scroll=\"getScroll\">\r\n      <template slot=\"action\" slot-scope=\"record\">\r\n        <Actions v-on=\"$listeners\" :data-source=\"actions\" :record=\"record\"></Actions>\r\n      </template>\r\n    </a-table>\r\n    <div class=\"g-table__pagination\">\r\n      <a-pagination\r\n        :show-total=\"all => `共 ${all} 条数据`\"\r\n        v-if=\"mode === 'default'\"\r\n        show-size-changer \r\n        show-quick-jumper\r\n        :pageSize=\"innerPageSize\"\r\n        :current=\"innerCurrentPage\"\r\n        :pageSizeOptions=\"pageSizeOptions\"\r\n        @change=\"onChangePagination\"\r\n        @showSizeChange=\"onShowSizeChange\"\r\n        :total=\"total\">\r\n      </a-pagination>\r\n      <ele-pagination\r\n        v-else\r\n        :pageSize=\"innerPageSize\"\r\n        :current=\"innerCurrentPage\"\r\n        :pageSizeOptions=\"pageSizeOptions\"\r\n        @change=\"onChangePagination\"\r\n        @showSizeChange=\"onShowSizeChange\"\r\n        :total=\"total\"\r\n      ></ele-pagination>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport Actions from './action.vue'\r\nexport default {\r\n  name: 'ele-table',\r\n  components: {\r\n    Actions\r\n  },\r\n  props: {\r\n    mode: {\r\n      type: String,\r\n      default: 'default',\r\n      validator: (value) => {\r\n        return ['default', 'next-cursor'].includes(value)\r\n      }\r\n    },\r\n    // ant table wrapper\r\n    height: {\r\n      type: Number\r\n    },\r\n    width: {\r\n      type: Number\r\n    },\r\n    x: {\r\n      type: Number,\r\n      default: 1200\r\n    },\r\n    y: {\r\n      type: Number,\r\n      default: 200\r\n    },\r\n    scroll: {\r\n      type: Object\r\n    },\r\n    rowSelection: {\r\n      type: Object\r\n    },\r\n    actions: {\r\n      type: Array,\r\n      default: () => []\r\n    },\r\n    total: {\r\n      type: Number,\r\n      default: 0\r\n    },\r\n    loading: {\r\n      type: Boolean,\r\n      default: false\r\n    },\r\n    columns: {\r\n      type: Array,\r\n      default: () => []\r\n    },\r\n    dataSource: {\r\n      type: Array,\r\n      default: () => []\r\n    },\r\n    pageSize: {\r\n      type: [Number, String],\r\n      default: 10\r\n    },\r\n    pageSizeOptions: {\r\n      type: Array,\r\n      default: () => ['10', '20', '30', '40']\r\n    },\r\n    bordered: {\r\n      type: Boolean,\r\n      default: true\r\n    }\r\n  },\r\n  data() {\r\n    return {\r\n      tableHeaderHeight: 0,\r\n      paginationHeight: 0,\r\n      innerPageSize: 10,\r\n      innerCurrentPage: 1,\r\n      tableContentHeight: 0,\r\n      obs: []\r\n    }\r\n  },\r\n  computed: {\r\n    wrapperStyle () {\r\n      // 外层容器样式\r\n      if (!this.height) return {}\r\n      return { height: `${this.height}px` }\r\n    },\r\n    needScrollY () {\r\n      // 判断是否需要 y 轴滚动：基于数据行数与可用高度预估\r\n      if (!this.height) return false\r\n      \r\n      const availableHeight = this.getScrollHeightByHeight\r\n      if (availableHeight <= 0) return false\r\n      \r\n      // 预估每行高度（包含边框），antd 默认约 54px\r\n      const estimatedRowHeight = 54\r\n      const estimatedTableHeight = this.dataSource.length * estimatedRowHeight\r\n      \r\n      return estimatedTableHeight > availableHeight\r\n    },\r\n    innerColumns () {\r\n      return this.columns.filter(col => !Object.keys(col).includes('multiple'))\r\n    },\r\n    isNoData () {\r\n      return !this.dataSource.length\r\n    },\r\n    getScrollHeightByHeight () {\r\n      // 始终返回可用的剩余高度，让表格内容不足时也能占满容器\r\n      return this.height - this.tableHeaderHeight - this.paginationHeight\r\n    },\r\n    isFlexColumn () {\r\n      return this.columns.every(col => !col.width)\r\n    },\r\n    getScroll () {\r\n      if (this.scroll) {\r\n        return this.scroll\r\n      } else {\r\n        // 固定列需要 scroll.x 才能正确同步行高，始终设置一个有效值\r\n        const baseX = this.x || 1200\r\n        \r\n        if (this.height && this.needScrollY) {\r\n          const availableHeight = this.tableHeaderHeight && this.paginationHeight \r\n            ? this.getScrollHeightByHeight \r\n            : this.height - 100\r\n          \r\n          if (availableHeight > 50) {\r\n            return { x: baseX, y: availableHeight }\r\n          }\r\n        }\r\n        return { x: baseX }\r\n      }\r\n    }\r\n  },\r\n  watch: {\r\n    pageSize: {\r\n      handler (pageSize) {\r\n        this.innerPageSize = pageSize\r\n      },\r\n      immediate: true\r\n    }\r\n  },\r\n  methods: {\r\n    onShowSizeChange (current, pageSize) {\r\n      this.innerCurrentPage = current\r\n      this.innerPageSize = pageSize\r\n      this.$emit('change-page', current, pageSize)\r\n    },\r\n    setPaginationHeight () {\r\n      this.$nextTick(() => {\r\n        const el = this.$el.querySelector('.g-table__pagination')\r\n        if (el) {\r\n          const { height } = el.getBoundingClientRect()\r\n          this.paginationHeight = height\r\n        }\r\n      })\r\n    },\r\n    setTableHeaderHeight () {\r\n      this.$nextTick(() => {\r\n        const el = this.$el.querySelector('.ant-table-header')\r\n        if (!el) return\r\n        const { height } = el.getBoundingClientRect()\r\n        this.tableHeaderHeight = height\r\n      })\r\n    },\r\n    setTableTbodyHeight () {\r\n      this.$nextTick(() => {\r\n        this.setTableHeaderHeight()\r\n      })\r\n    },\r\n    setRowClassName (record, idx) {\r\n      return idx % 2 === 0 ? 'g-table__row--even' : 'g-table__row--odd'\r\n    },\r\n    onChangePagination (page, pageSize) {\r\n      this.innerCurrentPage = page\r\n      this.innerPageSize = pageSize\r\n      this.$emit('change-page', page, pageSize)\r\n    }\r\n  },\r\n  mounted() {\r\n    this.$nextTick(() => {\r\n      this.setPaginationHeight()\r\n      setTimeout(() => {\r\n        this.setTableTbodyHeight()\r\n        this.setPaginationHeight()\r\n      }, 200)\r\n    })\r\n  },\r\n  destroyed () {\r\n    this.obs.forEach(ob => ob.disconnect())\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.g-table__wrapper {\r\n  /* 强制统一行高，确保主表和固定列对齐 */\r\n  ::v-deep .ant-table-tbody > tr > td {\r\n    height: 54px;\r\n    padding: 8px 16px;\r\n    vertical-align: middle;\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  /* 固定列使用相同的行高 */\r\n  ::v-deep .ant-table-fixed .ant-table-tbody > tr > td {\r\n    height: 54px;\r\n    padding: 8px 16px;\r\n    vertical-align: middle;\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  /* 表头也统一高度 */\r\n  ::v-deep .ant-table-thead > tr > th {\r\n    height: 54px;\r\n    padding: 8px 16px;\r\n    vertical-align: middle;\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  ::v-deep .ant-table-fixed .ant-table-thead > tr > th {\r\n    height: 54px;\r\n    padding: 8px 16px;\r\n    vertical-align: middle;\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  /* 分页区域固定在底部 */\r\n  .g-table__pagination {\r\n    display: flex;\r\n    flex-direction: row;\r\n    justify-content: end;\r\n    border-top: unset;\r\n    padding-top: 8px;\r\n    padding-bottom: 8px;\r\n    background: #fff;\r\n  }\r\n\r\n  /* 空数据状态顶部显示 */\r\n  .g-table__no-data {\r\n    position: relative;\r\n    ::v-deep .ant-table-placeholder {\r\n      position: absolute;\r\n      top: 50%;\r\n      left: 50%;\r\n      transform: translate(-50%, -40%);\r\n      width: 100%;\r\n      height: 100%;\r\n      text-align: center;\r\n      color: #999;\r\n      font-size: 14px;\r\n      font-weight: normal;\r\n      line-height: 20px;\r\n      overflow: hidden;\r\n      border: unset;\r\n    }\r\n  }\r\n}\r\n</style>"]}, media: undefined });
+    inject("data-v-33440b92_0", { source: "@charset \"UTF-8\";\n.g-table__wrapper[data-v-33440b92] {\n  /**\n   * 修复\"宽屏下表格两侧出现空白\"问题：\n   * 当视口宽度大于表格内容宽度时，主表(ant-table-scroll)不会自动拉伸，\n   * 而固定列(fixed-left/fixed-right)是 position:absolute 定位在容器边缘，中间就出现空白。\n   * 解决方案：让主表的 table 元素 min-width:100%，使其始终填满滚动容器。\n   */\n}\n.g-table__wrapper[data-v-33440b92]  .ant-table-scroll .ant-table-header table,\n.g-table__wrapper[data-v-33440b92]  .ant-table-scroll .ant-table-body table {\n  min-width: 100%;\n}\n.g-table__wrapper[data-v-33440b92] {\n  /**\n   * 修复\"固定列 + scroll.x\"场景下，主表(ant-table-scroll)里会渲染一份 fixed 列的占位 header/cell。\n   * 这份占位本来只用于计算宽度，但在某些布局下会被看见，表现为\"操作列前多了一大块空白/空列\"。\n   * 这里用 visibility:hidden 隐藏占位（不影响占位宽度与 fixed 计算），避免视觉空白。\n   */\n}\n.g-table__wrapper[data-v-33440b92]  .ant-table-scroll .ant-table-header thead > tr > th.ant-table-fixed-columns-in-body.ant-table-row-cell-last,\n.g-table__wrapper[data-v-33440b92]  .ant-table-scroll .ant-table-body tbody > tr > td.ant-table-fixed-columns-in-body.ant-table-row-cell-last {\n  visibility: hidden;\n}\n.g-table__wrapper[data-v-33440b92] {\n  /* 强制统一行高，确保主表和固定列对齐 */\n}\n.g-table__wrapper[data-v-33440b92]  .ant-table-tbody > tr > td {\n  height: 54px;\n  padding: 8px 16px;\n  vertical-align: middle;\n  box-sizing: border-box;\n  line-height: 38px;\n}\n.g-table__wrapper[data-v-33440b92] {\n  /* 表头也统一高度和样式 */\n}\n.g-table__wrapper[data-v-33440b92]  .ant-table-thead > tr > th {\n  height: 54px;\n  padding: 8px 16px;\n  vertical-align: middle;\n  box-sizing: border-box;\n  line-height: 38px;\n}\n.g-table__wrapper[data-v-33440b92] {\n  /* 分页区域固定在底部 */\n}\n.g-table__wrapper .g-table__pagination[data-v-33440b92] {\n  display: flex;\n  flex-direction: row;\n  justify-content: end;\n  border-top: unset;\n  padding-top: 8px;\n  padding-bottom: 8px;\n  background: #fff;\n}\n.g-table__wrapper[data-v-33440b92] {\n  /* 空数据状态顶部显示 */\n}\n.g-table__wrapper .g-table__no-data[data-v-33440b92] {\n  position: relative;\n}\n.g-table__wrapper .g-table__no-data[data-v-33440b92]  .ant-table-placeholder {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -40%);\n  width: 100%;\n  height: 100%;\n  text-align: center;\n  color: #999;\n  font-size: 14px;\n  font-weight: normal;\n  line-height: 20px;\n  overflow: hidden;\n  border: unset;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["index.vue","E:\\code\\OnlineStudy-Base\\base-elearning-frontend-model\\packages\\components\\packages\\table\\src\\index.vue"],"names":[],"mappings":"AAAA,gBAAgB;ACshBhB;EACA;;;;;IAAA;AD/gBA;ACqhBA;;EAEA,eAAA;ADnhBA;AC0gBA;EAYA;;;;IAAA;AD/gBA;ACohBA;;EAEA,kBAAA;ADlhBA;AC+fA;EAsBA,sBAAA;ADlhBA;ACmhBA;EACA,YAAA;EACA,iBAAA;EACA,sBAAA;EACA,sBAAA;EACA,iBAAA;ADjhBA;ACqfA;EA+BA,eAAA;ADjhBA;ACkhBA;EACA,YAAA;EACA,iBAAA;EACA,sBAAA;EACA,sBAAA;EACA,iBAAA;ADhhBA;AC2eA;EAwCA,cAAA;ADhhBA;ACihBA;EACA,aAAA;EACA,mBAAA;EACA,oBAAA;EACA,iBAAA;EACA,gBAAA;EACA,mBAAA;EACA,gBAAA;AD/gBA;AC+dA;EAmDA,cAAA;AD/gBA;ACghBA;EACA,kBAAA;AD9gBA;AC+gBA;EACA,kBAAA;EACA,QAAA;EACA,SAAA;EACA,gCAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,WAAA;EACA,eAAA;EACA,mBAAA;EACA,iBAAA;EACA,gBAAA;EACA,aAAA;AD7gBA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["@charset \"UTF-8\";\n.g-table__wrapper {\n  /**\n   * 修复\"宽屏下表格两侧出现空白\"问题：\n   * 当视口宽度大于表格内容宽度时，主表(ant-table-scroll)不会自动拉伸，\n   * 而固定列(fixed-left/fixed-right)是 position:absolute 定位在容器边缘，中间就出现空白。\n   * 解决方案：让主表的 table 元素 min-width:100%，使其始终填满滚动容器。\n   */\n}\n.g-table__wrapper ::v-deep .ant-table-scroll .ant-table-header table,\n.g-table__wrapper ::v-deep .ant-table-scroll .ant-table-body table {\n  min-width: 100%;\n}\n.g-table__wrapper {\n  /**\n   * 修复\"固定列 + scroll.x\"场景下，主表(ant-table-scroll)里会渲染一份 fixed 列的占位 header/cell。\n   * 这份占位本来只用于计算宽度，但在某些布局下会被看见，表现为\"操作列前多了一大块空白/空列\"。\n   * 这里用 visibility:hidden 隐藏占位（不影响占位宽度与 fixed 计算），避免视觉空白。\n   */\n}\n.g-table__wrapper ::v-deep .ant-table-scroll .ant-table-header thead > tr > th.ant-table-fixed-columns-in-body.ant-table-row-cell-last,\n.g-table__wrapper ::v-deep .ant-table-scroll .ant-table-body tbody > tr > td.ant-table-fixed-columns-in-body.ant-table-row-cell-last {\n  visibility: hidden;\n}\n.g-table__wrapper {\n  /* 强制统一行高，确保主表和固定列对齐 */\n}\n.g-table__wrapper ::v-deep .ant-table-tbody > tr > td {\n  height: 54px;\n  padding: 8px 16px;\n  vertical-align: middle;\n  box-sizing: border-box;\n  line-height: 38px;\n}\n.g-table__wrapper {\n  /* 表头也统一高度和样式 */\n}\n.g-table__wrapper ::v-deep .ant-table-thead > tr > th {\n  height: 54px;\n  padding: 8px 16px;\n  vertical-align: middle;\n  box-sizing: border-box;\n  line-height: 38px;\n}\n.g-table__wrapper {\n  /* 分页区域固定在底部 */\n}\n.g-table__wrapper .g-table__pagination {\n  display: flex;\n  flex-direction: row;\n  justify-content: end;\n  border-top: unset;\n  padding-top: 8px;\n  padding-bottom: 8px;\n  background: #fff;\n}\n.g-table__wrapper {\n  /* 空数据状态顶部显示 */\n}\n.g-table__wrapper .g-table__no-data {\n  position: relative;\n}\n.g-table__wrapper .g-table__no-data ::v-deep .ant-table-placeholder {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -40%);\n  width: 100%;\n  height: 100%;\n  text-align: center;\n  color: #999;\n  font-size: 14px;\n  font-weight: normal;\n  line-height: 20px;\n  overflow: hidden;\n  border: unset;\n}\n\n/*# sourceMappingURL=index.vue.map */","<template>\r\n  <div class=\"g-table__wrapper\" ref=\"tableWrapper\" :style=\"wrapperStyle\">\r\n    <a-table\r\n      :key=\"tableRenderKey\"\r\n      :bordered=\"bordered\"\r\n      :class=\"[isNoData && 'g-table__no-data']\"\r\n      :pagination=\"false\"\r\n      :loading=\"loading\"\r\n      size=\"middle\"\r\n      :columns=\"smartColumns\"\r\n      :row-selection=\"smartRowSelection\"\r\n      :row-class-name=\"setRowClassName\"\r\n      :data-source=\"dataSource\"\r\n      :scroll=\"smartScroll\">\r\n      <template slot=\"action\" slot-scope=\"record\">\r\n        <Actions v-on=\"$listeners\" :data-source=\"actions\" :record=\"record\"></Actions>\r\n      </template>\r\n    </a-table>\r\n    <div class=\"g-table__pagination\">\r\n      <a-pagination\r\n        :show-total=\"all => `共 ${all} 条数据`\"\r\n        v-if=\"mode === 'default'\"\r\n        show-size-changer \r\n        show-quick-jumper\r\n        :pageSize=\"innerPageSize\"\r\n        :current=\"innerCurrentPage\"\r\n        :pageSizeOptions=\"pageSizeOptions\"\r\n        @change=\"onChangePagination\"\r\n        @showSizeChange=\"onShowSizeChange\"\r\n        :total=\"total\">\r\n      </a-pagination>\r\n      <ele-pagination\r\n        v-else\r\n        :pageSize=\"innerPageSize\"\r\n        :current=\"innerCurrentPage\"\r\n        :pageSizeOptions=\"pageSizeOptions\"\r\n        :data=\"dataSource.length\"\r\n        @change=\"onChangePagination\"\r\n        @showSizeChange=\"onShowSizeChange\"\r\n        :total=\"total\"\r\n      ></ele-pagination>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport Actions from './action.vue'\r\nexport default {\r\n  name: 'ele-table',\r\n  components: {\r\n    Actions\r\n  },\r\n  props: {\r\n    mode: {\r\n      type: String,\r\n      default: 'default',\r\n      validator: (value) => {\r\n        return ['default', 'next-cursor'].includes(value)\r\n      }\r\n    },\r\n    // ant table wrapper\r\n    height: {\r\n      type: Number\r\n    },\r\n    width: {\r\n      type: Number\r\n    },\r\n    x: {\r\n      // ant-design-vue: scroll.x 支持 number | string（如 'max-content'）\r\n      type: [Number, String],\r\n      default: 1200\r\n    },\r\n    y: {\r\n      type: Number,\r\n      default: 200\r\n    },\r\n    scroll: {\r\n      type: Object\r\n    },\r\n    rowSelection: {\r\n      type: Object\r\n    },\r\n    actions: {\r\n      type: Array,\r\n      default: () => []\r\n    },\r\n    total: {\r\n      type: Number,\r\n      default: 0\r\n    },\r\n    loading: {\r\n      type: Boolean,\r\n      default: false\r\n    },\r\n    columns: {\r\n      type: Array,\r\n      default: () => []\r\n    },\r\n    dataSource: {\r\n      type: Array,\r\n      default: () => []\r\n    },\r\n    pageSize: {\r\n      type: [Number, String],\r\n      default: 10\r\n    },\r\n    pageSizeOptions: {\r\n      type: Array,\r\n      default: () => ['10', '20', '30', '40']\r\n    },\r\n    bordered: {\r\n      type: Boolean,\r\n      default: true\r\n    }\r\n  },\r\n  data() {\r\n    return {\r\n      tableHeaderHeight: 0,\r\n      paginationHeight: 0,\r\n      innerPageSize: 10,\r\n      innerCurrentPage: 1,\r\n      tableContentHeight: 0,\r\n      obs: [],\r\n      // 容器宽度，用于智能判断是否需要 fixed 列\r\n      containerWidth: 0,\r\n      // 用于强制重新渲染表格（当 fixed 列状态切换时）\r\n      tableRenderKey: 0\r\n    }\r\n  },\r\n  computed: {\r\n    wrapperStyle () {\r\n      // 外层容器样式\r\n      if (!this.height) return {}\r\n      return { height: `${this.height}px` }\r\n    },\r\n    needScrollY () {\r\n      // 判断是否需要 y 轴滚动：基于数据行数与可用高度预估\r\n      if (!this.height) return false\r\n      \r\n      const availableHeight = this.getScrollHeightByHeight\r\n      if (availableHeight <= 0) return false\r\n      \r\n      // 预估每行高度（包含边框），antd 默认约 54px\r\n      const estimatedRowHeight = 54\r\n      const estimatedTableHeight = this.dataSource.length * estimatedRowHeight\r\n      \r\n      return estimatedTableHeight > availableHeight\r\n    },\r\n    innerColumns () {\r\n      return this.columns.filter(col => !Object.keys(col).includes('multiple'))\r\n    },\r\n    isNoData () {\r\n      return !this.dataSource.length\r\n    },\r\n    getScrollHeightByHeight () {\r\n      // 始终返回可用的剩余高度，让表格内容不足时也能占满容器\r\n      return this.height - this.tableHeaderHeight - this.paginationHeight\r\n    },\r\n    isFlexColumn () {\r\n      return this.columns.every(col => !col.width)\r\n    },\r\n    /**\r\n     * 计算所有列的总宽度（包括 rowSelection 的 checkbox 列和操作列）\r\n     */\r\n    totalColumnsWidth () {\r\n      const cols = this.innerColumns || []\r\n      let total = cols.reduce((sum, col) => {\r\n        const w = col && col.width\r\n        return sum + (typeof w === 'number' ? w : 0)\r\n      }, 0)\r\n      // rowSelection 的 checkbox/radio 列，antd 默认约 60px\r\n      if (this.rowSelection) total += 60\r\n      // 操作列（operations）的宽度\r\n      if (this.operations && this.operations.width && typeof this.operations.width === 'number') {\r\n        total += this.operations.width\r\n      }\r\n      return total\r\n    },\r\n    /**\r\n     * 是否需要横向滚动：容器宽度 < 列总宽度\r\n     */\r\n    needHorizontalScroll () {\r\n      // 未获取容器宽度前，先假定需要滚动（保守策略）\r\n      if (!this.containerWidth) return true\r\n      // 加一点容差\r\n      return this.containerWidth < this.totalColumnsWidth - 5\r\n    },\r\n    /**\r\n     * 智能列配置：\r\n     * - 当需要横向滚动时，保留原始 fixed 属性\r\n     * - 当容器足够宽时，移除 fixed 属性，让表格自动铺满\r\n     */\r\n    smartColumns () {\r\n      if (this.needHorizontalScroll) {\r\n        // 需要滚动，保留原始配置\r\n        return this.innerColumns\r\n      }\r\n      // 不需要滚动，移除所有 fixed 属性\r\n      return this.innerColumns.map(col => {\r\n        if (col.fixed) {\r\n          const { fixed, ...rest } = col\r\n          return rest\r\n        }\r\n        return col\r\n      })\r\n    },\r\n    /**\r\n     * 智能 scroll 配置：\r\n     * - 当需要横向滚动时，设置 scroll.x\r\n     * - 当容器足够宽时，不设置 scroll.x，避免产生空白区域\r\n     */\r\n    smartScroll () {\r\n      if (!this.needHorizontalScroll) {\r\n        // 不需要横向滚动，只保留 y 方向（如果需要）\r\n        if (this.height && this.needScrollY) {\r\n          const availableHeight = this.tableHeaderHeight && this.paginationHeight \r\n            ? this.getScrollHeightByHeight \r\n            : this.height - 100\r\n          if (availableHeight > 50) {\r\n            return { y: availableHeight }\r\n          }\r\n        }\r\n        return {}\r\n      }\r\n      // 需要横向滚动，使用原有逻辑\r\n      return this.getScroll\r\n    },\r\n    /**\r\n     * 智能 rowSelection 配置：\r\n     * - 当需要横向滚动时，保留原始 fixed 属性\r\n     * - 当容器足够宽时，移除 fixed 属性\r\n     */\r\n    smartRowSelection () {\r\n      if (!this.rowSelection) return null\r\n      if (this.needHorizontalScroll) {\r\n        return this.rowSelection\r\n      }\r\n      // 不需要滚动，移除 fixed 属性\r\n      if (this.rowSelection.fixed) {\r\n        const { fixed, ...rest } = this.rowSelection\r\n        return rest\r\n      }\r\n      return this.rowSelection\r\n    },\r\n    getScroll () {\r\n      if (this.scroll) {\r\n        return this.scroll\r\n      } else {\r\n        // 固定列需要 scroll.x 才能正确同步行高，始终设置一个有效值\r\n        let baseX = (this.x === '' || this.x === null || this.x === undefined) ? 1200 : this.x\r\n\r\n        // 解决“x 给太大导致操作列前出现大块空白”的问题：\r\n        // 当所有列都给了明确 width 时，scroll.x 取列宽总和最合理；大于总和会产生多余区域。\r\n        if (typeof baseX === 'number') {\r\n          const cols = this.innerColumns || []\r\n          const total = cols.reduce((sum, col) => {\r\n            const w = col && col.width\r\n            return sum + (typeof w === 'number' ? w : 0)\r\n          }, 0)\r\n\r\n          // rowSelection 的 checkbox/radio 列是 antd 自动加的，给一个经验宽度避免误差\r\n          const selectionWidth = this.rowSelection ? 60 : 0\r\n\r\n          // 只有当所有列都明确给了宽度（total > 0）时才 clamp\r\n          if (total > 0) {\r\n            const minX = total + selectionWidth\r\n            if (baseX > minX) baseX = minX\r\n          }\r\n        }\r\n        \r\n        if (this.height && this.needScrollY) {\r\n          const availableHeight = this.tableHeaderHeight && this.paginationHeight \r\n            ? this.getScrollHeightByHeight \r\n            : this.height - 100\r\n          \r\n          if (availableHeight > 50) {\r\n            return { x: baseX, y: availableHeight }\r\n          }\r\n        }\r\n        return { x: baseX }\r\n      }\r\n    }\r\n  },\r\n  watch: {\r\n    pageSize: {\r\n      handler (pageSize) {\r\n        this.innerPageSize = pageSize\r\n      },\r\n      immediate: true\r\n    },\r\n    /**\r\n     * 监听 needHorizontalScroll 变化，强制重新渲染表格\r\n     * 当从\"需要固定列\"切换到\"不需要固定列\"或反之时，antd 的 a-table 需要完全重新渲染\r\n     */\r\n    needHorizontalScroll (newVal, oldVal) {\r\n      if (newVal !== oldVal) {\r\n        // 更新 key 强制 Vue 销毁并重建 a-table 组件\r\n        this.tableRenderKey++\r\n        // 使用重试机制确保固定列完全渲染\r\n        this.$nextTick(() => {\r\n          this.retrySyncFixedColumns(newVal)\r\n        })\r\n      }\r\n    }\r\n  },\r\n  methods: {\r\n    onShowSizeChange (current, pageSize) {\r\n      this.innerCurrentPage = current\r\n      this.innerPageSize = pageSize\r\n      this.$emit('change-page', current, pageSize)\r\n    },\r\n    setPaginationHeight () {\r\n      this.$nextTick(() => {\r\n        const el = this.$el.querySelector('.g-table__pagination')\r\n        if (el) {\r\n          const { height } = el.getBoundingClientRect()\r\n          this.paginationHeight = height\r\n        }\r\n      })\r\n    },\r\n    setTableHeaderHeight () {\r\n      this.$nextTick(() => {\r\n        const el = this.$el.querySelector('.ant-table-header')\r\n        if (!el) return\r\n        const { height } = el.getBoundingClientRect()\r\n        this.tableHeaderHeight = height\r\n      })\r\n    },\r\n    setTableTbodyHeight () {\r\n      this.$nextTick(() => {\r\n        this.setTableHeaderHeight()\r\n      })\r\n    },\r\n    setRowClassName (record, idx) {\r\n      return idx % 2 === 0 ? 'g-table__row--even' : 'g-table__row--odd'\r\n    },\r\n    onChangePagination (page, pageSize) {\r\n      this.innerCurrentPage = page\r\n      this.innerPageSize = pageSize\r\n      this.$emit('change-page', page, pageSize)\r\n    },\r\n    syncFixedColumns () {\r\n      // 强制 ant-design-vue 重新计算固定列的宽度\r\n      this.$nextTick(() => {\r\n        const tableEl = this.$el.querySelector('.ant-table')\r\n        if (tableEl) {\r\n          // 触发窗口 resize 事件，让 ant-design-vue 重新计算\r\n          window.dispatchEvent(new Event('resize'))\r\n        }\r\n      })\r\n    },\r\n    /**\r\n     * 带重试的固定列同步机制\r\n     * antd 的 a-table 在 key 变化后重新渲染固定列需要一定时间，\r\n     * 这里通过重试确保固定列渲染完成后再同步。\r\n     * @param {boolean} needFixed - 是否需要固定列\r\n     * @param {number} retries - 当前重试次数\r\n     */\r\n    retrySyncFixedColumns (needFixed, retries = 0) {\r\n      const MAX_RETRIES = 5\r\n      const DELAY = 100 // 每次延迟 100ms\r\n\r\n      setTimeout(() => {\r\n        this.syncFixedColumns()\r\n        this.syncHeaderTableWidth()\r\n        this.bindScrollSync()\r\n\r\n        // 如果需要固定列，检查是否已渲染\r\n        if (needFixed && retries < MAX_RETRIES) {\r\n          const hasFixedLeft = this.$el.querySelector('.ant-table-fixed-left .ant-table-body tbody tr')\r\n          const hasFixedRight = this.$el.querySelector('.ant-table-fixed-right .ant-table-body tbody tr')\r\n          \r\n          // 如果有固定列配置但还没渲染出来，继续重试\r\n          const hasFixedConfig = this.innerColumns.some(c => c.fixed) || (this.rowSelection && this.rowSelection.fixed)\r\n          if (hasFixedConfig && !hasFixedLeft && !hasFixedRight) {\r\n            this.retrySyncFixedColumns(needFixed, retries + 1)\r\n          }\r\n        }\r\n      }, DELAY)\r\n    },\r\n    /**\r\n     * 修复 x: 'max-content' 场景下表头不跟着横向滚动的问题。\r\n     * 原因：ant-design-vue 的 header table 和 body table 各自算 max-content，\r\n     *       header 按表头文字算、body 按实际数据算，二者宽度不同时 header 就\"滚不动\"。\r\n     * 方案：数据渲染后把 header table 的 width 强制设成和 body table 一样。\r\n     */\r\n    syncHeaderTableWidth () {\r\n      this.$nextTick(() => {\r\n        const headerTable = this.$el.querySelector('.ant-table-scroll .ant-table-header table')\r\n        const bodyTable = this.$el.querySelector('.ant-table-scroll .ant-table-body table')\r\n        if (!headerTable || !bodyTable) return\r\n\r\n        const bodyW = bodyTable.getBoundingClientRect().width\r\n        const headerW = headerTable.getBoundingClientRect().width\r\n\r\n        // 始终同步表头宽度到表体宽度，确保窗口变大/变小时都能正确响应\r\n        // 只有当宽度差异超过 2px 时才更新，避免频繁设置样式\r\n        if (Math.abs(bodyW - headerW) > 2) {\r\n          headerTable.style.width = `${bodyW}px`\r\n          headerTable.style.minWidth = `${bodyW}px`\r\n        }\r\n      })\r\n    },\r\n    /**\r\n     * 监听表体横向滚动，同步到表头（防止 antd 自带同步失效）\r\n     */\r\n    bindScrollSync () {\r\n      const body = this.$el.querySelector('.ant-table-scroll .ant-table-body')\r\n      const header = this.$el.querySelector('.ant-table-scroll .ant-table-header')\r\n      if (!body || !header) return\r\n\r\n      if (this._scrollHandler) return // 已绑定\r\n      this._scrollHandler = () => {\r\n        header.scrollLeft = body.scrollLeft\r\n      }\r\n      body.addEventListener('scroll', this._scrollHandler, { passive: true })\r\n    },\r\n    unbindScrollSync () {\r\n      const body = this.$el.querySelector('.ant-table-scroll .ant-table-body')\r\n      if (body && this._scrollHandler) {\r\n        body.removeEventListener('scroll', this._scrollHandler)\r\n        this._scrollHandler = null\r\n      }\r\n    },\r\n    /**\r\n     * 测量容器宽度\r\n     */\r\n    measureContainerWidth () {\r\n      const wrapper = this.$refs.tableWrapper\r\n      if (wrapper) {\r\n        this.containerWidth = wrapper.clientWidth\r\n      }\r\n    },\r\n    /**\r\n     * 使用 ResizeObserver 监听容器宽度变化\r\n     */\r\n    observeContainerWidth () {\r\n      const wrapper = this.$refs.tableWrapper\r\n      if (!wrapper || typeof ResizeObserver === 'undefined') return\r\n\r\n      if (this._containerResizeObserver) return // 已绑定\r\n\r\n      this._containerResizeObserver = new ResizeObserver((entries) => {\r\n        for (const entry of entries) {\r\n          const newWidth = entry.contentRect.width\r\n          // 只有宽度变化超过阈值才触发更新，避免微小变化导致频繁重渲染\r\n          if (Math.abs(newWidth - this.containerWidth) > 10) {\r\n            const oldNeedScroll = this.needHorizontalScroll\r\n            this.containerWidth = newWidth\r\n            // 容器宽度变化会触发 needHorizontalScroll 的重新计算\r\n            // needHorizontalScroll 的 watcher 会处理表格重新渲染和列宽同步\r\n            // 这里不需要直接调用 syncFixedColumns，避免与 watcher 的执行时机冲突\r\n            // 无论 needHorizontalScroll 是否变化，都立即同步表头宽度\r\n            // 确保窗口变大/变小时表头都能及时响应\r\n            this.$nextTick(() => {\r\n              // 使用 requestAnimationFrame 确保在浏览器重绘后同步表头宽度\r\n              // 这样能确保表体宽度已经更新完成\r\n              requestAnimationFrame(() => {\r\n                this.syncHeaderTableWidth()\r\n              })\r\n              \r\n              // 如果 needHorizontalScroll 状态没有变化，说明只是列宽需要调整，直接同步\r\n              // 如果状态变化了，watcher 会处理重新渲染\r\n              if (this.needHorizontalScroll === oldNeedScroll) {\r\n                // 防抖：延迟同步固定列，避免频繁调用\r\n                if (this._resizeDebounceTimer) {\r\n                  clearTimeout(this._resizeDebounceTimer)\r\n                }\r\n                this._resizeDebounceTimer = setTimeout(() => {\r\n                  this.syncFixedColumns()\r\n                  this.syncHeaderTableWidth()\r\n                  this.bindScrollSync()\r\n                }, 150)\r\n              }\r\n            })\r\n          }\r\n        }\r\n      })\r\n      this._containerResizeObserver.observe(wrapper)\r\n    },\r\n    /**\r\n     * 断开容器宽度监听\r\n     */\r\n    unobserveContainerWidth () {\r\n      if (this._containerResizeObserver) {\r\n        this._containerResizeObserver.disconnect()\r\n        this._containerResizeObserver = null\r\n      }\r\n      // 清理防抖定时器\r\n      if (this._resizeDebounceTimer) {\r\n        clearTimeout(this._resizeDebounceTimer)\r\n        this._resizeDebounceTimer = null\r\n      }\r\n    }\r\n  },\r\n  mounted() {\r\n    this.$nextTick(() => {\r\n      // 先测量容器宽度，用于智能判断是否需要 fixed 列\r\n      this.measureContainerWidth()\r\n      this.observeContainerWidth()\r\n\r\n      this.setPaginationHeight()\r\n      setTimeout(() => {\r\n        this.setTableTbodyHeight()\r\n        this.setPaginationHeight()\r\n        // 强制同步固定列和主表的列宽\r\n        this.syncFixedColumns()\r\n        // 同步表头 table 宽度（修复 max-content 场景）\r\n        this.syncHeaderTableWidth()\r\n        // 绑定横向滚动同步\r\n        this.bindScrollSync()\r\n      }, 200)\r\n    })\r\n    \r\n    // 监听数据变化，重新同步列宽\r\n    this.$watch('dataSource', () => {\r\n      this.$nextTick(() => {\r\n        setTimeout(() => {\r\n          this.syncFixedColumns()\r\n          this.syncHeaderTableWidth()\r\n          this.bindScrollSync()\r\n        }, 100)\r\n      })\r\n    }, { deep: true })\r\n  },\r\n  destroyed () {\r\n    this.obs.forEach(ob => ob.disconnect())\r\n    this.unbindScrollSync()\r\n    this.unobserveContainerWidth()\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.g-table__wrapper {\r\n  /**\r\n   * 修复\"宽屏下表格两侧出现空白\"问题：\r\n   * 当视口宽度大于表格内容宽度时，主表(ant-table-scroll)不会自动拉伸，\r\n   * 而固定列(fixed-left/fixed-right)是 position:absolute 定位在容器边缘，中间就出现空白。\r\n   * 解决方案：让主表的 table 元素 min-width:100%，使其始终填满滚动容器。\r\n   */\r\n  ::v-deep .ant-table-scroll .ant-table-header table,\r\n  ::v-deep .ant-table-scroll .ant-table-body table {\r\n    min-width: 100%;\r\n  }\r\n\r\n  /**\r\n   * 修复\"固定列 + scroll.x\"场景下，主表(ant-table-scroll)里会渲染一份 fixed 列的占位 header/cell。\r\n   * 这份占位本来只用于计算宽度，但在某些布局下会被看见，表现为\"操作列前多了一大块空白/空列\"。\r\n   * 这里用 visibility:hidden 隐藏占位（不影响占位宽度与 fixed 计算），避免视觉空白。\r\n   */\r\n  ::v-deep .ant-table-scroll .ant-table-header thead > tr > th.ant-table-fixed-columns-in-body.ant-table-row-cell-last,\r\n  ::v-deep .ant-table-scroll .ant-table-body tbody > tr > td.ant-table-fixed-columns-in-body.ant-table-row-cell-last {\r\n    visibility: hidden;\r\n  }\r\n\r\n  /* 强制统一行高，确保主表和固定列对齐 */\r\n  ::v-deep .ant-table-tbody > tr > td {\r\n    height: 54px;\r\n    padding: 8px 16px;\r\n    vertical-align: middle;\r\n    box-sizing: border-box;\r\n    line-height: 38px;\r\n  }\r\n\r\n  /* 表头也统一高度和样式 */\r\n  ::v-deep .ant-table-thead > tr > th {\r\n    height: 54px;\r\n    padding: 8px 16px;\r\n    vertical-align: middle;\r\n    box-sizing: border-box;\r\n    line-height: 38px;\r\n  }\r\n\r\n  /* 分页区域固定在底部 */\r\n  .g-table__pagination {\r\n    display: flex;\r\n    flex-direction: row;\r\n    justify-content: end;\r\n    border-top: unset;\r\n    padding-top: 8px;\r\n    padding-bottom: 8px;\r\n    background: #fff;\r\n  }\r\n\r\n  /* 空数据状态顶部显示 */\r\n  .g-table__no-data {\r\n    position: relative;\r\n    ::v-deep .ant-table-placeholder {\r\n      position: absolute;\r\n      top: 50%;\r\n      left: 50%;\r\n      transform: translate(-50%, -40%);\r\n      width: 100%;\r\n      height: 100%;\r\n      text-align: center;\r\n      color: #999;\r\n      font-size: 14px;\r\n      font-weight: normal;\r\n      line-height: 20px;\r\n      overflow: hidden;\r\n      border: unset;\r\n    }\r\n  }\r\n}\r\n</style>"]}, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$D = "data-v-9fb141ac";
+  const __vue_scope_id__$D = "data-v-33440b92";
   /* module identifier */
   const __vue_module_identifier__$D = undefined;
   /* functional template */
@@ -2690,6 +2999,7 @@ var script$B = {
       total: 0,
       tableQuerys: {},
       resizeObserverModelTableWrapper: null,
+      resizeObserverModelTableContainer: null,
       modelTableWrapperHeight: 0,
       currentTreeNodeData: {},
       currentRowData: {},
@@ -2940,6 +3250,19 @@ var script$B = {
       } = this.tableMeta;
       return page.pageSize || 10;
     },
+    nextCursorConfig() {
+      if (this.mode == 'next-cursor') {
+        const {
+          page = {}
+        } = this.tableMeta;
+        const {
+          nextCursor = {}
+        } = page;
+        return nextCursor;
+      } else {
+        return void 0;
+      }
+    },
     mode() {
       const {
         page = {}
@@ -3409,6 +3732,23 @@ var script$B = {
           };
         });
       });
+      if (this.nextCursorConfig) {
+        const {
+          count: {
+            url: countUrl,
+            requestType = 'GET',
+            params = {},
+            fieldMap = {}
+          }
+        } = this.nextCursorConfig;
+        const countRet = await net[requestType.toLowerCase()](countUrl, Object.assign({}, this.tableQuerys, params)).then(resp => {
+          const {
+            data = 0
+          } = resp || {};
+          return data;
+        });
+        this.total = countRet;
+      }
       this.cleanCurrentModelEffect(false); // 不清空 currentRowData，除非明确需要
       this.tableData = ret;
       return ret;
@@ -3416,28 +3756,54 @@ var script$B = {
     calculateTableHeight() {
       const currentViewportHeight = window.innerHeight;
       const tableRef = this.$refs[this.tableRef];
+      if (!tableRef || !tableRef.$el) return;
       const {
         top: tableToTop,
         width
       } = tableRef.$el.getBoundingClientRect();
       this.tableWidth = width;
-      this.tableHeight = currentViewportHeight - tableToTop - this.overHeight;
+
+      // 获取分页组件的高度（如果存在）
+      let paginationHeight = 0;
+      const paginationEl = tableRef.$el.querySelector('.g-table__pagination');
+      if (paginationEl) {
+        paginationHeight = paginationEl.getBoundingClientRect().height || 50;
+      } else {
+        // 如果分页组件还未渲染，使用默认高度
+        paginationHeight = 50;
+      }
+
+      // 计算表格高度：视口高度 - 表格顶部距离 - 分页高度 - 额外高度
+      const calculatedHeight = currentViewportHeight - tableToTop - paginationHeight - this.overHeight - 20;
+      // 确保最小高度，避免表格过小
+      this.tableHeight = Math.max(calculatedHeight, 200);
     },
     calculateTreeHeight() {
       if (!this.showTree) return;
       const modelTableContainerRef = this.$refs[this.modelTableContainerRef];
+      if (!modelTableContainerRef) return;
       const {
         height
       } = modelTableContainerRef.getBoundingClientRect();
+      // 确保树的高度和表格容器高度一致
       this.treeWrapperHeight = height;
+
+      // 如果表格容器有标题，需要减去标题高度
+      const titleEl = modelTableContainerRef.querySelector('.model__table--title');
+      if (titleEl) {
+        const titleHeight = titleEl.getBoundingClientRect().height;
+        this.treeWrapperHeight = height - titleHeight;
+      }
     },
     async keepAliveRefresh() {
       // 重新计算表格高度（应对窗口大小变化）
       this.$nextTick(() => {
-        this.calculateTableHeight();
-        if (this.showTree) {
-          this.calculateTreeHeight();
-        }
+        setTimeout(() => {
+          this.calculateTableHeight();
+          if (this.showTree) {
+            this.calculateTreeHeight();
+          }
+        }, 200);
       });
       // 刷新列表数据
       const {
@@ -3455,21 +3821,73 @@ var script$B = {
     }
   },
   mounted() {
-    this.calculateTableHeight();
+    // 初始化时先设置一个默认高度，避免布局混乱
+    this.tableHeight = 400;
+    if (this.showTree) {
+      this.treeWrapperHeight = 400;
+    }
+
+    // 延迟计算，确保所有组件都已渲染
     this.$nextTick(() => {
-      this.calculateTreeHeight();
+      setTimeout(() => {
+        this.calculateTableHeight();
+        this.calculateTreeHeight();
+      }, 200);
     });
+
+    // 使用 ResizeObserver 监听容器大小变化
     this.resizeObserverModelTableWrapper = new ResizeObserver(entries => {
       for (const _ of entries) {
         requestAnimationFrame(() => {
-          this.calculateTableHeight();
+          // 延迟重新计算，确保分页组件高度已更新
+          setTimeout(() => {
+            this.calculateTableHeight();
+            if (this.showTree) {
+              this.calculateTreeHeight();
+            }
+          }, 100);
         });
       }
     });
-    this.resizeObserverModelTableWrapper.observe(this.$refs[this.modelTableWrapper]);
+    if (this.$refs[this.modelTableWrapper]) {
+      this.resizeObserverModelTableWrapper.observe(this.$refs[this.modelTableWrapper]);
+    }
+
+    // 监听表格容器大小变化（用于同步树高度）
+    if (this.showTree && this.$refs[this.modelTableContainerRef]) {
+      this.resizeObserverModelTableContainer = new ResizeObserver(entries => {
+        for (const _ of entries) {
+          requestAnimationFrame(() => {
+            this.calculateTreeHeight();
+          });
+        }
+      });
+      this.resizeObserverModelTableContainer.observe(this.$refs[this.modelTableContainerRef]);
+    }
+
+    // 监听窗口大小变化
+    this.handleResize = () => {
+      this.$nextTick(() => {
+        setTimeout(() => {
+          this.calculateTableHeight();
+          if (this.showTree) {
+            this.calculateTreeHeight();
+          }
+        }, 100);
+      });
+    };
+    window.addEventListener('resize', this.handleResize);
   },
   destroyed() {
-    this.resizeObserverModelTableWrapper.disconnect();
+    if (this.resizeObserverModelTableWrapper) {
+      this.resizeObserverModelTableWrapper.disconnect();
+    }
+    if (this.resizeObserverModelTableContainer) {
+      this.resizeObserverModelTableContainer.disconnect();
+    }
+    if (this.handleResize) {
+      window.removeEventListener('resize', this.handleResize);
+    }
     if (this.model) {
       // 清理订阅
       if (this.unsubscribe) {
@@ -3596,26 +4014,31 @@ var __vue_render__$B = function () {
               _c(
                 "ele-table",
                 _vm._g(
-                  {
-                    ref: _vm.tableRef,
-                    attrs: {
-                      "row-selection": _vm.rowSelection,
-                      loading: _vm.loading,
-                      columns: _vm.columns,
-                      total: _vm.total,
-                      x: _vm.x,
-                      y: _vm.y,
-                      bordered: _vm.setBorder,
-                      height: _vm.tableHeight,
-                      width: _vm.tableWidth,
-                      actions: _vm.actions,
-                      pageSize: _vm.pageSize,
-                      pageSizeOptions: _vm.pageSizeOptions,
-                      "data-source": _vm.tableData,
-                      mode: _vm.mode,
+                  _vm._b(
+                    {
+                      ref: _vm.tableRef,
+                      attrs: {
+                        "row-selection": _vm.rowSelection,
+                        loading: _vm.loading,
+                        columns: _vm.columns,
+                        total: _vm.total,
+                        x: _vm.x,
+                        y: _vm.y,
+                        bordered: _vm.setBorder,
+                        height: _vm.tableHeight,
+                        width: _vm.tableWidth,
+                        actions: _vm.actions,
+                        pageSize: _vm.pageSize,
+                        pageSizeOptions: _vm.pageSizeOptions,
+                        "data-source": _vm.tableData,
+                        mode: _vm.mode,
+                      },
+                      on: { "change-page": _vm.onChangePage },
                     },
-                    on: { "change-page": _vm.onChangePage },
-                  },
+                    "ele-table",
+                    _vm.pageConfig,
+                    false
+                  ),
                   _vm.overrideTableEvent
                 )
               ),
@@ -3680,11 +4103,11 @@ __vue_render__$B._withStripped = true;
   /* style */
   const __vue_inject_styles__$B = function (inject) {
     if (!inject) return
-    inject("data-v-95429590_0", { source: ".ele.model__tree-table[data-v-95429590] {\n  background: transparent;\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n}\n.ele.model__tree-table .model__tree-table--container .model__tree--wrapper[data-v-95429590] {\n  width: 240px;\n  background: #fff;\n  flex-shrink: 0;\n  padding: 16px;\n  box-sizing: border-box;\n  margin-right: 16px;\n  overflow-y: auto;\n}\n.ele.model__tree-table .model__table--container[data-v-95429590] {\n  width: 100%;\n  min-width: 0;\n  background: #fff;\n}\n.ele.model__tree-table .model__table--container .model__table--title .model__table-title--bar[data-v-95429590] {\n  width: 100%;\n  height: 8px;\n  background: var(--idooel-primary-color);\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n}\n.ele.model__tree-table .model__table--container .model__table--title .model__table-title--text[data-v-95429590] {\n  text-align: left;\n  padding: 16px;\n  font-size: 16px;\n  font-weight: bold;\n  background: #fff;\n  border-bottom: 1px solid;\n  border-color: var(--idoole-black-016);\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper[data-v-95429590] {\n  background: #fff;\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper .button-row__area[data-v-95429590] {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  padding-top: 16px;\n  padding-bottom: 8px;\n  padding-right: 16px;\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper .g-table__wrapper .fsm[data-v-95429590] {\n  cursor: pointer;\n  color: var(--idooel-primary-color);\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\code\\OnlineStudy-Base\\base-elearning-frontend-model\\packages\\components\\packages\\models\\tree-table-model\\src\\index.vue","index.vue"],"names":[],"mappings":"AA8wBA;EACA,uBAAA;EACA,aAAA;EACA,mBAAA;EACA,WAAA;AC7wBA;AD+wBA;EACA,YAAA;EACA,gBAAA;EACA,cAAA;EACA,aAAA;EACA,sBAAA;EACA,kBAAA;EACA,gBAAA;AC7wBA;ADgxBA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;AC9wBA;ADgxBA;EACA,WAAA;EACA,WAAA;EACA,uCAAA;EACA,2BAAA;EACA,4BAAA;AC9wBA;ADgxBA;EACA,gBAAA;EACA,aAAA;EACA,eAAA;EACA,iBAAA;EACA,gBAAA;EACA,wBAAA;EACA,qCAAA;AC9wBA;ADixBA;EACA,gBAAA;AC/wBA;ADgxBA;EACA,WAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8BAAA;EACA,iBAAA;EACA,mBAAA;EACA,mBAAA;AC9wBA;ADixBA;EACA,eAAA;EACA,kCAAA;AC/wBA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n  <section class=\"ele model__tree-table\">\r\n    <section class=\"model__tree-table--container\" v-if=\"showTree\">\r\n      <div class=\"model__tree--title\"></div>\r\n      <section :ref=\"modelTreeWrapper\" class=\"model__tree--wrapper\" :style=\"{height: `${treeWrapperHeight}px`}\">\r\n        <ele-tree\r\n          :tree-data=\"treeData\"\r\n          :defaultExpandedKeys=\"defaultExpandedKeys\"\r\n          :defaultSelectedKeys=\"defaultSelectedKeys\"\r\n          @select=\"selectTreeNode\"\r\n          :replace-fields=\"mapFields\">\r\n        </ele-tree>\r\n      </section>\r\n    </section>\r\n    <section class=\"model__table--container\" :ref=\"modelTableContainerRef\">\r\n      <div class=\"model__table--title\" v-if=\"title\">\r\n        <template v-if=\"titleMode\">\r\n          <div :class=\"[`model__table-title--${titleMode}`]\"></div>\r\n        </template>\r\n        <template v-else>\r\n          <div class=\"model__table-title--text\">{{ title }}</div>\r\n        </template>\r\n      </div>\r\n      <section :ref=\"modelTableWrapper\" class=\"model__table--wrapper\">\r\n        <ele-search-area :ref=\"searchArea\" @search=\"onSearch\" :data-source=\"searchMeta.elements\"></ele-search-area>\r\n        <div class=\"button-row__area\">\r\n          <ele-button-group class=\"model-table__button-group\" v-on=\"overrideButtonGroupEvent\" :ref=\"buttonGroup\" @click=\"handleClickButtonGroup\" :data-source=\"getButtonGroupElements\"></ele-button-group>\r\n          <slot name=\"tags\"></slot>\r\n          <slot v-if=\"$slots['sub-center']\" name=\"sub-center\"></slot>\r\n        </div>\r\n        <ele-table\r\n          v-on=\"overrideTableEvent\"\r\n          :ref=\"tableRef\"\r\n          :row-selection=\"rowSelection\"\r\n          :loading=\"loading\" \r\n          :columns=\"columns\"\r\n          :total=\"total\"\r\n          :x=\"x\"\r\n          :y=\"y\"\r\n          :bordered=\"setBorder\"\r\n          :height=\"tableHeight\"\r\n          :width=\"tableWidth\"\r\n          :actions=\"actions\"\r\n          :pageSize=\"pageSize\"\r\n          :pageSizeOptions=\"pageSizeOptions\"\r\n          :data-source=\"tableData\"\r\n          :mode=\"mode\"\r\n          @change-page=\"onChangePage\"\r\n        ></ele-table>\r\n      </section>\r\n    </section>\r\n    <ele-modal-form v-model=\"modalFormValue\" v-on=\"overrideModalFormEvent\" :meta=\"modalFormMeta\"></ele-modal-form>\r\n    <ele-modal-fsm v-model=\"showFsmModal\" :contextProp=\"fsmContextProp\" :meta=\"fsmMeta\" @cancel=\"handleCloseFsmModal\"></ele-modal-fsm>\r\n    <ele-modal-table\r\n      :meta=\"modalTableMeta\"\r\n      v-model=\"modalTableValue\"\r\n      v-on=\"overrideModalTableEvent\"\r\n    ></ele-modal-table>\r\n  </section>\r\n</template>\r\n\r\n<script>\r\nimport { type, net } from '@idooel/shared'\r\nimport { v4 as uuidv4 } from 'uuid'\r\nimport { BUILT_IN_EVENT_NAMES, RESERVE_EVENT_NAMES, parseFieldMap, BUILT_IN_TRIGGER, CONTEXT } from '../../../utils'\r\nimport { createTreeTableModel } from '../../../utils/runtime-context'\r\nexport default {\r\n  name: 'ele-tree-table-model',\r\n  props: {\r\n    title: {\r\n      type: [Object, String]\r\n    },\r\n    overHeight: {\r\n      type: Number,\r\n      default: 0\r\n    },\r\n    treeMeta: {\r\n      type: Object,\r\n      default: () => ({})\r\n    },\r\n    searchMeta: {\r\n      type: Object,\r\n      default: () => ({})\r\n    },\r\n    buttonGroupMeta: {\r\n      typeof: Object,\r\n      default: () => ({})\r\n    },\r\n    tableMeta: {\r\n      type: Object,\r\n      default: () => ({})\r\n    },\r\n    createMeta: {\r\n      type: Object\r\n    },\r\n    editMeta: {\r\n      type: Object\r\n    }\r\n  },\r\n  provide () {\r\n    return {\r\n      requestTreeData: this.requestTreeData,\r\n      requestTableData: this.requestTableData,\r\n      keepAliveRefresh: this.keepAliveRefresh,\r\n      [CONTEXT]: () => {\r\n        return {\r\n          exposed: this.exposed\r\n        }\r\n      }\r\n    }\r\n  },\r\n  data () {\r\n    return {\r\n      tableHeight: 0,\r\n      tableWidth: 0,\r\n      modalFormMeta: {},\r\n      modalFormValue: false,\r\n      treeData: [],\r\n      tableData: [],\r\n      defaultExpandedKeys: [],\r\n      defaultSelectedKeys: [],\r\n      replaceFields: {\r\n        title: 'title',\r\n        children: 'children',\r\n        key: 'id'\r\n      },\r\n      loading: false,\r\n      total: 0,\r\n      tableQuerys: {},\r\n      resizeObserverModelTableWrapper: null,\r\n      modelTableWrapperHeight: 0,\r\n      currentTreeNodeData: {},\r\n      currentRowData: {},\r\n      treeWrapperHeight: 0,\r\n      currentTableSelection: this.currentTableMode == 'radio' ? {} : [],\r\n      showFsmModal: false,\r\n      fsmMeta: {},\r\n      fsmContextProp: {},\r\n      modalTableValue: false,\r\n      modalTableMeta: {},\r\n      dataPoolManager: null\r\n    }\r\n  },\r\n  computed: {\r\n    setBorder () {\r\n      return this.tableMeta.bordered === false ? false : true\r\n    },\r\n    rowSelection () {\r\n      if (!this.currentTableMode) return void 0\r\n      return {\r\n        columnTitle: this.currentSelectionColumn.columnTitle,\r\n        fixed: true,\r\n        type: this.currentTableMode,\r\n        onChange: this.onChangeTableSelection\r\n      }\r\n    },\r\n    currentSelectionColumn () {\r\n      const { multiple } = this.tableMeta\r\n      const target = this.columns.find(item => Object.keys(item).includes('multiple'))\r\n      const isGlobalExistMultiple = Object.keys(this.tableMeta).includes('multiple')\r\n      if (target) {\r\n        return target\r\n      } else if (isGlobalExistMultiple) {\r\n        return { multiple }\r\n      }\r\n      return void 0\r\n    },\r\n    x () {\r\n      const { x } = this.tableMeta\r\n      return x\r\n    },\r\n    y () {\r\n      const { y } = this.tableMeta\r\n      return y\r\n    },\r\n    currentTableMode () {\r\n      if (!this.currentSelectionColumn) return void 0\r\n      const { multiple } = this.currentSelectionColumn\r\n      if (type.isBool(multiple)) {\r\n        if (multiple) {\r\n          return 'checkbox'\r\n        } else {\r\n          return 'radio'\r\n        }\r\n      } else {\r\n        return void 0\r\n      }\r\n    },\r\n    modelTableContainerRef () {\r\n      return uuidv4()\r\n    },\r\n    titleMode () {\r\n      if (type.isObject(this.title)) {\r\n        const { mode = '' } = this.title\r\n        return mode\r\n      }\r\n      return void 0\r\n    },\r\n    tableRef () {\r\n      return uuidv4()\r\n    },\r\n    exposed () {\r\n      return {\r\n        showModalForm: this.showModalForm,\r\n        closeModalForm: this.closeModalForm,\r\n        showModalTable: this.showModalTable,\r\n        closeModalTable: this.closeModalTable,\r\n        currentTableSelection: this.currentTableSelection,\r\n        currentTreeNode: this.currentTreeNodeData,\r\n        requestTableData: this.requestTableData,\r\n        keepAliveRefresh: this.keepAliveRefresh,\r\n        refreshTreeData: this.refreshTreeData,\r\n        querys: this.tableQuerys,\r\n        currentRowData: this.getCurrentRowData(),\r\n        getCurrentRowData: this.getCurrentRowData,\r\n        setCurrentRowData: this.setCurrentRowData,\r\n        setCurrentTableSelection: this.setCurrentTableSelection,\r\n        getCurrentTableSelection: this.getCurrentTableSelection,\r\n        cleanCurrentModelEffect: this.cleanCurrentModelEffect,\r\n        route: this.$route,\r\n        _route: this.$route.query,\r\n        _routeMeta: this.$route.meta,\r\n        dataPool: this.model ? this.model.getDataPool() : null,\r\n        dataPoolManager: this.model || null\r\n      }\r\n    },\r\n    overrideTableEvent () {\r\n      const events = this.actions.reduce((ret, action) => {\r\n        ret[action.eventName || action.key] = (e) => {\r\n          this.setCurrentRowData(e.exposed.currentRowData)\r\n          const { target } = action\r\n          const targetMeta = this.findMetaByKey(target)\r\n          const { mode } = targetMeta\r\n          mode && this.dispatchTrigger({ mode, record: e.exposed.currentRowData, modeMeta: targetMeta })\r\n          this.$emit(action.eventName || action.key, { ...e, currentTreeNode: this.currentTreeNodeData, exposed: { ...this.exposed, ...e.exposed } })\r\n        }\r\n        return ret\r\n      }, {})\r\n      return {\r\n        ...this.$listeners,\r\n        ...events,\r\n        [BUILT_IN_EVENT_NAMES.EDIT]: this[BUILT_IN_EVENT_NAMES.EDIT],\r\n        [BUILT_IN_EVENT_NAMES.SUBMIT]: this[BUILT_IN_EVENT_NAMES.SUBMIT]\r\n      }\r\n    },\r\n    overrideModalFormEvent () {\r\n      const { footerMeta } = this.modalFormMeta\r\n      const { elements = [] } = footerMeta || {}\r\n      const eles = type.isFunction(elements) ? elements.call(this) : elements\r\n      const events = eles.reduce((ret, ele) => {\r\n        ret[ele.eventName] = (e = {}) => {\r\n          if (ele.eventName === 'cancel') {\r\n            this.closeModalForm()\r\n          } else {\r\n            const { exposed = {} } = e\r\n            this.$emit(`${ele.eventName || ele.key}`, { ...e, currentTreeNode: this.currentTreeNodeData, exposed: Object.assign({}, exposed )})\r\n          }\r\n        }\r\n        return ret\r\n      }, {})\r\n      return {\r\n        ...events\r\n      }\r\n    },\r\n    overrideModalTableEvent () {\r\n      const { footerMeta } = this.modalTableMeta\r\n      const { elements = [] } = footerMeta || {}\r\n      const eles = type.isFunction(elements) ? elements.call(this) : elements\r\n      const events = eles.reduce((ret, ele) => {\r\n        ret[ele.eventName] = (e = {}) => {\r\n          if (ele.eventName === 'cancel') {\r\n            this.closeModalTable()\r\n          } else {\r\n            const { exposed = {} } = e\r\n            this.$emit(`${ele.eventName || ele.key}`, { ...e, currentTreeNode: this.currentTreeNodeData, exposed: Object.assign({}, exposed )})\r\n          }\r\n        }\r\n        return ret\r\n      }, {})\r\n      return {\r\n        ...events,\r\n        exposed: this.exposed\r\n      }\r\n    },\r\n    overrideButtonGroupEvent () {\r\n      const events = this.getButtonGroupElements.reduce((ret, ele) => {\r\n        ret[ele.eventName] = (e) => {\r\n          this.$emit(ele.eventName || 'click', { ...e, currentTreeNode: this.currentTreeNodeData, exposed: Object.assign({}, e.exposed || {}, this.exposed)})\r\n        }\r\n        return ret\r\n      }, {})\r\n      return {\r\n        ...this.$listeners,\r\n        ...events,\r\n        [BUILT_IN_EVENT_NAMES.CREATE]: this[BUILT_IN_EVENT_NAMES.CREATE],\r\n        exposed: this.exposed\r\n      }\r\n    },\r\n    showTree () {\r\n      return !!Object.keys(this.treeMeta).length\r\n    },\r\n    buttonGroup () {\r\n      return uuidv4()\r\n    },\r\n    searchArea () {\r\n      return uuidv4()\r\n    },\r\n    modelTreeWrapper () {\r\n      return uuidv4()\r\n    },\r\n    modelTableWrapper () {\r\n      return uuidv4()\r\n    },\r\n    actions () {\r\n      const { operations } = this.tableMeta\r\n      if (operations) {\r\n        return operations.elements\r\n      } else {\r\n        return []\r\n      }\r\n    },\r\n    pageSize () {\r\n      const { page = {} } = this.tableMeta\r\n      return page.pageSize || 10\r\n    },\r\n    mode () {\r\n      const { page = {} } = this.tableMeta\r\n      return page.mode\r\n    },\r\n    pageSizeOptions () {\r\n      const { page = {} } = this.tableMeta\r\n      return page.pageSizeOptions || ['10', '20', '30', '40']\r\n    },\r\n    columns () {\r\n      const { columns, operations } = this.tableMeta\r\n      if (type.get(columns) === 'array') {\r\n        const columnsOptions = columns.map(item => {\r\n          const { mode = 'text' } = item\r\n          if (item.render) {\r\n            return {\r\n              ...item,\r\n              customRender: (text, record, index) => {\r\n                const { $createElement } = this\r\n                return item.render.call(this, \r\n                  { h: $createElement, ctx: this },\r\n                  text ? typeof text == 'object' ? text[item.dataIndex] : text : '', \r\n                  record, index)\r\n              }\r\n            }\r\n          } else if (mode !== BUILT_IN_TRIGGER.TEXT) {\r\n            const { [`${mode}Meta`]: modeMeta } = item\r\n            return {\r\n              ...item,\r\n              customRender: (text, record, index) => {\r\n                return <span onClick={() => this.dispatchTrigger({ mode, record, modeMeta, index })} class={ mode }>{ text }</span>\r\n              }\r\n            }\r\n          }\r\n          return {\r\n            ...item\r\n          }\r\n        })\r\n        if (operations) {\r\n          return [\r\n            ...columnsOptions,\r\n            {\r\n              title: '操作',\r\n              width: operations.width,\r\n              key: 'action',\r\n              fixed: 'right',\r\n              scopedSlots: { customRender: 'action' }\r\n            }\r\n          ]\r\n        }\r\n        return columnsOptions\r\n      } else {\r\n        console.error('Error: columns is invalid, please check it')\r\n        return []\r\n      }\r\n    },\r\n    getButtonGroupElements () {\r\n      const { elements } = this.buttonGroupMeta\r\n      if (type.get(elements) === 'function') {\r\n        return elements.call(this)\r\n      } else if (type.get(elements) === 'array') {\r\n        return elements\r\n      } else {\r\n        return []\r\n      }\r\n    },\r\n    mapFields () {\r\n      const { replaceFields = {} } = this.treeMeta\r\n      const mapFields = type.isEmpty(replaceFields) ? this.replaceFields : replaceFields\r\n      return mapFields\r\n    }\r\n  },\r\n  async created () {\r\n    // onSearch会初始化请求表格数据，所以不需要在这里请求表格数据\r\n    // 确保全局数据池已初始化\r\n    if (!window.__idooel_data_pool__) {\r\n      console.error('Global data pool not initialized. Please check if runtime-context/globalDataPool.js is properly imported.')\r\n      return\r\n    }\r\n    \r\n    // 初始化数据池管理器（使用新的 runtime-context）\r\n    try {\r\n      this.model = createTreeTableModel('treeTableModel')\r\n      \r\n      if (!this.model) {\r\n        throw new Error('Failed to create tree table model')\r\n      }\r\n    } catch (error) {\r\n      console.error('Error creating tree table model:', error)\r\n      this.model = null\r\n      return\r\n    }\r\n    \r\n    // 初始化 currentRowData（尝试从共享命名空间获取）\r\n    this.initializeCurrentRowData()\r\n    \r\n    // 订阅数据池变化\r\n    this.unsubscribe = this.model.subscribe('currentRowData', (event) => {\r\n      this.currentRowData = event.value || {}\r\n      this.$forceUpdate()\r\n    })\r\n    \r\n    // 订阅共享数据变化\r\n    this.unsubscribeShared = this.model.subscribeShared((event) => {\r\n      // 当有新的共享数据时，更新当前组件的 currentRowData\r\n      if (event.value && Object.keys(event.value).length > 0) {\r\n        this.setCurrentRowData(event.value)\r\n      }\r\n    })\r\n    \r\n    if (this.showTree) {\r\n      this.treeData = await this.requestTreeData()\r\n      const [defaultTreeNode = {}] = this.treeData\r\n      this.defaultExpandedKeys = [defaultTreeNode[this.mapFields.key]]\r\n      this.defaultSelectedKeys = [defaultTreeNode[this.mapFields.key]]\r\n      this.currentTreeNodeData = defaultTreeNode\r\n      const { params = {}, fieldMap = {}, overrideInit = false } = this.tableMeta\r\n      const currentRowData = this.getCurrentRowData()\r\n      const ctx = { \r\n        ...this.currentTreeNodeData, \r\n        _route: this.$route.query, \r\n        currentRowData: currentRowData\r\n      }\r\n      \r\n      const initQuerys = Object.assign({}, params, parseFieldMap(fieldMap, ctx))\r\n      if (overrideInit) {\r\n        this.$emit(RESERVE_EVENT_NAMES.INIT, { ...this.exposed })\r\n      } else {\r\n        this.tableData = await this.requestTableData(initQuerys)\r\n      }\r\n    } else {\r\n      const { params = {}, fieldMap = {} } = this.tableMeta\r\n      const currentRowData = this.getCurrentRowData()\r\n      const ctx = { \r\n        _route: this.$route.query, \r\n        currentRowData: currentRowData\r\n      }\r\n      this.tableQuerys = Object.assign({}, params, parseFieldMap(fieldMap, ctx))\r\n    }\r\n  },\r\n  methods: {\r\n    initializeCurrentRowData () {\r\n      if (!this.model) {\r\n        console.warn('Model not initialized, skipping currentRowData initialization')\r\n        return\r\n      }\r\n      \r\n      // 检查是否有来自父组件的共享数据（比如 modal table 场景）\r\n      const parentData = this.model.getSharedData()\r\n      \r\n      if (parentData && Object.keys(parentData).length > 0) {\r\n        this.setCurrentRowData(parentData)\r\n        return\r\n      }\r\n      \r\n      // 可以根据路由参数、props 或其他来源设置初始的 currentRowData\r\n      const { query } = this.$route\r\n      \r\n      // 示例：如果路由中有特定参数，可以设置为 currentRowData\r\n      if (query.rowId || query.selectedId) {\r\n        // 这里可以根据实际需求从服务端或其他地方获取数据\r\n        // const presetData = { id: query.rowId, /* 其他字段 */ }\r\n        // this.setCurrentRowData(presetData)\r\n      }\r\n      \r\n      // 目前保持空对象，等待用户选择行数据\r\n    },\r\n    async refreshTreeData () {\r\n      this.treeData = await this.requestTreeData()\r\n      const [defaultTreeNode = {}] = this.treeData\r\n      this.defaultExpandedKeys = [defaultTreeNode[this.mapFields.key]]\r\n      this.defaultSelectedKeys = [defaultTreeNode[this.mapFields.key]]\r\n      this.currentTreeNodeData = defaultTreeNode\r\n    },\r\n    dispatchTrigger ({ mode, record = {}, modeMeta = { } }) {\r\n      switch (mode) {\r\n        case BUILT_IN_TRIGGER.FSM:\r\n          this[`${BUILT_IN_TRIGGER.FSM}Trigger`](record, modeMeta = type.isEmpty(modeMeta) ? { \r\n            url: 'api-fsm/workbench/fsm/auditFlow',\r\n            requestType: 'GET',\r\n            fieldMap: {\r\n              modelCode: 'modelCode',\r\n              businessId: 'businessId'\r\n            }\r\n          } : modeMeta)\r\n          break\r\n        case BUILT_IN_TRIGGER.ELE_MODAL_FORM:\r\n          this.modalFormMeta = modeMeta\r\n          this.showModalForm(modeMeta)\r\n          break\r\n        case BUILT_IN_TRIGGER.ELE_MODAL_TABLE:\r\n          this.modalTableMeta = modeMeta\r\n          // 将当前行的 record 数据传递给 modal table\r\n          this.showModalTable(modeMeta, record)\r\n          break\r\n        default:\r\n          break\r\n      }\r\n    },\r\n    handleCloseFsmModal () {\r\n      this.showFsmModal = false\r\n    },\r\n    [`${BUILT_IN_TRIGGER.FSM}Trigger`] (record, meta) {\r\n      this.fsmMeta = meta\r\n      this.fsmContextProp = record\r\n      this.showFsmModal = true\r\n    },\r\n    onChangeTableSelection (_, selectedRows = []) {\r\n      if (this.currentTableMode === 'radio') {\r\n        this.setCurrentTableSelection(selectedRows)\r\n        this.$emit('on-change-table-selection', this.currentTableSelection)\r\n        this.$emit('x:refresh-exposed', { exposed: this.exposed })\r\n      } else {\r\n        this.setCurrentTableSelection(selectedRows)\r\n        this.$emit('on-change-table-selection', this.currentTableSelection)\r\n        this.$emit('x:refresh-exposed', { exposed: this.exposed })\r\n      }\r\n    },\r\n    setCurrentTableSelection (props = {}) {\r\n      if (this.currentTableMode === 'radio') {\r\n        this.$set(this, 'currentTableSelection', (type.isArray(props) && props.length > 0) ? props[0] : type.isObject(props) ? props : {})\r\n      } else {\r\n        this.$set(this, 'currentTableSelection', type.isArray(props) ? props : [])\r\n      }\r\n    },\r\n    getCurrentTableSelection () {\r\n      return this.currentTableSelection\r\n    },\r\n    setCurrentRowData (props = {}) {\r\n      this.currentRowData = props\r\n      if (this.model) {\r\n        this.model.setCurrentRowData(props)\r\n      } else {\r\n        console.warn('Model not initialized, cannot setCurrentRowData in model')\r\n      }\r\n    },\r\n    getCurrentRowData () {\r\n      if (this.model) {\r\n        return this.model.getCurrentRowData()\r\n      }\r\n      console.warn('Model not initialized, getCurrentRowData returning local data')\r\n      return this.currentRowData || {}\r\n    },\r\n    cleanCurrentModelEffect (clearRowData = true) {\r\n      this.setCurrentTableSelection()\r\n      if (clearRowData) {\r\n        this.setCurrentRowData({})\r\n      }\r\n    },\r\n    [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {\r\n      this.cleanCurrentModelEffect()\r\n      this.requestTableData()\r\n    },\r\n    [BUILT_IN_EVENT_NAMES.EDIT] (props = {}) {\r\n      const { record = {} } = props\r\n      this.setCurrentRowData(record)\r\n      this.modalFormMeta = this.editMeta\r\n      this.modalFormValue = true\r\n    },\r\n    [BUILT_IN_EVENT_NAMES.CREATE] () {\r\n      this.modalFormMeta = this.createMeta\r\n      this.modalFormValue = true\r\n    },\r\n    showModalForm (modeMeta = {}) {\r\n      if (type.isStr(modeMeta)) {\r\n        const targetMeta = this.findMetaByKey(modeMeta)\r\n        this.modalFormMeta = targetMeta\r\n      } else {\r\n        this.modalFormMeta = modeMeta\r\n      }\r\n      this.modalFormValue = true\r\n    },\r\n    showModalTable (modeMeta = {}, record = null) {\r\n      // 获取当前行数据并设置到共享命名空间\r\n      const currentRowData = record || this.getCurrentRowData()\r\n      if (this.model) {\r\n        this.model.setSharedData(currentRowData)\r\n      } else {\r\n        console.warn('Model not initialized, cannot setSharedData')\r\n      }\r\n      \r\n      let targetMeta = modeMeta\r\n      if (type.isStr(modeMeta)) {\r\n        targetMeta = this.findMetaByKey(modeMeta)\r\n      }\r\n      \r\n      // 解析 fieldMap 参数，使用完整的上下文包括 currentRowData\r\n      if (targetMeta && targetMeta.fieldMap) {\r\n        const { fieldMap, params = {} } = targetMeta\r\n        \r\n        const ctx = { \r\n          ...this.currentTreeNodeData, \r\n          _route: this.$route.query, \r\n          ...currentRowData \r\n        }\r\n        const parsedParams = parseFieldMap(fieldMap, ctx)\r\n        \r\n        // 将当前的 currentRowData 传递给 modal table，通过 params\r\n        targetMeta = {\r\n          ...targetMeta,\r\n          params: {\r\n            ...params,\r\n            ...parsedParams\r\n          }\r\n        }\r\n      }\r\n      \r\n      this.modalTableMeta = targetMeta\r\n      this.modalTableValue = true\r\n    },\r\n    closeModalForm () {\r\n      this.modalFormValue = false\r\n    },\r\n    closeModalTable () {\r\n      this.modalTableValue = false\r\n    },\r\n    findMetaByKey (key) {\r\n      return this.$attrs[key] || {}\r\n    },\r\n    handleClickButtonGroup (props) {\r\n      const { eventName, target } = props\r\n      const targetMeta = this.findMetaByKey(target)\r\n      const { mode } = targetMeta\r\n      mode && this.dispatchTrigger({ mode, modeMeta: targetMeta })\r\n      this.$emit(eventName || 'click', { currentTreeNode: this.currentTreeNodeData })\r\n    },\r\n    async onSearch (props) {\r\n      const { overrideInit = false } = this.tableMeta\r\n      this.tableQuerys = Object.assign(this.tableQuerys, props)\r\n      if (overrideInit) {\r\n        this.$emit(RESERVE_EVENT_NAMES.TREE_CHANGE, { ...this.exposed })\r\n      } else {\r\n        const { initSearch = false } = props\r\n        if (this.showTree && initSearch) return\r\n        this.tableData = await this.requestTableData()\r\n      }\r\n    },\r\n    async selectTreeNode (selectedKeys, e) {\r\n      const { fieldMap } = this.tableMeta\r\n      this.currentTreeNodeData = e.node.$vnode.data.props.dataRef || {}\r\n      //@deprecated '_' namespace is deprecated, please use 'exposed' instead\r\n      const execFieldMapRet = parseFieldMap(fieldMap, { ...this.currentTreeNodeData, exposed: this.exposed, _route: this.exposed._route })\r\n      const { overrideInit = false } = this.tableMeta\r\n      if (overrideInit) {\r\n        this.$emit(RESERVE_EVENT_NAMES.TREE_CHANGE, { ...this.exposed })\r\n      } else {\r\n        this.tableData = await this.requestTableData(execFieldMapRet)\r\n      }\r\n    },\r\n    async requestTreeData () {\r\n      const { url, requestType = 'GET', params = {}, fieldMap = {} } = this.treeMeta\r\n      const fieldMapRet = parseFieldMap(fieldMap, { ...this.currentTreeNodeData, _route: this.$route.query })\r\n      const ret = await net[requestType.toLowerCase()](\r\n        url,\r\n        { ...params, ...fieldMapRet }\r\n      ).then(resp => {\r\n        const { data } = resp || {}\r\n        return data\r\n      })\r\n      return ret\r\n    },\r\n    async onChangePage (page, pageSize) {\r\n      this.tableData = await this.requestTableData({ currentPage: page, pageSize })\r\n    },\r\n    async requestTableData (props = {}) {\r\n      const { url, requestType = 'GET', page = {} } = this.tableMeta\r\n      this.tableQuerys = Object.assign(this.tableQuerys, { currentPage: this.tableQuerys.currentPage || 1, pageSize: this.tableQuerys.pageSize || page.pageSize || 10 }, props)\r\n      this.$emit(RESERVE_EVENT_NAMES.WATCH, { ...this.exposed })\r\n      this.loading = true\r\n      const ret = await net[requestType.toLowerCase()](\r\n        url,\r\n        this.tableQuerys\r\n      ).then(resp => {\r\n        const { data = [], count } = resp || {}\r\n        this.total = count\r\n        this.loading = false\r\n        return (data || []).map(item => {\r\n          delete item.children\r\n          return {\r\n            key: uuidv4(),\r\n            ...item\r\n          }\r\n        })\r\n      })\r\n      this.cleanCurrentModelEffect(false) // 不清空 currentRowData，除非明确需要\r\n      this.tableData = ret\r\n      return ret\r\n    },\r\n    calculateTableHeight () {\r\n      const currentViewportHeight = window.innerHeight\r\n      const tableRef = this.$refs[this.tableRef]\r\n      const { top: tableToTop, width } = tableRef.$el.getBoundingClientRect()\r\n      this.tableWidth = width\r\n      this.tableHeight = currentViewportHeight - tableToTop - this.overHeight\r\n    },\r\n    calculateTreeHeight () {\r\n      if (!this.showTree) return\r\n      const modelTableContainerRef = this.$refs[this.modelTableContainerRef]\r\n      const { height } = modelTableContainerRef.getBoundingClientRect()\r\n      this.treeWrapperHeight = height\r\n    },\r\n    async keepAliveRefresh () {\r\n      // 重新计算表格高度（应对窗口大小变化）\r\n      this.$nextTick(() => {\r\n        this.calculateTableHeight()\r\n        if (this.showTree) {\r\n          this.calculateTreeHeight()\r\n        }\r\n      })\r\n      // 刷新列表数据\r\n      const { overrideInit = false } = this.tableMeta\r\n      if (overrideInit) {\r\n        // 如果使用自定义初始化模式，触发 INIT 事件\r\n        this.$emit(RESERVE_EVENT_NAMES.INIT, { ...this.exposed })\r\n      } else {\r\n        // 使用当前查询参数刷新表格数据\r\n        await this.requestTableData(this.tableQuerys)\r\n      }\r\n    }\r\n  },\r\n  mounted () {\r\n    this.calculateTableHeight()\r\n    this.$nextTick(() => {\r\n      this.calculateTreeHeight()\r\n    })\r\n    this.resizeObserverModelTableWrapper = new ResizeObserver(entries => {\r\n      for (const _ of entries) {\r\n        requestAnimationFrame(() => {\r\n          this.calculateTableHeight()\r\n        })\r\n      }\r\n    })\r\n    this.resizeObserverModelTableWrapper.observe(this.$refs[this.modelTableWrapper])\r\n  },\r\n  destroyed () {\r\n    this.resizeObserverModelTableWrapper.disconnect()\r\n    if (this.model) {\r\n      // 清理订阅\r\n      if (this.unsubscribe) {\r\n        this.unsubscribe()\r\n      }\r\n      if (this.unsubscribeShared) {\r\n        this.unsubscribeShared()\r\n      }\r\n      // 清理模型数据\r\n      if (this.model) {\r\n        this.model.cleanup()\r\n      }\r\n    }\r\n  },\r\n  async activated () {\r\n    await this.keepAliveRefresh()\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.ele {\r\n  &.model__tree-table {\r\n    background: transparent;                                                                                                                                                                                                                 \r\n    display: flex;\r\n    flex-direction: row;\r\n    width: 100%;\r\n    .model__tree-table--container {\r\n      .model__tree--wrapper {\r\n        width: 240px;\r\n        background: #fff;\r\n        flex-shrink: 0;\r\n        padding: 16px;\r\n        box-sizing: border-box;\r\n        margin-right: 16px;\r\n        overflow-y: auto;\r\n      }\r\n    }\r\n    .model__table--container {\r\n      width: 100%;\r\n      min-width: 0;\r\n      background: #fff;\r\n      .model__table--title {\r\n        .model__table-title--bar {\r\n          width: 100%;\r\n          height: 8px;\r\n          background: var(--idooel-primary-color);\r\n          border-top-left-radius: 4px;\r\n          border-top-right-radius: 4px;\r\n        }\r\n        .model__table-title--text {\r\n          text-align: left;\r\n          padding: 16px;\r\n          font-size: 16px;\r\n          font-weight: bold;\r\n          background: #fff;\r\n          border-bottom: 1px solid;\r\n          border-color: var(--idoole-black-016);\r\n        }\r\n      }\r\n      .model__table--wrapper {\r\n        background: #fff;\r\n        .button-row__area {\r\n          width: 100%;\r\n          display: flex;\r\n          flex-direction: row;\r\n          align-items: center;\r\n          justify-content: space-between;\r\n          padding-top: 16px;\r\n          padding-bottom: 8px;\r\n          padding-right: 16px;\r\n        }\r\n        .g-table__wrapper {\r\n          .fsm {\r\n            cursor: pointer;\r\n            color: var(--idooel-primary-color);\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n</style>\r\n",".ele.model__tree-table {\n  background: transparent;\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n}\n.ele.model__tree-table .model__tree-table--container .model__tree--wrapper {\n  width: 240px;\n  background: #fff;\n  flex-shrink: 0;\n  padding: 16px;\n  box-sizing: border-box;\n  margin-right: 16px;\n  overflow-y: auto;\n}\n.ele.model__tree-table .model__table--container {\n  width: 100%;\n  min-width: 0;\n  background: #fff;\n}\n.ele.model__tree-table .model__table--container .model__table--title .model__table-title--bar {\n  width: 100%;\n  height: 8px;\n  background: var(--idooel-primary-color);\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n}\n.ele.model__tree-table .model__table--container .model__table--title .model__table-title--text {\n  text-align: left;\n  padding: 16px;\n  font-size: 16px;\n  font-weight: bold;\n  background: #fff;\n  border-bottom: 1px solid;\n  border-color: var(--idoole-black-016);\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper {\n  background: #fff;\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper .button-row__area {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  padding-top: 16px;\n  padding-bottom: 8px;\n  padding-right: 16px;\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper .g-table__wrapper .fsm {\n  cursor: pointer;\n  color: var(--idooel-primary-color);\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
+    inject("data-v-72d2cdcc_0", { source: ".ele.model__tree-table[data-v-72d2cdcc] {\n  background: transparent;\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n.ele.model__tree-table .model__tree-table--container[data-v-72d2cdcc] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n.ele.model__tree-table .model__tree-table--container .model__tree--wrapper[data-v-72d2cdcc] {\n  width: 240px;\n  background: #fff;\n  flex-shrink: 0;\n  padding: 16px;\n  box-sizing: border-box;\n  margin-right: 16px;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n.ele.model__tree-table .model__table--container[data-v-72d2cdcc] {\n  width: 100%;\n  min-width: 0;\n  background: #fff;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow: hidden;\n}\n.ele.model__tree-table .model__table--container .model__table--title .model__table-title--bar[data-v-72d2cdcc] {\n  width: 100%;\n  height: 8px;\n  background: var(--idooel-primary-color);\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n}\n.ele.model__tree-table .model__table--container .model__table--title .model__table-title--text[data-v-72d2cdcc] {\n  text-align: left;\n  padding: 16px;\n  font-size: 16px;\n  font-weight: bold;\n  background: #fff;\n  border-bottom: 1px solid;\n  border-color: var(--idoole-black-016);\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper[data-v-72d2cdcc] {\n  background: #fff;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow: hidden;\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper .button-row__area[data-v-72d2cdcc] {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  padding-top: 16px;\n  padding-bottom: 8px;\n  padding-right: 16px;\n  flex-shrink: 0;\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper .g-table__wrapper[data-v-72d2cdcc] {\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper .g-table__wrapper .fsm[data-v-72d2cdcc] {\n  cursor: pointer;\n  color: var(--idooel-primary-color);\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\code\\OnlineStudy-Base\\base-elearning-frontend-model\\packages\\components\\packages\\models\\tree-table-model\\src\\index.vue","index.vue"],"names":[],"mappings":"AAq3BA;EACA,uBAAA;EACA,aAAA;EACA,mBAAA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;ACp3BA;ADq3BA;EACA,aAAA;EACA,sBAAA;EACA,YAAA;ACn3BA;ADo3BA;EACA,YAAA;EACA,gBAAA;EACA,cAAA;EACA,aAAA;EACA,sBAAA;EACA,kBAAA;EACA,gBAAA;EACA,kBAAA;ACl3BA;ADq3BA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;EACA,aAAA;EACA,sBAAA;EACA,YAAA;EACA,gBAAA;ACn3BA;ADq3BA;EACA,WAAA;EACA,WAAA;EACA,uCAAA;EACA,2BAAA;EACA,4BAAA;ACn3BA;ADq3BA;EACA,gBAAA;EACA,aAAA;EACA,eAAA;EACA,iBAAA;EACA,gBAAA;EACA,wBAAA;EACA,qCAAA;ACn3BA;ADs3BA;EACA,gBAAA;EACA,aAAA;EACA,sBAAA;EACA,YAAA;EACA,gBAAA;ACp3BA;ADq3BA;EACA,WAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8BAAA;EACA,iBAAA;EACA,mBAAA;EACA,mBAAA;EACA,cAAA;ACn3BA;ADq3BA;EACA,OAAA;EACA,aAAA;EACA,gBAAA;ACn3BA;ADo3BA;EACA,eAAA;EACA,kCAAA;ACl3BA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n  <section class=\"ele model__tree-table\">\r\n    <section class=\"model__tree-table--container\" v-if=\"showTree\">\r\n      <div class=\"model__tree--title\"></div>\r\n      <section :ref=\"modelTreeWrapper\" class=\"model__tree--wrapper\" :style=\"{height: `${treeWrapperHeight}px`}\">\r\n        <ele-tree\r\n          :tree-data=\"treeData\"\r\n          :defaultExpandedKeys=\"defaultExpandedKeys\"\r\n          :defaultSelectedKeys=\"defaultSelectedKeys\"\r\n          @select=\"selectTreeNode\"\r\n          :replace-fields=\"mapFields\">\r\n        </ele-tree>\r\n      </section>\r\n    </section>\r\n    <section class=\"model__table--container\" :ref=\"modelTableContainerRef\">\r\n      <div class=\"model__table--title\" v-if=\"title\">\r\n        <template v-if=\"titleMode\">\r\n          <div :class=\"[`model__table-title--${titleMode}`]\"></div>\r\n        </template>\r\n        <template v-else>\r\n          <div class=\"model__table-title--text\">{{ title }}</div>\r\n        </template>\r\n      </div>\r\n      <section :ref=\"modelTableWrapper\" class=\"model__table--wrapper\">\r\n        <ele-search-area :ref=\"searchArea\" @search=\"onSearch\" :data-source=\"searchMeta.elements\"></ele-search-area>\r\n        <div class=\"button-row__area\">\r\n          <ele-button-group class=\"model-table__button-group\" v-on=\"overrideButtonGroupEvent\" :ref=\"buttonGroup\" @click=\"handleClickButtonGroup\" :data-source=\"getButtonGroupElements\"></ele-button-group>\r\n          <slot name=\"tags\"></slot>\r\n          <slot v-if=\"$slots['sub-center']\" name=\"sub-center\"></slot>\r\n        </div>\r\n        <ele-table\r\n          v-on=\"overrideTableEvent\"\r\n          :ref=\"tableRef\"\r\n          :row-selection=\"rowSelection\"\r\n          :loading=\"loading\" \r\n          :columns=\"columns\"\r\n          :total=\"total\"\r\n          :x=\"x\"\r\n          :y=\"y\"\r\n          :bordered=\"setBorder\"\r\n          :height=\"tableHeight\"\r\n          :width=\"tableWidth\"\r\n          :actions=\"actions\"\r\n          :pageSize=\"pageSize\"\r\n          :pageSizeOptions=\"pageSizeOptions\"\r\n          :data-source=\"tableData\"\r\n          :mode=\"mode\"\r\n          v-bind=\"pageConfig\"\r\n          @change-page=\"onChangePage\"\r\n        ></ele-table>\r\n      </section>\r\n    </section>\r\n    <ele-modal-form v-model=\"modalFormValue\" v-on=\"overrideModalFormEvent\" :meta=\"modalFormMeta\"></ele-modal-form>\r\n    <ele-modal-fsm v-model=\"showFsmModal\" :contextProp=\"fsmContextProp\" :meta=\"fsmMeta\" @cancel=\"handleCloseFsmModal\"></ele-modal-fsm>\r\n    <ele-modal-table\r\n      :meta=\"modalTableMeta\"\r\n      v-model=\"modalTableValue\"\r\n      v-on=\"overrideModalTableEvent\"\r\n    ></ele-modal-table>\r\n  </section>\r\n</template>\r\n\r\n<script>\r\nimport { type, net } from '@idooel/shared'\r\nimport { v4 as uuidv4 } from 'uuid'\r\nimport { BUILT_IN_EVENT_NAMES, RESERVE_EVENT_NAMES, parseFieldMap, BUILT_IN_TRIGGER, CONTEXT } from '../../../utils'\r\nimport { createTreeTableModel } from '../../../utils/runtime-context'\r\nexport default {\r\n  name: 'ele-tree-table-model',\r\n  props: {\r\n    title: {\r\n      type: [Object, String]\r\n    },\r\n    overHeight: {\r\n      type: Number,\r\n      default: 0\r\n    },\r\n    treeMeta: {\r\n      type: Object,\r\n      default: () => ({})\r\n    },\r\n    searchMeta: {\r\n      type: Object,\r\n      default: () => ({})\r\n    },\r\n    buttonGroupMeta: {\r\n      typeof: Object,\r\n      default: () => ({})\r\n    },\r\n    tableMeta: {\r\n      type: Object,\r\n      default: () => ({})\r\n    },\r\n    createMeta: {\r\n      type: Object\r\n    },\r\n    editMeta: {\r\n      type: Object\r\n    }\r\n  },\r\n  provide () {\r\n    return {\r\n      requestTreeData: this.requestTreeData,\r\n      requestTableData: this.requestTableData,\r\n      keepAliveRefresh: this.keepAliveRefresh,\r\n      [CONTEXT]: () => {\r\n        return {\r\n          exposed: this.exposed\r\n        }\r\n      }\r\n    }\r\n  },\r\n  data () {\r\n    return {\r\n      tableHeight: 0,\r\n      tableWidth: 0,\r\n      modalFormMeta: {},\r\n      modalFormValue: false,\r\n      treeData: [],\r\n      tableData: [],\r\n      defaultExpandedKeys: [],\r\n      defaultSelectedKeys: [],\r\n      replaceFields: {\r\n        title: 'title',\r\n        children: 'children',\r\n        key: 'id'\r\n      },\r\n      loading: false,\r\n      total: 0,\r\n      tableQuerys: {},\r\n      resizeObserverModelTableWrapper: null,\r\n      resizeObserverModelTableContainer: null,\r\n      modelTableWrapperHeight: 0,\r\n      currentTreeNodeData: {},\r\n      currentRowData: {},\r\n      treeWrapperHeight: 0,\r\n      currentTableSelection: this.currentTableMode == 'radio' ? {} : [],\r\n      showFsmModal: false,\r\n      fsmMeta: {},\r\n      fsmContextProp: {},\r\n      modalTableValue: false,\r\n      modalTableMeta: {},\r\n      dataPoolManager: null\r\n    }\r\n  },\r\n  computed: {\r\n    setBorder () {\r\n      return this.tableMeta.bordered === false ? false : true\r\n    },\r\n    rowSelection () {\r\n      if (!this.currentTableMode) return void 0\r\n      return {\r\n        columnTitle: this.currentSelectionColumn.columnTitle,\r\n        fixed: true,\r\n        type: this.currentTableMode,\r\n        onChange: this.onChangeTableSelection\r\n      }\r\n    },\r\n    currentSelectionColumn () {\r\n      const { multiple } = this.tableMeta\r\n      const target = this.columns.find(item => Object.keys(item).includes('multiple'))\r\n      const isGlobalExistMultiple = Object.keys(this.tableMeta).includes('multiple')\r\n      if (target) {\r\n        return target\r\n      } else if (isGlobalExistMultiple) {\r\n        return { multiple }\r\n      }\r\n      return void 0\r\n    },\r\n    x () {\r\n      const { x } = this.tableMeta\r\n      return x\r\n    },\r\n    y () {\r\n      const { y } = this.tableMeta\r\n      return y\r\n    },\r\n    currentTableMode () {\r\n      if (!this.currentSelectionColumn) return void 0\r\n      const { multiple } = this.currentSelectionColumn\r\n      if (type.isBool(multiple)) {\r\n        if (multiple) {\r\n          return 'checkbox'\r\n        } else {\r\n          return 'radio'\r\n        }\r\n      } else {\r\n        return void 0\r\n      }\r\n    },\r\n    modelTableContainerRef () {\r\n      return uuidv4()\r\n    },\r\n    titleMode () {\r\n      if (type.isObject(this.title)) {\r\n        const { mode = '' } = this.title\r\n        return mode\r\n      }\r\n      return void 0\r\n    },\r\n    tableRef () {\r\n      return uuidv4()\r\n    },\r\n    exposed () {\r\n      return {\r\n        showModalForm: this.showModalForm,\r\n        closeModalForm: this.closeModalForm,\r\n        showModalTable: this.showModalTable,\r\n        closeModalTable: this.closeModalTable,\r\n        currentTableSelection: this.currentTableSelection,\r\n        currentTreeNode: this.currentTreeNodeData,\r\n        requestTableData: this.requestTableData,\r\n        keepAliveRefresh: this.keepAliveRefresh,\r\n        refreshTreeData: this.refreshTreeData,\r\n        querys: this.tableQuerys,\r\n        currentRowData: this.getCurrentRowData(),\r\n        getCurrentRowData: this.getCurrentRowData,\r\n        setCurrentRowData: this.setCurrentRowData,\r\n        setCurrentTableSelection: this.setCurrentTableSelection,\r\n        getCurrentTableSelection: this.getCurrentTableSelection,\r\n        cleanCurrentModelEffect: this.cleanCurrentModelEffect,\r\n        route: this.$route,\r\n        _route: this.$route.query,\r\n        _routeMeta: this.$route.meta,\r\n        dataPool: this.model ? this.model.getDataPool() : null,\r\n        dataPoolManager: this.model || null\r\n      }\r\n    },\r\n    overrideTableEvent () {\r\n      const events = this.actions.reduce((ret, action) => {\r\n        ret[action.eventName || action.key] = (e) => {\r\n          this.setCurrentRowData(e.exposed.currentRowData)\r\n          const { target } = action\r\n          const targetMeta = this.findMetaByKey(target)\r\n          const { mode } = targetMeta\r\n          mode && this.dispatchTrigger({ mode, record: e.exposed.currentRowData, modeMeta: targetMeta })\r\n          this.$emit(action.eventName || action.key, { ...e, currentTreeNode: this.currentTreeNodeData, exposed: { ...this.exposed, ...e.exposed } })\r\n        }\r\n        return ret\r\n      }, {})\r\n      return {\r\n        ...this.$listeners,\r\n        ...events,\r\n        [BUILT_IN_EVENT_NAMES.EDIT]: this[BUILT_IN_EVENT_NAMES.EDIT],\r\n        [BUILT_IN_EVENT_NAMES.SUBMIT]: this[BUILT_IN_EVENT_NAMES.SUBMIT]\r\n      }\r\n    },\r\n    overrideModalFormEvent () {\r\n      const { footerMeta } = this.modalFormMeta\r\n      const { elements = [] } = footerMeta || {}\r\n      const eles = type.isFunction(elements) ? elements.call(this) : elements\r\n      const events = eles.reduce((ret, ele) => {\r\n        ret[ele.eventName] = (e = {}) => {\r\n          if (ele.eventName === 'cancel') {\r\n            this.closeModalForm()\r\n          } else {\r\n            const { exposed = {} } = e\r\n            this.$emit(`${ele.eventName || ele.key}`, { ...e, currentTreeNode: this.currentTreeNodeData, exposed: Object.assign({}, exposed )})\r\n          }\r\n        }\r\n        return ret\r\n      }, {})\r\n      return {\r\n        ...events\r\n      }\r\n    },\r\n    overrideModalTableEvent () {\r\n      const { footerMeta } = this.modalTableMeta\r\n      const { elements = [] } = footerMeta || {}\r\n      const eles = type.isFunction(elements) ? elements.call(this) : elements\r\n      const events = eles.reduce((ret, ele) => {\r\n        ret[ele.eventName] = (e = {}) => {\r\n          if (ele.eventName === 'cancel') {\r\n            this.closeModalTable()\r\n          } else {\r\n            const { exposed = {} } = e\r\n            this.$emit(`${ele.eventName || ele.key}`, { ...e, currentTreeNode: this.currentTreeNodeData, exposed: Object.assign({}, exposed )})\r\n          }\r\n        }\r\n        return ret\r\n      }, {})\r\n      return {\r\n        ...events,\r\n        exposed: this.exposed\r\n      }\r\n    },\r\n    overrideButtonGroupEvent () {\r\n      const events = this.getButtonGroupElements.reduce((ret, ele) => {\r\n        ret[ele.eventName] = (e) => {\r\n          this.$emit(ele.eventName || 'click', { ...e, currentTreeNode: this.currentTreeNodeData, exposed: Object.assign({}, e.exposed || {}, this.exposed)})\r\n        }\r\n        return ret\r\n      }, {})\r\n      return {\r\n        ...this.$listeners,\r\n        ...events,\r\n        [BUILT_IN_EVENT_NAMES.CREATE]: this[BUILT_IN_EVENT_NAMES.CREATE],\r\n        exposed: this.exposed\r\n      }\r\n    },\r\n    showTree () {\r\n      return !!Object.keys(this.treeMeta).length\r\n    },\r\n    buttonGroup () {\r\n      return uuidv4()\r\n    },\r\n    searchArea () {\r\n      return uuidv4()\r\n    },\r\n    modelTreeWrapper () {\r\n      return uuidv4()\r\n    },\r\n    modelTableWrapper () {\r\n      return uuidv4()\r\n    },\r\n    actions () {\r\n      const { operations } = this.tableMeta\r\n      if (operations) {\r\n        return operations.elements\r\n      } else {\r\n        return []\r\n      }\r\n    },\r\n    pageSize () {\r\n      const { page = {} } = this.tableMeta\r\n      return page.pageSize || 10\r\n    },\r\n    nextCursorConfig () {\r\n      if (this.mode == 'next-cursor') {\r\n        const { page = {} } = this.tableMeta\r\n        const { nextCursor = {} } = page\r\n        return nextCursor\r\n      } else {\r\n        return void 0\r\n      }\r\n    },\r\n    mode () {\r\n      const { page = {} } = this.tableMeta\r\n      return page.mode\r\n    },\r\n    pageSizeOptions () {\r\n      const { page = {} } = this.tableMeta\r\n      return page.pageSizeOptions || ['10', '20', '30', '40']\r\n    },\r\n    columns () {\r\n      const { columns, operations } = this.tableMeta\r\n      if (type.get(columns) === 'array') {\r\n        const columnsOptions = columns.map(item => {\r\n          const { mode = 'text' } = item\r\n          if (item.render) {\r\n            return {\r\n              ...item,\r\n              customRender: (text, record, index) => {\r\n                const { $createElement } = this\r\n                return item.render.call(this, \r\n                  { h: $createElement, ctx: this },\r\n                  text ? typeof text == 'object' ? text[item.dataIndex] : text : '', \r\n                  record, index)\r\n              }\r\n            }\r\n          } else if (mode !== BUILT_IN_TRIGGER.TEXT) {\r\n            const { [`${mode}Meta`]: modeMeta } = item\r\n            return {\r\n              ...item,\r\n              customRender: (text, record, index) => {\r\n                return <span onClick={() => this.dispatchTrigger({ mode, record, modeMeta, index })} class={ mode }>{ text }</span>\r\n              }\r\n            }\r\n          }\r\n          return {\r\n            ...item\r\n          }\r\n        })\r\n        if (operations) {\r\n          return [\r\n            ...columnsOptions,\r\n            {\r\n              title: '操作',\r\n              width: operations.width,\r\n              key: 'action',\r\n              fixed: 'right',\r\n              scopedSlots: { customRender: 'action' }\r\n            }\r\n          ]\r\n        }\r\n        return columnsOptions\r\n      } else {\r\n        console.error('Error: columns is invalid, please check it')\r\n        return []\r\n      }\r\n    },\r\n    getButtonGroupElements () {\r\n      const { elements } = this.buttonGroupMeta\r\n      if (type.get(elements) === 'function') {\r\n        return elements.call(this)\r\n      } else if (type.get(elements) === 'array') {\r\n        return elements\r\n      } else {\r\n        return []\r\n      }\r\n    },\r\n    mapFields () {\r\n      const { replaceFields = {} } = this.treeMeta\r\n      const mapFields = type.isEmpty(replaceFields) ? this.replaceFields : replaceFields\r\n      return mapFields\r\n    }\r\n  },\r\n  async created () {\r\n    // onSearch会初始化请求表格数据，所以不需要在这里请求表格数据\r\n    // 确保全局数据池已初始化\r\n    if (!window.__idooel_data_pool__) {\r\n      console.error('Global data pool not initialized. Please check if runtime-context/globalDataPool.js is properly imported.')\r\n      return\r\n    }\r\n    \r\n    // 初始化数据池管理器（使用新的 runtime-context）\r\n    try {\r\n      this.model = createTreeTableModel('treeTableModel')\r\n      \r\n      if (!this.model) {\r\n        throw new Error('Failed to create tree table model')\r\n      }\r\n    } catch (error) {\r\n      console.error('Error creating tree table model:', error)\r\n      this.model = null\r\n      return\r\n    }\r\n    \r\n    // 初始化 currentRowData（尝试从共享命名空间获取）\r\n    this.initializeCurrentRowData()\r\n    \r\n    // 订阅数据池变化\r\n    this.unsubscribe = this.model.subscribe('currentRowData', (event) => {\r\n      this.currentRowData = event.value || {}\r\n      this.$forceUpdate()\r\n    })\r\n    \r\n    // 订阅共享数据变化\r\n    this.unsubscribeShared = this.model.subscribeShared((event) => {\r\n      // 当有新的共享数据时，更新当前组件的 currentRowData\r\n      if (event.value && Object.keys(event.value).length > 0) {\r\n        this.setCurrentRowData(event.value)\r\n      }\r\n    })\r\n    \r\n    if (this.showTree) {\r\n      this.treeData = await this.requestTreeData()\r\n      const [defaultTreeNode = {}] = this.treeData\r\n      this.defaultExpandedKeys = [defaultTreeNode[this.mapFields.key]]\r\n      this.defaultSelectedKeys = [defaultTreeNode[this.mapFields.key]]\r\n      this.currentTreeNodeData = defaultTreeNode\r\n      const { params = {}, fieldMap = {}, overrideInit = false } = this.tableMeta\r\n      const currentRowData = this.getCurrentRowData()\r\n      const ctx = { \r\n        ...this.currentTreeNodeData, \r\n        _route: this.$route.query, \r\n        currentRowData: currentRowData\r\n      }\r\n      \r\n      const initQuerys = Object.assign({}, params, parseFieldMap(fieldMap, ctx))\r\n      if (overrideInit) {\r\n        this.$emit(RESERVE_EVENT_NAMES.INIT, { ...this.exposed })\r\n      } else {\r\n        this.tableData = await this.requestTableData(initQuerys)\r\n      }\r\n    } else {\r\n      const { params = {}, fieldMap = {} } = this.tableMeta\r\n      const currentRowData = this.getCurrentRowData()\r\n      const ctx = { \r\n        _route: this.$route.query, \r\n        currentRowData: currentRowData\r\n      }\r\n      this.tableQuerys = Object.assign({}, params, parseFieldMap(fieldMap, ctx))\r\n    }\r\n  },\r\n  methods: {\r\n    initializeCurrentRowData () {\r\n      if (!this.model) {\r\n        console.warn('Model not initialized, skipping currentRowData initialization')\r\n        return\r\n      }\r\n      \r\n      // 检查是否有来自父组件的共享数据（比如 modal table 场景）\r\n      const parentData = this.model.getSharedData()\r\n      \r\n      if (parentData && Object.keys(parentData).length > 0) {\r\n        this.setCurrentRowData(parentData)\r\n        return\r\n      }\r\n      \r\n      // 可以根据路由参数、props 或其他来源设置初始的 currentRowData\r\n      const { query } = this.$route\r\n      \r\n      // 示例：如果路由中有特定参数，可以设置为 currentRowData\r\n      if (query.rowId || query.selectedId) {\r\n        // 这里可以根据实际需求从服务端或其他地方获取数据\r\n        // const presetData = { id: query.rowId, /* 其他字段 */ }\r\n        // this.setCurrentRowData(presetData)\r\n      }\r\n      \r\n      // 目前保持空对象，等待用户选择行数据\r\n    },\r\n    async refreshTreeData () {\r\n      this.treeData = await this.requestTreeData()\r\n      const [defaultTreeNode = {}] = this.treeData\r\n      this.defaultExpandedKeys = [defaultTreeNode[this.mapFields.key]]\r\n      this.defaultSelectedKeys = [defaultTreeNode[this.mapFields.key]]\r\n      this.currentTreeNodeData = defaultTreeNode\r\n    },\r\n    dispatchTrigger ({ mode, record = {}, modeMeta = { } }) {\r\n      switch (mode) {\r\n        case BUILT_IN_TRIGGER.FSM:\r\n          this[`${BUILT_IN_TRIGGER.FSM}Trigger`](record, modeMeta = type.isEmpty(modeMeta) ? { \r\n            url: 'api-fsm/workbench/fsm/auditFlow',\r\n            requestType: 'GET',\r\n            fieldMap: {\r\n              modelCode: 'modelCode',\r\n              businessId: 'businessId'\r\n            }\r\n          } : modeMeta)\r\n          break\r\n        case BUILT_IN_TRIGGER.ELE_MODAL_FORM:\r\n          this.modalFormMeta = modeMeta\r\n          this.showModalForm(modeMeta)\r\n          break\r\n        case BUILT_IN_TRIGGER.ELE_MODAL_TABLE:\r\n          this.modalTableMeta = modeMeta\r\n          // 将当前行的 record 数据传递给 modal table\r\n          this.showModalTable(modeMeta, record)\r\n          break\r\n        default:\r\n          break\r\n      }\r\n    },\r\n    handleCloseFsmModal () {\r\n      this.showFsmModal = false\r\n    },\r\n    [`${BUILT_IN_TRIGGER.FSM}Trigger`] (record, meta) {\r\n      this.fsmMeta = meta\r\n      this.fsmContextProp = record\r\n      this.showFsmModal = true\r\n    },\r\n    onChangeTableSelection (_, selectedRows = []) {\r\n      if (this.currentTableMode === 'radio') {\r\n        this.setCurrentTableSelection(selectedRows)\r\n        this.$emit('on-change-table-selection', this.currentTableSelection)\r\n        this.$emit('x:refresh-exposed', { exposed: this.exposed })\r\n      } else {\r\n        this.setCurrentTableSelection(selectedRows)\r\n        this.$emit('on-change-table-selection', this.currentTableSelection)\r\n        this.$emit('x:refresh-exposed', { exposed: this.exposed })\r\n      }\r\n    },\r\n    setCurrentTableSelection (props = {}) {\r\n      if (this.currentTableMode === 'radio') {\r\n        this.$set(this, 'currentTableSelection', (type.isArray(props) && props.length > 0) ? props[0] : type.isObject(props) ? props : {})\r\n      } else {\r\n        this.$set(this, 'currentTableSelection', type.isArray(props) ? props : [])\r\n      }\r\n    },\r\n    getCurrentTableSelection () {\r\n      return this.currentTableSelection\r\n    },\r\n    setCurrentRowData (props = {}) {\r\n      this.currentRowData = props\r\n      if (this.model) {\r\n        this.model.setCurrentRowData(props)\r\n      } else {\r\n        console.warn('Model not initialized, cannot setCurrentRowData in model')\r\n      }\r\n    },\r\n    getCurrentRowData () {\r\n      if (this.model) {\r\n        return this.model.getCurrentRowData()\r\n      }\r\n      console.warn('Model not initialized, getCurrentRowData returning local data')\r\n      return this.currentRowData || {}\r\n    },\r\n    cleanCurrentModelEffect (clearRowData = true) {\r\n      this.setCurrentTableSelection()\r\n      if (clearRowData) {\r\n        this.setCurrentRowData({})\r\n      }\r\n    },\r\n    [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {\r\n      this.cleanCurrentModelEffect()\r\n      this.requestTableData()\r\n    },\r\n    [BUILT_IN_EVENT_NAMES.EDIT] (props = {}) {\r\n      const { record = {} } = props\r\n      this.setCurrentRowData(record)\r\n      this.modalFormMeta = this.editMeta\r\n      this.modalFormValue = true\r\n    },\r\n    [BUILT_IN_EVENT_NAMES.CREATE] () {\r\n      this.modalFormMeta = this.createMeta\r\n      this.modalFormValue = true\r\n    },\r\n    showModalForm (modeMeta = {}) {\r\n      if (type.isStr(modeMeta)) {\r\n        const targetMeta = this.findMetaByKey(modeMeta)\r\n        this.modalFormMeta = targetMeta\r\n      } else {\r\n        this.modalFormMeta = modeMeta\r\n      }\r\n      this.modalFormValue = true\r\n    },\r\n    showModalTable (modeMeta = {}, record = null) {\r\n      // 获取当前行数据并设置到共享命名空间\r\n      const currentRowData = record || this.getCurrentRowData()\r\n      if (this.model) {\r\n        this.model.setSharedData(currentRowData)\r\n      } else {\r\n        console.warn('Model not initialized, cannot setSharedData')\r\n      }\r\n      \r\n      let targetMeta = modeMeta\r\n      if (type.isStr(modeMeta)) {\r\n        targetMeta = this.findMetaByKey(modeMeta)\r\n      }\r\n      \r\n      // 解析 fieldMap 参数，使用完整的上下文包括 currentRowData\r\n      if (targetMeta && targetMeta.fieldMap) {\r\n        const { fieldMap, params = {} } = targetMeta\r\n        \r\n        const ctx = { \r\n          ...this.currentTreeNodeData, \r\n          _route: this.$route.query, \r\n          ...currentRowData \r\n        }\r\n        const parsedParams = parseFieldMap(fieldMap, ctx)\r\n        \r\n        // 将当前的 currentRowData 传递给 modal table，通过 params\r\n        targetMeta = {\r\n          ...targetMeta,\r\n          params: {\r\n            ...params,\r\n            ...parsedParams\r\n          }\r\n        }\r\n      }\r\n      \r\n      this.modalTableMeta = targetMeta\r\n      this.modalTableValue = true\r\n    },\r\n    closeModalForm () {\r\n      this.modalFormValue = false\r\n    },\r\n    closeModalTable () {\r\n      this.modalTableValue = false\r\n    },\r\n    findMetaByKey (key) {\r\n      return this.$attrs[key] || {}\r\n    },\r\n    handleClickButtonGroup (props) {\r\n      const { eventName, target } = props\r\n      const targetMeta = this.findMetaByKey(target)\r\n      const { mode } = targetMeta\r\n      mode && this.dispatchTrigger({ mode, modeMeta: targetMeta })\r\n      this.$emit(eventName || 'click', { currentTreeNode: this.currentTreeNodeData })\r\n    },\r\n    async onSearch (props) {\r\n      const { overrideInit = false } = this.tableMeta\r\n      this.tableQuerys = Object.assign(this.tableQuerys, props)\r\n      if (overrideInit) {\r\n        this.$emit(RESERVE_EVENT_NAMES.TREE_CHANGE, { ...this.exposed })\r\n      } else {\r\n        const { initSearch = false } = props\r\n        if (this.showTree && initSearch) return\r\n        this.tableData = await this.requestTableData()\r\n      }\r\n    },\r\n    async selectTreeNode (selectedKeys, e) {\r\n      const { fieldMap } = this.tableMeta\r\n      this.currentTreeNodeData = e.node.$vnode.data.props.dataRef || {}\r\n      //@deprecated '_' namespace is deprecated, please use 'exposed' instead\r\n      const execFieldMapRet = parseFieldMap(fieldMap, { ...this.currentTreeNodeData, exposed: this.exposed, _route: this.exposed._route })\r\n      const { overrideInit = false } = this.tableMeta\r\n      if (overrideInit) {\r\n        this.$emit(RESERVE_EVENT_NAMES.TREE_CHANGE, { ...this.exposed })\r\n      } else {\r\n        this.tableData = await this.requestTableData(execFieldMapRet)\r\n      }\r\n    },\r\n    async requestTreeData () {\r\n      const { url, requestType = 'GET', params = {}, fieldMap = {} } = this.treeMeta\r\n      const fieldMapRet = parseFieldMap(fieldMap, { ...this.currentTreeNodeData, _route: this.$route.query })\r\n      const ret = await net[requestType.toLowerCase()](\r\n        url,\r\n        { ...params, ...fieldMapRet }\r\n      ).then(resp => {\r\n        const { data } = resp || {}\r\n        return data\r\n      })\r\n      return ret\r\n    },\r\n    async onChangePage (page, pageSize) {\r\n      this.tableData = await this.requestTableData({ currentPage: page, pageSize })\r\n    },\r\n    async requestTableData (props = {}) {\r\n      const { url, requestType = 'GET', page = {} } = this.tableMeta\r\n      this.tableQuerys = Object.assign(this.tableQuerys, { currentPage: this.tableQuerys.currentPage || 1, pageSize: this.tableQuerys.pageSize || page.pageSize || 10 }, props)\r\n      this.$emit(RESERVE_EVENT_NAMES.WATCH, { ...this.exposed })\r\n      this.loading = true\r\n      const ret = await net[requestType.toLowerCase()](\r\n        url,\r\n        this.tableQuerys\r\n      ).then(resp => {\r\n        const { data = [], count } = resp || {}\r\n        this.total = count\r\n        this.loading = false\r\n        return (data || []).map(item => {\r\n          delete item.children\r\n          return {\r\n            key: uuidv4(),\r\n            ...item\r\n          }\r\n        })\r\n      })\r\n      if (this.nextCursorConfig) {\r\n        const { count: { url: countUrl, requestType = 'GET', params = {}, fieldMap = {} } } = this.nextCursorConfig\r\n        const countRet = await net[requestType.toLowerCase()](\r\n          countUrl,\r\n          Object.assign({}, this.tableQuerys, params)\r\n        ).then(resp => {\r\n          const { data = 0 } = resp || {}\r\n          return data\r\n        })\r\n        this.total = countRet\r\n      }\r\n      this.cleanCurrentModelEffect(false) // 不清空 currentRowData，除非明确需要\r\n      this.tableData = ret\r\n      return ret\r\n    },\r\n    calculateTableHeight () {\r\n      const currentViewportHeight = window.innerHeight\r\n      const tableRef = this.$refs[this.tableRef]\r\n      if (!tableRef || !tableRef.$el) return\r\n      \r\n      const { top: tableToTop, width } = tableRef.$el.getBoundingClientRect()\r\n      this.tableWidth = width\r\n      \r\n      // 获取分页组件的高度（如果存在）\r\n      let paginationHeight = 0\r\n      const paginationEl = tableRef.$el.querySelector('.g-table__pagination')\r\n      if (paginationEl) {\r\n        paginationHeight = paginationEl.getBoundingClientRect().height || 50\r\n      } else {\r\n        // 如果分页组件还未渲染，使用默认高度\r\n        paginationHeight = 50\r\n      }\r\n      \r\n      // 计算表格高度：视口高度 - 表格顶部距离 - 分页高度 - 额外高度\r\n      const calculatedHeight = currentViewportHeight - tableToTop - paginationHeight - this.overHeight - 20\r\n      // 确保最小高度，避免表格过小\r\n      this.tableHeight = Math.max(calculatedHeight, 200)\r\n    },\r\n    calculateTreeHeight () {\r\n      if (!this.showTree) return\r\n      const modelTableContainerRef = this.$refs[this.modelTableContainerRef]\r\n      if (!modelTableContainerRef) return\r\n      \r\n      const { height } = modelTableContainerRef.getBoundingClientRect()\r\n      // 确保树的高度和表格容器高度一致\r\n      this.treeWrapperHeight = height\r\n      \r\n      // 如果表格容器有标题，需要减去标题高度\r\n      const titleEl = modelTableContainerRef.querySelector('.model__table--title')\r\n      if (titleEl) {\r\n        const titleHeight = titleEl.getBoundingClientRect().height\r\n        this.treeWrapperHeight = height - titleHeight\r\n      }\r\n    },\r\n    async keepAliveRefresh () {\r\n      // 重新计算表格高度（应对窗口大小变化）\r\n      this.$nextTick(() => {\r\n        setTimeout(() => {\r\n          this.calculateTableHeight()\r\n          if (this.showTree) {\r\n            this.calculateTreeHeight()\r\n          }\r\n        }, 200)\r\n      })\r\n      // 刷新列表数据\r\n      const { overrideInit = false } = this.tableMeta\r\n      if (overrideInit) {\r\n        // 如果使用自定义初始化模式，触发 INIT 事件\r\n        this.$emit(RESERVE_EVENT_NAMES.INIT, { ...this.exposed })\r\n      } else {\r\n        // 使用当前查询参数刷新表格数据\r\n        await this.requestTableData(this.tableQuerys)\r\n      }\r\n    }\r\n  },\r\n  mounted () {\r\n    // 初始化时先设置一个默认高度，避免布局混乱\r\n    this.tableHeight = 400\r\n    if (this.showTree) {\r\n      this.treeWrapperHeight = 400\r\n    }\r\n    \r\n    // 延迟计算，确保所有组件都已渲染\r\n    this.$nextTick(() => {\r\n      setTimeout(() => {\r\n        this.calculateTableHeight()\r\n        this.calculateTreeHeight()\r\n      }, 200)\r\n    })\r\n    \r\n    // 使用 ResizeObserver 监听容器大小变化\r\n    this.resizeObserverModelTableWrapper = new ResizeObserver(entries => {\r\n      for (const _ of entries) {\r\n        requestAnimationFrame(() => {\r\n          // 延迟重新计算，确保分页组件高度已更新\r\n          setTimeout(() => {\r\n            this.calculateTableHeight()\r\n            if (this.showTree) {\r\n              this.calculateTreeHeight()\r\n            }\r\n          }, 100)\r\n        })\r\n      }\r\n    })\r\n    \r\n    if (this.$refs[this.modelTableWrapper]) {\r\n      this.resizeObserverModelTableWrapper.observe(this.$refs[this.modelTableWrapper])\r\n    }\r\n    \r\n    // 监听表格容器大小变化（用于同步树高度）\r\n    if (this.showTree && this.$refs[this.modelTableContainerRef]) {\r\n      this.resizeObserverModelTableContainer = new ResizeObserver(entries => {\r\n        for (const _ of entries) {\r\n          requestAnimationFrame(() => {\r\n            this.calculateTreeHeight()\r\n          })\r\n        }\r\n      })\r\n      this.resizeObserverModelTableContainer.observe(this.$refs[this.modelTableContainerRef])\r\n    }\r\n    \r\n    // 监听窗口大小变化\r\n    this.handleResize = () => {\r\n      this.$nextTick(() => {\r\n        setTimeout(() => {\r\n          this.calculateTableHeight()\r\n          if (this.showTree) {\r\n            this.calculateTreeHeight()\r\n          }\r\n        }, 100)\r\n      })\r\n    }\r\n    window.addEventListener('resize', this.handleResize)\r\n  },\r\n  destroyed () {\r\n    if (this.resizeObserverModelTableWrapper) {\r\n      this.resizeObserverModelTableWrapper.disconnect()\r\n    }\r\n    if (this.resizeObserverModelTableContainer) {\r\n      this.resizeObserverModelTableContainer.disconnect()\r\n    }\r\n    if (this.handleResize) {\r\n      window.removeEventListener('resize', this.handleResize)\r\n    }\r\n    if (this.model) {\r\n      // 清理订阅\r\n      if (this.unsubscribe) {\r\n        this.unsubscribe()\r\n      }\r\n      if (this.unsubscribeShared) {\r\n        this.unsubscribeShared()\r\n      }\r\n      // 清理模型数据\r\n      if (this.model) {\r\n        this.model.cleanup()\r\n      }\r\n    }\r\n  },\r\n  async activated () {\r\n    await this.keepAliveRefresh()\r\n  }\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.ele {\r\n  &.model__tree-table {\r\n    background: transparent;                                                                                                                                                                                                                 \r\n    display: flex;\r\n    flex-direction: row;\r\n    width: 100%;\r\n    height: 100%;\r\n    overflow: hidden;\r\n    .model__tree-table--container {\r\n      display: flex;\r\n      flex-direction: column;\r\n      height: 100%;\r\n      .model__tree--wrapper {\r\n        width: 240px;\r\n        background: #fff;\r\n        flex-shrink: 0;\r\n        padding: 16px;\r\n        box-sizing: border-box;\r\n        margin-right: 16px;\r\n        overflow-y: auto;\r\n        overflow-x: hidden;\r\n      }\r\n    }\r\n    .model__table--container {\r\n      width: 100%;\r\n      min-width: 0;\r\n      background: #fff;\r\n      display: flex;\r\n      flex-direction: column;\r\n      height: 100%;\r\n      overflow: hidden;\r\n      .model__table--title {\r\n        .model__table-title--bar {\r\n          width: 100%;\r\n          height: 8px;\r\n          background: var(--idooel-primary-color);\r\n          border-top-left-radius: 4px;\r\n          border-top-right-radius: 4px;\r\n        }\r\n        .model__table-title--text {\r\n          text-align: left;\r\n          padding: 16px;\r\n          font-size: 16px;\r\n          font-weight: bold;\r\n          background: #fff;\r\n          border-bottom: 1px solid;\r\n          border-color: var(--idoole-black-016);\r\n        }\r\n      }\r\n      .model__table--wrapper {\r\n        background: #fff;\r\n        display: flex;\r\n        flex-direction: column;\r\n        height: 100%;\r\n        overflow: hidden;\r\n        .button-row__area {\r\n          width: 100%;\r\n          display: flex;\r\n          flex-direction: row;\r\n          align-items: center;\r\n          justify-content: space-between;\r\n          padding-top: 16px;\r\n          padding-bottom: 8px;\r\n          padding-right: 16px;\r\n          flex-shrink: 0;\r\n        }\r\n        .g-table__wrapper {\r\n          flex: 1;\r\n          min-height: 0;\r\n          overflow: hidden;\r\n          .fsm {\r\n            cursor: pointer;\r\n            color: var(--idooel-primary-color);\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n</style>\r\n",".ele.model__tree-table {\n  background: transparent;\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n.ele.model__tree-table .model__tree-table--container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n.ele.model__tree-table .model__tree-table--container .model__tree--wrapper {\n  width: 240px;\n  background: #fff;\n  flex-shrink: 0;\n  padding: 16px;\n  box-sizing: border-box;\n  margin-right: 16px;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n.ele.model__tree-table .model__table--container {\n  width: 100%;\n  min-width: 0;\n  background: #fff;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow: hidden;\n}\n.ele.model__tree-table .model__table--container .model__table--title .model__table-title--bar {\n  width: 100%;\n  height: 8px;\n  background: var(--idooel-primary-color);\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n}\n.ele.model__tree-table .model__table--container .model__table--title .model__table-title--text {\n  text-align: left;\n  padding: 16px;\n  font-size: 16px;\n  font-weight: bold;\n  background: #fff;\n  border-bottom: 1px solid;\n  border-color: var(--idoole-black-016);\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper {\n  background: #fff;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow: hidden;\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper .button-row__area {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  padding-top: 16px;\n  padding-bottom: 8px;\n  padding-right: 16px;\n  flex-shrink: 0;\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper .g-table__wrapper {\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n}\n.ele.model__tree-table .model__table--container .model__table--wrapper .g-table__wrapper .fsm {\n  cursor: pointer;\n  color: var(--idooel-primary-color);\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$B = "data-v-95429590";
+  const __vue_scope_id__$B = "data-v-72d2cdcc";
   /* module identifier */
   const __vue_module_identifier__$B = undefined;
   /* functional template */