fastlion-amis
Version:
一种MIS页面生成工具
324 lines (323 loc) • 24 kB
JavaScript
;
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("@ant-design/icons");
var types_1 = require("./types");
var icons_2 = require("../../../../components/icons");
var sortablejs_1 = tslib_1.__importDefault(require("sortablejs"));
var CheckAllOptionEnum;
(function (CheckAllOptionEnum) {
CheckAllOptionEnum["SELECT_ALL"] = "\u5168\u9009";
CheckAllOptionEnum["SELECT_REVERSE"] = "\u53CD\u9009";
CheckAllOptionEnum["CLEAR_ALL"] = "\u5168\u6E05";
})(CheckAllOptionEnum || (CheckAllOptionEnum = {}));
var OptionQuery = function (props) {
var _a;
var visible = props.visible, segmentFields = props.segmentFields, itemRepeat = props.itemRepeat, itemCount = props.itemCount, itemSumCount = props.itemSumCount, showFields = props.showFields, sortFields = props.sortFields, groupByFields = props.groupByFields, section = props.section, leftOpenRightClose = props.leftOpenRightClose, sectionField = props.sectionField, avgSection = props.avgSection, sectionNorm = props.sectionNorm, sectionWidthValue = props.sectionWidthValue, sections = props.sections, setItemRepeat = props.setItemRepeat, setItemCount = props.setItemCount, setItemSumCount = props.setItemSumCount, setShowFields = props.setShowFields, setSortFields = props.setSortFields, setGroupByFields = props.setGroupByFields, setSection = props.setSection, setLeftOpenRightClose = props.setLeftOpenRightClose, setSectionField = props.setSectionField, setAvgSection = props.setAvgSection, setSectionNorm = props.setSectionNorm, setSectionWidthValue = props.setSectionWidthValue, setSections = props.setSections;
var _b = (0, react_1.useState)(), selectedShowField = _b[0], setSelectedShowField = _b[1];
var _c = (0, react_1.useState)(1), sectionValue = _c[0], setSectionValue = _c[1];
var _d = (0, react_1.useState)(''), searchValue = _d[0], setSearchValue = _d[1];
var inputRef = (0, react_1.useRef)(null);
var innerRef = (0, react_1.useRef)(null);
(0, react_1.useEffect)(function () {
var sortable = new sortablejs_1.default(document.getElementById("transfer-target-0"), {
group: '.transfer-target-content',
handle: '.item-label',
animation: 150,
onEnd: function (e) {
var oldIndex = e.oldIndex;
var newIndex = e.newIndex;
if (oldIndex != undefined && newIndex != undefined) {
setSortFields(function (fields) {
var newFields = tslib_1.__spreadArray([], fields, true);
var tempField = fields[oldIndex];
newFields[oldIndex] = newFields[newIndex];
newFields[newIndex] = tempField;
return newFields;
});
}
}
});
return function () {
sortable.destroy();
};
}, []);
// 勾选数据去重，仅查项数，仅查总数
var handleCheckOption = function (type, checked) {
switch (type) {
case 'repeat':
setItemRepeat(checked);
if (checked) {
setShowFields(function (fields) { return fields.map(function (field) { return (field.comparable === false ? tslib_1.__assign(tslib_1.__assign({}, field), { checked: false }) : field); }); });
}
break;
case 'count':
setItemCount(checked);
setSortFields([]);
if (checked) {
setShowFields(function (fields) {
if (fields.every(function (field) { return field.checked; })) {
return fields.map(function (field) { return (tslib_1.__assign(tslib_1.__assign({}, field), { checked: false })); });
}
return fields;
});
}
break;
case 'sumCount':
setItemSumCount(checked);
setShowFields(function (fields) {
if (checked && fields.every(function (field) { return field.checked; })) {
setGroupByFields([]);
setSortFields([]);
return fields.map(function (field) { return (tslib_1.__assign(tslib_1.__assign({}, field), { checked: field.type == 'number' || field.type == 'progress' })); });
}
return fields;
});
break;
default:
break;
}
};
// 勾选全选，全清，反选
var handleCheckAll = function (option) {
var some = itemRepeat || itemCount || itemSumCount;
setShowFields(function (fields) {
switch (option) {
case CheckAllOptionEnum.SELECT_ALL:
if (some) {
return fields.map(function (field) { return (field.comparable === true && !field.disabled ? tslib_1.__assign(tslib_1.__assign({}, field), { checked: true }) : field); });
}
else {
return fields.map(function (field) { return (tslib_1.__assign(tslib_1.__assign({}, field), { checked: true })); });
}
case CheckAllOptionEnum.CLEAR_ALL:
return fields.map(function (field) { return (tslib_1.__assign(tslib_1.__assign({}, field), { checked: field.disabled ? field.checked : (some ? false : field.disabled) })); });
case CheckAllOptionEnum.SELECT_REVERSE:
return fields.map(function (field) { return (tslib_1.__assign(tslib_1.__assign({}, field), { checked: !field.disabled ? !field.checked : field.checked })); });
default:
return fields;
}
});
};
// 勾选显示字段
var handleCheckShowField = function (showField, checked, isCheck) {
var _a;
setSelectedShowField(function (field) {
if (checked) {
return showField;
}
else {
return field ? (field.name === showField.name ? undefined : showField) : showField;
}
});
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
if (isCheck) {
setShowFields(function (fields) { return fields.map(function (field) {
if (field.name === showField.name) {
return tslib_1.__assign(tslib_1.__assign({}, field), { checked: checked });
}
return field;
}); });
}
};
var handleAddField = (0, react_1.useCallback)(function (type, fields) {
if (selectedShowField) {
if (type === 0) {
var tempFields = fields.slice();
if (itemCount || itemSumCount) {
antd_1.message.warning('仅查项数,仅查总数不能使用字段排序');
return;
}
if (section && (selectedShowField.type != 'number' && selectedShowField.type != 'date' && selectedShowField.type != 'progress')) {
antd_1.message.warning('分段查询,非数字时间类型不能使用字段排序');
return;
}
if (!tempFields.some(function (field) { return field.name === selectedShowField.name; })) {
tempFields.push(tslib_1.__assign(tslib_1.__assign({}, selectedShowField), { order: 0 }));
setSortFields(tempFields);
}
else {
antd_1.message.warning('已添加过该字段');
}
}
else {
var tempFields = fields.slice();
if (!tempFields.some(function (field) { return field.name === selectedShowField.name; })) {
tempFields.push(selectedShowField);
setGroupByFields(tempFields);
}
else {
antd_1.message.warning('已添加过该字段');
return;
}
setShowFields(function (fields) { return fields.map(function (field) {
var _a;
if (field.name === selectedShowField.name) {
return tslib_1.__assign(tslib_1.__assign({}, field), { checked: true, disabled: true });
}
if (fields.every(function (field) { return field.checked; })) {
return tslib_1.__assign(tslib_1.__assign({}, field), { checked: (_a = field.isNumerical) !== null && _a !== void 0 ? _a : false });
}
return field;
}); });
}
}
}, [selectedShowField]);
var handleDeleteField = function (type, names) {
if (type === 0) {
setSortFields(function (fields) { return fields.filter(function (field) { return !names.includes(field.name); }); });
}
else {
setGroupByFields(function (fields) { return fields.filter(function (field) { return !names.includes(field.name); }); });
setShowFields(function (fields) { return fields.map(function (field) {
var target = names.find(function (name) { return name === field.name; });
return target ? tslib_1.__assign(tslib_1.__assign({}, field), { checked: false, disabled: false }) : field;
}); });
}
};
// 排序字段修改
var handleSortField = function (field) {
setSortFields(function (fields) { return fields.map(function (sortField) {
if (field.name === sortField.name) {
return tslib_1.__assign(tslib_1.__assign({}, sortField), { order: (1 ^ sortField.order) });
}
return sortField;
}); });
};
// 勾选分段查项
var handleCheckSegment = function (checked) {
if (checked) {
setShowFields(function (fields) {
if (fields.every(function (field) { return field.checked; })) {
return fields.map(function (field) {
var isChecked = field.type == 'number' || field.type == 'date' || field.type == 'progress';
if (!field.disabled) {
return tslib_1.__assign(tslib_1.__assign({}, field), { checked: isChecked });
}
return field;
});
}
return fields;
});
}
setSection(checked);
};
//修改分段字段
var handleChangeSectionField = function (value) {
var field = segmentFields.find(function (field) { return field.name == value; });
if ((field === null || field === void 0 ? void 0 : field.type) !== 'date') {
setSectionNorm('');
}
else {
setSectionNorm('year');
}
setSectionField(value);
};
//添加段位列表
var handleAddSections = (0, react_1.useCallback)(function () {
setSections(function (sections) {
if (sections.includes(sectionValue)) {
antd_1.message.warning('已添加过该段位');
return sections;
}
return sections.concat(sectionValue);
});
}, [sectionValue]);
var renderTarget = function (type, fields) {
var sortDisabled = !!!(selectedShowField === null || selectedShowField === void 0 ? void 0 : selectedShowField.comparable) || itemSumCount || itemCount;
var groupDisabled = !!!(selectedShowField === null || selectedShowField === void 0 ? void 0 : selectedShowField.comparable) || itemSumCount;
var disabledBtn = type == 0 ? sortDisabled : groupDisabled;
return (react_1.default.createElement("div", { className: "target-box" },
react_1.default.createElement("div", { className: "btn-group" },
react_1.default.createElement("div", { style: { cursor: disabledBtn ? 'not-allowed' : 'pointer' }, className: " btn", onClick: disabledBtn ? undefined : function () { return handleAddField(type, fields); } },
react_1.default.createElement("i", { className: 'fa fa-chevron-right' }))),
react_1.default.createElement("div", { className: "transfer-target" },
react_1.default.createElement("div", { className: "transfer-target-header" },
react_1.default.createElement("span", { className: "title" }, type === 0 ? '排序字段' : '分组字段'),
react_1.default.createElement(antd_1.Button, { type: 'link', onClick: function () { return handleDeleteField(type, fields.map(function (field) { return field.name; })); } }, "\u6E05\u7A7A")),
react_1.default.createElement("div", { className: "transfer-target-content" },
react_1.default.createElement("div", { className: 'option', id: "transfer-target-".concat(type) },
type === 0 && fields.map(function (field, index) { return (react_1.default.createElement("span", { className: 'option-item', key: field.name },
react_1.default.createElement("span", { className: 'item-title' }, index + 1),
react_1.default.createElement("span", { onClick: function () { handleSortField(field); } },
react_1.default.createElement(icons_2.Icon, { icon: "".concat(field.order === 0 ? '#icon-toolshunxu' : '#icon-tooldaoxu'), symbol: true })),
react_1.default.createElement("span", { className: 'item-label' }, field.label),
react_1.default.createElement(icons_1.CloseOutlined, { onClick: function () { return handleDeleteField(type, [field.name]); } }))); }),
type === 1 && fields.map(function (field, index) { return (react_1.default.createElement("div", { className: 'option-item', key: field.name },
react_1.default.createElement("span", { className: 'item-title' }, index + 1),
react_1.default.createElement("span", { className: 'item-label' }, field.label),
react_1.default.createElement(icons_1.CloseOutlined, { onClick: function () { return handleDeleteField(type, [field.name]); } }))); })),
type === 1 && react_1.default.createElement("div", { className: 'transfer-target-footer' }, "\u5EFA\u8BAE\u9009\u62E9\u5C11\u4E8E8\u4E2A\u5206\u7EC4\u5B57\u6BB5 ")))));
};
return visible ? (react_1.default.createElement("div", { className: 'transfer-check' },
react_1.default.createElement("div", { className: 'transfer-check-group' },
react_1.default.createElement(antd_1.Checkbox, { checked: itemRepeat, onChange: function (e) { return handleCheckOption('repeat', e.target.checked); } }, "\u6570\u636E\u53BB\u91CD"),
react_1.default.createElement(antd_1.Checkbox, { checked: itemCount, disabled: itemSumCount, onChange: function (e) { return handleCheckOption('count', e.target.checked); } }, "\u4EC5\u67E5\u9879\u6570"),
react_1.default.createElement(antd_1.Checkbox, { checked: itemSumCount, disabled: itemCount, onChange: function (e) { return handleCheckOption('sumCount', e.target.checked); } }, "\u4EC5\u67E5\u603B\u6570")),
react_1.default.createElement("div", { className: 'transfer-container' },
react_1.default.createElement("div", { className: 'transfer-source' },
react_1.default.createElement("div", { className: "transfer-source-header" },
react_1.default.createElement("span", { className: "title" }, "\u663E\u793A\u5B57\u6BB5"),
react_1.default.createElement("div", { className: "option-group" }, Object.values(CheckAllOptionEnum).map(function (value, index) { return react_1.default.createElement("div", { key: index },
react_1.default.createElement("span", { className: "option", onClick: function () { return handleCheckAll(value); } }, value),
"\u00A0\u00A0"); }))),
react_1.default.createElement("div", { className: 'transfer-source-position' },
react_1.default.createElement(antd_1.Input, { ref: inputRef, onKeyDown: function (e) {
//键盘事件后清空值，后续重新输入
e.stopPropagation();
if (e.key === 'Enter') {
setTimeout(function () {
setSearchValue('');
}, 500);
}
}, onCompositionEnd: function (e) {
setTimeout(function () {
setSearchValue('');
}, 500);
}, onBlur: function () { return setSearchValue(''); }, value: searchValue, onChange: function (e) { return setSearchValue(e.target.value); } })),
react_1.default.createElement("div", { className: "transfer-source-content" },
react_1.default.createElement("div", { className: "source-content-inner", ref: innerRef }, showFields.map(function (field) { return (react_1.default.createElement("section", { key: field.name, className: (selectedShowField === null || selectedShowField === void 0 ? void 0 : selectedShowField.name) === field.name ? 'display-field display-field-active' : 'display-field' },
react_1.default.createElement(antd_1.Checkbox, { disabled: field.disabled, checked: field.checked, onChange: function (e) { return handleCheckShowField(field, e.target.checked, true); } }),
react_1.default.createElement("span", { className: 'display-field-label', onClick: function () { handleCheckShowField(field, false, false); } }, field.label))); })))),
react_1.default.createElement("div", { className: 'transfer-target-group' },
renderTarget(0, sortFields),
renderTarget(1, groupByFields))),
react_1.default.createElement("div", { style: { margin: '5px 0' } },
react_1.default.createElement(antd_1.Checkbox, { disabled: itemSumCount, checked: section, onChange: function (e) { return handleCheckSegment(e.target.checked); } }, "\u5206\u6BB5\u67E5\u8BE2"),
section && react_1.default.createElement(antd_1.Checkbox, { checked: leftOpenRightClose, onChange: function (e) { return setLeftOpenRightClose(e.target.checked); } }, "\u533A\u95F4\u5DE6\u5F00\u53F3\u95ED")),
section && (react_1.default.createElement("div", { className: 'transfer-segment-container' },
react_1.default.createElement("div", { className: 'left-content' },
react_1.default.createElement("div", { className: 'segment-select' },
react_1.default.createElement("div", { className: 'segment-select-item' },
react_1.default.createElement("span", null, "\u5206\u6BB5\u5B57\u6BB5"),
react_1.default.createElement(antd_1.Select, { style: { width: 150, marginLeft: 10 }, dropdownClassName: "dropdown-select-style", value: sectionField, onChange: function (value) { return handleChangeSectionField(value); } }, segmentFields.map(function (field) { return react_1.default.createElement(antd_1.Select.Option, { key: field.name, value: field.name }, field.label); }))),
react_1.default.createElement("div", { className: 'segment-select-item' },
react_1.default.createElement("span", null, "\u7C7B\u578B"),
react_1.default.createElement(antd_1.Select, { style: { width: 150, marginLeft: 10 }, value: avgSection, onChange: setAvgSection, dropdownClassName: "dropdown-select-style" },
react_1.default.createElement(antd_1.Select.Option, { value: true }, "\u5E73\u5747\u6BB5\u4F4D"),
react_1.default.createElement(antd_1.Select.Option, { value: false }, "\u81EA\u5B9A\u4E49\u6BB5\u4F4D"))),
react_1.default.createElement("div", { className: 'segment-select-item' },
react_1.default.createElement("span", null, "\u5206\u6BB5\u6807\u51C6"),
react_1.default.createElement(antd_1.Select, { value: sectionNorm, onChange: setSectionNorm, disabled: ((_a = segmentFields.find(function (field) { return field.name == sectionField; })) === null || _a === void 0 ? void 0 : _a.type) !== 'date', style: { width: 150, marginLeft: 10 }, dropdownClassName: "dropdown-select-style" }, types_1.SegmentStandardOptions.map(function (option) { return react_1.default.createElement(antd_1.Select.Option, { key: option.value, value: option.value }, option.title); }))),
react_1.default.createElement("div", { className: 'segment-select-item' },
react_1.default.createElement("span", null, avgSection ? '宽度' : '段位'),
avgSection ?
react_1.default.createElement(antd_1.InputNumber, { value: sectionWidthValue, onChange: function (value) { return setSectionWidthValue(value !== null && value !== void 0 ? value : 0); }, min: 0, type: 'number', style: { width: 150, marginLeft: 10 } }) :
react_1.default.createElement(antd_1.InputNumber, { value: sectionValue, onChange: function (value) { return setSectionValue(value !== null && value !== void 0 ? value : 0); }, type: 'number', style: { width: 150, marginLeft: 10 } })))),
!avgSection && (react_1.default.createElement("div", { className: 'right-content' },
react_1.default.createElement("div", { className: 'target-box' },
react_1.default.createElement("div", { className: "btn-group" },
react_1.default.createElement("div", { style: { cursor: false ? 'not-allowed' : 'pointer' }, className: "btn", onClick: handleAddSections },
react_1.default.createElement("i", { className: 'fa fa-chevron-right' }))),
react_1.default.createElement("div", { className: "transfer-target" },
react_1.default.createElement("div", { className: "transfer-target-header" },
react_1.default.createElement("span", { className: "title" }, "\u6BB5\u4F4D\u5217\u8868")),
react_1.default.createElement("div", { className: "transfer-target-content" },
react_1.default.createElement("div", { className: "target-content-inner" }, sections.map(function (section) { return (react_1.default.createElement("div", { className: 'option-item', key: section },
react_1.default.createElement("span", { className: 'item-label' }, section),
react_1.default.createElement("i", { className: 'fa fa-times', onClick: function () { return setSections(function (sections) { return sections.filter(function (item) { return item != section; }); }); } }))); }))))))))))) : null;
};
exports.default = OptionQuery;
//# sourceMappingURL=./renderers/CRUD/components/AdvancedQuery/OptionQuery.js.map