seeder-st2110-components 1.0.3 → 1.0.5

package/dist/index.js

@@ -2270,10 +2270,12 @@ const NetworkFieldGroup = _ref => {
       }), mergedFieldConfig.ip.enabled && /*#__PURE__*/jsxRuntime.jsx(antd.Form.Item, {
         label: mergedFieldConfig.ip.label,
         name: [prefix, index, "ip_address"],
+        initialValue: iface.ip_address,
         children: /*#__PURE__*/jsxRuntime.jsx(antd.Input, {})
       }), mergedFieldConfig.netmask.enabled && /*#__PURE__*/jsxRuntime.jsx(antd.Form.Item, {
         label: mergedFieldConfig.netmask.label,
         name: [prefix, index, "netmask"],
+        initialValue: iface.netmask,
         children: /*#__PURE__*/jsxRuntime.jsx(antd.Input, {})
       }), index < interfaces.length - 1 && /*#__PURE__*/jsxRuntime.jsx(antd.Divider, {
         style: {
@@ -2305,59 +2307,79 @@ const NetworkSettingsModal = _ref2 => {
   const [st2110Interfaces, setSt2110Interfaces] = react.useState([]);
   const [lanConfigs, setLanConfigs] = react.useState([]);
   const [submitLoading, setSubmitLoading] = react.useState(false);
-  react.useEffect(() => {
-    const fetchInitialData = async () => {
-      try {
-        const promises = [];
-        if (sections.includes('LAN')) {
-          promises.push(getLanConfig());
-        }
-        if (sections.includes('QSFP')) {
-          promises.push(getSysConfig());
-        }
-        const results = await Promise.allSettled(promises);
-        if (sections.includes('LAN')) {
-          const lanResult = results[sections.indexOf('LAN')];
-          if (lanResult.status === 'fulfilled') {
-            setLanConfigs(lanResult.value);
-          }
+  const [isInitialized, setIsInitialized] = react.useState(false);
+  const fetchData = react.useCallback(async () => {
+    if (!open) return;
+    try {
+      const promises = [];
+      if (sections.includes('LAN')) {
+        promises.push(getLanConfig());
+      }
+      if (sections.includes('QSFP')) {
+        promises.push(getSysConfig());
+      }
+      const results = await Promise.allSettled(promises);
+      if (sections.includes('LAN')) {
+        const lanResult = results[0];
+        if (lanResult.status === 'fulfilled') {
+          setLanConfigs(lanResult.value || []);
         }
-        if (sections.includes('QSFP')) {
-          const sysResult = results[sections.indexOf('QSFP')];
-          if (sysResult.status === 'fulfilled' && sysResult.value) {
-            setSt2110Interfaces(sysResult.value.st2110_interfaces || []);
-          }
+      }
+      if (sections.includes('QSFP')) {
+        const sysResult = sections.includes('LAN') ? results[1] : results[0];
+        if (sysResult.status === 'fulfilled' && sysResult.value) {
+          setSt2110Interfaces(sysResult.value.st2110_interfaces || []);
         }
-      } catch (error) {
-        console.error('Failed to fetch data:', error);
       }
-    };
-    if (open) {
-      fetchInitialData();
+      setIsInitialized(true);
+    } catch (error) {
+      console.error('Failed to fetch data:', error);
     }
   }, [open, getLanConfig, getSysConfig, sections]);
+  react.useEffect(() => {
+    if (open) {
+      fetchData();
+    }
+  }, [open, fetchData]);
+
+  // 当模态框关闭时重置状态
+  react.useEffect(() => {
+    if (!open) {
+      setIsInitialized(false);
+      setLanConfigs([]);
+      setSt2110Interfaces([]);
+      form.resetFields();
+    }
+  }, [open, form]);
 
   // 动态初始值配置
   const initialValues = react.useMemo(() => {
     const values = {};
-    if (sections.includes('LAN')) {
+    if (sections.includes('LAN') && lanConfigs.length > 0) {
       values.LAN = lanConfigs.map(config => ({
         connection_id: config.connection_id,
         display_name: config.display_name,
         ip_address: config.ip_address,
         netmask: config.netmask
-      })) ?? [];
+      }));
     }
-    if (sections.includes('QSFP')) {
-      values.QSFP = st2110Interfaces?.map(iface => ({
+    if (sections.includes('QSFP') && st2110Interfaces.length > 0) {
+      values.QSFP = st2110Interfaces.map(iface => ({
         id: iface.id,
         display_name: iface.display_name,
         ip_address: iface.ip_address
-      })) ?? [];
+      }));
     }
     return values;
   }, [lanConfigs, st2110Interfaces, sections]);
-  const handleSuccess = async function () {
+
+  // 当初始值准备好后设置表单值
+  react.useEffect(() => {
+    if (isInitialized && Object.keys(initialValues).length > 0) {
+      form.setFieldsValue(initialValues);
+    }
+  }, [initialValues, isInitialized, form]);
+  const handleSuccess = react.useCallback(async function () {
     let isPopup = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
     let messageText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'Success';
     message.success(messageText);
@@ -2378,8 +2400,8 @@ const NetworkSettingsModal = _ref2 => {
       }
     }
     onClose();
-  };
-  const handleSubmit = async () => {
+  }, [message, modal, getSysConfig, restart, onClose]);
+  const handleSubmit = react.useCallback(async () => {
     setSubmitLoading(true);
     try {
       const values = await form.validateFields();
@@ -2421,7 +2443,7 @@ const NetworkSettingsModal = _ref2 => {
     } finally {
       setSubmitLoading(false);
     }
-  };
+  }, [form, sections, lanConfigs, st2110Interfaces, updateLanConfig, updateSysConfig, handleSuccess, message]);
 
   // 合并默认模态框属性和传入的属性
   const mergedModalProps = {
@@ -2445,7 +2467,6 @@ const NetworkSettingsModal = _ref2 => {
   // 合并默认表单属性和传入的属性
   const mergedFormProps = {
     form: form,
-    initialValues: initialValues,
     labelCol: {
       span: 6
     },
@@ -2459,15 +2480,15 @@ const NetworkSettingsModal = _ref2 => {
     ...mergedModalProps,
     children: /*#__PURE__*/jsxRuntime.jsxs(antd.Form, {
       ...mergedFormProps,
-      children: [sections.includes('LAN') && initialValues.LAN && initialValues.LAN.length > 0 && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [sections.includes('LAN') && lanConfigs.length > 0 && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [/*#__PURE__*/jsxRuntime.jsx(NetworkFieldGroup, {
           prefix: "LAN",
-          interfaces: initialValues.LAN,
+          interfaces: lanConfigs,
           fieldConfig: fieldConfig.LAN
-        }), sections.includes('QSFP') && /*#__PURE__*/jsxRuntime.jsx(antd.Divider, {})]
-      }), sections.includes('QSFP') && initialValues.QSFP && initialValues.QSFP.length > 0 && /*#__PURE__*/jsxRuntime.jsx(NetworkFieldGroup, {
+        }), sections.includes('QSFP') && st2110Interfaces.length > 0 && /*#__PURE__*/jsxRuntime.jsx(antd.Divider, {})]
+      }), sections.includes('QSFP') && st2110Interfaces.length > 0 && /*#__PURE__*/jsxRuntime.jsx(NetworkFieldGroup, {
         prefix: "QSFP",
-        interfaces: initialValues.QSFP,
+        interfaces: st2110Interfaces,
         fieldConfig: fieldConfig.QSFP
       })]
     })