chore: form tabs active change

src/pages/_components/collapse-panel/index.tsx

@@ -33,9 +33,10 @@ const CollapsePanel: React.FC<{
   items: CollapseProps['items'];
   activeKey: string | string[];
   accordion?: boolean;
+  defaultActiveKey?: string | string[];
   onChange?: (key: string | string[]) => void;
   styles?: Record<string, React.CSSProperties>;
-}> = ({ items, activeKey, accordion, onChange, styles }) => {
+}> = ({ items, activeKey, accordion, defaultActiveKey, onChange, styles }) => {
   return (
     <CollapseInner
       expandIconPlacement="start"
@@ -43,6 +44,7 @@ const CollapsePanel: React.FC<{
       ghost
       accordion={accordion}
       activeKey={activeKey}
+      defaultActiveKey={defaultActiveKey}
       onChange={onChange}
       destroyOnHidden={false}
       styles={{

src/pages/_components/scroll-spy-tabs/use-finish-failed.ts

@@ -0,0 +1,44 @@
+interface FinishFailedOptions {
+  requiredFields: {
+    [tab: string]: {
+      sort: number;
+      fields: string[];
+    };
+  };
+  onTargetChange: (key: string) => void;
+  updateActiveKey: (key: string[]) => void;
+}
+
+const useFinishFailed = (options: FinishFailedOptions) => {
+  const { requiredFields, onTargetChange, updateActiveKey } = options;
+  const handleOnFinishFailed = (errorInfo: any) => {
+    const { errorFields } = errorInfo;
+
+    console.log('Finish failed:', errorInfo);
+
+    if (errorFields && errorFields.length > 0) {
+      const collapseKeys: { sort: number; key: string }[] = [];
+      const names = errorFields.map((item: any) => item.name[0]);
+      Object.entries(requiredFields).forEach(([tab, { fields, sort }]) => {
+        const hasError = fields.some((field: string) => names.includes(field));
+        if (hasError) {
+          collapseKeys.push({ sort, key: tab });
+        }
+      });
+      if (collapseKeys.length > 0) {
+        const keys = collapseKeys
+          .sort((a, b) => a.sort - b.sort)
+          .map((item) => item.key);
+
+        updateActiveKey(keys);
+        onTargetChange(collapseKeys[0].key);
+      }
+    }
+  };
+
+  return {
+    handleOnFinishFailed
+  };
+};
+
+export default useFinishFailed;

src/pages/_components/scroll-spy-tabs/use-scroll-active-change.ts

@@ -0,0 +1,39 @@
+import { useState } from 'react';
+
+const useScrollActiveChange = (options: {
+  initalActiveKeys: string[];
+  initialCollapseKeys?: string[];
+}) => {
+  const [activeKey, setActiveKey] = useState<string[]>(
+    options.initalActiveKeys
+  );
+  const [collapseKeys, setCollapseKeys] = useState<string[]>(
+    options.initialCollapseKeys || options.initalActiveKeys
+  );
+
+  const handleActiveChange = (key: string[]) => {
+    setActiveKey(key);
+    setCollapseKeys(key);
+  };
+
+  const handleOnCollapseChange = (keys: string | string[]) => {
+    const keysArray = Array.isArray(keys) ? keys : [keys];
+    setActiveKey(keysArray);
+    setCollapseKeys(keysArray);
+  };
+
+  const updateActiveKey = (keys: string[]) => {
+    setActiveKey((prev: string[]) => [...new Set([...prev, ...keys])]);
+    setCollapseKeys((prev) => [...new Set([...prev, ...keys])]);
+  };
+
+  return {
+    activeKey,
+    collapseKeys,
+    handleActiveChange,
+    handleOnCollapseChange,
+    updateActiveKey
+  };
+};
+
+export default useScrollActiveChange;