[elsa] 智能编排表单节点默认值根据类型渲染为不同的输入形式增强 (#83)

Author: RonnyChan96

framework/elsa/fit-elsa-react/src/components/intelligentForm/FormItemRenderType.jsx

@@ -40,8 +40,8 @@ export const FormItemRenderType = ({itemId, propValue, disabled, onChange, type}
         ];
       case DATA_TYPES.STRING:
         return [
-          {value: RENDER_TYPE.RADIO, label: RENDER_TYPE.RADIO},
           {value: RENDER_TYPE.INPUT, label: RENDER_TYPE.INPUT},
+          {value: RENDER_TYPE.RADIO, label: RENDER_TYPE.RADIO},
         ];
       default:
         return [];

framework/elsa/fit-elsa-react/src/components/intelligentForm/FormItemSelectValue.jsx

@@ -5,7 +5,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 import PropTypes from 'prop-types';
-import {Col, Form, Row} from 'antd';
+import {Col, Form, InputNumber, Row, Switch} from 'antd';
 import {useTranslation} from 'react-i18next';
 import {JadeInput} from '@/components/common/JadeInput.jsx';
 import {DATA_TYPES, FROM_TYPE} from '@/common/Consts.js';
@@ -64,6 +64,47 @@ export const FormItemSelectValue = ({item, shapeStatus, onChange, label, inputRe
     }, {key: 'value', value: e.value}, {key: 'type', value: e.type}]);
   };
 
+  const renderInputValueComponent = (item) => {
+    switch (item.type) {
+      case DATA_TYPES.BOOLEAN:
+        return <Switch
+          disabled={shapeStatus.disabled}
+          style={{marginLeft: '8px'}}
+          onChange={(e) => onInputChange('value', e)}
+          checked={item.value}/>;
+      case DATA_TYPES.INTEGER:
+        return <InputNumber
+          className="jade-input"
+          disabled={shapeStatus.disabled}
+          step={1}
+          precision={0}
+          parser={(value) => value.replace(/[^\d-]/g, '')} // 只允许输入整数部分
+          onChange={(e) => onInputChange('value', e)}
+          stringMode
+          value={item.value}
+        />;
+      case DATA_TYPES.NUMBER:
+        return <InputNumber
+          className="jade-input"
+          disabled={shapeStatus.disabled}
+          step={1}
+          onChange={(e) => onInputChange('value', e)}
+          stringMode
+          value={item.value}
+        />;
+      case DATA_TYPES.STRING:
+      default:
+        return <JadeInput
+          disabled={shapeStatus.disabled}
+          className="jade-input"
+          style={{borderRadius: '0px 8px 8px 0px'}}
+          placeholder={t('plsEnter')}
+          value={item.type === DATA_TYPES.ARRAY || item.type === DATA_TYPES.OBJECT ? JSON.stringify(item.value) : item.value}
+          onChange={(e) => onInputChange('value', e)}
+        />;
+    }
+  };
+
   /* 获取值field. */
   const getValueField = () => {
     if (item.from === FROM_TYPE.INPUT) {
@@ -76,14 +117,7 @@ export const FormItemSelectValue = ({item, shapeStatus, onChange, label, inputRe
         initialValue={item.type === DATA_TYPES.ARRAY || item.type === DATA_TYPES.OBJECT ? JSON.stringify(item.value) : item.value}
         validateTrigger='onBlur'
       >
-        <JadeInput
-          disabled={shapeStatus.disabled}
-          className='jade-input'
-          style={{borderRadius: '0px 8px 8px 0px'}}
-          placeholder={t('plsEnter')}
-          value={item.type === DATA_TYPES.ARRAY || item.type === DATA_TYPES.OBJECT ? JSON.stringify(item.value) : item.value}
-          onChange={(e) => onInputChange('value', e)}
-        />
+        {renderInputValueComponent(item)}
       </Form.Item>;
     } else if (item.from === FROM_TYPE.REFERENCE) {
       return <JadeReferenceTreeSelect

framework/elsa/fit-elsa-react/src/components/intelligentForm/IntelligentInputFormItem.jsx

@@ -9,7 +9,7 @@ import {FormItemName} from '@/components/intelligentForm/FormItemName.jsx';
 import Type from '@/components/common/Type.jsx';
 import React from 'react';
 import {useTranslation} from 'react-i18next';
-import {useDispatch} from '@/components/DefaultRoot.jsx';
+import {useDispatch, useFormContext} from '@/components/DefaultRoot.jsx';
 import {FormItemRenderType} from '@/components/intelligentForm/FormItemRenderType.jsx';
 import {FormItemSelectValue} from '@/components/intelligentForm/FormItemSelectValue.jsx';
 import {RENDER_OPTIONS_TYPE} from '@/components/intelligentForm/Consts.js';
@@ -28,6 +28,7 @@ import {DATA_TYPES, FROM_TYPE} from '@/common/Consts.js';
  */
 const _IntelligentInputFormItem = ({item, items, shapeStatus, output}) => {
   const dispatch = useDispatch();
+  const form = useFormContext();
   const { t } = useTranslation();
 
   /**
@@ -41,6 +42,8 @@ const _IntelligentInputFormItem = ({item, items, shapeStatus, output}) => {
     // 如果 type 是 'type'，清空 renderType
     if (changes.has('type') && changes.get('type') !== item.type) {
       changes.set('renderType', undefined);
+      changes.set('value', null);
+      form.setFieldsValue({[`value-${item.id}`]: undefined});
     }
     dispatch({ type: 'updateParam', id: id, changes });
   };