fastlion-amis
Version:
一种MIS页面生成工具
470 lines (469 loc) • 37.9 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var checkbox_1 = (0, tslib_1.__importDefault)(require("antd/lib/checkbox"));
var message_1 = (0, tslib_1.__importDefault)(require("antd/lib/message"));
var button_1 = (0, tslib_1.__importDefault)(require("antd/lib/button"));
var select_1 = (0, tslib_1.__importDefault)(require("antd/lib/select"));
var input_number_1 = (0, tslib_1.__importDefault)(require("antd/lib/input-number"));
var helper_1 = require("../../utils/helper");
var input_1 = (0, tslib_1.__importDefault)(require("antd/lib/input"));
var lodash_1 = require("lodash");
var sortablejs_1 = (0, tslib_1.__importDefault)(require("sortablejs"));
var icons_1 = require("@ant-design/icons");
var icons_2 = require("../icons");
var CheckOption;
(function (CheckOption) {
CheckOption["SELECT_ALL"] = "\u5168\u9009";
CheckOption["SELECT_REVERSE"] = "\u53CD\u9009";
CheckOption["CLEAR_ALL"] = "\u5168\u6E05";
})(CheckOption || (CheckOption = {}));
var segmentStandardList = [
{ title: "年", value: "year" },
{ title: "季度", value: "quarter" },
{ title: "月", value: "month" },
{ title: "周", value: "week" },
{ title: "日", value: "day" },
{ title: "时", value: "hour" },
{ title: "分", value: "minute" },
{ title: "秒", value: "second" },
];
var OptionTransfer = (0, react_1.forwardRef)(function (props, ref) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
var allFields = props.allFields, defaultOptionsParam = props.defaultOptionsParam, onChange = props.onChange;
var segmentFields = allFields.filter(function (field) { return field.type == 'number' || field.type == 'date' || field.type == 'progress'; });
var _r = (0, react_1.useState)((_a = defaultOptionsParam === null || defaultOptionsParam === void 0 ? void 0 : defaultOptionsParam.itemRepeat) !== null && _a !== void 0 ? _a : false), itemRepeat = _r[0], setItemRepeat = _r[1];
var _s = (0, react_1.useState)((_b = defaultOptionsParam === null || defaultOptionsParam === void 0 ? void 0 : defaultOptionsParam.itemCount) !== null && _b !== void 0 ? _b : false), itemCount = _s[0], setItemCount = _s[1];
var _t = (0, react_1.useState)((_c = defaultOptionsParam === null || defaultOptionsParam === void 0 ? void 0 : defaultOptionsParam.itemSumCount) !== null && _c !== void 0 ? _c : false), itemSumCount = _t[0], setItemSumCount = _t[1];
var _u = (0, react_1.useState)((_d = defaultOptionsParam === null || defaultOptionsParam === void 0 ? void 0 : defaultOptionsParam.section) !== null && _d !== void 0 ? _d : false), showSegment = _u[0], setShowSegment = _u[1];
var _v = (0, react_1.useState)(allFields.map(function (field) {
var _a;
var checked = defaultOptionsParam ? (defaultOptionsParam.showFields.length == 0 ? true : defaultOptionsParam.showFields.includes(field.name)) : true;
var disabled = (_a = defaultOptionsParam === null || defaultOptionsParam === void 0 ? void 0 : defaultOptionsParam.groupByFields.includes(field.name)) !== null && _a !== void 0 ? _a : false;
return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, field), { checked: checked, disabled: disabled });
})), showFields = _v[0], setShowFields = _v[1];
(0, react_1.useEffect)(function () {
if (!!defaultOptionsParam)
handleReset();
}, [defaultOptionsParam]);
var _w = (0, react_1.useState)((_f = (0, lodash_1.flatMap)((_e = defaultOptionsParam === null || defaultOptionsParam === void 0 ? void 0 : defaultOptionsParam.sortFields) !== null && _e !== void 0 ? _e : [], function (field) {
var fields = field.split(',');
var fieldName = fields[0];
var order = fields.includes('desc') ? 1 : 0;
var targetField = allFields.find(function (item) { return item.name == fieldName; });
if (targetField) {
return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, targetField), { order: order });
}
return [];
})) !== null && _f !== void 0 ? _f : []), sortFields = _w[0], setSortFields = _w[1];
var _x = (0, react_1.useState)(allFields.filter(function (field) { return defaultOptionsParam === null || defaultOptionsParam === void 0 ? void 0 : defaultOptionsParam.groupByFields.includes(field.name); })), groupByFields = _x[0], setGroupByFields = _x[1];
var _y = (0, react_1.useState)(), selectedShowField = _y[0], setSelectedShowField = _y[1];
var _z = (0, react_1.useState)((_g = defaultOptionsParam === null || defaultOptionsParam === void 0 ? void 0 : defaultOptionsParam.sectionParams.leftOpenRightClose) !== null && _g !== void 0 ? _g : false), leftOpenRightClose = _z[0], setLeftOpenRightClose = _z[1];
var _0 = (0, react_1.useState)((_h = defaultOptionsParam === null || defaultOptionsParam === void 0 ? void 0 : defaultOptionsParam.sectionParams.sectionField) !== null && _h !== void 0 ? _h : (_j = segmentFields[0]) === null || _j === void 0 ? void 0 : _j.name), sectionField = _0[0], setSectionField = _0[1];
var _1 = (0, react_1.useState)((_k = defaultOptionsParam === null || defaultOptionsParam === void 0 ? void 0 : defaultOptionsParam.sectionParams.avgSection) !== null && _k !== void 0 ? _k : true), avgSection = _1[0], setAvgSection = _1[1];
var _2 = (0, react_1.useState)((_m = (_l = defaultOptionsParam === null || defaultOptionsParam === void 0 ? void 0 : defaultOptionsParam.sectionParams.sections) === null || _l === void 0 ? void 0 : _l[0]) !== null && _m !== void 0 ? _m : 1), sectionWidthValue = _2[0], setSectionWidthValue = _2[1];
var _3 = (0, react_1.useState)(1), sectionValue = _3[0], setSectionValue = _3[1];
var _4 = (0, react_1.useState)((_o = defaultOptionsParam === null || defaultOptionsParam === void 0 ? void 0 : defaultOptionsParam.sectionParams.sections) !== null && _o !== void 0 ? _o : []), sections = _4[0], setSections = _4[1];
var _5 = (0, react_1.useState)((_p = defaultOptionsParam === null || defaultOptionsParam === void 0 ? void 0 : defaultOptionsParam.sectionParams.sectionNorm) !== null && _p !== void 0 ? _p : ''), sectionNorm = _5[0], setSectionNorm = _5[1];
var _6 = (0, react_1.useState)(''), searchValue = _6[0], setSearchValue = _6[1];
var innerRef = (0, react_1.useRef)(null);
var inputRef = (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 = (0, tslib_1.__spreadArray)([], fields, true);
var tempField = fields[oldIndex];
newFields[oldIndex] = newFields[newIndex];
newFields[newIndex] = tempField;
return newFields;
});
}
}
});
return function () {
sortable.destroy();
};
}, []);
(0, react_1.useEffect)(function () {
if (searchValue) {
debounceHandleSearch(searchValue);
}
}, [searchValue, showFields]);
var handleSearch = function (searchValue) {
var _a;
//匹配规则，1.全匹配 2.以关键字开头匹配 3.模糊匹配
var target = showFields.find(function (item) { return item.label === searchValue; });
!target && (target = showFields.find(function (item) { return item.label.startsWith(searchValue); }));
!target && (target = showFields.find(function (item) { var _a; return (_a = item.label) === null || _a === void 0 ? void 0 : _a.includes(searchValue); }));
if (target) {
setSelectedShowField(target);
if (target.name === (selectedShowField === null || selectedShowField === void 0 ? void 0 : selectedShowField.name)) {
var activeDom = (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('.display-field-active');
activeDom === null || activeDom === void 0 ? void 0 : activeDom.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
}
};
var debounceHandleSearch = (0, lodash_1.debounce)(handleSearch, 100);
(0, react_1.useEffect)(function () {
var _a;
if (selectedShowField && searchValue) {
var activeDom = (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('.display-field-active');
activeDom === null || activeDom === void 0 ? void 0 : activeDom.scrollIntoView({ behavior: 'smooth', block: 'start' });
setSearchValue('');
}
}, [selectedShowField]);
(0, react_1.useEffect)(function () {
var show = showFields.filter(function (field) { return field.checked; }).map(function (field) { return field.name; });
var sort = sortFields.map(function (field) { return "" + field.name + (field.order === 1 ? ',desc' : ''); });
var group = groupByFields.map(function (field) { return field.name; });
var checkedAll = showFields.every(function (field) { return field.checked; });
var retShowField = (itemCount || itemRepeat || itemSumCount || groupByFields.length > 0) ? show : checkedAll ? [] : show;
var ellipsis = !itemRepeat && !itemCount && !itemSumCount && !showSegment && retShowField.length == 0 && sort.length == 0 && group.length == 0;
var options = {
itemRepeat: itemRepeat,
itemCount: itemCount,
itemSumCount: itemSumCount,
showFields: retShowField,
sortFields: sort,
groupByFields: group,
section: showSegment,
sectionParams: {
leftOpenRightClose: leftOpenRightClose,
sectionField: sectionField,
avgSection: avgSection,
sections: avgSection ? [sectionWidthValue] : sections,
sectionNorm: sectionNorm !== null && sectionNorm !== void 0 ? sectionNorm : ''
}
};
onChange({ rawShowFields: show, rawOptionsParams: options, optionsParam: !ellipsis ? options : undefined });
}, [itemRepeat, itemCount, itemSumCount, showFields, showSegment, sortFields, groupByFields, leftOpenRightClose, sectionField, avgSection, sectionWidthValue, sections, sectionNorm]);
(0, react_1.useImperativeHandle)(ref, function () { return ({ handleReset: handleReset }); });
var handleReset = function () {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
setItemRepeat((_a = defaultOptionsParam === null || defaultOptionsParam === void 0 ? void 0 : defaultOptionsParam.itemRepeat) !== null && _a !== void 0 ? _a : false);
setItemCount((_b = defaultOptionsParam === null || defaultOptionsParam === void 0 ? void 0 : defaultOptionsParam.itemCount) !== null && _b !== void 0 ? _b : false);
setItemSumCount((_c = defaultOptionsParam === null || defaultOptionsParam === void 0 ? void 0 : defaultOptionsParam.itemSumCount) !== null && _c !== void 0 ? _c : false);
setShowFields(allFields.map(function (field) {
var _a;
var checked = ((defaultOptionsParam === null || defaultOptionsParam === void 0 ? void 0 : defaultOptionsParam.itemCount) === true && !defaultOptionsParam.showFields.includes(field.name)) ? false : defaultOptionsParam ? (defaultOptionsParam.showFields.length == 0 ? true : defaultOptionsParam.showFields.includes(field.name)) : true;
var disabled = (_a = defaultOptionsParam === null || defaultOptionsParam === void 0 ? void 0 : defaultOptionsParam.groupByFields.includes(field.name)) !== null && _a !== void 0 ? _a : false;
return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, field), { checked: checked, disabled: disabled });
}));
setSortFields((_e = (0, lodash_1.flatMap)((_d = defaultOptionsParam === null || defaultOptionsParam === void 0 ? void 0 : defaultOptionsParam.sortFields) !== null && _d !== void 0 ? _d : [], function (field) {
var fields = field.split(',');
var fieldName = fields[0];
var order = fields.includes('desc') ? 1 : 0;
var targetField = allFields.find(function (item) { return item.name == fieldName; });
if (targetField) {
return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, targetField), { order: order });
}
return [];
})) !== null && _e !== void 0 ? _e : []);
setGroupByFields((_g = (0, lodash_1.flatMap)((_f = defaultOptionsParam === null || defaultOptionsParam === void 0 ? void 0 : defaultOptionsParam.groupByFields) !== null && _f !== void 0 ? _f : [], function (groupField) { var _a; return (_a = allFields.find(function (field) { return field.name == groupField; })) !== null && _a !== void 0 ? _a : []; })) !== null && _g !== void 0 ? _g : []);
setSelectedShowField(undefined);
setLeftOpenRightClose((_h = defaultOptionsParam === null || defaultOptionsParam === void 0 ? void 0 : defaultOptionsParam.sectionParams.leftOpenRightClose) !== null && _h !== void 0 ? _h : false);
setSectionField((_j = defaultOptionsParam === null || defaultOptionsParam === void 0 ? void 0 : defaultOptionsParam.sectionParams.sectionField) !== null && _j !== void 0 ? _j : (_k = segmentFields[0]) === null || _k === void 0 ? void 0 : _k.name);
setAvgSection((_l = defaultOptionsParam === null || defaultOptionsParam === void 0 ? void 0 : defaultOptionsParam.sectionParams.avgSection) !== null && _l !== void 0 ? _l : true);
setSectionWidthValue((_o = (_m = defaultOptionsParam === null || defaultOptionsParam === void 0 ? void 0 : defaultOptionsParam.sectionParams.sections) === null || _m === void 0 ? void 0 : _m[0]) !== null && _o !== void 0 ? _o : 1);
setSectionValue(1);
setSections((_p = defaultOptionsParam === null || defaultOptionsParam === void 0 ? void 0 : defaultOptionsParam.sectionParams.sections) !== null && _p !== void 0 ? _p : []);
setSectionNorm((_q = defaultOptionsParam === null || defaultOptionsParam === void 0 ? void 0 : defaultOptionsParam.sectionParams.sectionNorm) !== null && _q !== void 0 ? _q : '');
};
var handleCheckedChange = function (showField, checked) {
var _a;
checked ? setSelectedShowField(showField) : setSelectedShowField(function (field) { return (field === null || field === void 0 ? void 0 : field.name) === showField.name ? undefined : field; });
var fields = showFields.map(function (field) {
if (field.name === showField.name) {
return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, field), { checked: checked });
}
return field;
});
setShowFields(fields);
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
};
var handleCheckedOption = function (option) {
var fields;
switch (option) {
case CheckOption.SELECT_ALL:
fields = (itemRepeat || itemCount || itemSumCount) ? showFields.slice().map(function (field) {
if (field.comparable === true && !field.disabled) {
return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, field), { checked: true });
}
return field;
}) : showFields.slice().map(function (field) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, field), { checked: true })); });
break;
case CheckOption.CLEAR_ALL:
fields = showFields.slice().map(function (field) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, field), { checked: field.disabled ? field.checked : (itemRepeat || itemCount || itemSumCount ? false : field.disabled) })); });
break;
case CheckOption.SELECT_REVERSE:
fields = showFields.slice().map(function (field) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, field), { checked: !field.disabled ? !field.checked : field.checked })); });
break;
}
setShowFields(fields);
};
var handleAddField = function (type, fields) {
if (selectedShowField) {
if (type === 0) {
var tempFields = fields.slice();
if (itemCount || itemSumCount) {
message_1.default.warning('仅查项数,仅查总数不能使用字段排序');
return;
}
if (showSegment && (selectedShowField.type != 'number' && selectedShowField.type != 'date' && selectedShowField.type != 'progress')) {
message_1.default.warning('分段查询,非数字时间类型不能使用字段排序');
return;
}
if (!tempFields.some(function (field) { return field.name === selectedShowField.name; })) {
tempFields.push((0, tslib_1.__assign)((0, tslib_1.__assign)({}, selectedShowField), { order: 0 }));
setSortFields(tempFields);
}
else {
message_1.default.warning('已添加过该字段');
}
}
else {
var tempFields = fields.slice();
if (!tempFields.some(function (field) { return field.name === selectedShowField.name; })) {
tempFields.push(selectedShowField);
setGroupByFields(tempFields);
}
else {
message_1.default.warning('已添加过该字段');
return;
}
setShowFields(function (fields) { return fields.map(function (field) {
var _a;
if (field.name === selectedShowField.name) {
return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, field), { checked: true, disabled: true });
}
if (fields.every(function (field) { return field.checked; })) {
return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, field), { checked: (_a = field.isNumerical) !== null && _a !== void 0 ? _a : false });
}
return field;
}); });
}
}
};
var handleDeleteField = function (type, names, fields) {
if (type === 0) {
var tempFields = fields.slice();
setSortFields(tempFields.filter(function (field) { return !names.includes(field.name); }));
}
else {
var tempFields = fields.slice();
setGroupByFields(tempFields.filter(function (field) { return !names.includes(field.name); }));
var tempShowFields = showFields.slice().map(function (field) {
var target = names.find(function (name) { return name === field.name; });
if (target) {
return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, field), { checked: false, disabled: false });
}
return field;
});
setShowFields(tempShowFields);
}
};
var handleSortFields = function (field, sortfields) {
var tempFields = sortfields.slice().map(function (sortField) {
if (field.name === sortField.name) {
return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, sortField), { order: 1 ^ sortField.order });
}
return sortField;
});
setSortFields(tempFields);
};
// 勾选数据去重
var handleCheckedItemRepeat = function (checked) {
setItemRepeat(checked);
if (checked) {
setShowFields(function (fields) { return fields.map(function (field) {
if (field.comparable === false) {
return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, field), { checked: false });
}
return field;
}); });
}
};
// 勾选仅查项数
var handleCheckedItemCount = function (checked) {
setItemCount(checked);
setSortFields([]);
if (checked && showFields.every(function (item) { return item.checked; })) {
setShowFields(function (fields) { return fields.map(function (field) { return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, field), { checked: false })); }); });
}
};
//勾选仅查总数
var handleCheckedItemSumCount = function (checked) {
if (checked && showFields.every(function (item) { return item.checked; })) {
setGroupByFields([]);
setSortFields([]);
setShowFields(function (fields) { return fields.map(function (field) {
var isChecked = field.type == 'number' || field.type == 'progress';
return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, field), { checked: isChecked });
}); });
}
setItemSumCount(checked);
};
//勾选分段字段
var handleCheckedSegment = 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 (0, tslib_1.__assign)((0, tslib_1.__assign)({}, field), { checked: isChecked });
}
return field;
});
}
return fields;
});
}
setShowSegment(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 = function (section) {
if (!sections.includes(section)) {
setSections(function (sections) { return sections.concat(section); });
}
else {
message_1.default.info('已添加过该段位');
}
};
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;
// || fields.length >= 8
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(button_1.default, { type: 'link', onClick: function () { return handleDeleteField(type, fields.map(function (field) { return field.name; }), fields); } }, "\u6E05\u7A7A")),
react_1.default.createElement("div", { id: "transfer-target-" + type, className: "transfer-target-content" },
react_1.default.createElement("div", { className: 'option' },
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 () { return handleSortFields(field, sortFields); } },
react_1.default.createElement(icons_2.Icon, { icon: "" + (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], fields); } }))); }),
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], fields); } }))); })),
type === 1 && react_1.default.createElement("div", { className: 'transfer-target-footer' }, "\u5EFA\u8BAE\u9009\u62E9\u5C11\u4E8E8\u4E2A\u5206\u7EC4\u5B57\u6BB5 ")))));
};
return (react_1.default.createElement("div", { className: 'transfer-check' },
react_1.default.createElement("div", { className: 'transfer-check-group' }, (0, helper_1.isMobile)() ? react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(button_1.default, { type: "text", className: "transfer-check-bat " + (itemRepeat ? 'transfer-check-bat-true' : ''), onClick: function () { return handleCheckedItemRepeat(!itemRepeat); } },
"\u6570\u636E\u53BB\u91CD",
itemRepeat && react_1.default.createElement("span", { className: 'transfer-check-bat-icon' })),
react_1.default.createElement(button_1.default, { type: "text", className: "transfer-check-bat " + (itemCount ? 'transfer-check-bat-true' : '') + "'", disabled: itemSumCount, onClick: function () { return handleCheckedItemCount(!itemCount); } },
"\u4EC5\u67E5\u9879\u6570",
itemCount && react_1.default.createElement("span", { className: 'transfer-check-bat-icon' })),
react_1.default.createElement(button_1.default, { type: "text", className: "transfer-check-bat " + (itemSumCount ? 'transfer-check-bat-true' : ''), disabled: itemCount, onClick: function () { return handleCheckedItemSumCount(!itemSumCount); } },
"\u4EC5\u67E5\u603B\u6570",
itemSumCount && react_1.default.createElement("span", { className: 'transfer-check-bat-icon' })))
:
react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(checkbox_1.default, { checked: itemRepeat, onChange: function (e) { return handleCheckedItemRepeat(e.target.checked); } }, "\u6570\u636E\u53BB\u91CD"),
react_1.default.createElement(checkbox_1.default, { checked: itemCount, disabled: itemSumCount, onChange: function (e) { return handleCheckedItemCount(e.target.checked); } }, "\u4EC5\u67E5\u9879\u6570"),
react_1.default.createElement(checkbox_1.default, { checked: itemSumCount, disabled: itemCount, onChange: function (e) { return handleCheckedItemSumCount(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" }, (0, helper_1.isMobile)() ? react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", null,
react_1.default.createElement("span", { className: "option", onClick: function () {
handleCheckedOption(CheckOption.SELECT_REVERSE);
} }, CheckOption.SELECT_REVERSE)))
:
react_1.default.createElement(react_1.default.Fragment, null, Object.values(CheckOption).map(function (value, index) { return (react_1.default.createElement("div", { key: index },
react_1.default.createElement("span", { className: "option", onClick: function () { return handleCheckedOption(value); } }, value),
"\u00A0\u00A0")); })))),
react_1.default.createElement("div", { className: 'transfer-source-position' },
react_1.default.createElement(input_1.default, { disabled: (0, helper_1.isMobile)(), 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", { className: (selectedShowField === null || selectedShowField === void 0 ? void 0 : selectedShowField.name) === field.name ? 'display-field display-field-active' : 'display-field', key: field.name },
react_1.default.createElement(checkbox_1.default, { disabled: field.disabled, checked: field.checked, onChange: function (e) { return handleCheckedChange(field, e.target.checked); } }),
react_1.default.createElement("span", { className: 'display-field-label', onClick: function () {
var _a;
setSelectedShowField((selectedShowField === null || selectedShowField === void 0 ? void 0 : selectedShowField.name) === field.name ? undefined : field);
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
} }, field.label))); })))),
react_1.default.createElement("div", { className: 'transfer-target-group' },
renderTarget(0, sortFields),
renderTarget(1, groupByFields))),
react_1.default.createElement("div", { className: 'transfer-check-group' },
react_1.default.createElement(checkbox_1.default, { disabled: itemSumCount, checked: showSegment, onChange: function (e) { return handleCheckedSegment(e.target.checked); } }, "\u5206\u6BB5\u67E5\u8BE2"),
showSegment && react_1.default.createElement(checkbox_1.default, { checked: leftOpenRightClose, onChange: function (e) { return setLeftOpenRightClose(e.target.checked); } }, "\u533A\u95F4\u5DE6\u5F00\u53F3\u95ED")),
showSegment && (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(select_1.default, { value: sectionField, onChange: function (value) { return handleChangeSectionField(value); }, style: { width: 150, marginLeft: 10 }, dropdownClassName: "dropdown-select-style" }, segmentFields.map(function (field) { return (react_1.default.createElement(select_1.default.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(select_1.default, { style: { width: 150, marginLeft: 10 }, value: avgSection, onChange: function (value) { return setAvgSection(value); }, dropdownClassName: "dropdown-select-style" },
react_1.default.createElement(select_1.default.Option, { value: true }, "\u5E73\u5747\u6BB5\u4F4D"),
react_1.default.createElement(select_1.default.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(select_1.default, { onChange: function (value) { return setSectionNorm(value); }, value: sectionNorm, disabled: ((_q = segmentFields.find(function (field) { return field.name == sectionField; })) === null || _q === void 0 ? void 0 : _q.type) !== 'date', style: { width: 150, marginLeft: 10 }, dropdownClassName: "dropdown-select-style" }, segmentStandardList.map(function (item) { return (react_1.default.createElement(select_1.default.Option, { key: item.value, value: item.value }, item.title)); }))),
react_1.default.createElement("div", { className: 'segment-select-item' },
react_1.default.createElement("span", null, avgSection ? '宽度' : '段位'),
avgSection ?
react_1.default.createElement(input_number_1.default, { 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(input_number_1.default, { 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: function () { return handleAddSections(sectionValue); } },
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; }); }); } }))); })))))))))));
});
exports.default = OptionTransfer;
//# sourceMappingURL=./components/Lion/OptionTransfer.js.map