fastlion-amis
Version:
一种MIS页面生成工具
170 lines (169 loc) • 16.3 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.HeadCellFilterDropDown = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var icons_1 = require("../../components/icons");
var popover_1 = (0, tslib_1.__importDefault)(require("antd/lib/popover"));
var select_1 = (0, tslib_1.__importDefault)(require("antd/lib/select"));
var Input_1 = (0, tslib_1.__importDefault)(require("antd/lib/input/Input"));
var button_1 = (0, tslib_1.__importDefault)(require("antd/lib/button"));
var Checkbox_1 = (0, tslib_1.__importDefault)(require("antd/lib/checkbox/Checkbox"));
var radio_1 = (0, tslib_1.__importDefault)(require("antd/lib/radio"));
var date_picker_1 = (0, tslib_1.__importDefault)(require("antd/lib/date-picker"));
var dropdown_1 = (0, tslib_1.__importDefault)(require("antd/lib/dropdown"));
var zh_CN_1 = (0, tslib_1.__importDefault)(require("antd/lib/date-picker/locale/zh_CN"));
var types_1 = require("../../components/table/SecondFilter/types");
var helper_1 = require("../../utils/helper");
var TextareaPop_1 = (0, tslib_1.__importDefault)(require("../../components/common/TextareaPop"));
var lodash_1 = require("lodash");
var HeadCellFilterDropDown = /** @class */ (function (_super) {
(0, tslib_1.__extends)(HeadCellFilterDropDown, _super);
function HeadCellFilterDropDown(props) {
var _this = _super.call(this, props) || this;
_this.state = { visible: false, map: {} };
return _this;
}
HeadCellFilterDropDown.prototype.componentDidMount = function () {
this.getMapValue();
};
HeadCellFilterDropDown.prototype.getMapValue = function () {
var _a;
return (0, tslib_1.__awaiter)(this, void 0, void 0, function () {
var _b, filterType, column, env, api, res, data;
return (0, tslib_1.__generator)(this, function (_c) {
switch (_c.label) {
case 0:
_b = this.props, filterType = _b.filterType, column = _b.column, env = _b.env;
if (!(filterType == 'select')) return [3 /*break*/, 3];
if (!column.map) return [3 /*break*/, 1];
this.setState({ map: column.map });
return [3 /*break*/, 3];
case 1:
api = column.pristine.source;
return [4 /*yield*/, env.fetcher(api, {})];
case 2:
res = _c.sent();
if (res.ok) {
data = res.data;
this.setState({ map: data });
(_a = column.setMapValue) === null || _a === void 0 ? void 0 : _a.call(column, data);
}
_c.label = 3;
case 3: return [2 /*return*/];
}
});
});
};
HeadCellFilterDropDown.prototype.render = function () {
var _this = this;
var _a = this.props, isActive = _a.isActive, isShow = _a.isShow, column = _a.column, ns = _a.classPrefix, cx = _a.classnames, onReset = _a.onReset, onConfirm = _a.onConfirm;
var _b = this.state, visible = _b.visible, map = _b.map;
return (react_1.default.createElement(popover_1.default, { trigger: 'click', visible: visible, onVisibleChange: function (visible) { return _this.setState({ visible: visible }); }, getPopupContainer: this.props.env.getTopModalContainer, content: (react_1.default.createElement(SecondFilter, (0, tslib_1.__assign)({}, this.props, { map: map, columnFields: this.props.columnFileds, format: column.pristine.valueFormat, onReset: function () { onReset(); _this.setState({ visible: false }); }, onConfirm: (function (values, caseSensitive) { onConfirm(values, caseSensitive); _this.setState({ visible: false }); }), onCancel: function () { return _this.setState({ visible: false }); } }))), placement: 'bottomRight', arrowPointAtCenter: true },
react_1.default.createElement("span", { style: { visibility: isShow ? 'visible' : 'hidden', zIndex: 7 }, onClick: function (e) { return e.stopPropagation(); }, className: cx(ns + "TableCell-filterBtn", isActive ? 'is-active' : '') },
react_1.default.createElement(icons_1.Icon, { icon: "column-filter", className: "icon" }))));
};
return HeadCellFilterDropDown;
}(react_1.default.Component));
exports.HeadCellFilterDropDown = HeadCellFilterDropDown;
var SecondFilter = function (props) {
var _a;
var filterType = props.filterType, _b = props.map, map = _b === void 0 ? {} : _b, _c = props.format, format = _c === void 0 ? 'YYYY-MM-DD HH:mm:ss' : _c, columnFields = props.columnFields, onConfirm = props.onConfirm, onReset = props.onReset, onCancel = props.onCancel, cx = props.classnames, render = props.render, classPrefix = props.classPrefix, translate = props.translate;
var _d = (0, react_1.useState)((_a = props.defaultFilters) !== null && _a !== void 0 ? _a : [{ key: (0, helper_1.guid)(), condition: types_1.Condition.Equal, relation: 'and' }]), filters = _d[0], setFilters = _d[1];
var _e = (0, react_1.useState)(true), caseSensitive = _e[0], setCaseSensitive = _e[1];
var inputRef = (0, react_1.useRef)(null);
var options = (0, types_1.getOptions)(filterType);
(0, react_1.useEffect)(function () {
var _a;
setFilters((_a = props.defaultFilters) !== null && _a !== void 0 ? _a : [{ key: (0, helper_1.guid)(), condition: types_1.Condition.Equal, relation: 'and' }]);
}, [props.defaultFilters]);
var handleOk = function () {
var rValue = (0, lodash_1.flatMap)(filters !== null && filters !== void 0 ? filters : [], function (filter) {
var condition = filter.condition, value1 = filter.value1, value2 = filter.value2, relation = filter.relation, key = filter.key;
if (condition != undefined) {
if (condition == types_1.Condition.Null || condition == types_1.Condition.NotNull) {
return { 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 { 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 && value1 != '') {
return {
key: key,
condition: condition,
relation: relation,
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, columnFields)
};
}
}
}
return [];
});
onConfirm(rValue, caseSensitive);
};
var handleReset = function () {
setFilters([{ key: (0, helper_1.guid)(), condition: types_1.Condition.Equal }]);
onReset();
};
var handleChange = function (value) {
setFilters(function (filters) { return filters.map(function (filter) { return value.key === filter.key ? (0, tslib_1.__assign)((0, tslib_1.__assign)({}, filter), value) : filter; }); });
};
var handleAdd = function () {
var filter = { key: (0, helper_1.guid)(), condition: types_1.Condition.Equal, relation: 'and' };
setFilters(function (filters) { return filters.concat(filter); });
};
return (react_1.default.createElement("div", { onContextMenu: function (e) { return e.preventDefault(); }, className: cx('TableCell-filterPopOver'), onClick: function (e) { return e.stopPropagation(); }, style: { maxHeight: '30rem', overflowY: 'auto' } },
filters.map(function (filter, index, arr) {
var key = filter.key, condition = filter.condition, value1 = filter.value1, value2 = filter.value2, relation = filter.relation;
var isNull = condition == types_1.Condition.Null || condition == types_1.Condition.NotNull;
var isBetween = condition == types_1.Condition.Between;
return (react_1.default.createElement("div", { key: key },
react_1.default.createElement(select_1.default, { className: 'filter-option', placeholder: '\u8BF7\u9009\u62E9\u6761\u4EF6', value: condition, onChange: function (value) { return handleChange({ key: key, condition: value }); } }, options.map(function (option) { return react_1.default.createElement(select_1.default.Option, { key: option.value, value: option.value }, option.label); })),
filterType == 'select' ?
react_1.default.createElement(select_1.default, { className: 'filter-option', placeholder: '\u8BF7\u9009\u62E9', value: typeof value1 == 'string' ? value1.split(',').filter(function (v) { return v != ''; }) : value1, mode: 'multiple', maxTagCount: 'responsive', onChange: function (value) { return handleChange({ key: key, value1: value }); }, style: { visibility: isNull ? 'hidden' : 'visible', height: isNull ? 0 : undefined, marginTop: isNull ? 0 : undefined } }, Object.keys(map).map(function (key) { return (react_1.default.createElement(select_1.default.Option, { key: key, value: key }, render('tpl', { type: 'tpl', tpl: map[key] }))); }))
:
react_1.default.createElement(dropdown_1.default, { trigger: ['contextMenu'], overlayStyle: { display: isBetween ? 'none' : undefined }, menu: {
items: columnFields.map(function (item) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, item), { key: item.name, onClick: function () { handleChange({ key: key, value1: (value1 !== null && value1 !== void 0 ? value1 : '') + "[" + item.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(Input_1.default, { ref: inputRef, autoFocus: true, className: 'filter-option', type: 'text', addonAfter: filterType == 'date' ?
// @ts-ignore
react_1.default.createElement(date_picker_1.default, { className: 'filter-option-date', locale: zh_CN_1.default, format: format, showTime: true, dropdownAlign: { offset: [-143, 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: cx, translate: translate, onReset: function () { return handleChange({ key: key, value1: undefined }); }, handleText: function (val) { return handleChange({ key: key, value1: val }); }, icon: '#icon-tooltextedit', placement: 'right' }), placeholder: '请输入', style: { visibility: isNull ? 'hidden' : 'visible', height: isNull ? 0 : undefined, marginTop: isNull ? 0 : undefined }, value: typeof value1 == 'object' ? Array.isArray(value1) ? value1.join(',') : value1.format(format) : value1, onDoubleClick: function () { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.select(); }, onPressEnter: function () { return handleOk(); }, onChange: function (e) { return handleChange({ key: key, value1: e.target.value }); }, 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 });
} })),
react_1.default.createElement(Input_1.default, { className: 'filter-option', type: 'text', placeholder: '请输入', style: { visibility: isBetween ? 'visible' : 'hidden', height: isBetween ? undefined : 0, marginTop: isBetween ? undefined : 0 }, value: typeof value2 == 'object' ? Array.isArray(value2) ? value2.join(',') : value2.format(format) : value2, addonAfter: filterType == 'date' && (
//@ts-ignore
react_1.default.createElement(date_picker_1.default, { className: 'filter-option-date', locale: zh_CN_1.default, format: format, showTime: true, dropdownAlign: { offset: [-143, 2] }, allowClear: false, onChange: function (date) { return date && handleChange({ key: key, value2: date }); }, style: { height: 30 } })), onPressEnter: function () { return handleOk(); }, onChange: function (e) { return handleChange({ key: key, value2: e.target.value }); } }),
index != arr.length - 1 && (react_1.default.createElement(radio_1.default.Group, { style: { marginTop: 10 }, size: 'small', value: relation, onChange: function (e) { return handleChange({ key: key, relation: e.target.value }); } },
react_1.default.createElement(radio_1.default, { value: 'and' }, "\u4E14"),
react_1.default.createElement(radio_1.default, { value: 'or' }, "\u6216")))));
}),
react_1.default.createElement("div", { style: { display: 'flex', marginTop: 10, justifyContent: 'space-between' } },
filterType == 'text' && react_1.default.createElement(Checkbox_1.default, { style: { fontSize: 12 }, checked: caseSensitive, onChange: function (e) { return setCaseSensitive(e.target.checked); } }, "\u533A\u5206\u5927\u5C0F\u5199"),
react_1.default.createElement(button_1.default, { onClick: function () { return handleAdd(); }, size: 'small', type: 'link', style: { fontSize: 12 } }, translate('Condition.add_cond'))),
react_1.default.createElement("div", { className: 'filter-footer' },
react_1.default.createElement(button_1.default, { onClick: function () { return handleReset(); }, size: 'small', type: 'link', style: { fontSize: 12 } }, translate('clear')),
react_1.default.createElement("div", { className: 'filter-footer-btn' },
react_1.default.createElement(button_1.default, { onClick: function () { return onCancel(); }, style: { borderRadius: 4, fontSize: 12 }, size: 'small' }, translate('cancel')),
react_1.default.createElement(button_1.default, { onClick: function () { return handleOk(); }, style: { borderRadius: 4, marginLeft: 6, fontSize: 12 }, size: 'small', type: 'primary' }, translate('Flow.determine'))))));
};
//# sourceMappingURL=./renderers/Table/HeadCellFilterDropdown.js.map