fix: cluster value setting, volumes setting

src/pages/cluster-management/components/volumes-config.tsx

@@ -1,7 +1,9 @@
 import ListMap from '@/components/dynamic-form/components/list-map';
+import { statusType } from '@/components/dynamic-form/config/types';
+import useValidateFields from '@/components/dynamic-form/hooks/use-validate-fields';
 import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useState } from 'react';
 import { fieldConfig } from '../config/cloud-options-config';
 
 const volumeOptions = fieldConfig.volumes;
@@ -14,21 +16,56 @@ const CloudOptions: React.FC<{
   const intl = useIntl();
   const form = Form.useFormInstance();
   const volumes = Form.useWatch(['cloud_options', volumeOptions.name], form);
+  const [validateStatusList, setValidateStatusList] = useState<
+    { [key: string]: statusType }[]
+  >([]);
 
-  const handleOnChange = (name: string, value: any) => {
-    console.log('handleOnChange========', name, value);
-    form.setFieldValue(['cloud_options', name], value);
+  const updateValidateStatusList = (list: { [key: string]: statusType }[]) => {
+    setValidateStatusList(list);
   };
 
+  const { listMapValidator, toggleValidation } = useValidateFields({
+    requiredFields: volumeOptions.required,
+    setValidateStatusList: updateValidateStatusList
+  });
+
+  const handleOnChange = (value: any) => {
+    toggleValidation(true);
+    form.setFieldValue(['cloud_options', volumeOptions.name], value);
+  };
+
+  const handleOnAdd = (data: any[]) => {
+    toggleValidation(false);
+    form.setFieldValue(['cloud_options', volumeOptions.name], data);
+    toggleValidation(true);
+  };
+
+  const handleOnDelete = (deletedItem: any, data: any[]) => {
+    toggleValidation(false);
+    form.setFieldValue(['cloud_options', volumeOptions.name], data);
+    toggleValidation(true);
+  };
+  console.log('disabled=====', disabled);
   return (
-    <Form.Item name={['cloud_options', volumeOptions.name as string]}>
+    <Form.Item
+      name={['cloud_options', volumeOptions.name as string]}
+      rules={[
+        {
+          validator: listMapValidator
+        }
+      ]}
+    >
       <ListMap
+        validateStatusList={validateStatusList}
         btnText={intl.formatMessage({ id: 'clusters.workerpool.volumes.add' })}
         label={intl.formatMessage({ id: 'clusters.workerpool.volumes' })}
         dataList={volumes || []}
         properties={volumeOptions.properties || {}}
+        requiredFields={volumeOptions.required || []}
         disabled={disabled}
-        onChange={(value) => handleOnChange(volumeOptions.name, value)}
+        onAdd={handleOnAdd}
+        onDelete={handleOnDelete}
+        onChange={handleOnChange}
       />
     </Form.Item>
   );