### What problem does this PR solve? feat: Add SwitchOperatorOptions to Select of Switch #1739 ### Type of change - [x] New Feature (non-breaking change which adds functionality)tags/v0.10.0
| @@ -30,7 +30,7 @@ export default defineConfig({ | |||
| copy: ['src/conf.json'], | |||
| proxy: { | |||
| '/v1': { | |||
| target: 'http://localhost:9380/', | |||
| target: 'http://123.60.95.134:9380/', | |||
| changeOrigin: true, | |||
| ws: true, | |||
| logger: console, | |||
| @@ -815,6 +815,24 @@ The above is the content you need to summarize.`, | |||
| password: 'Password', | |||
| switch: 'Switch', | |||
| logicalOperator: 'Logical operator', | |||
| switchOperatorOptions: { | |||
| equal: 'equal', | |||
| notEqual: 'notEqual', | |||
| gt: 'Greater than', | |||
| ge: 'Greater equal', | |||
| lt: 'Less than', | |||
| le: 'Less equal', | |||
| contains: 'Contains', | |||
| notContains: 'Not contains', | |||
| startWith: 'Start with', | |||
| endWith: 'End with', | |||
| empty: 'Empty', | |||
| notEmpty: 'Not empty', | |||
| }, | |||
| switchLogicOperatorOptions: { | |||
| and: 'And', | |||
| or: 'Or', | |||
| }, | |||
| }, | |||
| footer: { | |||
| profile: 'All rights reserved @ React', | |||
| @@ -773,6 +773,24 @@ export default { | |||
| password: '密碼', | |||
| switch: '條件', | |||
| logicalOperator: '操作符', | |||
| switchOperatorOptions: { | |||
| equal: '等於', | |||
| notEqual: '不等於', | |||
| gt: '大於', | |||
| ge: '大於等於', | |||
| lt: '小於', | |||
| le: '小於等於', | |||
| contains: '包含', | |||
| notContains: '不包含', | |||
| startWith: '開始是', | |||
| endWith: '結束是', | |||
| empty: '為空', | |||
| notEmpty: '不為空', | |||
| }, | |||
| switchLogicOperatorOptions: { | |||
| and: '與', | |||
| or: '或', | |||
| }, | |||
| }, | |||
| footer: { | |||
| profile: '“保留所有權利 @ react”', | |||
| @@ -791,6 +791,24 @@ export default { | |||
| password: '密码', | |||
| switch: '条件', | |||
| logicalOperator: '操作符', | |||
| switchOperatorOptions: { | |||
| equal: '等于', | |||
| notEqual: '不等于', | |||
| gt: '大于', | |||
| ge: '大于等于', | |||
| lt: '小于', | |||
| le: '小于等于', | |||
| contains: '包含', | |||
| notContains: '不包含', | |||
| startWith: '开始是', | |||
| endWith: '结束是', | |||
| empty: '为空', | |||
| notEmpty: '不为空', | |||
| }, | |||
| switchLogicOperatorOptions: { | |||
| and: '与', | |||
| or: '或', | |||
| }, | |||
| }, | |||
| footer: { | |||
| profile: 'All rights reserved @ React', | |||
| @@ -2635,3 +2635,20 @@ export const ExeSQLOptions = ['mysql', 'postgresql', 'mariadb'].map((x) => ({ | |||
| })); | |||
| export const SwitchElseTo = 'end_cpn_id'; | |||
| export const SwitchOperatorOptions = [ | |||
| { value: '=', label: 'equal' }, | |||
| { value: '≠', label: 'notEqual' }, | |||
| { value: '>', label: 'gt' }, | |||
| { value: '≥', label: 'ge' }, | |||
| { value: '<', label: 'lt' }, | |||
| { value: '≤', label: 'le' }, | |||
| { value: 'contains', label: 'contains' }, | |||
| { value: 'not contains', label: 'notContains' }, | |||
| { value: 'start with', label: 'startWith' }, | |||
| { value: 'end with', label: 'endWith' }, | |||
| { value: 'empty', label: 'empty' }, | |||
| { value: 'not empty', label: 'notEmpty' }, | |||
| ]; | |||
| export const SwitchLogicOperatorOptions = ['and', 'or']; | |||
| @@ -58,7 +58,7 @@ const ExeSQLForm = ({ onValuesChange, form }: IOperatorForm) => { | |||
| > | |||
| <InputNumber></InputNumber> | |||
| </Form.Item> | |||
| <TopNItem initialValue={30} max={100000}></TopNItem> | |||
| <TopNItem initialValue={30} max={1000}></TopNItem> | |||
| </Form> | |||
| ); | |||
| }; | |||
| @@ -1,7 +1,13 @@ | |||
| import { CloseOutlined } from '@ant-design/icons'; | |||
| import { Button, Card, Form, Input, Select, Typography } from 'antd'; | |||
| import { useMemo } from 'react'; | |||
| import { useTranslation } from 'react-i18next'; | |||
| import { Operator, SwitchElseTo } from '../constant'; | |||
| import { | |||
| Operator, | |||
| SwitchElseTo, | |||
| SwitchLogicOperatorOptions, | |||
| SwitchOperatorOptions, | |||
| } from '../constant'; | |||
| import { useBuildFormSelectOptions } from '../form-hooks'; | |||
| import { IOperatorForm, ISwitchForm } from '../interface'; | |||
| import { getOtherFieldValues } from '../utils'; | |||
| @@ -28,6 +34,20 @@ const SwitchForm = ({ onValuesChange, node, form }: IOperatorForm) => { | |||
| return conditions?.filter((x) => !!x).map((x) => x?.to) ?? []; | |||
| }; | |||
| const switchOperatorOptions = useMemo(() => { | |||
| return SwitchOperatorOptions.map((x) => ({ | |||
| value: x.value, | |||
| label: t(`flow.switchOperatorOptions.${x.label}`), | |||
| })); | |||
| }, [t]); | |||
| const switchLogicOperatorOptions = useMemo(() => { | |||
| return SwitchLogicOperatorOptions.map((x) => ({ | |||
| value: x, | |||
| label: t(`flow.switchLogicOperatorOptions.${x}`), | |||
| })); | |||
| }, [t]); | |||
| return ( | |||
| <Form | |||
| labelCol={{ span: 8 }} | |||
| @@ -60,13 +80,19 @@ const SwitchForm = ({ onValuesChange, node, form }: IOperatorForm) => { | |||
| /> | |||
| } | |||
| > | |||
| <Form.Item | |||
| label={t('flow.logicalOperator')} | |||
| name={[field.name, 'logical_operator']} | |||
| > | |||
| <Input /> | |||
| <Form.Item noStyle dependencies={[field.name, 'items']}> | |||
| {({ getFieldValue }) => | |||
| getFieldValue(['conditions', field.name, 'items'])?.length > | |||
| 1 && ( | |||
| <Form.Item | |||
| label={t('flow.logicalOperator')} | |||
| name={[field.name, 'logical_operator']} | |||
| > | |||
| <Select options={switchLogicOperatorOptions} /> | |||
| </Form.Item> | |||
| ) | |||
| } | |||
| </Form.Item> | |||
| <Form.Item label={t('flow.to')} name={[field.name, 'to']}> | |||
| <Select | |||
| allowClear | |||
| @@ -113,7 +139,10 @@ const SwitchForm = ({ onValuesChange, node, form }: IOperatorForm) => { | |||
| labelCol={subLabelCol} | |||
| wrapperCol={subWrapperCol} | |||
| > | |||
| <Input placeholder="operator" /> | |||
| <Select | |||
| placeholder="operator" | |||
| options={switchOperatorOptions} | |||
| /> | |||
| </Form.Item> | |||
| <Form.Item | |||
| label={'value'} | |||