fastlion-amis
Version:
一种MIS页面生成工具
229 lines (228 loc) • 13.3 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TableBody = void 0;
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
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 cloneDeep_1 = (0, tslib_1.__importDefault)(require("lodash/cloneDeep"));
var LionContextMenu_1 = require("../Lion/components/LionContextMenu");
var utils_1 = require("../Lion/utils/utils");
var msgsub_1 = (0, tslib_1.__importDefault)(require("../Lion/utils/msgsub"));
var TableBody = /** @class */ (function (_super) {
(0, tslib_1.__extends)(TableBody, _super);
function TableBody(props) {
var _this = _super.call(this, props) || this;
_this.dom = react_1.default.createRef();
_this.state = {
index: props.itemAction ? 0 : null,
current: null,
};
_this.headCurrentRows = _this.headCurrentRows.bind(_this);
_this.headKeydown = _this.headKeydown.bind(_this);
return _this;
}
TableBody.prototype.headCurrentRows = function (index, val) {
var _this = this;
this.setState({
index: index,
current: index,
}, function () {
window.onkeydown = function (e) {
_this.headKeydown(e, val);
};
});
};
TableBody.prototype.headKeydown = function (e, val) {
var _a;
var _b = this.props, rows = _b.rows, itemAction = _b.itemAction, onAction = _b.onAction;
var current = this.state.current;
if (e.key === "ArrowUp" || e.key === "ArrowDown") {
// tbody及高度
var currentParent = this.dom.current.parentElement.parentElement;
// 表格头部thead及高度
var previous = this.dom.current.previousElementSibling;
var previousHeight = previous.clientHeight;
//cxd-Table-content
var content_1 = currentParent.parentElement;
//可视区域，不包括头部
var visual = content_1.clientHeight - previousHeight;
// 可视区域内容条数
var contnumber_1 = Math.floor(visual / val.current.clientHeight) - 2;
if (e.key === "ArrowUp") {
if (current > 0) {
--current;
this.setState({ current: current }, function () {
if (current >= contnumber_1) {
content_1.scrollTop = (current - contnumber_1) * val.current.clientHeight;
}
});
}
}
if (e.key === "ArrowDown") {
if (current < rows.length - 1) {
++current;
this.setState({ current: current }, function () {
if (current >= contnumber_1 - 2) {
content_1.scrollTop = (current - contnumber_1) * val.current.clientHeight;
}
});
}
}
}
if (e.key === "Enter") {
this.setState({ index: current });
if (itemAction) {
onAction && onAction(e, itemAction, (_a = rows[current]) === null || _a === void 0 ? void 0 : _a.data);
}
}
};
TableBody.prototype.renderRows = function (rows, columns, rowProps) {
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, mobileLayout = _a.mobileLayout;
// Aug
var allColumns = (0, cloneDeep_1.default)(columns);
if ((store === null || store === void 0 ? void 0 : store.mobileUI) && footable && footableColumns.length) {
allColumns.splice.apply(allColumns, (0, tslib_1.__spreadArray)([-1, 0], footableColumns, false));
}
return rows.map(function (item, rowIndex) {
var itemProps = buildItemProps ? buildItemProps(item, rowIndex) : null;
var itemHighlight = (_this.state.index == rowIndex);
var currentHighlight = (_this.state.current == rowIndex);
var doms = [
react_1.default.createElement(TableRow_1.TableRow, (0, tslib_1.__assign)({}, itemProps, { mobileLayout: mobileLayout, itemAction: itemAction, classnames: cx, checkOnItemClick: checkOnItemClick, key: item.id, itemIndex: rowIndex, item: item, headCurrentRows: _this.headCurrentRows, itemHighlight: itemHighlight, currentHighlight: currentHighlight, handleRowClick: _this.props.handleRowClick, itemClassName: cx(rowClassNameExpr
? (0, tpl_1.filter)(rowClassNameExpr, item.data)
: rowClassName, {
'is-last': item.depth > 1 && rowIndex === rows.length - 1
}),
// columns={columns}
// Aug 移动端且展开更多信息时加载所有列
columns: (store === null || store === void 0 ? void 0 : store.mobileUI) && item.expanded ? allColumns : columns, renderCell: renderCell, render: render, onAction: onAction, onCheck: onCheck,
// todo 先注释 quickEditEnabled={item.depth === 1}
onQuickChange: onQuickChange }, rowProps, {
// Jay
store: _this.props.store, stickyWidths: _this.props.stickyWidths }))
];
// Aug 加入mobile判断，移动端将列统一放在上面一个tablerow里
if (!(store === null || store === void 0 ? void 0 : store.mobileUI) && footable && footableColumns.length) {
if (item.depth === 1) {
doms.push(react_1.default.createElement(TableRow_1.TableRow, (0, tslib_1.__assign)({}, itemProps, { mobileLayout: mobileLayout, itemAction: itemAction, classnames: cx, checkOnItemClick: checkOnItemClick, key: "foot-" + item.id, itemIndex: rowIndex, item: item, handleRowClick: _this.props.handleRowClick, itemClassName: cx(rowClassNameExpr
? (0, tpl_1.filter)(rowClassNameExpr, item.data)
: rowClassName), columns: footableColumns, renderCell: renderCell, render: render, onAction: onAction, onCheck: onCheck, footableMode: true, footableColSpan: columns.length, onQuickChange: onQuickChange, ignoreFootableContent: ignoreFootableContent }, rowProps, {
// Jay
store: _this.props.store, stickyWidths: _this.props.stickyWidths })));
}
}
else if (item.children.length && item.expanded) {
// 嵌套表格
doms.push.apply(doms, _this.renderRows(item.children, columns, (0, tslib_1.__assign)((0, tslib_1.__assign)({}, rowProps), { parent: item })));
}
return doms;
});
};
TableBody.prototype.renderSummaryRow = function (position, items, rowIndex) {
var _a = this.props, columns = _a.columns, render = _a.render, data = _a.data, cx = _a.classnames, rows = _a.rows;
if (!(Array.isArray(items) && items.length)) {
return null;
}
var filterColumns = columns.filter(function (item) { return item.toggable; });
var result = [];
for (var index = 0; index < filterColumns.length; index++) {
var item = items[filterColumns[index].rawIndex];
item && result.push((0, tslib_1.__assign)({}, item));
}
// 如果是勾选栏，让它和下一列合并。
if (columns[0].type === '__checkme' && result[0]) {
result[0].colSpan = (result[0].colSpan || 1) + 1;
}
// 如果是展开栏，让它和下一列合并。
if (columns[0].type === '__expandme' && result[0]) {
result[0].colSpan = (result[0].colSpan || 1) + 1;
}
// 缺少的单元格补齐
var appendLen = columns.length - result.reduce(function (p, c) { return p + (c.colSpan || 1); }, 0);
if (appendLen) {
var item = result.pop();
result.push((0, tslib_1.__assign)((0, tslib_1.__assign)({}, item), { colSpan: (item.colSpan || 1) + appendLen }));
}
var ctx = (0, helper_1.createObject)(data, {
items: rows.map(function (row) { return row.locals; })
});
return (react_1.default.createElement("tr", { className: cx('Table-tr', 'is-summary'), key: "summary-" + position + "-" + (rowIndex || 0) }, result.map(function (item, index) {
var Com = item.isHead ? 'th' : 'td';
return (react_1.default.createElement(Com, { key: index, colSpan: item.colSpan, className: item.cellClassName }, render("summary-row/" + index, item, {
data: ctx
})));
})));
};
TableBody.prototype.renderSummary = function (position, items) {
var _this = this;
return Array.isArray(items)
? items.some(function (i) { return Array.isArray(i); })
? items.map(function (i, rowIndex) {
return _this.renderSummaryRow(position, Array.isArray(i) ? i : [i], rowIndex);
})
: this.renderSummaryRow(position, items)
: null;
};
TableBody.prototype.handleContextMenu = function (type, _a) {
var _b;
var rowIndex = _a[0], _ = _a[1], colName = _a[2];
var _c = this.props, columns = _c.columns, primaryField = _c.primaryField, store = _c.store, onContextMenuVisibleChange = _c.onContextMenuVisibleChange;
onContextMenuVisibleChange(false);
var _d = this.props.data, items = _d.items, selectedItems = _d.selectedItems;
var fields = columns.map(function (column) { return column.name; }).filter(function (name) { return name !== undefined; });
var value = ' ';
var isSelected = selectedItems.length > 0;
switch (type) {
case 0:
value = items[rowIndex][colName];
break;
case 1:
value = colName;
break;
case 2:
case 3:
value = (_b = store === null || store === void 0 ? void 0 : store.getCopyRowValue(fields, isSelected, rowIndex, primaryField, type === 3)) !== null && _b !== void 0 ? _b : '';
break;
case 4:
value = store === null || store === void 0 ? void 0 : store.getCopyColumnValue(isSelected, colName, fields.includes(primaryField) ? primaryField : undefined);
break;
default:
return;
}
try {
(0, utils_1.copy)(value);
msgsub_1.default._success('复制成功');
}
catch (error) {
msgsub_1.default._error('复制失败');
}
};
TableBody.prototype.render = function () {
var _this = this;
var _a = this.props, cx = _a.classnames, className = _a.className, render = _a.render, rows = _a.rows, columns = _a.columns, rowsProps = _a.rowsProps, prefixRow = _a.prefixRow, affixRow = _a.affixRow, __ = _a.translate;
return (react_1.default.createElement(LionContextMenu_1.ControlledContextMenu, { menuItems: [
{ id: 0, title: '复制单元格', icon: 'fa fa-file-o' },
{ id: 1, title: '复制单元格名称', icon: 'fa fa-file-text-o' },
{ id: 2, title: '复制行', icon: 'fa fa-list' },
{ id: 3, title: '复制行和表头', icon: 'fa fa-list-alt' },
{ id: 4, title: '复制列', icon: 'fa fa-columns' },
], visible: this.props.contextMenuVisible, onItemClick: function (index) { return _this.handleContextMenu(index, _this.props.position); }, onVisibleChange: this.props.onContextMenuVisibleChange },
react_1.default.createElement("tbody", { className: className, ref: this.dom }, rows.length ? (react_1.default.createElement(react_1.default.Fragment, null,
this.renderSummary('prefix', prefixRow),
this.renderRows(rows, columns, rowsProps),
this.renderSummary('affix', affixRow))) : null)));
};
TableBody = (0, tslib_1.__decorate)([
mobx_react_1.observer,
(0, tslib_1.__metadata)("design:paramtypes", [Object])
], TableBody);
return TableBody;
}(react_1.default.Component));
exports.TableBody = TableBody;
//# sourceMappingURL=./renderers/MobileTableHorizontal/TableBody.js.map