fastlion-amis
Version:
一种MIS页面生成工具
389 lines (388 loc) • 27 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var sortablejs_1 = (0, tslib_1.__importDefault)(require("sortablejs"));
var cloneDeep_1 = (0, tslib_1.__importDefault)(require("lodash/cloneDeep"));
var Overlay_1 = (0, tslib_1.__importDefault)(require("../../components/Overlay"));
var PopOver_1 = (0, tslib_1.__importDefault)(require("../../components/PopOver"));
var Modal_1 = (0, tslib_1.__importDefault)(require("../../components/Modal"));
var Button_1 = (0, tslib_1.__importDefault)(require("../../components/Button"));
var Checkbox_1 = (0, tslib_1.__importDefault)(require("../../components/Checkbox"));
var TooltipWrapper_1 = (0, 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 RootClose_1 = require("../../utils/RootClose");
var icons_2 = require("@ant-design/icons");
var api_1 = require("../../utils/api");
var antd_1 = require("antd");
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, btnDisabled = props.btnDisabled, $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, overlay = props.overlay, defaultIsOpened = props.defaultIsOpened, columns = props.columns, saveColApi = props.saveColApi, env = props.env, hideExpandIco = props.hideExpandIco, render = props.render, __ = props.translate;
var _a = (0, react_1.useState)(defaultIsOpened), isOpened = _a[0], setIsOpend = _a[1];
var _b = (0, react_1.useState)([]), tempColumns = _b[0], setTempColumns = _b[1];
var _c = (0, react_1.useState)([]), sortColumns = _c[0], setSortColumns = _c[1];
var _d = (0, react_1.useState)([]), tempList = _d[0], setTempList = _d[1];
var _e = (0, react_1.useState)(false), tempVisible = _e[0], setTempVisible = _e[1];
var _f = (0, react_1.useState)(''), selectedTemp = _f[0], setSelectedTemp = _f[1];
var _g = (0, react_1.useState)(''), editingTemp = _g[0], setEditingTemp = _g[1];
var form = antd_1.Form.useForm()[0];
var target = (0, react_1.useRef)();
var sortable = (0, react_1.useRef)();
var dialogRef = (0, react_1.useRef)(undefined);
var sortColumnsRef = (0, react_1.useRef)([]);
var domRef = function (ref) {
target.current = ref;
};
var selectAll = (0, react_1.useMemo)(function () {
return tempColumns.filter(function (item) { return item.toggled; }).length === tempColumns.length;
}, [tempColumns]);
var initColumns = function (cols) {
var colList = (0, cloneDeep_1.default)(cols).filter(function (item) { return item.type !== 'operation'; });
setTempColumns(colList);
setSortColumns(colList);
};
(0, react_1.useEffect)(function () {
if (isOpened) {
initColumns(columns);
getTempList();
}
}, [columns, isOpened]);
(0, react_1.useEffect)(function () {
sortColumnsRef.current = sortColumns;
}, [sortColumns]);
(0, react_1.useEffect)(function () {
initDragging();
return function () {
destroyDragging();
target.current = undefined;
};
}, []);
//获取模板列表并保存
var getTempList = function () { return (0, tslib_1.__awaiter)(void 0, void 0, void 0, function () {
var api, data;
return (0, 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;
setTempList((data === null || data === void 0 ? void 0 : data.filter(function (item) { return item.tempKey; })) || []);
return [2 /*return*/];
}
});
}); };
var destroyDragging = function () {
sortable.current && sortable.current.destroy();
};
// @autobind
var dragRef = function (ref) {
if (draggable && ref) {
initDragging();
}
};
var canConfirmFetch = false;
var toggle = function (e) {
e.preventDefault();
setIsOpend(!isOpened);
};
var updateToggledColumn = function (column, index, value, shift) {
var newtempColumns = tempColumns.concat();
var targetColumn = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, column), {
// Jay
pristine: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, column === null || column === void 0 ? void 0 : column.pristine), { hidden: !value }), toggled: value });
newtempColumns.splice(index, 1, targetColumn);
canConfirmFetch = true;
setTempColumns(newtempColumns);
var newSortColumns = (0, tslib_1.__spreadArray)([], sortColumns, true);
var target = newSortColumns.findIndex(function (item) { return item.name === column.name; });
if (value) {
newSortColumns.splice(target, 1);
newSortColumns.push(targetColumn);
}
else {
newSortColumns.splice(target, 1, targetColumn);
}
setSortColumns(newSortColumns);
};
var button = (react_1.default.createElement("button", { onClick: toggle, disabled: disabled, className: cx('Button', btnClassName, typeof level === 'undefined'
? 'Button--default'
: level
? "Button--" + level
: '', {
'Button--block': block,
'Button--primary': primary,
'Button--iconOnly': iconOnly
}, size ? "Button--" + size : '') },
icon ? (typeof icon === 'string' ? (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 = (0, 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 () {
setIsOpend(false);
setTempColumns(columns);
setSelectedTemp('');
};
// @autobind
var onConfirm = function () {
var onColumnToggle = props.onColumnToggle;
var saveCols = productColumnInfo();
var targetCol = columns.find(function (item) { return item.type === 'operation'; });
var targetTemp = selectedTemp ? tempList.find(function (item) { return item.tempKey === selectedTemp; }) : undefined;
if (targetCol) {
onColumnToggle && onColumnToggle((0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], sortColumns, true), [targetCol], false), saveCols, false, targetTemp);
}
else {
onColumnToggle && onColumnToggle((0, tslib_1.__spreadArray)([], sortColumns, true), saveCols, false, targetTemp);
}
setIsOpend(false);
};
//计算出columnInfo数据
var productColumnInfo = function () {
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;
};
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("." + ns + "ColumnToggler-modal-body-right ." + ns + "ColumnToggler-modal-content");
if (el) {
sortable.current = new sortablejs_1.default(el, {
group: "." + ns + "ColumnToggler-modal-body-right",
animation: 150,
// 提供class可拖动
handle: "." + ns + "ColumnToggler-menuItem",
ghostClass: ns + "ColumnToggler-menuItem--dragging",
onEnd: function (e) {
if (e.newIndex === e.oldIndex) {
return;
}
// const parent = e.to as HTMLElement;
// if (e.oldIndex < parent.childNodes.length - 1) {
// parent.insertBefore(e.item, parent.childNodes[e.oldIndex]);
// } else {
// parent.appendChild(e.item);
// }
canConfirmFetch = true;
swapColumnPosition(e.oldIndex, e.newIndex);
}
});
}
};
var sortDel = function (column) {
var targetIndex = tempColumns.findIndex(function (item) { return item.name === column.name; });
updateToggledColumn(column, targetIndex, false);
};
var sortUp = function (index, column) {
if (index === 0)
return;
swapColumnPosition(index, index - 1);
};
var sortFix = function (index, column) {
var newSortColumns = (0, tslib_1.__spreadArray)([], sortColumns, true);
var targetColumn = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, column), { fixed: (column === null || column === void 0 ? void 0 : column.fixed) ? '' : 'left' });
newSortColumns.splice(index, 1, targetColumn);
setSortColumns(newSortColumns);
};
var handleSelectAll = function () {
var newtempColumns = tempColumns.map(function (item) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, item), { pristine: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, item === null || item === void 0 ? void 0 : item.pristine), { hidden: selectAll ? true : false }), toggled: selectAll ? false : true })); });
setTempColumns(newtempColumns);
if (selectAll) {
setSortColumns(newtempColumns);
}
else {
var unSelList = tempColumns.filter(function (item) { return !item.toggled; }).map(function (item) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, item), { pristine: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, item === null || item === void 0 ? void 0 : item.pristine), { hidden: false }), toggled: true })); });
var newSortColumns_1 = (0, tslib_1.__spreadArray)([], sortColumns, true);
unSelList.map(function (item) {
var targetIndex = newSortColumns_1.findIndex(function (sortItem) { return sortItem.name === item.name; });
targetIndex !== -1 && newSortColumns_1.splice(targetIndex, 1);
});
setSortColumns(newSortColumns_1.concat(unSelList));
}
};
var saveTemplate = function () {
setTempVisible(true);
};
var onOk = function () { return (0, tslib_1.__awaiter)(void 0, void 0, void 0, function () {
var values, data_1, msg, data_2, api, msg;
return (0, tslib_1.__generator)(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, form.validateFields()];
case 1:
values = _a.sent();
if (!editingTemp) return [3 /*break*/, 3];
data_1 = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, values), { tempKey: editingTemp });
return [4 /*yield*/, env.fetcher({ url: "/api/v1/personal/setting/tempName/" + props.crudName, method: 'post' }, data_1)];
case 2:
msg = (_a.sent()).msg;
antd_1.message.info(msg);
return [3 /*break*/, 5];
case 3:
data_2 = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, values), { tempKey: (0, helper_1.uuid)(), columnInfo: productColumnInfo() });
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 = (_a.sent()).msg;
antd_1.message.info(msg);
_a.label = 5;
case 5: return [4 /*yield*/, getTempList()];
case 6:
_a.sent();
setTempVisible(false);
return [2 /*return*/];
}
});
}); };
var onSelect = function (value) {
var target = tempList.find(function (item) { return item.tempKey === value; });
var newtempColumns = Object.entries((target === null || target === void 0 ? void 0 : target.columnInfo) || {}).map(function (_a) {
var key = _a[0], v = _a[1];
var col = columns.find(function (item) { return item.name === key; });
return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, col), { index: v.index, toggled: !(v === null || v === void 0 ? void 0 : v.hidden), fixed: v.fixed, pristine: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, col === null || col === void 0 ? void 0 : col.pristine), { hidden: !!(v === null || v === void 0 ? void 0 : v.hidden) }) });
}).sort(function (a, b) { return a.index - b.index; });
setSelectedTemp(value);
setTempColumns(newtempColumns);
setSortColumns(newtempColumns);
};
var delTemp = function (tempKey) { return (0, tslib_1.__awaiter)(void 0, void 0, void 0, function () {
var api, msg;
return (0, tslib_1.__generator)(this, function (_a) {
switch (_a.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:
msg = (_a.sent()).msg;
antd_1.message.info(msg);
return [4 /*yield*/, getTempList()];
case 2:
_a.sent();
return [2 /*return*/];
}
});
}); };
var editTemp = function (e, tempKey, tempName) {
e.stopPropagation();
form.setFieldsValue({ tempName: tempName });
setTempVisible(true);
setEditingTemp(tempKey);
};
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 (0, tslib_1.__assign)((0, tslib_1.__assign)({}, item), { toggled: true, index: index, pristine: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, item === null || item === void 0 ? void 0 : item.pristine), { hidden: false }) });
}).sort(function (a, b) { return a.index - b.index; });
setTempColumns(colList);
setSortColumns(colList);
};
var tempModalClose = function () {
form.resetFields();
setEditingTemp('');
};
return (react_1.default.createElement("div", { className: cx('ColumnToggler', {
'ColumnToggler-block': block,
'ColumnToggler--alignRight': align === 'right',
'is-opened': isOpened,
'is-actived': isActived
}, className), ref: domRef },
draggable ? (button) : (react_1.default.createElement(TooltipWrapper_1.default, { placement: placement, tooltip: disabled ? disabledTip : tooltip, container: tooltipContainer, trigger: tooltipTrigger, rootClose: tooltipRootClose }, button)),
isOpened && !draggable && renderOuter(),
react_1.default.createElement(antd_1.Modal, { visible: tempVisible, onOk: onOk, afterClose: tempModalClose, title: "\u7F16\u8F91\u914D\u7F6E\u540D\u79F0", onCancel: function () { return setTempVisible(false); }, okText: __('confirm'), cancelText: __('cancel') },
react_1.default.createElement(antd_1.Form, { form: form },
react_1.default.createElement(antd_1.Form.Item, { label: "\u914D\u7F6E\u540D\u79F0", name: "tempName", rules: [{ required: true }] },
react_1.default.createElement(antd_1.Input, null)))),
react_1.default.createElement(Modal_1.default, { size: "lg", closeOnEsc: true, onHide: close, show: isOpened && draggable, contentClassName: cx('ColumnToggler-modal'), container: modalContainer || target.current, overlay: typeof overlay === 'boolean' ? overlay : false },
react_1.default.createElement("header", { className: cx('ColumnToggler-modal-header') },
react_1.default.createElement("div", { style: { width: 160, padding: '6px 0' } },
react_1.default.createElement(antd_1.Select, { getPopupContainer: env.getModalContainer, style: { width: '100%' }, onSelect: onSelect, dropdownClassName: 'temp-selector-drop' }, 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', 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); },
// onCancel={cancel}
okText: __('confirm'), cancelText: __('cancel') },
react_1.default.createElement(icons_2.DeleteOutlined, null))))); }))),
react_1.default.createElement(Button_1.default, { size: "xs", level: "link", onClick: saveTemplate }, "\u4FDD\u5B58\u4E3A\u5E38\u7528\u914D\u7F6E")),
react_1.default.createElement("div", { className: cx('ColumnToggler-modal-body'), ref: dialogRef },
react_1.default.createElement("div", { className: cx('ColumnToggler-modal-body-left') },
react_1.default.createElement("div", { style: { height: '32px', lineHeight: '32px' } },
react_1.default.createElement(Button_1.default, { size: "xs", level: "link", onClick: handleSelectAll }, selectAll ? '取消全选' : '全选')),
react_1.default.createElement("ul", { className: cx('ColumnToggler-modal-content') }, tempColumns.map(function (column, index) {
var _a;
return column.type !== 'operation' ? (react_1.default.createElement(TooltipWrapper_1.default, { tooltipClassName: cx('ColumnToggler-tooltip'), placement: "top", tooltip: column.label || '', trigger: 'hover', key: column.index },
react_1.default.createElement("li", { className: cx('ColumnToggler-menuItem'), key: column.index,
// canSet为false不能设置显隐和排序
style: { display: (column === null || column === void 0 ? void 0 : column.pristine.canSet) === false ? 'none' : 'block' } },
react_1.default.createElement(Checkbox_1.default, { size: "sm", classPrefix: ns, checked: ((_a = column === null || column === void 0 ? void 0 : column.pristine) === null || _a === void 0 ? void 0 : _a.hidden) ? false : column.toggled, disabled: (column === null || column === void 0 ? void 0 : column.toggable) == false ? true : false, onChange: function (e) { return updateToggledColumn(column, index, e); } }, column.label ? render('tpl', column.label) : null)))) : null;
}))),
react_1.default.createElement("div", { className: cx('ColumnToggler-modal-body-right'), ref: dragRef },
react_1.default.createElement("div", { style: { height: '32px', fontSize: '12px', lineHeight: '32px', paddingLeft: '12px', color: '#a6abb4' } }, "\u62D6\u52A8\u6216\u70B9\u51FB\u56FE\u6807\u8FDB\u884C\u8BBE\u7F6E"),
react_1.default.createElement("ul", { className: cx('ColumnToggler-modal-content'), style: { overflowX: 'hidden' } }, sortColumns.map(function (column, index) {
var _a, _b;
return (
// <TooltipWrapper
// tooltipClassName={cx('ColumnToggler-tooltip')}
// placement="top"
// tooltip={column.label || ''}
// trigger={'hover'}
// key={column.index}
// >
react_1.default.createElement("li", { className: cx('ColumnToggler-menuItem') + ("" + (column.fixed ? ' fixed-item' : ' normal-item')), key: column.index,
//canSet为false不能设置显隐和排序
style: { display: (((_a = column === null || column === void 0 ? void 0 : column.pristine) === null || _a === void 0 ? void 0 : _a.hidden) || !column.toggled || ((_b = column === null || column === void 0 ? void 0 : column.pristine) === null || _b === void 0 ? void 0 : _b.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", { style: { flex: '0 0 80px' } }, column.label ? render('tpl', column.label) : null),
react_1.default.createElement("div", { style: { display: 'flex', justifyContent: 'flex-start', alignItems: 'center', marginLeft: 'auto' } },
react_1.default.createElement(icons_2.CloseCircleOutlined, { title: "\u9690\u85CF", className: 'operation-icons', onClick: function () { return sortDel(column); }, style: { color: '#A5A5A5', marginLeft: 8 } }),
index !== 0 && react_1.default.createElement(icons_2.VerticalAlignTopOutlined, { title: "\u4E0A\u79FB", className: 'operation-icons', onClick: function () { return sortUp(index, column); }, style: { color: '#A5A5A5', marginLeft: 8 } }),
react_1.default.createElement(icons_2.PushpinOutlined, { title: "\u56FA\u5B9A", className: column.fixed ? '' : 'operation-icons', onClick: function () { return sortFix(index, column); }, style: { color: '#A5A5A5', marginLeft: 8, transform: column.fixed ? 'rotate(-45deg)' : 'none' } }))))
// </TooltipWrapper>
);
})))),
react_1.default.createElement("footer", { className: cx('ColumnToggler-modal-footer') },
react_1.default.createElement("div", null,
react_1.default.createElement("div", null,
react_1.default.createElement(Button_1.default, { size: "sm", onClick: reset }, __('resetSettings')))),
react_1.default.createElement("div", { style: { display: 'flex' } },
react_1.default.createElement("div", { style: { marginRight: 10 } },
react_1.default.createElement(Button_1.default, { size: "sm", onClick: close }, __('cancel'))),
react_1.default.createElement("div", null,
react_1.default.createElement(Button_1.default, { level: "primary", size: "sm", onClick: onConfirm }, __('confirm'))))))));
};
exports.default = ColumnToggler;
//# sourceMappingURL=./renderers/FieldTableHorizontal/ColumnToggler.js.map