fastlion-amis
Version:
一种MIS页面生成工具
873 lines • 71.9 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TableBody = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(require("react"));
var types_1 = require("../../types");
var TableRow_1 = require("./TableRow");
var tpl_1 = require("../../utils/tpl");
var mobx_react_1 = require("mobx-react");
var helper_1 = require("../../utils/helper");
var LionContextMenu_1 = require("../Lion/components/LionContextMenu");
var utils_1 = require("../Lion/utils/utils");
var msgsub_1 = tslib_1.__importDefault(require("../Lion/utils/msgsub"));
var lodash_1 = require("lodash");
var utils_2 = require("../../utils/utils");
var modal_1 = tslib_1.__importDefault(require("antd/lib/modal"));
var button_1 = tslib_1.__importDefault(require("antd/lib/button"));
var react_dom_1 = require("react-dom");
var PropertyModal_1 = require("./PropertyModal");
var PropertyModal_2 = tslib_1.__importDefault(require("./PropertyModal"));
var icons_1 = require("../../components/icons"); // 重新引入ICON
var commonTableFunction_1 = require("../../store/utils/commonTableFunction");
var defaultVirtualScrollParam = {
// 行高
rowHeight: 0,
// 滚动窗口高度
scrollWindowHeight: 0,
// 滚动窗口宽度
scrollWindowWidth: 0,
// 根据条目数量以及行高计算的实际高度
datalistRealHeight: 0,
scrollHeight: 0,
scrollLeft: 0,
// 页面上默认显示的行数
elementOnOneScreenCount: 30,
// 页面上默认显示的列数
elementOnOneScreenWidth: 10,
// 页面上已经渲染的行起始索引
startShowIndex: 0,
// 页面上已经渲染的列起始索引
startColIndex: 0,
// 页面上已经渲染的列结束索引
endColIndex: Infinity,
// 预渲染倍率 PC端
preRenderRate: 0.1,
// 预渲染倍率 移动端
mobilePreRenderRate: 0.4,
// 行高是否稳定
rowHeightisStable: false
};
var TableBody = /** @class */ (function (_super) {
tslib_1.__extends(TableBody, _super);
function TableBody(props) {
var _this = this;
var _a, _b, _c;
_this = _super.call(this, props) || this;
_this.rowSpansCache = {}; // 行合并缓存
_this.textWidthCache = {}; // 文本宽度缓存
// 获取行高方法计数-防止多次获取影响性能
_this.getRowHighCount = 0;
_this.getRowHigh = function () {
var _a, _b, _c, _d;
if (_this.virtualScrollParam.rowHeight)
return _this.virtualScrollParam.rowHeight;
var firstTrHigh = Math.ceil(((_d = (_c = (_b = (_a = _this.props.tabeleDom) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.querySelector('tr[data-id]')) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect) === null || _d === void 0 ? void 0 : _d.call(_c).height) || 0);
// 如果第一个元素还在 用第一个元素的
if (firstTrHigh)
return firstTrHigh + 2;
// 用上次的
return _this.virtualScrollParam.rowHeight;
};
_this.onScrollRender = false;
// 存放虚拟滚动的配置
_this.virtualScrollParam = defaultVirtualScrollParam;
_this.getViewWindowHigh = function () {
var _a, _b;
var tabeleDom = _this.props.tabeleDom;
var containerHigh = (_a = tabeleDom === null || tabeleDom === void 0 ? void 0 : tabeleDom.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height;
var containerWidth = (_b = tabeleDom === null || tabeleDom === void 0 ? void 0 : tabeleDom.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().width;
// 更新窗体高度 记得去掉表头高度
_this.setVirtualScrollParam({
scrollWindowHeight: containerHigh,
scrollWindowWidth: containerWidth
});
};
_this.totalRowCount = function () {
return (1 +
_this.props.rows.length +
(!(0, lodash_1.isNil)(_this.props.affixRowPosition) ? 1 : 0)) *
_this.virtualScrollParam.rowHeight;
};
_this.leftDistances = [];
_this.forceResizeTable = function () {
_this.getViewWindowHigh();
// 重新渲染-稍微调整下滚动高度触发重绘
_this.setState({ scrollHeight: _this.state.scrollHeight + 1 });
};
_this.dom = react_1.default.createRef();
_this.caculateTextWidth = function () {
var _a, _b, _c, _d;
var textWidth = {};
Array.from((_b = (_a = _this.props.tabeleDom) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.querySelectorAll('table>thead>tr>th[column-name]')).map(function (_) {
var _a;
// 2是左右padding
var thName = _.getAttribute('column-name');
var tdWidth = _.getBoundingClientRect().width;
// 算不出宽度的话返回
if (!tdWidth)
return;
textWidth[thName || ''] = { textWidth: tdWidth };
if (thName === 'operation') {
textWidth[thName || ''].foldTextWidth = tdWidth;
textWidth[thName || ''].unfoldTextWidth = 54;
}
if (((_a = _this.props.columns.find(function (_) { return _.name === thName; })) === null || _a === void 0 ? void 0 : _a.type) === 'lion-upload') {
// 文件的宽度默认就是200
textWidth[thName || ''] = { textWidth: 200 };
}
});
(_d = (_c = _this.props.store) === null || _c === void 0 ? void 0 : _c.setTextWidth) === null || _d === void 0 ? void 0 : _d.call(_c, textWidth); // 添加注释-不然没法提交
};
_this.handleItemAction = function (e) {
var _a;
var _b = _this.props, data = _b.data, rows = _b.rows, onAction = _b.onAction, itemAction = _b.itemAction;
var current = _this.state.current;
//itemAction中的某个字段在当前表格中不存在，会被赋值为undefined传到目标组件，导致目标组件获取不到该字段
var ctx = (0, helper_1.createObject)(data, ((_a = rows[current]) === null || _a === void 0 ? void 0 : _a.data) || {}, {}, true);
onAction && onAction(e, itemAction, ctx, true);
};
_this.debounceHandleItemAction = (0, lodash_1.debounce)(_this.handleItemAction.bind(_this), 500);
_this.startTableShowIndex = function () {
return Math.max(_this.virtualScrollParam.startShowIndex -
Math.ceil(_this.virtualScrollParam.elementOnOneScreenCount *
_this.virtualScrollParam.preRenderRate), 0);
};
_this.endTableShowIndex = function () {
return Math.max(Math.min(_this.virtualScrollParam.startShowIndex +
Math.ceil(_this.virtualScrollParam.elementOnOneScreenCount *
(1 + _this.virtualScrollParam.preRenderRate)), _this.props.dataRows.length));
};
_this.showAll = true;
_this.changeSummary = function (visible, isAll) {
_this.showAll = !!isAll;
_this.setState({ summaryVisible: visible });
};
_this.cachedStatisticRows = {
all: null,
selected: null
};
_this.summaryHeight = 0;
_this.summaryContent = function () {
var _a = _this.props, affixRow = _a.affixRow, type = _a.type, columns = _a.columns, rows = _a.rows, data = _a.data, render = _a.render, __ = _a.translate;
var list = affixRow === null || affixRow === void 0 ? void 0 : affixRow.filter(function (item) { return item.name; });
//对list进行排序，根据columns的顺序来展示
var showList = [];
columns.forEach(function (item) {
var _a, _b, _c;
var rawName = (_a = item.pristine.rawName) !== null && _a !== void 0 ? _a : item.name;
if ((_c = (_b = item.pristine) === null || _b === void 0 ? void 0 : _b.group) === null || _c === void 0 ? void 0 : _c.length) {
item.pristine.group.forEach(function (groupItem) {
var targetField = list === null || list === void 0 ? void 0 : list.find(function (litem) { return litem.name === groupItem.name; });
if (targetField)
showList.push(targetField);
});
}
var targetField = list === null || list === void 0 ? void 0 : list.find(function (litem) { return litem.name === rawName; });
if (targetField)
showList.push(targetField);
});
return showList.map(function (item) {
var _a, _b, _c, _d, _e;
var column = columns.find(function (col) {
var _a, _b, _c;
var rawName = (_a = col.pristine.rawName) !== null && _a !== void 0 ? _a : col.name;
if ((_c = (_b = col.pristine) === null || _b === void 0 ? void 0 : _b.group) === null || _c === void 0 ? void 0 : _c.length) {
return col.pristine.group.find(function (groupCol) { var _a; return ((_a = groupCol.rawName) !== null && _a !== void 0 ? _a : groupCol.name) === item.name; });
}
return item.name == rawName;
});
if ((_b = (_a = column === null || column === void 0 ? void 0 : column.pristine) === null || _a === void 0 ? void 0 : _a.group) === null || _b === void 0 ? void 0 : _b.length) {
column = column.pristine.group.find(function (groupCol) { var _a; return ((_a = groupCol.rawName) !== null && _a !== void 0 ? _a : groupCol.name) === item.name; });
}
if (!column)
return null;
var selectedList = data.selectedItems.toJSON();
var items = data.items;
var formulaRule = item.formula.toLocaleLowerCase();
var calc = (0, utils_2.calcFn)(formulaRule, (_c = column === null || column === void 0 ? void 0 : column.name) !== null && _c !== void 0 ? _c : '', _this.showAll ? items : selectedList);
return (react_1.default.createElement("div", { className: "summary-row-box" },
react_1.default.createElement("div", { className: "field-name" }, (_d = item.label) !== null && _d !== void 0 ? _d : ''),
formulaRule === 'count' ? (react_1.default.createElement("div", { className: "field-value" }, calc)) : (react_1.default.createElement("div", { className: "field-value" }, render('', tslib_1.__assign(tslib_1.__assign({}, ((_e = column === null || column === void 0 ? void 0 : column.pristine) !== null && _e !== void 0 ? _e : column)), { type: 'number' }), { value: calc })))));
});
};
_this.renderSummaryFooter = function () {
return (react_1.default.createElement("div", null,
react_1.default.createElement(button_1.default, { block: true, ghost: true, type: "link", style: { letterSpacing: '5px', fontSize: '16px' }, onClick: function () { return _this.changeSummary(false); } }, "\u786E\u5B9A")));
};
_this.onItemClick = function (index) { var _a; return _this.handleContextMenu(index, (_a = _this.props.tableCtxMenuStore) === null || _a === void 0 ? void 0 : _a.position); };
_this.handleCloseInfoModal = function () {
_this.setState({ columnInfoForDebug: undefined });
};
// 计算出来的应有的高度
var tableContent = (_b = (_a = _this.props.tabeleDom) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.querySelector('[class*="Table-content"]');
var isDebug = !!localStorage.getItem('debugMode');
var state = {
index: 0,
current: null,
scrollWindowHeight: 0,
datalistRealHeight: 0,
scrollHeight: 0,
scrollLeft: 0,
rowCount: 0,
pullY: 0,
columnsOrder: [],
filterParam: {},
canVirtualScroll: false,
clearFormat: false,
summaryVisible: false,
columnInfoForDebug: {}
};
// 初始化菜单选项
_this.menuItems = [
{ id: 0, title: '复制单元格' },
{ id: 1, title: '复制单元格名称' },
{ id: 2, title: '复制行' },
{ id: 3, title: '复制行和表头' },
{ id: 4, title: '复制列', children: [] },
{
id: 5,
title: _this.props.loadDataOnce && _this.props.showPerPage
? '复制当前页数据'
: '复制全部数据'
}
]
.concat(_this.props.loadDataOnce && _this.props.showPerPage
? { id: 6, title: '复制全部数据' }
: [])
.concat({
id: 7,
title: '复制时去除格式',
isCheckbox: true
})
.concat(isDebug ? [{ id: 8, title: '查看属性' }] : []);
_this.textWidthCache = tslib_1.__assign({}, _this.props.store.textWidhMap);
// 滚动容器调整
var _d = _this.props, tabeleDom = _d.tabeleDom, contentDom = _d.contentDom;
// 移动端滚动容器是content
state.canVirtualScroll = false;
if ((0, helper_1.isMobile)()) {
if (contentDom === null || contentDom === void 0 ? void 0 : contentDom.current) {
// this.scrollContaner = contentDom?.current
// 滑动是自动的就可当他是自动填充高度
// state.canVirtualScroll = getComputedStyle(contentDom?.current).overflow === 'auto'
state.canVirtualScroll = false;
}
}
else if (tabeleDom === null || tabeleDom === void 0 ? void 0 : tabeleDom.current) {
_this.scrollContaner = tabeleDom === null || tabeleDom === void 0 ? void 0 : tabeleDom.current;
//pc端定死,并且没有找到自动框高高度才能进行滑动 并且表格数据大于200 一点点的没必要搞这个
// console.log(this.props.columns.map(_ => _.pristine.format), this.props.columns.find(_ => _.pristine.format === 'autoHeight'), tableContent?.style?.height && !(this.props.columns.find(_ => _.pristine.format === 'autoHeight')))
state.canVirtualScroll =
(((_c = tableContent === null || tableContent === void 0 ? void 0 : tableContent.style) === null || _c === void 0 ? void 0 : _c.height) ||
_this.props.autoFillHeight ||
!_this.props.autoFillHeight === undefined) &&
!_this.props.columns.find(function (_) { return _.pristine.format === 'autoHeight'; }) &&
!_this.props.isTabsDom;
// state.canVirtualScroll = tableContent?.style?.height
}
// 赋值state0
_this.state = state;
window.addEventListener('resize', _this.getViewWindowHigh);
_this.virtualScrollParam = tslib_1.__assign(tslib_1.__assign({}, defaultVirtualScrollParam), { preRenderRate: (0, helper_1.isMobile)()
? defaultVirtualScrollParam.mobilePreRenderRate
: defaultVirtualScrollParam.preRenderRate });
_this.headCurrentRows = _this.headCurrentRows.bind(_this);
_this.headKeydown = _this.headKeydown.bind(_this);
_this.setVirtualScrollParam = _this.setVirtualScrollParam.bind(_this);
_this.scrollHandle = _this.scrollHandle.bind(_this);
_this.resetScroll = _this.resetScroll.bind(_this);
_this.handleCloseInfoModal = _this.handleCloseInfoModal.bind(_this);
return _this;
}
TableBody.prototype.componentWillUnmount = function () {
var _a, _b;
(_b = (_a = this.scrollContaner) === null || _a === void 0 ? void 0 : _a.removeEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, 'scroll', this.scrollHandle);
// 拖拽时表格大小重新计算的事件，由grid组件放开鼠标时触发
document.body.removeEventListener(types_1.ResizeEvent.DRAGCONTENTRESIZE, this.forceResizeTable);
window.removeEventListener('resize', this.getViewWindowHigh);
this.dom = null;
// 移除绑定
var curDom = (0, react_dom_1.findDOMNode)(this);
curDom.onkeydown = null;
this.scrollContaner = null;
};
TableBody.prototype.scrollHandle = function (e) {
var _this = this;
if (!this.state.canVirtualScroll)
return;
if (!this.virtualScrollParam.rowHeight)
this.getRowHigh();
if (this.debounceTimer)
clearTimeout(this.debounceTimer); // 滚动节流
var scrollTop = this.scrollContaner.scrollTop;
var scrollLeft = this.scrollContaner.scrollLeft;
// 如果滚动位置变化小于阈值则不更新
var verticalDiff = Math.abs(this.state.scrollHeight - scrollTop);
var horizontalDiff = Math.abs(this.state.scrollLeft - scrollLeft);
if (verticalDiff < this.virtualScrollParam.rowHeight &&
horizontalDiff < 10) {
return;
}
// 计算需要渲染的行范围
var needShowRowIndex = scrollTop
? Math.floor(scrollTop / this.virtualScrollParam.rowHeight)
: 0;
this.virtualScrollParam.startShowIndex = needShowRowIndex;
// 计算需要渲染的列范围
var startColIndex = 0;
var endColIndex = this.leftDistances.length - 1;
if (false &&
this.leftDistances.length > 0 &&
Object.values(this.textWidthCache).length) {
// 使用二分查找优化列范围计算
var findNearestColIndex = function (target) {
var left = 0;
var right = _this.leftDistances.length - 1;
while (left <= right) {
var mid = Math.floor((left + right) / 2);
if (_this.leftDistances[mid] <= target) {
left = mid + 1;
}
else {
right = mid - 1;
}
}
return Math.max(0, left - 1);
};
// 计算可见列范围，并添加预渲染缓冲区
var preRenderRate = (0, helper_1.isMobile)()
? this.virtualScrollParam.mobilePreRenderRate
: this.virtualScrollParam.preRenderRate;
// 将预渲染列数从1倍增加到1.5倍
var preRenderCols = Math.ceil(this.virtualScrollParam.elementOnOneScreenWidth * preRenderRate);
startColIndex = findNearestColIndex(scrollLeft) - preRenderCols;
startColIndex = Math.max(0, startColIndex);
var visibleRight = scrollLeft + this.virtualScrollParam.scrollWindowWidth;
endColIndex = findNearestColIndex(visibleRight) + preRenderCols;
endColIndex = Math.min(endColIndex + preRenderCols, this.leftDistances.length - 1);
this.virtualScrollParam.startColIndex = startColIndex;
this.virtualScrollParam.endColIndex = endColIndex;
// 如果是移动端，同时更新垂直和水平滚动位置
if ((0, helper_1.isMobile)()) {
this.setState({
scrollHeight: scrollTop,
scrollLeft: scrollLeft
});
}
// // 如果是PC端，下一帧渲染完之前禁止再次渲染
else {
this.setState({
scrollHeight: scrollTop,
scrollLeft: scrollLeft
});
}
}
else {
// 仅更新纵向滚动的情况
if ((0, helper_1.isMobile)()) {
this.setState({
scrollHeight: scrollTop
});
}
else {
this.setState({
scrollHeight: scrollTop
});
}
}
};
//更新时
TableBody.prototype.componentDidUpdate = function (prevProps, prevState, snapshot) {
var _a, _b, _c, _d, _e;
// prevProps 是之前的 props，可以通过它来对比属性值的变化
var _f = this.props, data = _f.data, rows = _f.rows, store = _f.store, activeRow = _f.activeRow, columns = _f.columns, affixRow = _f.affixRow;
if (!(0, lodash_1.isEqual)(this.props.store.textWidhMap, this.textWidthCache)) {
this.textWidthCache = tslib_1.__assign({}, this.props.store.textWidhMap);
if (!Object.keys(this.textWidthCache).length) {
// 防止出现中途textWidth被移除但是开始结束已经被修改了的情况
this.virtualScrollParam.startColIndex = 0;
this.virtualScrollParam.endColIndex = this.props.columns.length;
}
}
// 如果相关props发生变化，清除缓存
if (prevProps.columns !== columns ||
prevProps.affixRow !== affixRow ||
prevProps.data.selectedItems !== data.selectedItems ||
prevProps.rows !== rows) {
this.cachedStatisticRows = {
all: null,
selected: null
};
}
var prevData = prevProps.data;
var prevStore = prevProps.store;
// 页码发生了变化 或者行数发生了变化-表格行发生变化,或者排序发生变化
var storeSorts = Array.from(((_b = (_a = store === null || store === void 0 ? void 0 : store.orderColumns) === null || _a === void 0 ? void 0 : _a.values) === null || _b === void 0 ? void 0 : _b.call(_a)) || []);
var storeFilterParam = store === null || store === void 0 ? void 0 : store.data.filterParam;
var filterParamIsChange = JSON.stringify(prevState.filterParam) !==
JSON.stringify(storeFilterParam || {}); // 筛选条件发生变化的情况
if (((data.page !== prevData.page || data.perPage !== prevData.perPage) &&
!(0, helper_1.isMobile)()) ||
filterParamIsChange) {
var changeState = {};
if (filterParamIsChange) {
changeState['filterParam'] = storeFilterParam || {};
this.setState(tslib_1.__assign({}, changeState));
}
this.resetScroll();
}
// 如果计算的前态是false 后态是true 触发计算
if (this.props.autoWidth && !prevProps.autoWidth) {
this.caculateTextWidth();
}
else if (!this.props.autoWidth && prevProps.autoWidth) {
this.props.store.setTextWidth({});
}
if (activeRow !== prevProps.activeRow && !(0, lodash_1.isNil)(activeRow)) {
var ketSelect = (_d = (_c = this.props.tabeleDom) === null || _c === void 0 ? void 0 : _c.current) === null || _d === void 0 ? void 0 : _d.querySelector(".active-cell");
if (!ketSelect) {
(_e = this.scrollContaner) === null || _e === void 0 ? void 0 : _e.scrollTo({
top: activeRow * this.virtualScrollParam.rowHeight
});
}
}
};
// 模拟高度填充的dom
TableBody.prototype.componentDidMount = function () {
var _a;
var _b, _c, _d, _e, _f, _g, _h, _j;
this.showColumns = (0, lodash_1.cloneDeep)(this.props.columns);
this.hasEdit = this.showColumns.some(function (_) { return _.pristine.quickEdit; });
if (((_b = this.props.store) === null || _b === void 0 ? void 0 : _b.mobileUI) &&
this.props.footable &&
this.props.footableColumns.length) {
(_a = this.showColumns).splice.apply(_a, tslib_1.__spreadArray([-1, 0], this.props.footableColumns, false));
}
var tabeleDom = this.props.tabeleDom;
var containerHigh = (_c = this.scrollContaner) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect().height;
var containerWidth = (_d = this.scrollContaner) === null || _d === void 0 ? void 0 : _d.getBoundingClientRect().width;
// 防止之前有挂载
(_f = (_e = this.scrollContaner) === null || _e === void 0 ? void 0 : _e.removeEventListener) === null || _f === void 0 ? void 0 : _f.call(_e, 'scroll', this.scrollHandle);
(_h = (_g = this.scrollContaner) === null || _g === void 0 ? void 0 : _g.addEventListener) === null || _h === void 0 ? void 0 : _h.call(_g, 'scroll', this.scrollHandle, {
passive: false
});
// 拖拽时表格大小重新计算的事件，原来没监听 手动写一个
document.body.addEventListener(types_1.ResizeEvent.DRAGCONTENTRESIZE, this.forceResizeTable);
var leftDistances = [];
// 计算
// 如果有元素才计算
if (tabeleDom === null || tabeleDom === void 0 ? void 0 : tabeleDom.current) {
// 更精确地计算各列的leftDistances
var thElements = Array.from((_j = tabeleDom === null || tabeleDom === void 0 ? void 0 : tabeleDom.current) === null || _j === void 0 ? void 0 : _j.querySelectorAll('table>thead>tr>th[column-name]'));
var totalWidth = 0;
leftDistances.push(0); // 第一列的leftDistance为0
for (var i = 0; i < thElements.length; i++) {
var rect = thElements[i].getBoundingClientRect();
totalWidth += rect.width;
leftDistances.push(totalWidth);
}
}
this.leftDistances = leftDistances;
this.setVirtualScrollParam({
scrollWindowHeight: containerHigh,
scrollWindowWidth: containerWidth
});
};
TableBody.prototype.setVirtualScrollParam = function (option) {
this.virtualScrollParam = tslib_1.__assign(tslib_1.__assign({}, this.virtualScrollParam), option);
// 设定行高
this.virtualScrollParam.rowHeight = this.getRowHigh();
// 根据行高计算应当显示多少个
// 如果有leftDistances数据，计算横向显示数量
// 动态计算一屏能显示的列数
if (this.leftDistances.length > 1 &&
this.virtualScrollParam.scrollWindowWidth) {
var visibleCols = 0;
for (var i = 1; i < this.leftDistances.length; i++) {
if (this.leftDistances[i] - this.leftDistances[0] <=
this.virtualScrollParam.scrollWindowWidth) {
visibleCols = i;
}
else {
break;
}
}
this.virtualScrollParam.elementOnOneScreenWidth = Math.max(visibleCols, 1);
}
if (this.virtualScrollParam.rowHeight &&
this.virtualScrollParam.scrollWindowHeight) {
this.virtualScrollParam.elementOnOneScreenCount = Math.ceil(this.virtualScrollParam.scrollWindowHeight /
this.virtualScrollParam.rowHeight);
}
};
TableBody.prototype.headCurrentRows = function (index, val, inited) {
var _this = this;
var rowHeight = this.getRowHigh();
// 初始化调整高度用的
if (!this.virtualScrollParam.rowHeight) {
// 展示数量为视图高/行高的两倍
this.setVirtualScrollParam({ rowHeight: rowHeight });
this.setState({ scrollHeight: this.state.scrollHeight + 1 }); // 调整一下滚动高度 触发重新渲染表格高
}
// 如果已经有值并且是初始化触发的 直接返回
if (this.state.index && inited)
return;
this.setState({
index: index,
current: index
}, function () {
var _a, _b;
(_b = (_a = _this.props).changeSelectedRow) === null || _b === void 0 ? void 0 : _b.call(_a, index);
if (_this.props.autoWidth &&
inited &&
!Object.keys(_this.textWidthCache).length) {
var timer_1;
_this.caculateTextWidth();
// 重新计算宽度
var resizeFn_1 = function () {
clearTimeout(timer_1);
timer_1 = setTimeout(function () {
requestAnimationFrame(function () {
var _a, _b;
(_b = (_a = _this.props.store) === null || _a === void 0 ? void 0 : _a.setTextWidth) === null || _b === void 0 ? void 0 : _b.call(_a, {});
_this.caculateTextWidth();
document.body.removeEventListener(types_1.ResizeEvent.MAPPING_RENDERED, resizeFn_1);
});
}, 50);
};
// 注册监听
document.body.addEventListener(types_1.ResizeEvent.MAPPING_RENDERED, resizeFn_1);
// 到时候取消
timer_1 = setTimeout(function () {
document.body.removeEventListener(types_1.ResizeEvent.MAPPING_RENDERED, resizeFn_1);
}, 100);
}
var curDom = (0, react_dom_1.findDOMNode)(_this);
if (curDom) {
curDom.onkeydown = function (e) {
var _a;
if (((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.nodeName) !== 'INPUT')
e.stopImmediatePropagation();
_this.headKeydown(e, val);
};
}
});
};
TableBody.prototype.headKeydown = function (e, val) {
var _this = this;
var _a = this.props, rows = _a.rows, itemAction = _a.itemAction;
var current = this.state.current;
if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
// tbody及高度
var currentParent = this.dom.current.parentElement.parentElement;
//cxd-Table-content
//可视区域，不包括头部
if (e.key === 'ArrowUp') {
if (current > 0) {
--current;
this.setState({ current: current }, function () {
if (itemAction) {
_this.debounceHandleItemAction(e);
}
});
}
}
if (e.key === 'ArrowDown') {
if (current < rows.length - 1) {
++current;
this.setState({ current: current }, function () {
if (itemAction) {
_this.debounceHandleItemAction(e);
}
});
}
}
}
if (e.key === 'Enter') {
this.setState({ index: current }, function () {
if (itemAction) {
_this.debounceHandleItemAction(e);
}
});
}
};
TableBody.prototype.resetScroll = function () {
var _a, _b;
var _c = this.props, tabeleDom = _c.tabeleDom, rows = _c.rows;
this.virtualScrollParam.startShowIndex = 0;
this.virtualScrollParam.datalistRealHeight =
this.virtualScrollParam.rowHeight * rows.length;
this.setState({ scrollHeight: 0 });
(_a = tabeleDom === null || tabeleDom === void 0 ? void 0 : tabeleDom.current) === null || _a === void 0 ? void 0 : _a.scroll((_b = tabeleDom === null || tabeleDom === void 0 ? void 0 : tabeleDom.current) === null || _b === void 0 ? void 0 : _b.scrollLeft, 0);
};
TableBody.prototype.renderRows = function (rows, columns, rowProps, _generateAcahe) {
var _this = this;
if (columns === void 0) { columns = this.props.columns; }
if (rowProps === void 0) { rowProps = {}; }
var _a = this.props, rowClassName = _a.rowClassName, rowClassNameExpr = _a.rowClassNameExpr, onAction = _a.onAction, buildItemProps = _a.buildItemProps, checkOnItemClick = _a.checkOnItemClick, cx = _a.classnames, render = _a.render, renderCell = _a.renderCell, onCheck = _a.onCheck, onQuickChange = _a.onQuickChange, footable = _a.footable, ignoreFootableContent = _a.ignoreFootableContent, footableColumns = _a.footableColumns, itemAction = _a.itemAction, store = _a.store, tableLayout = _a.tableLayout, handleJump = _a.handleJump, activeCol = _a.activeCol, activeRow = _a.activeRow, hiddenRowHighlight = _a.hiddenRowHighlight, env = _a.env, translate = _a.translate;
// Aug
var allColumns = this.showColumns;
// 渲染元素的index
var startShowIndex = this.startTableShowIndex(); // 预先渲染前一屏
var EndShowIndex = this.endTableShowIndex(); // 预先渲染后一屏
var extraRowSpan = undefined; // 额外的合并列-这个仅对第一列有效果
var showRows = !this.state.canVirtualScroll
? rows
: rows.slice(startShowIndex, EndShowIndex);
// 如果有合并要求 开启计算
if (this.props.hasCombineNum) {
extraRowSpan = {};
Object.keys(store.rowSpanIndexsInterval).map(function (key) {
var _interval = store.rowSpanIndexsInterval[key];
// 找到第一个小大于开始下标的rowspan的位置
var firstInterval = _interval.find(function (rowLength) { return rowLength > startShowIndex; });
// 设置额外值
if (extraRowSpan)
extraRowSpan[key] = firstInterval - startShowIndex;
});
// 额外rowspan对象
}
// 记录迭代对象-为了方便子代都能用到使用引用
var generateAcahe = _generateAcahe || {
index: 0
};
var _rows = showRows.map(function (item, index) {
var itemIndex = startShowIndex + generateAcahe.index;
// 增加缓存的下标书
generateAcahe.index++;
var itemProps = buildItemProps
? buildItemProps(item, item.index)
: null;
var itemHighlight = !hiddenRowHighlight && _this.state.index == itemIndex;
var currentHighlight = !hiddenRowHighlight && _this.state.current == itemIndex;
// 防止一直刷新导致重新渲染
// 使用行索引作为缓存键
var cacheKey = itemIndex;
// 尝试从缓存获取trRowSpans
var cachedRowSpans = _this.rowSpansCache[cacheKey];
var currentRowSpans = extraRowSpan || item.rowSpans;
// 计算实际需要的行合并信息
var trRowSpans;
if (currentRowSpans && Object.keys(currentRowSpans).length) {
trRowSpans = tslib_1.__assign({}, currentRowSpans);
// 调整底部超出行合并值
for (var key in trRowSpans) {
if (index + trRowSpans[+key] > showRows.length) {
trRowSpans[+key] = showRows.length - index;
}
}
// 比较缓存值与当前值
if (cachedRowSpans && (0, lodash_1.isEqual)(cachedRowSpans, trRowSpans)) {
// 使用缓存值避免重新渲染
trRowSpans = cachedRowSpans;
}
else {
// 更新缓存
_this.rowSpansCache[cacheKey] = trRowSpans;
}
}
var getTr = function (isFootTable) {
return (react_1.default.createElement(TableRow_1.TableRow, tslib_1.__assign({}, itemProps, { textWidthCache: _this.textWidthCache, trRowSpans: trRowSpans, rowHeight: _this.virtualScrollParam.rowHeight || undefined, hasEdit: _this.hasEdit, tableName: _this.props.tableName, autoWidth: _this.props.autoWidth, tableId: _this.props.tableId, checkItem: _this.props.checkItem,
// showContextMenu={this.props.tableStore.showContextMenu}
setBorder: _this.props.setBorder, multiple: _this.props.multiple, tableLayout: tableLayout, itemAction: itemAction, classnames: cx, translate: translate, leftDistances: _this.leftDistances, operationColumn: _this.props.operationColumn, scrollWindowWidth: _this.virtualScrollParam.scrollWindowWidth, startColIndex: _this.virtualScrollParam.startColIndex, endColIndex: _this.virtualScrollParam.endColIndex, checkOnItemClick: checkOnItemClick, key: item.id + _this.props.data.dataSetId, itemIndex: itemIndex, item: item, headCurrentRows: _this.headCurrentRows, itemHighlight: itemHighlight, currentHighlight: currentHighlight, itemClassName: cx(rowClassNameExpr
? (0, tpl_1.filter)(rowClassNameExpr, item.data)
: rowClassName, {
'is-last': item.depth > 1 && itemIndex === rows.length - 1
}),
// columns={columns}
// Aug 移动端且展开更多信息时加载所有列
columns: (store === null || store === void 0 ? void 0 : store.mobileUI) && item.expanded ? allColumns : columns, canAccessSuperData: _this.props.canAccessSuperData, renderCell: renderCell, render: render, onAction: onAction, onCheck: onCheck,
// todo 先注释 quickEditEnabled={item.depth === 1}
onQuickChange: onQuickChange }, rowProps, { primaryField: _this.props.primaryField, firstColumnName: _this.props.firstColumnName,
// Jay
store: _this.props.store, stickyWidths: _this.props.stickyWidths, handleJump: handleJump, activeCol: activeCol, activeRow: activeRow, env: env }, (isFootTable
? {
footableMode: true,
footableColSpan: columns.length,
ignoreFootableContent: { ignoreFootableContent: ignoreFootableContent }
}
: {}))));
};
var doms = [getTr(false)];
// 使用过一次就可以消耗掉了-因为第一个的
extraRowSpan = undefined;
// Aug 加入mobile判断，移动端将列统一放在上面一个tablerow里
if (!(store === null || store === void 0 ? void 0 : store.mobileUI) && footable && footableColumns.length) {
if (item.depth === 1) {
doms.push(getTr(true));
}
}
// else if (item.children.length && item.expanded) {
// 嵌套表格
// doms.push(
// ...this.renderRows(item.children, columns, {
// ...rowProps,
// parent: item,
// activeCol,
// activeRow
// }, generateAcahe)
// );
// }
return doms;
});
return (0, lodash_1.flatten)(_rows);
};
TableBody.prototype.renderStatisticRow = function (countFields, isAll) {
var _this = this;
var _a, _b, _c, _d, _e, _f, _g;
if (countFields === void 0) { countFields = []; }
var cacheKey = isAll ? 'all' : 'selected';
// 检查缓存是否存在且有效
if (this.cachedStatisticRows[cacheKey]) {
return this.cachedStatisticRows[cacheKey];
}
this.summaryHeight =
this.summaryHeight ||
((_b = (_a = this.scrollContaner) === null || _a === void 0 ? void 0 : _a.querySelector('tr.is-summary')) === null || _b === void 0 ? void 0 : _b.clientHeight) ||
0;
var _h = this.props, columns = _h.columns, cx = _h.classnames, rows = _h.rows, type = _h.type, stickyWidths = _h.stickyWidths, tableLayout = _h.tableLayout, store = _h.store, rowClassName = _h.rowClassName, affixRowPosition = _h.affixRowPosition, __ = _h.translate, data = _h.data, autoWidth = _h.autoWidth;
if (type === 'cross') {
countFields = (0, lodash_1.flatMap)(countFields !== null && countFields !== void 0 ? countFields : [], function (field) {
return columns
.filter(function (column) { return column.pristine.field === field.name; })
.map(function (item) { return (tslib_1.__assign(tslib_1.__assign({}, field), { name: item.name })); });
});
}
if (tableLayout !== 'horizontal')
return null;
var newRowClass = rowClassName;
var rowClassNameArr = rowClassName === null || rowClassName === void 0 ? void 0 : rowClassName.split(' ');
if (rowClassName === null || rowClassName === void 0 ? void 0 : rowClassName.includes('bg-')) {
newRowClass = rowClassNameArr === null || rowClassNameArr === void 0 ? void 0 : rowClassNameArr.filter(function (info) { return !info.includes('bg-'); }).join(' ');
}
if (Array.isArray(countFields) &&
countFields.length > 0 &&
affixRowPosition == 1) {
var checkColumn = columns.find(function (col) { return col.type == '__checkme'; });
var checkCell = null;
if (checkColumn) {
var leftFixedColumns = store.leftFixedColumns;
var lastLeftFixedIndex = (_c = leftFixedColumns[leftFixedColumns.length - 1]) === null || _c === void 0 ? void 0 : _c.index;
var tdClassName = "".concat(cx(checkColumn.pristine.className, this.props.setBorder ? 'td-border' : '', {
'fixed-left-last': checkColumn.index === lastLeftFixedIndex,
'selected-statics-row': !isAll && !(0, helper_1.isMobile)()
}));
var tdStyle = {
position: 'sticky',
bottom: isAll
? 0
: autoWidth
? (0, helper_1.isMobile)()
? this.summaryHeight
: '25px'
: this.summaryHeight,
zIndex: checkColumn.fixed == 'left' || checkColumn.fixed == 'right' ? 4 : 1,
left: checkColumn.fixed === 'left' &&
(stickyWidths === null || stickyWidths === void 0 ? void 0 : stickyWidths["".concat(checkColumn.index)]),
maxWidth: checkColumn.pristine.editWidth ||
checkColumn.pristine.width ||
'200px',
width: checkColumn.pristine.editWidth ||
checkColumn.pristine.width ||
'unset',
textAlign: checkColumn.align
};
checkCell = (react_1.default.createElement("td", { className: tdClassName, style: tdStyle },
react_1.default.createElement(icons_1.Icon, { style: { color: isAll ? '#3574ee' : '#15b37b', marginRight: 4 }, icon: isAll
? '#icon-toola-xingzhuangjiehe28x'
: '#icon-toola-xingzhuangjiehe8x', fontSize: autoWidth ? 14 : 16, className: "icon" })));
}
this.cachedStatisticRows[cacheKey] = (react_1.default.createElement("tr", { className: cx('Table-tr', 'is-summary', newRowClass), key: "summary-".concat(isAll ? 0 : 1), onClick: function () { return _this.changeSummary(true, isAll); } },
checkCell,
react_1.default.createElement("td", { style: {
padding: '0 4px',
letterSpacing: '.5px',
textAlign: 'left',
position: 'sticky',
bottom: isAll
? 0
: autoWidth
? (0, helper_1.isMobile)()
? this.summaryHeight
: '25px'
: this.summaryHeight,
left: 0,
zIndex: 1
}, colSpan: columns.length - 1, className: "".concat(this.props.setBorder ? 'td-border' : '', " ").concat(!isAll && !(0, helper_1.isMobile)() ? 'selected-statics-row' : '') },
react_1.default.createElement("div", { style: { lineHeight: '24px', display: 'flex' } },
react_1.default.createElement("span", null, (_e = (_d = this.props).renderAffix) === null || _e === void 0 ? void 0 : _e.call(_d, isAll))))));
return this.cachedStatisticRows[cacheKey];
}
if (Array.isArray(countFields) && countFields.length > 0) {
var items_1 = isAll
? rows.map(function (row) { return row.locals; })
: (_g = (_f = data.selectedItems) === null || _f === void 0 ? void 0 : _f.toJSON) === null || _g === void 0 ? void 0 : _g.call(_f);
this.cachedStatisticRows[cacheKey] = (react_1.default.createElement("tr", { className: cx('Table-tr', 'is-summary', newRowClass), key: "summary-".concat(isAll ? 0 : 1), onClick: function () { return _this.changeSummary(true, isAll); } }, columns.map(function (column) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
var leftFixedColumns = store.leftFixedColumns;
var lastLeftFixedIndex = (_a = leftFixedColumns[leftFixedColumns.length - 1]) === null || _a === void 0 ? void 0 : _a.index;
var rightFixedColumns = store.rightFixedColumns;
var firstRightFixedIndex = (_b = rightFixedColumns[0]) === null || _b === void 0 ? void 0 : _b.index;
var tdClassName = "".concat(cx(column.pristine.className, _this.props.setBorder ? 'td-border' : '', {
'fixed-left-last': column.index === lastLeftFixedIndex,
'fixed-right-first': column.index === firstRightFixedIndex,
'selected-statics-row': !isAll && !(0, helper_1.isMobile)()
}));
var tdStyle = {
position: 'sticky',
bottom: isAll
? 0
: autoWidth
? (0, helper_1.isMobile)()
? _this.summaryHeight
: '25px'
: '32px',
zIndex: column.fixed == 'left' || column.fixed == 'right' ? 4 : 1,
left: column.fixed === 'left' && (stickyWidths === null || stickyWidths === void 0 ? void 0 : stickyWidths["".concat(column.index)]),
right: column.fixed === 'right' && (stickyWidths === null || stickyWidths === void 0 ? void 0 : stickyWidths["".concat(column.index)]),
maxWidth: ((_d = (_c = column.pristine) === null || _c === void 0 ? void 0 : _c.quickEdit) === null || _d === void 0 ? void 0 : _d.width) ||
column.pristine.editWidth ||
column.pristine.width ||
'200px',
width: ((_f = (_e = column.pristine) === null || _e === void 0 ? void 0 : _e.quickEdit) === null || _f === void 0 ? void 0 : _f.width) ||
column.pristine.editWidth ||
column.pristine.width ||
'unset',
textAlign: column.align
};
//处理列分组
if ((_h = (_g = column.pristine) === null || _g === void 0 ? void 0 : _g.group) === null || _h === void 0 ? void 0 : _h.length) {
return (react_1.default.createElement("td", { className: tdClassName, style: tdStyle, key: column.index }, (_j = column.pristine) === null || _j === void 0 ? void 0 : _j.group.map(function (groupItem) {
var _a, _b, _c, _d, _e, _f, _g;
var rawName = (_a = groupItem.rawName) !== null && _a !== void 0 ? _a : groupItem.name;
var field = countFields === null || countFields === void 0 ? void 0 : countFields.find(function (item) { return rawName === item.name; });
if (field) {
var formulaRule = (_b = field.formula) === null || _b === void 0 ? void 0 : _b.toLocaleLowerCase();
var showText = ((_c = field.rule) !== null && _c !== void 0 ? _c : '') + '：';
var value = (0, utils_2.calcFn)(formulaRule, rawName !== null && rawName !== void 0 ? rawName : '', items_1);
if (formulaRule === 'count') {
value = showText + value;
return (react_1.default.createElement("div", { title: value, className: 'group-field-container ellipsis', key: column.index + groupItem.name }, value));
}
if (groupItem === null || groupItem === void 0 ? void 0 : groupItem.showUppercase) {
value =
showText +
(0, utils_2.translateNumber)(value, groupItem === null || groupItem === void 0 ? void 0 : groupItem.showUppercase);
return (react_1.default.createElement("div", { title: value, className: 'group-field-container ellipsis', key: column.index + groupItem.name }, value));
}
value = value.toFixed((_d = groupItem === null || groupItem === void 0 ? void 0 : groupItem.precision) !== null && _d !== void 0 ? _d : 2);
if ((groupItem === null || groupItem === void 0 ? void 0 : groupItem.kilobitSeparator) &&
(groupItem === null || groupItem === void 0 ? void 0 : groupItem.showUppercase) === 0) {
value = (0, helper_1.numberFormatter)(value, (_e = groupItem === null || groupItem === void 0 ? void 0 : groupItem.precision) !== null && _e !== void 0 ? _e : 2);
}
value = "".concat(showText).concat((_f = groupItem.prefix) !== null && _f !== void 0 ? _f : '').concat(value).concat(groupItem.type === 'progress'
? '%'
: (_g = groupItem.suffix) !== null && _g !== void 0 ? _g : '');
return (react_1.default.createElement("div", { title: value, className: 'group-field-container ellipsis', key: column.index + groupItem.name }, value));
}
return null;
})));
}
var rawName = (_k = column.pristine.rawName) !== null && _k !== void 0 ? _k : column.name;
var field = countFields === null || countFie