fastlion-amis
Version:
一种MIS页面生成工具
331 lines (330 loc) • 18.7 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.LionBiTableRenderer = void 0;
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var factory_1 = require("../../../factory");
var Table_1 = (0, tslib_1.__importDefault)(require("../../../renderers/Table"));
var lionBiTable_1 = require("../../../store/lionBiTable");
var tpl_builtin_1 = require("../../../utils/tpl-builtin");
var tpl_1 = require("../../../utils/tpl");
var helper_1 = require("../../../utils/helper");
var Checkbox_1 = (0, tslib_1.__importDefault)(require("../../../components/Checkbox"));
var icons_1 = require("../../../components/icons");
var Spinner_1 = (0, tslib_1.__importDefault)(require("../../../components/Spinner"));
var LionBiTable = /** @class */ (function (_super) {
(0, tslib_1.__extends)(LionBiTable, _super);
function LionBiTable(props) {
var _this = _super.call(this, props) || this;
_this.syncRows(_this.props, undefined) && _this.syncSelected();
return _this;
}
LionBiTable.prototype.syncRows = function (props, prevProps) {
var store = props.store;
var source = props.source;
var value = props.value || props.items;
var rows = [];
var updateRows = false;
if (Array.isArray(value) &&
(!prevProps || (prevProps.value || prevProps.items) !== value)) {
updateRows = true;
rows = value;
}
else if (typeof source === 'string') {
var resolved = (0, tpl_builtin_1.resolveVariableAndFilter)(source, props.data, '| raw');
var prev = prevProps
? (0, tpl_builtin_1.resolveVariableAndFilter)(source, prevProps.data, '| raw')
: null;
if (prev && prev === resolved) {
updateRows = false;
}
else if (Array.isArray(resolved)) {
updateRows = true;
rows = resolved;
}
}
if (updateRows) {
if (rows && rows.length) {
rows = this.updateGroupColumns(rows) || rows;
}
store.initRows(rows, props.getEntryId, props.reUseRow);
}
typeof props.selected !== 'undefined' &&
store.updateSelected(props.selected, props.valueField);
return updateRows;
};
LionBiTable.prototype.handleToggleExpanded = function (item) {
// 异步加载--暂不用
// if (item.defer && !item.loaded) {
// this.handleDeferLoad?.(item);
// return;
// }
item.toggleExpanded();
};
// 将分组的arr改为键值对 方便取值
LionBiTable.prototype.formatData = function (rows, groupNameKey, groupDataKey) {
var _this = this;
return rows === null || rows === void 0 ? void 0 : rows.map(function (item, index) {
var _a;
var _b;
return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, item), (_a = {}, _a[groupDataKey] = (_b = item[groupDataKey]) === null || _b === void 0 ? void 0 : _b.reduce(function (t, c) {
t[_this.formatGroupKey(c[groupNameKey])] = c;
return t;
}, {}), _a.children = Array.isArray(item.children) ? _this.formatData(item.children, groupNameKey, groupDataKey) : null, _a));
});
};
LionBiTable.prototype.formatGroupKey = function (str) {
// 将不是汉字字母数字的字符统一转成下划线，主要用了作为取数据的key值
return str.replace(/[^\u4E00-\u9FA5A-Za-z0-9]/g, '_');
};
LionBiTable.prototype.updateGroupColumns = function (rows) {
var _this = this;
var _a = this.props, groupFields = _a.groupFields, groupBy = _a.groupBy, columns = _a.columns, affixRow = _a.affixRow, store = _a.store;
if (!groupFields || !groupBy)
return;
groupFields = groupFields && groupFields.split(',');
// 分别对应 分组名的键名，分组数据的键名， 以及名字的tpl语法
var groupNameKey = groupBy.groupByField, groupDataKey = groupBy.groupIndex, groupNameTpl = groupBy.tpl;
// 因为报文统一放置再columns中的所以需要区别出来
// 需要分组的列
var groupColumns = (columns === null || columns === void 0 ? void 0 : columns.filter(function (c) { return groupFields.includes(c.name); })) || [];
// 普通列
columns = columns === null || columns === void 0 ? void 0 : columns.filter(function (c) { return (!(0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], groupFields, true), [groupNameKey], false).includes(c.name)); });
// 自身分组 兼容一下没有分组标识的列会合并到一个分组里 所以给他们各自进行分组
columns = columns === null || columns === void 0 ? void 0 : columns.map(function (item, index) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, item), { fixed: index === 0 ? 'left' : '', groupName: item.label })); });
// 组列名 取第一条的分组信息
var groupList = rows[0][groupDataKey];
// 需要分组的总计列
var groupAffix = affixRow === null || affixRow === void 0 ? void 0 : affixRow.splice(affixRow.length - groupColumns.length);
var reg = new RegExp(groupFields.join('|'), 'g');
if (groupList && Array.isArray(groupList) && groupList.length) {
groupList.forEach(function (group, index) {
var groupKey = group[groupNameKey];
// 分组列的名 相当于表格的th
var groupName = groupNameTpl
? groupNameTpl.replace('${' + groupNameKey + '}', groupKey)
: groupKey;
// 将解析的分组列push到普通列后
groupColumns === null || groupColumns === void 0 ? void 0 : groupColumns.reduce(function (t, c, i) {
t.push((0, tslib_1.__assign)((0, tslib_1.__assign)({}, c), { groupName: groupName, name: '${' + groupDataKey + '[' + _this.formatGroupKey(groupKey) + '][' + c.name + ']}' }));
return t;
}, columns);
// 总计字段
if (affixRow && groupAffix) {
groupColumns === null || groupColumns === void 0 ? void 0 : groupColumns.reduce(function (t, c, i) {
t.push((0, tslib_1.__assign)((0, tslib_1.__assign)({}, groupAffix[i]), { tpl: groupAffix[i].tpl.replace(reg, function (match) {
return groupDataKey + '[' + groupKey + '].' + match;
}) }));
return t;
}, affixRow);
}
});
}
store.update({ columns: columns });
return this.formatData(rows, groupNameKey, groupDataKey);
};
LionBiTable.prototype.renderCell = function (region, column, item, props, ignoreDrag) {
var _this = this;
var _a, _b;
if (ignoreDrag === void 0) { ignoreDrag = false; }
var _c = this.props, render = _c.render, store = _c.store, multiple = _c.multiple, ns = _c.classPrefix, cx = _c.classnames, checkOnItemClick = _c.checkOnItemClick, popOverContainer = _c.popOverContainer, canAccessSuperData = _c.canAccessSuperData, itemBadge = _c.itemBadge;
if (column.name && item.rowSpans[column.name] === 0) {
return null;
}
// Jay
var _d = this.props, rowClassName = _d.rowClassName, rowClassNameExpr = _d.rowClassNameExpr;
var stickyWidths = store.stickyWidths;
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 style = {};
column.fixed && (style.position = "sticky");
column.fixed === 'left' && (style.left = stickyWidths === null || stickyWidths === void 0 ? void 0 : stickyWidths["" + column.index]);
column.fixed === 'right' && (style.right = stickyWidths === null || stickyWidths === void 0 ? void 0 : stickyWidths["" + column.index]);
column.fixed && (style.zIndex = 1);
if (column.type === '__checkme') {
return (react_1.default.createElement("td", { key: props.key, className: cx(column.pristine.className,
// Jay
rowClassNameExpr
? (0, tpl_1.filter)(rowClassNameExpr, item.data)
: rowClassName, {
'fixed-left-last': column.index === lastLeftFixedIndex,
'fixed-right-first': column.index === firstRightFixedIndex,
}), style: style },
react_1.default.createElement(Checkbox_1.default, { classPrefix: ns, type: multiple ? 'checkbox' : 'radio', checked: item.checked, disabled: item.checkdisable, onChange: checkOnItemClick ? helper_1.noop : this.handleCheck.bind(this, item) })));
}
else if (column.type === '__dragme') {
return (react_1.default.createElement("td", { key: props.key, className: cx(column.pristine.className,
// Jay
rowClassNameExpr
? (0, tpl_1.filter)(rowClassNameExpr, item.data)
: rowClassName, {
'fixed-left-last': column.index === lastLeftFixedIndex,
}), style: style }, item.draggable ? react_1.default.createElement(icons_1.Icon, { icon: "drag-bar", className: "icon" }) : null));
}
else if (column.type === '__expandme') {
return (react_1.default.createElement("td", { key: props.key, className: cx(column.pristine.className,
// Jay
rowClassNameExpr
? (0, tpl_1.filter)(rowClassNameExpr, item.data)
: rowClassName, {
'fixed-left-last': column.index === lastLeftFixedIndex,
}), style: style },
item.depth > 2
? Array.from({ length: item.depth - 2 }).map(function (_, index) { return (react_1.default.createElement("i", { key: index, className: cx('Table-divider-' + (index + 1)) })); })
: null,
item.expandable ? (item.loading ? (react_1.default.createElement(Spinner_1.default, { size: "sm", show: true, icon: "reload", spinnerClassName: cx('Table-expandBtn') })) :
react_1.default.createElement("a", { className: cx('Table-expandBtn', item.expanded ? 'is-active' : ''), onClick: function () { return _this.handleToggleExpanded(item); } },
react_1.default.createElement(icons_1.Icon, { icon: "right-arrow-bold", className: "icon" }))) : null));
}
var prefix = null;
if (!ignoreDrag &&
column.isPrimary &&
store.isNested &&
store.draggable &&
item.draggable) {
prefix = (react_1.default.createElement("a", { draggable: true, onDragStart: this.handleDragStart, className: cx('Table-dragBtn') },
react_1.default.createElement(icons_1.Icon, { icon: "drag-bar", className: "icon" })));
}
// Aug第一列渲染展开按钮
if (props.colIndex === 0 && item.expandable) {
prefix = item.loading ? (react_1.default.createElement(Spinner_1.default, { size: "sm", show: true, icon: "reload", spinnerClassName: cx('LionBiTable-expandBtn') })) :
react_1.default.createElement("a", { className: cx('LionBiTable-expandBtn', item.expanded ? 'is-active' : ''), onClick: function () { return _this.handleToggleExpanded(item); } },
react_1.default.createElement(icons_1.Icon, { icon: "right-arrow-bold", className: "icon" }));
}
// Jay
// 对于input-table-dynamic组件的原始数据做判断
// 禁用
var $path = this.props.$path;
var isInputTableDynamic = /(input-table-dynamic)/.test($path);
var isOrigin = item.pristine.isOrigin && isInputTableDynamic;
var subProps = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, props), { btnDisabled: store.dragging, data: item.locals, value: column.name
? (0, tpl_builtin_1.resolveVariable)(column.name, canAccessSuperData ? item.locals : item.data)
: column.value, popOverContainer: popOverContainer || this.getPopOverContainer, rowSpan: item.rowSpans[column.name], quickEditFormRef: this.subFormRef, prefix: prefix, onImageEnlarge: this.handleImageEnlarge, canAccessSuperData: canAccessSuperData, row: item, itemBadge: itemBadge, showBadge: !props.isHead &&
itemBadge &&
store.firstToggledColumnIndex === props.colIndex,
// Jay
disabled: isOrigin });
delete subProps.label;
return render(region, (0, tslib_1.__assign)((0, tslib_1.__assign)({}, column.pristine), { column: column.pristine, type: 'cell' }), subProps);
};
LionBiTable.prototype.componentDidUpdate = function (prevProps) {
var props = this.props;
var store = props.store;
if ((0, helper_1.anyChanged)([
'selectable',
'columnsTogglable',
'draggable',
'orderBy',
'orderDir',
'multiple',
'footable',
'primaryField',
'itemCheckableOn',
'itemDraggableOn',
'hideCheckToggler',
'combineNum',
'combineFromIndex',
'expandConfig'
], prevProps, props)) {
var combineNum = props.combineNum;
if (typeof combineNum === 'string') {
combineNum = parseInt((0, tpl_builtin_1.resolveVariableAndFilter)(combineNum, props.data, '| raw'), 10);
}
store.update({
selectable: props.selectable,
columnsTogglable: props.columnsTogglable,
draggable: props.draggable,
orderBy: props.orderBy,
orderDir: props.orderDir,
multiple: props.multiple,
primaryField: props.primaryField,
footable: props.footable,
itemCheckableOn: props.itemCheckableOn,
itemDraggableOn: props.itemDraggableOn,
hideCheckToggler: props.hideCheckToggler,
combineNum: combineNum,
combineFromIndex: props.combineFromIndex,
expandConfig: props.expandConfig
});
}
if (prevProps.columns !== props.columns) {
store.update({
columns: props.columns
});
}
if ((0, helper_1.anyChanged)(['source', 'value', 'items'], prevProps, props) ||
(!props.value &&
!props.items &&
(props.data !== prevProps.data ||
(typeof props.source === 'string' && (0, tpl_builtin_1.isPureVariable)(props.source))))) {
this.syncRows(props, prevProps) && this.syncSelected();
}
else if ((0, helper_1.isArrayChildrenModified)(prevProps.selected, props.selected)) {
var prevSelectedRows = store.selectedRows
.map(function (item) { return item.id; })
.join(',');
store.updateSelected(props.selected || [], props.valueField);
var selectedRows = store.selectedRows.map(function (item) { return item.id; }).join(',');
prevSelectedRows !== selectedRows && this.syncSelected();
}
this.updateTableInfoLazy();
};
LionBiTable.prototype.render = function () {
var _a = this.props, className = _a.className, store = _a.store, cx = _a.classnames, affixColumns = _a.affixColumns, _b = _a.autoFillHeight, autoFillHeight = _b === void 0 ? true : _b, autoGenerateFilter = _a.autoGenerateFilter;
this.renderedToolbars = []; // 用来记录哪些 toolbar 已经渲染了，已经渲染了就不重复渲染了。
var heading = this.renderHeading();
var header = this.renderHeader();
var footer = this.renderFooter();
var tableClassName = cx('Table-table', store.combineNum > 0 ? 'Table-table--withCombine' : '', this.props.tableClassName);
return (react_1.default.createElement("div", { className: cx('Table', 'LionBiTable', className, {
'Table--unsaved': !!store.modified || !!store.moved,
'Table--autoFillHeight': autoFillHeight
}) },
autoGenerateFilter ? this.renderAutoFilterForm() : null,
header,
heading,
react_1.default.createElement("div", { className: cx('Table-contentWrap'), onMouseLeave: this.handleMouseLeave }, this.renderTableContent()),
this.renderAffixHeader(tableClassName),
footer));
};
LionBiTable.defaultProps = {
className: '',
placeholder: 'placeholder.noData',
tableClassName: '',
source: '$items',
selectable: false,
columnsTogglable: false,
affixHeader: true,
headerClassName: '',
footerClassName: '',
toolbarClassName: '',
headerToolbarClassName: '',
footerToolbarClassName: '',
primaryField: 'id',
itemCheckableOn: '',
itemDraggableOn: '',
hideCheckToggler: false,
canAccessSuperData: false,
resizable: true
};
return LionBiTable;
}(Table_1.default));
exports.default = LionBiTable;
var LionBiTableRenderer = /** @class */ (function (_super) {
(0, tslib_1.__extends)(LionBiTableRenderer, _super);
function LionBiTableRenderer() {
return _super !== null && _super.apply(this, arguments) || this;
}
LionBiTableRenderer = (0, tslib_1.__decorate)([
(0, factory_1.Renderer)({
type: 'lion-bi-table',
storeType: lionBiTable_1.LionBiTableStore.name,
name: 'lion-bi-table'
})
], LionBiTableRenderer);
return LionBiTableRenderer;
}(LionBiTable));
exports.LionBiTableRenderer = LionBiTableRenderer;
//# sourceMappingURL=./renderers/Lion/BiTable/index.js.map