fastlion-amis
Version:
一种MIS页面生成工具
390 lines (389 loc) • 27.7 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 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 modal_1 = (0, tslib_1.__importDefault)(require("antd/lib/modal"));
var button_1 = (0, tslib_1.__importDefault)(require("antd/lib/button"));
var utils_2 = require("../../utils/utils");
var helper_1 = require("../../utils/helper");
var lodash_1 = require("lodash");
var lodash_2 = require("lodash");
var TableBody = /** @class */ (function (_super) {
(0, tslib_1.__extends)(TableBody, _super);
function TableBody(props) {
var _a;
var _this = _super.call(this, props) || this;
_this.dom = react_1.default.createRef();
_this.summaryContent = function () {
var _a = _this.props, affixRow = _a.affixRow, columns = _a.columns, 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 targetField = list === null || list === void 0 ? void 0 : list.find(function (litem) { return litem.name === item.name; });
if (targetField)
showList.push(targetField);
});
return showList.map(function (item) {
var _a, _b, _c;
var column = columns.find(function (col) { return col.name === item.name; });
if (!column)
return null;
var formulaRule = (_a = item.formula) === null || _a === void 0 ? void 0 : _a.toLocaleLowerCase();
var calc = (0, utils_2.calcFn)(formulaRule, (_b = column === null || column === void 0 ? void 0 : column.name) !== null && _b !== void 0 ? _b : '', _this.props.rowItems);
return (react_1.default.createElement("div", { className: 'summary-row-box' },
react_1.default.createElement("div", { className: 'field-name' }, (_c = item.label) !== null && _c !== void 0 ? _c : ''),
formulaRule === 'count' ? react_1.default.createElement("div", { className: 'field-value' }, calc) :
react_1.default.createElement("div", { className: 'field-value' }, render('', (0, tslib_1.__assign)((0, tslib_1.__assign)({}, column === null || column === void 0 ? void 0 : column.pristine), { 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.setState({ summaryVisible: false }); } }, "\u786E\u5B9A"));
};
_this.state = {
index: props.itemAction ? 0 : null,
current: null,
summaryVisible: false,
clearFormat: false
};
_this.headCurrentRows = _this.headCurrentRows.bind(_this);
_this.headKeydown = _this.headKeydown.bind(_this);
_this.menuItems = [
{ id: 0, title: '复制单元格' },
{ id: 1, title: '复制单元格名称' },
{ id: 2, title: '复制行' },
{ id: 3, title: '复制行和表头' },
{ id: 4, title: '复制列', children: (0, lodash_2.flatMap)((_a = props.columns) !== null && _a !== void 0 ? _a : [], function (column) { return column.name == 'operation' || column.name == undefined ? [] : ({ id: column.name, title: column.label, groupName: column.groupName }); }) },
{ id: 5, title: '复制全部数据' }
].concat({
id: 7, title: '复制时去除格式', isCheckbox: true
});
return _this;
}
TableBody.prototype.componentWillUnmount = function () {
document.body.onkeydown = null;
};
TableBody.prototype.headCurrentRows = function (index, val) {
var _this = this;
this.setState({
index: index,
current: index,
}, function () {
document.body.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, tableName = _a.tableName;
// 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, { tableName: tableName, itemAction: itemAction, classnames: cx, checkOnItemClick: checkOnItemClick, key: item.id, itemIndex: rowIndex, 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 && 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, setBorder: _this.props.setBorder, env: _this.props.env }))
];
// 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, { tableName: tableName, itemAction: itemAction, classnames: cx, checkOnItemClick: checkOnItemClick, key: "foot-" + item.id, itemIndex: rowIndex, item: item, 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, setBorder: _this.props.setBorder })));
}
}
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.renderStatisticRow = function (countFields) {
var _this = this;
if (countFields === void 0) { countFields = []; }
var _a = this.props, columns = _a.columns, cx = _a.classnames, rows = _a.rows, stickyWidths = _a.stickyWidths, store = _a.store, rowClassName = _a.rowClassName, tableName = _a.tableName, __ = _a.translate;
if (Array.isArray(countFields) && countFields.length > 0) {
var items_1 = rows.map(function (row) { return row.locals; });
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(' ');
}
return (react_1.default.createElement("tr", { className: cx('Table-tr', 'is-summary', newRowClass), key: "summary-" + 0, onClick: function () { return _this.setState({ summaryVisible: true }); } }, columns.map(function (column) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
var rawName = (_a = column.pristine.rawName) !== null && _a !== void 0 ? _a : column.name;
var field = countFields === null || countFields === void 0 ? void 0 : countFields.find(function (item) { return rawName === item.name; });
var leftFixedColumns = store.leftFixedColumns;
var lastLeftFixedIndex = (_b = leftFixedColumns[leftFixedColumns.length - 1]) === null || _b === void 0 ? void 0 : _b.index;
var rightFixedColumns = store.rightFixedColumns;
var firstRightFixedIndex = (_c = rightFixedColumns[0]) === null || _c === void 0 ? void 0 : _c.index;
var tdClassName = "" + cx(column.pristine.className, _this.props.setBorder ? 'td-border' : '', {
'fixed-left-last': column.index === lastLeftFixedIndex,
'fixed-right-first': column.index === firstRightFixedIndex
});
var tdStyle = {
position: 'sticky', bottom: 0, zIndex: column.fixed == 'left' || column.fixed == 'right' ? 4 : 1,
left: column.fixed === 'left' && (stickyWidths === null || stickyWidths === void 0 ? void 0 : stickyWidths["" + column.index]),
right: column.fixed === 'right' && (stickyWidths === null || stickyWidths === void 0 ? void 0 : stickyWidths["" + column.index]),
maxWidth: ((_e = (_d = column.pristine) === null || _d === void 0 ? void 0 : _d.quickEdit) === null || _e === void 0 ? void 0 : _e.width) || column.pristine.width || "200px",
width: ((_g = (_f = column.pristine) === null || _f === void 0 ? void 0 : _f.quickEdit) === null || _g === void 0 ? void 0 : _g.width) || column.pristine.width || 'unset',
textAlign: column.align
};
if (field) {
var formulaRule = (_h = field.formula) === null || _h === void 0 ? void 0 : _h.toLocaleLowerCase();
var showText = ((_j = field.rule) !== null && _j !== void 0 ? _j : '') + '：';
var value = (0, utils_2.calcFn)(formulaRule, (_k = column.name) !== null && _k !== void 0 ? _k : '', items_1);
if (formulaRule === 'count') {
value = showText + value;
return react_1.default.createElement("td", { "table-name": tableName, "column-name": column.name, title: value, className: tdClassName, style: tdStyle, key: column.index },
react_1.default.createElement("div", { style: { justifyContent: column.align } }, value));
}
if ((_l = column.pristine) === null || _l === void 0 ? void 0 : _l.showUppercase) {
value = showText + (0, utils_2.translateNumber)(value, (_m = column.pristine) === null || _m === void 0 ? void 0 : _m.showUppercase);
return react_1.default.createElement("td", { "table-name": tableName, "column-name": column.name, title: value, className: tdClassName + ' ellipsis', style: tdStyle, key: column.index },
react_1.default.createElement("div", { style: { justifyContent: column.align } }, value));
}
value = value.toFixed((_o = column.pristine.precision) !== null && _o !== void 0 ? _o : 2);
if (((_p = column.pristine) === null || _p === void 0 ? void 0 : _p.kilobitSeparator) && ((_q = column.pristine) === null || _q === void 0 ? void 0 : _q.showUppercase) === 0) {
value = (0, helper_1.numberFormatter)(value, (_r = column.pristine.precision) !== null && _r !== void 0 ? _r : 2);
}
value = "" + showText + ((_s = column.pristine.prefix) !== null && _s !== void 0 ? _s : '') + value + (column.type === 'progress' ? '%' : ((_t = column.pristine.suffix) !== null && _t !== void 0 ? _t : ''));
return (react_1.default.createElement("td", { "table-name": tableName, "column-name": column.name, title: value, className: tdClassName + ' ellipsis', style: tdStyle, key: column.index },
react_1.default.createElement("div", { style: { justifyContent: column.align } }, value)));
}
return react_1.default.createElement("td", { "table-name": tableName, "column-name": column.name, className: tdClassName, style: tdStyle, key: column.index });
})));
}
return null;
};
TableBody.prototype.renderSummaryRow = function (position, items, rowIndex) {
var _this = this;
var _a, _b, _c, _d;
var _e = this.props, columns = _e.columns, render = _e.render, cx = _e.classnames, store = _e.store, setBorder = _e.setBorder, stickyWidths = _e.stickyWidths;
if (!(Array.isArray(items) && items.length)) {
return null;
}
var offset = 0;
// 将列的隐藏对应的把总结行也隐藏起来
var result = items.map(function (item, index) {
var colIdxs = [offset + index - (columns[columns.length - 1].type === 'operation' && (0, helper_1.isMobile)() ? 1 : 0)];
if (item.colSpan > 1) {
for (var i = 1; i < item.colSpan; i++) {
colIdxs.push(offset + index + i);
}
offset += item.colSpan - 1;
}
var matchedColumns = colIdxs
.map(function (idx) { return columns.find(function (col) { return col.rawIndex === idx; }); })
.filter(function (item) { return item; });
return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, item), { colSpan: matchedColumns.length, firstColumn: matchedColumns[0], lastColumn: matchedColumns[matchedColumns.length - 1] });
}).filter(function (item) { return item.colSpan; });
if (result.length == 0)
return null;
// 如果是勾选栏，展开栏，拖拽栏，序号栏让它和下一列合并。
if (result[0] && typeof ((_a = columns[0]) === null || _a === void 0 ? void 0 : _a.type) === 'string' && ((_b = columns[0]) === null || _b === void 0 ? void 0 : _b.type.substring(0, 2)) === '__') {
result[0].colSpan = (result[0].colSpan || 1) + 1;
}
if (result[1] && typeof ((_c = columns[1]) === null || _c === void 0 ? void 0 : _c.type) === 'string' && ((_d = columns[1]) === null || _d === void 0 ? void 0 : _d.type.substring(0, 2)) === '__') {
result[0].colSpan = (result[0].colSpan || 1) + 1;
}
// 缺少的单元格补齐
var appendLen = columns.length - result.reduce(function (p, c) { return p + (c.colSpan || 1); }, 0);
// 多了则干掉一些
while (appendLen < 0) {
var item = result.pop();
if (!item) {
break;
}
appendLen += item.colSpan || 1;
}
// 少了则补个空的
if (appendLen) {
var item = /*result.length
? result.pop()
: */ {
type: 'html',
html: ' '
};
var column = store.filteredColumns[store.filteredColumns.length - 1];
result.push((0, tslib_1.__assign)((0, tslib_1.__assign)({}, item), { colSpan: /*(item.colSpan || 1)*/ 1 + appendLen, firstColumn: column, lastColumn: column }));
}
return (react_1.default.createElement("tr", { className: cx('Table-tr', 'is-summary'), key: "summary-" + position + "-" + (rowIndex || 0), style: { position: 'sticky', bottom: 0, zIndex: 1 }, onClick: function () { return (0, helper_1.isMobile)() ? _this.setState({ summaryVisible: true }) : null; } }, result.map(function (item, index) {
var _a, _b, _c, _d, _e;
var column = item.firstColumn;
var tdStyle = {
position: 'sticky', bottom: 0, zIndex: column.fixed == 'left' || column.fixed == 'right' ? 4 : 1,
left: column.fixed === 'left' && (stickyWidths === null || stickyWidths === void 0 ? void 0 : stickyWidths["" + column.index]),
right: column.fixed === 'right' && (stickyWidths === null || stickyWidths === void 0 ? void 0 : stickyWidths["" + column.index]),
maxWidth: ((_b = (_a = column.pristine) === null || _a === void 0 ? void 0 : _a.quickEdit) === null || _b === void 0 ? void 0 : _b.width) || column.pristine.width || "200px",
width: ((_d = (_c = column.pristine) === null || _c === void 0 ? void 0 : _c.quickEdit) === null || _d === void 0 ? void 0 : _d.width) || column.pristine.width,
textAlign: column.align
};
var Com = item.isHead ? 'th' : 'td';
if (item.tpl) {
var str = item.tpl.split('pick:')[1];
var fieldList = str.split('|');
var fieldName_1 = fieldList[0];
var unitName = fieldList[1];
if (unitName.includes('}'))
unitName = unitName.split('}')[0];
var targetCol = columns.find(function (col) { return col.name === fieldName_1; });
var prevStr = item.tpl.split('${')[0];
var nextStr = item.tpl.split('}')[1];
var calc = (0, utils_2.calcFn)(unitName, (_e = targetCol === null || targetCol === void 0 ? void 0 : targetCol.name) !== null && _e !== void 0 ? _e : '', _this.props.rowItems);
var newValue = calc;
newValue = !(0, lodash_1.isNil)(newValue) ? (0, helper_1.standardValueText)(newValue, { suffix: '', prefix: '', kilobitSeparator: targetCol === null || targetCol === void 0 ? void 0 : targetCol.pristine.kilobitSeparator, precision: targetCol === null || targetCol === void 0 ? void 0 : targetCol.pristine.precision, showUppercase: targetCol === null || targetCol === void 0 ? void 0 : targetCol.pristine.showUppercase }) : 0;
var finalValue = prevStr + (unitName === 'count' ? calc : newValue) + nextStr;
return (react_1.default.createElement(Com, { key: index, colSpan: item.colSpan, className: cx({ 'td-border': setBorder }, item.cellClassName, 'ellipsis'), style: tdStyle, title: finalValue, "table-name": _this.props.tableName }, finalValue));
}
return (react_1.default.createElement(Com, { key: index, colSpan: item.colSpan, className: cx({ 'td-border': setBorder }, item.cellClassName), style: tdStyle, "table-name": _this.props.tableName }, render("summary-row/" + index, item, {
data: { items: _this.props.rowItems }
})));
})));
};
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, _c, _d, _e, _f;
var rowIndex = _a[0], colName = _a[1];
var _g = this.props, store = _g.store, onContextMenuVisibleChange = _g.onContextMenuVisibleChange;
var clearFormat = this.state.clearFormat;
onContextMenuVisibleChange(false);
var value = ' ';
if (typeof type == 'number') {
switch (type) {
case 0:
value = (_b = store === null || store === void 0 ? void 0 : store.getCopyCellValue(rowIndex, colName, clearFormat)) !== null && _b !== void 0 ? _b : '';
break;
case 1:
value = colName;
break;
case 2:
case 3:
value = (_c = store === null || store === void 0 ? void 0 : store.getCopyRowValue(rowIndex, type === 3, clearFormat)) !== null && _c !== void 0 ? _c : '';
break;
case 4:
value = (_d = store === null || store === void 0 ? void 0 : store.getCopyColumnValue(colName, clearFormat)) !== null && _d !== void 0 ? _d : '';
break;
case 5:
case 6:
value = (_e = store === null || store === void 0 ? void 0 : store.getCopyPageValue(type == 6, clearFormat)) !== null && _e !== void 0 ? _e : '';
break;
default:
return;
}
}
else {
value = (_f = store === null || store === void 0 ? void 0 : store.getCopyColumnValue(type.split(','), clearFormat)) !== null && _f !== void 0 ? _f : '';
}
try {
(0, utils_1.copy)(value).then(function () {
msgsub_1.default._success('复制成功');
});
}
catch (error) {
msgsub_1.default._error('复制失败');
}
};
TableBody.prototype.render = function () {
var _this = this;
var _a = this.props, className = _a.className, rows = _a.rows, columns = _a.columns, rowsProps = _a.rowsProps, prefixRow = _a.prefixRow, __ = _a.translate, affixRow = _a.affixRow, data = _a.data;
var summaryVisible = this.state.summaryVisible;
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(LionContextMenu_1.ControlledContextMenu, { menuItems: this.menuItems, visible: this.props.contextMenuVisible, onItemClick: function (index) { return _this.handleContextMenu(index, _this.props.position); }, onVisibleChange: this.props.onContextMenuVisibleChange, clearFormat: this.state.clearFormat, onCheckboxChange: function (e) { return _this.setState({ clearFormat: e.target.checked }); } },
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.renderStatisticRow(affixRow))) : null)),
summaryVisible && react_1.default.createElement(modal_1.default, { maskStyle: { zIndex: 1111 }, wrapClassName: "summary-modal-wrap", className: "summary-modal", width: 300, closable: false, getContainer: function () { return document.getElementById('amis-modal-container') || document.body; }, footer: this.renderSummaryFooter(), okText: "\u786E\u5B9A", title: "\u6570\u636E\u5C0F\u8BA1", visible: summaryVisible }, this.summaryContent())));
};
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/FieldTableHorizontal/TableBody.js.map