@bos-alpha/data
Version:
数据管理
141 lines (140 loc) • 7.86 kB
JavaScript
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import { Select, message, Table } from 'antd';
import { Modal, uuid, prefixCls, Icon } from '@bos-alpha/common';
import styled from '@emotion/styled';
export var ConditionsMaker = function (_a) {
var visible = _a.visible, mainInfo = _a.mainInfo, editInfo = _a.editInfo, setVisible = _a.setVisible, onChange = _a.onChange;
var _b = useState([]), conditions = _b[0], setConditions = _b[1];
useEffect(function () {
if (!visible)
return;
addRow();
}, [visible]); // eslint-disable-line
// 实时提交给父级
useEffect(function () {
onChange && onChange(conditions);
}, [conditions]); // eslint-disable-line
var addRow = function (isAdd) {
if (isAdd || !editInfo.conditions) {
setConditions(__spreadArray(__spreadArray([], (isAdd ? conditions : []), true), [
{
key: uuid(),
field: '',
operator: '==',
joinField: '',
logic: 'and'
}
], false));
}
else {
setConditions(editInfo.conditions);
}
};
var onSelectChange = function (key, val, record) {
setConditions(conditions.map(function (item) {
var _a;
if (record.key === item.key) {
return __assign(__assign({}, item), (_a = {}, _a[key] = val, _a));
}
return item;
}));
};
// 移除从条件
var onRemove = function (item) {
if (conditions.length <= 1)
return message.warning('必须保留一项');
Modal.confirm({
title: '删除连接条件',
content: "\u5C06\u8981\u5220\u9664\u8BE5\u8FDE\u63A5\u6761\u4EF6\uFF0C\u662F\u5426\u786E\u5B9A\uFF1F",
centered: true,
onOk: function () {
setConditions(conditions.filter(function (el) { return el.key !== item.key; }));
}
});
};
var columns = [
{
dataIndex: 'logic',
title: '条件连接符号',
width: 130,
render: function (logic, record, index) {
return index === 0 ? (_jsx("span", { children: "\uFF08\u65E0\uFF09" }, void 0)) : (_jsx(Select, { className: "select", defaultValue: "and", options: [
{
label: 'AND',
value: 'and'
},
{
label: 'OR',
value: 'or'
}
], onChange: function (val) { return onSelectChange('logic', val, record); }, value: logic, placeholder: "\u8BF7\u9009\u62E9" }, void 0));
}
},
{
dataIndex: 'field',
title: '主表属性',
render: function (field, record) { return (_jsx(Select, { className: "select", options: (mainInfo.fields || []).map(function (field) { return ({
label: field,
value: field
}); }), onChange: function (val) { return onSelectChange('field', val, record); }, value: field, placeholder: "\u8BF7\u9009\u62E9" }, void 0)); }
},
{
dataIndex: 'operator',
title: '操作符',
render: function (operator, record) { return (_jsx(Select, { className: "select", defaultValue: "==", options: [
{
label: '等于',
value: '=='
},
{
label: '包含',
value: 'like'
}
], onChange: function (val) { return onSelectChange('operator', val, record); }, value: operator, placeholder: "\u8BF7\u9009\u62E9\u6761\u4EF6\u5173\u7CFB" }, void 0)); }
},
{
dataIndex: 'joinField',
title: '从表属性',
render: function (joinField, record) { return (_jsx(Select, { className: "select", options: ((editInfo === null || editInfo === void 0 ? void 0 : editInfo.fields) || []).map(function (field) { return ({
label: field,
value: field
}); }), onChange: function (val) { return onSelectChange('joinField', val, record); }, placeholder: "\u8BF7\u9009\u62E9", value: joinField, style: { width: '100%' } }, void 0)); }
},
{
dataIndex: 'option',
title: '操作',
width: 80,
align: 'center',
render: function (option, record) { return (_jsx("span", __assign({ className: "delete-btn", onClick: function () { return onRemove(record); } }, { children: "\u5220\u9664" }), void 0)); }
}
];
return (_jsxs(Modal, __assign({ title: "\u7F16\u8F91\u8FDE\u63A5\u6761\u4EF6", visible: visible, width: 836, footer: false, onCancel: function () { return setVisible(false); } }, { children: [_jsx(CustomTable, { bordered: true, columns: columns, dataSource: conditions, pagination: false }, void 0), _jsx(AddBtn, { children: _jsxs("span", __assign({ onClick: function () { return addRow(true); } }, { children: [_jsx(Icon, { className: "add-icon", type: "iconicon_add" }, void 0), _jsx("span", { children: "\u65B0\u5EFA..." }, void 0)] }), void 0) }, void 0)] }), void 0));
};
var CustomTable = styled(Table)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n .", "-table-cell {\n padding: 6px 4px;\n }\n .select {\n width: 100%;\n }\n .delete-btn {\n cursor: pointer;\n color: #2787ff;\n padding: 5px 10px;\n font-size: 14px;\n }\n"], ["\n .", "-table-cell {\n padding: 6px 4px;\n }\n .select {\n width: 100%;\n }\n .delete-btn {\n cursor: pointer;\n color: #2787ff;\n padding: 5px 10px;\n font-size: 14px;\n }\n"])), prefixCls);
var AddBtn = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n padding: 6px 10px;\n border-left: 1px solid #f0f0f0;\n border-right: 1px solid #f0f0f0;\n border-bottom: 1px solid #f0f0f0;\n & > span {\n cursor: pointer;\n color: #2787ff;\n font-size: 14px;\n & > .add-icon {\n margin-right: 4px;\n }\n }\n"], ["\n padding: 6px 10px;\n border-left: 1px solid #f0f0f0;\n border-right: 1px solid #f0f0f0;\n border-bottom: 1px solid #f0f0f0;\n & > span {\n cursor: pointer;\n color: #2787ff;\n font-size: 14px;\n & > .add-icon {\n margin-right: 4px;\n }\n }\n"])));
var templateObject_1, templateObject_2;