fastlion-amis
Version:
一种MIS页面生成工具
1,036 lines • 118 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TableCell = exports.TableRenderer = void 0;
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var react_dom_1 = require("react-dom");
var factory_1 = require("../../factory");
var forEach_1 = (0, tslib_1.__importDefault)(require("lodash/forEach"));
var tpl_1 = require("../../utils/tpl");
require("./ColumnToggler");
var Checkbox_1 = (0, tslib_1.__importDefault)(require("../../components/Checkbox"));
var Button_1 = (0, tslib_1.__importDefault)(require("../../components/Button"));
var table_1 = require("../../store/table");
var file_saver_1 = require("file-saver");
var helper_1 = require("../../utils/helper");
var tpl_builtin_1 = require("../../utils/tpl-builtin");
var debounce_1 = (0, tslib_1.__importDefault)(require("lodash/debounce"));
var sortablejs_1 = (0, tslib_1.__importDefault)(require("sortablejs"));
var resize_sensor_1 = require("../../utils/resize-sensor");
var find_1 = (0, tslib_1.__importDefault)(require("lodash/find"));
var icons_1 = require("../../components/icons");
var TableCell_1 = require("./TableCell");
Object.defineProperty(exports, "TableCell", { enumerable: true, get: function () { return TableCell_1.TableCell; } });
var HeadCellFilterDropdown_1 = require("./HeadCellFilterDropdown");
var HeadCellSearchDropdown_1 = require("./HeadCellSearchDropdown");
var HeadCellBatchEditDropdown_1 = require("./HeadCellBatchEditDropdown");
var TableContent_1 = require("./TableContent");
var image_1 = require("../../utils/image");
var TableBody_1 = require("./TableBody");
var mobx_state_tree_1 = require("mobx-state-tree");
var ColumnToggler_1 = (0, tslib_1.__importDefault)(require("./ColumnToggler"));
var offset_1 = (0, tslib_1.__importDefault)(require("../../utils/offset"));
var dom_1 = require("../../utils/dom");
var cloneDeep_1 = (0, tslib_1.__importDefault)(require("lodash/cloneDeep"));
var LionContextMenu_1 = require("../Lion/components/LionContextMenu");
var isEqual_1 = (0, tslib_1.__importDefault)(require("lodash/isEqual"));
var tooltip_1 = (0, tslib_1.__importDefault)(require("antd/lib/tooltip"));
var antd_1 = require("antd");
/**
* 将 url 转成绝对地址
*/
var getAbsoluteUrl = (function () {
var link;
return function (url) {
if (!link)
link = document.createElement('a');
link.href = url;
return link.href;
};
})();
var Table = /** @class */ (function (_super) {
(0, tslib_1.__extends)(Table, _super);
function Table(props) {
var _a, _b, _c, _d;
var _this = _super.call(this, props) || this;
_this.lastScrollLeft = -1;
_this.totalWidth = 0;
_this.totalHeight = 0;
_this.outterWidth = 0;
_this.outterHeight = 0;
_this.widths = {};
_this.widths2 = {};
_this.heights = {};
_this.renderedToolbars = [];
_this.subForms = {};
_this.handleOutterScroll = _this.handleOutterScroll.bind(_this);
_this.affixDetect = _this.affixDetect.bind(_this);
_this.updateTableInfoLazy = (0, debounce_1.default)(_this.updateTableInfo.bind(_this), 250, {
trailing: true,
leading: true
});
_this.tableRef = _this.tableRef.bind(_this);
_this.affixedTableRef = _this.affixedTableRef.bind(_this);
_this.handleAction = _this.handleAction.bind(_this);
_this.handleCheck = _this.handleCheck.bind(_this);
_this.handleCheckAll = _this.handleCheckAll.bind(_this);
_this.handleQuickChange = _this.handleQuickChange.bind(_this);
_this.handleSave = _this.handleSave.bind(_this);
_this.handleSaveOrder = _this.handleSaveOrder.bind(_this);
_this.reset = _this.reset.bind(_this);
_this.dragTipRef = _this.dragTipRef.bind(_this);
_this.getPopOverContainer = _this.getPopOverContainer.bind(_this);
_this.renderCell = _this.renderCell.bind(_this);
_this.renderHeadCell = _this.renderHeadCell.bind(_this);
_this.renderToolbar = _this.renderToolbar.bind(_this);
_this.renderStatistic = _this.renderStatistic.bind(_this);
_this.handleMouseMove = _this.handleMouseMove.bind(_this);
_this.handleMouseLeave = _this.handleMouseLeave.bind(_this);
_this.subFormRef = _this.subFormRef.bind(_this);
_this.handleColumnToggle = _this.handleColumnToggle.bind(_this);
_this.renderAutoFilterForm = _this.renderAutoFilterForm.bind(_this);
_this.updateAutoFillHeight = _this.updateAutoFillHeight.bind(_this);
// Jay
_this.updateAutoFillHeightTimes = 0;
_this.handleColumns.bind(_this);
_this.handleMultiColumnSort = _this.handleMultiColumnSort.bind(_this);
(_b = (_a = _this.props).getTableStore) === null || _b === void 0 ? void 0 : _b.call(_a, _this.props.store);
(_d = (_c = _this.props).getTableInstance) === null || _d === void 0 ? void 0 : _d.call(_c, _this);
_this.showContextMenu = _this.showContextMenu.bind(_this);
_this.state = {
position: [0, 0, ''],
contextMenuVisible: false
};
var store = props.store, columns = props.columns, selectable = props.selectable, columnsTogglable = props.columnsTogglable, draggable = props.draggable, orderBy = props.orderBy, orderDir = props.orderDir, multiple = props.multiple, footable = props.footable, primaryField = props.primaryField, itemCheckableOn = props.itemCheckableOn, itemDraggableOn = props.itemDraggableOn, hideCheckToggler = props.hideCheckToggler, combineFromIndex = props.combineFromIndex, expandConfig = props.expandConfig, formItem = props.formItem, keepItemSelectionOnPageChange = props.keepItemSelectionOnPageChange, useMobileUI = props.useMobileUI, //Aug
maxKeepItemSelectionLength = props.maxKeepItemSelectionLength, isPick = props.isPick, mobileLayout = props.mobileLayout;
var combineNum = props.combineNum;
if (typeof combineNum === 'string') {
combineNum = parseInt((0, tpl_builtin_1.resolveVariableAndFilter)(combineNum, props.data, '| raw'), 10);
}
// Aug
var mobileUI = (0, helper_1.isMobile)() && useMobileUI;
// Aug 移动端默认只展示6项
var _columns = columns || [];
if (mobileUI && mobileLayout === 'vertical' && footable && columns && columns.length > 6) {
_columns.map(function (item, index) {
if (index > 5) {
item.breakpoint = '*';
}
});
}
_this.sortCols = _this.handleColumns(_columns, {});
store.update({
selectable: selectable,
draggable: draggable,
columns: _this.sortCols,
rawColumns: _this.handleColumns(_columns, {
sort: false,
}),
columnsTogglable: columnsTogglable,
orderBy: orderBy,
orderDir: orderDir,
multiple: multiple,
footable: footable,
expandConfig: expandConfig,
primaryField: primaryField,
itemCheckableOn: itemCheckableOn,
itemDraggableOn: itemDraggableOn,
hideCheckToggler: (0, helper_1.isMobile)() && isPick ? false : hideCheckToggler,
combineNum: combineNum,
combineFromIndex: combineFromIndex,
keepItemSelectionOnPageChange: keepItemSelectionOnPageChange,
maxKeepItemSelectionLength: maxKeepItemSelectionLength,
mobileUI: mobileUI,
orderColumns: new Map(),
mobileLayout: mobileLayout
});
formItem && (0, mobx_state_tree_1.isAlive)(formItem) && formItem.setSubStore(store);
Table.syncRows(store, _this.props, undefined) && _this.syncSelected();
return _this;
}
// Jay
Table.prototype.handleColumns = function (columns, options) {
var _a = (options || {}).sort, sort = _a === void 0 ? true : _a;
var handleCols = (0, cloneDeep_1.default)(columns);
var columnInfo = this.props.columnInfo;
var foldColumns = this.props.foldColumns;
// columns的长度比columnInfo的长度大时，不进行排序
// const flag = columnInfo && (Object.keys(columnInfo).length <= handleCols.length)
if (columnInfo && Object.keys(columnInfo).length && sort) {
var tempArr_1 = [];
var tempArrNofixed_1 = [];
var tempArrFixedLeft_1 = [];
var tempArrFixedRight_1 = [];
handleCols.forEach(function (col) {
var _a, _b;
// 如果column的hidden是true，则不允许被设置
if (col.hidden)
col.canSet = false;
if (col.name && columnInfo[col.name]) {
if (columnInfo[col.name].hidden === 0) {
col.hidden = (_a = col.hidden) !== null && _a !== void 0 ? _a : false;
}
else {
col.hidden = (_b = col.hidden) !== null && _b !== void 0 ? _b : true;
}
tempArr_1[columnInfo[col.name].index] = col;
}
else {
if (col.fixed === 'left') {
tempArrFixedLeft_1.push(col);
}
else if (col.fixed === 'right') {
tempArrFixedRight_1.push(col);
}
else {
tempArrNofixed_1.push(col);
}
}
});
tempArr_1 = tempArr_1.filter(Boolean);
var fixedRightBefore = tempArr_1.length;
for (var i = tempArr_1.length - 1; i >= 0; i--) {
if (tempArr_1[i].fixed !== 'right') {
fixedRightBefore = i + 1;
break;
}
}
tempArr_1.splice.apply(tempArr_1, (0, tslib_1.__spreadArray)([fixedRightBefore, 0], tempArrNofixed_1, false));
tempArr_1 = tempArrFixedLeft_1.concat(tempArr_1.concat(tempArrFixedRight_1));
handleCols = tempArr_1;
}
else {
handleCols.forEach(function (col) {
// 如果column的hidden是true，则不允许被设置
if (col.hidden)
col.canSet = false;
});
}
// 列折叠
var mobileUI = (0, helper_1.isMobile)();
if (!mobileUI) {
for (var i = handleCols.length - 1; i >= 0; i--) {
var item = handleCols[i];
if ((item === null || item === void 0 ? void 0 : item.type) === 'operation') {
item.style = { overFlow: 'hidden' };
item.label = [
{
type: 'button',
label: '',
size: 'xs',
level: 'link',
icon: (foldColumns === null || foldColumns === void 0 ? void 0 : foldColumns.includes('scale' + item.name)) ? 'fa fa-step-backward' : 'fa fa-step-forward',
actionType: 'scale' + item.name
},
item.label
];
if (i < handleCols.length - 4)
break;
}
}
}
return handleCols;
};
Table.syncRows = function (store, props, prevProps) {
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;
}
}
updateRows && store.initRows(rows, props.getEntryId, props.reUseRow);
typeof props.selected !== 'undefined' &&
store.updateSelected(props.selected, props.valueField);
return updateRows;
};
Table.prototype.componentDidMount = function () {
var parent = (0, helper_1.getScrollParent)((0, react_dom_1.findDOMNode)(this));
if (!parent || parent === document.body) {
parent = window;
}
this.parentNode = parent;
this.updateTableInfo();
var dom = (0, react_dom_1.findDOMNode)(this);
if (dom.closest('.modal-body')) {
return;
}
this.affixDetect();
parent.addEventListener('scroll', this.affixDetect);
window.addEventListener('resize', this.affixDetect);
this.updateAutoFillHeight();
window.addEventListener('resize', this.updateAutoFillHeight);
};
/**
* 自动设置表格高度占满界面剩余区域
* 用 css 实现有点麻烦，要改很多结构，所以先用 dom hack 了，避免对之前的功能有影响
*/
Table.prototype.updateAutoFillHeight = function () {
var _a = this.props, autoFillHeight = _a.autoFillHeight, footerToolbar = _a.footerToolbar, ns = _a.classPrefix, isPick = _a.isPick;
if (!this.table)
return;
var table = (0, react_dom_1.findDOMNode)(this);
var tableContent = table.querySelector("." + ns + "Table-content");
var tableContentWrap = table.querySelector("." + ns + "Table-contentWrap");
var footToolbar = table.querySelector("." + ns + "Table-footToolbar");
if ((0, helper_1.isMobile)()) {
//在picker中，使用的是modal，高度与普通的计算方式不同
if (isPick) {
var tableHeight = document.body.clientHeight - (0, offset_1.default)(table).top;
table.style.height = tableHeight - 49 - 16 + 'px';
return;
}
var distanceClass = table.closest("." + ns + "Distance");
if (distanceClass) { //在grid中占满grid的高度
table.closest("." + ns + "Crud").style.height = '100%';
table.style.height = '100%';
}
else {
// 循环计算父级节点的 pddding，这里不考虑父级节点还可能会有其它兄弟节点的情况了
var allParentPaddingButtom = 0;
var parentNode = tableContent.parentElement;
while (parentNode) {
var paddingButtom = (0, dom_1.getStyleNumber)(parentNode, 'padding-bottom');
var borderBottom = (0, dom_1.getStyleNumber)(parentNode, 'border-bottom-width');
allParentPaddingButtom =
allParentPaddingButtom + paddingButtom + borderBottom;
parentNode = parentNode.parentElement;
}
var tableHeight = document.body.clientHeight - (0, offset_1.default)(table).top - allParentPaddingButtom;
if (autoFillHeight && tableHeight >= 350) { //当表格可展示高度大于350的占满剩余空间
table.style.height = tableHeight + 'px';
}
else {
table.style.maxHeight = (document.body.clientHeight - 38) + 'px';
}
}
}
else {
if (!autoFillHeight)
return;
//tab页平铺模式样式处理
var tabsDom = table.closest("." + ns + "Tabs--content-tiled");
if (tabsDom)
return;
if (!tableContent) {
return;
}
// 计算 table-content 在 dom 中的位置
var tableContentTop = (0, offset_1.default)(tableContent).top;
var viewportHeight_1 = window.innerHeight;
// 有时候会拿不到 footToolbar？
var footToolbarHeight_1 = footToolbar ? (0, offset_1.default)(footToolbar).height : 0;
if (!footToolbarHeight_1 && footerToolbar && footerToolbar.length) {
footToolbarHeight_1 = 48;
}
var footer = this.renderFooter();
if (!footer)
footToolbarHeight_1 = 0;
var tableContentWrapMarginButtom_1 = (0, dom_1.getStyleNumber)(tableContentWrap, 'margin-bottom');
// 循环计算父级节点的 pddding，这里不考虑父级节点还可能会有其它兄弟节点的情况了
var allParentPaddingButtom_1 = 0;
var parentNode = tableContent.parentElement;
while (parentNode) {
var paddingButtom = (0, dom_1.getStyleNumber)(parentNode, 'padding-bottom');
var borderBottom = (0, dom_1.getStyleNumber)(parentNode, 'border-bottom-width');
allParentPaddingButtom_1 =
allParentPaddingButtom_1 + paddingButtom + borderBottom;
parentNode = parentNode.parentElement;
}
tableContent.style.height = viewportHeight_1 -
tableContentTop -
tableContentWrapMarginButtom_1 -
footToolbarHeight_1 -
allParentPaddingButtom_1 - 12 + "px";
var formToolbar = table.previousElementSibling;
if (formToolbar) {
var MutationObserver = window.MutationObserver;
var observer = new MutationObserver(function () {
var tableContentTop = (0, offset_1.default)(tableContent).top;
tableContent.style.height = viewportHeight_1 -
tableContentTop -
tableContentWrapMarginButtom_1 -
footToolbarHeight_1 -
allParentPaddingButtom_1 - 12 + "px";
});
observer.observe(formToolbar, {
attributes: true,
});
}
var DistanceClass = table.closest("." + ns + "Distance");
var tableContents = DistanceClass === null || DistanceClass === void 0 ? void 0 : DistanceClass.querySelectorAll("." + ns + "Table-content");
if (tableContents && (tableContents === null || tableContents === void 0 ? void 0 : tableContents.length) > 1) {
var tablea = tableContents[1];
var tableb = tableContents[0];
tablea.style.height = tableb.style.height;
}
}
};
Table.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.isRequestItem !== props.isRequestItem) {
store.update({
orderColumns: new Map()
});
}
if (prevProps.columns !== props.columns) {
// Jay
this.sortCols = this.handleColumns(props.columns || [], {});
store.update({
columns: this.sortCols,
rawColumns: this.handleColumns(props.columns || [], { sort: false }),
});
}
if (prevProps.foldColumns !== props.foldColumns) {
store.updateOperation(props.foldColumns);
}
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))))) {
Table.syncRows(store, 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();
};
Table.prototype.componentWillUnmount = function () {
var _a = this.props, formItem = _a.formItem, store = _a.store;
var parent = this.parentNode;
parent && parent.removeEventListener('scroll', this.affixDetect);
window.removeEventListener('resize', this.affixDetect);
window.removeEventListener('resize', this.updateAutoFillHeight);
this.updateTableInfoLazy.cancel();
this.unSensor && this.unSensor();
formItem && (0, mobx_state_tree_1.isAlive)(formItem) && formItem.setSubStore(null);
try {
store.orderColumns.clear();
}
catch (_b) { }
};
Table.prototype.subFormRef = function (form, x, y) {
var quickEditFormRef = this.props.quickEditFormRef;
quickEditFormRef && quickEditFormRef(form, x, y);
this.subForms[x + "-" + y] = form;
form && this.props.store.addForm(form.props.store, y);
};
Table.prototype.handleAction = function (e, action, ctx) {
var onAction = this.props.onAction;
// todo
onAction(e, action, ctx);
};
Table.prototype.handleCheck = function (item, value, shift) {
var store = this.props.store;
if (shift) {
store.toggleShift(item);
}
else {
item.toggle();
}
this.syncSelected();
};
// 0全选 1反选 2不选
Table.prototype.handleCheckAll = function (type) {
var store = this.props.store;
switch (type) {
case 0:
store.checkAll();
break;
case 1:
store.checkReverse();
break;
case 2:
store.clear();
break;
case 3:
store.toggleAll();
break;
default:
return;
}
this.syncSelected();
};
Table.prototype.handleQuickChange = function (item, values, saveImmediately, savePristine, resetOnFailed) {
if (!(0, mobx_state_tree_1.isAlive)(item)) {
return;
}
var _a = this.props, onSave = _a.onSave, onPristineChange = _a.onPristineChange, propsSaveImmediately = _a.saveImmediately, primaryField = _a.primaryField;
item.change(values, savePristine);
// 值发生变化了，需要通过 onSelect 通知到外面，否则会出现数据不同步的问题
item.modified && this.syncSelected();
if (savePristine) {
onPristineChange === null || onPristineChange === void 0 ? void 0 : onPristineChange(item.data, item.path);
return;
}
else if (!saveImmediately && !propsSaveImmediately) {
return;
}
if (saveImmediately && saveImmediately.api) {
this.props.onAction(null, {
actionType: 'ajax',
api: saveImmediately.api
}, values);
return;
}
if (!onSave) {
return;
}
onSave(item.data, (0, helper_1.difference)(item.data, item.pristine, ['id', primaryField]), item.path, undefined, item.pristine, resetOnFailed);
};
Table.prototype.handleSave = function () {
return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
var _a, store, onSave, primaryField, subForms, result, rows, rowIndexes, diff, unModifiedRows;
var _this = this;
return (0, tslib_1.__generator)(this, function (_b) {
switch (_b.label) {
case 0:
_a = this.props, store = _a.store, onSave = _a.onSave, primaryField = _a.primaryField;
if (!onSave || !store.modifiedRows.length) {
return [2 /*return*/];
}
subForms = [];
Object.keys(this.subForms).forEach(function (key) { return _this.subForms[key] && store.modifiedRows.find(function (item) { return item.index.toString() === key.split('-')[1]; }) && subForms.push(_this.subForms[key]); });
if (!subForms.length) return [3 /*break*/, 2];
return [4 /*yield*/, Promise.all(subForms.map(function (item) { return item.validate(); }))];
case 1:
result = _b.sent();
if (~result.indexOf(false)) {
return [2 /*return*/];
}
_b.label = 2;
case 2:
rows = store.modifiedRows.map(function (item) { return item.data; });
rowIndexes = store.modifiedRows.map(function (item) { return item.path; });
diff = store.modifiedRows.map(function (item) {
return (0, helper_1.difference)(item.data, item.pristine, ['id', primaryField]);
});
unModifiedRows = store.rows
.filter(function (item) { return !item.modified; })
.map(function (item) { return item.data; });
onSave(rows, diff, rowIndexes, unModifiedRows, store.modifiedRows.map(function (item) { return item.pristine; }));
return [2 /*return*/];
}
});
});
};
Table.prototype.handleSaveOrder = function () {
var _a = this.props, store = _a.store, onSaveOrder = _a.onSaveOrder;
if (!onSaveOrder || !store.movedRows.length) {
return;
}
onSaveOrder(store.movedRows.map(function (item) { return item.data; }), store.rows.map(function (item) { return item.getDataWithModifiedChilden(); }));
};
Table.prototype.syncSelected = function () {
var _a = this.props, store = _a.store, onSelect = _a.onSelect;
onSelect &&
onSelect(store.selectedRows.map(function (item) { return item.data; }), store.unSelectedRows.map(function (item) { return item.data; }));
};
Table.prototype.reset = function () {
var _this = this;
var store = this.props.store;
store.reset();
var subForms = [];
Object.keys(this.subForms).forEach(function (key) { return _this.subForms[key] && subForms.push(_this.subForms[key]); });
subForms.forEach(function (item) { return item.clearErrors(); });
};
Table.prototype.bulkUpdate = function (value, items) {
var _a = this.props, store = _a.store, primaryField = _a.primaryField;
if (primaryField && value.ids) {
var ids_1 = value.ids.split(',');
var rows = store.rows.filter(function (item) {
return (0, find_1.default)(ids_1, function (id) { return id && id == item.data[primaryField]; });
});
var newValue_1 = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, value), { ids: undefined });
rows.forEach(function (row) { return row.change(newValue_1); });
}
else {
var rows = store.rows.filter(function (item) { return ~items.indexOf(item.pristine); });
rows.forEach(function (row) { return row.change(value); });
}
};
Table.prototype.getSelected = function () {
var store = this.props.store;
return store.selectedRows.map(function (item) { return item.data; });
};
Table.prototype.affixDetect = function () {
var _a, _b, _c, _d;
var _e = this.props.autoFillHeight, autoFillHeight = _e === void 0 ? true : _e;
if (!this.props.affixHeader || !this.table || autoFillHeight) {
return;
}
var ns = this.props.classPrefix;
var dom = (0, react_dom_1.findDOMNode)(this);
var clip = this.table.getBoundingClientRect();
var offsetY = (_b = (_a = this.props.affixOffsetTop) !== null && _a !== void 0 ? _a : this.props.env.affixOffsetTop) !== null && _b !== void 0 ? _b : 0;
var headingHeight = ((_c = dom.querySelector("." + ns + "Table-heading")) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect().height) || 0;
var headerHeight = ((_d = dom.querySelector("." + ns + "Table-headToolbar")) === null || _d === void 0 ? void 0 : _d.getBoundingClientRect().height) || 0;
var affixed = clip.top - headerHeight - headingHeight < offsetY &&
clip.top + clip.height - 40 > offsetY;
var affixedDom = dom.querySelector("." + ns + "Table-fixedTop");
affixedDom.style.cssText += "top: " + offsetY + "px;width: " + this.table.parentNode.offsetWidth + "px";
affixed
? affixedDom.classList.add('in')
: affixedDom.classList.remove('in');
// store.markHeaderAffix(clip.top < offsetY && (clip.top + clip.height - 40) > offsetY);
};
Table.prototype.updateTableInfo = function () {
var _a, _b;
if (!this.table) {
return;
}
var table = this.table;
var outter = table.parentNode;
var affixHeader = this.props.affixHeader;
var ns = this.props.classPrefix;
// 完成宽高都没有变化就直接跳过了。
// if (this.totalWidth === table.scrollWidth && this.totalHeight === table.scrollHeight) {
// return;
// }
this.totalWidth = table.scrollWidth;
this.totalHeight = table.scrollHeight;
this.outterWidth = outter.offsetWidth;
this.outterHeight = outter.offsetHeight;
var widths = (this.widths = {});
var widths2 = (this.widths2 = {});
var heights = (this.heights = {});
// heights.header = table
// .querySelector('thead>tr:last-child')!
// .getBoundingClientRect().height;
// heights.header2 = table
// .querySelector('thead>tr:first-child')!
// .getBoundingClientRect().height;
// Aug
heights.header = ((_a = table.querySelector('thead>tr:last-child')) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height) || 0;
heights.header2 = ((_b = table.querySelector('thead>tr:first-child')) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().height) || 0;
(0, forEach_1.default)(table.querySelectorAll('thead>tr:last-child>th'), function (item) {
widths[item.getAttribute('data-index')] =
item.getBoundingClientRect().width;
});
(0, forEach_1.default)(table.querySelectorAll('thead>tr:first-child>th'), function (item) {
widths2[item.getAttribute('data-index')] =
item.getBoundingClientRect().width;
});
(0, forEach_1.default)(table.querySelectorAll('tbody>tr>*:last-child'), function (item, index) {
return (heights[index] = item.getBoundingClientRect().height);
});
// 让 react 去更新非常慢，还是手动更新吧。
var dom = (0, react_dom_1.findDOMNode)(this);
(0, forEach_1.default)(
// 折叠 footTable 不需要改变
dom.querySelectorAll("." + ns + "Table-fixedTop table, ." + ns + "Table-fixedLeft>table, ." + ns + "Table-fixedRight>table"), function (table) {
var totalWidth = 0;
var totalWidth2 = 0;
(0, forEach_1.default)(table.querySelectorAll('thead>tr:last-child>th'), function (item) {
var width = widths[item.getAttribute('data-index')];
item.style.cssText += "width: " + width + "px; height: " + heights.header + "px";
totalWidth += width;
});
(0, forEach_1.default)(table.querySelectorAll('thead>tr:first-child>th'), function (item) {
var width = widths2[item.getAttribute('data-index')];
item.style.cssText += "width: " + width + "px; height: " + heights.header2 + "px";
totalWidth2 += width;
});
(0, forEach_1.default)(table.querySelectorAll('colgroup>col'), function (item) {
var width = widths[item.getAttribute('data-index')];
item.setAttribute('width', "" + width);
});
(0, forEach_1.default)(table.querySelectorAll('tbody>tr'), function (item, index) {
item.style.cssText += "height: " + heights[index] + "px";
});
table.style.cssText += "width: " + Math.max(totalWidth, totalWidth2) + "px;table-layout: auto;";
});
if (affixHeader) {
dom.querySelector("." + ns + "Table-fixedTop>." + ns + "Table-wrapper").style.cssText += "width: " + this.outterWidth + "px";
}
this.lastScrollLeft = -1;
this.handleOutterScroll();
};
Table.prototype.handleOutterScroll = function () {
var _a, _b, _c, _d;
var outter = this.table.parentNode;
var scrollLeft = outter.scrollLeft;
if (scrollLeft === this.lastScrollLeft) {
return;
}
this.lastScrollLeft = scrollLeft;
var leading = scrollLeft === 0;
var trailing = Math.ceil(scrollLeft) + this.outterWidth >= this.totalWidth;
var ns = this.props.classPrefix;
var dom = (0, react_dom_1.findDOMNode)(this);
var fixedLeft = dom.querySelectorAll("." + ns + "Table-fixedLeft");
if (fixedLeft && fixedLeft.length) {
for (var i = 0, len = fixedLeft.length; i < len; i++) {
var node = fixedLeft[i];
leading ? node.classList.remove('in') : node.classList.add('in');
}
}
var fixedRight = dom.querySelectorAll("." + ns + "Table-fixedRight");
if (fixedRight && fixedRight.length) {
for (var i = 0, len = fixedRight.length; i < len; i++) {
var node = fixedRight[i];
trailing ? node.classList.remove('in') : node.classList.add('in');
}
}
var table = this.affixedTable;
if (table) {
table.style.cssText += "transform: translateX(-" + scrollLeft + "px)";
}
// Jay
var store = this.props.store;
var leftFixedColumns = store.leftFixedColumns;
var lastLeftFixedIndex = (_a = leftFixedColumns[leftFixedColumns.length - 1]) === null || _a === void 0 ? void 0 : _a.index;
// 给table添加类名
var fixedLeftLastEl = dom.querySelector('.fixed-left-last');
var fixedLeftLastElRelativeLeft = fixedLeftLastEl ? fixedLeftLastEl.getBoundingClientRect().left -
dom.getBoundingClientRect().left : null;
if (leading || fixedLeftLastElRelativeLeft && (fixedLeftLastElRelativeLeft > store.stickyWidths[lastLeftFixedIndex])) {
dom.classList.remove('fix-left');
}
else if (fixedLeftLastElRelativeLeft && (fixedLeftLastElRelativeLeft <= store.stickyWidths[lastLeftFixedIndex])) { // 左边要固定的列相对于表格的水平距离小于等于其 sticky left
dom.classList.add('fix-left');
}
if (trailing) {
dom.classList.remove('fix-right');
}
else {
dom.classList.add('fix-right');
}
var isNaN = false;
var rightFixedColumns = (0, cloneDeep_1.default)(store.rightFixedColumns);
var rightFixedColumnsReverse = rightFixedColumns === null || rightFixedColumns === void 0 ? void 0 : rightFixedColumns.reverse();
var columnWidths = {};
(_b = this.table) === null || _b === void 0 ? void 0 : _b.querySelectorAll('thead>tr:first-child>th').forEach(function (item) {
columnWidths[item.getAttribute('data-index')] =
item.scrollWidth;
});
var stickyWidths = {};
if ((_c = leftFixedColumns[0]) === null || _c === void 0 ? void 0 : _c.index) {
stickyWidths["" + leftFixedColumns[0].index] = columnWidths["" + leftFixedColumns[0].index];
}
if ((_d = rightFixedColumnsReverse === null || rightFixedColumnsReverse === void 0 ? void 0 : rightFixedColumnsReverse[0]) === null || _d === void 0 ? void 0 : _d.index) {
stickyWidths["" + rightFixedColumnsReverse[0].index] = columnWidths["" + rightFixedColumns[0].index];
}
leftFixedColumns === null || leftFixedColumns === void 0 ? void 0 : leftFixedColumns.reduce(function (acc, cv, ci, arr) {
var a = acc;
if (ci !== 0) {
a = acc + columnWidths[arr[ci - 1].index];
}
a !== a && (isNaN = true);
stickyWidths["" + cv.index] = a;
return a;
}, 0);
rightFixedColumnsReverse === null || rightFixedColumnsReverse === void 0 ? void 0 : rightFixedColumnsReverse.reduce(function (acc, cv, ci, arr) {
var a = acc;
if (ci !== 0) {
a = acc + columnWidths[arr[ci - 1].index];
}
a !== a && (isNaN = true);
stickyWidths["" + cv.index] = a;
return a;
}, -2);
var equal = (0, isEqual_1.default)(stickyWidths, store.stickyWidths);
// 避免重复render组件，提高性能
if (!isNaN && !equal) {
store.setStickyWidths(stickyWidths);
}
};
Table.prototype.tableRef = function (ref) {
this.table = ref;
if (ref) {
this.unSensor = (0, resize_sensor_1.resizeSensor)(ref.parentNode, this.updateTableInfoLazy);
}
else {
this.unSensor && this.unSensor();
delete this.unSensor;
}
};
Table.prototype.dragTipRef = function (ref) {
if (!this.dragTip && ref) {
this.initDragging();
}
else if (this.dragTip && !ref) {
this.destroyDragging();
}
this.dragTip = ref;
};
Table.prototype.affixedTableRef = function (ref) {
this.affixedTable = ref;
};
Table.prototype.initDragging = function () {
var store = this.props.store;
var ns = this.props.classPrefix;
this.sortable = new sortablejs_1.default(this.table.querySelector('tbody'), {
group: 'table',
animation: 150,
handle: "." + ns + "Table-dragCell",
filter: "." + ns + "Table-dragCell.is-dragDisabled",
ghostClass: 'is-dragging',
onEnd: function (e) {
// 没有移动
if (e.newIndex === e.oldIndex) {
return;
}
var parent = e.to;
if (e.oldIndex < parent.childNodes.length - 1) {
parent.insertBefore(e.item, parent.childNodes[e.oldIndex]);
}
else {
parent.appendChild(e.item);
}
store.exchange(e.oldIndex, e.newIndex);
}
});
};
Table.prototype.destroyDragging = function () {
this.sortable && this.sortable.destroy();
};
Table.prototype.getPopOverContainer = function () {
return (0, react_dom_1.findDOMNode)(this);
};
Table.prototype.handleMouseMove = function (e) {
var tr = e.target.closest('tr[data-id]');
if (!tr) {
return;
}
var _a = this.props, store = _a.store, affixColumns = _a.affixColumns, itemActions = _a.itemActions;
if ((affixColumns === false ||
(store.leftFixedColumns.length === 0 &&
store.rightFixedColumns.length === 0)) &&
(!itemActions || !itemActions.filter(function (item) { return !item.hiddenOnHover; }).length)) {
return;
}
var id = tr.getAttribute('data-id');
var row = store.hoverRow;
if ((row === null || row === void 0 ? void 0 : row.id) === id) {
return;
}
(0, helper_1.eachTree)(store.rows, function (item) { return item.setIsHover(item.id === id); });
};
Table.prototype.handleMouseLeave = function () {
var store = this.props.store;
var row = store.hoverRow;
row === null || row === void 0 ? void 0 : row.setIsHover(false);
};
Table.prototype.handleDragStart = function (e) {
var store = this.props.store;
var target = e.currentTarget;
var tr = (this.draggingTr = target.closest('tr'));
var id = tr.getAttribute('data-id');
var tbody = tr.parentNode;
this.originIndex = Array.prototype.indexOf.call(tbody.childNodes, tr);
tr.classList.add('is-dragging');
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/plain', id);
e.dataTransfer.setDragImage(tr, 0, 0);
var item = store.getRowById(id);
store.collapseAllAtDepth(item.depth);
var siblings = store.rows;
if (item.parentId) {
var parent = store.getRowById(item.parentId);
siblings = parent.children;
}
siblings = siblings.filter(function (sibling) { return sibling !== item; });
tbody.addEventListener('dragover', this.handleDragOver);
tbody.addEventListener('drop', this.handleDrop);
this.draggingSibling = siblings.map(function (item) {
var tr = tbody.querySelector("tr[data-id=\"" + item.id + "\"]");
tr.classList.add('is-drop-allowed');
return tr;
});
tr.addEventListener('dragend', this.handleDragEnd);
};
Table.prototype.handleDragOver = function (e) {
if (!e.target) {
return;
}
e.preventDefault();
e.dataTransfer.dropEffect = 'move';
var overTr = e.target.closest('tr');
if (!overTr ||
!~overTr.className.indexOf('is-drop-allowed') ||
overTr === this.draggingTr) {
return;
}
var tbody = overTr.parentElement;
var dRect = this.draggingTr.getBoundingClientRect();
var tRect = overTr.getBoundingClientRect();
var ratio = dRect.top < tRect.top ? 0.1 : 0.9;
var next = (e.clientY - tRect.top) / (tRect.bottom - tRect.top) > ratio;
tbody.insertBefore(this.draggingTr, (next && overTr.nextSibling) || overTr);
};
Table.prototype.handleDrop = function () {
var store = this.props.store;
var tr = this.draggingTr;
var tbody = tr.parentElement;
var index = Array.prototype.indexOf.call(tbody.childNodes, tr);
var item = store.getRowById(tr.getAttribute('data-id'));
// destroy
this.handleDragEnd();
store.exchange(this.originIndex, index, item);
};
Table.prototype.handleDragEnd = function () {
var tr = this.draggingTr;
var tbody = tr.parentElement;
var index = Array.prototype.indexOf.call(tbody.childNodes, tr);
tbody.insertBefore(tr, tbody.childNodes[index < this.originIndex ? this.originIndex + 1 : this.originIndex]);
tr.classList.remove('is-dragging');
tr.removeEventListener('dragend', this.handleDragEnd);
tbody.removeEventListener('dragover', this.handleDragOver);
tbody.removeEventListener('drop', this.handleDrop);
this.draggingSibling.forEach(function (item) {
return item.classList.remove('is-drop-allowed');
});
};
Table.prototype.handleImageEnlarge = function (info, target) {
var onImageEnlarge = this.props.onImageEnlarge;
// 如果已经是多张了，直接跳过
if (Array.isArray(info.list)) {
return onImageEnlarge && onImageEnlarge(info, target);
}
// 从列表中收集所有图片，然后作为一个图片集合派送出去。
var store = this.props.store;
var column = store.columns[target.colIndex].pristine;
var index = target.rowIndex;
var list = [];
store.rows.forEach(function (row, i) {
var src = (0, tpl_builtin_1.resolveVariable)(column.name, row.data);
if (!src) {
if (i < target.rowIndex) {
index--;
}
return;
}
list.push({
src: src,
originalSrc: column.originalSrc
? (0, tpl_1.filter)(column.originalSrc, row.data)
: src,
title: column.enlargeTitle
? (0, tpl_1.filter)(column.enlargeTitle, row.data)
: column.title
? (0, tpl_1.filter)(column.title, row.data)
: undefined,
caption: column.enlargeCaption
? (0, tpl_1.filter)(column.enlargeCaption, row.data)
: column.caption
? (0, tpl_1.filter)(column.caption, row.data)
: undefined
});
});
if (list.length > 1) {
onImageEnlarge &&
onImageEnlarge((0, tslib_1.__assign)((0, tslib_1.__assign)({}, info), { list: list, index: index }), target);
}
else {
onImageEnlarge && onImageEnlarge(info, target);
}
};
// 开始列宽度调整
Table.prototype.handleColResizeMouseDown = function (e, col) {
this.lineStartX = e.clientX;
var currentTarget = e.currentTarget;
this.resizeColumn = col;
this.resizeLine = currentTarget;
// this.resizeLineLeft = parseInt(
// getComputedStyle(this.resizeLine).getPropertyValue('left'),
// 10
// );
this.targetTh = this.resizeLine.parentElement;
this.targetThWidth = this.targetTh.getBoundingClientRect().width;
document.addEventListener('mousemove', this.handleColResizeMouseMove);
document.addEventListener('mouseup', this.handleColResizeMouseUp);
};
// 垂直线拖拽移动
Table.prototype.handleColResizeMouseMove = function (e) {
var moveX = e.clientX - this.lineStartX;
this.targetTh.style.width = this.targetThWidth + moveX - 20 + 'px';
};
// 垂直线拖拽结束
Table.prototype.handleColResizeMouseUp = function (e) {
var _this = this;
var store = this.props.store;
var newCols = store.columnsData.map(function (item) {
if (item.name === _this.resizeColumn.name) {
return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, item), { pristine: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, item.pristine), { width: _this.targetTh.style.width }) });
}
return item;
});
this.handleColumnToggle(newCols, {}, false);
document.removeEventListener('mousemove', this.handleColResizeMouseMove);
document.removeEventListener('mouseup', this.handleColResizeMouseUp);
};
// Jay
Table.prototype.handleColumnToggle = function (columns, saveCols, canFetch, targetTemp) {
var _a = this.props, store = _a.store, saveColApi = _a.saveColApi;
if (canFetch && this.props.saveColApi && this.props.crudName) {
this.props.env.fetcher({ url: saveColApi.url, method: saveColApi.method }, (0, tslib_1.__assign)((0, tslib_1.__assign)({}, targetTemp), { columnInfo: saveCols })).then(function (res) {
antd_1.message.info(res.msg);
});
}
if (columns) {
this.sortCols = columns.map(function (col) { return col.pristine; });
store.updateColumns(columns);
}
};
Table.prototype.renderAutoFilterForm = function () {
var _a = this.props, render = _a.render, store = _a.store, onSearchableFromReset = _a.onSearchableFromReset, onSearchableFromSubmit = _a.onSearchableFromSubmit, on