fix: matching parameters of Upload component、fixed date formatting an…

…d Reduced reference (#1914)

# Description

Please include a summary of the change and which issue is fixed. Please
also include relevant motivation and context. List any dependencies that
are required for this change.

# How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide
instructions so we can reproduce. Please also list any relevant details
for your test configuration

# Snapshots:

Include snapshots for easier review.

# Checklist:

- [ ] My code follows the style guidelines of this project
- [ ] I have already rebased the commits and make the commit message
conform to the project standard.
- [ ] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [ ] Any dependent changes have been merged and published in downstream
modules

web/components/flow/canvas-node.tsx

@@ -23,7 +23,6 @@ type CanvasNodeProps = {
 function TypeLabel({ label }: { label: string }) {
   return <div className='w-full h-8 align-middle font-semibold'>{label}</div>;
 }
-const forceTypeList = ['file', 'multiple_files', 'time','images','csv_file'];
 
 const CanvasNode: React.FC<CanvasNodeProps> = ({ data }) => {
   const node = data;
@@ -135,10 +134,7 @@ const CanvasNode: React.FC<CanvasNodeProps> = ({ data }) => {
 
   function onParameterValuesChange(changedValues: any, allValues: any) {
     const [changedKey, changedVal] = Object.entries(changedValues)[0];
-
-    if (!allValues?.force && forceTypeList.includes(changedKey)) {
-      return;
-    }
+
     updateCurrentNodeValue(changedKey, changedVal);
     if (changedVal) {
       updateDependsNodeValue(changedKey, changedVal);

web/components/flow/node-param-handler.tsx

@@ -103,7 +103,7 @@ const NodeParamHandler: React.FC<NodeParamHandlerProps> = ({ formValuesChange,no
       case 'slider':
         return renderSlider(data);
       case 'date_picker':
-        return renderDatePicker( data );
+        return renderDatePicker({ data,formValuesChange });
       case 'time_picker':
         return renderTimePicker({ data,formValuesChange });
       case 'tree_select':

web/components/flow/node-renderer/date-picker.tsx

@@ -1,9 +1,23 @@
 import { IFlowNodeParameter } from '@/types/flow';
 import { convertKeysToCamelCase } from '@/utils/flow';
 import { DatePicker } from 'antd';
+import type { DatePickerProps } from 'antd';
 
-export const renderDatePicker = (data: IFlowNodeParameter) => {
+type Props = {
+  formValuesChange:any,
+  data: IFlowNodeParameter;
+  onChange?: (value: any) => void;
+};
+export const renderDatePicker = (params: Props) => {
+  const { data ,formValuesChange} = params;
   const attr = convertKeysToCamelCase(data.ui?.attr || {});
 
-  return <DatePicker {...attr} className="w-full" placeholder="please select a date" />;
+  const onChange: DatePickerProps['onChange'] = (date, dateString) => {
+    formValuesChange({
+      [data.name]:dateString
+    })
+  };
+
+
+  return <DatePicker  onChange={onChange} {...attr} className="w-full" placeholder="please select a date" />;
 };

web/components/flow/node-renderer/time-picker.tsx

@@ -15,8 +15,8 @@ export const renderTimePicker = (params: Props) => {
 
   const onChangeTime: TimePickerProps['onChange'] = (time, timeString) => {
     formValuesChange({
-      time:timeString
-    },{force:true})
+      [data.name]:timeString
+    })
   };
 
   return <TimePicker {...attr} onChange={onChangeTime}  className="w-full" placeholder="please select a moment" />;

web/components/flow/node-renderer/upload.tsx

@@ -15,21 +15,19 @@ export const renderUpload = (params: Props) => {
   const { t } = useTranslation();
   const urlList = useRef<string[]>([]);
   const { data ,formValuesChange} = params;
-  const form = Form.useFormInstance()
-
+
   const attr = convertKeysToCamelCase(data.ui?.attr || {});
   const [uploading, setUploading] = useState(false);
   const [uploadType, setUploadType] = useState('');
-
   const getUploadSuccessUrl = (url: string) => {
     if (urlList.current.length === data.ui.attr.max_count) {
       urlList.current.pop();
     }
     urlList.current.push(url);
     if (data.ui.attr.max_count === 1) {
-      formValuesChange({file:urlList.current.toString()},{force:true})
+      formValuesChange({[data.name]:urlList.current.toString()})
     }else{
-      formValuesChange({multiple_files:JSON.stringify(urlList.current)},{force:true})
+      formValuesChange({[data.name]:urlList.current})
     }
   };
 
@@ -38,10 +36,11 @@ export const renderUpload = (params: Props) => {
     if (index !== -1) {
       urlList.current.splice(index, 1);
     }
+    setUploading(false);
     if (data.ui.attr.max_count === 1) {
-      formValuesChange({file:urlList.current.toString()},{force:true})
+      formValuesChange({[data.name]:urlList.current.toString()})
     }else{
-      formValuesChange({multiple_files:JSON.stringify(urlList.current)},{force:true})
+      formValuesChange({[data.name]:urlList.current})
     }
   };
 
@@ -54,6 +53,7 @@ export const renderUpload = (params: Props) => {
     onChange(info) {
       setUploading(true);
       if (info.file.status !== 'uploading') {
+        setUploading(false);
       }
       if (info.file.status === 'done') {
         setUploading(false);