fastlion-amis
Version:
一种MIS页面生成工具
680 lines • 79.1 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CrudBody = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var helper_1 = require("../../../utils/helper");
var utils_1 = require("../utils");
var antd_1 = require("antd");
var __1 = require("../../..");
var Button_1 = tslib_1.__importDefault(require("../../../components/Button"));
var icons_1 = require("../../../components/icons");
var LionCopyItem_1 = tslib_1.__importDefault(require("../../Lion/components/LionCopyItem"));
var lodash_1 = require("lodash");
var storage_1 = require("../../../utils/storage");
var Table_1 = require("../../Table");
var filter_schema_1 = tslib_1.__importDefault(require("../../../utils/filter-schema"));
var types_1 = require("../types");
var OverflowWrapper_1 = tslib_1.__importDefault(require("../../../components/OverflowWrapper"));
var AiTool_1 = tslib_1.__importDefault(require("../../Table/AiTool"));
var LodopFuncs_1 = require("../../../utils/print/LodopFuncs");
var tools_1 = require("../../../utils/shell/tools");
var utils_2 = require("../../Lion/utils/utils");
var api_1 = require("../../../utils/api");
var ExpressPrint_1 = require("../../Lion/ExpressPrint/ExpressPrint");
var BatchOperation_1 = require("../../../components/Lion/BatchOperation");
var crud_1 = require("../../../store/crud");
// 渲染具体工具按钮的方法-容器方法在外部调用
var ToolButton = function (_a) {
var props = _a.props, reload = _a.reload, toolbar = _a.toolbar, _b = _a.index, index = _b === void 0 ? 0 : _b, _c = _a.childProps, childProps = _c === void 0 ? {} : _c, toolbarRenderer = _a.toolbarRenderer, renderToolbar = _a.renderToolbar, getTableStore = _a.getTableStore, filtercont = _a.filtercont, tableStore = _a.tableStore, handleQuery = _a.handleQuery, handleAction = _a.handleAction, tableInstance = _a.tableInstance, setCrudState = _a.setCrudState, advanceFilterForm = _a.advanceFilterForm, search = _a.search, afterSearchFn = _a.afterSearchFn, control = _a.control, modes = _a.modes, quickEditDataCheck = _a.quickEditDataCheck, crudRef = _a.crudRef, handleFakeAnimation = _a.handleFakeAnimation, setModes = _a.setModes, setAutoWidth = _a.setAutoWidth, bulkActionRender = _a.bulkActionRender, renderMoreToolbar = _a.renderMoreToolbar, originFilterData = _a.originFilterData, setTotal = _a.setTotal, showColumnsFilter = _a.showColumnsFilter, autoWidth = _a.autoWidth;
var render = props.render, name = props.name, store = props.store, __ = props.translate, card = props.card, listItem = props.listItem, cross = props.cross, header = props.header, filter = props.filter, cx = props.classnames, primaryField = props.primaryField, mode = props.mode, headerBulkActions = props.headerBulkActions, footerBulkActions = props.footerBulkActions, headerToolbar = props.headerToolbar, headerActions = props.headerActions, inModal = props.inModal;
var _d = (0, react_1.useState)(false), toolActionSwitch = _d[0], setToolActionSwitch = _d[1]; //工具栏按钮开关按钮
var pageSwitchRef = (0, react_1.useRef)(null);
var type = toolbar.type || toolbar;
var toolBarAction = function () { reload(); };
var inSmallDialog = function () {
var _a, _b;
return !!((_b = (_a = crudRef === null || crudRef === void 0 ? void 0 : crudRef.current) === null || _a === void 0 ? void 0 : _a.closest('div[role="dialog"]')) === null || _b === void 0 ? void 0 : _b.className.includes('Modal--sm'));
};
var handleItemAction = function (action, ctx) {
handleAction(undefined, action, ctx, false);
};
var handleChangePage = function (page, perPage) { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
var syncLocation, env, pageField, perPageField, autoJumpToTopOnPagerChange, affixOffsetTop, loadDataOnce, query, queryParams, advanced, filter_1, scrolledY, offsetTop;
var _a;
var _b;
return tslib_1.__generator(this, function (_c) {
switch (_c.label) {
case 0:
syncLocation = props.syncLocation, env = props.env, pageField = props.pageField, perPageField = props.perPageField, autoJumpToTopOnPagerChange = props.autoJumpToTopOnPagerChange, affixOffsetTop = props.affixOffsetTop, loadDataOnce = props.loadDataOnce;
query = (_a = {},
_a[pageField || 'page'] = page,
_a);
if (!!loadDataOnce) return [3 /*break*/, 2];
return [4 /*yield*/, quickEditDataCheck()];
case 1:
_c.sent();
_c.label = 2;
case 2:
if (perPage) {
query[perPageField || 'perPage'] = perPage;
}
store.updateQuery(query, syncLocation && (env === null || env === void 0 ? void 0 : env.updateLocation) ? env.updateLocation : undefined, pageField, perPageField);
if (advanceFilterForm === null || advanceFilterForm === void 0 ? void 0 : advanceFilterForm.confirmAdvancedFilter()) {
advanced = advanceFilterForm === null || advanceFilterForm === void 0 ? void 0 : advanceFilterForm.confirmAdvancedFilter();
filter_1 = (advanced === null || advanced === void 0 ? void 0 : advanced.advancedFilter.length) || (advanced === null || advanced === void 0 ? void 0 : advanced.advancedFilterSub.length) || Object.keys(advanced === null || advanced === void 0 ? void 0 : advanced.advancedHeader).length;
if (filter_1) {
queryParams = advanceFilterForm === null || advanceFilterForm === void 0 ? void 0 : advanceFilterForm.confirmAdvancedFilter();
}
}
if (Object.keys(filtercont).length) {
queryParams = filtercont;
}
search(undefined, undefined, undefined, false, afterSearchFn, undefined, undefined, queryParams);
if (autoJumpToTopOnPagerChange && control) {
control === null || control === void 0 ? void 0 : control.scrollIntoView();
scrolledY = window.scrollY;
offsetTop = (_b = affixOffsetTop !== null && affixOffsetTop !== void 0 ? affixOffsetTop : env === null || env === void 0 ? void 0 : env.affixOffsetTop) !== null && _b !== void 0 ? _b : 0;
scrolledY && window.scroll(0, scrolledY - offsetTop);
}
return [2 /*return*/];
}
});
}); };
var renderType = function (schema) {
var _a, _b;
var ctx = props.ctx, cx = props.classnames, ns = props.classPrefix, __ = props.translate, card = props.card, listItem = props.listItem, cross = props.cross, env = props.env;
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(LionCopyItem_1.default, { showItems: [{
value: (_b = (_a = schema.name) !== null && _a !== void 0 ? _a : schema.labelId) !== null && _b !== void 0 ? _b : "",
label: __('Alert.copyName'),
icon: "fa fa-sticky-note-o"
}], env: env },
react_1.default.createElement(antd_1.Popover, { placement: "bottomLeft", overlayClassName: cx('Tool-action'), getPopupContainer: env.getModalContainer, trigger: ['hover'], content: function () {
if (!(listItem || card || cross))
return react_1.default.createElement(react_1.default.Fragment, null);
return react_1.default.createElement("div", { className: 'crud-mode-exchange' },
react_1.default.createElement(Button_1.default, { disabled: modes == 'table' || modes == undefined, classPrefix: ns, onClick: function () {
setModes('table');
handleFakeAnimation();
}, size: "sm" },
react_1.default.createElement(icons_1.Icon, { icon: '#icon-tooltool_table', className: "icon", symbol: true }),
"\u8868\u683C"),
listItem && react_1.default.createElement(Button_1.default, { disabled: modes == 'list', classPrefix: ns, onClick: function () {
getTableStore(null);
setModes('list');
handleFakeAnimation();
}, size: "sm" },
react_1.default.createElement(icons_1.Icon, { icon: '#icon-tooltool_list', className: "icon", symbol: true }),
"\u5217\u8868"),
card && react_1.default.createElement(Button_1.default, { disabled: modes == 'cards', classPrefix: ns, onClick: function () {
getTableStore(null);
setModes('cards');
handleFakeAnimation();
}, size: "sm" },
react_1.default.createElement(icons_1.Icon, { icon: '#icon-toolqiapianxingshi', className: "icon", symbol: true }),
"\u5361\u7247"),
cross && react_1.default.createElement(Button_1.default, { disabled: modes == 'cross', classPrefix: ns, onClick: function () {
setModes('cross');
handleFakeAnimation();
}, size: "sm" },
react_1.default.createElement(icons_1.Icon, { icon: '#icon-tooltool_table', className: "icon", symbol: true }),
"\u4EA4\u53C9"));
} },
react_1.default.createElement(Button_1.default, { disabled: schema.disabled || (0, __1.evalExpression)(schema.disabledOn, ctx), classPrefix: ns,
// onClick={this.debounceChangeMode}
size: "sm" },
(schema === null || schema === void 0 ? void 0 : schema.icon) ?
react_1.default.createElement(icons_1.Icon, { icon: schema === null || schema === void 0 ? void 0 : schema.icon, className: "icon", symbol: true }) :
react_1.default.createElement(icons_1.Icon, { style: { width: '14px', height: '15px', fill: autoWidth ? '#005bff' : '#000', stroke: '#005bff' }, icon: "auto-width", className: "icon" }),
(schema === null || schema === void 0 ? void 0 : schema.label) && (schema === null || schema === void 0 ? void 0 : schema.label))))));
};
var renderAutoWidth = function (toolbar) {
var env = props.env;
return (react_1.default.createElement(Button_1.default, { tooltip: autoWidth ? '宽松列宽' : '紧凑列宽', size: "sm", iconOnly: true, butColor: autoWidth, tooltipContainer: (env === null || env === void 0 ? void 0 : env.getTopModalContainer) || undefined, onClick: function () {
var autoWidthPage = (0, storage_1.getLocalStorage)('autoWidthPage') || {};
autoWidthPage[name || ''] = !autoWidth;
(0, storage_1.setLocalStorage)('autoWidthPage', autoWidthPage);
setAutoWidth(!autoWidth);
var localEditWidthMap = (0, storage_1.getLocalStorage)(Table_1.EDITWIDTHKEY) || {};
localEditWidthMap === null || localEditWidthMap === void 0 ? true : delete localEditWidthMap[name || ''];
(0, storage_1.setLocalStorage)(Table_1.EDITWIDTHKEY, localEditWidthMap);
} },
(toolbar === null || toolbar === void 0 ? void 0 : toolbar.icon) ?
react_1.default.createElement(icons_1.Icon, { icon: toolbar === null || toolbar === void 0 ? void 0 : toolbar.icon, className: "icon", symbol: true }) :
react_1.default.createElement(icons_1.Icon, { style: { width: '14px', height: '15px', fill: autoWidth ? '#005bff' : '#000', stroke: '#005bff' }, icon: "auto-width", className: "icon" }),
(toolbar === null || toolbar === void 0 ? void 0 : toolbar.label) && (toolbar === null || toolbar === void 0 ? void 0 : toolbar.label)));
};
var renderPrint = function (schema, isFilePrint) {
var _a, _b;
var store = props.store, ns = props.classPrefix, env = props.env;
var selectedItems = (0, utils_1.getTableSelectedRowsData)(store, tableStore);
var ids = selectedItems
.map(function (item) {
return item.hasOwnProperty(primaryField) ? item[primaryField] : null;
})
.filter(function (item) { return item; })
.join(',');
var ctx = (0, helper_1.createObject)(store.mergedData, tslib_1.__assign(tslib_1.__assign({}, selectedItems[0]), { items: (0, utils_1.getTableRowsData)(store, tableStore), // 选中行数据
selectedItems: selectedItems, // 选中行数据
ids: ids, primaryField: primaryField }));
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(LionCopyItem_1.default, { showItems: [{
value: (_b = (_a = schema.name) !== null && _a !== void 0 ? _a : schema.labelId) !== null && _b !== void 0 ? _b : "",
label: __('Alert.copyName'),
icon: "fa fa-sticky-note-o"
}], env: env },
react_1.default.createElement(Button_1.default, { disabled: schema.disabled || (0, __1.evalExpression)(schema.disabledOn, ctx), classPrefix: ns, onClick: function () {
var LODOP = (0, LodopFuncs_1.getLodop)();
if (LODOP) {
setCrudState({
ModalProps: tslib_1.__assign(tslib_1.__assign({}, schema), { show: true, ctx: ctx }),
printType: isFilePrint
? 'file'
: schema.actionType === 'label-print'
? 'label'
: 'bill'
});
}
}, size: "sm" }, __(schema.label
? schema.label
: !isFilePrint
? 'CRUD.labelPrint'
: 'CRUD.filePrint')))));
};
var renderColumnsFilterBtn = function (toolbar) {
var env = props.env, loadDataOnce = props.loadDataOnce;
return (react_1.default.createElement(Button_1.default, { tooltip: '列过滤', size: "sm", iconOnly: true, butColor: showColumnsFilter, tooltipContainer: (env === null || env === void 0 ? void 0 : env.getTopModalContainer) || undefined, onClick: function () {
if (showColumnsFilter) {
setCrudState({ filterDrawerVisible: true });
}
else {
var value = localStorage.getItem(name !== null && name !== void 0 ? name : '');
if (value) {
var obj_1 = JSON.parse(value);
Object.keys(obj_1).forEach(function (key) { return tableStore === null || tableStore === void 0 ? void 0 : tableStore.filterColumns.set(key, obj_1[key]); });
}
if (showColumnsFilter) {
setCrudState({ filterDrawerVisible: true });
}
else {
var items = tableStore === null || tableStore === void 0 ? void 0 : tableStore.handleMutilSort(loadDataOnce);
if (loadDataOnce && Array.isArray(items))
setTotal(items.length);
setCrudState({ showColumnsFilter: !showColumnsFilter });
}
}
} },
(toolbar === null || toolbar === void 0 ? void 0 : toolbar.icon) ?
react_1.default.createElement(icons_1.Icon, { icon: toolbar === null || toolbar === void 0 ? void 0 : toolbar.icon, className: "icon", symbol: true }) :
react_1.default.createElement(icons_1.Icon, { icon: "packet-filtery", className: "icon" }),
(toolbar === null || toolbar === void 0 ? void 0 : toolbar.label) && (toolbar === null || toolbar === void 0 ? void 0 : toolbar.label)));
};
var renderPagination = function (toolbar) {
var store = props.store, render = props.render, cx = props.classnames, alwaysShowPagination = props.alwaysShowPagination;
var page = store.page, lastPage = store.lastPage;
if (store.mode !== 'simple' &&
store.lastPage < 2 &&
!alwaysShowPagination) {
return react_1.default.createElement(react_1.default.Fragment, null);
}
var extraProps = {};
if (typeof toolbar !== 'string') {
extraProps.showPageInput = toolbar.showPageInput;
extraProps.maxButtons = toolbar.maxButtons;
}
return (react_1.default.createElement("div", { className: cx('Crud-pager') }, render('pagination', {
type: 'pagination'
}, tslib_1.__assign(tslib_1.__assign({}, extraProps), { inSmallDialog: inSmallDialog(), activePage: page, lastPage: lastPage, hasNext: store.hasNext, mode: store.mode, onPageChange: handleChangePage }))));
};
var renderAiTool = function (action) {
var api = props.api, env = props.env;
var newData = (0, helper_1.createObject)(store.filterData, store.query, {}, true);
var _a = store.getRawCacheData().curApiForCache, curApiForCache = _a === void 0 ? '' : _a;
return (react_1.default.createElement(AiTool_1.default, { pageId: name !== null && name !== void 0 ? name : '', env: tslib_1.__assign(tslib_1.__assign({}, env), { container: crudRef === null || crudRef === void 0 ? void 0 : crudRef.current }), action: action, data: newData, paramData: curApiForCache || (api === null || api === void 0 ? void 0 : api.url), render: render }));
};
var renderStatistics = function () {
var _a, _b;
return (react_1.default.createElement("div", { className: cx('Crud-statistics') }, mode == 'cross' ?
__('CRUD.total', { total: mode == 'cross' ? (_a = tableStore === null || tableStore === void 0 ? void 0 : tableStore.rows) === null || _a === void 0 ? void 0 : _a.length : (_b = store.data) === null || _b === void 0 ? void 0 : _b.total }) :
__('CRUD.stat', { total: store.total })));
};
var renderSwitchPerPage = function (childProps) {
var _a;
var perPageAvailable = props.perPageAvailable;
var perPages = (perPageAvailable || [5, 10, 20, 50, 100]).map(function (item) { return ({
// Jay 修改分页器样式
label: item + (inSmallDialog() ? '' : " ".concat(__('CRUD.countPage'))),
value: item
}); });
return (react_1.default.createElement("div", { className: cx('Crud-pageSwitch'), ref: pageSwitchRef },
react_1.default.createElement(antd_1.Select, { options: perPages, placeholder: __('Select.placeholder'), defaultValue: ((_a = perPages[0]) === null || _a === void 0 ? void 0 : _a.value) || '', onChange: function (value) {
handleChangePage(1, value);
}, getPopupContainer: function () { return pageSwitchRef.current; } })));
};
var renderLoadMore = function (toolbar) {
var ns = props.classPrefix;
var page = store.page, lastPage = store.lastPage;
return page < lastPage ? (react_1.default.createElement("div", { className: cx('Crud-loadMore') },
react_1.default.createElement(Button_1.default, { classPrefix: ns, onClick: function () {
return search({ page: page + 1, loadDataMode: 'load-more' });
}, size: "sm" },
(toolbar === null || toolbar === void 0 ? void 0 : toolbar.icon) &&
react_1.default.createElement(icons_1.Icon, { icon: toolbar === null || toolbar === void 0 ? void 0 : toolbar.icon, className: "icon", symbol: true }),
(toolbar === null || toolbar === void 0 ? void 0 : toolbar.label) ? toolbar === null || toolbar === void 0 ? void 0 : toolbar.label : __('CRUD.loadMore')))) : (react_1.default.createElement(react_1.default.Fragment, null));
};
var renderFilterToggler = function () {
if (!store.filterTogggable) {
return react_1.default.createElement(react_1.default.Fragment, null);
}
return (react_1.default.createElement("button", { onClick: function () { return store.setFilterVisible(!store.filterVisible); }, className: cx('Button Button--sm Button--default', {
'is-active': store.filterVisible
}) },
react_1.default.createElement(icons_1.Icon, { icon: "filter", className: "icon m-r-xs" }),
__('CRUD.filter')));
};
var renderExportCSV = function (toolbar) {
var ns = props.classPrefix, loadDataOnce = props.loadDataOnce;
var api = toolbar.api;
return (react_1.default.createElement(Button_1.default, { classPrefix: ns, onClick: function () {
return store.exportAsCSV({
loadDataOnce: loadDataOnce,
api: api
});
}, size: "sm" }, toolbar.label || __('CRUD.exportCSV')));
};
var renderExport = function (toolbar) {
var _a, _b;
var ns = props.classPrefix, env = props.env;
var ctx = (0, helper_1.createObject)({}, {
items: (0, utils_1.getTableRowsData)(store, tableStore),
selectedItems: (0, utils_1.getTableSelectedRowsData)(store, tableStore),
unSelectedItems: store.unSelectedItems.concat()
});
return (react_1.default.createElement(LionCopyItem_1.default, { showItems: [{
value: (_b = (_a = toolbar.name) !== null && _a !== void 0 ? _a : toolbar.labelId) !== null && _b !== void 0 ? _b : "",
label: __('Alert.copyName'),
icon: "fa fa-sticky-note-o"
}], env: env },
react_1.default.createElement("div", { style: { position: 'relative' }, className: 'exportExcel' },
react_1.default.createElement(Button_1.default, { classPrefix: ns, onClick: function (e) { handleAction(e, toolbar, ctx); }, size: "sm" },
(toolbar === null || toolbar === void 0 ? void 0 : toolbar.icon) && react_1.default.createElement(icons_1.Icon, { icon: toolbar === null || toolbar === void 0 ? void 0 : toolbar.icon, className: "icon", symbol: true }),
toolbar.label || __('CRUD.exportExcel')),
toolbar.redDot === true && react_1.default.createElement("div", { style: { position: 'absolute', display: 'inline-block', right: 0, top: 0, background: 'red', width: 6, height: 6, borderRadius: 4 } }))));
};
var renderReload = function (toolbar, index) {
if (toolbar.isToolBar && (0, helper_1.isMobile)()) {
return (react_1.default.createElement("div", { className: 'toolbar-item', onClick: toolBarAction },
react_1.default.createElement("div", { className: 'toolbar-item-icon' },
react_1.default.createElement(icons_1.Icon, { icon: toolbar.icon })),
react_1.default.createElement("div", { className: 'toolbar-item-name' }, __('reload'))));
}
else {
var reloadButton = {
label: '',
icon: toolbar.icon,
tooltip: __('reload'),
tooltipPlacement: 'top',
type: 'button'
};
if (typeof toolbar === 'object') {
reloadButton = tslib_1.__assign(tslib_1.__assign({}, reloadButton), (0, lodash_1.omit)(toolbar, ['type', 'align']));
}
return render("toolbar/".concat(index), reloadButton, {
onAction: toolBarAction
});
}
};
var renderBulkActions = function (childProps, bulkActions) {
var itemActions = props.itemActions, store = props.store, render = props.render, cx = props.classnames, useMobileUI = props.useMobileUI, primaryField = props.primaryField, inModal = props.inModal;
var items = childProps.items;
if (!items.length ||
((!bulkActions || !bulkActions.length) &&
(!itemActions || !itemActions.length))) {
return null;
}
var selectedItems = (0, utils_1.getTableSelectedRowsData)(store, tableStore);
var bulkBtns = [];
var itemBtns = [];
var ctx = store.mergedData;
if (bulkActions &&
bulkActions.length &&
(!itemActions || !itemActions.length || selectedItems.length > 1)) {
bulkBtns = bulkActions
.filter(function (toolbar) {
return (0, helper_1.isVisible)(toolbar, inModal ? originFilterData : store.filterData);
})
.map(function (item) { return (tslib_1.__assign(tslib_1.__assign({}, item), (0, filter_schema_1.default)(item, ctx))); })
.filter(function (item) { return (item === null || item === void 0 ? void 0 : item.visible) !== false; });
}
var itemData = (0, helper_1.createObject)(store.data, selectedItems.length ? selectedItems[0] : {});
if (itemActions && selectedItems.length <= 1) {
itemBtns = itemActions
.map(function (item) { return (tslib_1.__assign(tslib_1.__assign({}, item), (0, filter_schema_1.default)(item, itemData))); })
.filter(function (item) { return (item === null || item === void 0 ? void 0 : item.visible) !== false; });
}
var ids = selectedItems
.map(function (item) {
return item.hasOwnProperty(primaryField) ? item[primaryField] : null;
})
.filter(function (item) { return item; })
.join(',');
// Aug
var renderBulk = bulkBtns.length
? bulkBtns.map(function (btn, index) { return bulkActionRender(btn, index); }) : [];
var renderItem = itemBtns.length
? itemBtns.map(function (btn, index) {
return render("bulk-action/".concat(index), tslib_1.__assign(tslib_1.__assign({}, (0, lodash_1.omit)(btn, ['visibleOn', 'hiddenOn', 'disabledOn'])), { type: types_1.specialButtonType.includes(btn.type) ? btn.type : 'button' }), {
key: "item-".concat(index),
data: itemData,
disabled: btn.disabled || selectedItems.length !== 1,
onAction: handleItemAction
});
})
: [];
var children = tslib_1.__spreadArray(tslib_1.__spreadArray([], renderBulk, true), renderItem, true);
if (useMobileUI && (0, helper_1.isMobile)() && children.length > 3) {
var more = children.splice(2);
children.splice(0, 0, renderMoreToolbar(more));
}
return (react_1.default.createElement("div", { className: cx('Crud-actions', 'Crud-bulkActions') }, children));
};
var renderToolAction = function (toolbar, index, childProps, toolbarRenderer) {
var _a, _b;
if (index === void 0) { index = 0; }
if (childProps === void 0) { childProps = {}; }
var cx = props.classnames, __ = props.translate, env = props.env;
return react_1.default.createElement(antd_1.Popover, { placement: "bottomLeft", overlayClassName: cx('Tool-action'), getPopupContainer: env.getModalContainer, onVisibleChange: function (visible) { return setToolActionSwitch(visible); }, trigger: (0, helper_1.isMobile)() ? 'click' : 'hover', visible: toolActionSwitch, overlay: true, content: react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", { className: cx('Tool-action-body'), onClick: function (e) { return setToolActionSwitch(false); } }, toolbar.toolBarItems.map(function (toolbar, index) { return renderToolbar(toolbar, index, childProps, toolbarRenderer); }))) },
react_1.default.createElement(Button_1.default, null,
react_1.default.createElement(icons_1.Icon, { icon: "".concat((_a = toolbar === null || toolbar === void 0 ? void 0 : toolbar.icon) !== null && _a !== void 0 ? _a : "#icon-tooltool_process--"), className: "icon", symbol: true }), (_b = ((toolbar === null || toolbar === void 0 ? void 0 : toolbar.label) && (toolbar === null || toolbar === void 0 ? void 0 : toolbar.label))) !== null && _b !== void 0 ? _b : __('Table.tools')));
};
switch (type) {
case 'headerBulkActions':
return renderBulkActions(childProps, (0, helper_1.isMobile)() ? (0, utils_1.unitBulkActions)({
headerActions: headerActions,
headerToolbar: headerToolbar,
headerBulkActions: headerBulkActions
}) : headerBulkActions);
case 'footerBulkActions':
return renderBulkActions(childProps, footerBulkActions);
//以下的都是只有表格才有的
case 'tool-bar-action':
return renderToolAction(toolbar, index, childProps, toolbarRenderer);
case 'data-statics':
case 'data-cross':
case 'columns-filter':
case 'find-replace':
case 'data-chart':
// 统计模式卡片列表中移除-这个给表格模式预留的
if (modes == 'cards' || modes == 'list') {
return react_1.default.createElement(react_1.default.Fragment, null);
}
else if (type === 'columns-filter') {
return renderColumnsFilterBtn(toolbar);
}
break;
case "detail-model":
return react_1.default.createElement(react_1.default.Fragment, null);
case 'pagination':
return renderPagination(toolbar);
case 'ai-tool':
return renderAiTool(toolbar);
case 'statistics':
return renderStatistics();
case 'switch-per-page':
return renderSwitchPerPage(childProps);
case 'load-more':
return renderLoadMore(toolbar);
case 'filter-toggler':
return renderFilterToggler();
case 'auto-width':
return renderAutoWidth(toolbar);
case 'export-csv':
return renderExportCSV(toolbar);
case 'reload':
return renderReload(toolbar, index);
case 'label-print':
case 'bill-print':
case 'file-print':
return renderPrint(toolbar);
case 'columns-toggler':
if (modes == 'cards' || modes == 'list') {
return react_1.default.createElement(react_1.default.Fragment, null);
}
else
break;
case 'export':
return renderExport(toolbar);
case 'type-conversion':
if ((!card && !listItem && !cross) || (0, helper_1.isMobile)()) {
return react_1.default.createElement(react_1.default.Fragment, null);
}
return renderType(toolbar);
}
// 这个是用于渲染子组件的方法-意思是如果子组件有注册实现的话就用子组件的渲染方法
// 后期看看这个能不能优化到同一处理
var childToolBottunResult = toolbarRenderer === null || toolbarRenderer === void 0 ? void 0 : toolbarRenderer(toolbar, index);
if (childToolBottunResult) {
return childToolBottunResult || react_1.default.createElement(react_1.default.Fragment, null);
}
// 以下是通用方法的渲染
var $$editable = childProps.$$editable;
return render("toolbar/".concat(index), toolbar, {
// 包两层，主要是为了处理以下 case
// 里面放了个 form，form 提交过来的时候不希望把 items 这些发送过来。
// 因为会把数据呈现在地址栏上。
data: (0, helper_1.createObject)((0, helper_1.createObject)(inModal ? originFilterData : store.filterData, {
items: childProps.items,
selectedItems: childProps.selectedItems,
unSelectedItems: childProps.unSelectedItems
}), {}),
headerCanShow: (0, utils_1.headerCanShow)(header, filter, filtercont, tableStore),
page: store.page,
lastPage: store.lastPage,
perPage: store.perPage,
total: store.total,
onQuery: handleQuery,
onAction: handleAction,
onChangePage: handleChangePage,
$$editable: $$editable,
updateAutoFillHeight: tableInstance === null || tableInstance === void 0 ? void 0 : tableInstance.updateAutoFillHeight
});
};
var CrudBody = function (crudBodyProps) {
var _a, _b, _c, _d, _e, _f, _g;
var props = crudBodyProps.props, foldColumns = crudBodyProps.foldColumns, tableRotate = crudBodyProps.tableRotate, controlRef = crudBodyProps.controlRef,
// 函数方法
setCrudState = crudBodyProps.setCrudState, setLoading = crudBodyProps.setLoading, handleAction = crudBodyProps.handleAction, dataCheckRegist = crudBodyProps.dataCheckRegist, handleSaveOrder = crudBodyProps.handleSaveOrder, handleQuery = crudBodyProps.handleQuery, handleChildPopOverOpen = crudBodyProps.handleChildPopOverOpen, handleChildPopOverClose = crudBodyProps.handleChildPopOverClose, handleFilterReset = crudBodyProps.handleFilterReset, handleFilterSubmit = crudBodyProps.handleFilterSubmit, handleFilterInit = crudBodyProps.handleFilterInit, markSort = crudBodyProps.markSort, renderFilter = crudBodyProps.renderFilter, handleLoadMore = crudBodyProps.handleLoadMore, handleResetData = crudBodyProps.handleResetData, getTableStore = crudBodyProps.getTableStore, getTableInstance = crudBodyProps.getTableInstance, setTotal = crudBodyProps.setTotal, clearSelectedItems = crudBodyProps.clearSelectedItems, handleClickOffline = crudBodyProps.handleClickOffline, handleJump = crudBodyProps.handleJump, currentSelectedRow = crudBodyProps.currentSelectedRow, crudRef = crudBodyProps.crudRef, hasBulkActions = crudBodyProps.hasBulkActions, filtercont = crudBodyProps.filtercont,
// 其他属性
saveColApi = crudBodyProps.saveColApi, columnInfo = crudBodyProps.columnInfo, tabsdefer = crudBodyProps.tabsdefer, initFetch = crudBodyProps.initFetch, name = crudBodyProps.name, showColumnsFilter = crudBodyProps.showColumnsFilter, hasFetch = crudBodyProps.hasFetch, preSortAble = crudBodyProps.preSortAble, tableStore = crudBodyProps.tableStore, tableInstance = crudBodyProps.tableInstance, search = crudBodyProps.search, afterSearchFn = crudBodyProps.afterSearchFn, control = crudBodyProps.control, filterData = crudBodyProps.filterData, showTableEditWarmModal = crudBodyProps.showTableEditWarmModal, openFeedback = crudBodyProps.openFeedback, reloadTarget = crudBodyProps.reloadTarget, closeTarget = crudBodyProps.closeTarget, originFilterData = crudBodyProps.originFilterData, context = crudBodyProps.context, advanceFilterForm = crudBodyProps.advanceFilterForm;
var className = props.className, bodyClassName = props.bodyClassName, SearchFilter = props.filter, render = props.render, store = props.store, mode = props.mode, syncLocation = props.syncLocation, children = props.children, headerBulkActions = props.headerBulkActions, footerBulkActions = props.footerBulkActions, pickerMode = props.pickerMode, multiple = props.multiple, showIndex = props.showIndex, valueField = props.valueField, primaryField = props.primaryField, value = props.value, hideQuickSaveBtn = props.hideQuickSaveBtn, itemActions = props.itemActions, cx = props.classnames, keepItemSelectionOnPageChange = props.keepItemSelectionOnPageChange, maxKeepItemSelectionLength = props.maxKeepItemSelectionLength, onAction = props.onAction, popOverContainer = props.popOverContainer, __ = props.translate, onQuery = props.onQuery, autoGenerateFilter = props.autoGenerateFilter, onSelect = props.onSelect, autoFillHeight = props.autoFillHeight, useMobileUI = props.useMobileUI, // Aug
columns = props.columns, advancedFilter = props.advancedFilter, advancedQueryFields = props.advancedQueryFields, onImageEnlarge = props.onImageEnlarge, offlineSchema = props.offlineSchema, advancedFilterApi = props.advancedFilterApi, tableLayout = props.tableLayout, header = props.header, footer = props.footer, rest = tslib_1.__rest(props, ["className", "bodyClassName", "filter", "render", "store", "mode", "syncLocation", "children", "headerBulkActions", "footerBulkActions", "pickerMode", "multiple", "showIndex", "valueField", "primaryField", "value", "hideQuickSaveBtn", "itemActions", "classnames", "keepItemSelectionOnPageChange", "maxKeepItemSelectionLength", "onAction", "popOverContainer", "translate", "onQuery", "autoGenerateFilter", "onSelect", "autoFillHeight", "useMobileUI", "columns", "advancedFilter", "advancedQueryFields", "onImageEnlarge", "offlineSchema", "advancedFilterApi", "tableLayout", "header", "footer"]);
var _h = (0, react_1.useState)(mode || 'table'), modes = _h[0], setModes = _h[1];
// 自动过滤, 移动端默认为true 或者这个表格没有自动列宽这个属性的话 也默认使用true -- 即进来就自动适用自动列宽计算逻辑
var _j = (0, react_1.useState)((0, helper_1.isMobile)() ? true : (!(0, lodash_1.isNil)((_a = (0, storage_1.getLocalStorage)('autoWidthPage')) === null || _a === void 0 ? void 0 : _a[name || '']) ? (_b = (0, storage_1.getLocalStorage)('autoWidthPage')) === null || _b === void 0 ? void 0 : _b[name || ''] : true)), autoWidth = _j[0], setAutoWidth = _j[1];
var _k = (0, react_1.useState)(false), moreIsOpened = _k[0], setMoreIsOpened = _k[1]; // Aug 更多操作面板,]
var _l = (0, react_1.useState)(), toolChildMaxCount = _l[0], setToolChildMaxCount = _l[1];
var toolActionsRef = (0, react_1.useRef)(null);
(0, react_1.useEffect)(function () {
var mobileUI = (0, helper_1.isMobile)() && useMobileUI;
if (mobileUI)
calcToolActionsMaxCount();
}, []);
// 提前计算需要计算的属性
var computedMultiple = multiple === void 0
? (headerBulkActions && headerBulkActions.length > 0) ||
(footerBulkActions && footerBulkActions.length > 0)
? true
: false
: multiple;
var computedSelected = pickerMode || keepItemSelectionOnPageChange
? store.selectedItems
: undefined;
var computedLoadHasMore = (((_c = store.data.items) === null || _c === void 0 ? void 0 : _c.length) > 0 && store.data.total > 0 && store.data.total > store.data.items.length) ||
(!((_d = store.data.items) === null || _d === void 0 ? void 0 : _d.length) && store.loading) ||
!!((store.data.total || store.data.count) && !(store.page > store.lastPage ||
((_e = store.data.items) === null || _e === void 0 ? void 0 : _e.length) >=
((_f = store.data.total) !== null && _f !== void 0 ? _f : store.data.count)));
var computedPlaceholder = rest.placeholder ||
(!initFetch && !hasFetch && SearchFilter
? 'placeholder.trySearch'
: undefined);
var computedSelectable = !!(hasBulkActions() ||
pickerMode ||
multiple);
var computedTableLayout = (0, helper_1.isMobile)() ? (tableLayout || 'horizontal') : 'horizontal';
//移动端处理工具栏按钮中的可批量操作的按钮，加入到headerBulkActions中
var handleUnitBulkActions = function () {
var headerToolbar = props.headerToolbar, headerBulkActions = props.headerBulkActions, headerActions = props.headerActions;
return (0, utils_1.unitBulkActions)({ headerToolbar: headerToolbar, headerBulkActions: headerBulkActions, headerActions: headerActions });
};
var computedUnitBulkActions = handleUnitBulkActions();
var computedHeaderCanShow = (0, utils_1.headerCanShow)(header, SearchFilter, filtercont, tableStore);
var getAllData = function (showFields) { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
var api, env, data, allData, params, optionsParam, paramsData, res;
var _a, _b, _c;
return tslib_1.__generator(this, function (_d) {
switch (_d.label) {
case 0:
api = props.api, env = props.env, data = props.data;
allData = {};
if (!api) return [3 /*break*/, 2];
params = {};
if (Object.keys(filtercont || {}).length) {
params = {
advancedFilter: (0, utils_1.dealAdvacedCondition)(filtercont === null || filtercont === void 0 ? void 0 : filtercont.advancedFilter),
advancedFilterSub: (0, utils_1.dealAdvacedCondition)(filtercont === null || filtercont === void 0 ? void 0 : filtercont.advancedFilterSub),
advancedHeader: filtercont === null || filtercont === void 0 ? void 0 : filtercont.advancedHeader,
optionsParam: (showFields === null || showFields === void 0 ? void 0 : showFields.length) > 0 ? tslib_1.__assign(tslib_1.__assign({}, filtercont === null || filtercont === void 0 ? void 0 : filtercont.optionsParam), { queryField: showFields }) : filtercont === null || filtercont === void 0 ? void 0 : filtercont.optionsParam,
filterParam: filtercont === null || filtercont === void 0 ? void 0 : filtercont.filterParam
};
if (filtercont === null || filtercont === void 0 ? void 0 : filtercont.filterOptionData) {
optionsParam = (filtercont === null || filtercont === void 0 ? void 0 : filtercont.filterOptionData).optionsParam;
params = tslib_1.__assign(tslib_1.__assign({}, params), optionsParam);
}
}
else {
if ((showFields === null || showFields === void 0 ? void 0 : showFields.length) > 0) {
params.optionsParam = { queryField: showFields };
}
}
paramsData = tslib_1.__assign(tslib_1.__assign({}, params), { index: 1, filterParam: (_a = store.query) === null || _a === void 0 ? void 0 : _a.filterParam, topN: ((_b = filtercont === null || filtercont === void 0 ? void 0 : filtercont.limitParam) === null || _b === void 0 ? void 0 : _b.limitStatus) ? (_c = filtercont === null || filtercont === void 0 ? void 0 : filtercont.limitParam) === null || _c === void 0 ? void 0 : _c.topN : undefined });
return [4 /*yield*/, env.fetcher(api, (0, helper_1.createObject)(data, paramsData))];
case 1:
res = _d.sent();
if (res.ok && res.data) {
allData = res.data;
}
else {
allData = null;
antd_1.message.error(res.msg);
}
return [2 /*return*/, allData];
case 2: return [2 /*return*/, allData];
}
});
}); };
// Aug
var moreHandleTouch = function (e) {
e.stopPropagation();
setMoreIsOpened(true);
};
// Aug更多操作
var renderMoreToolbar = function (children) {
var cx = props.classnames, __ = props.translate, getModalContainer = props.env.getModalContainer;
return (react_1.default.createElement(__1.ActionSheet, { key: Date.now() + '-actionSheet', isOpened: moreIsOpened, container: getModalContainer, round: true, onHide: function (e) {
e.stopPropagation();
setMoreIsOpened(false);
}, popupContent: react_1.default.createElement("div", { style: { width: '100%' } }, children.map(function (child, idx) {
return (react_1.default.createElement("div", { key: idx, "data-index": idx, id: "amis-action-sheet-btn-wrapper", className: "action-sheet-btn-wrapper", onClick: function (e) {
// e.stopPropagation();
setMoreIsOpened(false);
} }, child.dom || child));
})) },
react_1.default.createElement("span", { className: cx('Button', 'Button--link'), onClick: moreHandleTouch },
react_1.default.createElement("i", { className: cx('Button-icon', 'fa', 'fa-reorder') }),
react_1.default.createElement("span", null, __('More')))));
};
var renderToolbar = function (toolbar, index, childProps, toolbarRenderer,
// Jay
isFooter) {
var _a, _b;
if (index === void 0) { index = 0; }
if (childProps === void 0) { childProps = {}; }
if (!toolbar) {
return null;
}
var inModal = props.inModal, store = props.store, __ = props.translate, useMobileUI = props.useMobileUI, env = props.env, headerToolbar = props.headerToolbar, footerToolbar = props.footerToolbar;
// 多个工具方法展示
if (Array.isArray(toolbar) && toolbar.length !== 0) {
var children_1 = toolbar
.filter(function (toolbar) {
return (0, helper_1.isVisible)(toolbar, inModal ? originFilterData : store.filterData) &&
!((0, helper_1.isMobile)() && (toolbar.type == 'columns-toggler' || toolbar.isToolBar));
})
.map(function (toolbar, index) { return ({
dom: renderToolbar(toolbar, index, childProps, toolbarRenderer),
toolbar: toolbar
}); })
.filter(function (item) { return item.dom; });
// Jay
// 对分页器的几个元素进行排序
var sortFooterbar_1 = {
'statistics': 1,
'pagination': 2,
'switch-per-page': 3
};
children_1.sort(function (a, b) {
var _a, _b;
if (b.toolbar.align === 'right') {
if (a.toolbar.align === 'left' ||
sortFooterbar_1[(_a = a.toolbar) === null || _a === void 0 ? void 0 : _a.type] > sortFooterbar_1[(_b = b.toolbar) === null || _b === void 0 ? void 0 : _b.type]) {
return -1;
}
else if (sortFooterbar_1[a.toolbar.type] < sortFooterbar_1[b.toolbar.type]) {
return 1;
}
}
return 0;
});
var len = children_1.length;
if (len) {
// Aug 移动端超过三个显示更多
if (useMobileUI && (0, helper_1.isMobile)() && toolChildMaxCount && len > toolChildMaxCount) {
var moreToolbar = children_1.splice(toolChildMaxCount);
var moreToolbarDom = renderMoreToolbar(moreToolbar);
children_1.splice(0, 0, { dom: moreToolbarDom, toolbar: { type: 'more' } });
}
var button = children_1.filter(function (_a, index) {
var toolbar = _a.toolbar;
return toolbar.align == 'right' && !isFooter;
}).reverse();
var searchBtnIndex = button.findIndex(function (_a) {
var toolbar = _a.toolbar;
return toolbar.actionType === 'advanced-filter';
});
var leftBtns = children_1.filter(function (_a, index) {
var toolbar = _a.toolbar;
return (toolbar.align !== 'right' || isFooter) && toolbar.type !== 'paginator';
});
var paginator = children_1.find(function (_a) {
var toolbar = _a.toolbar;
return toolbar.type === 'paginator';
});
// 工具栏里面啥都没有的情况之前返回空
if (!(headerToolbar === null || headerToolbar === void 0 ? void 0 : headerToolbar.length) && !(footerToolbar === null || footerToolbar === void 0 ? void 0 : footerToolbar.filter(function (_) { return _.type !== 'footerBulkActions'; }).length))
return react_1.default.createElement("div", { style: { marginTop: 0, border: 0 } });
return (react_1.default.createElement("div", { className: cx('Crud-toolbar', { footer: isFooter }), key: index },
leftBtns.length > 0 && react_1.default.createElement("div", { ref: toolActionsRef, className: cx('Crud-toolbar-tool--actions') }, leftBtns.map(function (_a, index) {
var toolbar = _a.toolbar, child = _a.dom;
// const type = (toolbar as Schema).type || toolbar;
// let align = toolbar.align || (type === 'pagination' ? 'right' : 'left');
return (react_1.default.createElement("div", { key: index, className: cx('Crud-toolbar-item', toolbar.className) },
" ",
child,
" "));
})),
(paginator || (!isFooter && button.length > 0)) && react_1.default.createElement("div", { className: cx('Crud-toolbar-tool--head') },
paginator && ((_b = (_a = paginator.toolbar).renderPagenation) === null || _b === void 0 ? void 0 : _b.call(_a)),
!isFoot