@idooel/components 0.0.3-beta.2 → 0.0.3-beta.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1669,8 +1669,12 @@
|
|
|
1669
1669
|
return !this.dataSource.length;
|
|
1670
1670
|
},
|
|
1671
1671
|
getScrollHeightByHeight: function getScrollHeightByHeight() {
|
|
1672
|
-
//
|
|
1673
|
-
|
|
1672
|
+
// 始终基于稳定的表头/分页高度计算可用区域，避免 fallback 造成内容压到分页区
|
|
1673
|
+
var headerHeight = this.tableHeaderHeight || 64;
|
|
1674
|
+
var paginationHeight = this.paginationHeight || 64;
|
|
1675
|
+
var rawHeight = this.height - headerHeight - paginationHeight;
|
|
1676
|
+
// 规避小数像素导致的 1px 裁切，给表体预留 1px 安全边距
|
|
1677
|
+
return Math.max(Math.floor(rawHeight) - 1, 0);
|
|
1674
1678
|
},
|
|
1675
1679
|
isFlexColumn: function isFlexColumn() {
|
|
1676
1680
|
return this.columns.every(function (col) {
|
|
@@ -1694,12 +1698,45 @@
|
|
|
1694
1698
|
}
|
|
1695
1699
|
return total;
|
|
1696
1700
|
},
|
|
1701
|
+
estimatedMinContentWidth: function estimatedMinContentWidth() {
|
|
1702
|
+
var cols = this.innerColumns || [];
|
|
1703
|
+
var specifiedWidthSum = 0;
|
|
1704
|
+
var unspecifiedCount = 0;
|
|
1705
|
+
cols.forEach(function (col) {
|
|
1706
|
+
var w = col && col.width;
|
|
1707
|
+
if (typeof w === 'number') {
|
|
1708
|
+
specifiedWidthSum += w;
|
|
1709
|
+
} else {
|
|
1710
|
+
unspecifiedCount += 1;
|
|
1711
|
+
}
|
|
1712
|
+
});
|
|
1713
|
+
var selectionWidth = this.rowSelection ? 60 : 0;
|
|
1714
|
+
var operationWidth = this.operations && typeof this.operations.width === 'number' ? this.operations.width : 0;
|
|
1715
|
+
// 未配置宽度列给更保守的最小宽度，贴近运行时真实占宽，
|
|
1716
|
+
// 避免“容器已明显缩小但横向滚动仍不触发”。
|
|
1717
|
+
var unspecifiedMinWidth = unspecifiedCount * 320;
|
|
1718
|
+
return specifiedWidthSum + unspecifiedMinWidth + selectionWidth + operationWidth;
|
|
1719
|
+
},
|
|
1720
|
+
hasIncompleteColumnWidth: function hasIncompleteColumnWidth() {
|
|
1721
|
+
var cols = this.innerColumns || [];
|
|
1722
|
+
if (!cols.length) return false;
|
|
1723
|
+
return cols.some(function (col) {
|
|
1724
|
+
return typeof (col && col.width) !== 'number';
|
|
1725
|
+
});
|
|
1726
|
+
},
|
|
1697
1727
|
/**
|
|
1698
1728
|
* 是否需要横向滚动：容器宽度 < 列总宽度
|
|
1699
1729
|
*/
|
|
1700
1730
|
needHorizontalScroll: function needHorizontalScroll() {
|
|
1701
1731
|
// 未获取容器宽度前，先假定需要滚动（保守策略）
|
|
1702
1732
|
if (!this.containerWidth) return true;
|
|
1733
|
+
// 存在未配置 width 的列时，totalColumnsWidth 会低估真实内容宽度；
|
|
1734
|
+
// 此时改用保守阈值判定，避免误判导致列被压缩变形。
|
|
1735
|
+
if (this.hasIncompleteColumnWidth) {
|
|
1736
|
+
var baseFallbackX = typeof this.x === 'number' ? this.x : 1200;
|
|
1737
|
+
var fallbackX = Math.max(baseFallbackX, this.estimatedMinContentWidth);
|
|
1738
|
+
return this.containerWidth < fallbackX - 5;
|
|
1739
|
+
}
|
|
1703
1740
|
// 加一点容差
|
|
1704
1741
|
return this.containerWidth < this.totalColumnsWidth - 5;
|
|
1705
1742
|
},
|
|
@@ -1730,9 +1767,11 @@
|
|
|
1730
1767
|
*/
|
|
1731
1768
|
smartScroll: function smartScroll() {
|
|
1732
1769
|
if (!this.needHorizontalScroll) {
|
|
1733
|
-
//
|
|
1734
|
-
|
|
1735
|
-
|
|
1770
|
+
// 不需要横向滚动时，只要存在高度约束就下发 y。
|
|
1771
|
+
// 旧逻辑依赖估算行高 needScrollY，遇到多行文本/变高行时会误判，
|
|
1772
|
+
// 导致 body 自然撑高（overflow: visible），内容超出可视区却没有纵向滚动。
|
|
1773
|
+
if (this.height) {
|
|
1774
|
+
var availableHeight = this.getScrollHeightByHeight;
|
|
1736
1775
|
if (availableHeight > 50) {
|
|
1737
1776
|
return {
|
|
1738
1777
|
y: availableHeight
|
|
@@ -1741,8 +1780,20 @@
|
|
|
1741
1780
|
}
|
|
1742
1781
|
return {};
|
|
1743
1782
|
}
|
|
1744
|
-
//
|
|
1745
|
-
|
|
1783
|
+
// 需要横向滚动时，若未设置 y，会导致横向滚动条落在超高表体底部，
|
|
1784
|
+
// 外层容器 overflow:hidden 场景下用户看不到滚动条。
|
|
1785
|
+
// 这里在有高度约束时强制注入 y，保证横向滚动条始终在可视区域内。
|
|
1786
|
+
var baseScroll = this.getScroll || {};
|
|
1787
|
+
if (this.height && (baseScroll.y === undefined || baseScroll.y === null)) {
|
|
1788
|
+
var _availableHeight = this.getScrollHeightByHeight;
|
|
1789
|
+
if (_availableHeight > 50) {
|
|
1790
|
+
return _objectSpread2(_objectSpread2({}, baseScroll), {}, {
|
|
1791
|
+
y: _availableHeight
|
|
1792
|
+
});
|
|
1793
|
+
}
|
|
1794
|
+
}
|
|
1795
|
+
// 需要横向滚动，其他情况使用原有逻辑
|
|
1796
|
+
return baseScroll;
|
|
1746
1797
|
},
|
|
1747
1798
|
/**
|
|
1748
1799
|
* 智能 rowSelection 配置：
|
|
@@ -1782,14 +1833,22 @@
|
|
|
1782
1833
|
// rowSelection 的 checkbox/radio 列是 antd 自动加的，给一个经验宽度避免误差
|
|
1783
1834
|
var selectionWidth = this.rowSelection ? 60 : 0;
|
|
1784
1835
|
|
|
1785
|
-
//
|
|
1786
|
-
|
|
1836
|
+
// 只有所有列都明确给了 width 时才 clamp，避免低估导致表格被挤压
|
|
1837
|
+
var allColsHaveWidth = cols.length > 0 && cols.every(function (col) {
|
|
1838
|
+
return typeof (col && col.width) === 'number';
|
|
1839
|
+
});
|
|
1840
|
+
if (allColsHaveWidth && total > 0) {
|
|
1787
1841
|
var minX = total + selectionWidth;
|
|
1788
1842
|
if (baseX > minX) baseX = minX;
|
|
1789
1843
|
}
|
|
1844
|
+
// 存在未配置宽度列时，x 至少取估算最小内容宽度，
|
|
1845
|
+
// 避免出现 needHorizontalScroll=true 但 scrollWidth==clientWidth 的“无滚动条”状态。
|
|
1846
|
+
if (this.hasIncompleteColumnWidth) {
|
|
1847
|
+
baseX = Math.max(baseX, this.estimatedMinContentWidth);
|
|
1848
|
+
}
|
|
1790
1849
|
}
|
|
1791
1850
|
if (this.height && this.needScrollY) {
|
|
1792
|
-
var availableHeight = this.
|
|
1851
|
+
var availableHeight = this.getScrollHeightByHeight;
|
|
1793
1852
|
if (availableHeight > 50) {
|
|
1794
1853
|
return {
|
|
1795
1854
|
x: baseX,
|
|
@@ -1846,7 +1905,7 @@
|
|
|
1846
1905
|
setTableHeaderHeight: function setTableHeaderHeight() {
|
|
1847
1906
|
var _this3 = this;
|
|
1848
1907
|
this.$nextTick(function () {
|
|
1849
|
-
var el = _this3.$el.querySelector('.ant-table-header');
|
|
1908
|
+
var el = _this3.$el.querySelector('.ant-table-header') || _this3.$el.querySelector('.ant-table-thead');
|
|
1850
1909
|
if (!el) return;
|
|
1851
1910
|
var _el$getBoundingClient2 = el.getBoundingClientRect(),
|
|
1852
1911
|
height = _el$getBoundingClient2.height;
|
|
@@ -1978,13 +2037,16 @@
|
|
|
1978
2037
|
var _iterator = _createForOfIteratorHelper(entries),
|
|
1979
2038
|
_step;
|
|
1980
2039
|
try {
|
|
1981
|
-
|
|
2040
|
+
for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
|
1982
2041
|
var entry = _step.value;
|
|
1983
2042
|
var newWidth = entry.contentRect.width;
|
|
2043
|
+
var delta = Math.abs(newWidth - _this8.containerWidth);
|
|
2044
|
+
var oldNeedScroll = _this8.needHorizontalScroll;
|
|
2045
|
+
// 始终更新容器宽度，避免临界区被阈值过滤后状态滞留。
|
|
2046
|
+
_this8.containerWidth = newWidth;
|
|
2047
|
+
var newNeedScroll = _this8.needHorizontalScroll;
|
|
1984
2048
|
// 只有宽度变化超过阈值才触发更新，避免微小变化导致频繁重渲染
|
|
1985
|
-
if (
|
|
1986
|
-
var oldNeedScroll = _this8.needHorizontalScroll;
|
|
1987
|
-
_this8.containerWidth = newWidth;
|
|
2049
|
+
if (delta > 10 || newNeedScroll !== oldNeedScroll) {
|
|
1988
2050
|
// 容器宽度变化会触发 needHorizontalScroll 的重新计算
|
|
1989
2051
|
// needHorizontalScroll 的 watcher 会处理表格重新渲染和列宽同步
|
|
1990
2052
|
// 这里不需要直接调用 syncFixedColumns，避免与 watcher 的执行时机冲突
|
|
@@ -1998,23 +2060,18 @@
|
|
|
1998
2060
|
});
|
|
1999
2061
|
|
|
2000
2062
|
// 如果 needHorizontalScroll 状态没有变化，说明只是列宽需要调整，直接同步
|
|
2001
|
-
//
|
|
2002
|
-
|
|
2003
|
-
|
|
2004
|
-
|
|
2005
|
-
clearTimeout(_this8._resizeDebounceTimer);
|
|
2006
|
-
}
|
|
2007
|
-
_this8._resizeDebounceTimer = setTimeout(function () {
|
|
2008
|
-
_this8.syncFixedColumns();
|
|
2009
|
-
_this8.syncHeaderTableWidth();
|
|
2010
|
-
_this8.bindScrollSync();
|
|
2011
|
-
}, 150);
|
|
2063
|
+
// 状态变化时 watcher 会重渲染，但这里仍补一次同步，避免出现
|
|
2064
|
+
// “缩小后没滚动，刷新后才出现”的时序窗口。
|
|
2065
|
+
if (_this8._resizeDebounceTimer) {
|
|
2066
|
+
clearTimeout(_this8._resizeDebounceTimer);
|
|
2012
2067
|
}
|
|
2068
|
+
_this8._resizeDebounceTimer = setTimeout(function () {
|
|
2069
|
+
_this8.syncFixedColumns();
|
|
2070
|
+
_this8.syncHeaderTableWidth();
|
|
2071
|
+
_this8.bindScrollSync();
|
|
2072
|
+
}, 150);
|
|
2013
2073
|
});
|
|
2014
2074
|
}
|
|
2015
|
-
};
|
|
2016
|
-
for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
|
2017
|
-
_loop();
|
|
2018
2075
|
}
|
|
2019
2076
|
} catch (err) {
|
|
2020
2077
|
_iterator.e(err);
|
|
@@ -2091,7 +2148,12 @@
|
|
|
2091
2148
|
return _c("div", {
|
|
2092
2149
|
ref: "tableWrapper",
|
|
2093
2150
|
staticClass: "g-table__wrapper",
|
|
2151
|
+
class: {
|
|
2152
|
+
"g-table__wrapper--need-h-scroll": _vm.needHorizontalScroll
|
|
2153
|
+
},
|
|
2094
2154
|
style: _vm.wrapperStyle
|
|
2155
|
+
}, [_c("div", {
|
|
2156
|
+
staticClass: "g-table__main"
|
|
2095
2157
|
}, [_c("a-table", {
|
|
2096
2158
|
key: _vm.tableRenderKey,
|
|
2097
2159
|
class: [_vm.isNoData && "g-table__no-data"],
|
|
@@ -2117,7 +2179,7 @@
|
|
|
2117
2179
|
}, _vm.$listeners))];
|
|
2118
2180
|
}
|
|
2119
2181
|
}])
|
|
2120
|
-
}), _vm._v(" "), _c("div", {
|
|
2182
|
+
})], 1), _vm._v(" "), _c("div", {
|
|
2121
2183
|
staticClass: "g-table__pagination"
|
|
2122
2184
|
}, [_vm.mode === "default" ? _c("a-pagination", {
|
|
2123
2185
|
attrs: {
|
|
@@ -2146,7 +2208,7 @@
|
|
|
2146
2208
|
change: _vm.onChangePagination,
|
|
2147
2209
|
showSizeChange: _vm.onShowSizeChange
|
|
2148
2210
|
}
|
|
2149
|
-
})], 1)]
|
|
2211
|
+
})], 1)]);
|
|
2150
2212
|
};
|
|
2151
2213
|
var __vue_staticRenderFns__$D = [];
|
|
2152
2214
|
__vue_render__$D._withStripped = true;
|
|
@@ -2154,21 +2216,21 @@
|
|
|
2154
2216
|
/* style */
|
|
2155
2217
|
var __vue_inject_styles__$D = function __vue_inject_styles__(inject) {
|
|
2156
2218
|
if (!inject) return;
|
|
2157
|
-
inject("data-v-
|
|
2158
|
-
source: "@charset \"UTF-8\";\n.g-table__wrapper[data-v-
|
|
2219
|
+
inject("data-v-6cef17bc_0", {
|
|
2220
|
+
source: "@charset \"UTF-8\";\n.g-table__wrapper[data-v-6cef17bc] {\n display: flex;\n flex-direction: column;\n min-height: 0;\n}\n.g-table__wrapper .g-table__main[data-v-6cef17bc] {\n flex: 1;\n min-height: 0;\n overflow: hidden;\n}\n.g-table__wrapper[data-v-6cef17bc] {\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-6cef17bc]:not(.g-table__wrapper--need-h-scroll) .ant-table-scroll .ant-table-header table,\n.g-table__wrapper[data-v-6cef17bc]:not(.g-table__wrapper--need-h-scroll) .ant-table-scroll .ant-table-body table {\n min-width: 100%;\n}\n.g-table__wrapper[data-v-6cef17bc] {\n /**\n * 修复\"固定列 + scroll.x\"场景下，主表(ant-table-scroll)里会渲染一份 fixed 列的占位 header/cell。\n * 这份占位本来只用于计算宽度，但在某些布局下会被看见，表现为\"操作列前多了一大块空白/空列\"。\n * 这里用 visibility:hidden 隐藏占位（不影响占位宽度与 fixed 计算），避免视觉空白。\n */\n}\n.g-table__wrapper[data-v-6cef17bc] .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-6cef17bc] .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-6cef17bc] {\n /* 强制统一行高，确保主表和固定列对齐 */\n}\n.g-table__wrapper[data-v-6cef17bc] .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-6cef17bc] {\n /* 表头也统一高度和样式 */\n}\n.g-table__wrapper[data-v-6cef17bc] .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-6cef17bc] {\n /* 分页区域固定在底部 */\n}\n.g-table__wrapper .g-table__pagination[data-v-6cef17bc] {\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-6cef17bc] {\n /* 空数据状态顶部显示 */\n}\n.g-table__wrapper .g-table__no-data[data-v-6cef17bc] {\n position: relative;\n}\n.g-table__wrapper .g-table__no-data[data-v-6cef17bc] .ant-table-placeholder > td {\n height: auto !important;\n line-height: normal !important;\n padding-top: 24px !important;\n padding-bottom: 24px !important;\n}\n.g-table__wrapper .g-table__no-data[data-v-6cef17bc] .ant-table-placeholder {\n position: static;\n width: auto;\n height: auto;\n text-align: center;\n color: #999;\n font-size: 14px;\n font-weight: normal;\n line-height: 20px;\n overflow: visible;\n border: unset;\n}\n\n/*# sourceMappingURL=index.vue.map */",
|
|
2159
2221
|
map: {
|
|
2160
2222
|
"version": 3,
|
|
2161
2223
|
"sources": ["index.vue", "E:\\code\\OnlineStudy-Base\\base-elearning-frontend-model\\packages\\components\\packages\\table\\src\\index.vue"],
|
|
2162
2224
|
"names": [],
|
|
2163
|
-
"mappings": "AAAA,gBAAgB;
|
|
2225
|
+
"mappings": "AAAA,gBAAgB;ACwkBhB;EACA,aAAA;EACA,sBAAA;EACA,aAAA;ADtkBA;ACwkBA;EACA,OAAA;EACA,aAAA;EACA,gBAAA;ADtkBA;AC8jBA;EAWA;;;;;IAAA;ADjkBA;ACwkBA;;EAEA,eAAA;ADtkBA;ACkjBA;EAwBA;;;;IAAA;ADnkBA;ACwkBA;;EAEA,kBAAA;ADtkBA;ACuiBA;EAkCA,sBAAA;ADtkBA;ACukBA;EACA,YAAA;EACA,iBAAA;EACA,sBAAA;EACA,sBAAA;EACA,iBAAA;ADrkBA;AC6hBA;EA2CA,eAAA;ADrkBA;ACskBA;EACA,YAAA;EACA,iBAAA;EACA,sBAAA;EACA,sBAAA;EACA,iBAAA;ADpkBA;ACmhBA;EAoDA,cAAA;ADpkBA;ACqkBA;EACA,aAAA;EACA,mBAAA;EACA,oBAAA;EACA,iBAAA;EACA,gBAAA;EACA,mBAAA;EACA,gBAAA;ADnkBA;ACugBA;EA+DA,cAAA;ADnkBA;ACokBA;EACA,kBAAA;ADlkBA;ACmkBA;EACA,uBAAA;EACA,8BAAA;EACA,4BAAA;EACA,+BAAA;ADjkBA;ACmkBA;EACA,gBAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,WAAA;EACA,eAAA;EACA,mBAAA;EACA,iBAAA;EACA,iBAAA;EACA,aAAA;ADjkBA;;AAEA,oCAAoC",
|
|
2164
2226
|
"file": "index.vue",
|
|
2165
|
-
"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 @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>"]
|
|
2227
|
+
"sourcesContent": ["@charset \"UTF-8\";\n.g-table__wrapper {\n display: flex;\n flex-direction: column;\n min-height: 0;\n}\n.g-table__wrapper .g-table__main {\n flex: 1;\n min-height: 0;\n overflow: hidden;\n}\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:not(.g-table__wrapper--need-h-scroll) ::v-deep .ant-table-scroll .ant-table-header table,\n.g-table__wrapper:not(.g-table__wrapper--need-h-scroll) ::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 > td {\n height: auto !important;\n line-height: normal !important;\n padding-top: 24px !important;\n padding-bottom: 24px !important;\n}\n.g-table__wrapper .g-table__no-data ::v-deep .ant-table-placeholder {\n position: static;\n width: auto;\n height: auto;\n text-align: center;\n color: #999;\n font-size: 14px;\n font-weight: normal;\n line-height: 20px;\n overflow: visible;\n border: unset;\n}\n\n/*# sourceMappingURL=index.vue.map */", "<template>\r\n <div class=\"g-table__wrapper\" :class=\"{ 'g-table__wrapper--need-h-scroll': needHorizontalScroll }\" ref=\"tableWrapper\" :style=\"wrapperStyle\">\r\n <div class=\"g-table__main\">\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>\r\n <div class=\"g-table__pagination\">\r\n <a-pagination\r\n :show-total=\"all => `共 ${all} 条数据`\"\r\n v-if=\"mode === 'default'\"\r\n show-size-changer \r\n show-quick-jumper\r\n :pageSize=\"innerPageSize\"\r\n :current=\"innerCurrentPage\"\r\n :pageSizeOptions=\"pageSizeOptions\"\r\n @change=\"onChangePagination\"\r\n @showSizeChange=\"onShowSizeChange\"\r\n :total=\"total\">\r\n </a-pagination>\r\n <ele-pagination\r\n v-else\r\n :pageSize=\"innerPageSize\"\r\n :current=\"innerCurrentPage\"\r\n :pageSizeOptions=\"pageSizeOptions\"\r\n @change=\"onChangePagination\"\r\n @showSizeChange=\"onShowSizeChange\"\r\n :total=\"total\"\r\n ></ele-pagination>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport Actions from './action.vue'\r\nexport default {\r\n name: 'ele-table',\r\n components: {\r\n Actions\r\n },\r\n props: {\r\n mode: {\r\n type: String,\r\n default: 'default',\r\n validator: (value) => {\r\n return ['default', 'next-cursor'].includes(value)\r\n }\r\n },\r\n // ant table wrapper\r\n height: {\r\n type: Number\r\n },\r\n width: {\r\n type: Number\r\n },\r\n x: {\r\n // 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 // 始终基于稳定的表头/分页高度计算可用区域，避免 fallback 造成内容压到分页区\r\n const headerHeight = this.tableHeaderHeight || 64\r\n const paginationHeight = this.paginationHeight || 64\r\n const rawHeight = this.height - headerHeight - paginationHeight\r\n // 规避小数像素导致的 1px 裁切，给表体预留 1px 安全边距\r\n return Math.max(Math.floor(rawHeight) - 1, 0)\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 estimatedMinContentWidth () {\r\n const cols = this.innerColumns || []\r\n let specifiedWidthSum = 0\r\n let unspecifiedCount = 0\r\n cols.forEach(col => {\r\n const w = col && col.width\r\n if (typeof w === 'number') {\r\n specifiedWidthSum += w\r\n } else {\r\n unspecifiedCount += 1\r\n }\r\n })\r\n const selectionWidth = this.rowSelection ? 60 : 0\r\n const operationWidth = (this.operations && typeof this.operations.width === 'number') ? this.operations.width : 0\r\n // 未配置宽度列给更保守的最小宽度，贴近运行时真实占宽，\r\n // 避免“容器已明显缩小但横向滚动仍不触发”。\r\n const unspecifiedMinWidth = unspecifiedCount * 320\r\n return specifiedWidthSum + unspecifiedMinWidth + selectionWidth + operationWidth\r\n },\r\n hasIncompleteColumnWidth () {\r\n const cols = this.innerColumns || []\r\n if (!cols.length) return false\r\n return cols.some(col => typeof (col && col.width) !== 'number')\r\n },\r\n /**\r\n * 是否需要横向滚动：容器宽度 < 列总宽度\r\n */\r\n needHorizontalScroll () {\r\n // 未获取容器宽度前，先假定需要滚动（保守策略）\r\n if (!this.containerWidth) return true\r\n // 存在未配置 width 的列时，totalColumnsWidth 会低估真实内容宽度；\r\n // 此时改用保守阈值判定，避免误判导致列被压缩变形。\r\n if (this.hasIncompleteColumnWidth) {\r\n const baseFallbackX = typeof this.x === 'number' ? this.x : 1200\r\n const fallbackX = Math.max(baseFallbackX, this.estimatedMinContentWidth)\r\n return this.containerWidth < fallbackX - 5\r\n }\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 // 旧逻辑依赖估算行高 needScrollY，遇到多行文本/变高行时会误判，\r\n // 导致 body 自然撑高（overflow: visible），内容超出可视区却没有纵向滚动。\r\n if (this.height) {\r\n const availableHeight = this.getScrollHeightByHeight\r\n if (availableHeight > 50) {\r\n return { y: availableHeight }\r\n }\r\n }\r\n return {}\r\n }\r\n // 需要横向滚动时，若未设置 y，会导致横向滚动条落在超高表体底部，\r\n // 外层容器 overflow:hidden 场景下用户看不到滚动条。\r\n // 这里在有高度约束时强制注入 y，保证横向滚动条始终在可视区域内。\r\n const baseScroll = this.getScroll || {}\r\n if (this.height && (baseScroll.y === undefined || baseScroll.y === null)) {\r\n const availableHeight = this.getScrollHeightByHeight\r\n if (availableHeight > 50) {\r\n return { ...baseScroll, y: availableHeight }\r\n }\r\n }\r\n // 需要横向滚动，其他情况使用原有逻辑\r\n return baseScroll\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 // 只有所有列都明确给了 width 时才 clamp，避免低估导致表格被挤压\r\n const allColsHaveWidth = cols.length > 0 && cols.every(col => typeof (col && col.width) === 'number')\r\n if (allColsHaveWidth && total > 0) {\r\n const minX = total + selectionWidth\r\n if (baseX > minX) baseX = minX\r\n }\r\n // 存在未配置宽度列时，x 至少取估算最小内容宽度，\r\n // 避免出现 needHorizontalScroll=true 但 scrollWidth==clientWidth 的“无滚动条”状态。\r\n if (this.hasIncompleteColumnWidth) {\r\n baseX = Math.max(baseX, this.estimatedMinContentWidth)\r\n }\r\n }\r\n if (this.height && this.needScrollY) {\r\n const availableHeight = this.getScrollHeightByHeight\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') || this.$el.querySelector('.ant-table-thead')\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 const delta = Math.abs(newWidth - this.containerWidth)\r\n const oldNeedScroll = this.needHorizontalScroll\r\n // 始终更新容器宽度，避免临界区被阈值过滤后状态滞留。\r\n this.containerWidth = newWidth\r\n const newNeedScroll = this.needHorizontalScroll\r\n // 只有宽度变化超过阈值才触发更新，避免微小变化导致频繁重渲染\r\n if (delta > 10 || newNeedScroll !== oldNeedScroll) {\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 // “缩小后没滚动，刷新后才出现”的时序窗口。\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 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 display: flex;\r\n flex-direction: column;\r\n min-height: 0;\r\n\r\n .g-table__main {\r\n flex: 1;\r\n min-height: 0;\r\n overflow: hidden;\r\n }\r\n\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 &:not(.g-table__wrapper--need-h-scroll) {\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 /**\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 > td {\r\n height: auto !important;\r\n line-height: normal !important;\r\n padding-top: 24px !important;\r\n padding-bottom: 24px !important;\r\n }\r\n ::v-deep .ant-table-placeholder {\r\n position: static;\r\n width: auto;\r\n height: auto;\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: visible;\r\n border: unset;\r\n }\r\n }\r\n}\r\n</style>"]
|
|
2166
2228
|
},
|
|
2167
2229
|
media: undefined
|
|
2168
2230
|
});
|
|
2169
2231
|
};
|
|
2170
2232
|
/* scoped */
|
|
2171
|
-
var __vue_scope_id__$D = "data-v-
|
|
2233
|
+
var __vue_scope_id__$D = "data-v-6cef17bc";
|
|
2172
2234
|
/* module identifier */
|
|
2173
2235
|
var __vue_module_identifier__$D = undefined;
|
|
2174
2236
|
/* functional template */
|
|
@@ -2467,6 +2529,7 @@
|
|
|
2467
2529
|
tableQuerys: {},
|
|
2468
2530
|
resizeObserverModelTableWrapper: null,
|
|
2469
2531
|
resizeObserverModelTableContainer: null,
|
|
2532
|
+
resizeObserverSearchArea: null,
|
|
2470
2533
|
modelTableWrapperHeight: 0,
|
|
2471
2534
|
currentTreeNodeData: {},
|
|
2472
2535
|
currentRowData: {},
|
|
@@ -3508,7 +3571,7 @@
|
|
|
3508
3571
|
}
|
|
3509
3572
|
}, _callee8);
|
|
3510
3573
|
}))();
|
|
3511
|
-
}), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_methods$1, "requestTableData", function requestTableData() {
|
|
3574
|
+
}), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_methods$1, "requestTableData", function requestTableData() {
|
|
3512
3575
|
var _arguments = arguments,
|
|
3513
3576
|
_this19 = this;
|
|
3514
3577
|
return _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee9() {
|
|
@@ -3605,18 +3668,8 @@
|
|
|
3605
3668
|
width = _tableRef$$el$getBoun.width;
|
|
3606
3669
|
this.tableWidth = width;
|
|
3607
3670
|
|
|
3608
|
-
//
|
|
3609
|
-
var
|
|
3610
|
-
var paginationEl = tableRef.$el.querySelector('.g-table__pagination');
|
|
3611
|
-
if (paginationEl) {
|
|
3612
|
-
paginationHeight = paginationEl.getBoundingClientRect().height || 50;
|
|
3613
|
-
} else {
|
|
3614
|
-
// 如果分页组件还未渲染，使用默认高度
|
|
3615
|
-
paginationHeight = 50;
|
|
3616
|
-
}
|
|
3617
|
-
|
|
3618
|
-
// 计算表格高度：视口高度 - 表格顶部距离 - 分页高度 - 额外高度
|
|
3619
|
-
var calculatedHeight = currentViewportHeight - tableToTop - paginationHeight - this.overHeight - 20;
|
|
3671
|
+
// 计算表格高度：外层容器高度应覆盖到视口底部；分页高度由 ele-table 内部自行扣减
|
|
3672
|
+
var calculatedHeight = currentViewportHeight - tableToTop - this.overHeight;
|
|
3620
3673
|
// 确保最小高度，避免表格过小
|
|
3621
3674
|
this.tableHeight = Math.max(calculatedHeight, 200);
|
|
3622
3675
|
}), "calculateTreeHeight", function calculateTreeHeight() {
|
|
@@ -3634,45 +3687,70 @@
|
|
|
3634
3687
|
var titleHeight = titleEl.getBoundingClientRect().height;
|
|
3635
3688
|
this.treeWrapperHeight = height - titleHeight;
|
|
3636
3689
|
}
|
|
3637
|
-
}), "
|
|
3690
|
+
}), "observeSearchAreaHeight", function observeSearchAreaHeight() {
|
|
3638
3691
|
var _this20 = this;
|
|
3692
|
+
var searchAreaRef = this.$refs[this.searchArea];
|
|
3693
|
+
var searchAreaEl = searchAreaRef && searchAreaRef.$el;
|
|
3694
|
+
if (!searchAreaEl || typeof ResizeObserver === 'undefined') return;
|
|
3695
|
+
this.resizeObserverSearchArea = new ResizeObserver(function (entries) {
|
|
3696
|
+
var _iterator = _createForOfIteratorHelper(entries),
|
|
3697
|
+
_step;
|
|
3698
|
+
try {
|
|
3699
|
+
for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
|
3700
|
+
var entry = _step.value;
|
|
3701
|
+
requestAnimationFrame(function () {
|
|
3702
|
+
_this20.calculateTableHeight();
|
|
3703
|
+
if (_this20.showTree) {
|
|
3704
|
+
_this20.calculateTreeHeight();
|
|
3705
|
+
}
|
|
3706
|
+
});
|
|
3707
|
+
}
|
|
3708
|
+
} catch (err) {
|
|
3709
|
+
_iterator.e(err);
|
|
3710
|
+
} finally {
|
|
3711
|
+
_iterator.f();
|
|
3712
|
+
}
|
|
3713
|
+
});
|
|
3714
|
+
this.resizeObserverSearchArea.observe(searchAreaEl);
|
|
3715
|
+
}), "keepAliveRefresh", function keepAliveRefresh() {
|
|
3716
|
+
var _this21 = this;
|
|
3639
3717
|
return _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee1() {
|
|
3640
3718
|
return _regenerator().w(function (_context1) {
|
|
3641
3719
|
while (1) switch (_context1.n) {
|
|
3642
3720
|
case 0:
|
|
3643
|
-
return _context1.a(2,
|
|
3644
|
-
var
|
|
3721
|
+
return _context1.a(2, _this21.withPerformanceMonitoring('keepAliveRefresh', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee0() {
|
|
3722
|
+
var _this21$tableMeta$ove, overrideInit;
|
|
3645
3723
|
return _regenerator().w(function (_context0) {
|
|
3646
3724
|
while (1) switch (_context0.n) {
|
|
3647
3725
|
case 0:
|
|
3648
3726
|
// 重新计算表格高度（应对窗口大小变化）
|
|
3649
|
-
|
|
3727
|
+
_this21.$nextTick(function () {
|
|
3650
3728
|
setTimeout(function () {
|
|
3651
|
-
|
|
3652
|
-
if (
|
|
3653
|
-
|
|
3729
|
+
_this21.calculateTableHeight();
|
|
3730
|
+
if (_this21.showTree) {
|
|
3731
|
+
_this21.calculateTreeHeight();
|
|
3654
3732
|
}
|
|
3655
3733
|
}, 200);
|
|
3656
3734
|
});
|
|
3657
3735
|
|
|
3658
3736
|
// 刷新列表数据
|
|
3659
|
-
|
|
3737
|
+
_this21$tableMeta$ove = _this21.tableMeta.overrideInit, overrideInit = _this21$tableMeta$ove === void 0 ? false : _this21$tableMeta$ove;
|
|
3660
3738
|
if (!overrideInit) {
|
|
3661
3739
|
_context0.n = 1;
|
|
3662
3740
|
break;
|
|
3663
3741
|
}
|
|
3664
3742
|
// 如果使用自定义初始化模式，触发 INIT 事件
|
|
3665
|
-
|
|
3743
|
+
_this21.$emit(RESERVE_EVENT_NAMES.INIT, _objectSpread2({}, _this21.exposed));
|
|
3666
3744
|
_context0.n = 2;
|
|
3667
3745
|
break;
|
|
3668
3746
|
case 1:
|
|
3669
3747
|
_context0.n = 2;
|
|
3670
|
-
return
|
|
3748
|
+
return _this21.requestTableData(_this21.tableQuerys);
|
|
3671
3749
|
case 2:
|
|
3672
|
-
|
|
3673
|
-
tableData:
|
|
3674
|
-
treeData:
|
|
3675
|
-
currentRowData:
|
|
3750
|
+
_this21.$emit('x:refresh-completed', {
|
|
3751
|
+
tableData: _this21.tableData,
|
|
3752
|
+
treeData: _this21.treeData,
|
|
3753
|
+
currentRowData: _this21.currentRowData
|
|
3676
3754
|
});
|
|
3677
3755
|
case 3:
|
|
3678
3756
|
return _context0.a(2);
|
|
@@ -3684,7 +3762,7 @@
|
|
|
3684
3762
|
}))();
|
|
3685
3763
|
})),
|
|
3686
3764
|
mounted: function mounted() {
|
|
3687
|
-
var
|
|
3765
|
+
var _this22 = this;
|
|
3688
3766
|
// 初始化时先设置一个默认高度，避免布局混乱
|
|
3689
3767
|
this.tableHeight = 400;
|
|
3690
3768
|
if (this.showTree) {
|
|
@@ -3694,32 +3772,33 @@
|
|
|
3694
3772
|
// 延迟计算，确保所有组件都已渲染
|
|
3695
3773
|
this.$nextTick(function () {
|
|
3696
3774
|
setTimeout(function () {
|
|
3697
|
-
|
|
3698
|
-
|
|
3775
|
+
_this22.calculateTableHeight();
|
|
3776
|
+
_this22.calculateTreeHeight();
|
|
3777
|
+
_this22.observeSearchAreaHeight();
|
|
3699
3778
|
}, 200);
|
|
3700
3779
|
});
|
|
3701
3780
|
|
|
3702
3781
|
// 使用 ResizeObserver 监听容器大小变化
|
|
3703
3782
|
this.resizeObserverModelTableWrapper = new ResizeObserver(function (entries) {
|
|
3704
|
-
var
|
|
3705
|
-
|
|
3783
|
+
var _iterator2 = _createForOfIteratorHelper(entries),
|
|
3784
|
+
_step2;
|
|
3706
3785
|
try {
|
|
3707
|
-
for (
|
|
3708
|
-
var _ =
|
|
3786
|
+
for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
|
|
3787
|
+
var _ = _step2.value;
|
|
3709
3788
|
requestAnimationFrame(function () {
|
|
3710
3789
|
// 延迟重新计算，确保分页组件高度已更新
|
|
3711
3790
|
setTimeout(function () {
|
|
3712
|
-
|
|
3713
|
-
if (
|
|
3714
|
-
|
|
3791
|
+
_this22.calculateTableHeight();
|
|
3792
|
+
if (_this22.showTree) {
|
|
3793
|
+
_this22.calculateTreeHeight();
|
|
3715
3794
|
}
|
|
3716
3795
|
}, 100);
|
|
3717
3796
|
});
|
|
3718
3797
|
}
|
|
3719
3798
|
} catch (err) {
|
|
3720
|
-
|
|
3799
|
+
_iterator2.e(err);
|
|
3721
3800
|
} finally {
|
|
3722
|
-
|
|
3801
|
+
_iterator2.f();
|
|
3723
3802
|
}
|
|
3724
3803
|
});
|
|
3725
3804
|
if (this.$refs[this.modelTableWrapper]) {
|
|
@@ -3729,19 +3808,19 @@
|
|
|
3729
3808
|
// 监听表格容器大小变化（用于同步树高度）
|
|
3730
3809
|
if (this.showTree && this.$refs[this.modelTableContainerRef]) {
|
|
3731
3810
|
this.resizeObserverModelTableContainer = new ResizeObserver(function (entries) {
|
|
3732
|
-
var
|
|
3733
|
-
|
|
3811
|
+
var _iterator3 = _createForOfIteratorHelper(entries),
|
|
3812
|
+
_step3;
|
|
3734
3813
|
try {
|
|
3735
|
-
for (
|
|
3736
|
-
var _ =
|
|
3814
|
+
for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
|
|
3815
|
+
var _ = _step3.value;
|
|
3737
3816
|
requestAnimationFrame(function () {
|
|
3738
|
-
|
|
3817
|
+
_this22.calculateTreeHeight();
|
|
3739
3818
|
});
|
|
3740
3819
|
}
|
|
3741
3820
|
} catch (err) {
|
|
3742
|
-
|
|
3821
|
+
_iterator3.e(err);
|
|
3743
3822
|
} finally {
|
|
3744
|
-
|
|
3823
|
+
_iterator3.f();
|
|
3745
3824
|
}
|
|
3746
3825
|
});
|
|
3747
3826
|
this.resizeObserverModelTableContainer.observe(this.$refs[this.modelTableContainerRef]);
|
|
@@ -3749,11 +3828,11 @@
|
|
|
3749
3828
|
|
|
3750
3829
|
// 监听窗口大小变化
|
|
3751
3830
|
this.handleResize = function () {
|
|
3752
|
-
|
|
3831
|
+
_this22.$nextTick(function () {
|
|
3753
3832
|
setTimeout(function () {
|
|
3754
|
-
|
|
3755
|
-
if (
|
|
3756
|
-
|
|
3833
|
+
_this22.calculateTableHeight();
|
|
3834
|
+
if (_this22.showTree) {
|
|
3835
|
+
_this22.calculateTreeHeight();
|
|
3757
3836
|
}
|
|
3758
3837
|
}, 100);
|
|
3759
3838
|
});
|
|
@@ -3767,6 +3846,9 @@
|
|
|
3767
3846
|
if (this.resizeObserverModelTableContainer) {
|
|
3768
3847
|
this.resizeObserverModelTableContainer.disconnect();
|
|
3769
3848
|
}
|
|
3849
|
+
if (this.resizeObserverSearchArea) {
|
|
3850
|
+
this.resizeObserverSearchArea.disconnect();
|
|
3851
|
+
}
|
|
3770
3852
|
if (this.handleResize) {
|
|
3771
3853
|
window.removeEventListener('resize', this.handleResize);
|
|
3772
3854
|
}
|
|
@@ -3778,13 +3860,13 @@
|
|
|
3778
3860
|
}
|
|
3779
3861
|
},
|
|
3780
3862
|
activated: function activated() {
|
|
3781
|
-
var
|
|
3863
|
+
var _this23 = this;
|
|
3782
3864
|
return _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee10() {
|
|
3783
3865
|
return _regenerator().w(function (_context10) {
|
|
3784
3866
|
while (1) switch (_context10.n) {
|
|
3785
3867
|
case 0:
|
|
3786
3868
|
_context10.n = 1;
|
|
3787
|
-
return
|
|
3869
|
+
return _this23.keepAliveRefresh();
|
|
3788
3870
|
case 1:
|
|
3789
3871
|
return _context10.a(2);
|
|
3790
3872
|
}
|
|
@@ -3920,21 +4002,21 @@
|
|
|
3920
4002
|
/* style */
|
|
3921
4003
|
var __vue_inject_styles__$B = function __vue_inject_styles__(inject) {
|
|
3922
4004
|
if (!inject) return;
|
|
3923
|
-
inject("data-v-
|
|
3924
|
-
source: ".ele.model__tree-table[data-v-
|
|
4005
|
+
inject("data-v-08876ae3_0", {
|
|
4006
|
+
source: ".ele.model__tree-table[data-v-08876ae3] {\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-08876ae3] {\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-08876ae3] {\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-08876ae3] {\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-08876ae3] {\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-08876ae3] {\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-08876ae3] {\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-08876ae3] {\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-08876ae3] {\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-08876ae3] {\n cursor: pointer;\n color: var(--idooel-primary-color);\n}\n\n/*# sourceMappingURL=index.vue.map */",
|
|
3925
4007
|
map: {
|
|
3926
4008
|
"version": 3,
|
|
3927
4009
|
"sources": ["E:\\code\\OnlineStudy-Base\\base-elearning-frontend-model\\packages\\components\\packages\\models\\tree-table-model\\src\\index.vue", "index.vue"],
|
|
3928
4010
|
"names": [],
|
|
3929
|
-
"mappings": "
|
|
4011
|
+
"mappings": "AA6xCA;EACA,uBAAA;EACA,aAAA;EACA,mBAAA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;AC5xCA;AD6xCA;EACA,aAAA;EACA,sBAAA;EACA,YAAA;AC3xCA;AD4xCA;EACA,YAAA;EACA,gBAAA;EACA,cAAA;EACA,aAAA;EACA,sBAAA;EACA,kBAAA;EACA,gBAAA;EACA,kBAAA;AC1xCA;AD6xCA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;EACA,aAAA;EACA,sBAAA;EACA,YAAA;EACA,gBAAA;AC3xCA;AD6xCA;EACA,WAAA;EACA,WAAA;EACA,uCAAA;EACA,2BAAA;EACA,4BAAA;AC3xCA;AD6xCA;EACA,gBAAA;EACA,aAAA;EACA,eAAA;EACA,iBAAA;EACA,gBAAA;EACA,wBAAA;EACA,qCAAA;AC3xCA;AD8xCA;EACA,gBAAA;EACA,aAAA;EACA,sBAAA;EACA,YAAA;EACA,gBAAA;AC5xCA;AD6xCA;EACA,WAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8BAAA;EACA,iBAAA;EACA,mBAAA;EACA,mBAAA;EACA,cAAA;AC3xCA;AD6xCA;EACA,OAAA;EACA,aAAA;EACA,gBAAA;AC3xCA;AD4xCA;EACA,eAAA;EACA,kCAAA;AC1xCA;;AAEA,oCAAoC",
|
|
3930
4012
|
"file": "index.vue",
|
|
3931
|
-
"sourcesContent": ["<template>\r\n <section class=\"ele model__tree-table\">\r\n <section class=\"model__tree-table--container\" v-if=\"showTree\">\r\n <div class=\"model__tree--title\"></div>\r\n <section :ref=\"modelTreeWrapper\" class=\"model__tree--wrapper\" :style=\"{height: `${treeWrapperHeight}px`}\">\r\n <ele-tree\r\n :tree-data=\"treeData\"\r\n :defaultExpandedKeys=\"defaultExpandedKeys\"\r\n :defaultSelectedKeys=\"defaultSelectedKeys\"\r\n @select=\"selectTreeNode\"\r\n :replace-fields=\"mapFields\">\r\n </ele-tree>\r\n </section>\r\n </section>\r\n <section class=\"model__table--container\" :ref=\"modelTableContainerRef\">\r\n <div class=\"model__table--title\" v-if=\"title\">\r\n <template v-if=\"titleMode\">\r\n <div :class=\"[`model__table-title--${titleMode}`]\"></div>\r\n </template>\r\n <template v-else>\r\n <div class=\"model__table-title--text\">{{ title }}</div>\r\n </template>\r\n </div>\r\n <section :ref=\"modelTableWrapper\" class=\"model__table--wrapper\">\r\n <ele-search-area :ref=\"searchArea\" @search=\"onSearch\" :data-source=\"searchMeta.elements\"></ele-search-area>\r\n <div class=\"button-row__area\">\r\n <ele-button-group class=\"model-table__button-group\" v-on=\"overrideButtonGroupEvent\" :ref=\"buttonGroup\" @click=\"handleClickButtonGroup\" :data-source=\"getButtonGroupElements\"></ele-button-group>\r\n <slot name=\"tags\"></slot>\r\n <slot v-if=\"$slots['sub-center']\" name=\"sub-center\"></slot>\r\n </div>\r\n <ele-table\r\n v-on=\"overrideTableEvent\"\r\n :ref=\"tableRef\"\r\n :row-selection=\"rowSelection\"\r\n :loading=\"loading\" \r\n :columns=\"columns\"\r\n :total=\"total\"\r\n :x=\"x\"\r\n :y=\"y\"\r\n :bordered=\"setBorder\"\r\n :height=\"tableHeight\"\r\n :width=\"tableWidth\"\r\n :actions=\"actions\"\r\n :pageSize=\"pageSize\"\r\n :pageSizeOptions=\"pageSizeOptions\"\r\n :data-source=\"tableData\"\r\n :mode=\"mode\"\r\n @change-page=\"onChangePage\"\r\n ></ele-table>\r\n </section>\r\n </section>\r\n <ele-modal-form v-model=\"modalFormValue\" v-on=\"overrideModalFormEvent\" :meta=\"modalFormMeta\"></ele-modal-form>\r\n <ele-modal-fsm v-model=\"showFsmModal\" :contextProp=\"fsmContextProp\" :meta=\"fsmMeta\" @cancel=\"handleCloseFsmModal\"></ele-modal-fsm>\r\n <ele-modal-table\r\n :meta=\"modalTableMeta\"\r\n v-model=\"modalTableValue\"\r\n v-on=\"overrideModalTableEvent\"\r\n ></ele-modal-table>\r\n </section>\r\n</template>\r\n\r\n<script>\r\nimport { type, net } from '@idooel/shared'\r\nimport { v4 as uuidv4 } from 'uuid'\r\nimport { BUILT_IN_EVENT_NAMES, RESERVE_EVENT_NAMES, BUILT_IN_TRIGGER, CONTEXT } from '../../../utils'\r\nimport { createTreeTableModel } from '@idooel/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 inject: {\r\n parentScopeId: {\r\n default: () => (() => null)\r\n },\r\n parentEvalExpression: {\r\n from: 'evalExpression',\r\n default: () => (() => undefined)\r\n }\r\n },\r\n provide () {\r\n return {\r\n evalExpression: this.parseExpression,\r\n requestTreeData: this.requestTreeData,\r\n requestTableData: this.requestTableData,\r\n keepAliveRefresh: this.keepAliveRefresh,\r\n parentScopeId: () => this.model?.scopeId,\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 }\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 }\r\n },\r\n overrideTableEvent () {\r\n const events = this.actions.reduce((ret, action) => {\r\n ret[action.eventName || action.key] = (e) => {\r\n this.setCurrentRowData(e.exposed.currentRowData)\r\n const { target } = action\r\n const targetMeta = this.findMetaByKey(target)\r\n const { mode } = targetMeta\r\n mode && this.dispatchTrigger({ mode, record: e.exposed.currentRowData, modeMeta: targetMeta })\r\n this.$emit(action.eventName || action.key, { ...e, currentTreeNode: this.currentTreeNodeData, exposed: { ...this.exposed, ...e.exposed } })\r\n }\r\n return ret\r\n }, {})\r\n return {\r\n ...this.$listeners,\r\n ...events,\r\n [BUILT_IN_EVENT_NAMES.EDIT]: this[BUILT_IN_EVENT_NAMES.EDIT],\r\n [BUILT_IN_EVENT_NAMES.SUBMIT]: this[BUILT_IN_EVENT_NAMES.SUBMIT]\r\n }\r\n },\r\n overrideModalFormEvent () {\r\n const { footerMeta } = this.modalFormMeta\r\n const { elements = [] } = footerMeta || {}\r\n const eles = type.isFunction(elements) ? elements.call(this) : elements\r\n const events = eles.reduce((ret, ele) => {\r\n ret[ele.eventName] = (e = {}) => {\r\n if (ele.eventName === 'cancel') {\r\n this.closeModalForm()\r\n } else {\r\n const { exposed = {} } = e\r\n this.$emit(`${ele.eventName || ele.key}`, { ...e, currentTreeNode: this.currentTreeNodeData, exposed: Object.assign({}, exposed )})\r\n }\r\n }\r\n return ret\r\n }, {})\r\n return {\r\n ...events\r\n }\r\n },\r\n overrideModalTableEvent () {\r\n const { footerMeta } = this.modalTableMeta\r\n const { elements = [] } = footerMeta || {}\r\n const eles = type.isFunction(elements) ? elements.call(this) : elements\r\n const events = eles.reduce((ret, ele) => {\r\n ret[ele.eventName] = (e = {}) => {\r\n if (ele.eventName === 'cancel') {\r\n this.closeModalTable()\r\n } else {\r\n const { exposed = {} } = e\r\n this.$emit(`${ele.eventName || ele.key}`, { ...e, currentTreeNode: this.currentTreeNodeData, exposed: Object.assign({}, exposed )})\r\n }\r\n }\r\n return ret\r\n }, {})\r\n return {\r\n ...events,\r\n exposed: this.exposed\r\n }\r\n },\r\n overrideButtonGroupEvent () {\r\n const events = this.getButtonGroupElements.reduce((ret, ele) => {\r\n ret[ele.eventName] = (e) => {\r\n this.$emit(ele.eventName || 'click', { ...e, currentTreeNode: this.currentTreeNodeData, exposed: Object.assign({}, e.exposed || {}, this.exposed)})\r\n }\r\n return ret\r\n }, {})\r\n return {\r\n ...this.$listeners,\r\n ...events,\r\n [BUILT_IN_EVENT_NAMES.CREATE]: this[BUILT_IN_EVENT_NAMES.CREATE],\r\n exposed: this.exposed\r\n }\r\n },\r\n showTree () {\r\n return !!Object.keys(this.treeMeta).length\r\n },\r\n buttonGroup () {\r\n return uuidv4()\r\n },\r\n searchArea () {\r\n return uuidv4()\r\n },\r\n modelTreeWrapper () {\r\n return uuidv4()\r\n },\r\n modelTableWrapper () {\r\n return uuidv4()\r\n },\r\n actions () {\r\n const { operations } = this.tableMeta\r\n if (operations) {\r\n return operations.elements\r\n } else {\r\n return []\r\n }\r\n },\r\n pageSize () {\r\n const { page = {} } = this.tableMeta\r\n return page.pageSize || 10\r\n },\r\n mode () {\r\n const { page = {} } = this.tableMeta\r\n return page.mode\r\n },\r\n pageSizeOptions () {\r\n const { page = {} } = this.tableMeta\r\n return page.pageSizeOptions || ['10', '20', '30', '40']\r\n },\r\n columns () {\r\n const { columns, operations } = this.tableMeta\r\n if (type.get(columns) === 'array') {\r\n const columnsOptions = columns.map(item => {\r\n const { mode = 'text' } = item\r\n if (item.render) {\r\n return {\r\n ...item,\r\n customRender: (text, record, index) => {\r\n const { $createElement } = this\r\n return item.render.call(this, \r\n { h: $createElement, ctx: this },\r\n text ? typeof text == 'object' ? text[item.dataIndex] : text : '', \r\n record, index)\r\n }\r\n }\r\n } else if (mode !== BUILT_IN_TRIGGER.TEXT) {\r\n const { [`${mode}Meta`]: modeMeta } = item\r\n return {\r\n ...item,\r\n customRender: (text, record, index) => {\r\n return <span onClick={() => this.dispatchTrigger({ mode, record, modeMeta, index })} class={ mode }>{ text }</span>\r\n }\r\n }\r\n }\r\n return {\r\n ...item\r\n }\r\n })\r\n if (operations) {\r\n return [\r\n ...columnsOptions,\r\n {\r\n title: '操作',\r\n width: operations.width,\r\n key: 'action',\r\n fixed: 'right',\r\n scopedSlots: { customRender: 'action' }\r\n }\r\n ]\r\n }\r\n return columnsOptions\r\n } else {\r\n console.error('Error: columns is invalid, please check it')\r\n return []\r\n }\r\n },\r\n getButtonGroupElements () {\r\n const { elements } = this.buttonGroupMeta\r\n if (type.get(elements) === 'function') {\r\n return elements.call(this)\r\n } else if (type.get(elements) === 'array') {\r\n return elements\r\n } else {\r\n return []\r\n }\r\n },\r\n mapFields () {\r\n const { replaceFields = {} } = this.treeMeta\r\n const mapFields = type.isEmpty(replaceFields) ? this.replaceFields : replaceFields\r\n return mapFields\r\n }\r\n },\r\n async created () {\r\n // onSearch会初始化请求表格数据，所以不需要在这里请求表格数据\r\n // 初始化数据池管理器（使用新的 Mutix-based runtime-context）\r\n try {\r\n // 使用组件名 + UUID 作为调试名称，方便在 DevTools 中区分多个实例\r\n // 这里的 Symbol description 将被 mutix devtools plugin 提取显示\r\n const debugName = `TreeTableModel_${this.tableRef || uuidv4().slice(0, 8)}`\r\n // 获取父作用域 ID\r\n const parentId = this.parentScopeId?.() || null\r\n // 创建模型时传入父作用域\r\n this.model = createTreeTableModel(Symbol(debugName), undefined, parentId)\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.setupModelSubscriptions()\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 \r\n // 1. 先更新模型（Single Source of Truth）\r\n if (this.model) {\r\n this.model.setSelectedNode(defaultTreeNode)\r\n }\r\n \r\n // 2. 组件层数据通过订阅自动更新，无需手动设置\r\n // this.currentTreeNodeData = defaultTreeNode // 不再需要\r\n \r\n const { params = {}, fieldMap = {}, overrideInit = false } = this.tableMeta\r\n \r\n // 使用最新的 currentRowData 和统一的表达式上下文\r\n const currentRowData = this.getCurrentRowData()\r\n const extraContext = { \r\n currentRowData: currentRowData\r\n }\r\n \r\n const initQuerys = Object.assign({}, params, this.parseFieldMap(fieldMap, extraContext))\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 extraContext = { \r\n currentRowData: currentRowData\r\n }\r\n this.tableQuerys = Object.assign({}, params, this.parseFieldMap(fieldMap, extraContext))\r\n }\r\n },\r\n methods: {\r\n /**\r\n * 构建标准化的表达式数据上下文\r\n * @returns {Object} 表达式求值上下文\r\n */\r\n buildExpressionContext () {\r\n let parentSelectedNode = {}\r\n let parentCurrentRowData = {}\r\n \r\n if (this.parentEvalExpression) {\r\n try {\r\n parentSelectedNode = this.parentEvalExpression('selectedNode') || {}\r\n parentCurrentRowData = this.parentEvalExpression('currentRowData') || {}\r\n } catch (e) {\r\n // ignore\r\n }\r\n }\r\n\r\n const currentTreeNode = this.model ? this.model.getSelectedNode() : this.currentTreeNodeData\r\n const currentRowData = this.getCurrentRowData()\r\n\r\n return {\r\n // 路由数据\r\n _route: this.$route.query,\r\n _routeMeta: this.$route.meta,\r\n \r\n // 树节点数据 - 合并父级数据以支持字段级 fallback\r\n currentTreeNode: { ...parentSelectedNode, ...currentTreeNode },\r\n selectedNode: { ...parentSelectedNode, ...currentTreeNode },\r\n \r\n // 表格数据 - 合并父级数据以支持字段级 fallback\r\n currentRowData: { ...parentCurrentRowData, ...currentRowData },\r\n currentTableSelection: this.getCurrentTableSelection(),\r\n \r\n // 分页数据\r\n pagination: {\r\n currentPage: this.tableQuerys.currentPage || 1,\r\n pageSize: this.tableQuerys.pageSize || this.pageSize,\r\n total: this.total\r\n },\r\n \r\n // 查询参数\r\n queryParams: this.tableQuerys,\r\n \r\n // 表格元数据\r\n tableMeta: this.tableMeta,\r\n treeMeta: this.treeMeta,\r\n \r\n // 暴露的方法和数据\r\n exposed: this.exposed\r\n }\r\n },\r\n \r\n /**\r\n * 统一表达式解析方法\r\n * @param {string} expression - 表达式字符串\r\n * @param {Object} extraContext - 额外上下文数据\r\n * @returns {any} 表达式求值结果\r\n */\r\n parseExpression (expression, extraContext = {}) {\r\n if (!this.model) {\r\n console.warn('[TreeTableModel] Model not initialized, cannot parse expression')\r\n return undefined\r\n }\r\n \r\n try {\r\n const context = {\r\n ...this.buildExpressionContext(),\r\n ...extraContext\r\n }\r\n const val = this.model.eval(expression, context)\r\n if ((val === undefined || val === null) && this.parentEvalExpression) {\r\n return this.parentEvalExpression(expression, extraContext)\r\n }\r\n return val\r\n } catch (error) {\r\n console.error(`[TreeTableModel] Expression parsing failed: \"${expression}\"`, error)\r\n return undefined\r\n }\r\n },\r\n \r\n /**\r\n * 统一字段映射解析方法\r\n * @param {Object} fieldMap - 字段映射配置\r\n * @param {Object} extraContext - 额外上下文数据\r\n * @returns {Object} 解析后的参数字段\r\n */\r\n parseFieldMap (fieldMap = {}, extraContext = {}) {\r\n if (!fieldMap || Object.keys(fieldMap).length === 0) {\r\n return {}\r\n }\r\n \r\n const ret = {}\r\n Object.keys(fieldMap).forEach((expression) => {\r\n const targetKey = fieldMap[expression]\r\n // Use this.parseExpression which internally uses model.eval for better context access\r\n ret[targetKey] = this.parseExpression(expression, extraContext)\r\n })\r\n \r\n return ret\r\n },\r\n \r\n /**\r\n * 设置模型订阅，实现精确的状态同步\r\n */\r\n setupModelSubscriptions () {\r\n if (!this.model) {\r\n console.warn('[TreeTableModel] Model not initialized, cannot setup subscriptions')\r\n return\r\n }\r\n \r\n // 订阅当前行数据变化\r\n this.unsubscribeRowData = this.model.subscribe('currentRowData', (newValue, oldValue) => {\r\n // 模型已经确保只有真正变化时才会调用这里\r\n this.currentRowData = newValue || {}\r\n // 触发视图更新，但避免过度使用$forceUpdate\r\n this.$nextTick(() => {\r\n this.$emit('x:current-row-changed', { \r\n currentRowData: this.currentRowData,\r\n previousRowData: oldValue \r\n })\r\n })\r\n })\r\n \r\n // 订阅表格数据变化\r\n this.unsubscribeTableData = this.model.subscribe('tableData', (newValue) => {\r\n // 模型已经确保只有真正变化时才会调用这里\r\n this.tableData = newValue || []\r\n this.$emit('x:table-data-changed', { tableData: this.tableData })\r\n })\r\n \r\n // 订阅树数据变化\r\n this.unsubscribeTreeData = this.model.subscribe('treeData', (newValue) => {\r\n // 模型已经确保只有真正变化时才会调用这里\r\n this.treeData = newValue || []\r\n this.$emit('x:tree-data-changed', { treeData: this.treeData })\r\n })\r\n \r\n // 订阅加载状态变化\r\n this.unsubscribeLoading = this.model.subscribe('loading', (newValue) => {\r\n if (this.loading !== newValue) {\r\n this.loading = newValue\r\n this.$emit('x:loading-changed', { loading: this.loading })\r\n }\r\n })\r\n \r\n // 订阅总记录数变化\r\n this.unsubscribeTotal = this.model.subscribe('total', (newValue) => {\r\n if (this.total !== newValue) {\r\n this.total = newValue\r\n this.$emit('x:total-changed', { total: this.total })\r\n }\r\n })\r\n \r\n // 订阅共享数据变化（用于弹窗表格等场景）\r\n this.unsubscribeShared = this.model.subscribe('_sharedData', (newValue) => {\r\n if (newValue && Object.keys(newValue).length > 0) {\r\n this.setCurrentRowData(newValue)\r\n this.$emit('x:shared-data-changed', { sharedData: newValue })\r\n }\r\n })\r\n \r\n // 订阅选择数据变化\r\n this.unsubscribeSelection = this.model.subscribe('currentTableSelection', (newValue, oldValue) => {\r\n // 模型已经确保只有真正变化时才会调用这里\r\n this.currentTableSelection = newValue || {}\r\n // 触发视图更新和事件通知\r\n this.$nextTick(() => {\r\n this.$emit('x:current-table-selection-changed', { \r\n currentTableSelection: this.currentTableSelection,\r\n previousCurrentTableSelection: oldValue \r\n })\r\n })\r\n })\r\n \r\n // 订阅选中的树节点变化\r\n this.unsubscribeSelectedNode = this.model.subscribe('selectedNode', (newValue, oldValue) => {\r\n // 模型已经确保只有真正变化时才会调用这里\r\n this.currentTreeNodeData = newValue || {}\r\n // 触发视图更新和事件通知\r\n this.$nextTick(() => {\r\n this.$emit('x:selected-node-changed', { \r\n selectedNode: this.currentTreeNodeData,\r\n previousSelectedNode: oldValue \r\n })\r\n })\r\n })\r\n \r\n console.log('[TreeTableModel] Model subscriptions setup completed')\r\n },\r\n \r\n /**\r\n * 性能监控工具方法\r\n * @param {string} operation - 操作名称\r\n * @param {Function} fn - 要监控的函数\r\n * @returns {Promise<any>} 函数执行结果\r\n */\r\n async withPerformanceMonitoring (operation, fn) {\r\n const startTime = performance.now()\r\n try {\r\n const result = await fn()\r\n const duration = performance.now() - startTime\r\n console.log(`[TreeTableModel] ${operation} took ${duration.toFixed(2)}ms`)\r\n return result\r\n } catch (error) {\r\n const duration = performance.now() - startTime\r\n console.error(`[TreeTableModel] ${operation} failed after ${duration.toFixed(2)}ms:`, error)\r\n throw error\r\n }\r\n },\r\n \r\n /**\r\n * 错误处理工具方法\r\n * @param {string} context - 错误上下文\r\n * @param {Function} fn - 要执行的函数\r\n * @param {any} fallbackValue - 错误时的默认值\r\n * @returns {any} 函数执行结果或默认值\r\n */\r\n withErrorHandling (context, fn, fallbackValue = undefined) {\r\n try {\r\n return fn()\r\n } catch (error) {\r\n console.error(`[TreeTableModel] Error in ${context}:`, error)\r\n return fallbackValue\r\n }\r\n },\r\n \r\n /**\r\n * 清理所有模型订阅\r\n */\r\n cleanupModelSubscriptions () {\r\n const subscriptions = [\r\n 'unsubscribeRowData',\r\n 'unsubscribeTableData', \r\n 'unsubscribeTreeData',\r\n 'unsubscribeLoading',\r\n 'unsubscribeTotal',\r\n 'unsubscribeShared',\r\n 'unsubscribeSelection',\r\n 'unsubscribeSelectedNode'\r\n ]\r\n \r\n subscriptions.forEach(subscriptionName => {\r\n if (this[subscriptionName] && typeof this[subscriptionName] === 'function') {\r\n try {\r\n this[subscriptionName]()\r\n this[subscriptionName] = null\r\n } catch (error) {\r\n console.warn(`[TreeTableModel] Failed to cleanup subscription: ${subscriptionName}`, error)\r\n }\r\n }\r\n })\r\n \r\n console.log('[TreeTableModel] Model subscriptions cleanup completed')\r\n },\r\n \r\n initializeCurrentRowData () {\r\n if (!this.model) return\r\n \r\n let initialData = {}\r\n\r\n // 1. 优先检查共享数据（来自父级）\r\n const sharedData = this.model.getSharedData()\r\n if (sharedData && Object.keys(sharedData).length > 0) {\r\n initialData = sharedData\r\n } else {\r\n // 2. 其次检查 props 或路由参数 (示例逻辑)\r\n // const { rowId } = this.$route.query\r\n // if (rowId) { ... }\r\n }\r\n\r\n // 3. 设置到 Model，这是唯一的数据源初始化入口\r\n this.model.setCurrentRowData(initialData)\r\n \r\n // 4. 同步回本地（虽然 subscribe 会处理，但为了立即能用，这里也设置一下）\r\n this.currentRowData = initialData\r\n },\r\n async refreshTreeData () {\r\n return this.withPerformanceMonitoring('refreshTreeData', async () => {\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 \r\n // 1. 先更新模型（Single Source of Truth）\r\n if (this.model) {\r\n this.model.setSelectedNode(defaultTreeNode)\r\n }\r\n \r\n // 2. 组件层数据通过订阅自动更新，无需手动设置\r\n // this.currentTreeNodeData = defaultTreeNode // 不再需要\r\n \r\n this.$emit('x:tree-refreshed', { \r\n treeData: this.treeData,\r\n currentTreeNode: defaultTreeNode \r\n })\r\n \r\n return this.treeData\r\n })\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 // 1. 先更新模型（Single Source of Truth）\r\n if (this.model) {\r\n this.model.setCurrentTableSelection(selectedRows)\r\n }\r\n \r\n // 2. 组件层数据通过订阅自动更新，无需手动设置\r\n // this.setCurrentTableSelection(selectedRows) // 不再需要\r\n \r\n // 3. 继续后续逻辑\r\n this.$emit('on-change-table-selection', this.currentTableSelection)\r\n this.$emit('x:refresh-exposed', { exposed: this.exposed })\r\n },\r\n setCurrentTableSelection (props = {}) {\r\n return this.withErrorHandling('setCurrentTableSelection', () => {\r\n // 处理数据格式\r\n let processedData\r\n if (this.currentTableMode === 'radio') {\r\n processedData = (type.isArray(props) && props.length > 0) ? props[0] : type.isObject(props) ? props : {}\r\n } else {\r\n processedData = type.isArray(props) ? props : []\r\n }\r\n \r\n // 1. 始终先更新 Model (Single Source of Truth)\r\n if (this.model) {\r\n this.model.setCurrentTableSelection(processedData)\r\n }\r\n \r\n // 2. 组件层数据通过订阅自动更新，无需手动设置\r\n // this.$set(this, 'currentTableSelection', processedData) // 不再需要\r\n \r\n // 3. 对外广播\r\n this.$emit('x:current-table-selection-set', { currentTableSelection: processedData })\r\n \r\n return processedData\r\n }, {})\r\n },\r\n getCurrentTableSelection () {\r\n return this.withErrorHandling('getCurrentTableSelection', () => {\r\n if (this.model) {\r\n return this.model.getCurrentTableSelection()\r\n }\r\n console.warn('[TreeTableModel] Model not initialized, getCurrentTableSelection returning local data')\r\n return this.currentTableSelection || {}\r\n }, {})\r\n },\r\n setCurrentRowData (props = {}) {\r\n return this.withErrorHandling('setCurrentRowData', () => {\r\n // 关键：通过浅克隆断开与 Vue 2 Observer 的引用，保证数据纯净\r\n const newData = props ? { ...props } : {}\r\n \r\n // 1. 始终先更新 Model (Single Source of Truth)\r\n if (this.model) {\r\n this.model.setCurrentRowData(newData)\r\n } else {\r\n console.warn('[TreeTableModel] Model not initialized, cannot setCurrentRowData in model')\r\n }\r\n \r\n // 2. 更新本地视图 (双重保证，避免订阅延迟导致的闪烁)\r\n this.currentRowData = newData\r\n \r\n // 3. 对外广播\r\n // 注意：不再需要手动 emit 事件给外部来同步状态，因为外部如果想监听，应该监听 model 变化\r\n // 但为了兼容旧代码，保持一些必要的 emit 可能是好的，比如 'row-change'\r\n this.$emit('x:current-row-data-set', { currentRowData: this.currentRowData })\r\n \r\n return this.currentRowData\r\n }, {})\r\n },\r\n getCurrentRowData () {\r\n return this.withErrorHandling('getCurrentRowData', () => {\r\n if (this.model) {\r\n return this.model.getCurrentRowData()\r\n }\r\n console.warn('[TreeTableModel] Model not initialized, getCurrentRowData returning local data')\r\n return this.currentRowData || {}\r\n }, {})\r\n },\r\n cleanCurrentModelEffect (clearRowData = true) {\r\n const action = () => {\r\n this.setCurrentTableSelection()\r\n if (clearRowData) {\r\n this.setCurrentRowData({})\r\n }\r\n }\r\n \r\n if (this.model) {\r\n this.model.batch(action)\r\n } else {\r\n action()\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 \r\n // 🔍 关键调试日志 - 开始\r\n console.log('[DEBUG] showModalTable - currentRowData:', currentRowData)\r\n console.log('[DEBUG] showModalTable - currentTreeNodeData:', this.currentTreeNodeData)\r\n console.log('[DEBUG] showModalTable - 是否有model:', !!this.model)\r\n \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处理\r\n console.log('[DEBUG] showModalTable - targetMeta:', targetMeta)\r\n console.log('[DEBUG] showModalTable - 是否有fieldMap:', !!(targetMeta && targetMeta.fieldMap))\r\n \r\n // 解析 fieldMap 参数，使用完整的上下文包括 currentRowData 和父级数据\r\n if (targetMeta && targetMeta.tableMeta.fieldMap) {\r\n const { fieldMap, params = {} } = targetMeta.tableMeta\r\n \r\n console.log('[DEBUG] showModalTable - fieldMap:', fieldMap)\r\n \r\n // 关键：构建完整的上下文，保留原有数据并添加父级节点\r\n const extraContext = {}\r\n \r\n console.log('[DEBUG] showModalTable - extraContext:', extraContext)\r\n \r\n const parsedParams = this.parseFieldMap(fieldMap, extraContext)\r\n \r\n console.log('[DEBUG] showModalTable - parsedParams:', parsedParams)\r\n \r\n // 将解析后的参数传递给 modal table\r\n targetMeta.tableMeta = {\r\n ...targetMeta.tableMeta,\r\n params: {\r\n ...params,\r\n ...parsedParams\r\n }\r\n }\r\n \r\n console.log('[DEBUG] showModalTable - 最终targetMeta.params:', targetMeta.params)\r\n }\r\n \r\n this.modalTableMeta = targetMeta\r\n this.modalTableValue = true\r\n \r\n console.log('[DEBUG] showModalTable - 最终modalTableMeta:', this.modalTableMeta)\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 const selectedNodeData = e.node.$vnode.data.props.dataRef || {}\r\n \r\n // 1. 先更新模型（Single Source of Truth）\r\n if (this.model) {\r\n this.model.setSelectedNode(selectedNodeData)\r\n }\r\n\r\n // 2. 组件层数据通过订阅自动更新，无需手动设置\r\n // this.currentTreeNodeData = selectedNodeData // 不再需要\r\n \r\n // 3. 继续后续逻辑\r\n // 使用统一的字段映射解析方法，自动包含所需的上下文\r\n const execFieldMapRet = this.parseFieldMap(fieldMap)\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 \r\n // 使用统一的字段映射解析方法\r\n const fieldMapRet = this.parseFieldMap(fieldMap)\r\n \r\n try {\r\n const startTime = performance.now()\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 \r\n // 性能监控\r\n const duration = performance.now() - startTime\r\n console.log(`[TreeTableModel] Tree data request took ${duration.toFixed(2)}ms`)\r\n \r\n // 通过模型设置树数据\r\n if (this.model) {\r\n this.model.setTreeData(ret)\r\n }\r\n \r\n return ret\r\n } catch (error) {\r\n console.error('[TreeTableModel] Failed to request tree data:', error)\r\n // 错误时设置空数据\r\n if (this.model) {\r\n this.model.setTreeData([])\r\n }\r\n return []\r\n }\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 \r\n // 更新查询参数\r\n this.tableQuerys = Object.assign(this.tableQuerys, { \r\n currentPage: this.tableQuerys.currentPage || 1, \r\n pageSize: this.tableQuerys.pageSize || page.pageSize || 10 \r\n }, props)\r\n \r\n // 通过模型设置加载状态\r\n if (this.model) {\r\n this.model.setLoading(true)\r\n }\r\n \r\n this.$emit(RESERVE_EVENT_NAMES.WATCH, { ...this.exposed })\r\n \r\n try {\r\n const startTime = performance.now()\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 \r\n // 通过模型设置数据\r\n if (this.model) {\r\n this.model.batch(() => {\r\n this.model.setTableData(data || [])\r\n this.model.setTotal(count || 0)\r\n this.model.setPagination(\r\n this.tableQuerys.currentPage || 1,\r\n this.tableQuerys.pageSize || page.pageSize || 10\r\n )\r\n })\r\n }\r\n \r\n // 性能监控\r\n const duration = performance.now() - startTime\r\n console.log(`[TreeTableModel] Table data request took ${duration.toFixed(2)}ms, returned ${(data || []).length} items`)\r\n \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 \r\n // 更新本地数据（保持兼容）\r\n this.tableData = ret\r\n this.total = this.model ? this.model.getTotal() : 0\r\n \r\n return ret\r\n } catch (error) {\r\n console.error('[TreeTableModel] Failed to request table data:', error)\r\n \r\n // 错误时设置空数据\r\n if (this.model) {\r\n this.model.setTableData([])\r\n this.model.setTotal(0)\r\n }\r\n \r\n this.tableData = []\r\n this.total = 0\r\n return []\r\n } finally {\r\n const finalize = () => {\r\n if (this.model) {\r\n this.model.setLoading(false)\r\n }\r\n this.loading = false\r\n // 清理当前模型效果（不清空currentRowData）\r\n this.cleanCurrentModelEffect(false)\r\n }\r\n\r\n // 使用 batch 确保 loading 状态改变和清理操作原子化\r\n if (this.model) {\r\n this.model.batch(finalize)\r\n } else {\r\n finalize()\r\n }\r\n }\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 return this.withPerformanceMonitoring('keepAliveRefresh', async () => {\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 // 刷新列表数据\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 this.$emit('x:refresh-completed', { \r\n tableData: this.tableData,\r\n treeData: this.treeData,\r\n currentRowData: this.currentRowData\r\n })\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 this.cleanupModelSubscriptions()\r\n // 清理模型数据\r\n this.model.cleanup()\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 */"]
|
|
4013
|
+
"sourcesContent": ["<template>\r\n <section class=\"ele model__tree-table\">\r\n <section class=\"model__tree-table--container\" v-if=\"showTree\">\r\n <div class=\"model__tree--title\"></div>\r\n <section :ref=\"modelTreeWrapper\" class=\"model__tree--wrapper\" :style=\"{height: `${treeWrapperHeight}px`}\">\r\n <ele-tree\r\n :tree-data=\"treeData\"\r\n :defaultExpandedKeys=\"defaultExpandedKeys\"\r\n :defaultSelectedKeys=\"defaultSelectedKeys\"\r\n @select=\"selectTreeNode\"\r\n :replace-fields=\"mapFields\">\r\n </ele-tree>\r\n </section>\r\n </section>\r\n <section class=\"model__table--container\" :ref=\"modelTableContainerRef\">\r\n <div class=\"model__table--title\" v-if=\"title\">\r\n <template v-if=\"titleMode\">\r\n <div :class=\"[`model__table-title--${titleMode}`]\"></div>\r\n </template>\r\n <template v-else>\r\n <div class=\"model__table-title--text\">{{ title }}</div>\r\n </template>\r\n </div>\r\n <section :ref=\"modelTableWrapper\" class=\"model__table--wrapper\">\r\n <ele-search-area :ref=\"searchArea\" @search=\"onSearch\" :data-source=\"searchMeta.elements\"></ele-search-area>\r\n <div class=\"button-row__area\">\r\n <ele-button-group class=\"model-table__button-group\" v-on=\"overrideButtonGroupEvent\" :ref=\"buttonGroup\" @click=\"handleClickButtonGroup\" :data-source=\"getButtonGroupElements\"></ele-button-group>\r\n <slot name=\"tags\"></slot>\r\n <slot v-if=\"$slots['sub-center']\" name=\"sub-center\"></slot>\r\n </div>\r\n <ele-table\r\n v-on=\"overrideTableEvent\"\r\n :ref=\"tableRef\"\r\n :row-selection=\"rowSelection\"\r\n :loading=\"loading\" \r\n :columns=\"columns\"\r\n :total=\"total\"\r\n :x=\"x\"\r\n :y=\"y\"\r\n :bordered=\"setBorder\"\r\n :height=\"tableHeight\"\r\n :width=\"tableWidth\"\r\n :actions=\"actions\"\r\n :pageSize=\"pageSize\"\r\n :pageSizeOptions=\"pageSizeOptions\"\r\n :data-source=\"tableData\"\r\n :mode=\"mode\"\r\n @change-page=\"onChangePage\"\r\n ></ele-table>\r\n </section>\r\n </section>\r\n <ele-modal-form v-model=\"modalFormValue\" v-on=\"overrideModalFormEvent\" :meta=\"modalFormMeta\"></ele-modal-form>\r\n <ele-modal-fsm v-model=\"showFsmModal\" :contextProp=\"fsmContextProp\" :meta=\"fsmMeta\" @cancel=\"handleCloseFsmModal\"></ele-modal-fsm>\r\n <ele-modal-table\r\n :meta=\"modalTableMeta\"\r\n v-model=\"modalTableValue\"\r\n v-on=\"overrideModalTableEvent\"\r\n ></ele-modal-table>\r\n </section>\r\n</template>\r\n\r\n<script>\r\nimport { type, net } from '@idooel/shared'\r\nimport { v4 as uuidv4 } from 'uuid'\r\nimport { BUILT_IN_EVENT_NAMES, RESERVE_EVENT_NAMES, BUILT_IN_TRIGGER, CONTEXT } from '../../../utils'\r\nimport { createTreeTableModel } from '@idooel/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 inject: {\r\n parentScopeId: {\r\n default: () => (() => null)\r\n },\r\n parentEvalExpression: {\r\n from: 'evalExpression',\r\n default: () => (() => undefined)\r\n }\r\n },\r\n provide () {\r\n return {\r\n evalExpression: this.parseExpression,\r\n requestTreeData: this.requestTreeData,\r\n requestTableData: this.requestTableData,\r\n keepAliveRefresh: this.keepAliveRefresh,\r\n parentScopeId: () => this.model?.scopeId,\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 resizeObserverSearchArea: 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 }\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 }\r\n },\r\n overrideTableEvent () {\r\n const events = this.actions.reduce((ret, action) => {\r\n ret[action.eventName || action.key] = (e) => {\r\n this.setCurrentRowData(e.exposed.currentRowData)\r\n const { target } = action\r\n const targetMeta = this.findMetaByKey(target)\r\n const { mode } = targetMeta\r\n mode && this.dispatchTrigger({ mode, record: e.exposed.currentRowData, modeMeta: targetMeta })\r\n this.$emit(action.eventName || action.key, { ...e, currentTreeNode: this.currentTreeNodeData, exposed: { ...this.exposed, ...e.exposed } })\r\n }\r\n return ret\r\n }, {})\r\n return {\r\n ...this.$listeners,\r\n ...events,\r\n [BUILT_IN_EVENT_NAMES.EDIT]: this[BUILT_IN_EVENT_NAMES.EDIT],\r\n [BUILT_IN_EVENT_NAMES.SUBMIT]: this[BUILT_IN_EVENT_NAMES.SUBMIT]\r\n }\r\n },\r\n overrideModalFormEvent () {\r\n const { footerMeta } = this.modalFormMeta\r\n const { elements = [] } = footerMeta || {}\r\n const eles = type.isFunction(elements) ? elements.call(this) : elements\r\n const events = eles.reduce((ret, ele) => {\r\n ret[ele.eventName] = (e = {}) => {\r\n if (ele.eventName === 'cancel') {\r\n this.closeModalForm()\r\n } else {\r\n const { exposed = {} } = e\r\n this.$emit(`${ele.eventName || ele.key}`, { ...e, currentTreeNode: this.currentTreeNodeData, exposed: Object.assign({}, exposed )})\r\n }\r\n }\r\n return ret\r\n }, {})\r\n return {\r\n ...events\r\n }\r\n },\r\n overrideModalTableEvent () {\r\n const { footerMeta } = this.modalTableMeta\r\n const { elements = [] } = footerMeta || {}\r\n const eles = type.isFunction(elements) ? elements.call(this) : elements\r\n const events = eles.reduce((ret, ele) => {\r\n ret[ele.eventName] = (e = {}) => {\r\n if (ele.eventName === 'cancel') {\r\n this.closeModalTable()\r\n } else {\r\n const { exposed = {} } = e\r\n this.$emit(`${ele.eventName || ele.key}`, { ...e, currentTreeNode: this.currentTreeNodeData, exposed: Object.assign({}, exposed )})\r\n }\r\n }\r\n return ret\r\n }, {})\r\n return {\r\n ...events,\r\n exposed: this.exposed\r\n }\r\n },\r\n overrideButtonGroupEvent () {\r\n const events = this.getButtonGroupElements.reduce((ret, ele) => {\r\n ret[ele.eventName] = (e) => {\r\n this.$emit(ele.eventName || 'click', { ...e, currentTreeNode: this.currentTreeNodeData, exposed: Object.assign({}, e.exposed || {}, this.exposed)})\r\n }\r\n return ret\r\n }, {})\r\n return {\r\n ...this.$listeners,\r\n ...events,\r\n [BUILT_IN_EVENT_NAMES.CREATE]: this[BUILT_IN_EVENT_NAMES.CREATE],\r\n exposed: this.exposed\r\n }\r\n },\r\n showTree () {\r\n return !!Object.keys(this.treeMeta).length\r\n },\r\n buttonGroup () {\r\n return uuidv4()\r\n },\r\n searchArea () {\r\n return uuidv4()\r\n },\r\n modelTreeWrapper () {\r\n return uuidv4()\r\n },\r\n modelTableWrapper () {\r\n return uuidv4()\r\n },\r\n actions () {\r\n const { operations } = this.tableMeta\r\n if (operations) {\r\n return operations.elements\r\n } else {\r\n return []\r\n }\r\n },\r\n pageSize () {\r\n const { page = {} } = this.tableMeta\r\n return page.pageSize || 10\r\n },\r\n mode () {\r\n const { page = {} } = this.tableMeta\r\n return page.mode\r\n },\r\n pageSizeOptions () {\r\n const { page = {} } = this.tableMeta\r\n return page.pageSizeOptions || ['10', '20', '30', '40']\r\n },\r\n columns () {\r\n const { columns, operations } = this.tableMeta\r\n if (type.get(columns) === 'array') {\r\n const columnsOptions = columns.map(item => {\r\n const { mode = 'text' } = item\r\n if (item.render) {\r\n return {\r\n ...item,\r\n customRender: (text, record, index) => {\r\n const { $createElement } = this\r\n return item.render.call(this, \r\n { h: $createElement, ctx: this },\r\n text ? typeof text == 'object' ? text[item.dataIndex] : text : '', \r\n record, index)\r\n }\r\n }\r\n } else if (mode !== BUILT_IN_TRIGGER.TEXT) {\r\n const { [`${mode}Meta`]: modeMeta } = item\r\n return {\r\n ...item,\r\n customRender: (text, record, index) => {\r\n return <span onClick={() => this.dispatchTrigger({ mode, record, modeMeta, index })} class={ mode }>{ text }</span>\r\n }\r\n }\r\n }\r\n return {\r\n ...item\r\n }\r\n })\r\n if (operations) {\r\n return [\r\n ...columnsOptions,\r\n {\r\n title: '操作',\r\n width: operations.width,\r\n key: 'action',\r\n fixed: 'right',\r\n scopedSlots: { customRender: 'action' }\r\n }\r\n ]\r\n }\r\n return columnsOptions\r\n } else {\r\n console.error('Error: columns is invalid, please check it')\r\n return []\r\n }\r\n },\r\n getButtonGroupElements () {\r\n const { elements } = this.buttonGroupMeta\r\n if (type.get(elements) === 'function') {\r\n return elements.call(this)\r\n } else if (type.get(elements) === 'array') {\r\n return elements\r\n } else {\r\n return []\r\n }\r\n },\r\n mapFields () {\r\n const { replaceFields = {} } = this.treeMeta\r\n const mapFields = type.isEmpty(replaceFields) ? this.replaceFields : replaceFields\r\n return mapFields\r\n }\r\n },\r\n async created () {\r\n // onSearch会初始化请求表格数据，所以不需要在这里请求表格数据\r\n // 初始化数据池管理器（使用新的 Mutix-based runtime-context）\r\n try {\r\n // 使用组件名 + UUID 作为调试名称，方便在 DevTools 中区分多个实例\r\n // 这里的 Symbol description 将被 mutix devtools plugin 提取显示\r\n const debugName = `TreeTableModel_${this.tableRef || uuidv4().slice(0, 8)}`\r\n // 获取父作用域 ID\r\n const parentId = this.parentScopeId?.() || null\r\n // 创建模型时传入父作用域\r\n this.model = createTreeTableModel(Symbol(debugName), undefined, parentId)\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.setupModelSubscriptions()\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 \r\n // 1. 先更新模型（Single Source of Truth）\r\n if (this.model) {\r\n this.model.setSelectedNode(defaultTreeNode)\r\n }\r\n \r\n // 2. 组件层数据通过订阅自动更新，无需手动设置\r\n // this.currentTreeNodeData = defaultTreeNode // 不再需要\r\n \r\n const { params = {}, fieldMap = {}, overrideInit = false } = this.tableMeta\r\n \r\n // 使用最新的 currentRowData 和统一的表达式上下文\r\n const currentRowData = this.getCurrentRowData()\r\n const extraContext = { \r\n currentRowData: currentRowData\r\n }\r\n \r\n const initQuerys = Object.assign({}, params, this.parseFieldMap(fieldMap, extraContext))\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 extraContext = { \r\n currentRowData: currentRowData\r\n }\r\n this.tableQuerys = Object.assign({}, params, this.parseFieldMap(fieldMap, extraContext))\r\n }\r\n },\r\n methods: {\r\n /**\r\n * 构建标准化的表达式数据上下文\r\n * @returns {Object} 表达式求值上下文\r\n */\r\n buildExpressionContext () {\r\n let parentSelectedNode = {}\r\n let parentCurrentRowData = {}\r\n \r\n if (this.parentEvalExpression) {\r\n try {\r\n parentSelectedNode = this.parentEvalExpression('selectedNode') || {}\r\n parentCurrentRowData = this.parentEvalExpression('currentRowData') || {}\r\n } catch (e) {\r\n // ignore\r\n }\r\n }\r\n\r\n const currentTreeNode = this.model ? this.model.getSelectedNode() : this.currentTreeNodeData\r\n const currentRowData = this.getCurrentRowData()\r\n\r\n return {\r\n // 路由数据\r\n _route: this.$route.query,\r\n _routeMeta: this.$route.meta,\r\n \r\n // 树节点数据 - 合并父级数据以支持字段级 fallback\r\n currentTreeNode: { ...parentSelectedNode, ...currentTreeNode },\r\n selectedNode: { ...parentSelectedNode, ...currentTreeNode },\r\n \r\n // 表格数据 - 合并父级数据以支持字段级 fallback\r\n currentRowData: { ...parentCurrentRowData, ...currentRowData },\r\n currentTableSelection: this.getCurrentTableSelection(),\r\n \r\n // 分页数据\r\n pagination: {\r\n currentPage: this.tableQuerys.currentPage || 1,\r\n pageSize: this.tableQuerys.pageSize || this.pageSize,\r\n total: this.total\r\n },\r\n \r\n // 查询参数\r\n queryParams: this.tableQuerys,\r\n \r\n // 表格元数据\r\n tableMeta: this.tableMeta,\r\n treeMeta: this.treeMeta,\r\n \r\n // 暴露的方法和数据\r\n exposed: this.exposed\r\n }\r\n },\r\n \r\n /**\r\n * 统一表达式解析方法\r\n * @param {string} expression - 表达式字符串\r\n * @param {Object} extraContext - 额外上下文数据\r\n * @returns {any} 表达式求值结果\r\n */\r\n parseExpression (expression, extraContext = {}) {\r\n if (!this.model) {\r\n console.warn('[TreeTableModel] Model not initialized, cannot parse expression')\r\n return undefined\r\n }\r\n \r\n try {\r\n const context = {\r\n ...this.buildExpressionContext(),\r\n ...extraContext\r\n }\r\n const val = this.model.eval(expression, context)\r\n if ((val === undefined || val === null) && this.parentEvalExpression) {\r\n return this.parentEvalExpression(expression, extraContext)\r\n }\r\n return val\r\n } catch (error) {\r\n console.error(`[TreeTableModel] Expression parsing failed: \"${expression}\"`, error)\r\n return undefined\r\n }\r\n },\r\n \r\n /**\r\n * 统一字段映射解析方法\r\n * @param {Object} fieldMap - 字段映射配置\r\n * @param {Object} extraContext - 额外上下文数据\r\n * @returns {Object} 解析后的参数字段\r\n */\r\n parseFieldMap (fieldMap = {}, extraContext = {}) {\r\n if (!fieldMap || Object.keys(fieldMap).length === 0) {\r\n return {}\r\n }\r\n \r\n const ret = {}\r\n Object.keys(fieldMap).forEach((expression) => {\r\n const targetKey = fieldMap[expression]\r\n // Use this.parseExpression which internally uses model.eval for better context access\r\n ret[targetKey] = this.parseExpression(expression, extraContext)\r\n })\r\n \r\n return ret\r\n },\r\n \r\n /**\r\n * 设置模型订阅，实现精确的状态同步\r\n */\r\n setupModelSubscriptions () {\r\n if (!this.model) {\r\n console.warn('[TreeTableModel] Model not initialized, cannot setup subscriptions')\r\n return\r\n }\r\n \r\n // 订阅当前行数据变化\r\n this.unsubscribeRowData = this.model.subscribe('currentRowData', (newValue, oldValue) => {\r\n // 模型已经确保只有真正变化时才会调用这里\r\n this.currentRowData = newValue || {}\r\n // 触发视图更新，但避免过度使用$forceUpdate\r\n this.$nextTick(() => {\r\n this.$emit('x:current-row-changed', { \r\n currentRowData: this.currentRowData,\r\n previousRowData: oldValue \r\n })\r\n })\r\n })\r\n \r\n // 订阅表格数据变化\r\n this.unsubscribeTableData = this.model.subscribe('tableData', (newValue) => {\r\n // 模型已经确保只有真正变化时才会调用这里\r\n this.tableData = newValue || []\r\n this.$emit('x:table-data-changed', { tableData: this.tableData })\r\n })\r\n \r\n // 订阅树数据变化\r\n this.unsubscribeTreeData = this.model.subscribe('treeData', (newValue) => {\r\n // 模型已经确保只有真正变化时才会调用这里\r\n this.treeData = newValue || []\r\n this.$emit('x:tree-data-changed', { treeData: this.treeData })\r\n })\r\n \r\n // 订阅加载状态变化\r\n this.unsubscribeLoading = this.model.subscribe('loading', (newValue) => {\r\n if (this.loading !== newValue) {\r\n this.loading = newValue\r\n this.$emit('x:loading-changed', { loading: this.loading })\r\n }\r\n })\r\n \r\n // 订阅总记录数变化\r\n this.unsubscribeTotal = this.model.subscribe('total', (newValue) => {\r\n if (this.total !== newValue) {\r\n this.total = newValue\r\n this.$emit('x:total-changed', { total: this.total })\r\n }\r\n })\r\n \r\n // 订阅共享数据变化（用于弹窗表格等场景）\r\n this.unsubscribeShared = this.model.subscribe('_sharedData', (newValue) => {\r\n if (newValue && Object.keys(newValue).length > 0) {\r\n this.setCurrentRowData(newValue)\r\n this.$emit('x:shared-data-changed', { sharedData: newValue })\r\n }\r\n })\r\n \r\n // 订阅选择数据变化\r\n this.unsubscribeSelection = this.model.subscribe('currentTableSelection', (newValue, oldValue) => {\r\n // 模型已经确保只有真正变化时才会调用这里\r\n this.currentTableSelection = newValue || {}\r\n // 触发视图更新和事件通知\r\n this.$nextTick(() => {\r\n this.$emit('x:current-table-selection-changed', { \r\n currentTableSelection: this.currentTableSelection,\r\n previousCurrentTableSelection: oldValue \r\n })\r\n })\r\n })\r\n \r\n // 订阅选中的树节点变化\r\n this.unsubscribeSelectedNode = this.model.subscribe('selectedNode', (newValue, oldValue) => {\r\n // 模型已经确保只有真正变化时才会调用这里\r\n this.currentTreeNodeData = newValue || {}\r\n // 触发视图更新和事件通知\r\n this.$nextTick(() => {\r\n this.$emit('x:selected-node-changed', { \r\n selectedNode: this.currentTreeNodeData,\r\n previousSelectedNode: oldValue \r\n })\r\n })\r\n })\r\n \r\n console.log('[TreeTableModel] Model subscriptions setup completed')\r\n },\r\n \r\n /**\r\n * 性能监控工具方法\r\n * @param {string} operation - 操作名称\r\n * @param {Function} fn - 要监控的函数\r\n * @returns {Promise<any>} 函数执行结果\r\n */\r\n async withPerformanceMonitoring (operation, fn) {\r\n const startTime = performance.now()\r\n try {\r\n const result = await fn()\r\n const duration = performance.now() - startTime\r\n console.log(`[TreeTableModel] ${operation} took ${duration.toFixed(2)}ms`)\r\n return result\r\n } catch (error) {\r\n const duration = performance.now() - startTime\r\n console.error(`[TreeTableModel] ${operation} failed after ${duration.toFixed(2)}ms:`, error)\r\n throw error\r\n }\r\n },\r\n \r\n /**\r\n * 错误处理工具方法\r\n * @param {string} context - 错误上下文\r\n * @param {Function} fn - 要执行的函数\r\n * @param {any} fallbackValue - 错误时的默认值\r\n * @returns {any} 函数执行结果或默认值\r\n */\r\n withErrorHandling (context, fn, fallbackValue = undefined) {\r\n try {\r\n return fn()\r\n } catch (error) {\r\n console.error(`[TreeTableModel] Error in ${context}:`, error)\r\n return fallbackValue\r\n }\r\n },\r\n \r\n /**\r\n * 清理所有模型订阅\r\n */\r\n cleanupModelSubscriptions () {\r\n const subscriptions = [\r\n 'unsubscribeRowData',\r\n 'unsubscribeTableData', \r\n 'unsubscribeTreeData',\r\n 'unsubscribeLoading',\r\n 'unsubscribeTotal',\r\n 'unsubscribeShared',\r\n 'unsubscribeSelection',\r\n 'unsubscribeSelectedNode'\r\n ]\r\n \r\n subscriptions.forEach(subscriptionName => {\r\n if (this[subscriptionName] && typeof this[subscriptionName] === 'function') {\r\n try {\r\n this[subscriptionName]()\r\n this[subscriptionName] = null\r\n } catch (error) {\r\n console.warn(`[TreeTableModel] Failed to cleanup subscription: ${subscriptionName}`, error)\r\n }\r\n }\r\n })\r\n \r\n console.log('[TreeTableModel] Model subscriptions cleanup completed')\r\n },\r\n \r\n initializeCurrentRowData () {\r\n if (!this.model) return\r\n \r\n let initialData = {}\r\n\r\n // 1. 优先检查共享数据（来自父级）\r\n const sharedData = this.model.getSharedData()\r\n if (sharedData && Object.keys(sharedData).length > 0) {\r\n initialData = sharedData\r\n } else {\r\n // 2. 其次检查 props 或路由参数 (示例逻辑)\r\n // const { rowId } = this.$route.query\r\n // if (rowId) { ... }\r\n }\r\n\r\n // 3. 设置到 Model，这是唯一的数据源初始化入口\r\n this.model.setCurrentRowData(initialData)\r\n \r\n // 4. 同步回本地（虽然 subscribe 会处理，但为了立即能用，这里也设置一下）\r\n this.currentRowData = initialData\r\n },\r\n async refreshTreeData () {\r\n return this.withPerformanceMonitoring('refreshTreeData', async () => {\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 \r\n // 1. 先更新模型（Single Source of Truth）\r\n if (this.model) {\r\n this.model.setSelectedNode(defaultTreeNode)\r\n }\r\n \r\n // 2. 组件层数据通过订阅自动更新，无需手动设置\r\n // this.currentTreeNodeData = defaultTreeNode // 不再需要\r\n \r\n this.$emit('x:tree-refreshed', { \r\n treeData: this.treeData,\r\n currentTreeNode: defaultTreeNode \r\n })\r\n \r\n return this.treeData\r\n })\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 // 1. 先更新模型（Single Source of Truth）\r\n if (this.model) {\r\n this.model.setCurrentTableSelection(selectedRows)\r\n }\r\n \r\n // 2. 组件层数据通过订阅自动更新，无需手动设置\r\n // this.setCurrentTableSelection(selectedRows) // 不再需要\r\n \r\n // 3. 继续后续逻辑\r\n this.$emit('on-change-table-selection', this.currentTableSelection)\r\n this.$emit('x:refresh-exposed', { exposed: this.exposed })\r\n },\r\n setCurrentTableSelection (props = {}) {\r\n return this.withErrorHandling('setCurrentTableSelection', () => {\r\n // 处理数据格式\r\n let processedData\r\n if (this.currentTableMode === 'radio') {\r\n processedData = (type.isArray(props) && props.length > 0) ? props[0] : type.isObject(props) ? props : {}\r\n } else {\r\n processedData = type.isArray(props) ? props : []\r\n }\r\n \r\n // 1. 始终先更新 Model (Single Source of Truth)\r\n if (this.model) {\r\n this.model.setCurrentTableSelection(processedData)\r\n }\r\n \r\n // 2. 组件层数据通过订阅自动更新，无需手动设置\r\n // this.$set(this, 'currentTableSelection', processedData) // 不再需要\r\n \r\n // 3. 对外广播\r\n this.$emit('x:current-table-selection-set', { currentTableSelection: processedData })\r\n \r\n return processedData\r\n }, {})\r\n },\r\n getCurrentTableSelection () {\r\n return this.withErrorHandling('getCurrentTableSelection', () => {\r\n if (this.model) {\r\n return this.model.getCurrentTableSelection()\r\n }\r\n console.warn('[TreeTableModel] Model not initialized, getCurrentTableSelection returning local data')\r\n return this.currentTableSelection || {}\r\n }, {})\r\n },\r\n setCurrentRowData (props = {}) {\r\n return this.withErrorHandling('setCurrentRowData', () => {\r\n // 关键：通过浅克隆断开与 Vue 2 Observer 的引用，保证数据纯净\r\n const newData = props ? { ...props } : {}\r\n \r\n // 1. 始终先更新 Model (Single Source of Truth)\r\n if (this.model) {\r\n this.model.setCurrentRowData(newData)\r\n } else {\r\n console.warn('[TreeTableModel] Model not initialized, cannot setCurrentRowData in model')\r\n }\r\n \r\n // 2. 更新本地视图 (双重保证，避免订阅延迟导致的闪烁)\r\n this.currentRowData = newData\r\n \r\n // 3. 对外广播\r\n // 注意：不再需要手动 emit 事件给外部来同步状态，因为外部如果想监听，应该监听 model 变化\r\n // 但为了兼容旧代码，保持一些必要的 emit 可能是好的，比如 'row-change'\r\n this.$emit('x:current-row-data-set', { currentRowData: this.currentRowData })\r\n \r\n return this.currentRowData\r\n }, {})\r\n },\r\n getCurrentRowData () {\r\n return this.withErrorHandling('getCurrentRowData', () => {\r\n if (this.model) {\r\n return this.model.getCurrentRowData()\r\n }\r\n console.warn('[TreeTableModel] Model not initialized, getCurrentRowData returning local data')\r\n return this.currentRowData || {}\r\n }, {})\r\n },\r\n cleanCurrentModelEffect (clearRowData = true) {\r\n const action = () => {\r\n this.setCurrentTableSelection()\r\n if (clearRowData) {\r\n this.setCurrentRowData({})\r\n }\r\n }\r\n \r\n if (this.model) {\r\n this.model.batch(action)\r\n } else {\r\n action()\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 \r\n // 🔍 关键调试日志 - 开始\r\n console.log('[DEBUG] showModalTable - currentRowData:', currentRowData)\r\n console.log('[DEBUG] showModalTable - currentTreeNodeData:', this.currentTreeNodeData)\r\n console.log('[DEBUG] showModalTable - 是否有model:', !!this.model)\r\n \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处理\r\n console.log('[DEBUG] showModalTable - targetMeta:', targetMeta)\r\n console.log('[DEBUG] showModalTable - 是否有fieldMap:', !!(targetMeta && targetMeta.fieldMap))\r\n \r\n // 解析 fieldMap 参数，使用完整的上下文包括 currentRowData 和父级数据\r\n if (targetMeta && targetMeta.tableMeta.fieldMap) {\r\n const { fieldMap, params = {} } = targetMeta.tableMeta\r\n \r\n console.log('[DEBUG] showModalTable - fieldMap:', fieldMap)\r\n \r\n // 关键：构建完整的上下文，保留原有数据并添加父级节点\r\n const extraContext = {}\r\n \r\n console.log('[DEBUG] showModalTable - extraContext:', extraContext)\r\n \r\n const parsedParams = this.parseFieldMap(fieldMap, extraContext)\r\n \r\n console.log('[DEBUG] showModalTable - parsedParams:', parsedParams)\r\n \r\n // 将解析后的参数传递给 modal table\r\n targetMeta.tableMeta = {\r\n ...targetMeta.tableMeta,\r\n params: {\r\n ...params,\r\n ...parsedParams\r\n }\r\n }\r\n \r\n console.log('[DEBUG] showModalTable - 最终targetMeta.params:', targetMeta.params)\r\n }\r\n \r\n this.modalTableMeta = targetMeta\r\n this.modalTableValue = true\r\n \r\n console.log('[DEBUG] showModalTable - 最终modalTableMeta:', this.modalTableMeta)\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 const selectedNodeData = e.node.$vnode.data.props.dataRef || {}\r\n \r\n // 1. 先更新模型（Single Source of Truth）\r\n if (this.model) {\r\n this.model.setSelectedNode(selectedNodeData)\r\n }\r\n\r\n // 2. 组件层数据通过订阅自动更新，无需手动设置\r\n // this.currentTreeNodeData = selectedNodeData // 不再需要\r\n \r\n // 3. 继续后续逻辑\r\n // 使用统一的字段映射解析方法，自动包含所需的上下文\r\n const execFieldMapRet = this.parseFieldMap(fieldMap)\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 \r\n // 使用统一的字段映射解析方法\r\n const fieldMapRet = this.parseFieldMap(fieldMap)\r\n \r\n try {\r\n const startTime = performance.now()\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 \r\n // 性能监控\r\n const duration = performance.now() - startTime\r\n console.log(`[TreeTableModel] Tree data request took ${duration.toFixed(2)}ms`)\r\n \r\n // 通过模型设置树数据\r\n if (this.model) {\r\n this.model.setTreeData(ret)\r\n }\r\n \r\n return ret\r\n } catch (error) {\r\n console.error('[TreeTableModel] Failed to request tree data:', error)\r\n // 错误时设置空数据\r\n if (this.model) {\r\n this.model.setTreeData([])\r\n }\r\n return []\r\n }\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 \r\n // 更新查询参数\r\n this.tableQuerys = Object.assign(this.tableQuerys, { \r\n currentPage: this.tableQuerys.currentPage || 1, \r\n pageSize: this.tableQuerys.pageSize || page.pageSize || 10 \r\n }, props)\r\n \r\n // 通过模型设置加载状态\r\n if (this.model) {\r\n this.model.setLoading(true)\r\n }\r\n \r\n this.$emit(RESERVE_EVENT_NAMES.WATCH, { ...this.exposed })\r\n \r\n try {\r\n const startTime = performance.now()\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 \r\n // 通过模型设置数据\r\n if (this.model) {\r\n this.model.batch(() => {\r\n this.model.setTableData(data || [])\r\n this.model.setTotal(count || 0)\r\n this.model.setPagination(\r\n this.tableQuerys.currentPage || 1,\r\n this.tableQuerys.pageSize || page.pageSize || 10\r\n )\r\n })\r\n }\r\n \r\n // 性能监控\r\n const duration = performance.now() - startTime\r\n console.log(`[TreeTableModel] Table data request took ${duration.toFixed(2)}ms, returned ${(data || []).length} items`)\r\n \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 \r\n // 更新本地数据（保持兼容）\r\n this.tableData = ret\r\n this.total = this.model ? this.model.getTotal() : 0\r\n \r\n return ret\r\n } catch (error) {\r\n console.error('[TreeTableModel] Failed to request table data:', error)\r\n \r\n // 错误时设置空数据\r\n if (this.model) {\r\n this.model.setTableData([])\r\n this.model.setTotal(0)\r\n }\r\n \r\n this.tableData = []\r\n this.total = 0\r\n return []\r\n } finally {\r\n const finalize = () => {\r\n if (this.model) {\r\n this.model.setLoading(false)\r\n }\r\n this.loading = false\r\n // 清理当前模型效果（不清空currentRowData）\r\n this.cleanCurrentModelEffect(false)\r\n }\r\n\r\n // 使用 batch 确保 loading 状态改变和清理操作原子化\r\n if (this.model) {\r\n this.model.batch(finalize)\r\n } else {\r\n finalize()\r\n }\r\n }\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 // 计算表格高度：外层容器高度应覆盖到视口底部；分页高度由 ele-table 内部自行扣减\r\n const calculatedHeight = currentViewportHeight - tableToTop - this.overHeight\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 observeSearchAreaHeight () {\r\n const searchAreaRef = this.$refs[this.searchArea]\r\n const searchAreaEl = searchAreaRef && searchAreaRef.$el\r\n if (!searchAreaEl || typeof ResizeObserver === 'undefined') return\r\n\r\n this.resizeObserverSearchArea = new ResizeObserver(entries => {\r\n for (const entry of entries) {\r\n requestAnimationFrame(() => {\r\n this.calculateTableHeight()\r\n if (this.showTree) {\r\n this.calculateTreeHeight()\r\n }\r\n })\r\n }\r\n })\r\n this.resizeObserverSearchArea.observe(searchAreaEl)\r\n },\r\n async keepAliveRefresh () {\r\n return this.withPerformanceMonitoring('keepAliveRefresh', async () => {\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 // 刷新列表数据\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 this.$emit('x:refresh-completed', { \r\n tableData: this.tableData,\r\n treeData: this.treeData,\r\n currentRowData: this.currentRowData\r\n })\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 this.observeSearchAreaHeight()\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.resizeObserverSearchArea) {\r\n this.resizeObserverSearchArea.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 this.cleanupModelSubscriptions()\r\n // 清理模型数据\r\n this.model.cleanup()\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 */"]
|
|
3932
4014
|
},
|
|
3933
4015
|
media: undefined
|
|
3934
4016
|
});
|
|
3935
4017
|
};
|
|
3936
4018
|
/* scoped */
|
|
3937
|
-
var __vue_scope_id__$B = "data-v-
|
|
4019
|
+
var __vue_scope_id__$B = "data-v-08876ae3";
|
|
3938
4020
|
/* module identifier */
|
|
3939
4021
|
var __vue_module_identifier__$B = undefined;
|
|
3940
4022
|
/* functional template */
|