@bos-alpha/progress
Version:
进度管理
75 lines (74 loc) • 7.11 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 styled from '@emotion/styled';
import { Row, Col, Card, Button, Select, Input, Radio } from 'antd';
import { useState } from 'react';
import { Icon } from '@bos-alpha/common';
var Option = Select.Option;
export var ConditionAdd = function (_a) {
var onSearch = _a.onSearch;
// 规则列表
var _b = useState([]), rules = _b[0], setRules = _b[1];
// 创建一行空行 含默认值
var onRowAdd = function () {
setRules(__spreadArray(__spreadArray([], rules, true), [
{
logic: 'and',
field: 'name',
operator: '==',
value: ''
}
], false));
};
// 删除行
var onRowDelete = function (index) {
setRules(rules.filter(function (_, eq) { return eq !== index; }));
};
// 表单变更
var onFieldChange = function (filedName, index) { return function (e) {
var value;
switch (filedName) {
case 'logic':
case 'value':
value = e.target.value;
break;
default:
value = e;
}
var allRules = rules.map(function (rule, key) {
if (key === index) {
rule[filedName] = value;
}
return rule;
});
setRules(allRules);
}; };
return (_jsx(RulesMaker, { children: _jsx(Card, __assign({ title: _jsxs(Row, { children: [_jsx(Col, __assign({ flex: "1" }, { children: _jsx("div", { children: "\u8BBE\u7F6E\u7269\u9879\u914D\u7F6E\u89C4\u5219" }, void 0) }), void 0), _jsx(Col, { children: _jsx(CustomButton, __assign({ type: "default", onClick: function () { return onSearch(rules); } }, { children: "\u6821\u9A8C\u89C4\u5219" }), void 0) }, void 0)] }, void 0), className: "search-rules" }, { children: rules.length === 0 ? (_jsx(CustomButton, __assign({ onClick: onRowAdd }, { children: "\u70B9\u51FB\u521B\u5EFA\u7B2C\u4E00\u6761\u89C4\u5219" }), void 0)) : (rules.map(function (rule, index) { return (_jsxs("div", __assign({ className: "row-item" }, { children: [_jsx("div", __assign({ className: "col logic" }, { children: index !== 0 ? (_jsxs(Radio.Group, __assign({ onChange: onFieldChange('logic', index), value: rule.logic }, { children: [_jsx(Radio, __assign({ value: "and" }, { children: "and" }), void 0), _jsx(Radio, __assign({ value: "or" }, { children: "or" }), void 0)] }), void 0)) : null }), void 0), _jsx("div", __assign({ className: "col" }, { children: _jsxs(Select, __assign({ className: "name-select", onChange: onFieldChange('field', index), value: rule.field }, { children: [_jsx(Option, __assign({ value: "name" }, { children: "\u7269\u9879\u540D\u79F0" }), void 0), _jsx(Option, __assign({ value: "code" }, { children: "\u7269\u9879\u7F16\u7801" }), void 0), _jsx(Option, __assign({ value: "type" }, { children: "\u7269\u9879\u7C7B\u578B" }), void 0)] }), void 0) }), void 0), _jsx("div", __assign({ className: "col" }, { children: _jsxs(Select, __assign({ className: "operator-select", onChange: onFieldChange('operator', index), value: rule.operator }, { children: [_jsx(Option, __assign({ value: "==" }, { children: "=" }), void 0), _jsx(Option, __assign({ value: "!=" }, { children: "\u2260" }), void 0), _jsx(Option, __assign({ value: "<" }, { children: "<" }), void 0), _jsx(Option, __assign({ value: "<=" }, { children: "\u2264" }), void 0), _jsx(Option, __assign({ value: ">" }, { children: ">" }), void 0), _jsx(Option, __assign({ value: ">=" }, { children: "\u2265" }), void 0), _jsx(Option, __assign({ value: "like" }, { children: "\u5305\u542B" }), void 0)] }), void 0) }), void 0), _jsx("div", __assign({ className: "col flex1" }, { children: _jsx(Input, { onChange: onFieldChange('value', index), value: rule.value, placeholder: "\u8BF7\u5199\u503C" }, void 0) }), void 0), _jsx("div", __assign({ className: "col icon-add" }, { children: _jsx(CustomIcon, { type: "iconicon_add", title: "\u6DFB\u52A0\u4E00\u884C", onClick: onRowAdd }, void 0) }), void 0), _jsx("div", __assign({ className: "col icon-less" }, { children: _jsx(CustomIcon, { type: "iconicon_Disassociate", title: "\u5220\u9664", onClick: function () { return onRowDelete(index); } }, void 0) }), void 0)] }), index)); })) }), void 0) }, void 0));
};
var RulesMaker = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n .row-item {\n display: flex;\n align-items: center;\n padding-bottom: 10px;\n & > .col {\n margin: 0 2px;\n &.flex1 {\n flex: 1;\n }\n }\n .logic {\n width: 200px;\n }\n .name-select {\n width: 200px;\n }\n .operator-select {\n width: 100px;\n font-size: 16px;\n }\n .icon-add {\n margin-left: 20px;\n }\n .icon-less {\n margin-right: 50px;\n }\n }\n"], ["\n .row-item {\n display: flex;\n align-items: center;\n padding-bottom: 10px;\n & > .col {\n margin: 0 2px;\n &.flex1 {\n flex: 1;\n }\n }\n .logic {\n width: 200px;\n }\n .name-select {\n width: 200px;\n }\n .operator-select {\n width: 100px;\n font-size: 16px;\n }\n .icon-add {\n margin-left: 20px;\n }\n .icon-less {\n margin-right: 50px;\n }\n }\n"])));
var CustomIcon = styled(Icon)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: inline-block;\n font-size: 24px;\n cursor: pointer;\n color: #555;\n"], ["\n display: inline-block;\n font-size: 24px;\n cursor: pointer;\n color: #555;\n"])));
var CustomButton = styled(Button)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border-radius: 22px;\n"], ["\n border-radius: 22px;\n"])));
var templateObject_1, templateObject_2, templateObject_3;