fastlion-amis
Version:
一种MIS页面生成工具
208 lines (207 loc) • 19.7 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var icons_1 = require("@ant-design/icons");
var antd_1 = require("antd");
var react_1 = tslib_1.__importStar(require("react"));
var Checkbox_1 = tslib_1.__importDefault(require("../Checkbox"));
var icons_2 = require("../icons");
var InputBox_1 = tslib_1.__importDefault(require("../InputBox"));
var ActionSheet_1 = tslib_1.__importDefault(require("./ActionSheet"));
var helper_1 = require("../../utils/helper");
var TabPane = antd_1.Tabs.TabPane;
var AdvancedModlePopup = function (props) {
var _a;
var filtercont = props.filtercont, filtersArr = props.filtersArr, filtersHeader = props.filtersHeader, hideAdvancedFilter = props.hideAdvancedFilter, handleOptionTransfer = props.handleOptionTransfer, renderChild = props.renderChild, filter = props.filter, handleActionDisplay = props.handleActionDisplay, addFilter = props.addFilter, onCheckbox = props.onCheckbox, caseSensitive = props.caseSensitive, showAdvancedOption = props.showAdvancedOption, limitStatus = props.limitStatus, topN = props.topN, changeTopN = props.changeTopN, changeLimitStatus = props.changeLimitStatus;
var limitInputRef = (0, react_1.useRef)(null);
// const [optionTransfer, setOptionTransfer] = useState<JSX.Element>(handleOptionTransfer())
var slot = {
left: react_1.default.createElement("div", { className: 'left-text', onClick: hideAdvancedFilter },
react_1.default.createElement(icons_2.Icon, { icon: "right-arrow-bold", className: "icon" })),
right: react_1.default.createElement("div", null)
};
var filtersRef = (0, react_1.useRef)(null);
// 配置查询表单
var _b = (0, react_1.useState)({
filterParam: false,
advancedParam: false,
}), queryStatus = _b[0], setQueryStatus = _b[1];
(0, react_1.useEffect)(function () {
if (filter) {
handleActionDisplay('0');
}
else
handleActionDisplay('1');
return;
}, []);
(0, react_1.useEffect)(function () {
handleInitQueryStatus();
}, [filter, filtersHeader]);
// 生成label，必填的带*
var genLabel = function (label, type) {
return react_1.default.createElement("span", null,
queryStatus[type] ? react_1.default.createElement("span", { style: { color: 'red' } }, "*") : null,
" ",
label);
};
// 初始化查询/高级查询必填逻辑
var handleInitQueryStatus = function () {
var _a = (filter !== null && filter !== void 0 ? filter : {}).body, body = _a === void 0 ? [] : _a;
var filterParamIsRequired = body === null || body === void 0 ? void 0 : body.some(function (item) { return item === null || item === void 0 ? void 0 : item.required; });
var advancedParamIsRequired = filtersHeader === null || filtersHeader === void 0 ? void 0 : filtersHeader.some(function (item) { return item === null || item === void 0 ? void 0 : item.required; });
setQueryStatus({
filterParam: filterParamIsRequired,
advancedParam: advancedParamIsRequired,
});
};
return (react_1.default.createElement("div", { className: 'advanced_drawer' },
react_1.default.createElement(antd_1.Tabs, { centered: true, tabBarExtraContent: slot, onTabClick: function (key, e) {
handleActionDisplay(key);
} },
filter && (filter === null || filter === void 0 ? void 0 : filter.body) && react_1.default.createElement(TabPane, { tab: genLabel('查询', 'filterParam'), key: "0", forceRender: true },
react_1.default.createElement("div", { className: 'advanced_drawer_filtersHeader' }, (_a = filter === null || filter === void 0 ? void 0 : filter.body) === null || _a === void 0 ? void 0 : _a.map(function (item) { return renderChild(item); }))),
((filtersArr === null || filtersArr === void 0 ? void 0 : filtersArr.length) > 0) && react_1.default.createElement(TabPane, { tab: genLabel('高级', 'advancedParam'), key: "1", forceRender: true },
react_1.default.createElement("div", { ref: filtersRef, className: 'advanced_drawer_filtersbody' },
(filtersHeader === null || filtersHeader === void 0 ? void 0 : filtersHeader.length) > 0 && react_1.default.createElement("div", { className: 'advanced_drawer_filtersHeader' }, filtersHeader.map(function (item) {
return renderChild(item);
})),
react_1.default.createElement(HandleAdvancedFilter, tslib_1.__assign({}, props))),
react_1.default.createElement("div", { className: "advanced_drawer_List_button add-button", onClick: function () {
addFilter();
if (filtersRef.current) {
setTimeout(function () {
// filtersRef.current?.scrollBy({ top: filtersRef.current.scrollHeight, behavior: 'smooth' })
filtersRef.current.scrollTop = filtersRef.current.scrollHeight;
}, 120);
}
} },
react_1.default.createElement(icons_1.PlusOutlined, null),
"\u65B0\u589E"),
react_1.default.createElement("div", { className: "advanced_drawer_List_button advanced_drawer_List_distinguish", onClick: function () { } },
react_1.default.createElement("label", { onChange: onCheckbox, style: { cursor: "pointer", marginRight: '16px' } },
react_1.default.createElement(Checkbox_1.default, { checked: caseSensitive }),
"\u533A\u5206\u5927\u5C0F\u5199"),
react_1.default.createElement("div", null,
react_1.default.createElement(Checkbox_1.default, { onChange: function (value) {
var _a;
if (value) {
(_a = limitInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
}
changeLimitStatus(value);
}, checked: limitStatus }, "\u4EC5\u67E5\u524D"),
react_1.default.createElement(antd_1.InputNumber, { ref: limitInputRef, size: 'small', min: 1, precision: 0, onChange: function (value) { return changeTopN(value || 0); }, style: { margin: '0 8px', width: '100px' }, value: topN }),
"\u9879"))),
((filtersArr === null || filtersArr === void 0 ? void 0 : filtersArr.length) > 0 && showAdvancedOption) && react_1.default.createElement(TabPane, { tab: '选项', key: "2", forceRender: true }, handleOptionTransfer()))));
};
var HandleAdvancedFilter = function (props) {
var filtersArr = props.filtersArr, filterOptions = props.filterOptions, changeRange = props.changeRange, changeNot = props.changeNot, changeField = props.changeField, filterObj = props.filterObj, deleteFilter = props.deleteFilter, renderChild = props.renderChild, env = props.env, isShowInputItem = props.isShowInputItem, rangeGenerator = props.rangeGenerator, notRange = props.notRange, emptyTimeSelected = props.emptyTimeSelected, selectEmptyTime = props.selectEmptyTime, translate = props.translate, filtersHeader = props.filtersHeader;
var options = filterOptions.map(function (item) { return (tslib_1.__assign(tslib_1.__assign({}, item), { value: item.value.split('--')[0] })); });
var selectList = [];
options.forEach(function (item) {
if (!selectList.some(function (i) { return i.value === item.value; })) {
selectList.push(item);
}
});
return react_1.default.createElement(react_1.default.Fragment, null,
(filtersHeader === null || filtersHeader === void 0 ? void 0 : filtersHeader.length) ? (react_1.default.createElement("div", { className: 'advanced_param_title-box' },
react_1.default.createElement("div", { className: 'title' }, "\u6761\u4EF6\u67E5\u8BE2"))) : null,
react_1.default.createElement(antd_1.List, { className: 'advanced_drawer_List', bordered: true, dataSource: filtersArr, renderItem: function (item, _index) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
var content = rangeGenerator(item);
var label = (_b = (_a = filterOptions.filter(function (items) { return items.value == item.field; })) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.label;
var dateOptions = selectList.filter(function (filItem) { return filItem.type && ['input-date', 'input-datetime', 'input-time', 'input-month', 'input-quarter', 'input-year'].includes(filItem.type); });
if (dateOptions.length) {
dateOptions.unshift({
label: translate('Select.emptyItem'),
value: 'advancedFilter.noneData'
});
}
return (react_1.default.createElement(antd_1.List.Item, { actions: [
!item.dateLine && react_1.default.createElement("span", { onClick: function () { filtersArr.length !== 1 && deleteFilter(_index); } },
react_1.default.createElement(icons_1.DeleteOutlined, null))
] },
item.dateLine && emptyTimeSelected ? react_1.default.createElement(AdvancedFilterAction, { handleOnClick: function (value) {
var _a;
changeRange(filterObj[value.value].type === 'lion-upload' ? 10 : ['input-date', 'input-month', 'input-datetime'].includes((_a = filterObj[value.value]) === null || _a === void 0 ? void 0 : _a.type) ? 7 : 2, _index);
changeField(value.value, _index);
}, Options: dateOptions, item: item, emptyTimeSelected: true, env: env, dete: true, allList: dateOptions, filtersArr: filtersArr })
: react_1.default.createElement(AdvancedFilterAction, { handleOnClick: function (value) {
var _a;
if (value.value === 'advancedFilter.noneData') {
selectEmptyTime === null || selectEmptyTime === void 0 ? void 0 : selectEmptyTime(_index);
}
else {
changeRange(filterObj[value.value].type === 'lion-upload' ? 10 : ['input-date', 'input-month', 'input-datetime'].includes((_a = filterObj[value.value]) === null || _a === void 0 ? void 0 : _a.type) ? 7 : 2, _index);
changeField(value.value, _index);
}
}, Options: item.dateLine ? dateOptions : selectList, item: item, env: env, dete: true, allList: filterOptions, filtersArr: filtersArr }),
react_1.default.createElement(AdvancedFilterAction, { handleOnClick: function (value) {
changeRange(value.value, _index);
changeNot(!!(value === null || value === void 0 ? void 0 : value.not), _index);
}, disabled: (item.dateLine && emptyTimeSelected) || notRange.includes((_c = filterObj[item.field]) === null || _c === void 0 ? void 0 : _c.type), Options: content, actionClassName: 'advanced-condition', item: item, env: env, dete: false }),
item.op == 12 && renderChild(tslib_1.__assign(tslib_1.__assign({}, (_d = filterObj[item.field]) === null || _d === void 0 ? void 0 : _d.dataTag), { name: item.field }), 'dataTag'),
isShowInputItem(item, (_e = filterObj[item.field]) === null || _e === void 0 ? void 0 : _e.type) ?
react_1.default.createElement("div", { className: "advanced_drawer_List_double ".concat(['radios', 'checkboxes'].includes((_f = filterObj[item.field]) === null || _f === void 0 ? void 0 : _f.type) ? 'advanced_drawer_List_radios' : '') }, item.op === 7 && (((_g = filterObj[item.field]) === null || _g === void 0 ? void 0 : _g.type) === 'input-number' || ((_h = filterObj[item.field]) === null || _h === void 0 ? void 0 : _h.isNumber))
?
((0, helper_1.isMobile)() ? react_1.default.createElement("div", null,
renderChild(tslib_1.__assign(tslib_1.__assign({}, filterObj[item.field]), { isMultipleValues: false, name: ((_j = filterObj[item.field]) === null || _j === void 0 ? void 0 : _j.name) + '-a8', label: undefined, domicile: { label: label } }), 'a', { placeholder: item.op === 7 ? '不限制' : undefined }),
renderChild(tslib_1.__assign(tslib_1.__assign({}, filterObj[item.field]), { isMultipleValues: false, name: ((_k = filterObj[item.field]) === null || _k === void 0 ? void 0 : _k.name) + '-b8', label: undefined, domicile: { label: label } }), 'b', { placeholder: item.op === 7 ? '不限制' : undefined })) : react_1.default.createElement(react_1.default.Fragment, null,
renderChild(tslib_1.__assign(tslib_1.__assign({}, filterObj[item.field]), { isMultipleValues: false, name: ((_l = filterObj[item.field]) === null || _l === void 0 ? void 0 : _l.name) + '-a8', label: undefined, domicile: { label: label } }), 'a'),
renderChild(tslib_1.__assign(tslib_1.__assign({}, filterObj[item.field]), { isMultipleValues: false, name: ((_m = filterObj[item.field]) === null || _m === void 0 ? void 0 : _m.name) + '-b8', label: undefined, domicile: { label: label } }), 'b')))
:
item.op === 7 && (((_o = filterObj[item.field]) === null || _o === void 0 ? void 0 : _o.type) === 'input-datetime' || ((_p = filterObj[item.field]) === null || _p === void 0 ? void 0 : _p.type) === 'input-date')
?
renderChild(tslib_1.__assign(tslib_1.__assign({}, filterObj[item.field]), { type: ((_q = filterObj[item.field]) === null || _q === void 0 ? void 0 : _q.type) + "-range", label: undefined, domicile: { label: label } }), undefined)
:
renderChild(tslib_1.__assign(tslib_1.__assign({}, filterObj[item.field]), { label: undefined, domicile: { label: label }, isNumber: (_r = filterObj[item.field]) === null || _r === void 0 ? void 0 : _r.isNumber, value: ((_t = (_s = filterObj === null || filterObj === void 0 ? void 0 : filterObj[item.field]) === null || _s === void 0 ? void 0 : _s.value) === null || _t === void 0 ? void 0 : _t.includes(',')) && ['input-date', 'input-datetime', 'input-time'].includes((_u = filterObj[item.field]) === null || _u === void 0 ? void 0 : _u.type) ? (_v = filterObj[item.field]) === null || _v === void 0 ? void 0 : _v.value.split(',')[0] : (_w = filterObj[item.field]) === null || _w === void 0 ? void 0 : _w.value, disabled: item.dateLine && emptyTimeSelected }), undefined)) : react_1.default.createElement("div", { className: 'advanced_drawer_List_double ' })));
} }));
};
var AdvancedFilterAction = function (props) {
var _a, _b;
var handleOnClick = props.handleOnClick, Options = props.Options, item = props.item, dete = props.dete, env = props.env, disabled = props.disabled, allList = props.allList, emptyTimeSelected = props.emptyTimeSelected, actionClassName = props.actionClassName;
var _c = (0, react_1.useState)(false), moreIsOpened = _c[0], setMoreIsOpened = _c[1];
var ref = (0, react_1.useRef)(null);
var _d = (0, react_1.useState)(''), value = _d[0], setValue = _d[1];
var _e = (0, react_1.useState)(Options), options = _e[0], setOptions = _e[1];
(0, react_1.useEffect)(function () {
var _a;
if (moreIsOpened) {
var element = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.querySelector("[data-id=\"".concat(item.field, "\"]"));
if (element) {
element.scrollIntoView();
}
}
}, [moreIsOpened]);
(0, react_1.useEffect)(function () {
if (value == '') {
setOptions(Options);
}
else {
setOptions(Options.filter(function (item) { return item.label.includes(value); }));
}
}, [value, Options]);
return react_1.default.createElement(ActionSheet_1.default, { className: 'advanced_drawer_List_Action', isOpened: moreIsOpened, actionClassName: actionClassName, round: true, container: env.getModalContainer, onHide: function (e) {
e.stopPropagation();
setMoreIsOpened(false);
}, popupContent: react_1.default.createElement("div", { className: 'advanced_drawer_List_popup', ref: ref },
react_1.default.createElement("div", { className: 'advanced_drawer_List_popup_title' },
react_1.default.createElement("label", null, "\u9009\u62E9".concat(dete ? '字段' : '条件')),
react_1.default.createElement("span", { className: "closeWrap-icon" },
react_1.default.createElement(icons_2.Icon, { icon: "close", onClick: function () { return setMoreIsOpened(false); } }))),
react_1.default.createElement("div", { className: 'advanced_drawer_List_popup_search' },
react_1.default.createElement(InputBox_1.default, { value: value, className: 'input-box', onChange: setValue, placeholder: '请输入关键字', clearable: false }, value !== '' ? (react_1.default.createElement("a", { onClick: function () { setValue(''); } },
react_1.default.createElement(icons_2.Icon, { icon: "close", className: "icon" }))) : (react_1.default.createElement(icons_2.Icon, { icon: "search", className: "icon" })))),
react_1.default.createElement("div", { className: 'advanced_drawer_List_popup_body' }, options.map(function (_item, index) {
var _a;
return react_1.default.createElement("div", { className: "advanced_drawer_List_popup_filter ".concat(_item.value == item.field ? 'advanced_drawer_List_popup_filter_text' : ''), "data-id": String(_item.value) + ((_a = _item.not) !== null && _a !== void 0 ? _a : ''), onClick: function () {
handleOnClick(_item);
setMoreIsOpened(false);
}, key: index }, _item.label);
}))) },
react_1.default.createElement("span", { onClick: function () { if (!disabled)
setMoreIsOpened(true); }, className: "advanced_drawer_List_popup_text ".concat(dete ? 'align_left' : '', " ").concat(disabled ? 'advanced_drawer_disabled' : '') }, (_b = (_a = (dete ? allList.filter(function (_item) { return emptyTimeSelected ? _item.value == 'advancedFilter.noneData' : item.field == _item.value; }) :
Options.filter(function (_item) { return item.not ? (_item.value == item.op && _item.not) :
(_item.value == item.op); }))) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.label));
};
exports.default = AdvancedModlePopup;
//# sourceMappingURL=./components/Lion/AdvancedModlePopup.js.map