fix: form input value type & default form & ui (#2802)

* fix: form input value type & default form & ui

* variables form ui
This commit is contained in:
heheer
2024-09-26 16:33:38 +08:00
committed by GitHub
parent 54e0a0eab1
commit 78d15c2a2f
4 changed files with 15 additions and 6 deletions

View File

@@ -215,9 +215,9 @@ const RenderUserFormInteractive = React.memo(function RenderFormInput({
<Flex flexDirection={'column'} gap={2} w={'250px'}> <Flex flexDirection={'column'} gap={2} w={'250px'}>
{interactive.params.inputForm?.map((input) => ( {interactive.params.inputForm?.map((input) => (
<Box key={input.label}> <Box key={input.label}>
<Flex mb={1}> <Flex mb={1} alignItems={'center'}>
<FormLabel required={input.required}>{input.label}</FormLabel> <FormLabel required={input.required}>{input.label}</FormLabel>
<QuestionTip ml={1} label={input.description} /> {input.description && <QuestionTip ml={1} label={input.description} />}
</Flex> </Flex>
{input.type === FlowNodeInputTypeEnum.input && ( {input.type === FlowNodeInputTypeEnum.input && (
<Input <Input
@@ -247,6 +247,7 @@ const RenderUserFormInteractive = React.memo(function RenderFormInput({
max={input.max} max={input.max}
isDisabled={interactive.params.submitted} isDisabled={interactive.params.submitted}
bg={'white'} bg={'white'}
rounded={'md'}
> >
<NumberInputField <NumberInputField
bg={'white'} bg={'white'}

View File

@@ -14,7 +14,10 @@ export const defaultFormInput: UserInputFormItemType = {
type: FlowNodeInputTypeEnum.input, type: FlowNodeInputTypeEnum.input,
key: '', key: '',
label: '', label: '',
description: '',
value: '', value: '',
maxLength: undefined,
defaultValue: '',
valueType: WorkflowIOValueTypeEnum.string, valueType: WorkflowIOValueTypeEnum.string,
required: false required: false
}; };
@@ -76,6 +79,10 @@ const InputFormEditModal = ({
} }
]; ];
const defaultValueType = inputTypeList
.flat()
.find((item) => item.value === inputType)?.defaultValueType;
const onSubmitSuccess = useCallback( const onSubmitSuccess = useCallback(
(data: UserInputFormItemType, action: 'confirm' | 'continue') => { (data: UserInputFormItemType, action: 'confirm' | 'continue') => {
const isChangeKey = defaultValue.key !== data.key; const isChangeKey = defaultValue.key !== data.key;
@@ -90,6 +97,7 @@ const InputFormEditModal = ({
} }
data.key = data.label; data.key = data.label;
data.valueType = defaultValueType;
if (action === 'confirm') { if (action === 'confirm') {
onSubmit(data); onSubmit(data);
@@ -103,7 +111,7 @@ const InputFormEditModal = ({
reset(defaultFormInput); reset(defaultFormInput);
} }
}, },
[toast, t, reset, onSubmit, onClose, defaultFormInput] [toast, t, reset, onSubmit, onClose, defaultFormInput, defaultValueType]
); );
const onSubmitError = useCallback( const onSubmitError = useCallback(
@@ -192,6 +200,7 @@ const InputFormEditModal = ({
onClose={onClose} onClose={onClose}
onSubmitSuccess={onSubmitSuccess} onSubmitSuccess={onSubmitSuccess}
onSubmitError={onSubmitError} onSubmitError={onSubmitError}
valueType={defaultValueType}
/> />
</Flex> </Flex>
</MyModal> </MyModal>

View File

@@ -145,7 +145,7 @@ const NodeFormInput = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
)} )}
</HStack> </HStack>
<TableContainer> <TableContainer borderWidth={'1px'} borderRadius={'md'} borderBottom="none">
<Table bg={'white'}> <Table bg={'white'}>
<Thead> <Thead>
<Tr> <Tr>
@@ -187,7 +187,6 @@ const NodeFormInput = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
w={'16px'} w={'16px'}
color={'myGray.600'} color={'myGray.600'}
cursor={'pointer'} cursor={'pointer'}
ml={2}
_hover={{ color: 'red.500' }} _hover={{ color: 'red.500' }}
onClick={() => { onClick={() => {
onDelete(item.key); onDelete(item.key);

View File

@@ -149,7 +149,7 @@ const InputTypeConfig = ({
</Flex> </Flex>
{/* value type */} {/* value type */}
{valueType && ( {type === 'plugin' && (
<Flex alignItems={'center'}> <Flex alignItems={'center'}>
<FormLabel flex={'0 0 100px'} fontWeight={'medium'}> <FormLabel flex={'0 0 100px'} fontWeight={'medium'}>
{t('common:core.module.Data Type')} {t('common:core.module.Data Type')}