fastlion-amis
Version:
一种MIS页面生成工具
292 lines (291 loc) • 23 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var OverflowWrapper_1 = tslib_1.__importDefault(require("../../../../components/OverflowWrapper"));
var omit_1 = tslib_1.__importDefault(require("lodash/omit"));
var helper_1 = require("../../../../utils/helper");
var antd_1 = require("antd");
var DataCross_1 = tslib_1.__importDefault(require("../../../Table/DataCross"));
var DataStatic_1 = tslib_1.__importDefault(require("../../../Table/DataStatic"));
var FindAndReplace_1 = tslib_1.__importDefault(require("../../../Table/FindAndReplace"));
var DataCharts_1 = tslib_1.__importDefault(require("../../../Table/DataCharts"));
var SqlOptimize_1 = tslib_1.__importDefault(require("../../../Table/SqlOptimize"));
var ColumnToggler_1 = tslib_1.__importDefault(require("../../../Table/ColumnToggler"));
var icons_1 = require("../../../../components/icons");
var LionContextMenu_1 = require("../../../Lion/components/LionContextMenu");
var components_1 = require("../../../../components");
var Button_1 = require("../../../../components/Button");
// 不做处理的按钮类型
var specialButtonType = ['rfid-action'];
var canFindReplaceTypes = ['plain', 'input-text', 'number', 'input-number', 'static-number', 'html', 'static-html', 'input-rich-text', 'date', 'input-date', 'datetime', 'input-datetime', 'time', 'input-time', 'input-date-range', 'input-time-range', 'input-datetime-range', 'input-month', 'input-quarter', 'input-year', 'textarea'];
var Toolbar = function (_a) {
var props = _a.props, state = _a.state, data = _a.data, actionData = _a.actionData, inSmallDialog = _a.inSmallDialog, tableStore = _a.tableStore, indexColShow = _a.indexColShow, columnSettingTemps = _a.columnSettingTemps, showColumnsFilter = _a.showColumnsFilter, getAllData = _a.getAllData, onAction = _a.onAction, onDealData = _a.onDealData, onPageChange = _a.onPageChange, onBulkReplace = _a.onBulkReplace, updateActiveCell = _a.updateActiveCell, onCheckAll = _a.onCheckAll, onColumnToggle = _a.onColumnToggle, onFlush = _a.onFlush, setIndexColShow = _a.setIndexColShow, setColumnSettingTemps = _a.setColumnSettingTemps;
var headerToolbar = props.headerToolbar, footerToolbar = props.footerToolbar, headerActions = props.headerActions, headerBulkActions = props.headerBulkActions, multiple = props.multiple, columns = props.columns, api = props.api, alwaysShowPagination = props.alwaysShowPagination, perPageAvailable = props.perPageAvailable, loadDataOnce = props.loadDataOnce, primaryField = props.primaryField, name = props.name, aliasTitle = props.aliasTitle, tabTitle = props.tabTitle, mode = props.mode, render = props.render, env = props.env, store = props.store, cx = props.classnames, __ = props.translate, ns = props.classPrefix;
var checkedFieldTranslate = state.checkedFieldTranslate, selectedIndex = state.selectedIndex;
var actions = (0, react_1.useMemo)(function () {
return headerActions === null || headerActions === void 0 ? void 0 : headerActions.concat(headerBulkActions !== null && headerBulkActions !== void 0 ? headerBulkActions : []);
}, [headerActions, headerBulkActions]);
var hasPaginator = (0, react_1.useMemo)(function () {
return footerToolbar.some(function (schema) { return schema.type === 'pagination'; });
}, [footerToolbar]);
var perPages = (0, react_1.useMemo)(function () {
return (perPageAvailable !== null && perPageAvailable !== void 0 ? perPageAvailable : [5, 10, 20, 50, 100]).map(function (item) { return ({ label: item + (inSmallDialog ? '' : " ".concat(__('CRUD.countPage'))), value: item }); });
}, [perPageAvailable, inSmallDialog]);
// 字段翻译按钮
var extraLeftBtns = (0, react_1.useMemo)(function () {
return headerToolbar.filter(function (item) { return item.align !== 'right'; });
}, [headerToolbar]);
var leftToolButtons = (0, react_1.useMemo)(function () {
return footerToolbar.filter(function (item) { return item.align == 'right' && item.type !== 'footerBulkActions'; }).sort(function (a, b) {
var order = ['switch-per-page', 'pagination', 'statistics'];
return order.indexOf(a.type) - order.indexOf(b.type);
});
}, [footerToolbar]);
var rightToolButtons = (0, react_1.useMemo)(function () {
return headerToolbar.filter(function (toolbar) { return toolbar.align == 'right'; }).reverse();
}, [headerToolbar]);
var searchBtnIndex = (0, react_1.useMemo)(function () {
return rightToolButtons.findIndex(function (toolbar) { return toolbar.actionType === 'advanced-filter'; });
}, [rightToolButtons]);
//统计数据记录, 141-交叉制表，142-统计，143-图表
var staticRecords = (0, react_1.useCallback)(function (port) {
env.fetcher({
url: "/api/v1/opt/".concat(name, "_").concat(port == 141 ? 'cross' : port == 142 ? 'total' : 'chart', "/record/").concat(port),
method: 'get'
});
}, [name]);
var renderPagination = function () {
var page = store.page, lastPage = store.lastPage;
if (store.mode !== 'simple' && store.lastPage < 2 && !alwaysShowPagination) {
return null;
}
return (react_1.default.createElement("div", { className: cx('Crud-pager') }, render('pagination', { type: 'pagination' }, {
activePage: page,
lastPage: lastPage,
hasNext: store.hasNext,
mode: store.mode,
onPageChange: onPageChange
})));
};
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 () {
var _a;
return (react_1.default.createElement("div", { className: cx('Crud-pageSwitch') },
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) { onPageChange(1, value); } })));
};
var renderDataCross = function (action) {
return (react_1.default.createElement(DataCross_1.default, { tableName: name || (0, helper_1.uuid)(), action: action, columns: tableStore.filteredColumns, data: data, modalContainer: ((env === null || env === void 0 ? void 0 : env.getTopModalContainer) || document.body), getAllData: getAllData, staticRecords: staticRecords, onOK: function (cross, crossColumns, datas, countColumns, extraProps) {
var _a, _b;
var linkTitle = "".concat((_b = (_a = props.aliasTitle) === null || _a === void 0 ? void 0 : _a.trim) === null || _b === void 0 ? void 0 : _b.call(_a), "-\u4EA4\u53C9\u5236\u8868");
var schema = {
aliasTitle: linkTitle,
type: "crud",
mode: 'cross',
name: "".concat(name || (0, helper_1.uuid)(), "_cross"),
cross: cross,
crossColumns: crossColumns,
isCross: true,
combineNum: cross.positionType == 1 ? cross.rowFields.length : undefined,
"affixHeader": true,
"columns": columns,
"defaultData": datas,
'affixRow': countColumns,
"perPage": 10000,
"autoFillHeight": true,
"multiple": true,
"setBorder": true,
"keepItemSelectionOnPageChange": false,
"syncLocation": false,
"headerToolbar": [{
"redDot": false,
"actionType": "export",
"type": "action",
"name": "default_export",
"label": "导出",
"icon": "#icon-tooltool_download",
"tooltip": "默认导出",
"align": "right",
"close": true,
"tooltipPlacement": "top"
},
{
"type": "data-statics",
"label": "统计",
"icon": "#icon-tooltotal",
"align": "right"
},
{
"type": "data-cross",
"label": "交叉制表",
"icon": "#icon-toolcross",
"align": "right"
}],
"footerToolbar": [{
"type": "statistics",
"align": "right"
}],
"checkOnItemClick": false,
"header": [],
"footer": []
};
onDealData('data-cross', linkTitle, schema, extraProps);
} }));
};
var renderDataStatic = function (action) {
var colList = tableStore.columnsData.filter(function (col) { return !col.pristine.hidden && col.type !== 'operation'; })
.map(function (item) { return item.toJSON ? item.toJSON() : item; });
return react_1.default.createElement(DataStatic_1.default, { originHeaderToolbar: headerToolbar, crudTitle: props.aliasTitle || props.tabTitle || '', container: env === null || env === void 0 ? void 0 : env.getTopModalContainer, staticRecords: staticRecords, getAllData: getAllData, data: data, loadDataOnce: props.loadDataOnce, columns: colList, action: action, name: name, isStatic: props.isStatic, handleDealData: onDealData });
};
var renderDataCharts = function (action) {
var colList = tableStore.columnsData.filter(function (col) { return !col.pristine.hidden && col.type !== 'operation'; })
.map(function (item) { return item.toJSON ? item.toJSON() : item; });
return react_1.default.createElement(DataCharts_1.default, { crudTitle: aliasTitle || tabTitle || '', container: env.getTopModalContainer, data: data, columns: colList, action: action, name: name, handleDealData: onDealData, primaryField: primaryField, loadDataOnce: loadDataOnce, getAllData: getAllData, staticRecords: staticRecords });
};
var renderFindReplace = function (action) {
var colList = tableStore.columnsData.filter(function (col) { return !col.pristine.hidden && col.type !== 'operation'; })
.map(function (item) { return item.toJSON ? item.toJSON() : item; }).filter(function (item) { return !item.type || canFindReplaceTypes.includes(item.type); });
var canReplace = colList.some(function (item) { var _a; return !!((_a = item.pristine) === null || _a === void 0 ? void 0 : _a.quickEdit); });
// const itemRaws = store.data?.itemsRaw
return react_1.default.createElement(FindAndReplace_1.default, { selectedList: data.selectedItems.map(function (item) { return item.index; }), data: data.items, columns: colList, action: action, onBulkReplace: onBulkReplace, canReplace: canReplace, currentCheckIndex: props.currentSelectedRow, updateActiveCell: updateActiveCell, container: env === null || env === void 0 ? void 0 : env.getTopModalContainer, translate: __, crudRef: props.crudRef });
};
var renderFieldTranslate = function (action) {
return (react_1.default.createElement("div", { className: 'show-field-translate-container' },
react_1.default.createElement(antd_1.Checkbox, { checked: checkedFieldTranslate, onChange: function (e) { } }, action.label || '显示字段翻译')));
};
var renderSqlOptimize = function (action) {
var _a;
return (react_1.default.createElement(SqlOptimize_1.default, { env: env, selectedList: data.selectedItems, action: action, columns: (_a = columns === null || columns === void 0 ? void 0 : columns.map(function (item) { return item.name; })) !== null && _a !== void 0 ? _a : [], sqlStr: data === null || data === void 0 ? void 0 : data.sql, store: tableStore }));
};
var renderColumnsToggler = function (config) {
var _a;
return (react_1.default.createElement(ColumnToggler_1.default, tslib_1.__assign({}, props, ((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, modalContainer: env === null || env === void 0 ? void 0 : env.getModalContainer, align: (_a = config === null || config === void 0 ? void 0 : config.align) !== null && _a !== void 0 ? _a : 'left', isActived: tableStore.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: tableStore.columnsData, onColumnToggle: onColumnToggle, columnSettingTemps: columnSettingTemps, updateColumnSettingList: setColumnSettingTemps, indexColShow: indexColShow, setIndexCol: setIndexColShow, flushDebounced: onFlush })));
};
var renderReload = function (toolbar) {
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, omit_1.default)(toolbar, ['type', 'align']));
}
return render("toolbar", reloadButton, { onAction: onAction });
};
var renderColumnsFilterBtn = function (toolbar) {
return (react_1.default.createElement(Button_1.Button, { tooltip: '列过滤', size: "sm", iconOnly: true, classnames: cx, butColor: showColumnsFilter, tooltipContainer: (env === null || env === void 0 ? void 0 : env.getTopModalContainer) || undefined, onClick: function () {
} },
(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 renderChild = function (schema) {
var type = schema.type, actionType = schema.actionType;
if (type === 'action') {
switch (actionType) {
case 'label-print':
case 'bill-print':
case 'file-print':
case 'report-print':
case 'advanced-filter':
return render("action-print", schema, { onAction: onAction });
case 'export':
return render("action-export", schema, { onAction: onAction });
}
}
else {
switch (type) {
case 'pagination':
return renderPagination();
case 'statistics':
return renderStatistics();
case 'switch-per-page':
return renderSwitchPerPage();
case 'reload':
return renderReload(schema);
case 'columns-filter':
return renderColumnsFilterBtn(schema);
case 'data-cross':
return renderDataCross(schema);
case 'data-statics':
return renderDataStatic(schema);
case 'data-chart':
return renderDataCharts(schema);
case 'find-replace':
return renderFindReplace(schema);
case 'field-translate':
return renderFieldTranslate(schema);
case 'sql-optimize':
return renderSqlOptimize(schema);
case 'columns-toggler':
return renderColumnsToggler(schema);
}
}
return type;
};
var renderPagenation = function () {
var _a, _b;
var column = tableStore.filteredColumns[0];
var leftFixedColumns = tableStore.leftFixedColumns;
var lastLeftFixedIndex = (_a = leftFixedColumns[leftFixedColumns.length - 1]) === null || _a === void 0 ? void 0 : _a.index;
return (multiple || leftToolButtons.length) ? (react_1.default.createElement("div", { className: cx('Table-affix') },
react_1.default.createElement("span", { className: cx('Table-affixs'), style: { marginRight: 0, alignItems: 'center' } },
react_1.default.createElement("span", { className: cx('Table-affix-Arr') },
react_1.default.createElement(LionContextMenu_1.ContextMenu, { menuItems: [{ id: 0, title: '全选' }, { id: 1, title: '反选' }, { id: 2, title: '不选' }], onItemClick: function (index) { return multiple && onCheckAll(index); }, key: Date() },
react_1.default.createElement("th", { "column-name": '__checkme', style: { cursor: 'pointer', textAlign: 'center', width: 25 }, className: cx(column.pristine.className, 'header-cell', {
'fixed-left-last': column.index === lastLeftFixedIndex,
}) + ' last-th', onClick: function () { multiple && onCheckAll(3); } }, tableStore.rows.length ?
react_1.default.createElement(components_1.Checkbox, { classPrefix: ns, partial: !tableStore.allChecked, checked: tableStore.someChecked, disabled: tableStore.disabledHeadCheckbox }) :
react_1.default.createElement("div", null, '\u00A0')))),
react_1.default.createElement("div", { className: cx('Table-affix-text') },
((_b = tableStore.filterColumns) === null || _b === void 0 ? void 0 : _b.size) > 0 && react_1.default.createElement("span", null,
"\u5DF2\u7B5B\u9009",
tableStore.rows.length,
"\u6761\u6570\u636E"),
(data.selectedItems.length == 0 ? "" : "\u5DF2\u9009\uFF1A".concat(data.selectedItems.length, "\u884C") + " , "),
multiple ? (selectedIndex != undefined && "\u7B2C".concat(selectedIndex + 1, "\u884C")) : null)),
react_1.default.createElement("div", { className: cx('Crud-toolbar', { footer: true }) },
react_1.default.createElement("div", { className: cx('Crud-toolbar-tool--actions') }, leftToolButtons.map(function (toolbar) { return react_1.default.createElement("div", { key: toolbar.type, className: cx('Crud-toolbar-item') }, renderChild(toolbar)); }))))) : null;
};
return (react_1.default.createElement("div", { className: cx('Table-toolbar Table-headToolbar'), key: "header-toolbar" },
(Array.isArray(actions) && actions.length) && (react_1.default.createElement("div", { className: cx('Table-actions') }, headerActions === null || headerActions === void 0 ? void 0 :
headerActions.map(function (action, index) {
return render("action/".concat(index), tslib_1.__assign({ type: 'button', isTableAction: true }, action), {
onAction: onAction,
key: index,
isTableAction: true,
data: actionData
});
}), headerBulkActions === null || headerBulkActions === void 0 ? void 0 :
headerBulkActions.map(function (action, index) {
return render("bulk-action/".concat(index), tslib_1.__assign(tslib_1.__assign({}, (0, omit_1.default)(action, ['visibleOn', 'hiddenOn', 'disabledOn'])), { type: specialButtonType.includes(action.type) ? action.type : 'button', ignoreConfirm: true, hidden: false }), {
key: "bulk-".concat(index),
data: actionData,
disabled: action.disabled ||
(action.requireSelected !== false ? !(data.selectedItems.length > 0) : false),
onAction: function (e, schema) { return onAction(e, schema, true); }
});
}))),
react_1.default.createElement("div", { className: cx('Crud-toolbar') },
extraLeftBtns.length > 0 && (react_1.default.createElement("div", { className: cx('Crud-toolbar-tool--actions') }, extraLeftBtns.map(function (toolbar, index) { return react_1.default.createElement("div", { key: index, className: cx('Crud-toolbar-item', toolbar.className) }, renderChild(toolbar)); }))),
(hasPaginator || headerToolbar.length > 0) && (react_1.default.createElement("div", { className: cx('Crud-toolbar-tool--head') },
hasPaginator && renderPagenation(),
headerToolbar.length && (react_1.default.createElement("div", { className: cx('Crud-toolbar-tool') },
react_1.default.createElement("div", { className: cx('Crud-toolbar-tool-content') },
react_1.default.createElement(OverflowWrapper_1.default, { env: env, classPrefix: cx, itemClassName: 'toolbar-btn-item', showFixRight: searchBtnIndex > -1, fixRightRenderIndex: searchBtnIndex, items: rightToolButtons.map(function (toolbar, index) {
return ({
key: index,
children: (react_1.default.createElement("div", { key: index, className: cx('Crud-toolbar-item', 'toolbar-btn-item', toolbar.className) }, renderChild(toolbar)))
});
}) })))))))));
};
exports.default = Toolbar;
//# sourceMappingURL=./renderers/CRUD/components/Toolbar/index.js.map