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

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

@@ -2174,6 +2174,10 @@ var script$D = {
     bordered: {
       type: Boolean,
       default: true
+    },
+    countLoading: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -2679,7 +2683,8 @@ var __vue_render__$D = function () {
                   pageSize: _vm.innerPageSize,
                   current: _vm.innerCurrentPage,
                   pageSizeOptions: _vm.pageSizeOptions,
-                  data: _vm.dataSource.length,
+                  data: _vm.dataSource,
+                  loading: _vm.countLoading,
                   total: _vm.total,
                 },
                 on: {
@@ -2700,11 +2705,11 @@ __vue_render__$D._withStripped = true;
   /* style */
   const __vue_inject_styles__$D = function (inject) {
     if (!inject) return
-    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 });
+    inject("data-v-483eea17_0", { source: "@charset \"UTF-8\";\n.g-table__wrapper[data-v-483eea17] {\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-483eea17]  .ant-table-scroll .ant-table-header table,\n.g-table__wrapper[data-v-483eea17]  .ant-table-scroll .ant-table-body table {\n  min-width: 100%;\n}\n.g-table__wrapper[data-v-483eea17] {\n  /**\n   * 修复\"固定列 + scroll.x\"场景下，主表(ant-table-scroll)里会渲染一份 fixed 列的占位 header/cell。\n   * 这份占位本来只用于计算宽度，但在某些布局下会被看见，表现为\"操作列前多了一大块空白/空列\"。\n   * 这里用 visibility:hidden 隐藏占位（不影响占位宽度与 fixed 计算），避免视觉空白。\n   */\n}\n.g-table__wrapper[data-v-483eea17]  .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-483eea17]  .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-483eea17] {\n  /* 强制统一行高，确保主表和固定列对齐 */\n}\n.g-table__wrapper[data-v-483eea17]  .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-483eea17] {\n  /* 表头也统一高度和样式 */\n}\n.g-table__wrapper[data-v-483eea17]  .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-483eea17] {\n  /* 分页区域固定在底部 */\n}\n.g-table__wrapper .g-table__pagination[data-v-483eea17] {\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-483eea17] {\n  /* 空数据状态顶部显示 */\n}\n.g-table__wrapper .g-table__no-data[data-v-483eea17] {\n  position: relative;\n}\n.g-table__wrapper .g-table__no-data[data-v-483eea17]  .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;AC2hBhB;EACA;;;;;IAAA;ADphBA;AC0hBA;;EAEA,eAAA;ADxhBA;AC+gBA;EAYA;;;;IAAA;ADphBA;ACyhBA;;EAEA,kBAAA;ADvhBA;ACogBA;EAsBA,sBAAA;ADvhBA;ACwhBA;EACA,YAAA;EACA,iBAAA;EACA,sBAAA;EACA,sBAAA;EACA,iBAAA;ADthBA;AC0fA;EA+BA,eAAA;ADthBA;ACuhBA;EACA,YAAA;EACA,iBAAA;EACA,sBAAA;EACA,sBAAA;EACA,iBAAA;ADrhBA;ACgfA;EAwCA,cAAA;ADrhBA;ACshBA;EACA,aAAA;EACA,mBAAA;EACA,oBAAA;EACA,iBAAA;EACA,gBAAA;EACA,mBAAA;EACA,gBAAA;ADphBA;ACoeA;EAmDA,cAAA;ADphBA;ACqhBA;EACA,kBAAA;ADnhBA;ACohBA;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;ADlhBA;;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\"\r\n        :loading=\"countLoading\"\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    countLoading: {\r\n      type: Boolean,\r\n      default: false\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-33440b92";
+  const __vue_scope_id__$D = "data-v-483eea17";
   /* module identifier */
   const __vue_module_identifier__$D = undefined;
   /* functional template */
@@ -3010,7 +3015,8 @@ var script$B = {
       fsmContextProp: {},
       modalTableValue: false,
       modalTableMeta: {},
-      dataPoolManager: null
+      dataPoolManager: null,
+      countLoading: false
     };
   },
   computed: {
@@ -3267,7 +3273,7 @@ var script$B = {
       const {
         page = {}
       } = this.tableMeta;
-      return page.mode;
+      return page.mode || 'default';
     },
     pageSizeOptions() {
       const {
@@ -3717,6 +3723,24 @@ var script$B = {
         ...this.exposed
       });
       this.loading = true;
+      if (this.nextCursorConfig) {
+        this.countLoading = true;
+        const {
+          count: {
+            url: countUrl,
+            requestType = 'GET',
+            params = {},
+            fieldMap = {}
+          }
+        } = this.nextCursorConfig;
+        net[requestType.toLowerCase()](countUrl, Object.assign({}, this.tableQuerys, params)).then(resp => {
+          const {
+            data = 0
+          } = resp || {};
+          this.total = data;
+          this.countLoading = false;
+        });
+      }
       const ret = await net[requestType.toLowerCase()](url, this.tableQuerys).then(resp => {
         const {
           data = [],
@@ -3732,23 +3756,6 @@ 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;
@@ -4014,31 +4021,27 @@ var __vue_render__$B = function () {
               _c(
                 "ele-table",
                 _vm._g(
-                  _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 },
+                  {
+                    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,
+                      countLoading: _vm.countLoading,
                     },
-                    "ele-table",
-                    _vm.pageConfig,
-                    false
-                  ),
+                    on: { "change-page": _vm.onChangePage },
+                  },
                   _vm.overrideTableEvent
                 )
               ),
@@ -4103,11 +4106,11 @@ __vue_render__$B._withStripped = true;
   /* style */
   const __vue_inject_styles__$B = function (inject) {
     if (!inject) return
-    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 });
+    inject("data-v-ada86c16_0", { source: ".ele.model__tree-table[data-v-ada86c16] {\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-ada86c16] {\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-ada86c16] {\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-ada86c16] {\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-ada86c16] {\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-ada86c16] {\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-ada86c16] {\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-ada86c16] {\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-ada86c16] {\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-ada86c16] {\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":"AAu3BA;EACA,uBAAA;EACA,aAAA;EACA,mBAAA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;ACt3BA;ADu3BA;EACA,aAAA;EACA,sBAAA;EACA,YAAA;ACr3BA;ADs3BA;EACA,YAAA;EACA,gBAAA;EACA,cAAA;EACA,aAAA;EACA,sBAAA;EACA,kBAAA;EACA,gBAAA;EACA,kBAAA;ACp3BA;ADu3BA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;EACA,aAAA;EACA,sBAAA;EACA,YAAA;EACA,gBAAA;ACr3BA;ADu3BA;EACA,WAAA;EACA,WAAA;EACA,uCAAA;EACA,2BAAA;EACA,4BAAA;ACr3BA;ADu3BA;EACA,gBAAA;EACA,aAAA;EACA,eAAA;EACA,iBAAA;EACA,gBAAA;EACA,wBAAA;EACA,qCAAA;ACr3BA;ADw3BA;EACA,gBAAA;EACA,aAAA;EACA,sBAAA;EACA,YAAA;EACA,gBAAA;ACt3BA;ADu3BA;EACA,WAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8BAAA;EACA,iBAAA;EACA,mBAAA;EACA,mBAAA;EACA,cAAA;ACr3BA;ADu3BA;EACA,OAAA;EACA,aAAA;EACA,gBAAA;ACr3BA;ADs3BA;EACA,eAAA;EACA,kCAAA;ACp3BA;;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          :countLoading=\"countLoading\"\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      countLoading: false\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 || 'default'\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      if (this.nextCursorConfig) {\r\n        this.countLoading = true\r\n        const { count: { url: countUrl, requestType = 'GET', params = {}, fieldMap = {} } } = this.nextCursorConfig\r\n        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          this.total = data\r\n          this.countLoading = false\r\n        })\r\n      }\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      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-72d2cdcc";
+  const __vue_scope_id__$B = "data-v-ada86c16";
   /* module identifier */
   const __vue_module_identifier__$B = undefined;
   /* functional template */
@@ -13576,7 +13579,7 @@ var __vue_render__$d = function () {
         { staticClass: "total" },
         [
           _vm._v("\n      共\n      "),
-          !_vm.currentTotalLoading
+          !_vm.currentTotalLoading && !_vm.loading
             ? _c("span", [_vm._v(_vm._s(_vm.currentTotal))])
             : _c("a-icon", { attrs: { type: "loading" } }),
           _vm._v("\n      条\n    "),
@@ -13659,11 +13662,11 @@ __vue_render__$d._withStripped = true;
   /* style */
   const __vue_inject_styles__$d = function (inject) {
     if (!inject) return
-    inject("data-v-15a4e77c_0", { source: "@keyframes ani-load-loop-data-v-15a4e77c {\n0% {\n    transform: rotate(0);\n}\n50% {\n    transform: rotate(180deg);\n}\n100% {\n    transform: rotate(1turn);\n}\n}\n.ele-page--wrapper[data-v-15a4e77c] {\n  width: 100%;\n  height: 100%;\n  background: transparent;\n  border-top: unset;\n  padding: 0px 16px 16px 16px;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: end;\n  /* margin-left: 16px;\n  margin-right: 16px; */\n}\n.ele-page--wrapper .ele-page--panel[data-v-15a4e77c] {\n  width: auto;\n  height: 32px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n.ele-page--wrapper .ele-page--panel .total .ivu-load-loop[data-v-15a4e77c] {\n  color: #409EFF;\n  animation: ani-load-loop-data-v-15a4e77c 1s linear infinite;\n}\n.ele-page--wrapper .ele-page--panel .total[data-v-15a4e77c] {\n  color: rgba(0, 0, 0, 0.88);\n  font-family: \"AlibabaPuHuiTi_2_55_Regular\";\n  font-size: 14px;\n  font-weight: 400;\n}\n.ele-page--wrapper .ele-page--panel .page[data-v-15a4e77c] {\n  margin-left: 12px;\n  display: flex;\n  flex-direction: row;\n}\n.ele-page--wrapper .ele-page--panel .page .home[data-v-15a4e77c] {\n  height: auto;\n  width: auto;\n  color: rgba(0, 0, 0, 0.88);\n  padding: 5px 4px 5px 4px;\n  text-align: center;\n  font-family: \"AlibabaPuHuiTi_2_55_Regular\";\n  font-size: 14px;\n  font-weight: 400;\n  border-radius: 2px;\n  border: 1px solid rgba(0, 0, 0, 0.16);\n  background: #FFF;\n  box-sizing: border-box;\n  cursor: pointer;\n}\n.ele-page--wrapper .ele-page--panel .page .page--prev[data-v-15a4e77c] {\n  margin-left: 12px;\n  cursor: pointer;\n  height: 32px;\n  width: 32px;\n  color: rgba(0, 0, 0, 0.88);\n  font-family: \"AlibabaPuHuiTi_2_55_Regular\";\n  font-size: 14px;\n  font-weight: 400;\n  border-radius: 2px;\n  border: 1px solid rgba(0, 0, 0, 0.16);\n  background: #FFF;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n}\n.ele-page--wrapper .ele-page--panel .page .page--prev .ivu-icon-ios-arrow-left[data-v-15a4e77c] {\n  font-size: 16px;\n}\n.ele-page--wrapper .ele-page--panel .page .page--current[data-v-15a4e77c] {\n  margin-left: 12px;\n  height: 32px;\n  width: 32px;\n  color: rgba(0, 0, 0, 0.88);\n  font-family: \"AlibabaPuHuiTi_2_55_Regular\";\n  font-size: 14px;\n  font-weight: 400;\n  border-radius: 2px;\n  background: #409EFF;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  color: #FFF;\n}\n.ele-page--wrapper .ele-page--panel .page .page--next[data-v-15a4e77c] {\n  margin-left: 12px;\n  cursor: pointer;\n  height: 32px;\n  width: 32px;\n  color: rgba(0, 0, 0, 0.88);\n  font-family: \"AlibabaPuHuiTi_2_55_Regular\";\n  font-size: 14px;\n  font-weight: 400;\n  border-radius: 2px;\n  border: 1px solid rgba(0, 0, 0, 0.16);\n  background: #FFF;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n}\n.ele-page--wrapper .ele-page--panel .page .page--next .ivu-icon-ios-arrow-right[data-v-15a4e77c] {\n  font-size: 16px;\n}\n.ele-page--wrapper .ele-page--panel .page .page--prev.page-disabled[data-v-15a4e77c], .ele-page--wrapper .ele-page--panel .page .page--next.page-disabled[data-v-15a4e77c] {\n  margin-left: 12px;\n  height: 32px;\n  width: 32px;\n  color: rgba(0, 0, 0, 0.88);\n  font-family: \"AlibabaPuHuiTi_2_55_Regular\";\n  font-size: 14px;\n  font-weight: 400;\n  border-radius: 2px;\n  border: 1px solid rgba(0, 0, 0, 0.16);\n  background: rgba(0, 0, 0, 0.04);\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  cursor: not-allowed;\n}\n.ele-page--wrapper .ele-page--panel .size[data-v-15a4e77c] {\n  width: auto;\n  display: flex;\n  flex-direction: row;\n  margin-left: 12px;\n}\n.ele-page--wrapper .ele-page--panel .size .ant-select[data-v-15a4e77c] {\n  min-width: 91px;\n  flex-basis: 91px;\n  /* flex-shrink: 0; */\n  flex-grow: 1;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\code\\OnlineStudy-Base\\base-elearning-frontend-model\\packages\\components\\packages\\pagination\\src\\index.vue","index.vue"],"names":[],"mappings":"AA0NA;AACA;IACA,oBAAA;ACzNE;AD2NF;IACA,yBAAA;ACzNE;AD2NF;IACA,wBAAA;ACzNE;AACF;AD2NA;EACA,WAAA;EACA,YAAA;EACA,uBAAA;EACA,iBAAA;EACA,2BAAA;EACA,sBAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,oBAAA;EACA;uBAAA;ACxNA;AD0NA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;ACxNA;AD0NA;EACA,cAAA;EACA,2DAAA;ACxNA;ADqNA;EAKA,0BAAA;EACA,0CAAA;EACA,eAAA;EACA,gBAAA;ACvNA;ADyNA;EACA,iBAAA;EACA,aAAA;EACA,mBAAA;ACvNA;ADwNA;EACA,YAAA;EACA,WAAA;EACA,0BAAA;EACA,wBAAA;EACA,kBAAA;EACA,0CAAA;EACA,eAAA;EACA,gBAAA;EACA,kBAAA;EACA,qCAAA;EACA,gBAAA;EACA,sBAAA;EACA,eAAA;ACtNA;ADwNA;EACA,iBAAA;EACA,eAAA;EACA,YAAA;EACA,WAAA;EACA,0BAAA;EACA,0CAAA;EACA,eAAA;EACA,gBAAA;EACA,kBAAA;EACA,qCAAA;EACA,gBAAA;EACA,sBAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,uBAAA;ACtNA;ADuNA;EACA,eAAA;ACrNA;ADwNA;EACA,iBAAA;EACA,YAAA;EACA,WAAA;EACA,0BAAA;EACA,0CAAA;EACA,eAAA;EACA,gBAAA;EACA,kBAAA;EACA,mBAAA;EACA,sBAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,uBAAA;EACA,WAAA;ACtNA;ADwNA;EACA,iBAAA;EACA,eAAA;EACA,YAAA;EACA,WAAA;EACA,0BAAA;EACA,0CAAA;EACA,eAAA;EACA,gBAAA;EACA,kBAAA;EACA,qCAAA;EACA,gBAAA;EACA,sBAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,uBAAA;ACtNA;ADuNA;EACA,eAAA;ACrNA;ADyNA;EACA,iBAAA;EACA,YAAA;EACA,WAAA;EACA,0BAAA;EACA,0CAAA;EACA,eAAA;EACA,gBAAA;EACA,kBAAA;EACA,qCAAA;EACA,+BAAA;EACA,sBAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,uBAAA;EACA,mBAAA;ACvNA;AD2NA;EACA,WAAA;EACA,aAAA;EACA,mBAAA;EACA,iBAAA;ACzNA;AD0NA;EACA,eAAA;EACA,gBAAA;EACA,oBAAA;EACA,YAAA;ACxNA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n  <div class=\"ele-page--wrapper\">\r\n    <section class=\"ele-page--panel\">\r\n      <div class=\"total\">\r\n        共\r\n        <span v-if=\"!currentTotalLoading\">{{ currentTotal }}</span>\r\n        <a-icon v-else type=\"loading\" />\r\n        条\r\n      </div>\r\n      <div class=\"page\">\r\n        <div class=\"home\" @click=\"handleClickHome\">首页</div>\r\n        <div :class=\"['page--prev', loading && 'page-disabled', disabledPrev && 'page-disabled']\" @click=\"handleClickPrev\">\r\n          <a-icon type=\"left\"></a-icon>\r\n        </div>\r\n        <div class=\"page--current\">\r\n          {{ currentPage }}\r\n        </div>\r\n        <div :class=\"['page--next', loading && 'page-disabled', disabledNext && 'page-disabled']\" @click=\"handleClickNext\">\r\n          <a-icon type=\"right\"></a-icon>\r\n        </div>\r\n      </div>\r\n      <div class=\"size\">\r\n        <a-select v-model=\"currentPageSize\" @change=\"handleChangePageSize\">\r\n          <a-select-option v-for=\"item in innerPageSizeOptions\" :value=\"item\" :key=\"item\">\r\n            {{ item }} 条/页\r\n          </a-select-option>\r\n        </a-select>\r\n      </div>\r\n    </section>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport { util } from '@idooel/shared'\r\nconst { toNumber } = util\r\nexport default {\r\n  name: 'ele-pagination',\r\n  props: {\r\n    query: {\r\n      type: Object,\r\n      default: () => ({})\r\n    },\r\n    data: {\r\n      type: Array,\r\n      default: () => ([])\r\n    },\r\n    loading: {\r\n      type: Boolean,\r\n      default: false\r\n    }, \r\n    total: {\r\n      type: [String, Number],\r\n      default: 0\r\n    },\r\n    pageSizeOptions: {\r\n      type: Array,\r\n      default: () => ([50, 100, 500, 1000])\r\n    },\r\n    current: {\r\n      type: [Number, String],\r\n      default: 1\r\n    },\r\n    pageSize: {\r\n      type: [Number, String],\r\n      default: 10\r\n    },\r\n    disabledNextButton: {\r\n      type: Boolean,\r\n      default: false\r\n    }\r\n  },\r\n  data () {\r\n    return {\r\n      currentPage: 1,\r\n      currentPageSize: 0,\r\n      disabledPrev: false,\r\n      disabledNext: false,\r\n      currentTotal: 0,\r\n      currentTotalLoading: true,\r\n      cacheQuery: []\r\n    }\r\n  },\r\n  computed: {\r\n    innerPageSizeOptions () {\r\n      const normalized = this.pageSizeOptions\r\n        .map(item => toNumber(item))\r\n        .filter(n => typeof n === 'number' && Number.isFinite(n) && n > 0)\r\n\r\n      // 兜底：避免 a-select option 出现 undefined/空数组\r\n      return normalized.length ? normalized : [10]\r\n    },\r\n    pageQuery () {\r\n      const { currentPage, pageSize } = this.query\r\n      return { currentPage, pageSize }\r\n    }\r\n  },\r\n  watch: {\r\n    current: {\r\n      handler (current) {\r\n        this.syncCurrentFromProps(current)\r\n      },\r\n      immediate: true\r\n    },\r\n    total: {\r\n      handler (total) {\r\n        this.currentTotalLoading = true\r\n        if (typeof total === 'number') {\r\n          this.currentTotal = total\r\n          this.currentTotalLoading = false\r\n        }\r\n      },\r\n      immediate: true\r\n    },\r\n    query: {\r\n      handler (newQuery, oldQuery) {\r\n        // 1s内多次请求合并\r\n        // clearTimeout(this.timer)\r\n        // this.timer = setTimeout(() => {\r\n        //   this.requestHandler(this.total, { ...newQuery, ...this.pageQuery })\r\n        // }, 1000)\r\n      }\r\n    },\r\n    data: {\r\n      handler (data) {\r\n        if (!this.currentPageSize) return\r\n        if (data.length != this.currentPageSize) {\r\n          this.disabledNext = true\r\n        } else {\r\n          this.disabledNext = false\r\n        }\r\n      },\r\n      immediate: true\r\n    },\r\n    disabledNextButton: {\r\n      handler (status) {\r\n        this.disabledNext = status\r\n      },\r\n      immediate: true\r\n    },\r\n    pageSize: {\r\n      handler (size) {\r\n        this.syncPageSizeFromProps(size)\r\n      },\r\n      immediate: true\r\n    }\r\n  },\r\n  methods: {\r\n    handleChangePageSize (value) {\r\n      const nextSize = this.normalizePageSize(value, this.currentPageSize || 10)\r\n      if (!nextSize) return\r\n\r\n      this.currentPageSize = nextSize\r\n      // pageSize 变化建议回到第一页，避免页码越界\r\n      this.currentPage = 1\r\n      this.setDisabledPrev(this.currentPage)\r\n\r\n      // 仅用户交互时触发\r\n      this.$emit('showSizeChange', this.currentPage, this.currentPageSize)\r\n    },\r\n    setDisabledNext (status) {\r\n      this.disabledNext = status\r\n    },\r\n    handleClickHome () {\r\n      this.currentPage = 1\r\n      this.setDisabledPrev(this.currentPage)\r\n      // 仅用户交互时触发\r\n      this.$emit('change', this.currentPage, this.currentPageSize)\r\n    },\r\n    setDisabledPrev (currentPage) {\r\n      if (currentPage > 1) {\r\n        this.disabledPrev = false\r\n      } else {\r\n        this.disabledPrev = true\r\n      }\r\n    },\r\n    handleClickPrev () {\r\n      if (this.currentPage > 1) {\r\n        this.currentPage -= 1\r\n        this.setDisabledPrev(this.currentPage)\r\n        // 仅用户交互时触发\r\n        this.$emit('change', this.currentPage, this.currentPageSize)\r\n      }\r\n    },\r\n    handleClickNext () {\r\n      if (this.disabledNext) return\r\n      this.currentPage += 1\r\n      this.setDisabledPrev(this.currentPage)\r\n      // 仅用户交互时触发\r\n      this.$emit('change', this.currentPage, this.currentPageSize)\r\n    },\r\n    normalizePage (value, fallback = 1) {\r\n      const n = toNumber(value)\r\n      if (typeof n !== 'number' || !Number.isFinite(n)) return fallback\r\n      const page = Math.floor(n)\r\n      return page >= 1 ? page : fallback\r\n    },\r\n    normalizePageSize (value, fallback = 10) {\r\n      const n = toNumber(value)\r\n      if (typeof n !== 'number' || !Number.isFinite(n)) return fallback\r\n      const size = Math.floor(n)\r\n      return size >= 1 ? size : fallback\r\n    },\r\n    // props 同步：只更新内部 state，不触发 emit\r\n    syncCurrentFromProps (current) {\r\n      this.currentPage = this.normalizePage(current, 1)\r\n      this.setDisabledPrev(this.currentPage)\r\n    },\r\n    // props 同步：只更新内部 state，不触发 emit\r\n    syncPageSizeFromProps (size) {\r\n      this.currentPageSize = this.normalizePageSize(size, this.currentPageSize || 10)\r\n    }\r\n  },\r\n  destroyed () {\r\n    this.cacheQuery = []\r\n  }\r\n}\r\n</script>\r\n<style lang=\"scss\" scoped>\r\n  @keyframes ani-load-loop {\r\n  0% {\r\n    transform: rotate(0);\r\n  }\r\n  50% {\r\n    transform: rotate(180deg);\r\n  }\r\n  100% {\r\n    transform: rotate(1turn);\r\n  }\r\n}\r\n.ele-page--wrapper {\r\n  width: 100%;\r\n  height: 100%;\r\n  background: transparent;\r\n  border-top: unset;\r\n  padding: 0px 16px 16px 16px;\r\n  box-sizing: border-box;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  justify-content: end;\r\n  /* margin-left: 16px;\r\n  margin-right: 16px; */\r\n  .ele-page--panel {\r\n    width: auto;\r\n    height: 32px;\r\n    display: flex;\r\n    flex-direction: row;\r\n    align-items: center;\r\n    .total {\r\n      .ivu-load-loop {\r\n        color: #409EFF;\r\n        animation: ani-load-loop 1s linear infinite;\r\n      }\r\n      color: rgba(0, 0, 0, 0.88);\r\n      font-family: 'AlibabaPuHuiTi_2_55_Regular';\r\n      font-size: 14px;\r\n      font-weight: 400;\r\n    }\r\n    .page {\r\n      margin-left: 12px;\r\n      display: flex;\r\n      flex-direction: row;\r\n      .home {\r\n        height: auto;\r\n        width: auto;\r\n        color: rgba(0, 0, 0, 0.88);\r\n        padding: 5px 4px 5px 4px;\r\n        text-align: center;\r\n        font-family: 'AlibabaPuHuiTi_2_55_Regular';\r\n        font-size: 14px;\r\n        font-weight: 400;\r\n        border-radius: 2px;\r\n        border: 1px solid rgba(0, 0, 0, 0.16);\r\n        background: #FFF;\r\n        box-sizing: border-box;\r\n        cursor: pointer;\r\n      }\r\n      .page--prev {\r\n        margin-left: 12px;\r\n        cursor: pointer;\r\n        height: 32px;\r\n        width: 32px;\r\n        color: rgba(0, 0, 0, 0.88);\r\n        font-family: 'AlibabaPuHuiTi_2_55_Regular';\r\n        font-size: 14px;\r\n        font-weight: 400;\r\n        border-radius: 2px;\r\n        border: 1px solid rgba(0, 0, 0, 0.16);\r\n        background: #FFF;\r\n        box-sizing: border-box;\r\n        display: flex;\r\n        flex-direction: row;\r\n        align-items: center;\r\n        justify-content: center;\r\n        .ivu-icon-ios-arrow-left {\r\n          font-size: 16px;\r\n        }\r\n      }\r\n      .page--current {\r\n        margin-left: 12px;\r\n        height: 32px;\r\n        width: 32px;\r\n        color: rgba(0, 0, 0, 0.88);\r\n        font-family: 'AlibabaPuHuiTi_2_55_Regular';\r\n        font-size: 14px;\r\n        font-weight: 400;\r\n        border-radius: 2px;\r\n        background: #409EFF;\r\n        box-sizing: border-box;\r\n        display: flex;\r\n        flex-direction: row;\r\n        align-items: center;\r\n        justify-content: center;\r\n        color: #FFF;\r\n      }\r\n      .page--next {\r\n        margin-left: 12px;\r\n        cursor: pointer;\r\n        height: 32px;\r\n        width: 32px;\r\n        color: rgba(0, 0, 0, 0.88);\r\n        font-family: 'AlibabaPuHuiTi_2_55_Regular';\r\n        font-size: 14px;\r\n        font-weight: 400;\r\n        border-radius: 2px;\r\n        border: 1px solid rgba(0, 0, 0, 0.16);\r\n        background: #FFF;\r\n        box-sizing: border-box;\r\n        display: flex;\r\n        flex-direction: row;\r\n        align-items: center;\r\n        justify-content: center;\r\n        .ivu-icon-ios-arrow-right {\r\n          font-size: 16px;\r\n        }\r\n      }\r\n      .page--prev, .page--next {\r\n        &.page-disabled {\r\n          margin-left: 12px;\r\n          height: 32px;\r\n          width: 32px;\r\n          color: rgba(0, 0, 0, 0.88);\r\n          font-family: 'AlibabaPuHuiTi_2_55_Regular';\r\n          font-size: 14px;\r\n          font-weight: 400;\r\n          border-radius: 2px;\r\n          border: 1px solid rgba(0, 0, 0, 0.16);\r\n          background: rgba(0, 0, 0, 0.04);\r\n          box-sizing: border-box;\r\n          display: flex;\r\n          flex-direction: row;\r\n          align-items: center;\r\n          justify-content: center;\r\n          cursor: not-allowed;\r\n        }\r\n      }\r\n    }\r\n    .size {\r\n      width: auto;\r\n      display: flex;\r\n      flex-direction: row;\r\n      margin-left: 12px;\r\n      .ant-select {\r\n        min-width: 91px;\r\n        flex-basis: 91px;\r\n        /* flex-shrink: 0; */\r\n        flex-grow: 1;\r\n      }\r\n    }\r\n  }\r\n}\r\n</style>","@keyframes ani-load-loop {\n  0% {\n    transform: rotate(0);\n  }\n  50% {\n    transform: rotate(180deg);\n  }\n  100% {\n    transform: rotate(1turn);\n  }\n}\n.ele-page--wrapper {\n  width: 100%;\n  height: 100%;\n  background: transparent;\n  border-top: unset;\n  padding: 0px 16px 16px 16px;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: end;\n  /* margin-left: 16px;\n  margin-right: 16px; */\n}\n.ele-page--wrapper .ele-page--panel {\n  width: auto;\n  height: 32px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n.ele-page--wrapper .ele-page--panel .total .ivu-load-loop {\n  color: #409EFF;\n  animation: ani-load-loop 1s linear infinite;\n}\n.ele-page--wrapper .ele-page--panel .total {\n  color: rgba(0, 0, 0, 0.88);\n  font-family: \"AlibabaPuHuiTi_2_55_Regular\";\n  font-size: 14px;\n  font-weight: 400;\n}\n.ele-page--wrapper .ele-page--panel .page {\n  margin-left: 12px;\n  display: flex;\n  flex-direction: row;\n}\n.ele-page--wrapper .ele-page--panel .page .home {\n  height: auto;\n  width: auto;\n  color: rgba(0, 0, 0, 0.88);\n  padding: 5px 4px 5px 4px;\n  text-align: center;\n  font-family: \"AlibabaPuHuiTi_2_55_Regular\";\n  font-size: 14px;\n  font-weight: 400;\n  border-radius: 2px;\n  border: 1px solid rgba(0, 0, 0, 0.16);\n  background: #FFF;\n  box-sizing: border-box;\n  cursor: pointer;\n}\n.ele-page--wrapper .ele-page--panel .page .page--prev {\n  margin-left: 12px;\n  cursor: pointer;\n  height: 32px;\n  width: 32px;\n  color: rgba(0, 0, 0, 0.88);\n  font-family: \"AlibabaPuHuiTi_2_55_Regular\";\n  font-size: 14px;\n  font-weight: 400;\n  border-radius: 2px;\n  border: 1px solid rgba(0, 0, 0, 0.16);\n  background: #FFF;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n}\n.ele-page--wrapper .ele-page--panel .page .page--prev .ivu-icon-ios-arrow-left {\n  font-size: 16px;\n}\n.ele-page--wrapper .ele-page--panel .page .page--current {\n  margin-left: 12px;\n  height: 32px;\n  width: 32px;\n  color: rgba(0, 0, 0, 0.88);\n  font-family: \"AlibabaPuHuiTi_2_55_Regular\";\n  font-size: 14px;\n  font-weight: 400;\n  border-radius: 2px;\n  background: #409EFF;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  color: #FFF;\n}\n.ele-page--wrapper .ele-page--panel .page .page--next {\n  margin-left: 12px;\n  cursor: pointer;\n  height: 32px;\n  width: 32px;\n  color: rgba(0, 0, 0, 0.88);\n  font-family: \"AlibabaPuHuiTi_2_55_Regular\";\n  font-size: 14px;\n  font-weight: 400;\n  border-radius: 2px;\n  border: 1px solid rgba(0, 0, 0, 0.16);\n  background: #FFF;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n}\n.ele-page--wrapper .ele-page--panel .page .page--next .ivu-icon-ios-arrow-right {\n  font-size: 16px;\n}\n.ele-page--wrapper .ele-page--panel .page .page--prev.page-disabled, .ele-page--wrapper .ele-page--panel .page .page--next.page-disabled {\n  margin-left: 12px;\n  height: 32px;\n  width: 32px;\n  color: rgba(0, 0, 0, 0.88);\n  font-family: \"AlibabaPuHuiTi_2_55_Regular\";\n  font-size: 14px;\n  font-weight: 400;\n  border-radius: 2px;\n  border: 1px solid rgba(0, 0, 0, 0.16);\n  background: rgba(0, 0, 0, 0.04);\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  cursor: not-allowed;\n}\n.ele-page--wrapper .ele-page--panel .size {\n  width: auto;\n  display: flex;\n  flex-direction: row;\n  margin-left: 12px;\n}\n.ele-page--wrapper .ele-page--panel .size .ant-select {\n  min-width: 91px;\n  flex-basis: 91px;\n  /* flex-shrink: 0; */\n  flex-grow: 1;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
+    inject("data-v-5abb8e86_0", { source: "@keyframes ani-load-loop-data-v-5abb8e86 {\n0% {\n    transform: rotate(0);\n}\n50% {\n    transform: rotate(180deg);\n}\n100% {\n    transform: rotate(1turn);\n}\n}\n.ele-page--wrapper[data-v-5abb8e86] {\n  width: 100%;\n  height: 100%;\n  background: transparent;\n  border-top: unset;\n  padding: 0px 16px 16px 16px;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: end;\n  /* margin-left: 16px;\n  margin-right: 16px; */\n}\n.ele-page--wrapper .ele-page--panel[data-v-5abb8e86] {\n  width: auto;\n  height: 32px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n.ele-page--wrapper .ele-page--panel .total .ivu-load-loop[data-v-5abb8e86] {\n  color: #409EFF;\n  animation: ani-load-loop-data-v-5abb8e86 1s linear infinite;\n}\n.ele-page--wrapper .ele-page--panel .total[data-v-5abb8e86] {\n  color: rgba(0, 0, 0, 0.88);\n  font-family: \"AlibabaPuHuiTi_2_55_Regular\";\n  font-size: 14px;\n  font-weight: 400;\n}\n.ele-page--wrapper .ele-page--panel .page[data-v-5abb8e86] {\n  margin-left: 12px;\n  display: flex;\n  flex-direction: row;\n}\n.ele-page--wrapper .ele-page--panel .page .home[data-v-5abb8e86] {\n  height: auto;\n  width: auto;\n  color: rgba(0, 0, 0, 0.88);\n  padding: 5px 4px 5px 4px;\n  text-align: center;\n  font-family: \"AlibabaPuHuiTi_2_55_Regular\";\n  font-size: 14px;\n  font-weight: 400;\n  border-radius: 2px;\n  border: 1px solid rgba(0, 0, 0, 0.16);\n  background: #FFF;\n  box-sizing: border-box;\n  cursor: pointer;\n}\n.ele-page--wrapper .ele-page--panel .page .page--prev[data-v-5abb8e86] {\n  margin-left: 12px;\n  cursor: pointer;\n  height: 32px;\n  width: 32px;\n  color: rgba(0, 0, 0, 0.88);\n  font-family: \"AlibabaPuHuiTi_2_55_Regular\";\n  font-size: 14px;\n  font-weight: 400;\n  border-radius: 2px;\n  border: 1px solid rgba(0, 0, 0, 0.16);\n  background: #FFF;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n}\n.ele-page--wrapper .ele-page--panel .page .page--prev .ivu-icon-ios-arrow-left[data-v-5abb8e86] {\n  font-size: 16px;\n}\n.ele-page--wrapper .ele-page--panel .page .page--current[data-v-5abb8e86] {\n  margin-left: 12px;\n  height: 32px;\n  width: 32px;\n  color: rgba(0, 0, 0, 0.88);\n  font-family: \"AlibabaPuHuiTi_2_55_Regular\";\n  font-size: 14px;\n  font-weight: 400;\n  border-radius: 2px;\n  background: #409EFF;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  color: #FFF;\n}\n.ele-page--wrapper .ele-page--panel .page .page--next[data-v-5abb8e86] {\n  margin-left: 12px;\n  cursor: pointer;\n  height: 32px;\n  width: 32px;\n  color: rgba(0, 0, 0, 0.88);\n  font-family: \"AlibabaPuHuiTi_2_55_Regular\";\n  font-size: 14px;\n  font-weight: 400;\n  border-radius: 2px;\n  border: 1px solid rgba(0, 0, 0, 0.16);\n  background: #FFF;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n}\n.ele-page--wrapper .ele-page--panel .page .page--next .ivu-icon-ios-arrow-right[data-v-5abb8e86] {\n  font-size: 16px;\n}\n.ele-page--wrapper .ele-page--panel .page .page--prev.page-disabled[data-v-5abb8e86], .ele-page--wrapper .ele-page--panel .page .page--next.page-disabled[data-v-5abb8e86] {\n  margin-left: 12px;\n  height: 32px;\n  width: 32px;\n  color: rgba(0, 0, 0, 0.88);\n  font-family: \"AlibabaPuHuiTi_2_55_Regular\";\n  font-size: 14px;\n  font-weight: 400;\n  border-radius: 2px;\n  border: 1px solid rgba(0, 0, 0, 0.16);\n  background: rgba(0, 0, 0, 0.04);\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  cursor: not-allowed;\n}\n.ele-page--wrapper .ele-page--panel .size[data-v-5abb8e86] {\n  width: auto;\n  display: flex;\n  flex-direction: row;\n  margin-left: 12px;\n}\n.ele-page--wrapper .ele-page--panel .size .ant-select[data-v-5abb8e86] {\n  min-width: 91px;\n  flex-basis: 91px;\n  /* flex-shrink: 0; */\n  flex-grow: 1;\n}\n\n/*# sourceMappingURL=index.vue.map */", map: {"version":3,"sources":["E:\\code\\OnlineStudy-Base\\base-elearning-frontend-model\\packages\\components\\packages\\pagination\\src\\index.vue","index.vue"],"names":[],"mappings":"AA0NA;AACA;IACA,oBAAA;ACzNE;AD2NF;IACA,yBAAA;ACzNE;AD2NF;IACA,wBAAA;ACzNE;AACF;AD2NA;EACA,WAAA;EACA,YAAA;EACA,uBAAA;EACA,iBAAA;EACA,2BAAA;EACA,sBAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,oBAAA;EACA;uBAAA;ACxNA;AD0NA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;ACxNA;AD0NA;EACA,cAAA;EACA,2DAAA;ACxNA;ADqNA;EAKA,0BAAA;EACA,0CAAA;EACA,eAAA;EACA,gBAAA;ACvNA;ADyNA;EACA,iBAAA;EACA,aAAA;EACA,mBAAA;ACvNA;ADwNA;EACA,YAAA;EACA,WAAA;EACA,0BAAA;EACA,wBAAA;EACA,kBAAA;EACA,0CAAA;EACA,eAAA;EACA,gBAAA;EACA,kBAAA;EACA,qCAAA;EACA,gBAAA;EACA,sBAAA;EACA,eAAA;ACtNA;ADwNA;EACA,iBAAA;EACA,eAAA;EACA,YAAA;EACA,WAAA;EACA,0BAAA;EACA,0CAAA;EACA,eAAA;EACA,gBAAA;EACA,kBAAA;EACA,qCAAA;EACA,gBAAA;EACA,sBAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,uBAAA;ACtNA;ADuNA;EACA,eAAA;ACrNA;ADwNA;EACA,iBAAA;EACA,YAAA;EACA,WAAA;EACA,0BAAA;EACA,0CAAA;EACA,eAAA;EACA,gBAAA;EACA,kBAAA;EACA,mBAAA;EACA,sBAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,uBAAA;EACA,WAAA;ACtNA;ADwNA;EACA,iBAAA;EACA,eAAA;EACA,YAAA;EACA,WAAA;EACA,0BAAA;EACA,0CAAA;EACA,eAAA;EACA,gBAAA;EACA,kBAAA;EACA,qCAAA;EACA,gBAAA;EACA,sBAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,uBAAA;ACtNA;ADuNA;EACA,eAAA;ACrNA;ADyNA;EACA,iBAAA;EACA,YAAA;EACA,WAAA;EACA,0BAAA;EACA,0CAAA;EACA,eAAA;EACA,gBAAA;EACA,kBAAA;EACA,qCAAA;EACA,+BAAA;EACA,sBAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,uBAAA;EACA,mBAAA;ACvNA;AD2NA;EACA,WAAA;EACA,aAAA;EACA,mBAAA;EACA,iBAAA;ACzNA;AD0NA;EACA,eAAA;EACA,gBAAA;EACA,oBAAA;EACA,YAAA;ACxNA;;AAEA,oCAAoC","file":"index.vue","sourcesContent":["<template>\r\n  <div class=\"ele-page--wrapper\">\r\n    <section class=\"ele-page--panel\">\r\n      <div class=\"total\">\r\n        共\r\n        <span v-if=\"!currentTotalLoading && !loading\">{{ currentTotal }}</span>\r\n        <a-icon v-else type=\"loading\" />\r\n        条\r\n      </div>\r\n      <div class=\"page\">\r\n        <div class=\"home\" @click=\"handleClickHome\">首页</div>\r\n        <div :class=\"['page--prev', loading && 'page-disabled', disabledPrev && 'page-disabled']\" @click=\"handleClickPrev\">\r\n          <a-icon type=\"left\"></a-icon>\r\n        </div>\r\n        <div class=\"page--current\">\r\n          {{ currentPage }}\r\n        </div>\r\n        <div :class=\"['page--next', loading && 'page-disabled', disabledNext && 'page-disabled']\" @click=\"handleClickNext\">\r\n          <a-icon type=\"right\"></a-icon>\r\n        </div>\r\n      </div>\r\n      <div class=\"size\">\r\n        <a-select v-model=\"currentPageSize\" @change=\"handleChangePageSize\">\r\n          <a-select-option v-for=\"item in innerPageSizeOptions\" :value=\"item\" :key=\"item\">\r\n            {{ item }} 条/页\r\n          </a-select-option>\r\n        </a-select>\r\n      </div>\r\n    </section>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport { util } from '@idooel/shared'\r\nconst { toNumber } = util\r\nexport default {\r\n  name: 'ele-pagination',\r\n  props: {\r\n    query: {\r\n      type: Object,\r\n      default: () => ({})\r\n    },\r\n    data: {\r\n      type: Array,\r\n      default: () => ([])\r\n    },\r\n    loading: {\r\n      type: Boolean,\r\n      default: false\r\n    }, \r\n    total: {\r\n      type: [String, Number],\r\n      default: 0\r\n    },\r\n    pageSizeOptions: {\r\n      type: Array,\r\n      default: () => ([50, 100, 500, 1000])\r\n    },\r\n    current: {\r\n      type: [Number, String],\r\n      default: 1\r\n    },\r\n    pageSize: {\r\n      type: [Number, String],\r\n      default: 10\r\n    },\r\n    disabledNextButton: {\r\n      type: Boolean,\r\n      default: false\r\n    }\r\n  },\r\n  data () {\r\n    return {\r\n      currentPage: 1,\r\n      currentPageSize: 0,\r\n      disabledPrev: false,\r\n      disabledNext: false,\r\n      currentTotal: 0,\r\n      currentTotalLoading: true,\r\n      cacheQuery: []\r\n    }\r\n  },\r\n  computed: {\r\n    innerPageSizeOptions () {\r\n      const normalized = this.pageSizeOptions\r\n        .map(item => toNumber(item))\r\n        .filter(n => typeof n === 'number' && Number.isFinite(n) && n > 0)\r\n\r\n      // 兜底：避免 a-select option 出现 undefined/空数组\r\n      return normalized.length ? normalized : [10]\r\n    },\r\n    pageQuery () {\r\n      const { currentPage, pageSize } = this.query\r\n      return { currentPage, pageSize }\r\n    }\r\n  },\r\n  watch: {\r\n    current: {\r\n      handler (current) {\r\n        this.syncCurrentFromProps(current)\r\n      },\r\n      immediate: true\r\n    },\r\n    total: {\r\n      handler (total) {\r\n        this.currentTotalLoading = true\r\n        if (typeof total === 'number') {\r\n          this.currentTotal = total\r\n          this.currentTotalLoading = false\r\n        }\r\n      },\r\n      immediate: true\r\n    },\r\n    query: {\r\n      handler (newQuery, oldQuery) {\r\n        // 1s内多次请求合并\r\n        // clearTimeout(this.timer)\r\n        // this.timer = setTimeout(() => {\r\n        //   this.requestHandler(this.total, { ...newQuery, ...this.pageQuery })\r\n        // }, 1000)\r\n      }\r\n    },\r\n    data: {\r\n      handler (data) {\r\n        if (!this.currentPageSize) return\r\n        if (data.length != this.currentPageSize) {\r\n          this.disabledNext = true\r\n        } else {\r\n          this.disabledNext = false\r\n        }\r\n      },\r\n      immediate: true\r\n    },\r\n    disabledNextButton: {\r\n      handler (status) {\r\n        this.disabledNext = status\r\n      },\r\n      immediate: true\r\n    },\r\n    pageSize: {\r\n      handler (size) {\r\n        this.syncPageSizeFromProps(size)\r\n      },\r\n      immediate: true\r\n    }\r\n  },\r\n  methods: {\r\n    handleChangePageSize (value) {\r\n      const nextSize = this.normalizePageSize(value, this.currentPageSize || 10)\r\n      if (!nextSize) return\r\n\r\n      this.currentPageSize = nextSize\r\n      // pageSize 变化建议回到第一页，避免页码越界\r\n      this.currentPage = 1\r\n      this.setDisabledPrev(this.currentPage)\r\n\r\n      // 仅用户交互时触发\r\n      this.$emit('showSizeChange', this.currentPage, this.currentPageSize)\r\n    },\r\n    setDisabledNext (status) {\r\n      this.disabledNext = status\r\n    },\r\n    handleClickHome () {\r\n      this.currentPage = 1\r\n      this.setDisabledPrev(this.currentPage)\r\n      // 仅用户交互时触发\r\n      this.$emit('change', this.currentPage, this.currentPageSize)\r\n    },\r\n    setDisabledPrev (currentPage) {\r\n      if (currentPage > 1) {\r\n        this.disabledPrev = false\r\n      } else {\r\n        this.disabledPrev = true\r\n      }\r\n    },\r\n    handleClickPrev () {\r\n      if (this.currentPage > 1) {\r\n        this.currentPage -= 1\r\n        this.setDisabledPrev(this.currentPage)\r\n        // 仅用户交互时触发\r\n        this.$emit('change', this.currentPage, this.currentPageSize)\r\n      }\r\n    },\r\n    handleClickNext () {\r\n      if (this.disabledNext) return\r\n      this.currentPage += 1\r\n      this.setDisabledPrev(this.currentPage)\r\n      // 仅用户交互时触发\r\n      this.$emit('change', this.currentPage, this.currentPageSize)\r\n    },\r\n    normalizePage (value, fallback = 1) {\r\n      const n = toNumber(value)\r\n      if (typeof n !== 'number' || !Number.isFinite(n)) return fallback\r\n      const page = Math.floor(n)\r\n      return page >= 1 ? page : fallback\r\n    },\r\n    normalizePageSize (value, fallback = 10) {\r\n      const n = toNumber(value)\r\n      if (typeof n !== 'number' || !Number.isFinite(n)) return fallback\r\n      const size = Math.floor(n)\r\n      return size >= 1 ? size : fallback\r\n    },\r\n    // props 同步：只更新内部 state，不触发 emit\r\n    syncCurrentFromProps (current) {\r\n      this.currentPage = this.normalizePage(current, 1)\r\n      this.setDisabledPrev(this.currentPage)\r\n    },\r\n    // props 同步：只更新内部 state，不触发 emit\r\n    syncPageSizeFromProps (size) {\r\n      this.currentPageSize = this.normalizePageSize(size, this.currentPageSize || 10)\r\n    }\r\n  },\r\n  destroyed () {\r\n    this.cacheQuery = []\r\n  }\r\n}\r\n</script>\r\n<style lang=\"scss\" scoped>\r\n  @keyframes ani-load-loop {\r\n  0% {\r\n    transform: rotate(0);\r\n  }\r\n  50% {\r\n    transform: rotate(180deg);\r\n  }\r\n  100% {\r\n    transform: rotate(1turn);\r\n  }\r\n}\r\n.ele-page--wrapper {\r\n  width: 100%;\r\n  height: 100%;\r\n  background: transparent;\r\n  border-top: unset;\r\n  padding: 0px 16px 16px 16px;\r\n  box-sizing: border-box;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  justify-content: end;\r\n  /* margin-left: 16px;\r\n  margin-right: 16px; */\r\n  .ele-page--panel {\r\n    width: auto;\r\n    height: 32px;\r\n    display: flex;\r\n    flex-direction: row;\r\n    align-items: center;\r\n    .total {\r\n      .ivu-load-loop {\r\n        color: #409EFF;\r\n        animation: ani-load-loop 1s linear infinite;\r\n      }\r\n      color: rgba(0, 0, 0, 0.88);\r\n      font-family: 'AlibabaPuHuiTi_2_55_Regular';\r\n      font-size: 14px;\r\n      font-weight: 400;\r\n    }\r\n    .page {\r\n      margin-left: 12px;\r\n      display: flex;\r\n      flex-direction: row;\r\n      .home {\r\n        height: auto;\r\n        width: auto;\r\n        color: rgba(0, 0, 0, 0.88);\r\n        padding: 5px 4px 5px 4px;\r\n        text-align: center;\r\n        font-family: 'AlibabaPuHuiTi_2_55_Regular';\r\n        font-size: 14px;\r\n        font-weight: 400;\r\n        border-radius: 2px;\r\n        border: 1px solid rgba(0, 0, 0, 0.16);\r\n        background: #FFF;\r\n        box-sizing: border-box;\r\n        cursor: pointer;\r\n      }\r\n      .page--prev {\r\n        margin-left: 12px;\r\n        cursor: pointer;\r\n        height: 32px;\r\n        width: 32px;\r\n        color: rgba(0, 0, 0, 0.88);\r\n        font-family: 'AlibabaPuHuiTi_2_55_Regular';\r\n        font-size: 14px;\r\n        font-weight: 400;\r\n        border-radius: 2px;\r\n        border: 1px solid rgba(0, 0, 0, 0.16);\r\n        background: #FFF;\r\n        box-sizing: border-box;\r\n        display: flex;\r\n        flex-direction: row;\r\n        align-items: center;\r\n        justify-content: center;\r\n        .ivu-icon-ios-arrow-left {\r\n          font-size: 16px;\r\n        }\r\n      }\r\n      .page--current {\r\n        margin-left: 12px;\r\n        height: 32px;\r\n        width: 32px;\r\n        color: rgba(0, 0, 0, 0.88);\r\n        font-family: 'AlibabaPuHuiTi_2_55_Regular';\r\n        font-size: 14px;\r\n        font-weight: 400;\r\n        border-radius: 2px;\r\n        background: #409EFF;\r\n        box-sizing: border-box;\r\n        display: flex;\r\n        flex-direction: row;\r\n        align-items: center;\r\n        justify-content: center;\r\n        color: #FFF;\r\n      }\r\n      .page--next {\r\n        margin-left: 12px;\r\n        cursor: pointer;\r\n        height: 32px;\r\n        width: 32px;\r\n        color: rgba(0, 0, 0, 0.88);\r\n        font-family: 'AlibabaPuHuiTi_2_55_Regular';\r\n        font-size: 14px;\r\n        font-weight: 400;\r\n        border-radius: 2px;\r\n        border: 1px solid rgba(0, 0, 0, 0.16);\r\n        background: #FFF;\r\n        box-sizing: border-box;\r\n        display: flex;\r\n        flex-direction: row;\r\n        align-items: center;\r\n        justify-content: center;\r\n        .ivu-icon-ios-arrow-right {\r\n          font-size: 16px;\r\n        }\r\n      }\r\n      .page--prev, .page--next {\r\n        &.page-disabled {\r\n          margin-left: 12px;\r\n          height: 32px;\r\n          width: 32px;\r\n          color: rgba(0, 0, 0, 0.88);\r\n          font-family: 'AlibabaPuHuiTi_2_55_Regular';\r\n          font-size: 14px;\r\n          font-weight: 400;\r\n          border-radius: 2px;\r\n          border: 1px solid rgba(0, 0, 0, 0.16);\r\n          background: rgba(0, 0, 0, 0.04);\r\n          box-sizing: border-box;\r\n          display: flex;\r\n          flex-direction: row;\r\n          align-items: center;\r\n          justify-content: center;\r\n          cursor: not-allowed;\r\n        }\r\n      }\r\n    }\r\n    .size {\r\n      width: auto;\r\n      display: flex;\r\n      flex-direction: row;\r\n      margin-left: 12px;\r\n      .ant-select {\r\n        min-width: 91px;\r\n        flex-basis: 91px;\r\n        /* flex-shrink: 0; */\r\n        flex-grow: 1;\r\n      }\r\n    }\r\n  }\r\n}\r\n</style>","@keyframes ani-load-loop {\n  0% {\n    transform: rotate(0);\n  }\n  50% {\n    transform: rotate(180deg);\n  }\n  100% {\n    transform: rotate(1turn);\n  }\n}\n.ele-page--wrapper {\n  width: 100%;\n  height: 100%;\n  background: transparent;\n  border-top: unset;\n  padding: 0px 16px 16px 16px;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: end;\n  /* margin-left: 16px;\n  margin-right: 16px; */\n}\n.ele-page--wrapper .ele-page--panel {\n  width: auto;\n  height: 32px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n.ele-page--wrapper .ele-page--panel .total .ivu-load-loop {\n  color: #409EFF;\n  animation: ani-load-loop 1s linear infinite;\n}\n.ele-page--wrapper .ele-page--panel .total {\n  color: rgba(0, 0, 0, 0.88);\n  font-family: \"AlibabaPuHuiTi_2_55_Regular\";\n  font-size: 14px;\n  font-weight: 400;\n}\n.ele-page--wrapper .ele-page--panel .page {\n  margin-left: 12px;\n  display: flex;\n  flex-direction: row;\n}\n.ele-page--wrapper .ele-page--panel .page .home {\n  height: auto;\n  width: auto;\n  color: rgba(0, 0, 0, 0.88);\n  padding: 5px 4px 5px 4px;\n  text-align: center;\n  font-family: \"AlibabaPuHuiTi_2_55_Regular\";\n  font-size: 14px;\n  font-weight: 400;\n  border-radius: 2px;\n  border: 1px solid rgba(0, 0, 0, 0.16);\n  background: #FFF;\n  box-sizing: border-box;\n  cursor: pointer;\n}\n.ele-page--wrapper .ele-page--panel .page .page--prev {\n  margin-left: 12px;\n  cursor: pointer;\n  height: 32px;\n  width: 32px;\n  color: rgba(0, 0, 0, 0.88);\n  font-family: \"AlibabaPuHuiTi_2_55_Regular\";\n  font-size: 14px;\n  font-weight: 400;\n  border-radius: 2px;\n  border: 1px solid rgba(0, 0, 0, 0.16);\n  background: #FFF;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n}\n.ele-page--wrapper .ele-page--panel .page .page--prev .ivu-icon-ios-arrow-left {\n  font-size: 16px;\n}\n.ele-page--wrapper .ele-page--panel .page .page--current {\n  margin-left: 12px;\n  height: 32px;\n  width: 32px;\n  color: rgba(0, 0, 0, 0.88);\n  font-family: \"AlibabaPuHuiTi_2_55_Regular\";\n  font-size: 14px;\n  font-weight: 400;\n  border-radius: 2px;\n  background: #409EFF;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  color: #FFF;\n}\n.ele-page--wrapper .ele-page--panel .page .page--next {\n  margin-left: 12px;\n  cursor: pointer;\n  height: 32px;\n  width: 32px;\n  color: rgba(0, 0, 0, 0.88);\n  font-family: \"AlibabaPuHuiTi_2_55_Regular\";\n  font-size: 14px;\n  font-weight: 400;\n  border-radius: 2px;\n  border: 1px solid rgba(0, 0, 0, 0.16);\n  background: #FFF;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n}\n.ele-page--wrapper .ele-page--panel .page .page--next .ivu-icon-ios-arrow-right {\n  font-size: 16px;\n}\n.ele-page--wrapper .ele-page--panel .page .page--prev.page-disabled, .ele-page--wrapper .ele-page--panel .page .page--next.page-disabled {\n  margin-left: 12px;\n  height: 32px;\n  width: 32px;\n  color: rgba(0, 0, 0, 0.88);\n  font-family: \"AlibabaPuHuiTi_2_55_Regular\";\n  font-size: 14px;\n  font-weight: 400;\n  border-radius: 2px;\n  border: 1px solid rgba(0, 0, 0, 0.16);\n  background: rgba(0, 0, 0, 0.04);\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  cursor: not-allowed;\n}\n.ele-page--wrapper .ele-page--panel .size {\n  width: auto;\n  display: flex;\n  flex-direction: row;\n  margin-left: 12px;\n}\n.ele-page--wrapper .ele-page--panel .size .ant-select {\n  min-width: 91px;\n  flex-basis: 91px;\n  /* flex-shrink: 0; */\n  flex-grow: 1;\n}\n\n/*# sourceMappingURL=index.vue.map */"]}, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$d = "data-v-15a4e77c";
+  const __vue_scope_id__$d = "data-v-5abb8e86";
   /* module identifier */
   const __vue_module_identifier__$d = undefined;
   /* functional template */