fastlion-amis
Version:
一种MIS页面生成工具
200 lines (199 loc) • 19.6 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SecondFilterDrawer = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var MinusCircleOutlined_1 = tslib_1.__importDefault(require("@ant-design/icons/lib/icons/MinusCircleOutlined"));
var antd_1 = require("antd");
var types_1 = require("./types");
var helper_1 = require("../../../utils/helper");
var zh_CN_1 = tslib_1.__importDefault(require("antd/lib/date-picker/locale/zh_CN"));
var TextareaPop_1 = tslib_1.__importDefault(require("../../common/TextareaPop"));
require("./index.scss");
var lodash_1 = require("lodash");
var SecondFilterDrawer = function (props) {
var visible = props.visible, showColumnsFilter = props.showColumnsFilter, columns = props.columns, filterMap = props.filterMap, _a = props.crudName, crudName = _a === void 0 ? '' : _a, onClose = props.onClose, onConfirm = props.onConfirm, onCheckedChange = props.onCheckedChange, getContainer = props.getContainer, classPrefix = props.classPrefix, classnames = props.classnames, translate = props.translate;
var filterColumns = (0, lodash_1.flatMap)(columns !== null && columns !== void 0 ? columns : [], function (column) { return column.name && column.type != '__checkme' && column.type != 'operation' && column.type != '__pseudoColumn' ? column : []; });
var _b = (0, react_1.useState)(true), caseSensitive = _b[0], setCaseSensitive = _b[1];
var filtersRef = (0, react_1.useRef)([]);
var ref = (0, react_1.useRef)(null);
(0, react_1.useEffect)(function () {
var _a, _b;
if (filterMap.size > 0) {
(_a = ref.current) === null || _a === void 0 ? void 0 : _a.setFilters((0, lodash_1.flatMap)((_b = Array.from(filterMap.values())) !== null && _b !== void 0 ? _b : [], function (item) { return item; }));
}
}, [filterMap]);
var changeToMap = function (filters) {
var rValue = (0, lodash_1.flatMap)(filters !== null && filters !== void 0 ? filters : [], function (filter) {
var _a, _b;
var condition = filter.condition, value1 = filter.value1, value2 = filter.value2, relation = filter.relation, key = filter.key, fieldName = filter.fieldName, rest = tslib_1.__rest(filter, ["condition", "value1", "value2", "relation", "key", "fieldName"]);
var format = (_b = (_a = columns.find(function (column) { return column.name == fieldName; })) === null || _a === void 0 ? void 0 : _a.format) !== null && _b !== void 0 ? _b : 'YYYY-MM-DD HH:mm:ss';
if (condition != undefined) {
if (condition == types_1.Condition.Null || condition == types_1.Condition.NotNull) {
return tslib_1.__assign(tslib_1.__assign({}, rest), { fieldName: fieldName, key: key, condition: condition, value1: Array.isArray(value1) ? value1.join(',') : typeof value1 == 'object' ? value1.format(format) : value1, value2: typeof value2 == 'object' ? value2.format(format) : value2, relation: relation });
}
else if (condition == types_1.Condition.Between) {
if (value1 != undefined && value2 != undefined) {
return tslib_1.__assign(tslib_1.__assign({}, rest), { fieldName: fieldName, key: key, condition: condition, value1: Array.isArray(value1) ? value1.join(',') : typeof value1 == 'object' ? value1.format(format) : value1, value2: typeof value2 == 'object' ? value2.format(format) : value2, relation: relation });
}
}
else {
if (value1 != undefined) {
return tslib_1.__assign(tslib_1.__assign({}, rest), { fieldName: fieldName, key: key, condition: condition, value1: Array.isArray(value1) ? value1.join(',') : typeof value1 == 'object' ? value1.format(format) : value1, value2: typeof value2 == 'object' ? value2.format(format) : value2, value3: (0, types_1.dealInputValue)(value1, filterColumns), relation: relation });
}
}
}
return [];
});
var filedNames = rValue.reduce(function (pre, cur) {
if (!pre.includes(cur.fieldName) && cur.fieldName != '') {
pre.push(cur.fieldName);
}
return pre;
}, []);
var map = new Map();
var _loop_1 = function (fieldName) {
var values = rValue.filter(function (filter) { return filter.fieldName == fieldName; });
map.set(fieldName, values);
};
for (var _i = 0, filedNames_1 = filedNames; _i < filedNames_1.length; _i++) {
var fieldName = filedNames_1[_i];
_loop_1(fieldName);
}
return map;
};
var handleSave = function () {
var filter = changeToMap(filtersRef.current);
var value = JSON.stringify(Object.fromEntries(filter));
if (crudName) {
localStorage.setItem(crudName, value);
antd_1.message.success('保存成功');
}
else {
antd_1.message.error('保存失败');
}
};
var handleReset = function () {
var _a, _b;
var filterMap = new Map();
if (crudName) {
var value = localStorage.getItem(crudName);
if (value) {
var obj_1 = JSON.parse(value);
Object.keys(obj_1).forEach(function (key) { return filterMap.set(key, obj_1[key]); });
}
(_a = ref.current) === null || _a === void 0 ? void 0 : _a.setFilters((0, lodash_1.flatMap)((_b = Array.from(filterMap.values())) !== null && _b !== void 0 ? _b : [], function (item) { return item; }));
}
};
return (react_1.default.createElement(antd_1.Drawer, { visible: visible, onClose: onClose, keyboard: true, className: "second-fliter-drawer-".concat(crudName, " second-filter-drawer"), width: 800, title: '\u6570\u636E\u8FC7\u6EE4', destroyOnClose: false, style: { left: 'auto' }, footerStyle: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, getContainer: getContainer, footer: (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(antd_1.Checkbox, { checked: caseSensitive, onChange: function (e) { return setCaseSensitive(e.target.checked); } }, "\u533A\u5206\u5927\u5C0F\u5199"),
react_1.default.createElement(antd_1.Space, null,
react_1.default.createElement(antd_1.Button, { style: { borderRadius: 4 }, onClick: function () { return handleSave(); } }, "\u4FDD\u5B58\u9ED8\u8BA4"),
react_1.default.createElement(antd_1.Button, { disabled: !showColumnsFilter, style: { borderRadius: 4 }, onClick: function () { return handleReset(); } }, "\u91CD\u7F6E"),
react_1.default.createElement(antd_1.Button, { style: { borderRadius: 4 }, type: 'primary', onClick: function () { onConfirm(changeToMap(filtersRef.current), caseSensitive); } }, "\u8FC7\u6EE4")))) },
react_1.default.createElement(SecondFilterWithRef, { showColumnsFilter: showColumnsFilter, filterColumns: filterColumns, crudName: crudName, filterMap: filterMap, onEnter: function () { return onConfirm(changeToMap(filtersRef.current), caseSensitive); }, onChange: function (checked) { return onCheckedChange(checked, changeToMap(filtersRef.current), caseSensitive); }, onFilterChange: function (filters) { return filtersRef.current = filters; }, ref: ref, classPrefix: classPrefix, classnames: classnames, translate: translate })));
};
exports.SecondFilterDrawer = SecondFilterDrawer;
var SecondFilter = function (props, ref) {
var _a;
var showColumnsFilter = props.showColumnsFilter, filterMap = props.filterMap, crudName = props.crudName, filterColumns = props.filterColumns, onChange = props.onChange, onEnter = props.onEnter, onFilterChange = props.onFilterChange, classPrefix = props.classPrefix, classnames = props.classnames, translate = props.translate;
var _b = (0, react_1.useState)((0, lodash_1.flatMap)((_a = Array.from(filterMap.values())) !== null && _a !== void 0 ? _a : [], function (item) { return item; })), filters = _b[0], setFilters = _b[1];
var inputRef = (0, react_1.useRef)(null);
(0, react_1.useImperativeHandle)(ref, function () { return ({ setFilters: setFilters }); });
(0, react_1.useEffect)(function () {
var _a;
(_a = document.getElementsByClassName("second-fliter-drawer-".concat(crudName))[0]) === null || _a === void 0 ? void 0 : _a.addEventListener('keydown', handleKeyDown);
return function () {
var _a;
(_a = document.getElementsByClassName("second-fliter-drawer-".concat(crudName))[0]) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', handleKeyDown);
};
}, []);
(0, react_1.useEffect)(function () {
onFilterChange(filters);
}, [filters]);
var handleKeyDown = function (e) {
if (e.key == 'Enter' && showColumnsFilter) {
onEnter();
}
};
var handleAdd = function () {
var _a, _b, _c, _d, _e, _f;
var type = (_a = filterColumns[0]) === null || _a === void 0 ? void 0 : _a.type;
var filterType = (_b = (0, types_1.getColumnsFilterType)(type !== null && type !== void 0 ? type : '')) !== null && _b !== void 0 ? _b : 'text';
var filter = {
key: (0, helper_1.guid)(),
condition: (0, types_1.getCondtion)(filterType),
filterType: filterType,
fieldName: (_d = (_c = filterColumns[0]) === null || _c === void 0 ? void 0 : _c.name) !== null && _d !== void 0 ? _d : '',
label: (_f = (_e = filterColumns[0]) === null || _e === void 0 ? void 0 : _e.label) !== null && _f !== void 0 ? _f : '',
relation: 'and'
};
setFilters(function (filters) { return filters.concat(filter); });
};
var handleChange = function (value) {
setFilters(function (filters) { return filters.map(function (filter) {
var _a, _b;
if (filter.key === value.key) {
// 修改的是字段名,重置字段类型和值
if (value.hasOwnProperty('fieldName')) {
var type = (_a = filterColumns.find(function (column) { return column.name == value.fieldName; })) === null || _a === void 0 ? void 0 : _a.type;
var _filterType = (_b = (0, types_1.getColumnsFilterType)(type !== null && type !== void 0 ? type : '')) !== null && _b !== void 0 ? _b : 'text';
var condition = (0, types_1.getCondtion)(_filterType);
return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, filter), value), { filterType: _filterType, condition: condition, value1: undefined, value2: undefined });
}
return tslib_1.__assign(tslib_1.__assign({}, filter), value);
}
return filter;
}); });
};
return (react_1.default.createElement("div", { onContextMenu: function (e) { return e.preventDefault(); }, style: { display: 'flex', flexDirection: 'column', alignItems: 'flex-start' } },
react_1.default.createElement("span", { style: { fontWeight: 'bold' } }, "\u8FC7\u6EE4\u72B6\u6001"),
react_1.default.createElement(antd_1.Switch, { style: { marginTop: 4 }, checkedChildren: '\u5F00', unCheckedChildren: '\u5173', defaultChecked: showColumnsFilter, onChange: onChange }),
react_1.default.createElement("span", { style: { marginTop: 24, fontWeight: 'bold' } }, "\u8FC7\u6EE4\u6761\u4EF6\u89C4\u5219"),
react_1.default.createElement("div", null, filters.map(function (filter) {
var _a, _b, _c, _d;
var key = filter.key, fieldName = filter.fieldName, filterType = filter.filterType, condition = filter.condition, value1 = filter.value1, value2 = filter.value2, relation = filter.relation;
var map = (_b = (_a = filterColumns.find(function (column) { return column.name == fieldName; })) === null || _a === void 0 ? void 0 : _a.map) !== null && _b !== void 0 ? _b : {};
var format = (_d = (_c = filterColumns.find(function (column) { return column.name == fieldName; })) === null || _c === void 0 ? void 0 : _c.format) !== null && _d !== void 0 ? _d : 'YYYY-MM-DD HH:mm:ss';
var options = (0, types_1.getOptions)(filterType);
return (react_1.default.createElement(antd_1.Space, { key: key, size: 12, style: { marginTop: 8 } },
react_1.default.createElement(MinusCircleOutlined_1.default, { disabled: !showColumnsFilter, style: { fontSize: 16, color: '#d9d9d9' }, onClick: function () { return setFilters(function (filters) { return filters.filter(function (filter) { return filter.key != key; }); }); } }),
react_1.default.createElement(antd_1.Button, { disabled: !showColumnsFilter, type: 'primary', size: 'small', style: { border: 'none', borderRadius: 4, fontSize: 14, height: 25, backgroundColor: relation == 'or' ? '#5EA7F8' : '#FDA71E' }, onClick: function () { return handleChange({ key: key, relation: relation == 'and' ? 'or' : 'and' }); } }, relation == 'or' ? '或' : '且'),
react_1.default.createElement(antd_1.Select, { disabled: !showColumnsFilter, value: fieldName, style: { width: 200 }, onChange: function (value, opt) { return handleChange({ key: key, fieldName: value, label: opt.children }); } }, filterColumns.map(function (column) { return react_1.default.createElement(antd_1.Select.Option, { key: column.name, value: column.name }, column.label); })),
react_1.default.createElement(antd_1.Select, { disabled: !showColumnsFilter, value: condition, style: { width: 90 }, onChange: function (value) { return handleChange({ key: key, condition: value }); } }, options.map(function (option) { return react_1.default.createElement(antd_1.Select.Option, { key: option.value, value: option.value }, option.label); })),
filterType == 'select' ?
react_1.default.createElement(antd_1.Select, { disabled: !showColumnsFilter, style: { width: 180, display: condition == types_1.Condition.Null || condition == types_1.Condition.NotNull ? 'none' : undefined }, placeholder: translate('Select.placeholder'), value: typeof value1 == 'string' ? value1.split(',').filter(function (v) { return v != ''; }) : value1, onChange: function (value1) { return handleChange({ key: key, value1: value1 }); }, mode: 'multiple', maxTagCount: 'responsive' }, Object.keys(map).map(function (key) { return (react_1.default.createElement(antd_1.Select.Option, { key: key, value: key }, map[key])); }))
:
react_1.default.createElement(antd_1.Dropdown, { trigger: ['contextMenu'], overlayStyle: { display: condition == types_1.Condition.Between ? 'none' : undefined }, menu: {
items: filterColumns.map(function (column) { return ({
key: column.name,
label: column.label,
onClick: function () { return handleChange({ key: key, value1: "".concat(value1 !== null && value1 !== void 0 ? value1 : '', "[").concat(column.label, "]") }); }
}); })
}, dropdownRender: function (menu) { return (react_1.default.createElement("div", { style: {
backgroundColor: '#fff',
boxShadow: 'rgba(0, 0, 0, 0.08) 0px 6px 16px 0px, rgba(0, 0, 0, 0.12) 0px 3px 6px -4px, rgba(0, 0, 0, 0.05) 0px 9px 28px 8px',
maxHeight: 300, overflow: 'auto',
} }, menu)); } },
react_1.default.createElement(antd_1.Input, { ref: inputRef, autoFocus: true, disabled: !showColumnsFilter, className: "filter-options-input", type: 'text', style: { width: 180, display: condition == types_1.Condition.Null || condition == types_1.Condition.NotNull ? 'none' : undefined }, onDoubleClick: function () { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.select(); }, onChange: function (e) { return handleChange({ key: key, value1: e.target.value }); }, value: typeof value1 == 'object' ? Array.isArray(value1) ? value1.join(',') : value1.format(format) : value1, addonAfter: filterType == 'date' ? (
//@ts-ignore
react_1.default.createElement(antd_1.DatePicker, { className: 'filter-options-date', disabled: !showColumnsFilter, locale: zh_CN_1.default, format: format, showTime: true, dropdownAlign: { offset: [-155, 2] }, allowClear: false, onChange: function (date) { return date && handleChange({ key: key, value1: date }); }, style: { height: 30 } })) : (react_1.default.createElement(TextareaPop_1.default, { visible: false, values: value1, classPrefix: classPrefix, classnames: classnames, translate: translate, onReset: function () { return handleChange({ key: key, value1: undefined }); }, handleText: function (val) { return handleChange({ key: key, value1: val }); }, icon: '#icon-tooltextedit', placement: 'right' })), onPaste: function (e) {
var _a, _b;
e.preventDefault();
var input = e.target;
var start = (_a = input.selectionStart) !== null && _a !== void 0 ? _a : 0;
var end = (_b = input.selectionEnd) !== null && _b !== void 0 ? _b : 0;
var copy = e.clipboardData.getData('text/plain').trim().replaceAll('\r', '').replaceAll('\n', ',');
var prefix = input.value.slice(0, start);
var suffix = input.value.slice(end - start > 0 ? end : start);
var value = prefix + copy + suffix;
handleChange({ key: key, value1: value });
} })),
condition == types_1.Condition.Between && (react_1.default.createElement(antd_1.Input, { disabled: !showColumnsFilter, className: 'filter-options-input', type: 'text', style: { width: 180 }, addonAfter: filterType == 'date' && (
//@ts-ignore
react_1.default.createElement(antd_1.DatePicker, { className: 'filter-options-date', disabled: !showColumnsFilter, locale: zh_CN_1.default, format: format, showTime: true, allowClear: false, onChange: function (date) { return date && handleChange({ key: key, value2: date }); }, style: { height: 30 } })), onChange: function (e) { return handleChange({ key: key, value2: e.target.value }); }, value: typeof value2 == 'object' ? Array.isArray(value2) ? value2.join(',') : value2.format(format) : value2 }))));
})),
react_1.default.createElement(antd_1.Button, { type: 'link', disabled: !showColumnsFilter, onClick: function () { return handleAdd(); }, style: { marginTop: 10, borderRadius: 4 } }, translate('Condition.add_cond'))));
};
var SecondFilterWithRef = (0, react_1.forwardRef)(SecondFilter);
//# sourceMappingURL=./components/table/SecondFilter/SecondFilterDrawer.js.map