fastlion-amis
Version:
一种MIS页面生成工具
785 lines (784 loc) • 214 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TableCell = exports.TableRenderer = exports.EDITWIDTHKEY = void 0;
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var react_dom_1 = require("react-dom");
var factory_1 = require("../../factory");
var types_1 = require("../../types");
var forEach_1 = (0, tslib_1.__importDefault)(require("lodash/forEach"));
var tpl_1 = require("../../utils/tpl");
// import './ColumnToggler';
var Checkbox_1 = (0, tslib_1.__importDefault)(require("../../components/Checkbox"));
var Button_1 = (0, tslib_1.__importDefault)(require("../../components/Button"));
var table_1 = require("../../store/table");
var file_saver_1 = require("file-saver");
var index_1 = require("../../utils/shell/index");
var helper_1 = require("../../utils/helper");
var tpl_builtin_1 = require("../../utils/tpl-builtin");
var debounce_1 = (0, tslib_1.__importDefault)(require("lodash/debounce"));
var sortablejs_1 = (0, tslib_1.__importDefault)(require("sortablejs"));
var resize_sensor_1 = require("../../utils/resize-sensor");
var find_1 = (0, tslib_1.__importDefault)(require("lodash/find"));
var icons_1 = require("../../components/icons");
var TableCell_1 = require("./TableCell");
Object.defineProperty(exports, "TableCell", { enumerable: true, get: function () { return TableCell_1.TableCell; } });
var HeadCellFilterDropdown_1 = require("./HeadCellFilterDropdown");
var 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.__importStar(require("./ColumnToggler"));
var offset_1 = (0, tslib_1.__importDefault)(require("../../utils/offset"));
var dom_1 = require("../../utils/dom");
var cloneDeep_1 = (0, tslib_1.__importDefault)(require("lodash/cloneDeep"));
var LionContextMenu_1 = require("../Lion/components/LionContextMenu");
var isEqual_1 = (0, tslib_1.__importDefault)(require("lodash/isEqual"));
var antd_1 = require("antd");
var popover_1 = (0, tslib_1.__importDefault)(require("antd/lib/popover"));
var tools_1 = require("../../utils/shell/tools");
var Bubble_1 = (0, tslib_1.__importDefault)(require("../../components/ScrollMB/Bubble"));
var sub_1 = require("../../utils/sub");
var crud_1 = require("../../store/crud");
var types_2 = require("../../components/table/SecondFilter/types");
var utils_1 = require("../../utils/utils");
// import TipsContanier from '../../components/TipsContanier';
var icons_2 = require("@ant-design/icons");
var storage_1 = require("../../utils/storage");
var lodash_1 = require("lodash");
var api_1 = require("../../utils/api");
var DataStatic_1 = (0, tslib_1.__importDefault)(require("./DataStatic"));
var DataCross_1 = (0, tslib_1.__importDefault)(require("./DataCross"));
var utils_2 = require("../Lion/utils/utils");
var ProcessToolsModal_1 = (0, tslib_1.__importDefault)(require("./ProcessToolsModal"));
var FindAndReplace_1 = (0, tslib_1.__importDefault)(require("./FindAndReplace"));
var cross_1 = require("./cross");
var tableCtxMenuStore_1 = (0, tslib_1.__importDefault)(require("./tableCtxMenuStore"));
var mobx_react_1 = require("mobx-react");
var AiTool_1 = (0, tslib_1.__importDefault)(require("./AiTool"));
var SqlOptimize_1 = (0, tslib_1.__importDefault)(require("./SqlOptimize"));
var DataCharts_1 = (0, tslib_1.__importDefault)(require("./DataCharts"));
var commonTableFunction_1 = require("../../store/utils/commonTableFunction");
// 本地编辑map
exports.EDITWIDTHKEY = 'localEditWidthMap';
/**
* 将 url 转成绝对地址
*/
var getAbsoluteUrl = (function () {
var link;
return function (url) {
if (!link)
link = document.createElement('a');
link.href = url;
return link.href;
};
})();
var Table = /** @class */ (function (_super) {
(0, tslib_1.__extends)(Table, _super);
function Table(props) {
var _a, _b, _c, _d, _e, _f;
var _this = _super.call(this, props) || this;
_this.tableId = (0, utils_2.uuid)();
_this.lastScrollLeft = -1;
_this.lastScrollTop = -1;
_this.totalWidth = 0;
_this.totalHeight = 0;
_this.outterWidth = 0;
_this.outterHeight = 0;
_this.widths = {};
_this.widths2 = {};
_this.heights = {};
_this.renderedToolbars = [];
_this.subForms = {};
_this.setIndexCol = function (show) {
_this.setState({ indexColShow: show });
};
_this.scrollPingBox = function (e) {
if (!_this.table)
return;
var ns = _this.props.classPrefix;
var table = (0, react_dom_1.findDOMNode)(_this);
// 如果没有不重新获取drag
var container = _this.scrollPingBoxContainer || table.querySelector("." + ns + "Table-contentWrap");
_this.scrollPingBoxContainer = container;
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.subFormRef = function (form, x, y) {
var quickEditFormRef = _this.props.quickEditFormRef;
quickEditFormRef && quickEditFormRef(form, x, y);
_this.subForms[x + "-" + y] = form;
form && _this.props.store.addForm(form.props.store, y);
};
//统计数据记录, 141-交叉制表，142-统计，143-图表
_this.staticRecords = function (port) {
var _a = _this.props, name = _a.name, env = _a.env;
env.fetcher({
url: "/api/v1/opt/" + name + "_" + (port == 141 ? 'cross' : port == 142 ? 'total' : 'chart') + "/record/" + port,
method: 'get'
});
};
_this.handleDragStart = function (e) {
var store = _this.props.store;
var target = e.currentTarget;
var tr = (_this.draggingTr = target.closest('tr'));
var id = tr.getAttribute('data-id');
var tbody = tr.parentNode;
_this.originIndex = Array.prototype.indexOf.call(tbody.childNodes, tr);
tr.classList.add('is-dragging');
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/plain', id);
e.dataTransfer.setDragImage(tr, 0, 0);
var item = store.getRowById(id);
store.collapseAllAtDepth(item.depth);
var siblings = store.rows;
if (item.parentId) {
var parent = store.getRowById(item.parentId);
siblings = parent.children;
}
siblings = siblings.filter(function (sibling) { return sibling !== item; });
tbody.addEventListener('dragover', _this.handleDragOver);
tbody.addEventListener('drop', _this.handleDrop);
_this.draggingSibling = siblings.map(function (item) {
var tr = tbody.querySelector("tr[data-id=\"" + item.id + "\"]");
tr.classList.add('is-drop-allowed');
return tr;
});
tr.addEventListener('dragend', _this.handleDragEnd);
};
_this.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);
};
_this.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);
};
_this.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');
});
};
_this.handleImageEnlarge = function (info, target) {
var onImageEnlarge = _this.props.onImageEnlarge;
// 如果已经是多张了，直接跳过
if (Array.isArray(info.list)) {
return onImageEnlarge && onImageEnlarge(info, target);
}
// 从列表中收集所有图片，然后作为一个图片集合派送出去。
var store = _this.props.store;
var column = store.columns[target.colIndex].pristine;
var index = target.rowIndex;
var list = [];
store.rows.forEach(function (row, i) {
var src = (0, tpl_builtin_1.resolveVariable)(column.name, row.data);
if (!src) {
if (i < target.rowIndex) {
index--;
}
return;
}
list.push({
src: src,
originalSrc: column.originalSrc
? (0, tpl_1.filter)(column.originalSrc, row.data)
: src,
title: column.enlargeTitle
? (0, tpl_1.filter)(column.enlargeTitle, row.data)
: column.title
? (0, tpl_1.filter)(column.title, row.data)
: undefined,
caption: column.enlargeCaption
? (0, tpl_1.filter)(column.enlargeCaption, row.data)
: column.caption
? (0, tpl_1.filter)(column.caption, row.data)
: undefined
});
});
if (list.length > 1) {
onImageEnlarge &&
onImageEnlarge((0, tslib_1.__assign)((0, tslib_1.__assign)({}, info), { list: list, index: index }), target);
}
else {
onImageEnlarge && onImageEnlarge(info, target);
}
};
// 开始设置拖拽线
_this.setDragLine = function (targetTh) {
var dragLine = _this.dragLineShadowRef.current;
dragLine.style.height = _this.table.querySelector('tbody').clientHeight + 'px';
dragLine.style.top = (targetTh || _this.targetTh).clientHeight + 1 + 'px';
dragLine.style.display = 'unset';
};
// 开始设置拖拽线
_this.hideDragLine = function () {
var dragLine = _this.dragLineShadowRef.current;
dragLine.style.display = 'none';
};
// 开始列宽度调整
_this.handleColResizeMouseDown = function (e, col) {
_this.onDraging = true;
_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;
_this.setDragLine();
document.addEventListener('mousemove', _this.handleColResizeMouseMove);
document.addEventListener('mouseup', _this.handleColResizeMouseUp);
};
// 垂直线拖拽移动
_this.handleColResizeMouseMove = function (e) {
var _a, _b;
var targetThRect = _this.targetTh.getBoundingClientRect();
var moveX = e.clientX - _this.lineStartX;
_this.dragLineShadowRef.current.style.left = targetThRect.left - ((_b = (_a = _this.table) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect) === null || _b === void 0 ? void 0 : _b.call(_a).left) + _this.targetThWidth + moveX + 'px';
_this.targetTh.style.width = _this.targetThWidth + moveX + 'px';
};
// 垂直线拖拽结束
_this.handleColResizeMouseUp = function (e) {
requestAnimationFrame(function () {
_this.onDraging = false;
_this.hideDragLine();
});
if ((0, helper_1.isMobile)())
return;
var store = _this.props.store;
var editWidthMap = (0, storage_1.getLocalStorage)(exports.EDITWIDTHKEY) || {};
var newCols = store.columnsData.map(function (item) {
var _a;
if (item.name === _this.resizeColumn.name) {
editWidthMap[_this.props.crudName || ''] = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, editWidthMap[_this.props.crudName || '']), (_a = {}, _a[_this.resizeColumn.name || ''] = _this.targetTh.style.width, _a));
(0, storage_1.setLocalStorage)(exports.EDITWIDTHKEY, editWidthMap);
return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, item), { pristine: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, item.pristine), { editWidth: _this.targetTh.style.width }) });
}
return item;
});
_this.handleColumnToggle(newCols, {}, false);
document.removeEventListener('mousemove', _this.handleColResizeMouseMove);
document.removeEventListener('mouseup', _this.handleColResizeMouseUp);
};
//获取设置列模板
_this.getColumnSettingList = function () { return (0, tslib_1.__awaiter)(_this, void 0, void 0, function () {
var _a, saveColApi, env, api, data, list;
return (0, tslib_1.__generator)(this, function (_b) {
switch (_b.label) {
case 0:
_a = this.props, saveColApi = _a.saveColApi, env = _a.env;
if (!saveColApi) return [3 /*break*/, 2];
api = (0, api_1.normalizeApi)((saveColApi === null || saveColApi === void 0 ? void 0 : saveColApi.url) || '', 'get');
return [4 /*yield*/, env.fetcher(api)];
case 1:
data = (_b.sent()).data;
list = (data === null || data === void 0 ? void 0 : data.filter(function (item) { return item.tempKey; })) || [];
this.setState({ columnSettingTemps: list });
_b.label = 2;
case 2: return [2 /*return*/];
}
});
}); };
//设置列保存到远程
_this.sendColumns = function (saveCols, targetTemp, isDraggled) {
if (isDraggled === void 0) { isDraggled = false; }
var saveColApi = _this.props.saveColApi;
_this.props.env
.fetcher({ url: saveColApi.url, method: saveColApi.method }, (0, tslib_1.__assign)((0, tslib_1.__assign)({}, targetTemp), { columnInfo: saveCols }))
.then(function (res) {
if (res.ok) {
!isDraggled && antd_1.message.success(res.msg);
_this.getColumnSettingList();
}
else {
!isDraggled && antd_1.message.error(res.msg);
}
});
};
//拖拽设置列时防抖
_this.debounceSendColumns = (0, debounce_1.default)(_this.sendColumns.bind(_this), 1000 * 60);
// onDraging: boolean // 拖动中标识
_this.dragShadowRef = react_1.default.createRef();
_this.dragLineShadowRef = react_1.default.createRef();
_this.onHeaderDragStart = function (e) {
if (!_this.dragShadowRef.current)
return;
var store = _this.props.store;
var target = e.currentTarget;
var th = (_this.draggingTh = target.closest('th'));
var name = th.getAttribute('column-name');
var tr = th.parentNode;
_this.dragShadowRef.current.style.width = th.clientWidth + 'px';
_this.dragShadowRef.current.style.height = _this.table.querySelector('tbody').clientHeight + 'px';
_this.dragShadowRef.current.style.top = th.clientHeight + 'px';
var offsetx = e.clientX - (e.clientX - (_this.table.getBoundingClientRect().left)) - _this.table.getBoundingClientRect().left;
_this.draggingThStartX = e.clientX;
_this.draggingThOffsetX = offsetx;
_this.draggingThStartLeft = (th.getBoundingClientRect().left - (_this.table.getBoundingClientRect().left)) - offsetx;
_this.dragShadowRef.current.style.left = _this.draggingThStartLeft + 'px';
_this.originColumnName = name;
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/plain', name);
e.dataTransfer.setDragImage(document.createElement('div'), 0, 0);
var siblings = (0, cloneDeep_1.default)(store.filteredColumns);
tr.addEventListener('dragover', _this.onHeaderDragOver);
tr.addEventListener('drop', _this.onHeaderDrop);
tr.addEventListener('dragend', _this.onHeaderDragEnd);
// (tr as HTMLDivElement).classList.add('is-headerdrop-allowed');
_this.draggingSiblingTh = siblings.map(function (item) {
if (item.name) {
var th_1 = tr.querySelector("th[column-name=\"" + item.name + "\"]");
// th.classList.add('is-headerdrop-allowed');
return th_1;
}
else {
var th_2 = tr.querySelector("th[data-index=\"" + item.index + "\"]");
// th.classList.add('is-headerdrop-not-allowed')
return th_2;
}
});
};
_this.onHeaderDragOver = function (e) {
var _a, _b, _c, _d, _e, _f, _g;
e.preventDefault();
if (_this.dragShadowRef.current) {
var tableBound_1 = (_b = (_a = _this.table) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect) === null || _b === void 0 ? void 0 : _b.call(_a);
var thArray = Array.from(((_c = _this.table) === null || _c === void 0 ? void 0 : _c.querySelectorAll('table>thead>tr>th')) || []);
_this.dragShadowRef.current.style.left = _this.draggingThStartLeft + (e.clientX - _this.draggingThStartX) + 'px';
var targetThIndex = _this.leftDistances.findIndex(function (_) { return _ > e.clientX - tableBound_1.left; }) - 1;
var startThIndex = _this.leftDistances.findIndex(function (_) { return _ > _this.draggingThStartX - tableBound_1.left; }) - 1;
var targetTh = thArray[targetThIndex];
// console.log(startThIndex, targetThIndex)
if (_this.dragLineShadowRef.current) {
var dragLine = _this.dragLineShadowRef.current;
_this.setDragLine(targetTh);
var targetThBound = targetTh.getBoundingClientRect();
// 如果是刚开始的列不展示拖拽线
if (targetThIndex !== startThIndex) {
if (targetThBound.x > _this.draggingThStartX)
dragLine.style.left = targetThBound.x - ((_e = (_d = _this.table) === null || _d === void 0 ? void 0 : _d.getBoundingClientRect) === null || _e === void 0 ? void 0 : _e.call(_d).left) + targetThBound.width - 1 + 'px';
else
dragLine.style.left = targetThBound.x - ((_g = (_f = _this.table) === null || _f === void 0 ? void 0 : _f.getBoundingClientRect) === null || _g === void 0 ? void 0 : _g.call(_f).left) + 1 + 'px';
}
else {
_this.hideDragLine();
}
}
}
else {
if (_this.dragShadowRef.current) {
var dragLine = _this.dragLineShadowRef.current;
_this.hideDragLine();
}
}
};
_this.onHeaderDrop = function (e) {
var _a;
var thArray = Array.from(((_a = _this.table) === null || _a === void 0 ? void 0 : _a.querySelectorAll('table>thead>tr>th')) || []);
var targetTh = thArray[_this.leftDistances.findIndex(function (_) { var _a, _b; return _ > e.clientX - ((_b = (_a = _this.table) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect) === null || _b === void 0 ? void 0 : _b.call(_a).left); }) - 1];
if (_this.dragLineShadowRef.current)
_this.dragLineShadowRef.current.style.display = 'none';
var name = targetTh === null || targetTh === void 0 ? void 0 : targetTh.getAttribute('column-name');
// console.log(targetTh, this.leftDistances.findIndex(_ => _ > e.clientX - (this.table as HTMLElement)?.getBoundingClientRect?.().left) - 1)
if (_this.originColumnName && name) {
_this.swapColumnPosition(_this.originColumnName, name);
}
_this.onHeaderDragEnd();
};
_this.onHeaderDragEnd = function () {
if (!_this.dragShadowRef.current)
return;
_this.dragShadowRef.current.style.width = '0px';
_this.dragShadowRef.current.style.height = '0px';
_this.dragShadowRef.current.style.top = '0px';
_this.dragShadowRef.current.style.left = '0px';
requestAnimationFrame(function () {
_this.caculateLeft(true);
});
// this.draggingTh.classList.remove('is-header-dragging');
// this.draggingSiblingTh.forEach(item =>
// item.classList.remove('is-drop-allowed')
// );
var tr = _this.draggingTh.parentNode;
if (tr) {
tr.removeEventListener('dragover', _this.onHeaderDragOver);
tr.removeEventListener('drop', _this.onHeaderDrop);
tr.removeEventListener('dragend', _this.onHeaderDragEnd);
}
};
/** 渲染sql优化dom */
_this.renderSqlOptimize = function (action) {
var _a, _b, _c;
var _d = _this.props, store = _d.store, columns = _d.columns, data = _d.data, env = _d.env;
var columnsArr = (_a = columns === null || columns === void 0 ? void 0 : columns.map(function (item) { return item.name; })) !== null && _a !== void 0 ? _a : [];
var selectedList = (_c = (_b = store.selectedRows) === null || _b === void 0 ? void 0 : _b.map(function (item) { return item.data; }).filter(Boolean)) !== null && _c !== void 0 ? _c : [];
return (react_1.default.createElement(SqlOptimize_1.default, { env: env, selectedList: selectedList, action: action, columns: columnsArr, sqlStr: data === null || data === void 0 ? void 0 : data.sql, store: store }));
};
_this.renderDataCharts = function (action) {
var _a, _b, _c, _d;
var _e = _this.props, store = _e.store, selected = _e.selected, aliasTitle = _e.aliasTitle, tabTitle = _e.tabTitle, name = _e.name, primaryField = _e.primaryField, loadDataOnce = _e.loadDataOnce, getAllData = _e.getAllData, env = _e.env;
var selectedItems = (_b = (_a = selected === null || selected === void 0 ? void 0 : selected.concat()) !== null && _a !== void 0 ? _a : store.selectedRows.map(function (item) { return item.data; })) !== null && _b !== void 0 ? _b : [];
var items = store.rows.map(function (item) { return item.data; });
var colList = store.columnsData.filter(function (col) { return !col.pristine.hidden && col.type !== 'operation'; })
.map(function (item) { return item.toJSON ? item.toJSON() : item; });
var itemRaws = (_c = store.data) === null || _c === void 0 ? void 0 : _c.itemsRaw;
return react_1.default.createElement(DataCharts_1.default, { crudTitle: aliasTitle || tabTitle || '', container: (_d = env.getTopModalContainer) !== null && _d !== void 0 ? _d : _this.tableContainer.current, data: { items: items, selectedItems: selectedItems, itemRaws: itemRaws }, columns: colList, action: action, name: name, handleDealData: _this.handleDealData, primaryField: primaryField, loadDataOnce: loadDataOnce, getAllData: getAllData, staticRecords: _this.staticRecords });
};
_this.renderFieldTranslate = function (action) {
var fieldTranslate = _this.state.fieldTranslate;
return react_1.default.createElement("div", { className: 'show-field-translate-container' },
react_1.default.createElement(antd_1.Checkbox, { checked: fieldTranslate, onChange: function (e) { return _this.setState({ fieldTranslate: e.target.checked }); } }, action.label || '显示字段翻译'));
};
_this.updateActiveCell = function (row, col) {
_this.setState({ activeRow: row, activeCol: col });
};
//替换
_this.onBulkReplace = function (rowDataList) {
var store = _this.props.store;
var rows = store.rows.filter(function (item) {
return (0, find_1.default)(rowDataList, function (rowItem) { return rowItem.rowData[crud_1.DATAKEYID] == item.data[crud_1.DATAKEYID]; });
});
store.bulkQuickChange(rows, rowDataList);
var modefiedMap = (0, cloneDeep_1.default)(store.modefiedMap);
rowDataList.forEach(function (item) {
var rowItem = store.rows[item.index];
var values = item.rowData;
// rowItem.change(values);
modefiedMap.modifiedDataSet[rowItem.data[crud_1.DATAKEYID]] = values;
});
store.bulkRecordEditValues(modefiedMap);
};
_this.renderFindReplace = function (action) {
var _a;
var _b = _this.props, store = _b.store, currentSelectedRow = _b.currentSelectedRow, translate = _b.translate, env = _b.env;
var selectedList = (_a = store.selectedRows.map(function (item) { return item.index; })) !== null && _a !== void 0 ? _a : [];
var items = store.rows.map(function (item) { return item.data; });
var colList = store.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 || ['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'].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: selectedList, data: items, columns: colList, action: action, onBulkReplace: _this.onBulkReplace, canReplace: canReplace, currentCheckIndex: currentSelectedRow, updateActiveCell: _this.updateActiveCell, container: _this.tableContainer.current, translate: translate });
};
_this.renderDataStatic = function (action) {
var _a, _b, _c, _d;
var _e = _this.props, store = _e.store, selected = _e.selected, loadDataOnce = _e.loadDataOnce, getAllData = _e.getAllData, aliasTitle = _e.aliasTitle, tabTitle = _e.tabTitle, name = _e.name, isStatic = _e.isStatic;
var selectedItems = (_b = (_a = selected === null || selected === void 0 ? void 0 : selected.concat()) !== null && _a !== void 0 ? _a : store.selectedRows.map(function (item) { return item.data; })) !== null && _b !== void 0 ? _b : [];
var items = store.rows.map(function (item) { return item.data; });
var colList = store.columnsData.filter(function (col) { return !col.pristine.hidden && col.type !== 'operation'; })
.map(function (item) { return item.toJSON ? item.toJSON() : item; });
var itemRaws = (_c = store.data) === null || _c === void 0 ? void 0 : _c.itemsRaw;
return react_1.default.createElement(DataStatic_1.default, { originHeaderToolbar: _this.props.headerToolbar, crudTitle: aliasTitle || tabTitle || '', container: ((_d = _this.props.env) === null || _d === void 0 ? void 0 : _d.getTopModalContainer) || _this.tableContainer.current, staticRecords: _this.staticRecords, getAllData: getAllData, data: { items: items, selectedItems: selectedItems, itemRaws: itemRaws }, loadDataOnce: loadDataOnce, columns: colList, action: action, name: name, isStatic: isStatic, handleDealData: _this.handleDealData });
};
_this.renderDataCross = function (action) {
var _a;
if ((0, helper_1.isMobile)())
return null;
return (react_1.default.createElement(DataCross_1.default, { tableName: _this.props.name, action: action, columns: _this.props.store.filteredColumns, data: { items: _this.props.store.rows.map(function (row) { return row.data; }), selectedItems: _this.props.store.selectedRows.map(function (row) { return row.data; }) }, modalContainer: ((_a = _this.props.env) === null || _a === void 0 ? void 0 : _a.getTopModalContainer) || _this.tableContainer.current, getAllData: _this.props.getAllData, staticRecords: _this.staticRecords, onOK: function (cross, crossColumns, datas, countColumns, extraProps) {
var _a, _b;
var linkTitle = ((_b = (_a = _this.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: (_this.props.name || (0, utils_2.uuid)()) + "_cross",
cross: cross,
crossColumns: crossColumns,
isCross: true,
combineNum: cross.positionType == 1 ? cross.rowFields.length : undefined,
"affixHeader": true,
"columns": _this.props.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": []
};
_this.handleDealData('data-cross', linkTitle, schema, extraProps);
} }));
};
_this.destroyDragTable = function () {
_this.dragTable && _this.dragTable.destroy();
};
//列拖拽
_this.initDragTable = function () {
var ns = _this.props.classPrefix;
var el = (0, react_dom_1.findDOMNode)(_this).querySelector(".table-head-drag");
if (el) {
_this.dragTable = new sortablejs_1.default(el, {
group: "." + ns + "Table-table",
animation: 150,
removeCloneOnHide: true,
// 提供class可拖动
handle: ".header-cell",
ghostClass: 'tableCell-dragglable-dragging',
dragClass: 'tableCell-dragglable-dragging',
filter: function (e, target) {
return target.className.includes('__') || target.className.includes('operation');
},
scroll: false,
fallbackOnBody: false,
removeOnSpill: true,
draggable: "." + ns + "TableCell-dragglable",
onEnd: function (e) {
if (e.newIndex === e.oldIndex || _this.onDraging) {
return;
}
_this.swapColumnPosition(e.oldIndex, e.newIndex);
},
});
}
};
_this.swapColumnPosition = function (oldName, targetName) {
var _a;
var store = _this.props.store;
var finalColumns = (0, cloneDeep_1.default)(store.columnsData);
var newColumns = (0, cloneDeep_1.default)(store.filteredColumns);
var oldColumn = newColumns.find(function (item) { return item.name === oldName; });
var newColumn = newColumns.find(function (item) { return item.name === targetName; });
if (oldColumn && newColumn) {
var originOldIndex = finalColumns.findIndex(function (item) { return item.name === oldColumn.name; });
var originNewIndex = finalColumns.findIndex(function (item) { return item.name === newColumn.name; });
finalColumns.splice(originNewIndex > originOldIndex ? originNewIndex + 1 : originNewIndex, 0, oldColumn);
originOldIndex > originNewIndex
? finalColumns.splice(originOldIndex + 1, 1)
: finalColumns.splice(originOldIndex, 1);
var saveColInfo = (0, ColumnToggler_1.productColumnInfo)(finalColumns);
var targetTemp = ((_a = _this.state.columnSettingTemps) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (0, tslib_1.__assign)((0, tslib_1.__assign)({}, _this.state.columnSettingTemps[0]), { columnInfo: saveColInfo }) : undefined;
_this.handleColumnToggle(finalColumns, saveColInfo, true, targetTemp, true);
}
};
_this.renderDetailModelToggler = function (config) {
// const switchModelRender = {
// label: __(this.state.tableMode === 'vertical' ? 'Table.switchToHorizontal' : 'Table.switchToVertical'),
// type: 'detail-model', icon: this.state.tableMode === 'vertical' ? <FileSyncOutlined /> : <ProjectOutlined />
// }
var __ = _this.props.translate;
var label = __(_this.state.tableMode === 'vertical' ? 'Table.switchToHorizontal' : 'Table.switchToVertical');
var icon = _this.state.tableMode === 'vertical' ? react_1.default.createElement(icons_2.FileSyncOutlined, null) : react_1.default.createElement(icons_2.ProjectOutlined, null);
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", { className: 'toolbar-item', onClick: function () { return _this.handleToolsClick(config.type); } },
react_1.default.createElement("div", { className: 'toolbar-item-icon' }, icon),
react_1.default.createElement("div", { className: 'toolbar-item-name' }, label))));
};
_this.handleToolsClick = function (type) {
var _a;
var _b = _this.props, store = _b.store, handleResetData = _b.handleResetData;
switch (type) {
case 'columns-toggler':
_this.setState({ columnsTogglerShow: true });
(_a = _this.debounceSendColumns) === null || _a === void 0 ? void 0 : _a.cancel();
break;
case 'detail-model':
case 'switch-layout':
_this.setState({ tableMode: _this.state.tableMode == 'vertical' ? 'horizontal' : 'vertical' }, function () {
store.update({
footable: _this.state.tableMode === 'vertical' ? true : false
});
});
break;
default:
break;
}
};
/** 移动端 - 渲染工具 */
_this.renderTools = function () {
var _a = _this.props, headerToolbar = _a.headerToolbar, __ = _a.translate, cx = _a.classnames, env = _a.env, store = _a.store, data = _a.data, filterRender = _a.filterRender, isPick = _a.isPick, clearSelectedItems = _a.clearSelectedItems, crudRenderToolbarFunc = _a.crudRenderToolbarFunc, multiple = _a.multiple;
/** 折叠在工具里的tools */
var foldedHeaderTools = [];
/** 在筛选/多选右侧的tools */
var unfoldedHeaderTools = [];
/** 将移动端需要显示的功能过滤出来： 目前工具栏仅保留 ai工具，设置，详情模式 */
// const switchModelRender = {
// label: __(this.state.tableMode === 'vertical' ? 'Table.switchToHorizontal' : 'Table.switchToVertical'),
// type: 'detail-model', icon: this.state.tableMode === 'vertical' ? <FileSyncOutlined /> : <ProjectOutlined />
// }
headerToolbar.forEach(function (item) {
var type = item.type, isToolBar = item.isToolBar, foldable = item.foldable;
/** 是否是移动端的工具 */
if (isToolBar) {
/** foldable: 是否归到折叠菜单中 */
/** 配置非折叠的工具 */
if (!foldable) {
unfoldedHeaderTools.push(item);
}
else {
foldedHeaderTools.push(item);
}
}
});
// const tools = headerToolbar.filter((item: any) => (['columns-toggler'].includes(item.type) && store.columnsTogglable) || ['help', 'ai-tool', 'reload'].includes(item.type));
/** 再添加一个 列表模式切换 */
// foldedHeaderTools.push({
// label: __(this.state.tableMode === 'vertical' ? 'Table.switchToHorizontal' : 'Table.switchToVertical'),
// type: 'switch-layout', icon: this.state.tableMode === 'vertical' ? <FileSyncOutlined /> : <ProjectOutlined />
// });
/** 筛选 */
var isFilter = !!Object.keys(data.filterParam || {}).length;
var filterNode = filterRender && filterRender(isFilter);
return (react_1.default.createElement(react_1.default.Fragment, null,
(foldedHeaderTools === null || foldedHeaderTools === void 0 ? void 0 : foldedHeaderTools.length) ? (react_1.default.createElement("div", { className: "header-btns" },
react_1.default.createElement(popover_1.default, { showArrow: false, placement: "bottom", getPopupContainer: env.getModalContainer, trigger: "click", overlayClassName: "table-toolbar-pop", autoAdjustOverflow: true, visible: _this.state.toolbarShow, onOpenChange: function (open) { return _this.setState({ toolbarShow: open }); }, content: react_1.default.createElement("div", { className: 'toolbar-container', onClick: function () { return _this.setState({ toolbarShow: false }); } }, foldedHeaderTools.map(function (item, index) {
var _a;
return (_a = _this.renderToolbar(item)) !== null && _a !== void 0 ? _a : crudRenderToolbarFunc(item);
})) },
react_1.default.createElement("div", { className: cx('Mobile-batch-manage'), onClick: function () { return _this.setState({ toolbarShow: true }); } },
react_1.default.createElement(icons_1.Icon, { icon: '#icon-toolbox', className: "icon" }),
react_1.default.createElement("span", { className: 'batch-text' }, __('Table.tools')))))) : null,
filterNode,
unfoldedHeaderTools.map(function (item) {
var _a;
return (react_1.default.createElement("div", { className: cx('Mobile-batch-manage') }, (_a = _this.renderToolbar(item)) !== null && _a !== void 0 ? _a : crudRenderToolbarFunc(item)));
})));
};
_this.renderPagenation = function () {
var _a, _b, _c, _d, _e, _f, _g;
var _h = _this.props, store = _h.store, selected = _h.selected, cx = _h.classnames, multiple = _h.multiple, popOverContainer = _h.popOverContainer, footerToolbarRender = _h.footerToolbarRender, footerToolbar = _h.footerToolbar;
var column = store.filteredColumns[0] && store.filteredColumns[0].type == "__checkme";
var selectedItems = (_b = (_a = selected === null || selected === void 0 ? void 0 : selected.concat()) !== null && _a !== void 0 ? _a : store.selectedRows.map(function (item) { return item.data; })) !== null && _b !== void 0 ? _b : [];
var _footer = footerToolbar || [];
// 居右的这里展示
var leftChild = footerToolbarRender ? footerToolbarRender((0, tslib_1.__assign)((0, 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, (0, helper_1.isMobile)() ? _footer : _footer.filter(function (item) { return item.align !== 'right'; }) //Aug
) : null;
// 居左的在这边
var rightChild = footerToolbarRender ? footerToolbarRender((0, tslib_1.__assign)((0, 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.filter(function (item) { return item.align == 'right'; }) //Aug
) : null;
var checkAllWidth = (((_e = (_d = (_c = _this.table) === null || _c === void 0 ? void 0 : _c.querySelector('thead')) === null || _d === void 0 ? void 0 : _d.querySelector('th')) === null || _e === void 0 ? void 0 : _e.clientWidth) || 25) + 'px';
// 2025-03 新增判断子选项是否为空，为空就不渲染父div
return (column && multiple && _this.state.selectedIndex != undefined || leftChild || rightChild) ? (react_1.default.createElement("div", { className: cx('Table-affix') },
column && multiple && _this.state.selectedIndex != undefined && (react_1.default.createElement("span", { className: cx('Table-affixs'), style: { marginRight: 0, alignItems: 'center' } },
column && multiple && react_1.default.createElement("span", { className: cx('Table-affix-Arr') }, _this.renderHeadCell(store.filteredColumns[0], { style: { width: checkAllWidth, paddingBottom: '2px', minWidth: '25px' } })),
react_1.default.createElement("div", { className: cx('Table-affix-text') },
((_f = store.filterColumns) === null || _f === void 0 ? void 0 : _f.size) > 0 && react_1.default.createElement("span", null,
"\u5DF2\u7B5B\u9009",
store.rows.length,
"\u6761\u6570\u636E"),
(selectedItems.length == 0 ? "" : "\u5DF2\u9009\uFF1A" + selectedItems.length + "\u884C" + " , "),
((_g = _this.props.store.filteredColumns) === null || _g === void 0 ? void 0 : _g.find(function (_) { return _.type === '__checkme'; })) ? (_this.state.selectedIndex != undefined && "\u7B2C" + (_this.state.selectedIndex + 1) + "\u884C") : null))),
react_1.default.createElement(react_1.default.Fragment, null,
leftChild,
rightChild))) : null;
};
_this.onToolsChange = function (key) {
_this.setState({ currentKey: key });
};
_this.onToolsClose = function (key) {
_this.setState(function (prev) { return ({
processToolsModalList: prev.processToolsModalList.filter(function (item) { return item.key !== key; }),
currentKey: ''
}); });
};
//使用二次加工工具处理完数据后，新增一个弹窗
_this.handleDealData = function (toolType, label, schema, extraProps, subTitle) {
var processToolsModalList = _this.state.processToolsModalList;
var key = schema.name + '' + processToolsModalList.length;
_this.setState({
currentKey: key,
processToolsModalList: (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], processToolsModalList, true), [{ toolType: toolType, key: key, label: label, schema: schema, subTitle: subTitle, extraProps: extraProps }], false)
});
};
//修改二次加工工具条件
_this.handleChangeData = function (itemKey, schema) {
_this.setState(function (prev) { return ({
processToolsModalList: prev.processToolsModalList.map(function (item) {
if (item.key === itemKey) {
return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, item), { schema: schema });
}
return item;
})
}); });
};
_this.affix = function (isAll) {
var _a, _b;
var _c = _this.props, store = _c.store, affixRow = _c.affixRow, selected = _c.selected;
var selectedItems = (_b = (_a = selected === null || selected === void 0 ? void 0 : selected.concat()) !== null && _a !== void 0 ? _a : store.selectedRows.map(function (item) { return item.data; })) !== null && _b !== void 0 ? _b : [];
var items = isAll ? store.rows.map(function (item) { return item.data; }) : selectedItems;
var calcValue = function (groupItem) {
var _a, _b, _c, _d, _e, _f, _g;
var rawName = (_a = groupItem.rawName) !== null && _a !== void 0 ? _a : groupItem.name;
var field = affixRow === null || affixRow === void 0 ? void 0 : affixRow.find(function (aitem) { return rawName === aitem.name; });
if (field) {
var formulaRule = (_b = field.formula) === null || _b === void 0 ? void 0 : _b.toLocaleLowerCase();
var showText = ((_c = field.label) !== null && _c !== void 0 ? _c : '') + '：';
var value = (0, utils_1.calcFn)(formulaRule, rawName !== null && rawName !== void 0 ? rawName : '', items);
if (formulaRule === 'count') {