fastlion-amis
Version:
一种MIS页面生成工具
268 lines (267 loc) • 21.6 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var antd_1 = require("antd");
var icons_1 = require("../../../../components/icons");
var types_1 = require("./types");
var rule_1 = tslib_1.__importDefault(require("./rule"));
var lodash_1 = require("lodash");
var helper_1 = require("../../../../utils/helper");
// 处理数字类型介于的常量
var BETWEEN_VALUE_A = 'number_a', BETWEEN_VALUE_B = 'number_b', SPLIT_CHAR = ';';
// 去除字段名前缀的正则
var REG_EXP = new RegExp("^(".concat(types_1.ADVANCED_FILTER_NAME.FILTER, "|").concat(types_1.ADVANCED_FILTER_NAME.FILTER_SUB, ")\\."));
var ConditionQuery = function (props, ref) {
var visible = props.visible, render = props.render, cx = props.classnames, env = props.env, advancedFilter = props.advancedFilter, advancedQueryFields = props.advancedQueryFields, advancedFilterDatas = props.advancedFilterDatas, caseSensitive = props.caseSensitive, limitStatus = props.limitStatus, topN = props.topN, setAdvancedFilterDatas = props.setAdvancedFilterDatas, setCaseSensitive = props.setCaseSensitive, setLimitStatus = props.setLimitStatus, setTopN = props.setTopN;
(0, react_1.useEffect)(function () {
setAdvancedFilterDatas(getDefaultAdvancedFilterDatas());
}, []);
(0, react_1.useImperativeHandle)(ref, function () { return ({ getDefaultAdvancedFilterDatas: getDefaultAdvancedFilterDatas }); });
var advancedBody = (0, react_1.useMemo)(function () {
var _a, _b;
var body = (_b = (_a = advancedFilter.body.find(function (item) { return item.name === types_1.ADVANCED_FILTER_NAME.FILTER; })) === null || _a === void 0 ? void 0 : _a.body) !== null && _b !== void 0 ? _b : [];
if (advancedQueryFields) {
return body.filter(function (item) { return advancedQueryFields.split(',').includes(item.name.replace(REG_EXP, '')); });
}
return body;
}, [advancedFilter, advancedQueryFields]);
// 筛选出body日期项
var advancedBodyInDate = (0, react_1.useMemo)(function () {
var tags = [types_1.TagTypeEnum.InputDate, types_1.TagTypeEnum.InputDatetime, types_1.TagTypeEnum.InputTime, types_1.TagTypeEnum.InputMonth, types_1.TagTypeEnum.InputQuarter, types_1.TagTypeEnum.InputYear];
return advancedBody.filter(function (item) { return item.type && tags.includes(item.type); });
}, [advancedBody]);
// 字段select选项集合
var fieldOptions = (0, react_1.useMemo)(function () {
var uniqArr = (0, lodash_1.uniqWith)(advancedBody, function (a, b) { return a.name === b.name; });
return uniqArr.map(function (item) { return ({
label: (item.groupName ? "".concat(item.groupName, " \u00B7 ") : '') + (item.label || item.placeholder),
value: item.name,
type: item.type,
isNumber: item.isNumber || null,
defaultValue: item.value
}); });
}, [advancedBody]);
// 日期类型select选项集合
var dateFieldOptions = (0, react_1.useMemo)(function () {
return [{ label: '无', value: types_1.ADVANCED_FILTER_NAME.NONE, type: types_1.TagTypeEnum.InputText, isNumber: false }]
.concat(fieldOptions.filter(function (option) { return advancedBodyInDate.some(function (body) { return body.name === option.value; }); }));
}, [fieldOptions]);
// 文本数字类型dropdown选项集合
var textOrNumberFieldOptions = (0, react_1.useMemo)(function () {
var tags = [types_1.TagTypeEnum.InputNumber, types_1.TagTypeEnum.InputText, types_1.TagTypeEnum.InputDate, types_1.TagTypeEnum.InputDatetime];
return fieldOptions.filter(function (option) { return (option.type && tags.includes(option.type)) || option.isNumber; });
}, [fieldOptions]);
// 设置默认查项项
var getDefaultAdvancedFilterDatas = function () {
var _a;
var option = (_a = dateFieldOptions[1]) !== null && _a !== void 0 ? _a : fieldOptions[0];
var itemOne = {
key: (0, helper_1.uuidv4)(),
field: option.value,
condition: 1,
not: false,
op: rule_1.default.getRangeOption(option.type),
dateLine: dateFieldOptions.length > 1 ? true : undefined,
values: option.defaultValue
};
var itemTwo = {
key: (0, helper_1.uuidv4)(),
field: fieldOptions[0].value,
condition: 1,
not: false,
op: rule_1.default.getRangeOption(fieldOptions[0].type),
values: fieldOptions[0].defaultValue
};
return dateFieldOptions[1] ? [itemOne, itemTwo] : [itemOne];
};
var handleAddFilter = function () {
setAdvancedFilterDatas(function (datas) {
var _a;
var lastField = datas[datas.length - 1].field;
var taretIndex = fieldOptions.findIndex(function (option) { return option.value === lastField; });
var nextField = (_a = fieldOptions[taretIndex + 1]) !== null && _a !== void 0 ? _a : fieldOptions[taretIndex];
var item = {
key: (0, helper_1.uuidv4)(),
field: nextField.value,
condition: 1,
not: false,
op: rule_1.default.getRangeOption(nextField.type)
};
return datas.concat(item);
});
};
var handleMenuClick = function (menuKey, key) {
var targetOption = textOrNumberFieldOptions.find(function (option) { return option.value === menuKey; });
if (targetOption) {
setAdvancedFilterDatas(function (datas) { return datas.map(function (data) {
if (data.key === key) {
return tslib_1.__assign(tslib_1.__assign({}, data), { key: (0, helper_1.uuidv4)(), values: "".concat(data.values, "[").concat(targetOption.label, "]") });
}
return data;
}); });
}
};
var handleChange = function (type, key, value, schema) {
switch (type) {
case 'condition':
setAdvancedFilterDatas(function (datas) { return datas.map(function (data) {
if (data.key === key) {
return tslib_1.__assign(tslib_1.__assign({}, data), { condition: value });
}
return data;
}); });
break;
case 'field':
setAdvancedFilterDatas(function (datas) { return datas.map(function (data) {
if (data.key == key) {
// 字段选择无，把条件和值置空
if (value === types_1.ADVANCED_FILTER_NAME.NONE) {
return tslib_1.__assign(tslib_1.__assign({}, data), { field: value, op: types_1.RangeOptionsEnum.Equal, values: undefined });
}
switch (schema === null || schema === void 0 ? void 0 : schema.type) {
case types_1.TagTypeEnum.Switch:
return tslib_1.__assign(tslib_1.__assign({}, data), { field: value, op: types_1.RangeOptionsEnum.Equal, values: schema.falseValue });
case types_1.TagTypeEnum.File:
return tslib_1.__assign(tslib_1.__assign({}, data), { field: value, op: types_1.RangeOptionsEnum.IsEmpty, values: undefined });
case types_1.TagTypeEnum.InputDate:
case types_1.TagTypeEnum.InputMonth:
case types_1.TagTypeEnum.InputDatetime:
return tslib_1.__assign(tslib_1.__assign({}, data), { field: value, op: types_1.RangeOptionsEnum.Between, values: undefined });
default:
return tslib_1.__assign(tslib_1.__assign({}, data), { field: value, op: types_1.RangeOptionsEnum.Equal, values: undefined });
}
}
return data;
}); });
break;
case 'not':
setAdvancedFilterDatas(function (datas) { return datas.map(function (data) {
if (data.key == key) {
return tslib_1.__assign(tslib_1.__assign({}, data), { not: value });
}
return data;
}); });
break;
case 'op':
setAdvancedFilterDatas(function (datas) { return datas.map(function (data) {
if (data.key == key) {
// 把选项从介于选成其它时，把值清空
if (value !== types_1.RangeOptionsEnum.Between && data.op === types_1.RangeOptionsEnum.Between) {
return tslib_1.__assign(tslib_1.__assign({}, data), { op: value, values: undefined });
}
return tslib_1.__assign(tslib_1.__assign({}, data), { op: value });
}
return data;
}); });
break;
default:
break;
}
};
var handleValueChange = function (value, name) {
var args = [];
for (var _i = 2; _i < arguments.length; _i++) {
args[_i - 2] = arguments[_i];
}
var advancedQueryKey = args[args.length - 1];
// console.log(value, name, advancedQueryKey)
if (typeof advancedQueryKey !== 'string')
return;
setAdvancedFilterDatas(function (datas) { return datas.map(function (data) {
if (advancedQueryKey.includes(BETWEEN_VALUE_A) || advancedQueryKey.includes(BETWEEN_VALUE_B)) {
var _a = advancedQueryKey.split(SPLIT_CHAR), key = _a[0], tag = _a[1];
if (data.key === key) {
var oldValues = data.values ? "".concat(data.values) : ',';
var _b = oldValues.split(','), a = _b[0], b = _b[1];
var values = '';
if (tag === BETWEEN_VALUE_A) {
values = "".concat(value, ",").concat(b);
}
else if (tag === BETWEEN_VALUE_B) {
values = "".concat(a, ",").concat(value);
}
return tslib_1.__assign(tslib_1.__assign({}, data), { values: values });
}
}
else {
if (data.key === advancedQueryKey) {
return tslib_1.__assign(tslib_1.__assign({}, data), { values: value });
}
}
return data;
}); });
};
var renderChild = function (control, key, otherProps, region) {
if (region === void 0) { region = ''; }
var props = tslib_1.__assign({ formMode: 'horizontal', key: "".concat(control.name, "-").concat(control.type, "-").concat(key), advancedQueryKey: key, onChange: handleValueChange }, otherProps);
return render("".concat(region ? "".concat(region, "/") : '').concat(key), control, props);
};
return visible ? (react_1.default.createElement(react_1.default.Fragment, null,
advancedFilterDatas.map(function (item, index) {
var _a, _b, _c, _d;
var bodySchema = item.field === types_1.ADVANCED_FILTER_NAME.NONE ? { type: types_1.TagTypeEnum.InputDate, name: types_1.ADVANCED_FILTER_NAME.NONE } : advancedBody.find(function (body) { return body.name === item.field; });
if ((0, lodash_1.isNil)(bodySchema))
return null;
//是否时间类型
var isTimeType = [types_1.TagTypeEnum.InputDate, types_1.TagTypeEnum.InputTime, types_1.TagTypeEnum.InputDatetime,].includes(bodySchema.type);
var isDisableRange = [types_1.TagTypeEnum.TreeSelect, types_1.TagTypeEnum.TabsTransferPicker, types_1.TagTypeEnum.InputDateRange, types_1.TagTypeEnum.InputDatetimeRange, types_1.TagTypeEnum.InputMonthRange,
types_1.TagTypeEnum.InputYearRange, types_1.TagTypeEnum.InputQuarterRange, types_1.TagTypeEnum.InputTimeRange, types_1.TagTypeEnum.InputTag, types_1.TagTypeEnum.NestedSelect, types_1.TagTypeEnum.Switch
].includes(bodySchema.type);
var isDateSelectedNone = item.dateLine && item.field === types_1.ADVANCED_FILTER_NAME.NONE;
return (react_1.default.createElement(antd_1.Row, { className: 'advanced-filter-row', gutter: 24, key: item.key },
react_1.default.createElement(antd_1.Col, { span: 1, style: { paddingRight: 0 } }, !item.dateLine ? (react_1.default.createElement("div", { className: cx('condition', { 'or': item.condition === (advancedBodyInDate.length ? 1 : 0), 'not': index === (advancedBodyInDate.length ? 1 : 0) }), onClick: function () {
if (index === (advancedBodyInDate.length ? 1 : 0))
return;
handleChange('condition', item.key, item.condition ^ 1);
} }, item.condition === 0 ? '或' : '且')) : react_1.default.createElement("div", { style: { width: 20 } })),
react_1.default.createElement(antd_1.Col, { span: 5, className: 'advanced-filter-row-select', style: { paddingLeft: 0 } },
react_1.default.createElement(antd_1.Select, { value: item.field, showSearch: true, dropdownClassName: "dropdown-select-style", allowClear: false, filterOption: function (input, option) { var _a, _b; return ((_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : '').includes(input.toLowerCase()) || ((_b = option === null || option === void 0 ? void 0 : option.value) !== null && _b !== void 0 ? _b : '').toLowerCase().includes(input.toLowerCase()); }, options: item.dateLine ? dateFieldOptions : fieldOptions, getPopupContainer: env.getModalContainer, onChange: function (value) { handleChange('field', item.key, value, advancedBody.find(function (body) { return body.name === value; })); }, suffixIcon: react_1.default.createElement(icons_1.Icon, { symbol: true, icon: '#icon-tooltool_down', className: "icon" }) })),
react_1.default.createElement(antd_1.Col, { span: 1, className: 'condition-not', style: { padding: 0 } },
react_1.default.createElement(antd_1.Checkbox, { disabled: isDateSelectedNone, checked: item.not, onChange: function (e) { handleChange('not', item.key, e.target.checked); } }, "\u4E0D")),
react_1.default.createElement(antd_1.Col, { span: 4, className: 'advanced-filter-row-select', style: { paddingLeft: 0 } },
react_1.default.createElement(antd_1.Select, { dropdownClassName: "dropdown-select-style", disabled: isDisableRange || isDateSelectedNone, value: item.op, allowClear: false, getPopupContainer: env.getModalContainer, options: rule_1.default.getRangeOptions(bodySchema, false), onChange: function (val) { handleChange('op', item.key, val); }, suffixIcon: react_1.default.createElement(icons_1.Icon, { symbol: true, icon: '#icon-tooltool_down', className: "icon" }) })),
rule_1.default.showInputItem(item.op, bodySchema.type, true) ? react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(antd_1.Dropdown, { menu: {
items: textOrNumberFieldOptions.map(function (val) { return ({ key: val.value, label: val.label, }); }),
onClick: function (info) { return handleMenuClick(info.key, item.key); }
}, trigger: ['contextMenu'], overlayStyle: { overflow: 'hidden' }, disabled: !(['input-number', 'input-text', 'input-date', 'input-datetime', 'input-time'].includes(bodySchema.type) || bodySchema.isNumber) || item.op == 7, 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: 'hidden', display: 'flex', flexDirection: 'column'
} },
react_1.default.createElement("div", { style: { flex: 1, overflow: 'auto' } }, react_1.default.cloneElement(menu, { style: { boxShadow: 'none' } })))); } },
react_1.default.createElement(antd_1.Col, { span: 12, style: { paddingRight: 0, paddingLeft: 0 } }, item.op === types_1.RangeOptionsEnum.DataTag ?
renderChild(tslib_1.__assign(tslib_1.__assign({}, bodySchema.dataTag), { name: item.field, value: item.values }), item.key)
: item.op === types_1.RangeOptionsEnum.Between && (bodySchema.type === types_1.TagTypeEnum.InputNumber || bodySchema.isNumber)
?
react_1.default.createElement("div", { className: "double" },
renderChild(tslib_1.__assign(tslib_1.__assign({}, bodySchema), { name: bodySchema.name + '-a8', isMultipleValues: false, label: undefined, value: (_a = item.values) === null || _a === void 0 ? void 0 : _a.toString().split(',')[0] }), "".concat(item.key).concat(SPLIT_CHAR).concat(BETWEEN_VALUE_A)),
react_1.default.createElement("span", { style: { margin: '0 4px' } }),
renderChild(tslib_1.__assign(tslib_1.__assign({}, bodySchema), { name: bodySchema.name + '-b8', isMultipleValues: false, label: undefined, value: (_b = item.values) === null || _b === void 0 ? void 0 : _b.toString().split(',')[1] }), "".concat(item.key).concat(SPLIT_CHAR).concat(BETWEEN_VALUE_B)))
:
item.op !== types_1.RangeOptionsEnum.IsEmpty && item.op === types_1.RangeOptionsEnum.Between && [types_1.TagTypeEnum.InputDate, types_1.TagTypeEnum.InputMonth, types_1.TagTypeEnum.InputDatetime].includes(bodySchema.type) ?
renderChild(tslib_1.__assign(tslib_1.__assign({}, bodySchema), { ranges: (_c = bodySchema.ranges) !== null && _c !== void 0 ? _c : bodySchema.shortcuts, type: bodySchema.type + "-range", label: undefined, value: item.values }), item.key) :
renderChild(tslib_1.__assign(tslib_1.__assign({}, bodySchema), { validations: (function () {
if (bodySchema.isNumber)
return { "isExprOrNumeric": true };
if (isTimeType)
return { "isExprOrDate": true };
return null;
})(), value: ((_d = bodySchema.value) === null || _d === void 0 ? void 0 : _d.includes(',')) && isTimeType ? bodySchema.value.split(',')[0] : item.values || bodySchema.value, label: undefined, isNumber: bodySchema.isNumber, disabled: isDateSelectedNone }), item.key, { inputFocusShowPicker: false, inputBlurCheckValue: false }))))
: react_1.default.createElement(antd_1.Col, { span: 12 }),
!item.dateLine && (react_1.default.createElement(antd_1.Col, { span: 1, className: 'del-icon' },
react_1.default.createElement(icons_1.Icon, { role: "delete", icon: "#icon-tooltool_minus-o", onClick: function () { setAdvancedFilterDatas(function (datas) { return datas.filter(function (data) { return data.key !== item.key; }); }); } })))));
}),
react_1.default.createElement("div", { className: 'Modal-advanced-body-but' },
react_1.default.createElement(antd_1.Button, { block: true, onClick: handleAddFilter }, "\u65B0\u589E+")),
react_1.default.createElement(antd_1.Row, { className: 'Modal-advanced-body-caseSensitive' },
react_1.default.createElement(antd_1.Col, { span: 4 },
react_1.default.createElement(antd_1.Checkbox, { className: 'condition-case-sensitive', checked: caseSensitive, onChange: function (e) { return setCaseSensitive(e.target.checked); } }, "\u533A\u5206\u5927\u5C0F\u5199")),
react_1.default.createElement(antd_1.Col, { span: 20, className: 'condition-topN-box' },
react_1.default.createElement(antd_1.Checkbox, { className: 'condition-topN', checked: limitStatus, onChange: function (e) { return setLimitStatus(e.target.checked); } }, "\u4EC5\u67E5\u524D"),
react_1.default.createElement(antd_1.InputNumber, { size: 'small', min: 1, precision: 0, onChange: function (value) { return setTopN(value !== null && value !== void 0 ? value : 0); }, style: { margin: '0 8px', width: '110px', fontSize: 12 }, value: topN }),
"\u9879")))) : null;
};
exports.default = react_1.default.forwardRef(ConditionQuery);
//# sourceMappingURL=./renderers/CRUD/components/AdvancedQuery/ConditionQuery.js.map