fastlion-amis
Version:
一种MIS页面生成工具
2,103 lines • 120 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TableRenderer = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(require("react"));
var react_dom_1 = require("react-dom");
var factory_1 = require("../../factory");
var forEach_1 = tslib_1.__importDefault(require("lodash/forEach"));
var tpl_1 = require("../../utils/tpl");
require("./ColumnToggler");
var Checkbox_1 = tslib_1.__importDefault(require("../../components/Checkbox"));
var Button_1 = 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 = tslib_1.__importDefault(require("lodash/debounce"));
var sortablejs_1 = tslib_1.__importDefault(require("sortablejs"));
var resize_sensor_1 = require("../../utils/resize-sensor");
var find_1 = tslib_1.__importDefault(require("lodash/find"));
var icons_1 = require("../../components/icons");
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 mobx_state_tree_1 = require("mobx-state-tree");
var ColumnToggler_1 = tslib_1.__importDefault(require("./ColumnToggler"));
var offset_1 = tslib_1.__importDefault(require("../../utils/offset"));
var cloneDeep_1 = tslib_1.__importDefault(require("lodash/cloneDeep"));
var LionContextMenu_1 = require("../Lion/components/LionContextMenu");
var isEqual_1 = tslib_1.__importDefault(require("lodash/isEqual"));
var tooltip_1 = tslib_1.__importDefault(require("antd/lib/tooltip"));
var antd_1 = require("antd");
var shell_1 = require("../../utils/shell");
var tools_1 = require("../../utils/shell/tools");
var utils_1 = require("../../utils/utils");
var throttle_1 = tslib_1.__importDefault(require("lodash/throttle"));
/**
* 将 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) {
tslib_1.__extends(Table, _super);
function Table(props) {
var _this = this;
var _a, _b, _c, _d;
_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.scrollPingBox = function () {
if (!_this.table)
return;
var ns = _this.props.classPrefix;
var table = (0, react_dom_1.findDOMNode)(_this);
var container = table.querySelector(".".concat(ns, "Table-contentWrap"));
var scrollLeft = container.scrollLeft;
var scrollWidth = container.scrollWidth;
var clientWidth = container.clientWidth;
// 判断是否滚动到最左侧
if (scrollLeft === 0) {
container.classList.remove('table-ping-left');
}
else {
container.classList.add('table-ping-left');
}
// 判断是否滚动到最右侧
if (Math.abs(scrollLeft + clientWidth - scrollWidth) <= 1) {
container.classList.remove('table-ping-right');
}
else {
container.classList.add('table-ping-right');
}
};
//进入编辑前的行数据
_this.beforeData = null;
//移动端点击行进入编辑
_this.getFieldsBody = function () {
var _a = _this.props, store = _a.store, items = _a.items, editIndex = _a.editIndex;
return store.filteredColumns.filter(function (item) {
return !['operation', '__checkme', '__dragme', '__expandme'].includes(item.pristine.type);
}).map(function (item) {
var _a, _b, _c, _d, _e, _f, _g, _h;
var newType = ((_a = item.pristine.quickEdit) === null || _a === void 0 ? void 0 : _a.type) || item.pristine.type;
return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, item.pristine), (item.pristine.quickEdit || {})), { type: (0, utils_1.exchangeType)(newType), staticShow: item.pristine.type === 'number' ? (item.pristine.quickEdit ? false : true) : undefined, quickEdit: false, value: editIndex === -1 ? items[items.length - 1][(item === null || item === void 0 ? void 0 : item.name) || ''] : (_b = store.rows[editIndex]) === null || _b === void 0 ? void 0 : _b.data[(item === null || item === void 0 ? void 0 : item.name) || ''], hiddenOn: ((_d = (_c = item.pristine) === null || _c === void 0 ? void 0 : _c.quickEdit) === null || _d === void 0 ? void 0 : _d.columnHiddenOn) || ((_e = item.pristine) === null || _e === void 0 ? void 0 : _e.columnHiddenOn) || ((_g = (_f = item.pristine) === null || _f === void 0 ? void 0 : _f.quickEdit) === null || _g === void 0 ? void 0 : _g.hiddenOn) || ((_h = item.pristine) === null || _h === void 0 ? void 0 : _h.hiddenOn) || undefined, defaultOpen: false, remark: null, classNameExpr: undefined });
});
};
_this.handleComfirm = function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
var _a, items, startRowEdit, env, data, editIndex, setEditIndex, updateApi, addApi, reloadApi, res, dealNex, ctx, payload, reloadData, ctx, payload, reloadData;
var _this = this;
return tslib_1.__generator(this, function (_b) {
switch (_b.label) {
case 0:
_a = this.props, items = _a.items, startRowEdit = _a.startRowEdit, env = _a.env, data = _a.data, editIndex = _a.editIndex, setEditIndex = _a.setEditIndex, updateApi = _a.updateApi, addApi = _a.addApi, reloadApi = _a.reloadApi;
return [4 /*yield*/, this.formInstance.validate()];
case 1:
res = _b.sent();
if (!res) return [3 /*break*/, 16];
dealNex = function () {
startRowEdit(false);
setEditIndex(-1);
_this.setState({ rowEditData: null });
};
if (!(editIndex === -1 && addApi)) return [3 /*break*/, 8];
this.setState({ editLoading: true });
ctx = (0, helper_1.createObject)(data, tslib_1.__assign(tslib_1.__assign({}, items[items.length - 1]), this.lastChangeValue));
return [4 /*yield*/, env.fetcher(addApi, ctx)];
case 2:
payload = _b.sent();
if (!payload.ok) return [3 /*break*/, 6];
if (!reloadApi) return [3 /*break*/, 4];
return [4 /*yield*/, env.fetcher(reloadApi, data)];
case 3:
reloadData = _b.sent();
if (reloadData.ok) {
this.handleSave(reloadData.data);
dealNex();
antd_1.message.success('操作成功！');
}
else {
antd_1.message.error(reloadData.msg);
}
return [3 /*break*/, 5];
case 4:
dealNex();
antd_1.message.success('操作成功！');
_b.label = 5;
case 5: return [3 /*break*/, 7];
case 6:
antd_1.message.error(payload.msg);
_b.label = 7;
case 7:
this.setState({ editLoading: false });
return [3 /*break*/, 16];
case 8:
if (!(editIndex !== -1 && updateApi)) return [3 /*break*/, 15];
this.setState({ editLoading: true });
ctx = (0, helper_1.createObject)(data, tslib_1.__assign(tslib_1.__assign({}, items[editIndex]), this.lastChangeValue));
return [4 /*yield*/, env.fetcher(updateApi, ctx)];
case 9:
payload = _b.sent();
if (!payload.ok) return [3 /*break*/, 13];
if (!reloadApi) return [3 /*break*/, 11];
return [4 /*yield*/, env.fetcher(reloadApi, data)];
case 10:
reloadData = _b.sent();
if (reloadData.ok) {
this.handleSave(reloadData.data);
dealNex();
}
else {
antd_1.message.warn(reloadData.msg);
}
return [3 /*break*/, 12];
case 11:
dealNex();
_b.label = 12;
case 12: return [3 /*break*/, 14];
case 13:
antd_1.message.warn(payload.msg);
_b.label = 14;
case 14:
this.setState({ editLoading: false });
return [3 /*break*/, 16];
case 15:
dealNex();
_b.label = 16;
case 16: return [2 /*return*/];
}
});
}); };
_this.rowEditModal = function () {
var _a = _this.props, labelName = _a.labelName, items = _a.items, editIndex = _a.editIndex, editStatus = _a.editStatus, __ = _a.translate;
var fieldTitle = labelName || '';
fieldTitle = fieldTitle.includes('</font>') ? fieldTitle.replace("<font color='red'>*</font>", '') : fieldTitle;
fieldTitle = (fieldTitle ? fieldTitle + '-' : '') + (editIndex === -1 ? items.length : editIndex + 1);
return (0, helper_1.isMobile)() ? react_1.default.createElement(antd_1.Drawer, { placement: "bottom", height: "auto", mask: true, className: "columns-toggler-drawer field-table-drawer ".concat(tools_1.tools.isIOS && !shell_1.Shell.hasShell() ? 'ios-device' : ''), title: __(editIndex == -1 ? 'Combo.add' : 'Combo.edit') + '：' + fieldTitle, closable: false, zIndex: 1011, destroyOnClose: true, getContainer: _this.props.env.getModalContainer, footer: _this.editFooter(), visible: editStatus }, _this.editBody()) : react_1.default.createElement(antd_1.Modal, { closable: false, width: 700, zIndex: 10000, destroyOnClose: true, className: 'row-edit-drawer ant-modal-adaptation-style', getContainer: false, title: _this.editHeader(fieldTitle), footer: _this.editFooter(), visible: editStatus }, _this.editBody());
};
_this.handleCloseFiled = function () {
var _a = _this.props, items = _a.items, startRowEdit = _a.startRowEdit, editIndex = _a.editIndex, setEditIndex = _a.setEditIndex, store = _a.store, originPrinstine = _a.originPrinstine, markoperationType = _a.markoperationType, removeItem = _a.removeItem;
if (_this.hasEdited) {
antd_1.Modal.confirm({
content: '新的修改没有保存，确认要离开？',
okText: '确定',
okType: 'primary',
cancelText: '取消',
className: 'ant-modal-adaptation-style',
zIndex: 1011,
onOk: function () {
if (editIndex !== -1) {
markoperationType(undefined);
setEditIndex(-1);
setTimeout(function () {
_this.handleQuickChange(store.rows[editIndex], _this.beforeData || originPrinstine[editIndex]);
startRowEdit(false);
_this.beforeData = null;
});
}
else {
startRowEdit(false);
markoperationType('delete');
removeItem(editIndex === -1 ? items.length - 1 : editIndex);
setEditIndex(-1);
}
_this.setState({ rowEditData: null });
}
});
}
else {
if (editIndex !== -1) {
_this.beforeData = null;
markoperationType(undefined);
setEditIndex(-1);
startRowEdit(false);
}
else {
startRowEdit(false);
markoperationType('delete');
setTimeout(function () {
removeItem(editIndex === -1 ? items.length - 1 : editIndex);
setEditIndex(-1);
});
}
_this.setState({ rowEditData: null });
}
};
_this.editHeader = function (fieldTitle) {
return react_1.default.createElement("div", { className: 'edit-row-header' },
react_1.default.createElement("div", null, fieldTitle),
react_1.default.createElement("span", { style: { top: '-3px', left: '12px' }, className: 'close-edit', onClick: _this.handleCloseFiled },
react_1.default.createElement(icons_1.Icon, { icon: (0, helper_1.isMobile)() ? 'title-left' : 'close', className: "icon", style: { width: (0, helper_1.isMobile)() ? '16px' : '12px', height: (0, helper_1.isMobile)() ? '16px' : '12px' } })));
};
_this.editFooter = function () { return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(antd_1.Button, { onClick: _this.handleCloseFiled, loading: _this.state.editLoading }, "\u53D6\u6D88"),
react_1.default.createElement(antd_1.Button, { type: 'primary', onClick: _this.handleComfirm, loading: _this.state.editLoading }, "\u786E\u5B9A"))); };
_this.hasEdited = false;
_this.lastChangeValue = {};
_this.editBody = function () {
var _a;
var _b = _this.props, render = _b.render, store = _b.store, editIndex = _b.editIndex, items = _b.items, data = _b.data, moneyParser = _b.moneyParser;
var formData = (0, helper_1.createObject)(data, editIndex === -1 ? items[items.length - 1] : (_a = store.rows[editIndex]) === null || _a === void 0 ? void 0 : _a.data);
return render('form-edit', _this.handleEditRow(), {
className: 'row-edit-form', mode: 'horizontal',
store: store,
addApi: undefined,
deleteApi: undefined,
data: tslib_1.__assign(tslib_1.__assign({}, formData), _this.state.rowEditData),
removable: undefined,
editable: undefined,
getFormInstance: function (form) {
if (!_this.formInstance) {
_this.formInstance = form;
}
},
onChange: function (value, name, submit, changePristine) {
var _a = _this.props, editIndex = _a.editIndex, items = _a.items, store = _a.store;
_this.hasEdited = true;
_this.handleQuickChange(editIndex === -1 ? store.rows[items.length - 1] : store.rows[editIndex], moneyParser(name, _this.getFieldsBody(), 'line'), true);
_this.setState({ rowEditData: tslib_1.__assign(tslib_1.__assign({}, value), moneyParser(name, _this.getFieldsBody(), 'line')) });
_this.lastChangeValue = tslib_1.__assign({}, name);
},
formMobileHorizontal: true
});
};
_this.handleTableRotate = function () {
var tableRotate = _this.state.tableRotate;
_this.setState({ tableRotate: !tableRotate });
};
_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.renderStatistics = _this.renderStatistics.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);
_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.handleEditRow = _this.handleEditRow.bind(_this);
_this.handleComfirm = (0, throttle_1.default)(_this.handleComfirm.bind(_this), 1000, { leading: true, trailing: false });
_this.state = {
position: [0, ''],
contextMenuVisible: false,
rowEditData: null,
tableRotate: false,
editLoading: 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, tableLayout = props.tableLayout, showIndex = props.showIndex;
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 || [];
_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,
showIndex: showIndex,
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(),
tableLayout: tableLayout
});
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;
// 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, _c;
// 如果column的hidden是true，则不允许被设置
if (col === null || col === void 0 ? void 0 : col.hidden)
col.canSet = false;
if (col.name && columnInfo[col.name]) {
if (((_a = columnInfo[col.name]) === null || _a === void 0 ? void 0 : _a.hidden) === 0) {
col.hidden = (_b = col === null || col === void 0 ? void 0 : col.hidden) !== null && _b !== void 0 ? _b : false;
}
else {
col.hidden = (_c = col === null || col === void 0 ? void 0 : col.hidden) !== null && _c !== void 0 ? _c : 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, 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 === null || col === void 0 ? void 0 : col.hidden)
col.canSet = false;
});
}
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;
}
var ns = this.props.classPrefix;
var tableContentWrap = dom.querySelector(".".concat(ns, "Table-contentWrap"));
tableContentWrap.addEventListener('scroll', this.scrollPingBox);
this.affixDetect();
parent.addEventListener('scroll', this.affixDetect);
window.addEventListener('resize', this.affixDetect);
this.updateAutoFillHeight();
window.addEventListener('resize', this.updateAutoFillHeight);
};
Table.prototype.updateAutoFillHeight = function () {
var _a = this.props, autoFillHeight = _a.autoFillHeight, ns = _a.classPrefix;
if (!this.table)
return;
var table = (0, react_dom_1.findDOMNode)(this);
var tableHeight = document.body.clientHeight - (0, offset_1.default)(table).top;
if (autoFillHeight && tableHeight >= 350) {
table.style.height = tableHeight + 'px';
}
};
Table.prototype.componentDidUpdate = function (prevProps) {
var _a, _b;
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,
showIndex: props.showIndex,
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) {
// 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();
//状态改变时，记录原先的数据
if (prevProps.editStatus !== props.editStatus) {
if (props.editIndex !== -1)
props.editStatus ? this.beforeData = (_b = (_a = store.rows) === null || _a === void 0 ? void 0 : _a[props.editIndex]) === null || _b === void 0 ? void 0 : _b.data : this.beforeData = null;
if (!props.editStatus) {
this.hasEdited = false;
this.formInstance = null;
}
}
};
Table.prototype.componentWillUnmount = function () {
var _a = this.props, formItem = _a.formItem, store = _a.store, ns = _a.classPrefix;
var parent = this.parentNode;
var dom = (0, react_dom_1.findDOMNode)(this);
var tableContentWrap = dom.querySelector(".".concat(ns, "Table-contentWrap"));
tableContentWrap.addEventListener('scroll', this.scrollPingBox);
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["".concat(x, "-").concat(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 (saveImmediately === void 0) { saveImmediately = false; }
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 (newRows) {
var _a = this.props, onSave = _a.onSave, primaryField = _a.primaryField;
var rows = newRows.map(function (item) { return (tslib_1.__assign(tslib_1.__assign({}, item), { isOrigin: true, isAdd: false, isUpdate: false })); });
var rowIndexes = newRows.map(function (item, index) { return String(index); });
var diff = rows.map(function (item) {
var obj = {};
Object.keys(item).forEach(function (k) {
var _a;
if (k !== primaryField) {
obj = tslib_1.__assign(tslib_1.__assign({}, obj), (_a = {}, _a[k] = item[k], _a));
}
});
return obj;
});
onSave === null || onSave === void 0 ? void 0 : onSave(rows, diff, rowIndexes);
};
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 = tslib_1.__assign(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(".".concat(ns, "Table-heading"))) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect().height) || 0;
var headerHeight = ((_d = dom.querySelector(".".concat(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(".".concat(ns, "Table-fixedTop"));
affixedDom.style.cssText += "top: ".concat(offsetY, "px;width: ").concat(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 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(".".concat(ns, "Table-fixedTop table, .").concat(ns, "Table-fixedLeft>table, .").concat(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: ".concat(width, "px; height: ").concat(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: ".concat(width, "px; height: ").concat(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', "".concat(width));
});
(0, forEach_1.default)(table.querySelectorAll('tbody>tr'), function (item, index) {
item.style.cssText += "height: ".concat(heights[index], "px");
});
table.style.cssText += "width: ".concat(Math.max(totalWidth, totalWidth2), "px;table-layout: auto;");
});
this.lastScrollLeft = -1;
this.handleOutterScroll();
};
Table.prototype.handleOutterScroll = function () {
var _a, _b, _c, _d, _e;
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(".".concat(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(".".concat(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(-".concat(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');
if (fixedLeftLastEl) {
var fixedLeftLastElRelativeLeft = fixedLeftLastEl.getBoundingClientRect().left -
dom.getBoundingClientRect().left;
if (leading ||
(fixedLeftLastElRelativeLeft > store.stickyWidths[lastLeftFixedIndex])) {
dom.classList.remove('fix-left');
}
else if (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:nth-child(1)>th').forEach(function (item) {
columnWidths[item.getAttribute('data-index')] =
item.scrollWidth;
});
(_c = this.table) === null || _c === void 0 ? void 0 : _c.querySelectorAll('thead>tr:nth-child(2)>th').forEach(function (item) {
columnWidths[item.getAttribute('data-index')] =
item.scrollWidth;
});
var stickyWidths = {};
if ((_d = leftFixedColumns[0]) === null || _d === void 0 ? void 0 : _d.index) {
stickyWidths["".concat(leftFixedColumns[0].index)] = columnWidths["".concat(leftFixedColumns[0].index)];
}
if ((_e = rightFixedColumnsReverse === null || rightFixedColumnsReverse === void 0 ? void 0 : rightFixedColumnsReverse[0]) === null || _e === void 0 ? void 0 : _e.index) {
stickyWidths["".concat(rightFixedColumnsReverse[0].index)] = columnWidths["".concat(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["".concat(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["".concat(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: ".".concat(ns, "Table-dragCell"),
filter: ".".concat(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=\"".concat(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(tslib_1.__assign(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 tslib_1.__assign(tslib_1.__assign({}, item), { pristine: tslib_1.__assign(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 }, tslib_1.__assign(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, onSearchableFromInit = _a.onSearchableFromInit, cx = _a.classnames, __ = _a.translate;
var searchableColumns = store.searchableColumns;
var activedSearchableColumns = store.activedSearchableColumns;
if (!searchableColumns.length) {
return null;
}
var groupedSearchableColumns = [
{ body: [], md: 4 },
{ body: [], md: 4 },
{ body: [], md: 4 }
];
activedSearchableColumns.forEach(function (column, index) {
var _a, _b, _c, _d;
groupedSearchableColumns[index % 3].body.push(tslib_1.__assign(tslib_1.__assign({}, column.searchable), { name: (_b = (_a = column.searchable) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : column.name, label: (_d = (_c = column.searchable) === null || _c === void 0 ? void 0 : _c.label) !== null && _d !== void 0 ? _d : column.label, mode: 'horizontal' }));
});
return render('searchable-form', {
type: 'form',
api: null,
title: '',
mode: 'normal',
submitText: __('search'),
body: [
{
type: 'grid',
columns: groupedSearchableColumns
}
],
actions: [
{
type: 'dropdown-button',
label: __('Table.searchFields'),
className: cx('Table-searchableForm-dropdown', 'mr-2'),
level: 'link',
trigger: 'click',
size: 'sm',
align: 'right',
buttons: searchableColumns.map(function (column) {
var _a, _b, _c, _d;
return {
type: 'checkbox',
className: cx('Table-searchableForm-checkbox'),
name: "__search_".concat((_b = (_a = column.searchable) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : column.name),
option: (_d = (_c = column.searchable) === null || _c === void 0 ? void 0 : _c.label) !== null && _d !== void 0 ? _d : column.label,
value: column.enableSearch,
badge: {
offset: [-10, 5],
visibleOn: "".concat(column.toggable && !column.toggled && column.enableSearch)
},
onChange: function (value) {
column.setEnableSearch(value);
}
};
})
},
{
type: 'submit',
label: __('search'),
level: 'primary',
className: 'w-18'
},
{
type: 'reset',
label: __('reset'),
className: 'w-18'
}
]
}, {
key: 'searchable-form',
panelClassName: cx('Table-searchableForm'),
actionsClassName: cx('Table-searchableForm-footer'),
onReset: onSearchableFromReset,
onSubmit: onSearchableFromSubmit,
onInit: onSearchableFromInit,
formStore: undefined
});
};
Table.prototype.renderHeading = function () {
var _a = this.props, title = _a.title, store = _a.store, hideQuickSaveBtn = _a.hideQuickSaveBtn, data = _a.data, cx = _a.classnames, saveImmediately = _a.saveImmediately, headingClassName = _a.headingClassName, quickSaveApi = _a.quickSaveApi, __ = _a.translate;
if (title ||
(quickSaveApi &&
!saveImmediately &&
store.modified &&
!hideQuickSaveBtn) ||
store.moved) {
return (react_1.default.createElement("div", { className: cx('Table-heading', headingClassName), key: "heading" }, !saveImmediately && store.modified && !hideQuickSaveBtn ? (react_1.default.createElement("span", null,
__('Table.modified', {
modified: store.modified
}),
react_1.default.createElement("button", { type: "button", className: cx('Button Button--xs Button--success m-l-sm') },
react_1.default.createElement(icons_1.Icon, { icon: "check", className: "icon m-r-xs" }),
__('Form.submit')),
react_1.default.createElement("button", { type: "button", className: cx('Button Button--xs Button--danger m-l-sm'), onClick: this.reset },
react_1.default.createElement(icons_1.Icon, { icon: "close", className: "icon m-r-xs" }),
__('Table.discard')))) : store.moved ? (react_1.default.createElement("span", null,
__('Table.moved', {
moved: store.moved
}),
react_1.default.createElement("button", { type: "button", className: cx('Button Button--xs Button--success m-l-sm'), onClick: this.handleSaveOrder },
react_1.default.createElement(icons_1.Icon, { icon: "check", className: "icon m-r-xs" }),
__('Form.submit')),
react_1.default.createElement("button", { type: "button", className: cx('Button Button--xs Button--danger m-l-sm'), onClick: this.reset },
react_1.default.createElement(icons_1.Icon, { icon: "close", className: "icon m-r-xs" }),
__('Table.discard')))) : title ? ((0, tpl_1.filter)(title, data)) : ('')));
}
return null;
};
Table.prototype.handleMultiColumnSort = function (name, isMultiple, columnMapValue) {
var _a, _b;
var _c = this.props, store = _c.store, preSortAble = _c.preSortAble, handleMutilSort = _c.handleMutilSort, onQuery = _c.onQuery, markSort = _c.markSort;
markSort();
var sort = null;
// 多列排
if (isMultiple) {
if (store.orderColumns.has(name)) {
if (((_a = store.getOrderColumn(name)) === null || _a === void 0 ? void 0 : _a.order) === 'desc') {
store.deleteOrderColumn(name);
}
else {
store.setOrderColumn(name, { order: 'desc', map: columnMapValue });
sort = 'desc';
}
}
else {
store.setOrderColumn(name, { order: 'asc', map: columnMapValue });
sort = 'asc';
}
}
else { // 单列排
var current = (_b = store.getOrderColumn(name)) === null || _b === void 0 ? void 0 : _b.order;
var value = current ? (current === 'asc' ? 'desc' : null) : 'asc';
var orderColumns = new Map();
if (value) {
orderColumns.set(name, { order: value, map: columnMapValue });
}
store.update({ orderColumns: orderColumns });
}
if (preSortAble) {
this.props.setLoading(true);
handleMutilSort(store.orderColumns, name, sort);
}
else {
onQuery &&
onQuery({
orderBy: store.orderColumnsParam(),
// orderDir: store.orderDir
});
}
};
Table.prototype.renderHeadCell = function (column, props) {
var _this = this;
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
var _m = this.props, store = _m.store, query = _m.query, onQuery = _m.onQuery, multiple = _m.multiple, env = _m.env, render = _m.render, ns = _m.classPrefix, resizable = _m.resizable, cx = _m.classnames, autoGenerateFilter = _m.autoGenerateFilter, onBatchEdit = _m.onBatchEdit, preSortAble = _m.preSortAble, tableName = _m.tableName;
var style = props.style;
if (column.type === '__checkme') {
return (react_1.default.createElement(LionContextMenu_1.ContextMenu, { menuItems: [
{ id: 0, title: '全选', icon: 'fa fa-check-square-o' },
{ id: 1, title: '反选', icon: 'fa fa-minus-square-o' },
{ id: 2, title: '不选', icon: 'fa fa-square-o' }
], onItemClick: function (index) { return _this.handleCheckAll(index); }, key: Date() },
react_1.default.createElement("th", tslib_1.__assign({}, props, { style: tslib_1.__assign({ cursor: 'pointer' }, style), className: cx(column.pristine.className), onClick: function () { _this.handleCheckAll(3); } }), store.rows.length && multiple ? (react_1.default.createElement(Checkbox_1.default, { classPrefix: ns, partial: !store.allChecked, checked: store.someChecked, disabled: store.disabledHeadCheckbox })) : (react_1.default.createElement("div", null, '\u00A0')))));
}
else if (column.type === '__dragme') {
return react_1.default.createElement("th", tslib_1.__assign({}, props, { className: cx(column.pristine.className) }));
}
else if (column.type === '__expandme') {
return (react_1.default.createElement("th", tslib_1.__assign({}, props, { className: cx(column.pristine.className) }), (store.footable &&
(store.footable.expandAll === false || store.footable.accordion)) ||
(store.expandConfig &&
(store.expandConfig.expandAll === false ||
store.expandConfig.accordion)) ? null : (react_1.default.createElement("a", { className: cx('Table-expandBtn', store.allExpanded ? 'is-active' : ''),
// data-tooltip="展开/收起全部"
// data-position="top"
onClick: store.toggleExpandAll },
react_1.default.createElement(icons_1.Icon, { icon: "right-arrow-bold", className: "icon" })))));
}
else if (column.type === '__pseudoColumn') {
return react_1.default.createElement("th", tslib_1.__assign({}, props, { className: cx(column.pristine.className, 'fixed-left-last') }));
}
var affix = null;
if (column.searchable && column.name && !autoGenerateFilter) {
affix = (react_1.default.createElement(HeadCellSearchDropdown_1.HeadCellSearchDropDown, tslib_1.__assign({}, this.props, { onQuery: onQuery, name: column.name, searchable: column.searchable, sortable: column.sortable, type: column.type, data: query, orderBy: store.orderBy, orderDir: store.orderDir, popOverContainer: this.getPopOverContainer })));
}
else if (column.sortable && column.name) {
affix = (react_1.default.createElement("span", { className: cx('TableCell-sortBtn') },
react_1.default.createElement("i", { className: cx('TableCell-sortBtn--down', ((_a = store.orderColumns) === null || _a === void 0 ? void 0 : _a.has(column.name)) && ((_c = (_b = store.getOrderColumn) === null || _b === void 0 ? void 0 : _b.call(store, column.name)) === null || _c === void 0 ? void 0 : _c.order) === 'desc'
? 'is-active'
: '') },
react_1.default.createElement(icons_1.Icon, { icon: "sort-desc", className: "icon" })),
react_1.default.createElement("i", { className: cx('TableCell-sortBtn--up', ((_d = store.orderColumns) === null || _d === void 0 ? void 0 : _d.has(column.name)) && ((_f = (_e = store.getOrderColumn) === null || _e === void 0 ? void 0 : _e.call(store, column.name)) === null || _f === void 0 ? void 0 : _f.order) === 'asc'
? 'is-active'
: '') },
react_1.default.createElement(icons_1.Icon, { icon: "sort-asc", className: "icon" })),
react_1.default.createElement("i", { className: cx('TableCell-sortBtn--default', ((_g = store.orderColumns) === null || _g === void 0 ? void 0 : _g.has(column.name))
? '' : 'is-active') })));
}
else if (column.filterable && column.name) {
affix = (react_1.default.createElement(HeadCellFilterDropdown_1.HeadCellFilterDropDown, tslib_1.__assign({}, this.props, { onQuery: onQuery, name: column.name, type: column.type, data: query, filterable: column.filterable, popOverContainer: this.getPopOverContainer })));
}
if (column.pristine.width) {
props.style = props.style || {};
props.style.width = column.pristine.width;
}
// else {
// props.style = props.style || {};
// props.style.maxWidth = 200;
// }
if (column.pristine.align) {
props.style = props.style || {};
props.style.textAlign = column.pristine.align;
}
var resizeLine = (react_1.default.createElement("div", { className: cx('Table-content-colDragLine'), key: "resize-".concat(column.index), onMouseDown: function (e) { return _this.handleColResizeMouseDown(e, column); } }));
var order = (_k = (_h = store.getOrderColumn) === null || _h === void 0 ? void 0 : _h.call(store, (_j = column.name) !== null && _j !== void 0 ? _j : '')) === null || _k === void 0 ? void 0 : _k.order;
var title = order === 'asc' ? '点击降序' : order === 'desc' ? '点击取消排序' : '点击升序';
var hasData = ((_l = store.data.items) === null || _l === void 0 ? void 0 : _l.length) > 0;
var tableTh = (react_1.default.createElement(tooltip_1.default, { title: title, color: 'white', placement: 'top', overlayInnerStyle: { color: 'black' }, overlayStyle: { visibility: column.sortable && hasData ? 'visible' : 'hidden' } },
react_1.default.createElement("div", { className: cx("".concat(ns, "TableCell--title"), column.pristine.className, column.pristine.labelClassName, { 'ellipsis': column.pristine.ellipsis }), style: tslib_1.__assign({ display: 'flex' }, props.style), onClick: function (e) {
if (hasData) {
if (column.sortable && column.name) {
_this.handleMultiColumnSort(column.name, e.ctrlKey, column.map);
}
}
}, onContextMenu: function (e) { return e.preventDefault(); } },
column.label ? render('tpl', column.label) : null,
column.remark
? render('remark', {
type: 'remark',
tooltip: column.remark,
container: env === null || env === void 0 ? void 0 : env.getTopModalContainer
})
: null,
column.pristine.batchEdit
? react_1.default.createElement(HeadCellBatchEditDropdown_1.HeadCellBatchEditDropdown, tslib_1.__assign({}, this.props, { onBatchEdit: onBatchEdit, name: column.name, batchEdit: column.pristine.batchEdit, popOverContainer: this.getPopOverContainer }))
: null)));
return (react_1.default.createElement("th", tslib_1.__assign({}, props, { className: cx(props ? props.className : '', {
'TableCell--sortable': column.sortable,
'TableCell--searchable': column.searchable,
'TableCell--filterable': column.filterable,
'Table-operationCell': column.type === 'operation'
}), "table-name": tableName, "column-name": column.name, style: tslib_1.__assign(tslib_1.__assign({}, props.style), { cursor: 'pointer' }) }),
tableTh,
affix,
resizable === false ? null : resizeLine));
};
Table.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, __ = _c.translate, setBorder = _c.setBorder;
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["".concat(column.index)]);
column.fixed === 'right' && (style.right = stickyWidths === null || stickyWidths === void 0 ? void 0 : stickyWidths["".concat(column.index)]);
column.fixed && (style.zIndex = 1);
if (column.type === '__checkme') {
return (react_1.default.createElement("td", { key: props.key, onContextMenu: function (e) {
e.preventDefault();
_this.setState({ position: [0, ''] });
}, onClick: checkOnItemClick ? helper_1.noop : this.handleCheck.bind(this, item), 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: tslib_1.__assign(tslib_1.__assign({}, style), { cursor: 'pointer' }) },
react_1.default.createElement(Checkbox_1.default, { classPrefix: ns, type: multiple ? 'checkbox' : 'radio', checked: item.checked, disabled: item.checkdisable })));
}
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,
//Aug
colSpan: store.mobileUI ? 2 : 1 },
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 ? (
// Aug 加入mobileUi
!store.mobileUI ? (react_1.default.createElement("a", { className: cx('Table-expandBtn', item.expanded ? 'is-active' : ''),
// data-tooltip="展开/收起"
// data-position="top"
onClick: item.toggleExpanded },
react_1.default.createElement(icons_1.Icon, { icon: "right-arrow-bold", className: "icon" }))) : (react_1.default.createElement("a", { className: cx(''), onClick: item.toggleExpanded }, item.expanded ? __('PutAway') : __('More')))) : null));
}
else if (column.type === '__pseudoColumn') {
return react_1.default.createElement("td", tslib_1.__assign({}, props, { className: cx(column.pristine.className, { 'fixed-left-last': column.index === lastLeftFixedIndex }, rowClassNameExpr ? (0, tpl_1.filter)(rowClassNameExpr, item.data) : rowClassName, setBorder ? 'td-border' : '') }), props.rowIndex + 1);
}
var prefixContent = null;
if (!ignoreDrag &&
column.isPrimary &&
store.isNested &&
store.draggable &&
item.draggable) {
prefixContent = (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" })));
}
// Jay
// 对于input-table-dynamic组件的原始数据做判断
// 禁用
var $path = this.props.$path;
var isInputTableDynamic = /(input-table-dynamic)/.test($path);
var isOrigin = item.pristine.isOrigin && isInputTableDynamic;
var subProps = tslib_1.__assign(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, prefixContent: prefixContent, onImageEnlarge: this.handleImageEnlarge, canAccessSuperData: canAccessSuperData, row: item, crudColumn: column.type == 'mapping' ? column : undefined, itemBadge: itemBadge, showBadge: !props.isHead &&
itemBadge &&
store.firstToggledColumnIndex === props.colIndex,
// Jay
disabled: isOrigin, showContextMenu: this.showContextMenu.bind(this) });
delete subProps.label;
if (column.type === 'operation') {
return render(region, tslib_1.__assign(tslib_1.__assign({}, column.pristine), { className: cx(column.pristine.className,
// Jay
{
'fixed-left-last': column.index === lastLeftFixedIndex,
'fixed-right-first': column.index === firstRightFixedIndex
}), column: column.pristine, type: 'cell' }), tslib_1.__assign(tslib_1.__assign({}, subProps), { isFieldTable: true }));
}
return render(region, tslib_1.__assign(tslib_1.__assign({}, column.pristine), { column: tslib_1.__assign(tslib_1.__assign({}, column.pristine), { quickEdit: false }), type: 'cell', hiddenOn: null, quickEdit: false }), tslib_1.__assign(tslib_1.__assign({}, subProps), { isFieldTable: true }));
};
Table.prototype.showContextMenu = function (rowIndex, colName) {
var visible = (colName != undefined && colName != 'operation');
this.setState({ position: [rowIndex, colName], contextMenuVisible: visible });
};
Table.prototype.renderToolbar = function (toolbar) {
var type = toolbar.type || toolbar;
if (type === 'columns-toggler') {
this.renderedToolbars.push(type);
return this.renderColumnsToggler(toolbar);
}
else if (type === 'drag-toggler') {
this.renderedToolbars.push(type);
return this.renderDragToggler();
}
else if (type === 'export-excel') {
this.renderedToolbars.push(type);
return this.renderExportExcel(toolbar);
}
else if (type === 'check-all') { //Aug
this.renderedToolbars.push(type);
return this.renderCheckAll();
}
return void 0;
};
// Aug
Table.prototype.renderCheckAll = function () {
var _this = this;
var _a = this.props, store = _a.store, multiple = _a.multiple, selectable = _a.selectable, cx = _a.classnames, ns = _a.classPrefix, __ = _a.translate;
if (!store.selectable ||
!multiple ||
!selectable ||
store.dragging ||
!store.rows.length) {
return null;
}
return (react_1.default.createElement("div", { key: "checkall", className: cx('Mobile-checkall') },
react_1.default.createElement(Checkbox_1.default, { classPrefix: ns, type: multiple ? 'checkbox' : 'radio', checked: store.allChecked, onChange: function () { return _this.handleCheckAll(3); }, inline: true }),
react_1.default.createElement("span", null, __('Select.checkAll'))));
};
Table.prototype.renderColumnsToggler = function (config) {
var _a;
var _b = this.props, className = _b.className, store = _b.store, ns = _b.classPrefix, cx = _b.classnames, rest = tslib_1.__rest(_b, ["className", "store", "classPrefix", "classnames"]);
var __ = rest.translate;
var env = rest.env;
var render = this.props.render;
if (!store.columnsTogglable) {
return null;
}
return (react_1.default.createElement(ColumnToggler_1.default, tslib_1.__assign({}, rest, ((0, helper_1.isObject)(config) ? config : {}), { tooltip: (config === null || config === void 0 ? void 0 : config.tooltip) || __('Table.columnsVisibility'), tooltipContainer: (env === null || env === void 0 ? void 0 : env.getTopModalContainer) || undefined, align: (_a = config === null || config === void 0 ? void 0 : config.align) !== null && _a !== void 0 ? _a : 'left', isActived: store.hasColumnHidden(), classnames: cx, classPrefix: ns, key: "columns-toggable", size: (config === null || config === void 0 ? void 0 : config.size) || 'sm', label: (config === null || config === void 0 ? void 0 : config.label) || react_1.default.createElement(icons_1.Icon, { icon: "columns", className: "icon m-r-none" }), draggable: config === null || config === void 0 ? void 0 : config.draggable, columns: store.columnsData, onColumnToggle: this.handleColumnToggle }), store.toggableColumns.map(function (column) { return (react_1.default.createElement("li", { className: cx('ColumnToggler-menuItem'), key: column.index, onClick: column.toggleToggle },
react_1.default.createElement(Checkbox_1.default, { size: "sm", classPrefix: ns, checked: column.toggled }, column.label ? render('tpl', column.label) : null))); })));
};
Table.prototype.renderDragToggler = function () {
var _a = this.props, store = _a.store, env = _a.env, draggable = _a.draggable, ns = _a.classPrefix, __ = _a.translate;
if (!draggable || store.isNested) {
return null;
}
return (react_1.default.createElement(Button_1.default, { disabled: !!store.modified, classPrefix: ns, key: "dragging-toggle", tooltip: __('Table.startSort'), tooltipContainer: (env === null || env === void 0 ? void 0 : env.getTopModalContainer) || undefined, size: "sm", active: store.dragging, onClick: function (e) {
e.preventDefault();
store.toggleDragging();
store.dragging && store.clear();
}, iconOnly: true },
react_1.default.createElement(icons_1.Icon, { icon: "exchange", className: "icon" })));
};
Table.prototype.renderExportExcel = function (toolbar) {
var _this = this;
var _a = this.props, store = _a.store, env = _a.env, ns = _a.classPrefix, cx = _a.classnames, __ = _a.translate, columns = _a.columns, data = _a.data;
if (!columns) {
return null;
}
return (react_1.default.createElement(Button_1.default, { classPrefix: ns, onClick: function () {
Promise.resolve().then(function () { return new Promise(function(resolve){require(['exceljs'], function(ret) {resolve(tslib_1.__importStar(ret));})}); }).then(function (ExcelJS) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
var rows, tmpStore, filename, res, workbook, worksheet, filteredColumns, firstRowLabels, firstRow, remoteMappingCache, rowIndex, _i, rows_1, row, sheetRow, columIndex, _a, filteredColumns_1, column, name, value, type, body, imageData, imageDimensions, imageWidth, imageHeight, imageMaxSize, imageMatch, imageExt, imageId, linkURL, e_1, linkURL, map, source, sourceValue, mapKey, res, viewValue, buffer, blob;
var _b, _c, _d, _e;
return tslib_1.__generator(this, function (_f) {
switch (_f.label) {
case 0:
rows = [];
filename = 'data';
if (!(typeof toolbar === 'object' && toolbar.api)) return [3 /*break*/, 2];
return [4 /*yield*/, env.fetcher(toolbar.api, data)];
case 1:
res = _f.sent();
if (!res.data) {
env.notify('warning', __('placeholder.noData'));
return [2 /*return*/];
}
if (Array.isArray(res.data)) {
rows = res.data;
}
else {
rows = res.data.rows || res.data.items;
}
// 因为很多方法是 store 里的，所以需要构建 store 来处理
tmpStore = table_1.TableStore.create((0, mobx_state_tree_1.getSnapshot)(store));
tmpStore.initRows(rows);
rows = tmpStore.rows;
return [3 /*break*/, 3];
case 2:
rows = store.rows;
_f.label = 3;
case 3:
if (typeof toolbar === 'object' && toolbar.filename) {
filename = (0, tpl_1.filter)(toolbar.filename, data, '| raw');
}
if (rows.length === 0) {
env.notify('warning', __('placeholder.noData'));
return [2 /*return*/];
}
workbook = new ExcelJS.Workbook();
worksheet = workbook.addWorksheet('sheet', {
properties: { defaultColWidth: 15 }
});
worksheet.views = [{ state: 'frozen', xSplit: 0, ySplit: 1 }];
filteredColumns = toolbar.columns
? columns.filter(function (column) {
var filterColumnsNames = toolbar.columns;
if (filterColumnsNames.indexOf(column.name) !== -1) {
return true;
}
return false;
})
: columns;
firstRowLabels = filteredColumns.map(function (column) {
return column.label;
});
firstRow = worksheet.getRow(1);
firstRow.values = firstRowLabels;
worksheet.autoFilter = {
from: {
row: 1,
column: 1
},
to: {
row: 1,
column: firstRowLabels.length
}
};
remoteMappingCache = {};
rowIndex = 1;
_i = 0, rows_1 = rows;
_f.label = 4;
case 4:
if (!(_i < rows_1.length)) return [3 /*break*/, 19];
row = rows_1[_i];
rowIndex += 1;
sheetRow = worksheet.getRow(rowIndex);
columIndex = 0;
_a = 0, filteredColumns_1 = filteredColumns;
_f.label = 5;
case 5:
if (!(_a < filteredColumns_1.length)) return [3 /*break*/, 18];
column = filteredColumns_1[_a];
columIndex += 1;
name = column.name;
value = (0, helper_1.getVariable)(row.data, name);
if (typeof value === 'undefined' &&
!column.tpl) {
return [3 /*break*/, 17];
}
// 处理合并单元格
if (name in row.rowSpans) {
if (row.rowSpans[name] === 0) {
return [3 /*break*/, 17];
}
else {
// start row, start column, end row, end column
worksheet.mergeCells(rowIndex, columIndex, rowIndex + row.rowSpans[name] - 1, columIndex);
}
}
type = column.type || 'plain';
body = column === null || column === void 0 ? void 0 : column.body;
if (!(type === 'image' && value)) return [3 /*break*/, 11];
_f.label = 6;
case 6:
_f.trys.push([6, 9, , 10]);
return [4 /*yield*/, (0, image_1.toDataURL)(value)];
case 7:
imageData = _f.sent();
return [4 /*yield*/, (0, image_1.getImageDimensions)(imageData)];
case 8:
imageDimensions = _f.sent();
imageWidth = imageDimensions.width;
imageHeight = imageDimensions.height;
imageMaxSize = 100;
if (imageWidth > imageHeight) {
if (imageWidth > imageMaxSize) {
imageHeight = (imageMaxSize * imageHeight) / imageWidth;
imageWidth = imageMaxSize;
}
}
else {
if (imageHeight > imageMaxSize) {
imageWidth = (imageMaxSize * imageWidth) / imageHeight;
imageHeight = imageMaxSize;
}
}
imageMatch = imageData.match(/data:image\/(.*);/);
imageExt = 'png';
if (imageMatch) {
imageExt = imageMatch[1];
}
// 目前 excel 只支持这些格式，所以其它格式直接输出 url
if (imageExt != 'png' &&
imageExt != 'jpeg' &&
imageExt != 'gif') {
sheetRow.getCell(columIndex).value = value;
return [3 /*break*/, 17];
}
imageId = workbook.addImage({
base64: imageData,
extension: imageExt
});
linkURL = getAbsoluteUrl(value);
worksheet.addImage(imageId, {
// 这里坐标位置是从 0 开始的，所以要减一
tl: { col: columIndex - 1, row: rowIndex - 1 },
ext: {
width: imageWidth,
height: imageHeight
},
hyperlinks: {
tooltip: linkURL
}
});
return [3 /*break*/, 10];
case 9:
e_1 = _f.sent();
console.warn(e_1.stack);
return [3 /*break*/, 10];
case 10: return [3 /*break*/, 17];
case 11:
if (!(type == 'link')) return [3 /*break*/, 12];
linkURL = getAbsoluteUrl(value);
sheetRow.getCell(columIndex).value = {
text: value,
hyperlink: linkURL
};
return [3 /*break*/, 17];
case 12:
if (!(type === 'mapping' || (type === "container" && body.type === 'mapping'))) return [3 /*break*/, 16];
map = type === 'mapping' ? column.map : (_b = column === null || column === void 0 ? void 0 : column.body) === null || _b === void 0 ? void 0 : _b.map;
source = type === 'mapping' ? column.source : (_c = column === null || column === void 0 ? void 0 : column.body) === null || _c === void 0 ? void 0 : _c.source;
if (!source) return [3 /*break*/, 15];
sourceValue = source;
if ((0, tpl_builtin_1.isPureVariable)(source)) {
sourceValue = (0, tpl_builtin_1.resolveVariableAndFilter)(source, data, '| raw');
}
mapKey = JSON.stringify(source);
if (!(mapKey in remoteMappingCache)) return [3 /*break*/, 13];
map = remoteMappingCache[mapKey];
return [3 /*break*/, 15];
case 13: return [4 /*yield*/, env.fetcher(sourceValue, data)];
case 14:
res = _f.sent();
if (res.data) {
remoteMappingCache[mapKey] = res.data;
map = res.data;
}
_f.label = 15;
case 15:
if (typeof value !== 'undefined' &&
map &&
((_d = map[value]) !== null && _d !== void 0 ? _d : map['*'])) {
viewValue = (_e = map[value]) !== null && _e !== void 0 ? _e : (value === true && map['1']
? map['1']
: value === false && map['0']
? map['0']
: map['*']);
sheetRow.getCell(columIndex).value =
(0, helper_1.removeHTMLTag)(viewValue);
}
else {
sheetRow.getCell(columIndex).value = (0, helper_1.removeHTMLTag)(value);
}
return [3 /*break*/, 17];
case 16:
if (column.tpl) {
sheetRow.getCell(columIndex).value = (0, helper_1.removeHTMLTag)((0, tpl_1.filter)(column.tpl, (0, helper_1.createObject)(data, row.data)));
}
else {
sheetRow.getCell(columIndex).value = value;
}
_f.label = 17;
case 17:
_a++;
return [3 /*break*/, 5];
case 18:
_i++;
return [3 /*break*/, 4];
case 19: return [4 /*yield*/, workbook.xlsx.writeBuffer()];
case 20:
buffer = _f.sent();
if (buffer) {
blob = new Blob([buffer], {
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
});
(0, file_saver_1.saveAs)(blob, filename + '.xlsx');
}
return [2 /*return*/];
}
});
}); });
}, size: "sm" }, toolbar.label || __('CRUD.exportExcel')));
};
Table.prototype.renderActions = function (region) {
var _this = this;
var _a = this.props, actions = _a.actions, render = _a.render, store = _a.store, cx = _a.classnames, data = _a.data;
actions = Array.isArray(actions) ? actions.concat() : [];
// Aug
var btn;
if (!~this.renderedToolbars.indexOf('check-all') &&
!store.hideCheckToggler &&
store.mobileUI &&
(btn = this.renderCheckAll())) {
actions.unshift({
type: 'button',
children: btn
});
}
if (store.toggable &&
region === 'header' &&
!~this.renderedToolbars.indexOf('columns-toggler')) {
actions.push({
type: 'button',
children: this.renderColumnsToggler()
});
}
if (store.draggable &&
!store.isNested &&
region === 'header' &&
store.rows.length > 1 &&
!~this.renderedToolbars.indexOf('drag-toggler')) {
actions.push({
type: 'button',
children: this.renderDragToggler()
});
}
return Array.isArray(actions) && actions.length ? (react_1.default.createElement("div", { className: cx('Table-actions') }, actions.map(function (action, key) {
return render("action/".concat(key), tslib_1.__assign({ type: 'button' }, action), {
onAction: _this.handleAction,
key: key,
btnDisabled: store.dragging,
data: store.getData(data)
});
}))) : null;
};
Table.prototype.renderHeader = function (editable) {
var _a, _b, _c;
var _d = this.props, header = _d.header, headerClassName = _d.headerClassName, toolbarClassName = _d.toolbarClassName, headerToolbarClassName = _d.headerToolbarClassName, headerToolbarRender = _d.headerToolbarRender, render = _d.render, showHeader = _d.showHeader, store = _d.store, cx = _d.classnames, data = _d.data, filterRender = _d.filterRender, //Aug
__ = _d.translate, isPick = _d.isPick, multiple = _d.multiple;
if (showHeader === false) {
return null;
}
// Aug
if (store.mobileUI) {
{ /* 搜索 */ }
var isFilter = !!Object.keys(data.filterParam || {}).length;
var filterNode = filterRender && filterRender(isFilter);
{ /* 批量 */ }
var checkAll = isPick && multiple ? this.renderCheckAll() : (((_a = this.props.headerBulkActions) === null || _a === void 0 ? void 0 : _a.length) || ((_b = this.props.footerBulkActions) === null || _b === void 0 ? void 0 : _b.length)) ?
react_1.default.createElement("span", { className: cx('Mobile-batch-manage', { 'is-active': !store.hideCheckToggler }), onClick: function (e) {
e.preventDefault();
store.toggableHideCheck();
store.clear();
} }, store.hideCheckToggler ?
react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("i", { className: 'fa fa-tasks batch-manage-icon' }),
react_1.default.createElement("span", { className: 'batch-text' }, __('CRUD.select'))) : __('Wizard.finish')) : null;
return filterNode || checkAll ? (react_1.default.createElement("div", { className: cx('Mobile-header-toolbar-wrapper') },
react_1.default.createElement("div", { className: 'filter-conditions' },
typeof data.total == 'number' ? __('CRUD.total', { total: data.total }) : null,
((_c = data.selectedItems) === null || _c === void 0 ? void 0 : _c.length) ? react_1.default.createElement("span", { style: { marginLeft: 10 } }, __('CRUD.checked', { count: data.selectedItems.length })) : null),
react_1.default.createElement("div", { className: 'header-btns' },
filterNode,
checkAll))) : null;
}
var otherProps = {};
var child = headerToolbarRender
? headerToolbarRender(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, this.props), { selectedItems: store.selectedRows.map(function (item) { return item.data; }), items: store.rows.map(function (item) { return item.data; }), unSelectedItems: store.unSelectedRows.map(function (item) { return item.data; }) }), otherProps), this.renderToolbar)
: null;
var actions = this.renderActions('header');
var toolbarNode = actions || child || store.dragging ? (react_1.default.createElement("div", { className: cx('Table-toolbar Table-headToolbar', toolbarClassName, headerToolbarClassName), key: "header-toolbar" },
actions,
child,
store.dragging ? (react_1.default.createElement("div", { className: cx('Table-dragTip'), ref: this.dragTipRef }, __('Table.dragTip'))) : null)) : null;
var headerNode = header && (!Array.isArray(header) || header.length) ? (react_1.default.createElement("div", { className: cx('Table-header', headerClassName), key: "header" }, render('header', header, tslib_1.__assign(tslib_1.__assign({}, (editable === false ? otherProps : null)), { data: store.getData(data) })))) : null;
return headerNode && toolbarNode
? [headerNode, toolbarNode]
: headerNode || toolbarNode || null;
};
Table.prototype.renderStatistics = function () {
var _a = this.props, statistics = _a.statistics, cx = _a.classnames, render = _a.render;
if (Array.isArray(statistics)) {
return (react_1.default.createElement("div", { className: cx('FieldTable-statistics') }, statistics.map(function (statistic) { return render('statistic', statistic); })));
}
return null;
};
Table.prototype.renderFooter = function () {
var _a = this.props, footer = _a.footer, toolbarClassName = _a.toolbarClassName, footerToolbarClassName = _a.footerToolbarClassName, footerClassName = _a.footerClassName, footerToolbarRender = _a.footerToolbarRender, headerToolbar = _a.headerToolbar, //Aug
footerToolbar = _a.footerToolbar, //Aug
render = _a.render, showFooter = _a.showFooter, store = _a.store, data = _a.data, cx = _a.classnames;
if (showFooter === false) {
return null;
}
// Aug
var _footer = footerToolbar || [];
if (store.mobileUI) {
// 勾选批量状态时
if (!store.hideCheckToggler) {
_footer = ["headerBulkActions", 'footerBulkActions'];
}
else {
if (headerToolbar) {
// 移动端将所有操作统一放在在底部
_footer = _footer.concat(headerToolbar);
}
// 非勾选状态不渲染批量操作 分页也不渲染
_footer = _footer.filter(function (item) {
var type = item.type || item;
return !['bulk-actions', 'headerBulkActions', 'footerBulkActions', 'bulkActions', 'pagination', 'statistics', 'switch-per-page'].includes(type);
});
}
}
var child = footerToolbarRender
? footerToolbarRender(tslib_1.__assign(tslib_1.__assign({}, this.props), { selectedItems: store.selectedRows.map(function (item) { return item.data; }), items: store.rows.map(function (item) { return item.data; }) }), this.renderToolbar, _footer //Aug
)
: null;
var actions = this.renderActions('footer');
var toolbarNode = actions || child ? (react_1.default.createElement("div", { className: cx('Table-toolbar Table-footToolbar', toolbarClassName, footerToolbarClassName), key: "footer-toolbar" },
actions,
child)) : null;
var footerNode = footer && (!Array.isArray(footer) || footer.length) ? (react_1.default.createElement("div", { className: cx('Table-footer', footerClassName), key: "footer" }, render('footer', footer, {
data: store.getData(data)
}))) : null;
return footerNode && toolbarNode
? [toolbarNode, footerNode]
: footerNode || toolbarNode || null;
};
Table.prototype.renderTableContent = function () {
var _this = this;
var _a = this.props, cx = _a.classnames, tableClassName = _a.tableClassName, store = _a.store, placeholder = _a.placeholder, render = _a.render, checkOnItemClick = _a.checkOnItemClick, buildItemProps = _a.buildItemProps, rowClassNameExpr = _a.rowClassNameExpr, rowClassName = _a.rowClassName, prefixRow = _a.prefixRow, locale = _a.locale, affixRow = _a.affixRow, tableContentClassName = _a.tableContentClassName, translate = _a.translate, itemAction = _a.itemAction, autoFillHeight = _a.autoFillHeight, itemActions = _a.itemActions, primaryField = _a.primaryField, infinteLoad = _a.infinteLoad, onLoadMore = _a.onLoadMore, loadHasMore = _a.loadHasMore, loading = _a.loading, tableType = _a.tableType, env = _a.env;
var tableRotate = this.state.tableRotate;
// 理论上来说 store.rows 应该也行啊
// 不过目前看来只有这样写它才会重新更新视图
store.rows.length;
var columns = store.filteredColumns;
return (react_1.default.createElement(TableContent_1.TableContent, { tableClassName: cx(store.combineNum > 0 ? 'Table-table--withCombine' : '', {
'Table-table--checkOnItemClick': checkOnItemClick,
// Aug 包含勾选框的情况
'has-checkbox': store.mobileUI && columns.some(function (item) { return item.type === '__checkme'; })
}, tableClassName), env: env, tableName: this.props.tableName, className: tableContentClassName, itemActions: itemActions, itemAction: itemAction, store: store, classnames: cx, columns: columns, columnsGroup: store.columnGroup, rows: store.rows, placeholder: placeholder, render: render, onMouseMove: this.handleMouseMove, onScroll: this.handleOutterScroll, tableRef: this.tableRef, renderHeadCell: this.renderHeadCell, renderCell: this.renderCell, onCheck: this.handleCheck, onQuickChange: store.dragging ? undefined : this.handleQuickChange, footable: store.footable, footableColumns: store.footableColumns, checkOnItemClick: checkOnItemClick, buildItemProps: buildItemProps, onAction: this.handleAction, rowClassNameExpr: rowClassNameExpr, rowClassName: rowClassName, data: store.data, prefixRow: prefixRow, affixRow: affixRow, locale: locale, translate: translate,
// Jay
autoFillHeight: autoFillHeight, position: this.state.position, primaryField: primaryField, contextMenuVisible: this.state.contextMenuVisible, onContextMenuVisibleChange: function (visible) {
if (!visible) {
_this.setState({ contextMenuVisible: false });
}
}, infinteLoad: infinteLoad, onLoadMore: onLoadMore, loadHasMore: loadHasMore, tableType: tableType, loading: loading, handleMultiColumnSort: this.handleMultiColumnSort, tableRotate: tableRotate, classPrefix: this.props.classPrefix, setBorder: this.props.setBorder, rowItems: this.props.items }));
};
Table.prototype.handleEditRow = function () {
var store = this.props.store;
var schema = {
name: "mobileHoriTableForm",
title: "",
type: "form",
wrapWithPanel: false,
store: store
};
return tslib_1.__assign(tslib_1.__assign({}, schema), { body: this.getFieldsBody() });
};
Table.prototype.render = function () {
var _a = this.props, className = _a.className, store = _a.store, cx = _a.classnames, _b = _a.autoFillHeight, autoFillHeight = _b === void 0 ? true : _b, autoGenerateFilter = _a.autoGenerateFilter, isPick = _a.isPick, multiple = _a.multiple, editStatus = _a.editStatus, __ = _a.translate, tableLayout = _a.tableLayout;
this.renderedToolbars = []; // 用来记录哪些 toolbar 已经渲染了，已经渲染了就不重复渲染了。
var heading = this.renderHeading();
var header = this.renderHeader();
var statistic = this.renderStatistics();
var footer = isPick && multiple && (0, helper_1.isMobile)() ? null : this.renderFooter();
return (react_1.default.createElement("div", { className: cx('Table', "Table-".concat(tableLayout), className, {
'Table--unsaved': !!store.modified || !!store.moved,
'Table--autoFillHeight': autoFillHeight,
'is-mobile': store.mobileUI
}), "table-name": this.props.tableName },
autoGenerateFilter ? this.renderAutoFilterForm() : null,
header,
heading,
statistic,
react_1.default.createElement("div", { className: cx('Table-contentWrap table-ping-right', {
'hasHeader': header,
'hasFooter': footer,
// tableRotate,
// isIos: Shell.hasShell() && tools.isIOS//处理横屏后ios中sticky样式的兼容问题
}), onMouseLeave: this.handleMouseLeave }, this.renderTableContent()),
editStatus && this.rowEditModal(),
footer));
};
var _a, _b, _c, _d, _e;
Table.propsList = [
'header',
'headerToolbarRender',
'footer',
'footerToolbarRender',
'footable',
'expandConfig',
'placeholder',
'tableClassName',
'headingClassName',
'source',
'selectable',
'columnsTogglable',
'affixHeader',
'affixColumns',
'headerClassName',
'footerClassName',
'selected',
'multiple',
'primaryField',
'hideQuickSaveBtn',
'itemCheckableOn',
'itemDraggableOn',
'checkOnItemClick',
'hideCheckToggler',
'itemAction',
'itemActions',
'combineNum',
'combineFromIndex',
'items',
'columns',
'valueField',
'saveImmediately',
'rowClassName',
'rowClassNameExpr',
'popOverContainer',
'headerToolbarClassName',
'toolbarClassName',
'footerToolbarClassName',
'itemBadge',
'autoFillHeight'
];
Table.defaultProps = {
className: '',
placeholder: 'placeholder.noData',
tableClassName: '',
source: '$items',
selectable: false,
// columnsTogglable: 'auto', //Aug
columnsTogglable: false,
affixHeader: true,
headerClassName: '',
footerClassName: '',
toolbarClassName: '',
headerToolbarClassName: '',
footerToolbarClassName: '',
primaryField: 'id',
itemCheckableOn: '',
itemDraggableOn: '',
// hideCheckToggler: false,
hideCheckToggler: (0, helper_1.isMobile)(),
footable: (0, helper_1.isMobile)(),
canAccessSuperData: false,
resizable: true,
tableLayout: 'vertical',
infinteLoad: (0, helper_1.isMobile)(),
showIndex: false
};
tslib_1.__decorate([
helper_1.autobind,
tslib_1.__metadata("design:type", Function),
tslib_1.__metadata("design:paramtypes", [typeof (_a = typeof react_1.default !== "undefined" && react_1.default.DragEvent) === "function" ? _a : Object]),
tslib_1.__metadata("design:returntype", void 0)
], Table.prototype, "handleDragStart", null);
tslib_1.__decorate([
helper_1.autobind,
tslib_1.__metadata("design:type", Function),
tslib_1.__metadata("design:paramtypes", [Object]),
tslib_1.__metadata("design:returntype", void 0)
], Table.prototype, "handleDragOver", null);
tslib_1.__decorate([
helper_1.autobind,
tslib_1.__metadata("design:type", Function),
tslib_1.__metadata("design:paramtypes", []),
tslib_1.__metadata("design:returntype", void 0)
], Table.prototype, "handleDrop", null);
tslib_1.__decorate([
helper_1.autobind,
tslib_1.__metadata("design:type", Function),
tslib_1.__metadata("design:paramtypes", []),
tslib_1.__metadata("design:returntype", void 0)
], Table.prototype, "handleDragEnd", null);
tslib_1.__decorate([
helper_1.autobind,
tslib_1.__metadata("design:type", Function),
tslib_1.__metadata("design:paramtypes", [Object, Object]),
tslib_1.__metadata("design:returntype", void 0)
], Table.prototype, "handleImageEnlarge", null);
tslib_1.__decorate([
helper_1.autobind,
tslib_1.__metadata("design:type", Function),
tslib_1.__metadata("design:paramtypes", [typeof (_b = typeof react_1.default !== "undefined" && react_1.default.MouseEvent) === "function" ? _b : Object, typeof (_c = typeof table_1.IColumn !== "undefined" && table_1.IColumn) === "function" ? _c : Object]),
tslib_1.__metadata("design:returntype", void 0)
], Table.prototype, "handleColResizeMouseDown", null);
tslib_1.__decorate([
helper_1.autobind,
tslib_1.__metadata("design:type", Function),
tslib_1.__metadata("design:paramtypes", [typeof (_d = typeof MouseEvent !== "undefined" && MouseEvent) === "function" ? _d : Object]),
tslib_1.__metadata("design:returntype", void 0)
], Table.prototype, "handleColResizeMouseMove", null);
tslib_1.__decorate([
helper_1.autobind,
tslib_1.__metadata("design:type", Function),
tslib_1.__metadata("design:paramtypes", [typeof (_e = typeof MouseEvent !== "undefined" && MouseEvent) === "function" ? _e : Object]),
tslib_1.__metadata("design:returntype", void 0)
], Table.prototype, "handleColResizeMouseUp", null);
return Table;
}(react_1.default.Component));
exports.default = Table;
var TableRenderer = /** @class */ (function (_super) {
tslib_1.__extends(TableRenderer, _super);
function TableRenderer() {
return _super !== null && _super.apply(this, arguments) || this;
}
TableRenderer = tslib_1.__decorate([
(0, factory_1.Renderer)({
type: 'field-table-horizontal',
storeType: table_1.TableStore.name,
name: 'field-table-horizontal'
})
], TableRenderer);
return TableRenderer;
}(Table));
exports.TableRenderer = TableRenderer;
//# sourceMappingURL=./renderers/FieldTableHorizontal/index.js.map