fastlion-amis
Version:
一种MIS页面生成工具
644 lines (643 loc) • 45.4 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.productColumnInfo = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var sortablejs_1 = tslib_1.__importDefault(require("sortablejs"));
var cloneDeep_1 = tslib_1.__importDefault(require("lodash/cloneDeep"));
var Overlay_1 = tslib_1.__importDefault(require("../../components/Overlay"));
var PopOver_1 = tslib_1.__importDefault(require("../../components/PopOver"));
var Button_1 = tslib_1.__importDefault(require("../../components/Button"));
var TooltipWrapper_1 = tslib_1.__importDefault(require("../../components/TooltipWrapper"));
var helper_1 = require("../../utils/helper");
var tpl_1 = require("../../utils/tpl");
var icons_1 = require("../../components/icons");
var InputBox_1 = tslib_1.__importDefault(require("../../components/InputBox"));
var RootClose_1 = require("../../utils/RootClose");
var icons_2 = require("@ant-design/icons");
var api_1 = require("../../utils/api");
var antd_1 = require("antd");
var tools_1 = require("../../utils/shell/tools");
var shell_1 = require("../../utils/shell");
var debounce_1 = tslib_1.__importDefault(require("lodash/debounce"));
var commonTableFunction_1 = require("../../store/utils/commonTableFunction");
var lodash_1 = require("lodash");
//计算出columnInfo数据
var productColumnInfo = function (sortColumns) {
var saveCols = {};
sortColumns.forEach(function (col, index) {
var _a;
if (col.type === 'operation')
return;
saveCols[col.name] = {
index: index,
hidden: ((_a = col === null || col === void 0 ? void 0 : col.pristine) === null || _a === void 0 ? void 0 : _a.hidden) ? 1 : 0,
fixed: col.fixed
};
});
return saveCols;
};
exports.productColumnInfo = productColumnInfo;
var ColumnToggler = function (props) {
var tooltip = props.tooltip, placement = props.placement, tooltipContainer = props.tooltipContainer, tooltipTrigger = props.tooltipTrigger, tooltipRootClose = props.tooltipRootClose, disabledTip = props.disabledTip, block = props.block, disabled = props.disabled, $schema = props.$schema, btnClassName = props.btnClassName, size = props.size, label = props.label, level = props.level, primary = props.primary, className = props.className, cx = props.classnames, align = props.align, iconOnly = props.iconOnly, icon = props.icon, isActived = props.isActived, data = props.data, draggable = props.draggable, ns = props.classPrefix, modalContainer = props.modalContainer, defaultIsOpened = props.defaultIsOpened, columns = props.columns, saveColApi = props.saveColApi, env = props.env, hideExpandIco = props.hideExpandIco, __ = props.translate, indexColShow = props.indexColShow, setIndexCol = props.setIndexCol, updateColumnSettingList = props.updateColumnSettingList, flushDebounced = props.flushDebounced, columnSettingTemps = props.columnSettingTemps;
var _a = (0, react_1.useState)(defaultIsOpened), isOpened = _a[0], setIsOpend = _a[1];
var _b = (0, react_1.useState)([]), sortColumns = _b[0], setSortColumns = _b[1];
var _c = (0, react_1.useState)(columnSettingTemps || []), tempList = _c[0], setTempList = _c[1];
var _d = (0, react_1.useState)(false), tempVisible = _d[0], setTempVisible = _d[1];
var _e = (0, react_1.useState)(''), selectedTemp = _e[0], setSelectedTemp = _e[1];
var _f = (0, react_1.useState)(''), tmpSelected = _f[0], setTmpSelected = _f[1];
var _g = (0, react_1.useState)(''), editingTemp = _g[0], setEditingTemp = _g[1];
var _h = (0, react_1.useState)(indexColShow), indexVisible = _h[0], setIndexVisible = _h[1];
var _j = (0, react_1.useState)(false), selectTmpShow = _j[0], setSelectTmpShow = _j[1];
var _k = (0, react_1.useState)(false), selectTmpConfirmShow = _k[0], setSelectTmpConfirmShow = _k[1];
var _l = (0, react_1.useState)(''), searchValue = _l[0], setSearchValue = _l[1];
var _m = (0, react_1.useState)(), selectedItem = _m[0], setSelectedItem = _m[1];
var form = antd_1.Form.useForm()[0];
var target = (0, react_1.useRef)();
var dialogRef = (0, react_1.useRef)();
var sortable = (0, react_1.useRef)();
var sortColumnsRef = (0, react_1.useRef)([]);
var domRef = function (ref) {
target.current = ref;
};
(0, react_1.useEffect)(function () {
setTempList(columnSettingTemps);
if (columnSettingTemps.length > 0) {
setSelectedTemp(columnSettingTemps[0].tempKey);
}
}, [columnSettingTemps]);
(0, react_1.useEffect)(function () {
if (searchValue) {
debounceHandleSearch(searchValue);
}
else {
setSelectedItem(undefined);
}
}, [searchValue]);
(0, react_1.useEffect)(function () {
var _a;
if (selectedItem && searchValue) {
var activeDom = (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('.display-field-active');
activeDom === null || activeDom === void 0 ? void 0 : activeDom.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
else {
setSelectedItem(undefined);
}
}, [selectedItem]);
var innerRef = (0, react_1.useRef)(null);
var handleSearch = function (searchValue) {
var _a;
//匹配规则，1.全匹配 2.以关键字开头匹配 3.模糊匹配
var target = sortColumns.find(function (item) { return item.label === searchValue; });
!target && (target = sortColumns.find(function (item) { return item.label.startsWith(searchValue); }));
!target && (target = sortColumns.find(function (item) { var _a; return (_a = item.label) === null || _a === void 0 ? void 0 : _a.includes(searchValue); }));
if (target) {
setSelectedItem(target);
if (target.name === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name)) {
var activeDom = (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('.display-field-active');
activeDom === null || activeDom === void 0 ? void 0 : activeDom.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
}
};
var debounceHandleSearch = (0, debounce_1.default)(handleSearch, 300);
var initColumns = function (cols) {
var colList = (0, cloneDeep_1.default)(cols).filter(function (item) { return item.type !== 'operation'; });
setSortColumns(colList);
};
(0, react_1.useEffect)(function () {
if (isOpened) {
initColumns(columns);
}
}, [columns, isOpened]);
(0, react_1.useEffect)(function () {
resetClick.current = false;
}, [isOpened]);
(0, react_1.useEffect)(function () {
sortColumnsRef.current = sortColumns;
}, [sortColumns]);
(0, react_1.useEffect)(function () {
initDragging();
return function () {
target.current = undefined;
destroyDragging();
};
}, []);
//获取模板列表并保存
var getTempList = function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
var api, data, list;
return tslib_1.__generator(this, function (_a) {
switch (_a.label) {
case 0:
api = (0, api_1.normalizeApi)((saveColApi === null || saveColApi === void 0 ? void 0 : saveColApi.url) || '', 'get');
return [4 /*yield*/, env.fetcher(api)];
case 1:
data = (_a.sent()).data;
list = (data === null || data === void 0 ? void 0 : data.filter(function (item) { return item.tempKey; })) || [];
setTempList(list);
if (list.length > 0) {
setSelectedTemp(list[0].tempKey);
}
return [2 /*return*/, list];
}
});
}); };
var destroyDragging = function () {
sortable.current && sortable.current.destroy();
};
// @autobind
var dragRef = function (ref) {
if (draggable && ref) {
initDragging();
}
};
var canConfirmFetch = (0, react_1.useRef)(false);
var toggle = function (e) {
e.preventDefault();
flushDebounced === null || flushDebounced === void 0 ? void 0 : flushDebounced();
setIsOpend(!isOpened);
};
var updateToggledColumn = function (column, value, shift) {
canConfirmFetch.current = true;
var newSortColumns = sortColumns.map(function (item) {
if (item.name === column.name) {
return tslib_1.__assign(tslib_1.__assign({}, item), { pristine: tslib_1.__assign(tslib_1.__assign({}, item === null || item === void 0 ? void 0 : item.pristine), { hidden: !value }), toggled: !!value });
}
return item;
});
setSortColumns(tslib_1.__spreadArray([], newSortColumns, true));
};
var button = (react_1.default.createElement("button", { onClick: toggle, disabled: disabled, className: cx('Button', btnClassName, typeof level === 'undefined'
? 'Button--default'
: level
? "Button--".concat(level)
: '', {
'Button--block': block,
'Button--primary': primary,
'Button--iconOnly': iconOnly
}, size ? "Button--".concat(size) : '') },
icon ? (typeof icon === 'string' ?
icon.includes('#') ?
react_1.default.createElement(icons_1.Icon, { icon: icon, className: "icon", symbol: true }) :
(react_1.default.createElement("i", { className: cx(icon, 'm-r-xs') })) : (icon)) : null,
typeof label === 'string' ? (0, tpl_1.filter)(label, data) : label,
hideExpandIco || draggable ? null : (react_1.default.createElement("span", { className: cx('ColumnToggler-caret') },
react_1.default.createElement(icons_1.Icon, { icon: "caret", className: "icon" })))));
var swapColumnPosition = function (oldIndex, newIndex) {
var newColumns = tslib_1.__spreadArray([], sortColumnsRef.current, true);
var oldColumn = newColumns[oldIndex];
newColumns.splice(newIndex > oldIndex ? newIndex + 1 : newIndex, 0, oldColumn);
oldIndex > newIndex
? newColumns.splice(oldIndex + 1, 1)
: newColumns.splice(oldIndex, 1);
setSortColumns(newColumns);
};
var renderOuter = function () {
var _a;
var popOverContainer = props.popOverContainer, cx = props.classnames, ns = props.classPrefix, children = props.children, closeOnClick = props.closeOnClick, closeOnOutside = props.closeOnOutside;
var body = (react_1.default.createElement(RootClose_1.RootClose, { disabled: !isOpened, onRootClose: closeOnOutside !== false ? close : helper_1.noop }, function (ref) {
return (react_1.default.createElement("ul", { className: cx('ColumnToggler-menu'), onClick: closeOnClick ? close : helper_1.noop, ref: ref }, children));
}));
if (popOverContainer) {
return (react_1.default.createElement(Overlay_1.default, { container: popOverContainer, target: function () { return target.current; }, show: true },
react_1.default.createElement(PopOver_1.default, { overlay: true, onHide: close, classPrefix: ns, className: cx('ColumnToggler-popover'), style: { minWidth: (_a = target.current) === null || _a === void 0 ? void 0 : _a.offsetWidth } }, body)));
}
return body;
};
var close = function () {
var _a;
setSelectedTemp('');
setTmpSelected('');
setIsOpend(false);
(_a = props.closeDrawer) === null || _a === void 0 ? void 0 : _a.call(props);
};
// @autobind
var onConfirm = function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
var onColumnToggle, api, targetCol, saveCols, targetCol, isValidCols, targetTemp;
var _a;
return tslib_1.__generator(this, function (_b) {
switch (_b.label) {
case 0:
onColumnToggle = props.onColumnToggle;
if (!((!tempList || (tempList && tempList.length === 0)) && !canConfirmFetch.current && resetClick.current)) return [3 /*break*/, 2];
api = (0, api_1.normalizeApi)({
url: (saveColApi === null || saveColApi === void 0 ? void 0 : saveColApi.url) || '',
method: 'delete'
});
return [4 /*yield*/, env.fetcher(api)];
case 1:
_b.sent();
targetCol = columns.find(function (item) { return item.type === 'operation'; });
onColumnToggle(targetCol ? tslib_1.__spreadArray(tslib_1.__spreadArray([], sortColumns, true), [targetCol], false) : tslib_1.__spreadArray([], sortColumns, true), {}, false, undefined);
return [3 /*break*/, 3];
case 2:
saveCols = (0, exports.productColumnInfo)(sortColumns);
targetCol = columns.find(function (item) { return item.type === 'operation'; });
isValidCols = Object.values(saveCols).some(function (item) { return item.hidden === 0; });
if (!isValidCols) {
antd_1.message.warning('请至少选择一个显示列');
return [2 /*return*/];
}
targetTemp = selectedTemp
? tempList.find(function (item) { return item.tempKey === selectedTemp; })
: undefined;
if (targetTemp) {
targetTemp = tslib_1.__assign(tslib_1.__assign({}, targetTemp), { columnInfo: saveCols });
}
if (targetCol) {
onColumnToggle &&
onColumnToggle(tslib_1.__spreadArray(tslib_1.__spreadArray([], sortColumns, true), [targetCol], false), saveCols, canConfirmFetch.current, targetTemp);
}
else {
onColumnToggle &&
onColumnToggle(tslib_1.__spreadArray([], sortColumns, true), saveCols, canConfirmFetch.current, targetTemp);
}
_b.label = 3;
case 3:
setIndexCol(indexVisible);
setIsOpend(false);
(_a = props.closeDrawer) === null || _a === void 0 ? void 0 : _a.call(props);
return [2 /*return*/];
}
});
}); };
var initDragging = function () {
var _a;
var el = (_a = dialogRef === null || dialogRef === void 0 ? void 0 : dialogRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(".".concat(ns, "ColumnToggler-modal-body-right .").concat(ns, "ColumnToggler-modal-content"));
if (el) {
sortable.current = new sortablejs_1.default(el, {
group: ".".concat(ns, "ColumnToggler-modal-body-right"),
animation: 150,
// 提供class可拖动
handle: (0, helper_1.isMobile)() ? ".".concat(ns, "ColumnToggler-menuItem-dragBar") : ".".concat(ns, "ColumnToggler-menuItem"),
ghostClass: "".concat(ns, "ColumnToggler-menuItem--dragging"),
onEnd: function (e) {
if (e.newIndex === e.oldIndex) {
return;
}
canConfirmFetch.current = true;
swapColumnPosition(e.oldIndex, e.newIndex);
}
});
}
};
var sortFix = function (index, column) {
var newSortColumns = tslib_1.__spreadArray([], sortColumns, true);
canConfirmFetch.current = true;
if (column.groupName) {
var cols = newSortColumns.map(function (item, fixIndex) {
if (item.groupName === column.groupName) {
var targetColumn = tslib_1.__assign(tslib_1.__assign({}, item), { fixed: (item === null || item === void 0 ? void 0 : item.fixed) ? '' : 'left', pristine: tslib_1.__assign(tslib_1.__assign({}, item.pristine), { fixed: (item === null || item === void 0 ? void 0 : item.fixed) ? '' : 'left' }) });
return targetColumn;
}
return item;
});
setSortColumns(cols);
}
else {
var targetColumn = tslib_1.__assign(tslib_1.__assign({}, column), { fixed: (column === null || column === void 0 ? void 0 : column.fixed) ? '' : 'left', pristine: tslib_1.__assign(tslib_1.__assign({}, column.pristine), { fixed: (column === null || column === void 0 ? void 0 : column.fixed) ? '' : 'left' }) });
newSortColumns.splice(index, 1, targetColumn);
setSortColumns(newSortColumns);
}
};
var sortUp = function (index, column) {
if (index === 0)
return;
canConfirmFetch.current = true;
var newColumns = tslib_1.__spreadArray([], sortColumnsRef.current, true);
var delItem = newColumns.splice(index, 1).map(function (item) { return (tslib_1.__assign(tslib_1.__assign({}, item), { toggled: true, pristine: tslib_1.__assign(tslib_1.__assign({}, item === null || item === void 0 ? void 0 : item.pristine), { hidden: false }) })); });
setSortColumns(tslib_1.__spreadArray(tslib_1.__spreadArray([], delItem, true), newColumns, true));
};
var sortDown = function (index, column) {
if (index === sortColumnsRef.current.length - 1)
return;
canConfirmFetch.current = true;
var newColumns = tslib_1.__spreadArray([], sortColumnsRef.current, true);
var delItem = newColumns.splice(index, 1);
setSortColumns(tslib_1.__spreadArray(tslib_1.__spreadArray([], newColumns, true), delItem, true));
};
var saveTemplate = function () {
setTempVisible(true);
};
var onOk = function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
var values, data_1, _a, msg, ok, data_2, api, msg, list;
return tslib_1.__generator(this, function (_b) {
switch (_b.label) {
case 0: return [4 /*yield*/, form.validateFields()];
case 1:
values = _b.sent();
if (!editingTemp) return [3 /*break*/, 3];
data_1 = tslib_1.__assign(tslib_1.__assign({}, values), { tempKey: editingTemp });
return [4 /*yield*/, env.fetcher({
url: "/api/v1/personal/setting/tempName/".concat(props.crudName),
method: 'post'
}, data_1)];
case 2:
_a = _b.sent(), msg = _a.msg, ok = _a.ok;
if (ok) {
setTmpSelected('');
setSelectedTemp('');
setEditingTemp('');
}
antd_1.message.info(msg);
return [3 /*break*/, 5];
case 3:
data_2 = tslib_1.__assign(tslib_1.__assign({}, values), { tempKey: (0, helper_1.uuid)(), columnInfo: (0, exports.productColumnInfo)(sortColumns) });
api = (0, api_1.normalizeApi)((saveColApi === null || saveColApi === void 0 ? void 0 : saveColApi.url) || '', 'post');
return [4 /*yield*/, env.fetcher(api, data_2)];
case 4:
msg = (_b.sent()).msg;
setEditingTemp('');
antd_1.message.info(msg);
_b.label = 5;
case 5: return [4 /*yield*/, getTempList()];
case 6:
list = _b.sent();
updateColumnSettingList(list);
setTempVisible(false);
return [2 /*return*/];
}
});
}); };
var onSelect = function (value) {
var target = tempList.find(function (item) { return item.tempKey === value; });
var newList = Object.entries((target === null || target === void 0 ? void 0 : target.columnInfo) || {})
.filter(function (_a) {
var k = _a[0], v = _a[1];
return !!columns.find(function (item) { return item.name === k; });
})
.map(function (_a) {
var key = _a[0], v = _a[1];
var col = columns.find(function (item) { return item.name === key; });
return tslib_1.__assign(tslib_1.__assign({}, col), { index: v.index, toggled: !(v === null || v === void 0 ? void 0 : v.hidden), fixed: v.fixed, pristine: tslib_1.__assign(tslib_1.__assign({}, col === null || col === void 0 ? void 0 : col.pristine), { hidden: !!(v === null || v === void 0 ? void 0 : v.hidden) }) });
});
var newtempColumns = (0, cloneDeep_1.default)(columns).filter(function (item) { return item.type !== 'operation'; }).map(function (item) {
var findItem = newList.find(function (litem) { return litem.name === item.name; });
if (findItem)
return findItem;
return item;
}).sort(function (a, b) { return a.index - b.index; });
canConfirmFetch.current = true;
setSelectedTemp(value);
setSortColumns(newtempColumns);
};
var delTemp = function (tempKey) { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
var api, _a, msg, ok, newList;
return tslib_1.__generator(this, function (_b) {
switch (_b.label) {
case 0:
api = (0, api_1.normalizeApi)({
url: (saveColApi === null || saveColApi === void 0 ? void 0 : saveColApi.url) || '',
data: { tempKey: tempKey },
method: 'delete'
});
return [4 /*yield*/, env.fetcher(api)];
case 1:
_a = _b.sent(), msg = _a.msg, ok = _a.ok;
antd_1.message.info(msg);
if (ok) {
setSelectTmpConfirmShow(false);
setTmpSelected('');
setSelectedTemp('');
}
newList = tempList.filter(function (item) { return item.tempKey !== tempKey; });
setTempList(newList);
updateColumnSettingList(newList);
return [2 /*return*/];
}
});
}); };
var editTemp = function (e, tempKey, tempName) {
e.stopPropagation();
form.setFieldsValue({ tempName: tempName });
setTempVisible(true);
setEditingTemp(tempKey);
};
var resetClick = (0, react_1.useRef)(false);
var reset = function () {
var colList = (0, cloneDeep_1.default)(columns)
.filter(function (item) { return item.type !== 'operation'; })
.map(function (item) {
var index = $schema.columns.findIndex(function (col) { return col.name === item.name; });
return tslib_1.__assign(tslib_1.__assign({}, item), { toggled: true, index: index, pristine: tslib_1.__assign(tslib_1.__assign({}, item === null || item === void 0 ? void 0 : item.pristine), { hidden: false }) });
})
.sort(function (a, b) { return a.index - b.index; });
setSortColumns(colList);
resetClick.current = true;
};
// 从excel导入列信息
var copyFromShell = function (content) { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
var list, arr, newList_1, newtempColumns;
return tslib_1.__generator(this, function (_a) {
try {
if (!(0, lodash_1.isNil)(content) && content !== '') {
list = content.split("\t").map(function (item) { return item.trim(); }).filter(function (item) { return item; });
if (list.length > 0) {
arr = tslib_1.__spreadArray([], new Set(list), true).filter(function (info) { return !!columns.find(function (item) { return item.label === info; }); });
newList_1 = arr.map(function (colLabel, index) {
var col = columns.find(function (item) { return item.label === colLabel; });
return tslib_1.__assign(tslib_1.__assign({}, col), { index: columns[index].index, toggled: true, fixed: col === null || col === void 0 ? void 0 : col.fixed, pristine: tslib_1.__assign(tslib_1.__assign({}, col === null || col === void 0 ? void 0 : col.pristine), { hidden: false }) });
});
newtempColumns = (0, cloneDeep_1.default)(columns).filter(function (item) { return item.type !== 'operation'; }).map(function (item) {
var findItem = newList_1.find(function (litem) { return litem.name === item.name; });
if (findItem)
return findItem;
return item;
}).sort(function (a, b) { return a.index - b.index; });
canConfirmFetch.current = true;
setSortColumns(newtempColumns);
}
else {
antd_1.message.info('剪切板内容格式错误');
}
}
else {
antd_1.message.warning('剪切板为空');
}
}
catch (error) {
console.error('读取剪切板内容时发生错误:', error);
antd_1.message.warning('读取剪切板失败');
}
return [2 /*return*/];
});
}); };
var tempModalClose = function () {
form.resetFields();
setEditingTemp('');
};
/**
*
* @param check 不选，全选，反选
*/
var handleUpdateAll = function (check) {
canConfirmFetch.current = true;
var newSortColumns = tslib_1.__spreadArray([], sortColumns, true).map(function (item) {
var _a, _b;
return (tslib_1.__assign(tslib_1.__assign({}, item), { pristine: tslib_1.__assign(tslib_1.__assign({}, item === null || item === void 0 ? void 0 : item.pristine), { hidden: check === 0 ? true : (check === 1 ? false : !((_a = item.pristine) === null || _a === void 0 ? void 0 : _a.hidden)) }), toggled: check === 0 ? false : (check === 1 ? true : !!((_b = item.pristine) === null || _b === void 0 ? void 0 : _b.hidden)) }));
});
setSortColumns(tslib_1.__spreadArray([], newSortColumns, true));
};
var renderHeader = function () {
if ((0, helper_1.isMobile)()) {
return (react_1.default.createElement("div", { className: cx('ColumnToggler-modal-header') },
react_1.default.createElement("div", { className: 'header-left' },
react_1.default.createElement("div", { className: 'name-bar' }, __('Table.columnsToggler.colName')),
react_1.default.createElement(Button_1.default, { level: "link", onClick: reset }, __('resetSettings'))),
react_1.default.createElement("div", { className: 'header-right' },
react_1.default.createElement(Button_1.default, { onClick: function () { return handleUpdateAll(1); }, level: "link" }, __('Table.columnsToggler.selectAll')),
react_1.default.createElement(Button_1.default, { onClick: function () { return handleUpdateAll(0); }, level: "link" }, __('Table.columnsToggler.Unselect')),
react_1.default.createElement(Button_1.default, { onClick: function () { return handleUpdateAll(2); }, level: "link" }, __('Table.columnsToggler.selectReverse')))));
}
return null;
};
var renderToolbar = function (column, index) {
var _a, _b, _c;
return (react_1.default.createElement("div", { style: {
display: 'flex',
justifyContent: 'flex-start',
alignItems: 'center',
marginLeft: 'auto',
fontSize: '16px'
} },
((_a = column.pristine) === null || _a === void 0 ? void 0 : _a.hidden) !== true && react_1.default.createElement(icons_2.CheckOutlined, { className: "operation-icons", onClick: function () { var _a; return updateToggledColumn(column, !!((_a = column.pristine) === null || _a === void 0 ? void 0 : _a.hidden)); }, style: { color: ((_b = column.pristine) === null || _b === void 0 ? void 0 : _b.hidden) ? '#A5A5A5' : '#3574ee' } }),
((_c = column.pristine) === null || _c === void 0 ? void 0 : _c.hidden) !== true && react_1.default.createElement(icons_2.PushpinOutlined, { className: 'operation-icons', onClick: function () { return sortFix(index, column); }, style: {
color: column.fixed ? '#3574ee' : '#A5A5A5',
transform: column.fixed ? 'rotate(-45deg)' : 'none'
} }),
react_1.default.createElement(icons_2.VerticalAlignTopOutlined, { onClick: function () { return sortUp(index, column); }, className: 'operation-icons', style: { color: '#A5A5A5' } }),
react_1.default.createElement(icons_2.VerticalAlignBottomOutlined, { onClick: function () { return sortDown(index, column); }, className: 'operation-icons', style: { color: '#A5A5A5' } })));
};
//pc端底部按钮
var renderFooter = function () {
return react_1.default.createElement("div", { className: cx('ColumnToggler-modal-footer') },
react_1.default.createElement("div", { className: 'footer-btn-group-left' },
react_1.default.createElement("div", { className: 'defaultModal-footer-left' },
react_1.default.createElement(antd_1.Button, { type: "primary", size: 'middle', onClick: saveTemplate },
"+ ",
__('Table.columnsToggler.addTemplate')),
react_1.default.createElement("div", { style: { width: 160, padding: 0, marginLeft: '10px' } },
react_1.default.createElement(antd_1.Select, { getPopupContainer: env.getModalContainer, style: { width: '100%', textAlign: 'left' }, onSelect: onSelect, value: selectedTemp, placement: "topRight", dropdownClassName: "temp-selector-drop dropdown-select-style" }, tempList.map(function (item) { return (react_1.default.createElement(antd_1.Select.Option, { value: item.tempKey, key: item.tempKey },
react_1.default.createElement("div", { style: {
minWidth: '30px',
height: '100%',
maxWidth: '90px',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap'
} }, item.tempName),
react_1.default.createElement("div", { className: "temp-tools ".concat((0, helper_1.isMobile)() ? 'is-mobile' : ''), onClick: function (e) { return e.stopPropagation(); } },
react_1.default.createElement(icons_2.EditOutlined, { onClick: function (e) { return editTemp(e, item.tempKey, item.tempName); } }),
react_1.default.createElement(antd_1.Popconfirm, { title: "\u786E\u5B9A\u8981\u5220\u9664\u5417?", onConfirm: function () { return delTemp(item.tempKey); }, okText: __('confirm'), cancelText: __('cancel') },
react_1.default.createElement(icons_2.DeleteOutlined, null))))); }))))),
react_1.default.createElement("div", { className: 'footer-btn-group-right', style: { display: 'flex' } },
react_1.default.createElement("div", null,
react_1.default.createElement(antd_1.Input, { style: { width: 82, marginRight: 10 }, value: "\u53F3\u952E\u7C98\u8D34", onPaste: function (e) {
var pastedText = e.clipboardData.getData('text').trim();
copyFromShell(pastedText);
} })),
react_1.default.createElement("div", { style: { marginRight: 10 } },
react_1.default.createElement(antd_1.Button, { onClick: reset }, __('resetSettings'))),
react_1.default.createElement("div", null,
react_1.default.createElement(antd_1.Button, { type: "primary", size: 'middle', onClick: onConfirm }, __('confirm')))));
};
var renderContent = function () {
return (react_1.default.createElement(react_1.default.Fragment, null,
renderHeader(),
react_1.default.createElement("div", { className: cx('ColumnToggler-modal-body'), ref: dialogRef },
react_1.default.createElement("div", { className: cx('ColumnToggler-modal-body-right'), ref: dragRef },
(0, helper_1.isMobile)() ? react_1.default.createElement("div", { className: 'field-search' },
react_1.default.createElement(InputBox_1.default, { value: searchValue, className: 'input-box', onChange: setSearchValue, placeholder: '请输入关键字', clearable: false }, searchValue !== '' ? (react_1.default.createElement("a", { onClick: function () { setSearchValue(''); } },
react_1.default.createElement(icons_1.Icon, { icon: "close", className: "icon" }))) : (react_1.default.createElement(icons_1.Icon, { icon: "search", className: "icon" })))) : react_1.default.createElement("div", { className: 'tool-header-box' },
react_1.default.createElement("div", { className: 'btns' },
react_1.default.createElement("div", { style: { marginRight: '24px', fontWeight: '500' } }, __('Table.columnsToggler.colName')),
react_1.default.createElement(Button_1.default, { size: "md", level: "link", onClick: function () { return handleUpdateAll(1); } }, __('Table.columnsToggler.selectAll')),
react_1.default.createElement(Button_1.default, { size: "md", level: "link", onClick: function () { return handleUpdateAll(0); } }, __('Table.columnsToggler.Unselect')),
react_1.default.createElement(Button_1.default, { size: "md", level: "link", onClick: function () { return handleUpdateAll(2); } }, __('Table.columnsToggler.selectReverse'))),
react_1.default.createElement("div", { className: 'field-search' },
react_1.default.createElement(antd_1.Input, { onChange: function (e) { return setSearchValue(e.target.value); }, placeholder: __('Table.columnsToggler.searchPlaceholder'), style: { width: '130px' }, allowClear: true }),
react_1.default.createElement("div", { className: 'field-toolbars-title' },
react_1.default.createElement("div", { style: { marginRight: '16px' } }, __('Table.columnsToggler.colShow')),
react_1.default.createElement("div", { style: { marginRight: '16px' } }, __('Table.columnsToggler.colFixed')),
react_1.default.createElement("div", { style: { marginRight: '16px' } }, __('Table.columnsToggler.clickToTop')),
react_1.default.createElement("div", null, __('Table.columnsToggler.clickToBot'))))),
react_1.default.createElement("ul", { className: cx('ColumnToggler-modal-content'), style: { overflowX: 'hidden' }, ref: innerRef }, sortColumns.map(function (column, index) {
var _a;
return (react_1.default.createElement("li", { className: cx('ColumnToggler-menuItem', {
'display-field-active': (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name) === column.name
}) +
"".concat(column.fixed ? ' fixed-item' : ' normal-item'), key: column.name,
//canSet为false不能设置显隐和排序
style: {
display: ((_a = column === null || column === void 0 ? void 0 : column.pristine) === null || _a === void 0 ? void 0 : _a.canSet) === false ? 'none' : 'block'
} },
react_1.default.createElement("div", { style: {
display: 'flex',
alignItems: 'center',
height: '90%'
} },
react_1.default.createElement("a", { className: cx('ColumnToggler-menuItem-dragBar') },
react_1.default.createElement(icons_1.Icon, { icon: "drag-bar", className: cx('icon') })),
react_1.default.createElement("span", { className: "ellipsis menuItem-col", style: { display: 'inline-block', flex: 1 }, onClick: function () { var _a; return updateToggledColumn(column, !!((_a = column.pristine) === null || _a === void 0 ? void 0 : _a.hidden)); } }, (0, commonTableFunction_1.getColumnShowLabel)(column)),
renderToolbar(column, index))));
})))),
(0, helper_1.isMobile)() && react_1.default.createElement("footer", { className: cx('ColumnToggler-modal-footer') },
react_1.default.createElement("div", { className: 'footer-btn-group-left' },
tempList.length > 0 && react_1.default.createElement("div", null,
react_1.default.createElement(Button_1.default, { size: 'md', onClick: function () { return setSelectTmpShow(true); } }, __('selectTemplate'))),
react_1.default.createElement("div", null,
react_1.default.createElement(Button_1.default, { size: 'md', onClick: saveTemplate }, __('saveSettings')))),
react_1.default.createElement("div", { className: 'footer-btn-group-right', style: { display: 'flex' } },
react_1.default.createElement("div", null,
react_1.default.createElement(Button_1.default, { level: "primary", size: 'md', onClick: onConfirm }, __('confirm')))))));
};
var renderSelectFooter = function () {
var tgt = tempList.find(function (item) { return item.tempKey === tmpSelected; });
return react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(Button_1.default, { disabled: !tmpSelected, onClick: function (e) { return tgt && editTemp(e, tgt.tempKey, tgt.tempName); }, size: "md" }, __('rename')),
react_1.default.createElement(Button_1.default, { disabled: !tmpSelected, onClick: function () { return setSelectTmpConfirmShow(true); }, size: "md" }, __('Select.clear')),
react_1.default.createElement(Button_1.default, { disabled: !tmpSelected, onClick: function () {
onSelect(tmpSelected);
setSelectTmpShow(false);
}, size: 'md', level: 'primary' }, __('confirm')));
};
return (react_1.default.createElement("div", { className: cx('ColumnToggler', {
'ColumnToggler-block': block,
'ColumnToggler--alignRight': align === 'right',
'is-opened': isOpened,
'is-actived': isActived,
'is-mobile': (0, helper_1.isMobile)()
}, className), ref: domRef },
!(0, helper_1.isMobile)() ? (draggable ? (button) : (react_1.default.createElement(TooltipWrapper_1.default, { placement: placement, tooltip: disabled ? disabledTip : tooltip, container: tooltipContainer, trigger: tooltipTrigger, rootClose: tooltipRootClose }, button))) : null,
!(0, helper_1.isMobile)() && isOpened && !draggable && renderOuter(),
(0, helper_1.isMobile)() ? renderContent() :
isOpened ? (react_1.default.createElement(antd_1.Modal, { title: react_1.default.createElement("div", { className: 'dialog-title' },
react_1.default.createElement("div", { className: 'disabled-move-title' }, __('Table.columnsToggler.ColSetting'))), zIndex: 11, bodyStyle: { overflowY: 'auto' }, maskClosable: false, visible: isOpened, onCancel: function () { return setIsOpend(false); }, footer: renderFooter(), className: "".concat(cx('ColumnToggler-modal Modal-advanced '), " common-modal-component"), getContainer: modalContainer || target.current, width: 620 }, renderContent())) : null,
selectTmpShow && react_1.default.createElement(antd_1.Drawer, { placement: 'bottom', mask: true, className: "columns-toggler-drawer columns-toggler-tmp-sel ".concat(tools_1.tools.isIOS && !shell_1.Shell.hasShell() ? 'ios-device' : ''), zIndex: 1012, width: '100vw', height: tempList.length * 45 + 130 + (tools_1.tools.isIOS ? 32 : 0) + 'px', title: __('selectTemplate'), visible: selectTmpShow, onClose: function () { return setSelectTmpShow(false); }, getContainer: props.parentDom, footer: renderSelectFooter() },
react_1.default.createElement("div", { className: 'tpm-sel-container' }, tempList.map(function (item) { return react_1.default.createElement("div", { className: "tem-sel-item ".concat(item.tempKey === tmpSelected ? 'active-tmp' : ''), key: item.tempKey, onClick: function () { return setTmpSelected(item.tempKey); } },
react_1.default.createElement("div", null, item.tempName),
tmpSelected === item.tempKey && react_1.default.createElement("div", null,
react_1.default.createElement(icons_2.CheckOutlined, null))); }))),
selectTmpConfirmShow && react_1.default.createElement(antd_1.Drawer, { placement: 'bottom', mask: true, className: "columns-toggler-drawer ".concat(tools_1.tools.isIOS && !shell_1.Shell.hasShell() ? 'ios-device' : ''), zIndex: 1012, width: '100vw', height: tools_1.tools.isIOS ? '160px' : '128px', title: null, closable: false, visible: selectTmpConfirmShow, onClose: function () { return setSelectTmpConfirmShow(false); }, getContainer: props.parentDom },
react_1.default.createElement("div", { className: 'tpm-sel-confirm-container' },
react_1.default.createElement(antd_1.Button, { onClick: function () { return delTemp(tmpSelected); }, size: 'large', block: true, type: 'text' }, __('confirm')),
react_1.default.createElement(antd_1.Button, { onClick: function () { return setSelectTmpConfirmShow(false); }, size: 'large', block: true, type: 'text' }, __('cancel')))),
tempVisible && react_1.default.createElement(antd_1.Modal, { visible: tempVisible, onOk: onOk, centered: (0, helper_1.isMobile)(), style: { borderRadius: '8px' }, width: (0, helper_1.isMobile)() ? 300 : 520, afterClose: tempModalClose, zIndex: 1012, title: __('Table.columnsToggler.editTemplateName'), getContainer: (0, helper_1.isMobile)() ? props.parentDom : modalContainer, className: "".concat((0, helper_1.isMobile)() ? "tmp-setting-modal" : 'tmp-modal'), onCancel: function () {
tempModalClose();
setTempVisible(false);
}, okText: __('confirm'), cancelText: __('cancel'), destroyOnClose: true },
react_1.default.createElement(antd_1.Form, { form: form },
react_1.default.createElement(antd_1.Form.Item, { label: __('Table.columnsToggler.setName'), name: "tempName", rules: [
{ required: true, message: __('Table.columnsToggler.templateNameRequired') },
function () { return ({
validator: function (_, value) {
if (tempList.some(function (item) { return item.tempName === value; })) {
return Promise.reject(new Error(__('Table.columnsToggler.templateNameRepeat')));
}
return Promise.resolve();
}
}); }
] },
react_1.default.createElement(antd_1.Input, null))))));
};
exports.default = ColumnToggler;
//# sourceMappingURL=./renderers/Table/ColumnToggler.js.map